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>
tokarchuk/v1.17
David Jimenez 3 years ago committed by GitHub
parent 8f9ac439ca
commit a462fcaac8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      templates/repo/wiki/new.tmpl
  2. 22
      web_src/js/features/repo-wiki.js

@ -22,7 +22,7 @@
</div> </div>
<div class="field content" data-loading="{{.i18n.Tr "loading"}}"> <div class="field content" data-loading="{{.i18n.Tr "loading"}}">
<div class="ui bottom active tab" data-tab="write"> <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> </div>
<div class="field"> <div class="field">

@ -8,7 +8,9 @@ export function initRepoWikiForm() {
let sideBySideChanges = 0; let sideBySideChanges = 0;
let sideBySideTimeout = null; let sideBySideTimeout = null;
let hasSimpleMDE = true; let hasSimpleMDE = true;
if ($editArea.length > 0) { if ($editArea.length > 0) {
const $form = $('.repository.wiki.new .ui.form');
const simplemde = new SimpleMDE({ const simplemde = new SimpleMDE({
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
element: $editArea[0], element: $editArea[0],
@ -105,7 +107,6 @@ export function initRepoWikiForm() {
action(e) { action(e) {
e.toTextArea(); e.toTextArea();
hasSimpleMDE = false; hasSimpleMDE = false;
const $form = $('.repository.wiki.new .ui.form');
const $root = $form.find('.field.content'); const $root = $form.find('.field.content');
const loading = $root.data('loading'); const loading = $root.data('loading');
$root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`); $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(() => { setTimeout(() => {
const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]'); const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]');

Loading…
Cancel
Save