Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2026-02-24 04:00:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: scroll jumps when sticking/unsticking toolbar

Browse Source
This commit is contained in:
thecodrr
2021-02-05 11:47:10 +05:00
parent 2ba03ca311
commit 1d5e194a56
2 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/components/editor/index.js
View File

@@ -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;
}
}}
>

8
apps/web/src/components/editor/tinymce.js
View File

@@ -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 (