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.

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);
+});