Install and use ToastUi markdown editor

Replace all usages of pagedown-bootstrap editor with the new editor. Add styles to ensure the editor preview matches the final output.
2024-04-11 10:34:37 +02:00
parent 96f5f1f8d7
commit 9c71c6667a
10 changed files with 362 additions and 37 deletions
--- a/app/assets/javascripts/markdown_editor.js
+++ b/app/assets/javascripts/markdown_editor.js
@ -0,0 +1,77 @@
+/**
+ * ToastUi editor initializer
+ *
+ * This script transforms form textareas created with 
+ * "PagedownFormBuilder" into ToastUi markdown editors.
+ *
+ */
+
+const initializeMarkdownEditors = () => {
+  const editors = document.querySelectorAll(
+    '[data-behavior="markdown-editor-widget"]'
+  );
+
+  editors.forEach((editor) => {
+    const formInput = document.querySelector(`#${editor.dataset.id}`);
+    if (!editor || !formInput) return;
+
+    const toastEditor = new ToastUi({
+      el: editor,
+      theme: window.getCurrentTheme(),
+      initialValue: formInput.value,
+      placeholder: formInput.placeholder,
+      extendedAutolinks: true,
+      linkAttributes: {
+        target: "_blank",
+      },
+      previewHighlight: false,
+      height: "400px",
+      autofocus: false,
+      usageStatistics: false,
+      language: I18n.locale,
+      toolbarItems: [
+        ["heading", "bold", "italic"],
+        ["link", "quote", "code", "codeblock"],
+        ["ul", "ol"],
+      ],
+      initialEditType: "markdown",
+      events: {
+        change: () => {
+          // Keep real form <textarea> in sync
+          const content = toastEditor.getMarkdown();
+          formInput.value = content;
+        },
+      },
+    });
+
+    // Prevent user from drag'n'dropping images in the editor
+    toastEditor.removeHook("addImageBlobHook");
+
+    // Delegate focus from form input to toast ui editor
+    formInput.addEventListener("focus", () => {
+      toastEditor.focus();
+    });
+  });
+};
+
+const setMarkdownEditorTheme = (theme) => {
+  const editors = document.querySelectorAll(".toastui-editor-defaultUI");
+  editors.forEach((editor) => {
+    const hasDarkTheme = editor.classList.contains("toastui-editor-dark");
+    if (
+      (hasDarkTheme && theme === "light") ||
+      (!hasDarkTheme && theme === "dark")
+    ) {
+      editor.classList.toggle("toastui-editor-dark");
+    }
+  });
+};
+
+$(document).on("turbolinks:load", function () {
+  initializeMarkdownEditors();
+});
+
+$(document).on("theme:change", function (event) {
+  const newTheme = event.detail.currentTheme;
+  setMarkdownEditorTheme(newTheme);
+});
--- a/app/assets/stylesheets/base.css.scss
+++ b/app/assets/stylesheets/base.css.scss
@ -3,7 +3,12 @@ h1 {
  margin-bottom: 0.5em;
 }

-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
  font-weight: 500;
 }

@ -12,26 +17,36 @@ h1, h2, h3, h4, h5, h6 {
  color: var(--bs-dark-text-emphasis);
 }

-a:not(.dropdown-item, .dropdown-toggle, .dropdown-link, .btn, .page-link), .btn-link {
+a:not(.dropdown-item, .dropdown-toggle, .dropdown-link, .btn, .page-link),
+.btn-link {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
-
  }
 }

