Fix selection scrolls to incorrect position on focus and press enter …

…on mobile (#6838) * mobile: fix keep-in-view overscrolling * mobile: fix editor status flickers too much * mobile: fix setting startingOffset * mobile: set sticky state if not set already
streetwriters · Nov 6, 2024 · f740a21 · f740a21
1 parent 3cf00cb
commit f740a21
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git a/packages/editor-mobile/src/components/statusbar.tsx b/packages/editor-mobile/src/components/statusbar.tsx
@@ -62,9 +62,12 @@ function StatusBar({
     };
   }, [tab.id, statusBar]);
 
+  const scrollState = useRef({
+    isMovingUp: false,
+    startingOffset: 0
+  });
   const onScroll = React.useCallback((event: Event) => {
     const currentOffset = (event.target as HTMLElement)?.scrollTop;
-    post("editor-event:scroll", currentOffset);
     if (currentOffset < 200) {
       if (stickyRef.current) {
         stickyRef.current = false;
@@ -76,11 +79,39 @@ function StatusBar({
     }
     if (Date.now() - lastStickyChangeTime.current < 300) return;
     if (currentOffset > prevScroll.current) {
-      setSticky(false);
-      stickyRef.current = false;
+      if (
+        !scrollState.current.startingOffset ||
+        scrollState.current.isMovingUp
+      ) {
+        scrollState.current.startingOffset = currentOffset;
+      }
+      scrollState.current.isMovingUp = false;
+    } else {
+      if (
+        !scrollState.current.startingOffset ||
+        !scrollState.current.isMovingUp
+      ) {
+        scrollState.current.startingOffset = currentOffset;
+      }
+      scrollState.current.isMovingUp = true;
+    }
+
+    if (scrollState.current.isMovingUp) {
+      if (currentOffset < scrollState.current.startingOffset - 50) {
+        if (!stickyRef.current) {
+          stickyRef.current = true;
+          setSticky(true);
+        }
+        scrollState.current.startingOffset = 0;
+      }
     } else {
-      setSticky(true);
-      stickyRef.current = true;
+      if (currentOffset > scrollState.current.startingOffset + 50) {
+        if (stickyRef.current) {
+          stickyRef.current = false;
+          setSticky(false);
+        }
+        scrollState.current.startingOffset = 0;
+      }
     }
     lastStickyChangeTime.current = Date.now();
     prevScroll.current = currentOffset;

diff --git a/packages/editor/src/extensions/keep-in-view/keep-in-view.ts b/packages/editor/src/extensions/keep-in-view/keep-in-view.ts
@@ -82,9 +82,7 @@ export function keepLastLineInView(
   )
     return;
 
-  const isPopupVisible = document.getElementsByClassName(
-    "editor-mobile-toolbar-popup"
-  );
+  const isPopupVisible = document.querySelector(".editor-mobile-toolbar-popup");
 
   const node = editor.state.selection.$from;
   if (node.pos > editor.state.doc.nodeSize) return;