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.

routers/web/repo/commit.go

@@ -253,7 +253,7 @@ func FileHistory(ctx *context.Context) {
 func Diff(ctx *context.Context) {
 	ctx.Data["PageIsDiff"] = true
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["RequireTribute"] = true
 
 	userName := ctx.Repo.Owner.Name

routers/web/repo/compare.go

@@ -761,7 +761,7 @@ func CompareDiff(ctx *context.Context) {
 	ctx.Data["IsRepoToolbarCommits"] = true
 	ctx.Data["IsDiffCompare"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	setTemplateIfExists(ctx, pullRequestTemplateKey, nil, pullRequestTemplateCandidates)
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled

routers/web/repo/editor.go

@@ -69,7 +69,7 @@ func editFile(ctx *context.Context, isNewFile bool) {
 	ctx.Data["PageIsEdit"] = true
 	ctx.Data["IsNewFile"] = isNewFile
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	canCommit := renderCommitRights(ctx)
 
 	treePath := cleanUploadFileName(ctx.Repo.TreePath)
@@ -200,7 +200,7 @@ func editFilePost(ctx *context.Context, form forms.EditRepoFileForm, isNewFile b
 	ctx.Data["PageHasPosted"] = true
 	ctx.Data["IsNewFile"] = isNewFile
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["TreePath"] = form.TreePath
 	ctx.Data["TreeNames"] = treeNames
 	ctx.Data["TreePaths"] = treePaths
@@ -544,7 +544,7 @@ func DeleteFilePost(ctx *context.Context) {
 func UploadFile(ctx *context.Context) {
 	ctx.Data["PageIsUpload"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	upload.AddUploadContext(ctx, "repo")
 	canCommit := renderCommitRights(ctx)
 	treePath := cleanUploadFileName(ctx.Repo.TreePath)
@@ -580,7 +580,7 @@ func UploadFilePost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.UploadRepoFileForm)
 	ctx.Data["PageIsUpload"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	upload.AddUploadContext(ctx, "repo")
 	canCommit := renderCommitRights(ctx)
 

routers/web/repo/issue.go

@@ -786,7 +786,7 @@ func NewIssue(ctx *context.Context) {
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["RequireTribute"] = true
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	title := ctx.FormString("title")
@@ -959,7 +959,7 @@ func NewIssuePost(ctx *context.Context) {
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "comment")
@@ -1144,7 +1144,7 @@ func ViewIssue(ctx *context.Context) {
 
 	ctx.Data["RequireHighlightJS"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["IsProjectsEnabled"] = ctx.Repo.CanRead(unit.TypeProjects)
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "comment")

routers/web/repo/pull.go

@@ -701,7 +701,7 @@ func ViewPullFiles(ctx *context.Context) {
 	setCompareContext(ctx, baseCommit, commit, ctx.Repo.Owner.Name, ctx.Repo.Repository.Name)
 
 	ctx.Data["RequireHighlightJS"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["RequireTribute"] = true
 	if ctx.Data["Assignees"], err = models.GetRepoAssignees(ctx.Repo.Repository); err != nil {
 		ctx.ServerError("GetAssignees", err)
@@ -1045,7 +1045,7 @@ func CompareAndPullRequestPost(ctx *context.Context) {
 	ctx.Data["IsDiffCompare"] = true
 	ctx.Data["IsRepoToolbarCommits"] = true
 	ctx.Data["RequireTribute"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["RequireHighlightJS"] = true
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled

routers/web/repo/release.go

@@ -262,7 +262,7 @@ func LatestRelease(ctx *context.Context) {
 func NewRelease(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["PageIsReleaseList"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["RequireTribute"] = true
 	ctx.Data["tag_target"] = ctx.Repo.Repository.DefaultBranch
 	if tagName := ctx.FormString("tag"); len(tagName) > 0 {
@@ -296,7 +296,7 @@ func NewReleasePost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewReleaseForm)
 	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["PageIsReleaseList"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["RequireTribute"] = true
 
 	if ctx.HasError() {
@@ -415,7 +415,7 @@ func EditRelease(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["PageIsReleaseList"] = true
 	ctx.Data["PageIsEditRelease"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["RequireTribute"] = true
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "release")
@@ -454,7 +454,7 @@ func EditReleasePost(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["PageIsReleaseList"] = true
 	ctx.Data["PageIsEditRelease"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 	ctx.Data["RequireTribute"] = true
 
 	tagName := ctx.Params("*")

routers/web/repo/wiki.go

@@ -622,7 +622,7 @@ func WikiRaw(ctx *context.Context) {
 func NewWiki(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
 	ctx.Data["PageIsWiki"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 
 	if !ctx.Repo.Repository.HasWiki() {
 		ctx.Data["title"] = "Home"
@@ -639,7 +639,7 @@ func NewWikiPost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewWikiForm)
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
 	ctx.Data["PageIsWiki"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 
 	if ctx.HasError() {
 		ctx.HTML(http.StatusOK, tplWikiNew)
@@ -677,7 +677,7 @@ func NewWikiPost(ctx *context.Context) {
 func EditWiki(ctx *context.Context) {
 	ctx.Data["PageIsWiki"] = true
 	ctx.Data["PageIsWikiEdit"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 
 	if !ctx.Repo.Repository.HasWiki() {
 		ctx.Redirect(ctx.Repo.RepoLink + "/wiki")
@@ -697,7 +697,7 @@ func EditWikiPost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewWikiForm)
 	ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
 	ctx.Data["PageIsWiki"] = true
-	ctx.Data["RequireSimpleMDE"] = true
+	ctx.Data["RequireEasyMDE"] = true
 
 	if ctx.HasError() {
 		ctx.HTML(http.StatusOK, tplWikiNew)

templates/base/footer.tmpl

@@ -12,7 +12,7 @@
 	{{template "custom/body_outer_post" .}}
 
 	{{template "base/footer_content" .}}
-{{if .RequireSimpleMDE}}
+{{if .RequireEasyMDE}}
 	<script src="{{AssetUrlPrefix}}/js/easymde.js?v={{MD5 AppVer}}"></script>
 	<script src="{{AssetUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js"></script>
 	<script src="{{AssetUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js"></script>

templates/base/head.tmpl

@@ -56,7 +56,7 @@
 	</script>
 	<link rel="icon" href="{{AssetUrlPrefix}}/img/logo.svg" type="image/svg+xml">
 	<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
-{{if .RequireSimpleMDE}}
+{{if .RequireEasyMDE}}
 	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/easymde.css?v={{MD5 AppVer}}">
 {{end}}
 	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">

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;
 

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');
+  const inputField = easyMDE.codemirror.getInputField();
-  simplemde.codemirror.setOption('extraKeys', {
+  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});
+  attachTribute(inputField, {mentions: true, emoji: true});
-  $editArea.data('simplemde', simplemde);
+
-  $(simplemde.codemirror.getInputField()).data('simplemde', simplemde);
+  // TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement
-  return simplemde;
+  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;
 }

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();
+      const pos = easyMDE.codemirror.getCursor();
-      simplemde.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
+      easyMDE.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
       const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
       files.append(input);
     }

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 easyMDE = getAttachedEasyMDE(this);
-    const value = ($simplemde && $simplemde.value()) ? $simplemde.value() : $(this).val();
+    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;
+    let easyMDE = getAttachedEasyMDE($textarea);
-    if ($textarea.data('simplemde')) {
+    if (!easyMDE) {
-      $simplemde = $textarea.data('simplemde');
-    } else {
       attachTribute($textarea.get(), {mentions: true, emoji: true});
-      $simplemde = createCommentSimpleMDE($textarea);
+      easyMDE = createCommentEasyMDE($textarea);
-      $textarea.data('simplemde', $simplemde);
     }
     $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();
     }
   });
 }

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 (easyMDE) {
-      if ($simplemde.value() !== '') {
+      if (easyMDE.value() !== '') {
-        $simplemde.value(`${$simplemde.value()}\n\n${content}`);
+        easyMDE.value(`${easyMDE.value()}\n\n${content}`);
       } else {
-        $simplemde.value(`${content}`);
+        easyMDE.value(`${content}`);
       }
       requestAnimationFrame(() => {
-        $simplemde.codemirror.focus();
+        easyMDE.codemirror.focus();
-        $simplemde.codemirror.setCursor($simplemde.codemirror.lineCount(), 0);
+        easyMDE.codemirror.setCursor(easyMDE.codemirror.lineCount(), 0);
       });
     }
     event.preventDefault();

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 {initEasyMDEImagePaste} from './comp/ImagePaste.js';
-import {createCommentSimpleMDE} from './comp/CommentSimpleMDE.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);
 }

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();