From 7f30e5f9dff7b4f00d7d7ccf0ded3ff52ef9f9e9 Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Wed, 10 Mar 2021 18:09:13 -0800 Subject: [PATCH] info_overlay: Render Markdown help with frontend Markdown library. Fixes #15375. Signed-off-by: Anders Kaseorg --- static/js/info_overlay.js | 137 +++++++++++++++++++++ static/templates/markdown_help.hbs | 30 +++++ templates/zerver/app/index.html | 1 - templates/zerver/app/markdown_help.html | 154 ------------------------ tools/linter_lib/custom_check.py | 9 -- 5 files changed, 167 insertions(+), 164 deletions(-) create mode 100644 static/templates/markdown_help.hbs diff --git a/static/js/info_overlay.js b/static/js/info_overlay.js index bcf5c5dbe2..a39806d098 100644 --- a/static/js/info_overlay.js +++ b/static/js/info_overlay.js @@ -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 Ctrl+I)", + }, + { + markdown: "**bold**", + usage_html: "(or Ctrl+B)", + }, + { + markdown: "~~strikethrough~~", + }, + { + markdown: "[Zulip website](https://zulip.org)", + usage_html: "(or Ctrl+Shift+L)", + }, + { + markdown: `\ +* Milk +* Tea + * Green tea + * Black tea + * Oolong tea +* Coffee`, + }, + { + markdown: `\ +1. Milk +1. Tea +1. Coffee`, + }, + { + markdown: ":heart:", + usage_html: + '(and many others, from the Noto Project)', + }, + { + markdown: "@**Joe Smith**", + usage_html: "(autocompletes from @joe)", + output_html: '

@Joe Smith

', + effect_html: "(notifies Joe Smith)", + }, + { + markdown: "@_**Joe Smith**", + usage_html: "(autocompletes from @_joe)", + output_html: '

Joe Smith

', + effect_html: "(links to profile but doesn't notify Joe Smith)", + }, + { + markdown: "@**all**", + effect_html: "(notifies all recipients)", + }, + { + markdown: "#**streamName**", + output_html: "

#streamName

", + effect_html: "(links to a stream)", + }, + { + markdown: "/me is busy working", + output_html: '

Iago is busy working

', + 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: `\ +
def zulip():
+    print "Zulip"
`, + }, + { + note_html: i18n.t( + 'To add syntax highlighting to a multi-line code block, add the language\'s first Pygments short name 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 tables with this Markdown-ish table syntax.', + ), + }, +]; + 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, diff --git a/static/templates/markdown_help.hbs b/static/templates/markdown_help.hbs new file mode 100644 index 0000000000..d0226c7af3 --- /dev/null +++ b/static/templates/markdown_help.hbs @@ -0,0 +1,30 @@ + diff --git a/templates/zerver/app/index.html b/templates/zerver/app/index.html index a9a3fc8549..72fcae11ad 100644 --- a/templates/zerver/app/index.html +++ b/templates/zerver/app/index.html @@ -137,7 +137,6 @@
{% include "zerver/app/keyboard_shortcuts.html" %} {% include "zerver/app/search_operators.html" %} - {% include "zerver/app/markdown_help.html" %}
diff --git a/templates/zerver/app/markdown_help.html b/templates/zerver/app/markdown_help.html index eb61e771c9..384d505290 100644 --- a/templates/zerver/app/markdown_help.html +++ b/templates/zerver/app/markdown_help.html @@ -11,160 +11,6 @@ - - - *italic* (or Ctrl + I) - italic - - - **bold** (or Ctrl + B) - bold - - - ~~strikethrough~~ - strikethrough - - - [Zulip website](https://zulip.org) (or Ctrl + Shift + L) - Zulip website - - - * Milk
- * Tea
-   * Green tea
-   * Black tea
-   * Oolong tea
- * Coffee - - - - - - - 1. Milk
- 1. Tea
- 1. Coffee - - 1. Milk
- 2. Tea
- 3. Coffee - - - - :heart: (and many others, from the Noto Project) - :heart: - - - @**Joe Smith**
- (autocompletes from @joe) - @Joe Smith (notifies Joe Smith) - - - @_**Joe Smith**
- (autocompletes from @_joe) - Joe Smith (links to profile but doesn't notify Joe Smith) - - - @**all** - @all (notifies all recipients) - - - #**streamName** - #streamName (links to a stream) - - - /me is busy working
- (send a status message as user Iago) - Iago is busy working - - - Some inline `code` - Some inline code - - - ``` -def zulip(): - print "Zulip" -``` - - 
def zulip():
-    print "Zulip"
- - - - ```python -def zulip(): - print "Zulip" -``` - - 
def zulip():
-    print "Zulip"
- - - - {% trans %}To add syntax highlighting to a multi-line code block, - add the language's first Pygments short name - after the first set of back-ticks. - You can also make a code block by indenting each line with 4 spaces.{% endtrans %} - - - > Quoted -
Quoted
- - - - ```quote -Quoted block -``` -

Quoted block

- - - ```spoiler Always visible heading -This text won't be visible until the user clicks. -``` - -
-
-

Always visible heading

-
- -
-

This text won't be visible until the user clicks.

-
-
- - - - Some inline math $$ e^{i \pi } + 1 = 0 $$ - - Some inline math eiπ+1=0e^{i\pi} + 1 = 0 - - - - ```math -\int_{0}^{1} f(x) dx -``` - - ∫01f(x)dx\int_{0}^{1} f(x) dx - - - - {% trans %}You can also make tables - with this Markdown-ish - table syntax.{% endtrans %} - diff --git a/tools/linter_lib/custom_check.py b/tools/linter_lib/custom_check.py index 783359aef2..621814d4f0 100644 --- a/tools/linter_lib/custom_check.py +++ b/tools/linter_lib/custom_check.py @@ -630,12 +630,6 @@ html_rules: List["Rule"] = [ }, { "pattern": r'title="[^{\:]', - "exclude_line": { - ( - "templates/zerver/app/markdown_help.html", - ':heart:', - ), - }, "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": ['{{ _(name) }}', ''], "bad_lines": ['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: