From 55811a1bbead2e02a635fcfb9581dbfd29986bd3 Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Fri, 16 Jan 2026 18:26:04 -0500
Subject: [PATCH] remove long press to select on mobile docs, kept for canvas

---
 components/Blocks/Block.tsx                | 12 +-------
 components/Blocks/useBlockMouseHandlers.ts | 24 ++++++++++++++--
 components/Canvas.tsx                      | 33 +++++++++++-----------
 src/hooks/useLongPress.ts                  |  2 +-
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 62cefd38..305eaf00 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -77,16 +77,6 @@ export const Block = memo(function Block(
   });
   let entity_set = useEntitySetContext();
 
-  let { isLongPress, handlers } = useLongPress(() => {
-    if (isTextBlock[props.type]) return;
-    if (isLongPress.current) {
-      focusBlock(
-        { type: props.type, value: props.entityID, parent: props.parent },
-        { type: "start" },
-      );
-    }
-  });
-
   let selected = useUIState(
     (s) => !!s.selectedBlocks.find((b) => b.value === props.entityID),
   );
@@ -117,7 +107,7 @@ export const Block = memo(function Block(
 
   return (
     <div
-      {...(!props.preview ? { ...mouseHandlers, ...handlers } : {})}
+      {...(!props.preview ? { ...mouseHandlers } : {})}
       id={
         !props.preview ? elementId.block(props.entityID).container : undefined
       }
diff --git a/components/Blocks/useBlockMouseHandlers.ts b/components/Blocks/useBlockMouseHandlers.ts
index eca3cc68..ddface11 100644
--- a/components/Blocks/useBlockMouseHandlers.ts
+++ b/components/Blocks/useBlockMouseHandlers.ts
@@ -1,5 +1,5 @@
 import { useSelectingMouse } from "components/SelectionManager/selectionState";
-import { MouseEvent, useCallback, useRef } from "react";
+import { MouseEvent, useCallback } from "react";
 import { useUIState } from "src/useUIState";
 import { Block } from "./Block";
 import { isTextBlock } from "src/utils/isTextBlock";
@@ -12,6 +12,24 @@ import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded";
 import { elementId } from "src/utils/elementId";
 
 let debounce: number | null = null;
+
+// Track scrolling state for mobile
+let isScrolling = false;
+let scrollTimeout: number | null = null;
+
+if (typeof window !== "undefined") {
+  window.addEventListener(
+    "scroll",
+    () => {
+      isScrolling = true;
+      if (scrollTimeout) window.clearTimeout(scrollTimeout);
+      scrollTimeout = window.setTimeout(() => {
+        isScrolling = false;
+      }, 150);
+    },
+    true,
+  );
+}
 export function useBlockMouseHandlers(props: Block) {
   let entity_set = useEntitySetContext();
   let isMobile = useIsMobile();
@@ -22,7 +40,7 @@ export function useBlockMouseHandlers(props: Block) {
       if ((e.target as Element).tagName === "BUTTON") return;
       if ((e.target as Element).tagName === "SELECT") return;
       if ((e.target as Element).tagName === "OPTION") return;
-      if (isMobile) return;
+      if (isMobile && isScrolling) return;
       if (!entity_set.permissions.write) return;
       useSelectingMouse.setState({ start: props.value });
       if (e.shiftKey) {
@@ -57,7 +75,7 @@ export function useBlockMouseHandlers(props: Block) {
   );
   let onMouseEnter = useCallback(
     async (e: MouseEvent) => {
-      if (isMobile) return;
+      if (isMobile && isScrolling) return;
       if (!entity_set.permissions.write) return;
       if (debounce) window.clearTimeout(debounce);
       debounce = window.setTimeout(async () => {
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
index 3b3b5903..71861954 100644
--- a/components/Canvas.tsx
+++ b/components/Canvas.tsx
@@ -290,7 +290,7 @@ function CanvasBlock(props: {
     },
     [props, rep, permissions],
   );
-  let { dragDelta, handlers } = useDrag({
+  let { dragDelta, handlers: dragHandlers } = useDrag({
     onDragEnd,
     delay: isMobile,
   });
@@ -339,18 +339,20 @@ function CanvasBlock(props: {
   );
   let rotateHandle = useDrag({ onDragEnd: RotateOnDragEnd });
 
-  let { isLongPress, handlers: longPressHandlers } = useLongPress(() => {
-    if (isLongPress.current && permissions.write) {
-      focusBlock(
-        {
-          type: type?.data.value || "text",
-          value: props.entityID,
-          parent: props.parent,
-        },
-        { type: "start" },
-      );
-    }
-  });
+  let { isLongPress, longPressHandlers: longPressHandlers } = useLongPress(
+    () => {
+      if (isLongPress.current && permissions.write) {
+        focusBlock(
+          {
+            type: type?.data.value || "text",
+            value: props.entityID,
+            parent: props.parent,
+          },
+          { type: "start" },
+        );
+      }
+    },
+  );
   let angle = 0;
   if (rotateHandle.dragDelta) {
     let originX = rect.x + rect.width / 2;
@@ -395,8 +397,7 @@ function CanvasBlock(props: {
   return (
     <div
       ref={ref}
-      {...(!props.preview ? { ...longPressHandlers } : {})}
-      {...(isMobile && permissions.write ? { ...handlers } : {})}
+      {...(isMobile && permissions.write ? { ...dragHandlers } : {})}
       id={props.preview ? undefined : elementId.block(props.entityID).container}
       className={`absolute group/canvas-block will-change-transform rounded-lg flex items-stretch origin-center p-3        `}
       style={{
@@ -408,7 +409,7 @@ function CanvasBlock(props: {
       }}
     >
       {/* the gripper show on hover, but longpress logic needs to be added for mobile*/}
-      {!props.preview && permissions.write && <Gripper {...handlers} />}
+      {!props.preview && permissions.write && <Gripper {...dragHandlers} />}
       <div
         className={`contents ${dragDelta || widthHandle.dragDelta || rotateHandle.dragDelta ? "pointer-events-none" : ""} `}
       >
diff --git a/src/hooks/useLongPress.ts b/src/hooks/useLongPress.ts
index 3a4a6816..591a3ee0 100644
--- a/src/hooks/useLongPress.ts
+++ b/src/hooks/useLongPress.ts
@@ -90,7 +90,7 @@ export const useLongPress = (cb: () => void, cancel?: boolean) => {
   return useMemo(
     () => ({
       isLongPress: isLongPress,
-      handlers: {
+      longPressHandlers: {
         onPointerDown,
         onPointerUp: end,
         onClickCapture: click,
-- 
2.51.2