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

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

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

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