Fix CKEditor’s sticky toolbar

Fixes #5508

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
index 2ca76e50d1471f3585c28549e6891c43bfb88572..0532bf1fde7f0b133efe4f1ff8beca0de524ac33 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Configuration.ts
@@ -294,6 +294,11 @@ class ConfigurationBuilder {
         options: [8, 10, 12, "default", 18, 24, 36],
       },
       toolbar: this.#getToolbar(),
+      ui: {
+        viewportOffset: {
+          top: 50,
+        },
+      },
       woltlabToolbarGroup: this.#toolbarGroups,
     } as any;
   }

diff --git a/ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts b/ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts
index 3ff9de746d5001d92f0235ade227f1d53eb6c996..93f81afe38b2e417c28b1e85222472285a23d06c 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts
+++ b/ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts
@@ -376,6 +376,11 @@ class UiMessageInlineEditor implements AjaxCallbackObject {
     const elementData = this._elements.get(activeElement)!;
 
     activeElement.classList.add("jsInvalidQuoteTarget");
+    const parent = activeElement.parentElement!;
+    if (parent.classList.contains("anchorFixedHeader")) {
+      parent.classList.add("disableAnchorFixedHeader");
+    }
+
     const icon = elementData.messageBodyEditor!.querySelector("fa-icon")!;
     icon.remove();
 
@@ -428,7 +433,12 @@ class UiMessageInlineEditor implements AjaxCallbackObject {
     DomUtil.show(elementData.messageBody);
     DomUtil.show(elementData.messageFooter);
     DomUtil.show(elementData.messageHeader);
+
     activeElement.classList.remove("jsInvalidQuoteTarget");
+    const parent = activeElement.parentElement!;
+    if (parent.classList.contains("anchorFixedHeader")) {
+      parent.classList.remove("disableAnchorFixedHeader");
+    }
 
     this._activeElement = null;
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
index 45a9f935b9fcafa1c91c98590eff433e1a334535..c2e022af71c4bf45d6ffbdb9d91e50be45ac9030 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Configuration.js
@@ -259,6 +259,11 @@ define(["require", "exports", "../../Language"], function (require, exports, Lan
                     options: [8, 10, 12, "default", 18, 24, 36],
                 },
                 toolbar: this.#getToolbar(),
+                ui: {
+                    viewportOffset: {
+                        top: 50,
+                    },
+                },
                 woltlabToolbarGroup: this.#toolbarGroups,
             };
         }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/InlineEditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/InlineEditor.js
index cfd1eec30fdd04121dc933d38a796c611c3e8cfe..9f3ebb6178709d8db9274d193af019b4b32c67c0 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/InlineEditor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Message/InlineEditor.js
@@ -292,6 +292,10 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Component/Ckeditor/Eve
             const activeElement = this._activeElement;
             const elementData = this._elements.get(activeElement);
             activeElement.classList.add("jsInvalidQuoteTarget");
+            const parent = activeElement.parentElement;
+            if (parent.classList.contains("anchorFixedHeader")) {
+                parent.classList.add("disableAnchorFixedHeader");
+            }
             const icon = elementData.messageBodyEditor.querySelector("fa-icon");
             icon.remove();
             const messageBody = elementData.messageBodyEditor;
@@ -332,6 +336,10 @@ define(["require", "exports", "tslib", "WoltLabSuite/Core/Component/Ckeditor/Eve
             Util_1.default.show(elementData.messageFooter);
             Util_1.default.show(elementData.messageHeader);
             activeElement.classList.remove("jsInvalidQuoteTarget");
+            const parent = activeElement.parentElement;
+            if (parent.classList.contains("anchorFixedHeader")) {
+                parent.classList.remove("disableAnchorFixedHeader");
+            }
             this._activeElement = null;
             if (this._options.quoteManager) {
                 this._options.quoteManager.clearAlternativeEditor();

diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss
index e9ce3f5fef729262d9302b516f76dc31d0fbb6b7..6ffd7613ef5b63981ff612a0b71f1731209d40b3 100644 (file)
--- a/wcfsetup/install/files/style/ui/ckeditor.scss
+++ b/wcfsetup/install/files/style/ui/ckeditor.scss
@@ -184,6 +184,10 @@
        border-radius: 0 !important;
 }
 
+.ck.ck-sticky-panel__content {
+       --ck-z-modal: 1;
+}
+
 html[data-color-scheme="dark"] {
        .ck.ck-editor,
        .ck.ck-body {