Fix EasyMDE validation (#18161)

web_src/js/features/comp/CommentEasyMDE.js

@@ -75,13 +75,27 @@ export function createCommentEasyMDE(textarea) {
     }
   });
   attachTribute(inputField, {mentions: true, emoji: true});
-
+  attachEasyMDEToElements(easyMDE);
-  // 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;
 }
 
+/**
+ * attach the EasyMDE object to its input elements (InputField, TextArea)
+ * @param {EasyMDE} easyMDE
+ */
+export function attachEasyMDEToElements(easyMDE) {
+  // TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement
+
+  // InputField is used by CodeMirror to accept user input
+  const inputField = easyMDE.codemirror.getInputField();
+  inputField._data_easyMDE = easyMDE;
+
+  // TextArea is the real textarea element in the form
+  const textArea = easyMDE.codemirror.getTextArea();
+  textArea._data_easyMDE = easyMDE;
+}
+
+
 /**
  * get the attached EasyMDE editor created by createCommentEasyMDE
  * @param el jQuery or HTMLElement
@@ -98,29 +112,27 @@ export function getAttachedEasyMDE(el) {
 }
 
 /**
- * validate if the given textarea from a form, is non-empty.
+ * validate if the given EasyMDE textarea is is non-empty.
- * @param {jQuery | HTMLElement} form
+ * @param {jQuery} $textarea
- * @param {jQuery | HTMLElement} textarea
  * @returns {boolean} returns true if validation succeeded.
  */
-export function validateTextareaNonEmpty(form, textarea) {
+export function validateTextareaNonEmpty($textarea) {
-  if (form instanceof jQuery) {
+  const $mdeInputField = $(getAttachedEasyMDE($textarea).codemirror.getInputField());
-    form = form[0];
-  }
-  if (textarea instanceof jQuery) {
-    textarea = textarea[0];
-  }
-
-  const $markdownEditorTextArea = $(getAttachedEasyMDE(textarea).codemirror.getInputField());
   // The original edit area HTML element is hidden and replaced by the
   // 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
-  if (textarea.value.length) {
+  if (!$textarea.val()) {
-    $markdownEditorTextArea.prop('required', true);
+    $mdeInputField.prop('required', true);
-    form.reportValidity();
+    const $form = $textarea.parents('form');
+    if (!$form.length) {
+      // this should never happen. we put a alert here in case the textarea would be forgotten to be put in a form
+      alert('Require non-empty content');
+    } else {
+      $form[0].reportValidity();
+    }
     return false;
   }
-  $markdownEditorTextArea.prop('required', false);
+  $mdeInputField.prop('required', false);
   return true;
 }

web_src/js/features/repo-diff.js

@@ -27,7 +27,7 @@ export function initRepoDiffConversationForm() {
 
     const form = $(e.target);
     const $textArea = form.find('textarea');
-    if (!validateTextareaNonEmpty(form, $textArea)) {
+    if (!validateTextareaNonEmpty($textArea)) {
       return;
     }
 

web_src/js/features/repo-wiki.js

@@ -1,5 +1,5 @@
 import {initMarkupContent} from '../markup/content.js';
-import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js';
+import {attachEasyMDEToElements, validateTextareaNonEmpty} from './comp/CommentEasyMDE.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
 
 const {csrfToken} = window.config;
@@ -119,11 +119,15 @@ export function initRepoWikiForm() {
       ]
     });
 
-    const $markdownEditorTextArea = $(easyMDE.codemirror.getInputField());
+    attachEasyMDEToElements(easyMDE);
-    $markdownEditorTextArea.addClass('js-quick-submit');
 
-    $form.on('submit', function () {
+    const $mdeInputField = $(easyMDE.codemirror.getInputField());
-      validateTextareaNonEmpty(this, $editArea);
+    $mdeInputField.addClass('js-quick-submit');
+
+    $form.on('submit', () => {
+      if (!validateTextareaNonEmpty($editArea)) {
+        return false;
+      }
     });
 
     setTimeout(() => {