From 2a34f26d5977a24ef25879b1631c420aefc28695 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Tue, 28 Mar 2023 17:03:20 +0200 Subject: [PATCH] Fix the position of validation errors for comments/responses Fixes #5369 --- ts/WoltLabSuite/Core/Component/Comment/Add.ts | 4 ++-- ts/WoltLabSuite/Core/Component/Comment/Response/Add.ts | 4 ++-- .../js/WoltLabSuite/Core/Component/Comment/Add.js | 4 ++-- .../Core/Component/Comment/Response/Add.js | 4 ++-- wcfsetup/install/files/style/ui/ckeditor.scss | 10 ++++++++++ 5 files changed, 18 insertions(+), 8 deletions(-) diff --git a/ts/WoltLabSuite/Core/Component/Comment/Add.ts b/ts/WoltLabSuite/Core/Component/Comment/Add.ts index c960d8c08b..d01fa5f2ec 100644 --- a/ts/WoltLabSuite/Core/Component/Comment/Add.ts +++ b/ts/WoltLabSuite/Core/Component/Comment/Add.ts @@ -98,7 +98,7 @@ export class CommentAdd { const message = this.#getEditor().getHtml(); if (message === "") { - this.#throwError(this.#textarea, getPhrase("wcf.global.form.error.empty")); + this.#throwError(this.#getEditor().element, getPhrase("wcf.global.form.error.empty")); return false; } @@ -137,7 +137,7 @@ export class CommentAdd { .dispatch()) as ResponseAddComment; } catch (error) { await handleValidationErrors(error, (returnValues) => { - this.#throwError(this.#textarea, returnValues.errorType); + this.#throwError(this.#getEditor().element, returnValues.errorType); this.#hideLoadingOverlay(); diff --git a/ts/WoltLabSuite/Core/Component/Comment/Response/Add.ts b/ts/WoltLabSuite/Core/Component/Comment/Response/Add.ts index 4e4b7c1ad3..19b55950ef 100644 --- a/ts/WoltLabSuite/Core/Component/Comment/Response/Add.ts +++ b/ts/WoltLabSuite/Core/Component/Comment/Response/Add.ts @@ -80,7 +80,7 @@ export class CommentResponseAdd { const message = this.#getEditor().getHtml(); if (message === "") { - this.#throwError(this.#textarea, getPhrase("wcf.global.form.error.empty")); + this.#throwError(this.#getEditor().element, getPhrase("wcf.global.form.error.empty")); return false; } @@ -122,7 +122,7 @@ export class CommentResponseAdd { if (error instanceof StatusNotOk) { const json = await error.response.clone().json(); if (json.code === 412 && json.returnValues) { - this.#throwError(this.#textarea, json.returnValues.errorType); + this.#throwError(this.#getEditor().element, json.returnValues.errorType); } } else { throw error; diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/Add.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/Add.js index 81292c651f..f2911b7855 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/Add.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/Add.js @@ -77,7 +77,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Ui/Scroll", "../../U this.#container.querySelectorAll(".innerError").forEach((el) => el.remove()); const message = this.#getEditor().getHtml(); if (message === "") { - this.#throwError(this.#textarea, (0, Language_1.getPhrase)("wcf.global.form.error.empty")); + this.#throwError(this.#getEditor().element, (0, Language_1.getPhrase)("wcf.global.form.error.empty")); return false; } const data = { @@ -108,7 +108,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Ui/Scroll", "../../U } catch (error) { await (0, Ajax_1.handleValidationErrors)(error, (returnValues) => { - this.#throwError(this.#textarea, returnValues.errorType); + this.#throwError(this.#getEditor().element, returnValues.errorType); this.#hideLoadingOverlay(); return true; }); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/Response/Add.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/Response/Add.js index 2c43b892c9..489e69a638 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/Response/Add.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Comment/Response/Add.js @@ -59,7 +59,7 @@ define(["require", "exports", "tslib", "../../../Dom/Util", "../../../Language", this.container.querySelectorAll(".innerError").forEach((el) => el.remove()); const message = this.#getEditor().getHtml(); if (message === "") { - this.#throwError(this.#textarea, (0, Language_1.getPhrase)("wcf.global.form.error.empty")); + this.#throwError(this.#getEditor().element, (0, Language_1.getPhrase)("wcf.global.form.error.empty")); return false; } const data = { @@ -93,7 +93,7 @@ define(["require", "exports", "tslib", "../../../Dom/Util", "../../../Language", if (error instanceof Error_1.StatusNotOk) { const json = await error.response.clone().json(); if (json.code === 412 && json.returnValues) { - this.#throwError(this.#textarea, json.returnValues.errorType); + this.#throwError(this.#getEditor().element, json.returnValues.errorType); } } else { diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss index a79e2e57ea..043321a4a2 100644 --- a/wcfsetup/install/files/style/ui/ckeditor.scss +++ b/wcfsetup/install/files/style/ui/ckeditor.scss @@ -171,3 +171,13 @@ html[data-color-scheme="dark"] { flex-direction: row-reverse; margin-top: 20px; } + +/* Styling of inline errors for the editor. */ +.ck.ck-editor + .innerError { + margin-top: 0; + width: 100%; + + &::before { + display: none; + } +} -- 2.20.1