From 1d5e194a56356f1a70d41972dc079d9360467637 Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Fri, 5 Feb 2021 11:47:10 +0500
Subject: [PATCH] fix: scroll jumps when sticking/unsticking toolbar

---
 apps/web/src/components/editor/index.js   | 18 ++++++++++++------
 apps/web/src/components/editor/tinymce.js |  8 ++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/editor/index.js b/apps/web/src/components/editor/index.js
index 35a75c42e..e595ea9e0 100644
--- a/apps/web/src/components/editor/index.js
+++ b/apps/web/src/components/editor/index.js
@@ -16,7 +16,7 @@ import Banner from "../banner";
 import EditorLoading from "./loading";
 
 const ReactMCE = React.lazy(() => import("./tinymce"));
-var isToolbarSticky = false;
+
 function Editor(props) {
   const editorRef = useRef();
   const sessionState = useStore((store) => store.session.state);
@@ -89,19 +89,25 @@ function Editor(props) {
           const title = document.querySelector(".editorTitle");
           const headerOffset = title.scrollHeight;
           const hideOffset = headerOffset + 60;
-          if (e.target.scrollTop > hideOffset && !isToolbarSticky) {
+          const { editor } = editorRef.current;
+          if (e.target.scrollTop > hideOffset && !editor.isToolbarSticky) {
+            editor.pauseScrollIntoView = true;
             const toolbar = document.querySelector(".tox-editor-header");
             toolbar.style.position = "fixed";
             toolbar.style.top = "40px";
             toolbar.style.bottom = "auto";
             toolbar.style.width = `${title.clientWidth}px`;
-            isToolbarSticky = true;
-          } else if (e.target.scrollTop <= hideOffset && isToolbarSticky) {
+            editor.isToolbarSticky = true;
+          } else if (
+            e.target.scrollTop <= hideOffset &&
+            editor.isToolbarSticky
+          ) {
+            editor.pauseScrollIntoView = true;
             const toolbar = document.querySelector(".tox-editor-header");
             toolbar.style.position = "relative";
             toolbar.style.top = "0px";
-            toolbar.style.bottom = "0px";
-            isToolbarSticky = false;
+            toolbar.style.bottom = "auto";
+            editor.isToolbarSticky = false;
           }
         }}
       >
diff --git a/apps/web/src/components/editor/tinymce.js b/apps/web/src/components/editor/tinymce.js
index 507b6ff94..6ab4ccf50 100644
--- a/apps/web/src/components/editor/tinymce.js
+++ b/apps/web/src/components/editor/tinymce.js
@@ -175,6 +175,14 @@ function TinyMCE(props) {
             "data:" + blobInfo.blob().type + ";base64," + blobInfo.base64()
           );
         },
+        setup: (editor) => {
+          editor.on("ScrollIntoView", (e) => {
+            if (editor.pauseScrollIntoView) {
+              e.preventDefault();
+              editor.pauseScrollIntoView = false;
+            }
+          });
+        },
       }}
       // onBeforeExecCommand={async (command) => {
       //   if (