From 2290c01cc350d208791f127dda5c06ff636d5f02 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Mon, 10 Jul 2023 13:51:13 +0200
Subject: [PATCH] Do not scroll the editor into the view if it is already
 (partially) visible

See https://www.woltlab.com/community/thread/300513-durch-ein-im-editor-eingef%C3%BCgter-smiley-wird-die-seite-nach-oben-geschoben/
---
 ts/WoltLabSuite/Core/Component/Ckeditor.ts    | 21 +++++++++++++++++--
 .../WoltLabSuite/Core/Component/Ckeditor.js   | 21 +++++++++++++++++--
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor.ts b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
index 9e5905230f..f50c77852a 100644
--- a/ts/WoltLabSuite/Core/Component/Ckeditor.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor.ts
@@ -53,9 +53,26 @@ class Ckeditor {
   }
 
   focus(): void {
-    scrollToElement(this.#editor.ui.element!, () => {
+    // Check if the editor is (at least partially) in the viewport otherwise
+    // scroll to it before setting the focus.
+    const editorContainer = this.#editor.ui.element!;
+    const { bottom, top } = editorContainer.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+
+    let isPartiallyVisible = false;
+    if (top > 0 && top < viewportHeight) {
+      isPartiallyVisible = true;
+    } else if (bottom > 0 && bottom < viewportHeight) {
+      isPartiallyVisible = true;
+    }
+
+    if (isPartiallyVisible) {
       this.#editor.editing.view.focus();
-    });
+    } else {
+      scrollToElement(editorContainer, () => {
+        this.#editor.editing.view.focus();
+      });
+    }
   }
 
   getHtml(): string {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
index b4eade59ed..51ed4e8c1f 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor.js
@@ -34,9 +34,26 @@ define(["require", "exports", "tslib", "./Ckeditor/Attachment", "./Ckeditor/Medi
             }
         }
         focus() {
-            (0, Scroll_1.element)(this.#editor.ui.element, () => {
+            // Check if the editor is (at least partially) in the viewport otherwise
+            // scroll to it before setting the focus.
+            const editorContainer = this.#editor.ui.element;
+            const { bottom, top } = editorContainer.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            let isPartiallyVisible = false;
+            if (top > 0 && top < viewportHeight) {
+                isPartiallyVisible = true;
+            }
+            else if (bottom > 0 && bottom < viewportHeight) {
+                isPartiallyVisible = true;
+            }
+            if (isPartiallyVisible) {
                 this.#editor.editing.view.focus();
-            });
+            }
+            else {
+                (0, Scroll_1.element)(editorContainer, () => {
+                    this.#editor.editing.view.focus();
+                });
+            }
         }
         getHtml() {
             return this.#editor.data.get();
-- 
2.20.1