From 4e8a2f102a4b2f5f1902bfb82a27bc6ddcd1eb1d Mon Sep 17 00:00:00 2001
From: celine <celine@hyperlink.academy>
Date: Mon, 19 Jan 2026 17:14:06 -0500
Subject: [PATCH] make things blocks easier to manuever in canvas

---
 components/Blocks/Block.tsx       | 13 ++++++--
 components/Blocks/ButtonBlock.tsx |  1 -
 components/Blocks/EmbedBlock.tsx  |  4 ++-
 components/Canvas.tsx             | 54 ++++++++++++++++++++-----------
 4 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 292d6e79..2b300e8c 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -68,7 +68,6 @@ export const Block = memo(function Block(
   // Block handles all block level events like
   // mouse events, keyboard events and longPress, and setting AreYouSure state
   // and shared styling like padding and flex for list layouting
-  let { rep } = useReplicache();
   let mouseHandlers = useBlockMouseHandlers(props);
   let handleDrop = useHandleDrop({
     parent: props.parent,
@@ -77,6 +76,16 @@ export const Block = memo(function Block(
   });
   let entity_set = useEntitySetContext();
 
+  let { isLongPress, longPressHandlers } = 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),
   );
@@ -107,7 +116,7 @@ export const Block = memo(function Block(
 
   return (
     <div
-      {...(!props.preview ? { ...mouseHandlers } : {})}
+      {...(!props.preview ? { ...mouseHandlers, ...longPressHandlers } : {})}
       id={
         !props.preview ? elementId.block(props.entityID).container : undefined
       }
diff --git a/components/Blocks/ButtonBlock.tsx b/components/Blocks/ButtonBlock.tsx
index fca9f5ed..af08221d 100644
--- a/components/Blocks/ButtonBlock.tsx
+++ b/components/Blocks/ButtonBlock.tsx
@@ -193,7 +193,6 @@ const ButtonBlockSettings = (props: BlockProps) => {
               <Separator />
               <Input
                 type="text"
-                autoFocus
                 className="w-full grow border-none outline-hidden bg-transparent"
                 placeholder="button text"
                 value={textValue}
diff --git a/components/Blocks/EmbedBlock.tsx b/components/Blocks/EmbedBlock.tsx
index 806fcb1c..21236ca1 100644
--- a/components/Blocks/EmbedBlock.tsx
+++ b/components/Blocks/EmbedBlock.tsx
@@ -111,8 +111,10 @@ export const EmbedBlock = (props: BlockProps & { preview?: boolean }) => {
           <div
             data-draggable
             className={`resizeHandle
+
+
           cursor-ns-resize shrink-0 z-10 w-6 h-[5px]
-          absolute bottom-2 right-1/2 translate-x-1/2 translate-y-[2px]
+          absolute bottom-[3px] right-1/2 translate-x-1/2
           rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]
           ${isCanvasBlock ? "hidden group-hover/canvas-block:block" : ""}`}
             {...heightHandle.handlers}
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
index 71861954..496cffdf 100644
--- a/components/Canvas.tsx
+++ b/components/Canvas.tsx
@@ -26,6 +26,7 @@ import {
   PubLeafletPublicationRecord,
 } from "lexicons/api";
 import { useHandleCanvasDrop } from "./Blocks/useHandleCanvasDrop";
+import { useBlockMouseHandlers } from "./Blocks/useBlockMouseHandlers";
 
 export function Canvas(props: {
   entityID: string;
@@ -292,7 +293,6 @@ function CanvasBlock(props: {
   );
   let { dragDelta, handlers: dragHandlers } = useDrag({
     onDragEnd,
-    delay: isMobile,
   });
 
   let widthOnDragEnd = useCallback(
@@ -389,6 +389,8 @@ function CanvasBlock(props: {
     };
   }, [props, type?.data.value]);
   useBlockKeyboardHandlers(blockProps, areYouSure, setAreYouSure);
+  let mouseHandlers = useBlockMouseHandlers(blockProps);
+
   let isList = useEntity(props.entityID, "block/is-list");
   let isFocused = useUIState(
     (s) => s.focusedEntity?.entityID === props.entityID,
@@ -397,9 +399,10 @@ function CanvasBlock(props: {
   return (
     <div
       ref={ref}
-      {...(isMobile && permissions.write ? { ...dragHandlers } : {})}
+      {...(!props.preview ? { ...longPressHandlers } : {})}
+      // {...(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        `}
+      className={`canvasBlockWrapper absolute group/canvas-block will-change-transform rounded-lg flex items-stretch origin-center p-3        `}
       style={{
         top: 0,
         left: 0,
@@ -409,9 +412,14 @@ function CanvasBlock(props: {
       }}
     >
       {/* the gripper show on hover, but longpress logic needs to be added for mobile*/}
-      {!props.preview && permissions.write && <Gripper {...dragHandlers} />}
+      {!props.preview && permissions.write && (
+        <Gripper isFocused={isFocused} {...dragHandlers} />
+      )}
+
+      {/*mouseHandlers are being added here so they don't interfere with the dragHandlers in the div above*/}
       <div
-        className={`contents ${dragDelta || widthHandle.dragDelta || rotateHandle.dragDelta ? "pointer-events-none" : ""} `}
+        className={` w-full ${dragDelta || widthHandle.dragDelta || rotateHandle.dragDelta ? "pointer-events-none" : ""} `}
+        {...(!props.preview ? { ...mouseHandlers } : {})}
       >
         <BaseBlock
           {...blockProps}
@@ -429,10 +437,13 @@ function CanvasBlock(props: {
         <div
           className={`resizeHandle
           cursor-e-resize shrink-0 z-10
-          hidden group-hover/canvas-block:block
-          w-[5px] h-6 -ml-[3px]
-          absolute top-1/2 right-3 -translate-y-1/2 translate-x-[2px]
-          rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`}
+         group-hover/canvas-block:block
+          sm:w-[5px] w-3 sm:h-6  h-8
+          absolute top-1/2 sm:right-2 right-1 -translate-y-1/2
+          rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]
+          ${isFocused ? "block" : "hidden"}
+
+          `}
           {...widthHandle.handlers}
         />
       )}
@@ -441,11 +452,13 @@ function CanvasBlock(props: {
         <div
           className={`rotateHandle
             cursor-grab shrink-0 z-10
-            hidden group-hover/canvas-block:block
-            w-[8px] h-[8px]
-            absolute bottom-0 -right-0
+            group-hover/canvas-block:block
+            sm:w-[8px] sm:h-[8px] w-4 h-4
+            absolute sm:bottom-0 sm:right-0 -bottom-1 -right-1
             -translate-y-1/2 -translate-x-1/2
-            rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]`}
+            rounded-full bg-white  border-2 border-[#8C8C8C] shadow-[0_0_0_1px_white,inset_0_0_0_1px_white]
+            ${isFocused ? "block" : "hidden"}
+`}
           {...rotateHandle.handlers}
         />
       )}
@@ -566,25 +579,28 @@ export const CanvasBackgroundPattern = (props: {
   }
 };
 
-const Gripper = (props: { onMouseDown: (e: React.MouseEvent) => void }) => {
+const Gripper = (props: {
+  onMouseDown: (e: React.MouseEvent) => void;
+  isFocused: boolean;
+}) => {
   return (
     <div
       onMouseDown={props.onMouseDown}
       onPointerDown={props.onMouseDown}
-      className="w-[9px] shrink-0 py-1 mr-1 bg-bg-card cursor-grab touch-none"
+      className="gripper w-[9px] shrink-0 py-1 mr-1 cursor-grab touch-none"
     >
-      <Media mobile={false} className="h-full grid grid-cols-1 grid-rows-1 ">
+      <div className="h-full grid grid-cols-1 grid-rows-1 ">
         {/* the gripper is two svg's stacked on top of each other.
         One for the actual gripper, the other is an outline to endure the gripper stays visible on image backgrounds */}
         <div
-          className="h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-bg-page hidden group-hover/canvas-block:block"
+          className={`h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-bg-page group-hover/canvas-block:block ${props.isFocused ? "block" : "hidden"}`}
           style={{ maskImage: "var(--gripperSVG2)", maskRepeat: "repeat" }}
         />
         <div
-          className="h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-tertiary hidden group-hover/canvas-block:block"
+          className={`h-full col-start-1 col-end-2 row-start-1 row-end-2 bg-tertiary group-hover/canvas-block:block ${props.isFocused ? "block" : "hidden"}`}
           style={{ maskImage: "var(--gripperSVG)", maskRepeat: "repeat" }}
         />
-      </Media>
+      </div>
     </div>
   );
 };
-- 
2.51.2