mirror of https://github.com/zulip/zulip.git
info_overlay: Render Markdown help with frontend Markdown library.
Fixes #15375. Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
Tim Abbott
parent
31e865d9ed
commit
7f30e5f9df
|
|
@ -1,16 +1,153 @@
|
|||
import render_markdown_help from "../templates/markdown_help.hbs";
|
||||
|
||||
import * as common from "./common";
|
||||
import * as components from "./components";
|
||||
import * as hashchange from "./hashchange";
|
||||
import * as keydown_util from "./keydown_util";
|
||||
import * as markdown from "./markdown";
|
||||
import * as overlays from "./overlays";
|
||||
import * as popovers from "./popovers";
|
||||
import * as rendered_markdown from "./rendered_markdown";
|
||||
import * as ui from "./ui";
|
||||
import * as util from "./util";
|
||||
|
||||
// Make it explicit that our toggler is undefined until
|
||||
// set_up_toggler is called.
|
||||
export let toggler;
|
||||
|
||||
const markdown_help_rows = [
|
||||
{
|
||||
markdown: "*italic*",
|
||||
usage_html: "(or <kbd>Ctrl</kbd>+<kbd>I</kbd>)",
|
||||
},
|
||||
{
|
||||
markdown: "**bold**",
|
||||
usage_html: "(or <kbd>Ctrl</kbd>+<kbd>B</kbd>)",
|
||||
},
|
||||
{
|
||||
markdown: "~~strikethrough~~",
|
||||
},
|
||||
{
|
||||
markdown: "[Zulip website](https://zulip.org)",
|
||||
usage_html: "(or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>L</kbd>)",
|
||||
},
|
||||
{
|
||||
markdown: `\
|
||||
* Milk
|
||||
* Tea
|
||||
* Green tea
|
||||
* Black tea
|
||||
* Oolong tea
|
||||
* Coffee`,
|
||||
},
|
||||
{
|
||||
markdown: `\
|
||||
1. Milk
|
||||
1. Tea
|
||||
1. Coffee`,
|
||||
},
|
||||
{
|
||||
markdown: ":heart:",
|
||||
usage_html:
|
||||
'(and <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank" rel="noopener noreferrer">many others</a>, from the <a href="https://code.google.com/p/noto/" target="_blank" rel="noopener noreferrer">Noto Project</a>)',
|
||||
},
|
||||
{
|
||||
markdown: "@**Joe Smith**",
|
||||
usage_html: "(autocompletes from @joe)",
|
||||
output_html: '<p><span class="user-mention">@Joe Smith</span></p>',
|
||||
effect_html: "(notifies Joe Smith)",
|
||||
},
|
||||
{
|
||||
markdown: "@_**Joe Smith**",
|
||||
usage_html: "(autocompletes from @_joe)",
|
||||
output_html: '<p><span class="user-mention">Joe Smith</span></p>',
|
||||
effect_html: "(links to profile but doesn't notify Joe Smith)",
|
||||
},
|
||||
{
|
||||
markdown: "@**all**",
|
||||
effect_html: "(notifies all recipients)",
|
||||
},
|
||||
{
|
||||
markdown: "#**streamName**",
|
||||
output_html: "<p><a>#streamName</a></p>",
|
||||
effect_html: "(links to a stream)",
|
||||
},
|
||||
{
|
||||
markdown: "/me is busy working",
|
||||
output_html: '<p><span class="sender_name-in-status">Iago</span> is busy working</p>',
|
||||
usage_html: "(send a status message as user Iago)",
|
||||
},
|
||||
{
|
||||
markdown: "Some inline `code`",
|
||||
},
|
||||
{
|
||||
markdown: `\
|
||||
\`\`\`
|
||||
def zulip():
|
||||
print "Zulip"
|
||||
\`\`\``,
|
||||
},
|
||||
{
|
||||
markdown: `\
|
||||
\`\`\`python
|
||||
def zulip():
|
||||
print "Zulip"
|
||||
\`\`\``,
|
||||
output_html: `\
|
||||
<div class="codehilite"><pre><span class="k">def</span> <span class="nf">zulip</span><span class="p">():</span>
|
||||
<span class="k">print</span> <span class="s">"Zulip"</span></pre></div>`,
|
||||
},
|
||||
{
|
||||
note_html: i18n.t(
|
||||
'To add syntax highlighting to a multi-line code block, add the language\'s <b>first</b> <a target="_blank" rel="noopener noreferrer" href="https://pygments.org/docs/lexers/">Pygments short name</a> after the first set of back-ticks. You can also make a code block by indenting each line with 4 spaces.',
|
||||
),
|
||||
},
|
||||
{
|
||||
markdown: "> Quoted",
|
||||
},
|
||||
{
|
||||
markdown: `\
|
||||
\`\`\`quote
|
||||
Quoted block
|
||||
\`\`\``,
|
||||
},
|
||||
{
|
||||
markdown: `\
|
||||
\`\`\`spoiler Always visible heading
|
||||
This text won't be visible until the user clicks.
|
||||
\`\`\``,
|
||||
},
|
||||
{
|
||||
markdown: "Some inline math $$ e^{i \\pi} + 1 = 0 $$",
|
||||
},
|
||||
{
|
||||
markdown: `\
|
||||
\`\`\`math
|
||||
\\int_{0}^{1} f(x) dx
|
||||
\`\`\``,
|
||||
},
|
||||
{
|
||||
note_html: i18n.t(
|
||||
'You can also make <a target="_blank" rel="noopener noreferrer" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#wiki-tables">tables</a> with this <a target="_blank" rel="noopener noreferrer" href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#wiki-tables">Markdown-ish table syntax</a>.',
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export function set_up_toggler() {
|
||||
for (const row of markdown_help_rows) {
|
||||
if (row.markdown && !row.output_html) {
|
||||
const message = {raw_content: row.markdown};
|
||||
markdown.apply_markdown(message);
|
||||
row.output_html = util.clean_user_content_links(message.content);
|
||||
}
|
||||
}
|
||||
|
||||
const $markdown_help = $(render_markdown_help({markdown_help_rows}));
|
||||
$markdown_help.find(".rendered_markdown").each(function () {
|
||||
rendered_markdown.update_elements($(this));
|
||||
});
|
||||
$(".informational-overlays .overlay-body").append($markdown_help);
|
||||
|
||||
const opts = {
|
||||
selected: 0,
|
||||
child_wants_focus: true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
<div class="overlay-modal hide" id="message-formatting" tabindex="-1" role="dialog"
|
||||
aria-label="{{t "Message formatting" }}">
|
||||
<div class="modal-body" data-simplebar data-simplebar-auto-hide="false">
|
||||
<div id="markdown-instructions">
|
||||
<table class="table table-striped table-condensed table-rounded table-bordered help-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{{t "You type" }}</th>
|
||||
<th>{{t "You get" }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{{#each markdown_help_rows}}
|
||||
<tr>
|
||||
{{#if note_html}}
|
||||
<td colspan="2">{{{note_html}}}</td>
|
||||
{{else}}
|
||||
<td><div class="preserve_spaces">{{markdown}}</div> {{{usage_html}}}</td>
|
||||
<td class="rendered_markdown">{{{output_html}}} {{{effect_html}}}</td>
|
||||
{{/if}}
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<hr>
|
||||
<a href="/help/format-your-message-using-markdown" target="_blank" rel="noopener noreferrer">{{t "Detailed message formatting documentation" }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -137,7 +137,6 @@
|
|||
<div class="overlay-body">
|
||||
{% include "zerver/app/keyboard_shortcuts.html" %}
|
||||
{% include "zerver/app/search_operators.html" %}
|
||||
{% include "zerver/app/markdown_help.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,160 +11,6 @@
|
|||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
|
||||
<td>*italic* (or <kbd>Ctrl + I</kbd>)</td>
|
||||
<td class="rendered_markdown"><i>italic</i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>**bold** (or <kbd>Ctrl + B</kbd>)</td>
|
||||
<td class="rendered_markdown"><b>bold</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>~~strikethrough~~</td>
|
||||
<td class="rendered_markdown"><del>strikethrough</del></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>[Zulip website](https://zulip.org) (or <kbd>Ctrl + Shift + L</kbd>)</td>
|
||||
<td class="rendered_markdown"><a href="https://zulip.org" target="_blank" rel="noopener noreferrer">Zulip website</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>* Milk<br>
|
||||
* Tea<br>
|
||||
* Green tea<br>
|
||||
* Black tea<br>
|
||||
* Oolong tea<br>
|
||||
* Coffee
|
||||
</td>
|
||||
<td class="rendered_markdown">
|
||||
<ul>
|
||||
<li>Milk</li>
|
||||
<li>Tea
|
||||
<ul>
|
||||
<li>Green tea</li>
|
||||
<li>Black tea</li>
|
||||
<li>Oolong tea</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Coffee</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1. Milk<br>
|
||||
1. Tea<br>
|
||||
1. Coffee
|
||||
</td>
|
||||
<td class="rendered_markdown">1. Milk<br>
|
||||
2. Tea<br>
|
||||
3. Coffee
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>:heart: (and <a href="https://www.webfx.com/tools/emoji-cheat-sheet/" target="_blank" rel="noopener noreferrer">many others</a>, from the <a href="https://code.google.com/p/noto/" target="_blank" rel="noopener noreferrer">Noto Project</a>)</td>
|
||||
<td class="rendered_markdown"><img alt=":heart:" class="emoji" src="/static/generated/emoji/images/emoji/heart.png" title=":heart:" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>@**Joe Smith**<br>
|
||||
(autocompletes from @joe)</td>
|
||||
<td class="rendered_markdown"><span class="user-mention">@Joe Smith</span> (notifies Joe Smith)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>@_**Joe Smith**<br>
|
||||
(autocompletes from @_joe)</td>
|
||||
<td class="rendered_markdown"><span class="user-mention">Joe Smith</span> (links to profile but doesn't notify Joe Smith)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>@**all**</td>
|
||||
<td class="rendered_markdown"><span class="user-mention">@all</span> (notifies all recipients)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>#**streamName**</td>
|
||||
<td class="rendered_markdown"><a>#streamName</a> (links to a stream)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>/me is busy working<br>
|
||||
(send a status message as user Iago)</td>
|
||||
<td class="rendered_markdown"><span class="sender_name-in-status">Iago</span> is busy working</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Some inline `code`</td>
|
||||
<td class="rendered_markdown">Some inline <code>code</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="preserve_spaces">```
|
||||
def zulip():
|
||||
print "Zulip"
|
||||
```</td>
|
||||
<td class="rendered_markdown">
|
||||
<div class="codehilite"><pre>def zulip():
|
||||
print "Zulip"</pre></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="preserve_spaces">```python
|
||||
def zulip():
|
||||
print "Zulip"
|
||||
```</td>
|
||||
<td class="rendered_markdown">
|
||||
<div class="codehilite"><pre><span class="k">def</span> <span class="nf">zulip</span><span class="p">():</span>
|
||||
<span class="k">print</span> <span class="s">"Zulip"</span></pre></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">{% trans %}To add syntax highlighting to a multi-line code block,
|
||||
add the language's <b>first</b> <a target="_blank" rel="noopener noreferrer" href="https://pygments.org/docs/lexers/">Pygments short name</a>
|
||||
after the first set of back-ticks.
|
||||
You can also make a code block by indenting each line with 4 spaces.{% endtrans %}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>> Quoted</td>
|
||||
<td class="rendered_markdown"><blockquote>Quoted</blockquote></td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="preserve_spaces">```quote
|
||||
Quoted block
|
||||
```</td>
|
||||
<td class="rendered_markdown"><blockquote><p>Quoted block</p></blockquote></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="preserve_spaces">```spoiler Always visible heading
|
||||
This text won't be visible until the user clicks.
|
||||
```</td>
|
||||
<td class="rendered_markdown">
|
||||
<div class="spoiler-block">
|
||||
<div class="spoiler-header"><span class="spoiler-button"><span class="spoiler-arrow"></span></span>
|
||||
<p>Always visible heading</p>
|
||||
</div>
|
||||
|
||||
<div class="spoiler-content">
|
||||
<p>This text won't be visible until the user clicks.</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Some inline math $$ e^{i \pi } + 1 = 0 $$</td>
|
||||
<td class="rendered_markdown">
|
||||
Some inline math <span class="katex"><span class="katex-mathml"><math><semantics><mrow><msup><mi>e</mi><mrow><mi>i</mi><mi>π</mi></mrow></msup><mo>+</mo><mn>1</mn><mo>=</mo><mn>0</mn></mrow><annotation encoding="application/x-tex">e^{i\pi} + 1 = 0</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height: 0.874664em;"></span><span class="strut bottom" style="height: 0.957994em; vertical-align: -0.08333em;"></span><span class="base"><span class="mord"><span class="mord mathit">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.874664em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathit mtight">i</span><span class="mord mathit mtight" style="margin-right: 0.03588em;">π</span></span></span></span></span></span></span></span></span><span class="mbin">+</span><span class="mord mathrm">1</span><span class="mrel">=</span><span class="mord mathrm">0</span></span></span></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="preserve_spaces">```math
|
||||
\int_{0}^{1} f(x) dx
|
||||
```</td>
|
||||
<td>
|
||||
<span class="katex-display"><span class="katex"><span class="katex-mathml"><math><semantics><mrow><msubsup><mo>∫</mo><mn>0</mn><mn>1</mn></msubsup><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo><mi>d</mi><mi>x</mi></mrow><annotation encoding="application/x-tex">\int_{0}^{1} f(x) dx</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="strut" style="height: 1.56401em;"></span><span class="strut bottom" style="height: 2.47596em; vertical-align: -0.91195em;"></span><span class="base"><span class="mop"><span class="mop op-symbol large-op" style="margin-right: 0.44445em; position: relative; top: -0.001125em;">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.56401em;"><span class="" style="top: -1.78805em; margin-left: -0.44445em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathrm mtight">0</span></span></span></span><span class="" style="top: -3.8129em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight"><span class="mord mathrm mtight">1</span></span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span class="vlist" style="height: 0.91195em;"></span></span></span></span></span><span class="mord mathit" style="margin-right: 0.10764em;">f</span><span class="mopen">(</span><span class="mord mathit">x</span><span class="mclose">)</span><span class="mord mathit">d</span><span class="mord mathit">x</span></span></span></span></span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="rendered_markdown" colspan="2">{% trans %}You can also make <a target="_blank" rel="noopener noreferrer"
|
||||
href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#wiki-tables">tables</a>
|
||||
with this <a target="_blank" rel="noopener noreferrer"
|
||||
href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#wiki-tables">Markdown-ish
|
||||
table syntax</a>.{% endtrans %}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -630,12 +630,6 @@ html_rules: List["Rule"] = [
|
|||
},
|
||||
{
|
||||
"pattern": r'title="[^{\:]',
|
||||
"exclude_line": {
|
||||
(
|
||||
"templates/zerver/app/markdown_help.html",
|
||||
'<td class="rendered_markdown"><img alt=":heart:" class="emoji" src="/static/generated/emoji/images/emoji/heart.png" title=":heart:" /></td>',
|
||||
),
|
||||
},
|
||||
"exclude": {
|
||||
"templates/zerver/emails",
|
||||
"templates/analytics/realm_details.html",
|
||||
|
|
@ -649,7 +643,6 @@ html_rules: List["Rule"] = [
|
|||
"exclude": {
|
||||
"static/templates/settings/display_settings.hbs",
|
||||
"templates/zerver/app/keyboard_shortcuts.html",
|
||||
"templates/zerver/app/markdown_help.html",
|
||||
},
|
||||
"good_lines": ['<img src="{{source_url}}" alt="{{ _(name) }}" />', '<img alg="" />'],
|
||||
"bad_lines": ['<img alt="Foo Image" />'],
|
||||
|
|
@ -679,8 +672,6 @@ html_rules: List["Rule"] = [
|
|||
+ "'"
|
||||
+ "](display: ?none|background: {{|color: {{|background-color: {{).*",
|
||||
"exclude": {
|
||||
# KaTeX output uses style attribute
|
||||
"templates/zerver/app/markdown_help.html",
|
||||
# 5xx page doesn't have external CSS
|
||||
"static/html/5xx.html",
|
||||
# exclude_pattern above handles color, but have other issues:
|
||||
|
|
|
|||
Loading…
Reference in New Issue