From 83172ec2b66c6c589957930885f02a549f2b05ab Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Sun, 14 May 2023 16:42:25 +0200 Subject: [PATCH] =?utf8?q?Fix=20CKEditor=E2=80=99s=20sticky=20toolbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Fixes #5508 --- .../Core/Component/Ckeditor/Configuration.ts | 5 +++++ ts/WoltLabSuite/Core/Ui/Message/InlineEditor.ts | 10 ++++++++++ .../Core/Component/Ckeditor/Configuration.js | 5 +++++ .../js/WoltLabSuite/Core/Ui/Message/InlineEditor.js | 8 ++++++++ wcfsetup/install/files/style/ui/ckeditor.scss | 4 ++++ 5 files changed, 32 insertions(+) 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 { -- 2.20.1