Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* 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>
This commit is contained in:
David Jimenez 2021-10-27 05:33:22 +01:00 committed by GitHub
parent 8f9ac439ca
commit a462fcaac8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/repo/wiki/new.tmpl
View file

@ -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">

22
web_src/js/features/repo-wiki.js
View file

@ -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"]');