Show client-side error if wiki page is empty (#17415)

* 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 <dvejmz@sgfault.com>
Co-authored-by: Lauris BH <lauris@nix.lv>

2 files changed, 21 insertions, 3 deletions

diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl
index 6de6ef9a20..d887d8ffae 100644
--- a/templates/repo/wiki/new.tmpl
+++ b/templates/repo/wiki/new.tmpl
@@ -22,7 +22,7 @@
 			</div>
 			<div class="field content" data-loading="{{.i18n.Tr "loading"}}">
 				<div class="ui bottom active tab" data-tab="write">
-					<textarea class="js-quick-submit" id="edit_area" name="content" data-id="wiki-{{.title}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}" required>{{if .PageIsWikiEdit}}{{.content}}{{else}}{{.i18n.Tr "repo.wiki.welcome"}}{{end}}</textarea>
+					<textarea class="js-quick-submit" id="edit_area" name="content" data-id="wiki-{{.title}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}">{{if .PageIsWikiEdit}}{{.content}}{{else}}{{.i18n.Tr "repo.wiki.welcome"}}{{end}}</textarea>
 				</div>
 			</div>
 			<div class="field">
diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js
index ddd4e30a8a..1acdb4da48 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(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
@@ -116,7 +117,24 @@ export function initRepoWikiForm() {
         },
       ]
     });
-    $(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
+
+    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();
+      if (!input.length) {
+        e.preventDefault();
+        $markdownEditorTextArea.prop('required', true);
+        this.reportValidity();
+      } else {
+        $markdownEditorTextArea.prop('required', false);
+      }
+    });
 
     setTimeout(() => {
       const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]');