mirror of
https://github.com/go-gitea/gitea.git
synced 2024-12-04 14:46:57 -05:00
Fix EasyMDE validation (#18161)
This commit is contained in:
parent
8eec403068
commit
48aab263d1
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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(() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user