fix(editor): improve block drag-and-drop hit targeting (#100)

Increase the dead zone from 4px to 16px so the drag handle appears more
readily when hovering near a block.

Add a nearest-block fallback so the cursor always resolves to a target
during drag operations, even when positioned in the gap between blocks.

Extract element lookup into getTopLevelBlockElements for reuse across
the two search passes.

Closes #99

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

src/components/editor/draggable-block-plugin.tsx

@@ -22,44 +22,83 @@ const DROP_INDICATOR_CLASSNAME = "memo-drop-indicator";
 // Position drag handle within the anchor's left padding (anchor has pl-8 = 32px)
 const HANDLE_LEFT_OFFSET = 0;
 // Vertical dead zone — mouse must be within this distance of a block to show handle
-const HANDLE_DEAD_ZONE = 4;
-
-function getBlockElement(
-  anchorElem: HTMLElement,
-  editor: LexicalEditor,
-  event: MouseEvent
-): HTMLElement | null {
-  const editorBounds = anchorElem.getBoundingClientRect();
-  const y = event.clientY;
-
-  // Walk through top-level block elements in the editor
-  let blockElem: HTMLElement | null = null;
-  let minDistance = Infinity;
+const HANDLE_DEAD_ZONE = 16;
 
+function getTopLevelBlockElements(
+  anchorElem: HTMLElement
+): HTMLCollectionOf<Element> | NodeListOf<Element> | undefined {
   const children = anchorElem.querySelectorAll(
     "[data-lexical-editor] > *"
   );
+  if (children.length > 0) return children;
 
-  // If no direct children found, try the contentEditable's children
   const contentEditable = anchorElem.querySelector(
     '[contenteditable="true"]'
   );
-  const elements = children.length > 0 ? children : contentEditable?.children;
+  return contentEditable?.children;
+}
 
+function getBlockElement(
+  anchorElem: HTMLElement,
+  editor: LexicalEditor,
+  event: MouseEvent,
+  /** When true (during drag), always return the nearest block regardless of dead zone */
+  useUnboundedSearch = false
+): HTMLElement | null {
+  const editorBounds = anchorElem.getBoundingClientRect();
+  const y = event.clientY;
+
+  const elements = getTopLevelBlockElements(anchorElem);
   if (!elements) return null;
 
+  // First pass: find the closest block within the dead zone
+  let blockElem: HTMLElement | null = null;
+  let minDistance = Infinity;
+
   for (let i = 0; i < elements.length; i++) {
     const elem = elements[i] as HTMLElement;
     const rect = elem.getBoundingClientRect();
     const centerY = rect.top + rect.height / 2;
     const distance = Math.abs(y - centerY);
 
-    if (distance < minDistance && y >= rect.top - HANDLE_DEAD_ZONE && y <= rect.bottom + HANDLE_DEAD_ZONE) {
+    if (
+      distance < minDistance &&
+      y >= rect.top - HANDLE_DEAD_ZONE &&
+      y <= rect.bottom + HANDLE_DEAD_ZONE
+    ) {
       minDistance = distance;
       blockElem = elem;
     }
   }
 
+  // Fallback: if nothing matched within the dead zone (cursor is in a gap
+  // between blocks or beyond the last block), find the absolute nearest block.
+  // Always used during drag; for hover, only when cursor is within the editor
+  // vertical bounds.
+  if (!blockElem) {
+    const withinEditorY =
+      y >= editorBounds.top && y <= editorBounds.bottom;
+
+    if (useUnboundedSearch || withinEditorY) {
+      let fallbackDistance = Infinity;
+      for (let i = 0; i < elements.length; i++) {
+        const elem = elements[i] as HTMLElement;
+        const rect = elem.getBoundingClientRect();
+        // Distance to the nearest edge of the element
+        const dist =
+          y < rect.top
+            ? rect.top - y
+            : y > rect.bottom
+              ? y - rect.bottom
+              : 0;
+        if (dist < fallbackDistance) {
+          fallbackDistance = dist;
+          blockElem = elem;
+        }
+      }
+    }
+  }
+
   // Verify the mouse is within the editor bounds horizontally
   if (
     blockElem &&
@@ -245,7 +284,12 @@ export function DraggableBlockPlugin({
 
           event.preventDefault();
 
-          const blockElem = getBlockElement(anchorElem, editor, event);
+          const blockElem = getBlockElement(
+            anchorElem,
+            editor,
+            event,
+            true
+          );
           if (!blockElem || !dropIndicatorRef.current) return true;
 
           const blockRect = blockElem.getBoundingClientRect();
@@ -275,7 +319,12 @@ export function DraggableBlockPlugin({
           const nodeKey = event.dataTransfer.getData(DRAG_DATA_FORMAT);
           if (!nodeKey) return true;
 
-          const blockElem = getBlockElement(anchorElem, editor, event);
+          const blockElem = getBlockElement(
+            anchorElem,
+            editor,
+            event,
+            true
+          );
           if (!blockElem) return true;
 
           const blockRect = blockElem.getBoundingClientRect();