From 531311fa69798c3f49b18fd3c141d028bb16c638 Mon Sep 17 00:00:00 2001 From: David Jimenez Date: Sat, 23 Oct 2021 20:03:13 +0100 Subject: [PATCH 1/2] fix: show client-side error if wiki page is empty Implement a JS, client-side validation workaround for a bug in the upstream editor library SimpleMDE which breaks HTML5 client-side validation when a wiki page is submitted. This allows native, client-side errors to appear if the text editor contents are empty. See upstream bugfix report: https://github.com/sparksuite/simplemde-markdown-editor/issues/324 Signed-off-by: David Jimenez --- templates/repo/wiki/new.tmpl | 4 ++-- web_src/js/features/repo-wiki.js | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl index 6de6ef9a201a..ca97eb382d0f 100644 --- a/templates/repo/wiki/new.tmpl +++ b/templates/repo/wiki/new.tmpl @@ -11,7 +11,7 @@ {{end}} -
+ {{.CsrfTokenHtml}}
@@ -22,7 +22,7 @@
- +
diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js index ddd4e30a8a43..24c9d479e9cd 100644 --- a/web_src/js/features/repo-wiki.js +++ b/web_src/js/features/repo-wiki.js @@ -116,6 +116,22 @@ export function initRepoWikiForm() { }, ] }); + + $('#edit_form').on('submit', (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. + // 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) { + $(simplemde.codemirror.getInputField()).attr('required', true); + document.querySelector('#edit_form').reportValidity(); + e.preventDefault() + } else { + $(simplemde.codemirror.getInputField()).attr('required', false); + } + }); + $(simplemde.codemirror.getInputField()).addClass('js-quick-submit'); setTimeout(() => { From 39da7c21552e99487830181e03cfe874f9eba050 Mon Sep 17 00:00:00 2001 From: David Jimenez Date: Sun, 24 Oct 2021 15:44:04 +0100 Subject: [PATCH 2/2] refactor: extract variables and minor lint fixes Signed-off-by: David Jimenez --- templates/repo/wiki/new.tmpl | 2 +- web_src/js/features/repo-wiki.js | 20 +++++++++++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl index ca97eb382d0f..d887d8ffae28 100644 --- a/templates/repo/wiki/new.tmpl +++ b/templates/repo/wiki/new.tmpl @@ -11,7 +11,7 @@
{{end}} - + {{.CsrfTokenHtml}}
diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js index 24c9d479e9cd..1acdb4da48f1 100644 --- a/web_src/js/features/repo-wiki.js +++ b/web_src/js/features/repo-wiki.js @@ -8,7 +8,9 @@ export function initRepoWikiForm() { let sideBySideChanges = 0; let sideBySideTimeout = null; let hasSimpleMDE = true; + if ($editArea.length > 0) { + const $form = $('.repository.wiki.new .ui.form'); const simplemde = new SimpleMDE({ autoDownloadFontAwesome: false, element: $editArea[0], @@ -105,7 +107,6 @@ export function initRepoWikiForm() { action(e) { e.toTextArea(); hasSimpleMDE = false; - const $form = $('.repository.wiki.new .ui.form'); const $root = $form.find('.field.content'); const loading = $root.data('loading'); $root.append(`
${loading}
`); @@ -117,23 +118,24 @@ export function initRepoWikiForm() { ] }); - $('#edit_form').on('submit', (e) => { + const $markdownEditorTextArea = $(simplemde.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. // This is a workaround for this upstream bug. // See https://github.com/sparksuite/simplemde-markdown-editor/issues/324 - const input = $editArea.val() + const input = $editArea.val(); if (!input.length) { - $(simplemde.codemirror.getInputField()).attr('required', true); - document.querySelector('#edit_form').reportValidity(); - e.preventDefault() + e.preventDefault(); + $markdownEditorTextArea.prop('required', true); + this.reportValidity(); } else { - $(simplemde.codemirror.getInputField()).attr('required', false); + $markdownEditorTextArea.prop('required', false); } }); - $(simplemde.codemirror.getInputField()).addClass('js-quick-submit'); - setTimeout(() => { const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]'); const $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]');