Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions web_src/js/features/comp/CommentEasyMDE.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,31 @@ export function getAttachedEasyMDE(el) {
}
return el._data_easyMDE;
}

/**
* validate if the given textarea from a form, is non-empty.
* @param {jQuery | HTMLElement} form
* @param {jQuery | HTMLElement} textarea
* @returns {boolean} returns true if validation succeeded.
*/
export function validateTextareaNonEmpty(form, textarea) {
if (form instanceof jQuery) {
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) {
$markdownEditorTextArea.prop('required', true);
form.reportValidity();
return false;
}
$markdownEditorTextArea.prop('required', false);
return true;
}
7 changes: 7 additions & 0 deletions web_src/js/features/repo-diff.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {initCompReactionSelector} from './comp/ReactionSelector.js';
import {initRepoIssueContentHistory} from './repo-issue-content.js';
import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js';
const {csrfToken} = window.config;

export function initRepoDiffReviewButton() {
Expand All @@ -23,7 +24,13 @@ export function initRepoDiffFileViewToggle() {
export function initRepoDiffConversationForm() {
$(document).on('submit', '.conversation-holder form', async (e) => {
e.preventDefault();

const form = $(e.target);
const $textArea = form.find('textarea');
if (!validateTextareaNonEmpty(form, $textArea)) {
return;
}

const newConversationHolder = $(await $.post(form.attr('action'), form.serialize()));
const {path, side, idx} = newConversationHolder.data();

Expand Down
16 changes: 3 additions & 13 deletions web_src/js/features/repo-wiki.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {initMarkupContent} from '../markup/content.js';
import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';

const {csrfToken} = window.config;
Expand Down Expand Up @@ -121,19 +122,8 @@ export function initRepoWikiForm() {
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/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();
if (!input.length) {
e.preventDefault();
$markdownEditorTextArea.prop('required', true);
this.reportValidity();
} else {
$markdownEditorTextArea.prop('required', false);
}
$form.on('submit', function () {
validateTextareaNonEmpty(this, $editArea);
});

setTimeout(() => {
Expand Down