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.

7 files changed, 83 insertions, 61 deletions

diff --git a/web_src/js/easymde.js b/web_src/js/easymde.js
index 39ead02c13..6bd87a9165 100644
--- a/web_src/js/easymde.js
+++ b/web_src/js/easymde.js
@@ -3,6 +3,5 @@ import EasyMDE from 'easymde';
 import CodeMirror from 'codemirror/lib/codemirror.js';
 
 window.EasyMDE = EasyMDE;
-window.SimpleMDE = EasyMDE;
 window.CodeMirror = CodeMirror;
 
diff --git a/web_src/js/features/comp/CommentSimpleMDE.js b/web_src/js/features/comp/CommentEasyMDE.js
index fbc0ec8baf..47e80e69c1 100644
--- a/web_src/js/features/comp/CommentSimpleMDE.js
+++ b/web_src/js/features/comp/CommentEasyMDE.js
@@ -1,13 +1,21 @@
 import attachTribute from '../tribute.js';
 
-export function createCommentSimpleMDE($editArea) {
-  if ($editArea.length === 0) {
+/**
+ * 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 simplemde = new SimpleMDE({
+  const easyMDE = new window.EasyMDE({
     autoDownloadFontAwesome: false,
-    element: $editArea[0],
+    element: textarea,
     forceSync: true,
     renderingConfig: {
       singleLineBreaks: false
@@ -50,8 +58,9 @@ export function createCommentSimpleMDE($editArea) {
       },
     ]
   });
-  $(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
-  simplemde.codemirror.setOption('extraKeys', {
+  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') {
@@ -65,8 +74,25 @@ export function createCommentSimpleMDE($editArea) {
       cm.execCommand('delCharBefore');
     }
   });
-  attachTribute(simplemde.codemirror.getInputField(), {mentions: true, emoji: true});
-  $editArea.data('simplemde', simplemde);
-  $(simplemde.codemirror.getInputField()).data('simplemde', simplemde);
-  return simplemde;
+  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;
 }
diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js
index 99f4e069cc..8c8a4186c7 100644
--- a/web_src/js/features/comp/ImagePaste.js
+++ b/web_src/js/features/comp/ImagePaste.js
@@ -76,14 +76,14 @@ export function initCompImagePaste($target) {
   });
 }
 
-export function initSimpleMDEImagePaste(simplemde, dropzone, files) {
+export function initEasyMDEImagePaste(easyMDE, dropzone, files) {
   const uploadUrl = dropzone.getAttribute('data-upload-url');
-  simplemde.codemirror.on('paste', async (_, e) => {
+  easyMDE.codemirror.on('paste', async (_, e) => {
     for (const img of clipboardPastedImages(e)) {
       const name = img.name.substr(0, img.name.lastIndexOf('.'));
       const data = await uploadFile(img, uploadUrl);
-      const pos = simplemde.codemirror.getCursor();
-      simplemde.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
+      const pos = easyMDE.codemirror.getCursor();
+      easyMDE.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
       const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
       files.append(input);
     }
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 4fc4b13cad..545f59a4d8 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -1,6 +1,6 @@
 import {htmlEscape} from 'escape-goat';
 import attachTribute from './tribute.js';
-import {createCommentSimpleMDE} from './comp/CommentSimpleMDE.js';
+import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/CommentEasyMDE.js';
 import {initCompImagePaste} from './comp/ImagePaste.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
 
@@ -213,8 +213,8 @@ export function initRepoIssueStatusButton() {
   // Change status
   const $statusButton = $('#status-button');
   $('#comment-form textarea').on('keyup', function () {
-    const $simplemde = $(this).data('simplemde');
-    const value = ($simplemde && $simplemde.value()) ? $simplemde.value() : $(this).val();
+    const easyMDE = getAttachedEasyMDE(this);
+    const value = easyMDE?.value() || $(this).val();
     $statusButton.text($statusButton.data(value.length === 0 ? 'status' : 'status-and-comment'));
   });
   $statusButton.on('click', () => {
@@ -445,22 +445,19 @@ export function initRepoPullRequestReview() {
     const form = $(this).closest('.comment-code-cloud').find('.comment-form');
     form.removeClass('hide');
     const $textarea = form.find('textarea');
-    let $simplemde;
-    if ($textarea.data('simplemde')) {
-      $simplemde = $textarea.data('simplemde');
-    } else {
+    let easyMDE = getAttachedEasyMDE($textarea);
+    if (!easyMDE) {
       attachTribute($textarea.get(), {mentions: true, emoji: true});
-      $simplemde = createCommentSimpleMDE($textarea);
-      $textarea.data('simplemde', $simplemde);
+      easyMDE = createCommentEasyMDE($textarea);
     }
     $textarea.focus();
-    $simplemde.codemirror.focus();
+    easyMDE.codemirror.focus();
     assignMenuAttributes(form.find('.menu'));
   });
 
   const $reviewBox = $('.review-box');
   if ($reviewBox.length === 1) {
-    createCommentSimpleMDE($reviewBox.find('textarea'));
+    createCommentEasyMDE($reviewBox.find('textarea'));
     initCompImagePaste($reviewBox);
   }
 
@@ -519,9 +516,9 @@ export function initRepoPullRequestReview() {
       td.find("input[name='path']").val(path);
       const $textarea = commentCloud.find('textarea');
       attachTribute($textarea.get(), {mentions: true, emoji: true});
-      const $simplemde = createCommentSimpleMDE($textarea);
+      const easyMDE = createCommentEasyMDE($textarea);
       $textarea.focus();
-      $simplemde.codemirror.focus();
+      easyMDE.codemirror.focus();
     }
   });
 }
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index d8530fe24f..87d311716a 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -1,6 +1,6 @@
-import {createCommentSimpleMDE} from './comp/CommentSimpleMDE.js';
+import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/CommentEasyMDE.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
-import {initCompImagePaste, initSimpleMDEImagePaste} from './comp/ImagePaste.js';
+import {initCompImagePaste, initEasyMDEImagePaste} from './comp/ImagePaste.js';
 import {
   initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel,
   initRepoIssueCommentDelete,
@@ -63,7 +63,7 @@ export function initRepoCommentForm() {
     });
   }
 
-  createCommentSimpleMDE($('.comment.form textarea:not(.review-textarea)'));
+  createCommentEasyMDE($('.comment.form textarea:not(.review-textarea)'));
   initBranchSelector();
   initCompMarkupContentPreviewTab($('.comment.form'));
   initCompImagePaste($('.comment.form'));
@@ -262,7 +262,7 @@ async function onEditContent(event) {
   const $renderContent = $segment.find('.render-content');
   const $rawContent = $segment.find('.raw-content');
   let $textarea;
-  let $simplemde;
+  let easyMDE;
 
   // Setup new form
   if ($editContentZone.html().length === 0) {
@@ -341,11 +341,11 @@ async function onEditContent(event) {
     $tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview'));
     $editContentForm.find('.write').attr('data-tab', $editContentZone.data('write'));
     $editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview'));
-    $simplemde = createCommentSimpleMDE($textarea);
+    easyMDE = createCommentEasyMDE($textarea);
 
     initCompMarkupContentPreviewTab($editContentForm);
     if ($dropzone.length === 1) {
-      initSimpleMDEImagePaste($simplemde, $dropzone[0], $dropzone.find('.files'));
+      initEasyMDEImagePaste(easyMDE, $dropzone[0], $dropzone.find('.files'));
     }
 
     $editContentZone.find('.cancel.button').on('click', () => {
@@ -395,7 +395,7 @@ async function onEditContent(event) {
     });
   } else {
     $textarea = $segment.find('textarea');
-    $simplemde = $textarea.data('simplemde');
+    easyMDE = getAttachedEasyMDE($textarea);
   }
 
   // Show write/preview tab and copy raw content as needed
@@ -403,11 +403,11 @@ async function onEditContent(event) {
   $renderContent.hide();
   if ($textarea.val().length === 0) {
     $textarea.val($rawContent.text());
-    $simplemde.value($rawContent.text());
+    easyMDE.value($rawContent.text());
   }
   requestAnimationFrame(() => {
     $textarea.focus();
-    $simplemde.codemirror.focus();
+    easyMDE.codemirror.focus();
   });
 }
 
@@ -527,9 +527,9 @@ export function initRepository() {
       $(this).parent().hide();
 
       const $form = $repoComparePull.find('.pullrequest-form');
-      const $simplemde = $form.find('textarea.edit_area').data('simplemde');
+      const easyMDE = getAttachedEasyMDE($form.find('textarea.edit_area'));
       $form.show();
-      $simplemde.codemirror.refresh();
+      easyMDE.codemirror.refresh();
     });
   }
 }
@@ -547,24 +547,24 @@ function initRepoIssueCommentEdit() {
     const target = $(this).data('target');
     const quote = $(`#comment-${target}`).text().replace(/\n/g, '\n> ');
     const content = `> ${quote}\n\n`;
-    let $simplemde;
+    let easyMDE;
     if ($(this).hasClass('quote-reply-diff')) {
       const $parent = $(this).closest('.comment-code-cloud');
       $parent.find('button.comment-form-reply').trigger('click');
-      $simplemde = $parent.find('[name="content"]').data('simplemde');
+      easyMDE = getAttachedEasyMDE($parent.find('[name="content"]'));
     } else {
       // for normal issue/comment page
-      $simplemde = $('#comment-form .edit_area').data('simplemde');
+      easyMDE = getAttachedEasyMDE($('#comment-form .edit_area'));
     }
-    if ($simplemde) {
-      if ($simplemde.value() !== '') {
-        $simplemde.value(`${$simplemde.value()}\n\n${content}`);
+    if (easyMDE) {
+      if (easyMDE.value() !== '') {
+        easyMDE.value(`${easyMDE.value()}\n\n${content}`);
       } else {
-        $simplemde.value(`${content}`);
+        easyMDE.value(`${content}`);
       }
       requestAnimationFrame(() => {
-        $simplemde.codemirror.focus();
-        $simplemde.codemirror.setCursor($simplemde.codemirror.lineCount(), 0);
+        easyMDE.codemirror.focus();
+        easyMDE.codemirror.setCursor(easyMDE.codemirror.lineCount(), 0);
       });
     }
     event.preventDefault();
diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js
index 08e3e9e026..f69ce37d6b 100644
--- a/web_src/js/features/repo-release.js
+++ b/web_src/js/features/repo-release.js
@@ -1,7 +1,7 @@
 import attachTribute from './tribute.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
-import {initSimpleMDEImagePaste} from './comp/ImagePaste.js';
-import {createCommentSimpleMDE} from './comp/CommentSimpleMDE.js';
+import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
+import {createCommentEasyMDE} from './comp/CommentEasyMDE.js';
 
 export function initRepoRelease() {
   $(document).on('click', '.remove-rel-attach', function() {
@@ -22,8 +22,8 @@ export function initRepoReleaseEditor() {
   const $textarea = $editor.find('textarea');
   attachTribute($textarea.get(), {mentions: false, emoji: true});
   const $files = $editor.parent().find('.files');
-  const $simplemde = createCommentSimpleMDE($textarea);
+  const easyMDE = createCommentEasyMDE($textarea);
   initCompMarkupContentPreviewTab($editor);
   const dropzone = $editor.parent().find('.dropzone')[0];
-  initSimpleMDEImagePaste($simplemde, dropzone, $files);
+  initEasyMDEImagePaste(easyMDE, dropzone, $files);
 }
diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js
index 1acdb4da48..ee23dda8c4 100644
--- a/web_src/js/features/repo-wiki.js
+++ b/web_src/js/features/repo-wiki.js
@@ -7,11 +7,11 @@ export function initRepoWikiForm() {
   const $editArea = $('.repository.wiki textarea#edit_area');
   let sideBySideChanges = 0;
   let sideBySideTimeout = null;
-  let hasSimpleMDE = true;
+  let hasEasyMDE = true;
 
   if ($editArea.length > 0) {
     const $form = $('.repository.wiki.new .ui.form');
-    const simplemde = new SimpleMDE({
+    const easyMDE = new window.EasyMDE({
       autoDownloadFontAwesome: false,
       element: $editArea[0],
       forceSync: true,
@@ -36,7 +36,7 @@ export function initRepoWikiForm() {
         };
 
         setTimeout(() => {
-          if (!simplemde.isSideBySideActive()) {
+          if (!easyMDE.isSideBySideActive()) {
             render();
           } else {
             // delay preview by keystroke counting
@@ -52,7 +52,7 @@ export function initRepoWikiForm() {
             sideBySideTimeout = setTimeout(render, 600);
           }
         }, 0);
-        if (!simplemde.isSideBySideActive()) {
+        if (!easyMDE.isSideBySideActive()) {
           return 'Loading...';
         }
         return preview.innerHTML;
@@ -106,7 +106,7 @@ export function initRepoWikiForm() {
           name: 'revert-to-textarea',
           action(e) {
             e.toTextArea();
-            hasSimpleMDE = false;
+            hasEasyMDE = false;
             const $root = $form.find('.field.content');
             const loading = $root.data('loading');
             $root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
@@ -118,12 +118,12 @@ export function initRepoWikiForm() {
       ]
     });
 
-    const $markdownEditorTextArea = $(simplemde.codemirror.getInputField());
+    const $markdownEditorTextArea = $(easyMDE.codemirror.getInputField());
     $markdownEditorTextArea.addClass('js-quick-submit');
 
     $form.on('submit', function (e) {
       // The original edit area HTML element is hidden and replaced by the
-      // SimpleMDE editor, breaking HTML5 input validation if the text area is empty.
+      // SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty.
       // This is a workaround for this upstream bug.
       // See https://github.com/sparksuite/simplemde-markdown-editor/issues/324
       const input = $editArea.val();
@@ -143,7 +143,7 @@ export function initRepoWikiForm() {
       const $bPreview = $('.editor-toolbar button.preview');
       const $bSideBySide = $('.editor-toolbar a.fa-columns');
       $bEdit.on('click', (e) => {
-        if (!hasSimpleMDE) {
+        if (!hasEasyMDE) {
           return false;
         }
         e.stopImmediatePropagation();
@@ -154,7 +154,7 @@ export function initRepoWikiForm() {
         return false;
       });
       $bPrev.on('click', (e) => {
-        if (!hasSimpleMDE) {
+        if (!hasEasyMDE) {
           return false;
         }
         e.stopImmediatePropagation();