mobile: fix editor scrolling on update

streetwriters · May 8, 2024 · 5a75ca7 · 5a75ca7
1 parent 626d393
commit 5a75ca7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 15 deletions.
diff --git a/packages/editor-mobile/src/components/editor.tsx b/packages/editor-mobile/src/components/editor.tsx
@@ -196,14 +196,22 @@ const Tiptap = ({
             ? useTabStore.getState().noteState[tabRef.current.noteId]
             : undefined;
           const top = noteState?.top;
-          logger("info", tabRef.current.noteId, noteState?.top);
+          logger(
+            "info",
+            "editor.onCreate",
+            tabRef.current?.noteId,
+            noteState?.top,
+            noteState?.to,
+            noteState?.from
+          );
 
           if (noteState?.to || noteState?.from) {
             editors[tabRef.current.id]?.chain().setTextSelection({
               to: noteState.to,
               from: noteState.from
             });
           }
+          logger("info", "Scrolling to", top, useTabStore.getState().noteState);
           containerRef.current?.scrollTo({
             left: 0,
             top: top || 0,
@@ -234,7 +242,6 @@ const Tiptap = ({
   const _editor = useTiptap(tiptapOptions, [tiptapOptions]);
 
   const update = useCallback(() => {
-    logger("info", "LOADING NOTE...");
     editors[tabRef.current.id]?.commands.setTextSelection(0);
     setTick((tick) => tick + 1);
     globalThis.editorControllers[tabRef.current.id]?.setTitlePlaceholder(
@@ -278,6 +285,13 @@ const Tiptap = ({
           ? state.noteState[tabRef.current.noteId]
           : undefined;
         if (noteState) {
+          if (
+            containerRef.current &&
+            containerRef.current?.scrollHeight < noteState.top
+          ) {
+            console.log("Container too small to scroll.");
+            return;
+          }
           containerRef.current?.scrollTo({
             left: 0,
             top: noteState.top,
@@ -317,6 +331,7 @@ const Tiptap = ({
     };
 
     updateScrollPosition(useTabStore.getState());
+
     const unsub = useTabStore.subscribe((state, prevState) => {
       if (state.currentTab !== tabRef.current.id) {
         isFocusedRef.current = false;

diff --git a/packages/editor-mobile/src/hooks/useEditorController.ts b/packages/editor-mobile/src/hooks/useEditorController.ts
@@ -54,6 +54,7 @@ type Timers = {
   selectionChange: NodeJS.Timeout | null;
   change: NodeJS.Timeout | null;
   wordCounter: NodeJS.Timeout | null;
+  scroll: NodeJS.Timeout | null;
 };
 
 function isInViewport(element: any) {
@@ -135,7 +136,8 @@ export function useEditorController({
   const timers = useRef<Timers>({
     selectionChange: null,
     change: null,
-    wordCounter: null
+    wordCounter: null,
+    scroll: null
   });
 
   if (!tabRef.current.noteId && loading) {
@@ -210,14 +212,19 @@ export function useEditorController({
 
   const scroll = useCallback(
     (_event: React.UIEvent<HTMLDivElement, UIEvent>) => {
-      const noteId = useTabStore
-        .getState()
-        .getNoteIdForTab(useTabStore.getState().currentTab);
-      if (noteId) {
-        useTabStore.getState().setNoteState(noteId, {
-          top: _event.currentTarget.scrollTop
-        });
-      }
+      const value = _event.currentTarget.scrollTop;
+      if (timers.current.scroll !== null) clearTimeout(timers.current.scroll);
+      timers.current.scroll = setTimeout(() => {
+        if (
+          tabRef.current.noteId &&
+          tabRef.current.noteId === useTabStore.getState().getCurrentNoteId()
+        ) {
+          logger("info", tabRef.current.noteId, value);
+          useTabStore.getState().setNoteState(tabRef.current.noteId, {
+            top: value
+          });
+        }
+      }, 16);
     },
     []
   );
@@ -259,10 +266,13 @@ export function useEditorController({
               preserveWhitespace: true
             });
 
-            editor.commands.setTextSelection({
-              from,
-              to
-            });
+            if (editor.isFocused && (to !== 1 || from !== 1)) {
+              logger("info", "Setting focus", to, from);
+              editor.commands.setTextSelection({
+                from,
+                to
+              });
+            }
             countWords(0);
           }