-i.fa-solid, i.fa-regular, i.fa-solid {
+i.fa-solid,
+i.fa-regular,
+i.fa-solid {
  margin-right: 0.5em;
 }

-pre, .output-element {
+pre,
+.output-element {
  background-color: var(--bs-light-bg-subtle);
  margin: 0;
-  padding: .25rem!important;
+  padding: 0.25rem !important;
  border: 1px solid var(--bs-border-color-translucent);
 }

+blockquote {
+  border-left: 4px solid var(--bs-secondary-bg);
+  color: var(--bs-secondary-text-emphasis);
+  margin: 14px 0;
+  padding: 0 16px;
+}
+
 span.caret {
  margin-left: 0.5em;
 }
@ -125,19 +140,25 @@ html[data-bs-theme="light"] {
 }

@-webkit-keyframes sk-rotateplane {
-  0% { -webkit-transform: perspective(120px) }
-  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+  0% {
+    -webkit-transform: perspective(120px);
+  }
+  50% {
+    -webkit-transform: perspective(120px) rotateY(180deg);
+  }
+  100% {
+    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
+  }
 }

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
--- a/app/helpers/pagedown_form_builder.rb
+++ b/app/helpers/pagedown_form_builder.rb
@ -1,41 +1,31 @@
 # frozen_string_literal: true

 class PagedownFormBuilder < ActionView::Helpers::FormBuilder
-  def pagedown(method, args)
+  def pagedown(method, args = {})
    # Adopt simple form builder to work with form_for
    @attribute_name = method
    @input_html_options = args[:input_html]

    @template.capture do
-      @template.concat wmd_button_bar
-      @template.concat wmd_textarea
-      @template.concat wmd_preview if show_wmd_preview?
+      @template.concat form_textarea
+      @template.concat @template.tag.div(class: 'markdown-editor', data: {behavior: 'markdown-editor-widget', id: label_target})
    end
  end

  private

-  def wmd_button_bar
-    @template.tag.div(nil, id: "wmd-button-bar-#{base_id}")
-  end
-
-  def wmd_textarea
+  def form_textarea
    @template.text_area @object_name, @attribute_name,
-      **@input_html_options,
-      class: 'form-control wmd-input',
-      id: "wmd-input-#{base_id}"
-  end
-
-  def wmd_preview
-    @template.tag.div(nil, class: 'wmd-preview',
-      id: "wmd-preview-#{base_id}")
-  end
-
-  def show_wmd_preview?
-    @input_html_options[:preview].present?
+    **(@input_html_options || {}),
+      id: label_target,
+      class: 'd-none'
  end

  def base_id
-    options[:pagedown_id_suffix] || @attribute_name
+    options[:markdown_id_suffix] || @attribute_name
+  end
+
+  def label_target
+    "markdown-input-#{base_id}"
  end
 end
--- a/app/javascript/toast-ui.js
+++ b/app/javascript/toast-ui.js
@ -0,0 +1,7 @@
+/* eslint no-console:0 */
+
+// JS
+import ToastUi from "@toast-ui/editor";
+// Import German locales (english ones are included by default)
+import "@toast-ui/editor/dist/i18n/de-de";
+window.ToastUi = ToastUi
--- a/app/javascript/toast-ui.scss
+++ b/app/javascript/toast-ui.scss
@ -0,0 +1,71 @@
+@import "@toast-ui/editor/dist/toastui-editor.css";
+@import "@toast-ui/editor/dist/theme/toastui-editor-dark.css";
+
+.markdown-editor {
+  * {
+    box-sizing: content-box;
+  }
+}
+
+// /*------------------------------------*\
+//     $ToastUI overrides
+// \*------------------------------------*/
+
+// Overrides for the preview section to match real output styles
+.toastui-editor-contents {
+  font-size: 14px;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0.5em 0 0.5em 0;
+    padding: 0;
+    border-bottom: 0;
+    font-weight: normal;
+  }
+
+  blockquote {
+    border-left: 4px solid var(--bs-secondary-bg);
+    p {
+      color: var(--bs-secondary-text-emphasis);
+    }
+  }
+
+  ul > li::before {
+    content: none;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ul ul {
+    list-style-type: circle;
+  }
+
+  ol > li::before {
+    color: black;
+  }
+
+  code {
+    color: var(--bs-code-color);
+    background-color: transparent !important;
+  }
+
+  pre {
+    border: 1px solid var(--bs-border-color-translucent);
+  }
+
+  del {
+    color: var(--bs-secondary-color);
+  }
+}
+
+// Ensure multiline backquotes have same text color in "write" mode
+.toastui-editor-md-marked-text,
+.toastui-editor-md-block-quote {
+  color: var(--bs-secondary-text-emphasis);
+}
--- a/app/views/exercises/_form.html.slim
+++ b/app/views/exercises/_form.html.slim
@ -3,6 +3,8 @@
     Otherwise, code might not be highlighted correctly (race condition)
  meta name='turbolinks-visit-control' content='reload'
  - append_javascript_pack_tag('sortable')
+  - append_javascript_pack_tag('toast-ui')
+  - append_stylesheet_pack_tag('toast-ui')

 - execution_environments = ExecutionEnvironment.where.not(file_type_id: nil).select(:file_type_id, :id)
 - file_types = FileType.where.not(file_extension: nil).select(:file_extension, :id)
@ -18,7 +20,7 @@
    .help-block.form-text == t('.hints.internal_title')
  .mb-3
    = f.label(:description, class: 'form-label')
-    = f.pagedown :description, input_html: {preview: true, rows: 10}
+    = f.pagedown :description
  .mb-3
    = f.label(:execution_environment_id, class: 'form-label')
    = f.collection_select(:execution_environment_id, @execution_environments, :id, :name, {include_blank: t('exercises.form.none')}, class: 'form-control')
--- a/app/views/proxy_exercises/_form.html.slim
+++ b/app/views/proxy_exercises/_form.html.slim
@ -1,3 +1,10 @@
+- content_for :head do
+  // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
+     Otherwise, code might not be highlighted correctly (race condition)
+  meta name='turbolinks-visit-control' content='reload'
+  - append_javascript_pack_tag('toast-ui')
+  - append_stylesheet_pack_tag('toast-ui')
+
 = form_for(@proxy_exercise, multipart: true, builder: PagedownFormBuilder) do |f|
  = render('shared/form_errors', object: @proxy_exercise)
  .mb-3
@ -5,7 +12,7 @@
    = f.text_field(:title, class: 'form-control', required: true)
  .mb-3
    = f.label(:description, class: 'form-label')
-    = f.pagedown :description, input_html: {preview: true, rows: 10}
+    = f.pagedown :description
  .mb-3
    = f.label(:algorithm, class: 'form-label')
    = f.collection_select(:algorithm, ProxyExercise.algorithms.map {|algorithm, _id| [t("activerecord.attributes.proxy_exercise.algorithm_type.#{algorithm}"), algorithm] }, :second, :first, {}, class: 'form-control form-control-sm')
--- a/app/views/tips/_form.html.slim
+++ b/app/views/tips/_form.html.slim
@ -1,3 +1,10 @@
+- content_for :head do
+  // Force a full page reload, see https://github.com/turbolinks/turbolinks/issues/326.
+     Otherwise, code might not be highlighted correctly (race condition)
+  meta name='turbolinks-visit-control' content='reload'
+  - append_javascript_pack_tag('toast-ui')
+  - append_stylesheet_pack_tag('toast-ui')
+
 = form_for(@tip, builder: PagedownFormBuilder) do |f|
  = render('shared/form_errors', object: @tip)
  .mb-3
@ -5,7 +12,7 @@
    = f.text_field(:title, class: 'form-control', required: false)
  .mb-3
    = f.label(:description, class: 'form-label')
-    = f.pagedown :description, input_html: {preview: true, rows: 5}
+    = f.pagedown :description
  .mb-3
    = f.label(:file_type_id, t('activerecord.attributes.file.file_type_id'), class: 'form-label')
    = f.collection_select(:file_type_id, @file_types, :id, :name, {include_blank: true}, class: 'form-control')
--- a/package.json
+++ b/package.json
@ -13,6 +13,7 @@
    "@sentry/core": "^7.112.2",
    "@sentry/integrations": "^7.112.2",
    "@sentry/utils": "^7.112.2",
+    "@toast-ui/editor": "^3.2.2",
    "@webpack-cli/serve": "^2.0.5",
    "ace-builds": "^1.33.1",
    "babel-loader": "^9.1.3",
--- a/yarn.lock
+++ b/yarn.lock
@ -1892,6 +1892,22 @@ __metadata:
  languageName: node
  linkType: hard

+"@toast-ui/editor@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "@toast-ui/editor@npm:3.2.2"
+  dependencies:
+    dompurify: "npm:^2.3.3"
+    prosemirror-commands: "npm:^1.1.9"
+    prosemirror-history: "npm:^1.1.3"
+    prosemirror-inputrules: "npm:^1.1.3"
+    prosemirror-keymap: "npm:^1.1.4"
+    prosemirror-model: "npm:^1.14.1"
+    prosemirror-state: "npm:^1.3.4"
+    prosemirror-view: "npm:^1.18.7"
+  checksum: 10c0/f7b2be4d49e85bd9f6ef08e6a66a73ddbfecd5d3a4ca9f441635fc90c621360b1c69966bac9d34cd315879f387e925a2a33da485f473b8820944c5f9fd2503af
+  languageName: node
+  linkType: hard
+
 "@trysound/sax@npm:0.2.0":
  version: 0.2.0
  resolution: "@trysound/sax@npm:0.2.0"
@ -2878,13 +2894,27 @@ __metadata:
  languageName: node
  linkType: hard

-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001541, caniuse-lite@npm:^1.0.30001565, caniuse-lite@npm:^1.0.30001587":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001541":
  version: 1.0.30001611
  resolution: "caniuse-lite@npm:1.0.30001611"
  checksum: 10c0/e6d6549a42b811212f6c4ef2798c45ab5a19484aaee0fa550ec20632a49638d3e53b64e088664d2efab0c5a278d1f8d1dec4654fbce11194e6ec1dc4ba5df466
  languageName: node
  linkType: hard

+"caniuse-lite@npm:^1.0.30001565":
+  version: 1.0.30001570
+  resolution: "caniuse-lite@npm:1.0.30001570"
+  checksum: 10c0/e47230d2016edea56e002fa462a5289f697b48dcfbf703fb01aecc6c98ad4ecaf945ab23c253cb7af056c2d05f266e4e4cbebf45132100e2c9367439cb95b95b
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001587":
+  version: 1.0.30001599
+  resolution: "caniuse-lite@npm:1.0.30001599"
+  checksum: 10c0/8b3b9610b5be88533a3c8d0770d6896f7b1a9fee3dbeb7339e4ee119a514c81e5e07a628a5a289a6541ca291ac78a9402f5a99cf6012139e91f379083488a8eb
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^2.4.2":
  version: 2.4.2
  resolution: "chalk@npm:2.4.2"
@ -3005,6 +3035,7 @@ __metadata:
    "@sentry/core": "npm:^7.112.2"
    "@sentry/integrations": "npm:^7.112.2"
    "@sentry/utils": "npm:^7.112.2"
+    "@toast-ui/editor": "npm:^3.2.2"
    "@webpack-cli/serve": "npm:^2.0.5"
    ace-builds: "npm:^1.33.1"
    babel-loader: "npm:^9.1.3"
@ -3932,6 +3963,13 @@ __metadata:
  languageName: node
  linkType: hard

+"dompurify@npm:^2.3.3":
+  version: 2.5.0
+  resolution: "dompurify@npm:2.5.0"
+  checksum: 10c0/637dcf3430f3fedf66b58f84fd59ea9b3615a19a6db5efe444c635b2473a77a345b31d7328b56dbc80f692791915ffd6049d69041ff013e33692fdb8b0d84e48
+  languageName: node
+  linkType: hard
+
 "domutils@npm:^3.0.1":
  version: 3.1.0
  resolution: "domutils@npm:3.1.0"
@ -5759,6 +5797,13 @@ __metadata:
  languageName: node
  linkType: hard

+"orderedmap@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "orderedmap@npm:2.1.1"
+  checksum: 10c0/8d7d266659d1828937046e8b2a7b5f75914e0391db985da0ca75cd2246cccbf6d6f3a0886aa2034da15ee4923e8c45f95f8b588f575f535f0adecdefccc54634
+  languageName: node
+  linkType: hard
+
 "p-limit@npm:^2.2.0":
  version: 2.3.0
  resolution: "p-limit@npm:2.3.0"
@ -6348,6 +6393,89 @@ __metadata:
  languageName: node
  linkType: hard

+"prosemirror-commands@npm:^1.1.9":
+  version: 1.5.2
+  resolution: "prosemirror-commands@npm:1.5.2"
+  dependencies:
+    prosemirror-model: "npm:^1.0.0"
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.0.0"
+  checksum: 10c0/9ff0b525d4bc654ecd41a27f11d8aff52f719ea9a7da2587d9632cfc00bcac46ecc3be628623d1a768e3aa7c7ed2fe291326bb7d63b0a5c0814e53b0a6af5b35
+  languageName: node
+  linkType: hard
+
+"prosemirror-history@npm:^1.1.3":
+  version: 1.4.0
+  resolution: "prosemirror-history@npm:1.4.0"
+  dependencies:
+    prosemirror-state: "npm:^1.2.2"
+    prosemirror-transform: "npm:^1.0.0"
+    prosemirror-view: "npm:^1.31.0"
+    rope-sequence: "npm:^1.3.0"
+  checksum: 10c0/46299435ac963d5626e6faaca292369b1ae1d8746a5039b63df3aeed767c58d797e7bcfda3b4429b828798f6818e36476cc669f37cb2a40689cb8bf2635984ce
+  languageName: node
+  linkType: hard
+
+"prosemirror-inputrules@npm:^1.1.3":
+  version: 1.4.0
+  resolution: "prosemirror-inputrules@npm:1.4.0"
+  dependencies:
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.0.0"
+  checksum: 10c0/8ec72b6c2982bbd9fd378e51d67c6424119d081a4dcdeff430ab58055596cf67b691a890f46f135746f4de9bc6a6afb6ef1c0596df13bd633997e32ba0a25ddf
+  languageName: node
+  linkType: hard
+
+"prosemirror-keymap@npm:^1.1.4":
+  version: 1.2.2
+  resolution: "prosemirror-keymap@npm:1.2.2"
+  dependencies:
+    prosemirror-state: "npm:^1.0.0"
+    w3c-keyname: "npm:^2.2.0"
+  checksum: 10c0/7aa28c731e00962c90c91361a3c9f7000f960870a1300f7477da8afa8fd1b9cce0b3b7ca483aaa5832fd0bf88b5ff081defc184592997b08980b9ab67eeddcb7
+  languageName: node
+  linkType: hard
+
+"prosemirror-model@npm:^1.0.0, prosemirror-model@npm:^1.14.1, prosemirror-model@npm:^1.20.0":
+  version: 1.20.0
+  resolution: "prosemirror-model@npm:1.20.0"
+  dependencies:
+    orderedmap: "npm:^2.0.0"
+  checksum: 10c0/18fa7a7da6d10f6212c351ea7291e2ea750681fd04a608aee54ef2775c113f4a76b4ba9969925a8615c5345d3e50bbab48bc4ac142abfeeaf92883ada503ee30
+  languageName: node
+  linkType: hard
+
+"prosemirror-state@npm:^1.0.0, prosemirror-state@npm:^1.2.2, prosemirror-state@npm:^1.3.4":
+  version: 1.4.3
+  resolution: "prosemirror-state@npm:1.4.3"
+  dependencies:
+    prosemirror-model: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.0.0"
+    prosemirror-view: "npm:^1.27.0"
+  checksum: 10c0/e34dc9b1a6b23c23265569b2c246aaef4a61353a5fd33e933b62528917603382271d9f7d5212094e8928dee9bb4827e25a583104d43745e6ab3b8cbde12170f5
+  languageName: node
+  linkType: hard
+
+"prosemirror-transform@npm:^1.0.0, prosemirror-transform@npm:^1.1.0":
+  version: 1.8.0
+  resolution: "prosemirror-transform@npm:1.8.0"
+  dependencies:
+    prosemirror-model: "npm:^1.0.0"
+  checksum: 10c0/20861fcb304cc68718e49be6c41f22505689e969507f1e9754bbdfedf98fc4059254a79e1659b930c13ca52c547d3449f1814263a7601aeea1c1c4dfedc80ac1
+  languageName: node
+  linkType: hard
+
+"prosemirror-view@npm:^1.18.7, prosemirror-view@npm:^1.27.0, prosemirror-view@npm:^1.31.0":
+  version: 1.33.4
+  resolution: "prosemirror-view@npm:1.33.4"
+  dependencies:
+    prosemirror-model: "npm:^1.20.0"
+    prosemirror-state: "npm:^1.0.0"
+    prosemirror-transform: "npm:^1.1.0"
+  checksum: 10c0/c39b01c42a39c2c41531c29140b61e5e86fcf8a703a26c99537e2d4addb219624abde501160ee965a3c7a42b210ea6b4097409c83f43856e1884c4cb1b939513
+  languageName: node
+  linkType: hard
+
 "proxy-addr@npm:~2.0.7":
  version: 2.0.7
  resolution: "proxy-addr@npm:2.0.7"
@ -6603,6 +6731,13 @@ __metadata:
  languageName: node
  linkType: hard

+"rope-sequence@npm:^1.3.0":
+  version: 1.3.4
+  resolution: "rope-sequence@npm:1.3.4"
+  checksum: 10c0/caa90be3d7a7cad155fb354a4679a1280dc9819c81bd319542a0d893a64e152284abb9cc1631d4351b328016a8d6c35a48c912234edfaf5173daef44b2e3609b
+  languageName: node
+  linkType: hard
+
 "run-applescript@npm:^7.0.0":
  version: 7.0.0
  resolution: "run-applescript@npm:7.0.0"
@ -7466,6 +7601,13 @@ __metadata:
  languageName: node
  linkType: hard

+"w3c-keyname@npm:^2.2.0":
+  version: 2.2.8
+  resolution: "w3c-keyname@npm:2.2.8"
+  checksum: 10c0/37cf335c90efff31672ebb345577d681e2177f7ff9006a9ad47c68c5a9d265ba4a7b39d6c2599ceea639ca9315584ce4bd9c9fbf7a7217bfb7a599e71943c4c4
+  languageName: node
+  linkType: hard
+
 "watchpack@npm:^2.4.1":
  version: 2.4.1
  resolution: "watchpack@npm:2.4.1"