Fix the position of validation errors for comments/responses

Fixes #5369

diff --git a/ts/WoltLabSuite/Core/Component/Comment/Add.ts b/ts/WoltLabSuite/Core/Component/Comment/Add.ts
index c960d8c08bcac450c781aa88168d72f3dcbf2b67..d01fa5f2ec85f33ce9ddc21336dbf5e40d833acf 100644 (file)
--- 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 4e4b7c1ad340412af5dc885ae363dc8a7441ec71..19b55950ef5360c0d3f135754b11582c1a10e52f 100644 (file)
--- 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 81292c651f29136bf08d04d5f5ba351618640bf8..f2911b78554a3ec3c4c70702c9689d5bd916dd28 100644 (file)
--- 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 2c43b892c9199acc1100e494f9e487731aeb8081..489e69a638a574346d66634a9607f6f849bc5e80 100644 (file)
--- 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 a79e2e57eacdc9e955e1c5f5694f8f16b48d43bd..043321a4a228d8ddc4d46ecc90990d02345291dd 100644 (file)
--- 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;
+       }
+}