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: sparksuite/simplemde-markdown-editor#324

Signed-off-by: David Jimenez <[email protected]>

Author: dvejmz

templates/repo/wiki/new.tmpl

@@ -11,7 +11,7 @@
 				</div>
 			{{end}}
 		</div>
-		<form class="ui form" action="{{.Link}}" method="post">
+		<form id="edit_form" class="ui form" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="field {{if .Err_Title}}error{{end}}">
 				<input name="title" value="{{.title}}" autofocus required>
@@ -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 .PageIsUncycloEdit}}{{.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 .PageIsUncycloEdit}}{{.content}}{{else}}{{.i18n.Tr "repo.wiki.welcome"}}{{end}}</textarea>
 				</div>
 			</div>
 			<div class="field">

web_src/js/features/repo-wiki.js

@@ -116,6 +116,22 @@ export function initRepoUncycloForm() {
         },
       ]
     });
+
+    $('#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(() => {