From: Alexander Ebert <ebert@woltlab.com>
Date: Sun, 14 May 2023 14:42:25 +0000 (+0200)
Subject: Fix CKEditor’s sticky toolbar
X-Git-Tag: 6.0.0_Alpha_1~107
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=83172ec2b66c6c589957930885f02a549f2b05ab;p=GitHub%2FWoltLab%2FWCF.git

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 2ca76e50d1..0532bf1fde 100644
--- 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 3ff9de746d..93f81afe38 100644
--- 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 45a9f935b9..c2e022af71 100644
--- 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 cfd1eec30f..9f3ebb6178 100644
--- 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 e9ce3f5fef..6ffd7613ef 100644
--- 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 {