Fix EasyMDE validation (#18161)

This commit is contained in:
wxiaoguang 2022-01-04 00:53:53 +08:00 committed by GitHub
parent 8eec403068
commit 48aab263d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 26 deletions

View file

@ -75,13 +75,27 @@ export function createCommentEasyMDE(textarea) {
} }
}); });
attachTribute(inputField, {mentions: true, emoji: true}); 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; 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 * get the attached EasyMDE editor created by createCommentEasyMDE
* @param el jQuery or HTMLElement * @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. * @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 // 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. // SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty.
// This is a workaround for this upstream bug. // This is a workaround for this upstream bug.
// See https://github.com/sparksuite/simplemde-markdown-editor/issues/324 // 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; return false;
} }
$markdownEditorTextArea.prop('required', false); $mdeInputField.prop('required', false);
return true; return true;
} }

View file

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

View file

@ -1,5 +1,5 @@
import {initMarkupContent} from '../markup/content.js'; 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'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
const {csrfToken} = window.config; 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(() => { setTimeout(() => {