Clean legacy SimpleMDE code (#17926)

Since we are using EasyMDE now, we do not need to keep the SimpleMDE code anymore. This PR removes all legacy SimpleMDE code, and makes some related changes: * `createCommentEasyMDE` can accept native DOM element, and it doesn't need `jQuery.data` to store EasyMDE editor object (as discussed about the frontend guideline). * introduce `getAttachedEasyMDE` to get the attached EasyMDE editor object, it's easier to find all the usage of EasyMDE. * rename variable names from `$simplemde` to `easyMDE`, the `$` was incorrect because it is a EasyMDE editor, not a jQuery object. With this PR, it will be easier to do more refactoring or replacing EasyMDE with other editors.
2021-12-10 10:51:27 +08:00 · 2021-12-10 10:51:27 +08:00 · 0a9fcf63a4
commit 0a9fcf63a4
parent 719bddcd76
16 changed files with 104 additions and 82 deletions
--- a/web_src/js/features/comp/CommentEasyMDE.js
+++ b/web_src/js/features/comp/CommentEasyMDE.js
@ -0,0 +1,98 @@
+import attachTribute from '../tribute.js';
+
+/**
+ * create an EasyMDE editor for comment
+ * @param textarea jQuery or HTMLElement
+ * @returns {null|EasyMDE}
+ */
+export function createCommentEasyMDE(textarea) {
+  if (textarea instanceof jQuery) {
+    textarea = textarea[0];
+  }
+  if (!textarea) {
+    return null;
+  }
+
+  const easyMDE = new window.EasyMDE({
+    autoDownloadFontAwesome: false,
+    element: textarea,
+    forceSync: true,
+    renderingConfig: {
+      singleLineBreaks: false
+    },
+    indentWithTabs: false,
+    tabSize: 4,
+    spellChecker: false,
+    toolbar: ['bold', 'italic', 'strikethrough', '|',
+      'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
+      'code', 'quote', '|', {
+        name: 'checkbox-empty',
+        action(e) {
+          const cm = e.codemirror;
+          cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
+          cm.focus();
+        },
+        className: 'fa fa-square-o',
+        title: 'Add Checkbox (empty)',
+      },
+      {
+        name: 'checkbox-checked',
+        action(e) {
+          const cm = e.codemirror;
+          cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
+          cm.focus();
+        },
+        className: 'fa fa-check-square-o',
+        title: 'Add Checkbox (checked)',
+      }, '|',
+      'unordered-list', 'ordered-list', '|',
+      'link', 'image', 'table', 'horizontal-rule', '|',
+      'clean-block', '|',
+      {
+        name: 'revert-to-textarea',
+        action(e) {
+          e.toTextArea();
+        },
+        className: 'fa fa-file',
+        title: 'Revert to simple textarea',
+      },
+    ]
+  });
+  const inputField = easyMDE.codemirror.getInputField();
+  inputField.classList.add('js-quick-submit');
+  easyMDE.codemirror.setOption('extraKeys', {
+    Enter: () => {
+      const tributeContainer = document.querySelector('.tribute-container');
+      if (!tributeContainer || tributeContainer.style.display === 'none') {
+        return CodeMirror.Pass;
+      }
+    },
+    Backspace: (cm) => {
+      if (cm.getInputField().trigger) {
+        cm.getInputField().trigger('input');
+      }
+      cm.execCommand('delCharBefore');
+    }
+  });
+  attachTribute(inputField, {mentions: true, emoji: true});
+
+  // TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement
+  inputField._data_easyMDE = easyMDE;
+  textarea._data_easyMDE = easyMDE;
+  return easyMDE;
+}
+
+/**
+ * get the attached EasyMDE editor created by createCommentEasyMDE
+ * @param el jQuery or HTMLElement
+ * @returns {null|EasyMDE}
+ */
+export function getAttachedEasyMDE(el) {
+  if (el instanceof jQuery) {
+    el = el[0];
+  }
+  if (!el) {
+    return null;
+  }
+  return el._data_easyMDE;
+}