@haklex/rich-plugin-block-handle 0.0.4 → 0.0.5

package/dist/BlockHandlePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlockHandlePlugin.d.ts","sourceRoot":"","sources":["../src/BlockHandlePlugin.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAGV,YAAY,EACb,MAAM,OAAO,CAAA;AAgmBd,wBAAgB,iBAAiB,IAAI,YAAY,CAGhD"}
+{"version":3,"file":"BlockHandlePlugin.d.ts","sourceRoot":"","sources":["../src/BlockHandlePlugin.tsx"],"names":[],"mappings":"AAkDA,OAAO,KAAK,EAGV,YAAY,EACb,MAAM,OAAO,CAAA;AAmqBd,wBAAgB,iBAAiB,IAAI,YAAY,CAGhD"}

package/dist/index.mjs

@@ -42,6 +42,54 @@ function getBlockElement(editor, target) {
   }
   return null;
 }
+function getNearestBlockByY(rootElement, clientY) {
+  const blocks = Array.from(rootElement.children).filter(
+    (child) => child instanceof HTMLElement
+  );
+  if (!blocks.length) return null;
+  let nearestBlock = null;
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  for (const block of blocks) {
+    const rect = block.getBoundingClientRect();
+    if (rect.height <= 0) continue;
+    if (clientY >= rect.top && clientY <= rect.bottom) return block;
+    const distance = clientY < rect.top ? rect.top - clientY : clientY - rect.bottom;
+    if (distance < nearestDistance) {
+      nearestDistance = distance;
+      nearestBlock = block;
+    }
+  }
+  return nearestBlock;
+}
+function getDropTargetBlock(editor, rootElement, event) {
+  const rootRect = rootElement.getBoundingClientRect();
+  if (rootRect.width <= 0 || rootRect.height <= 0) return null;
+  if (event.clientY < rootRect.top || event.clientY > rootRect.bottom) {
+    return null;
+  }
+  const points = [
+    { x: event.clientX, y: event.clientY }
+  ];
+  const clampedX = Math.min(
+    rootRect.right - 1,
+    Math.max(rootRect.left + 1, event.clientX)
+  );
+  if (clampedX !== event.clientX) {
+    points.unshift({ x: clampedX, y: event.clientY });
+  }
+  for (const point of points) {
+    const element = document.elementFromPoint(point.x, point.y);
+    if (!(element instanceof HTMLElement)) continue;
+    const block = getBlockElement(editor, element);
+    if (block) return block;
+  }
+  const { target } = event;
+  if (target instanceof HTMLElement) {
+    const block = getBlockElement(editor, target);
+    if (block) return block;
+  }
+  return getNearestBlockByY(rootElement, event.clientY);
+}
 function toPagePosition(rect) {
   return {
     top: rect.top + window.scrollY,
@@ -353,20 +401,21 @@ function BlockHandleInner({
         if (!event.dataTransfer?.types.includes(DRAG_DATA_KEY)) return false;
         event.preventDefault();
         event.dataTransfer.dropEffect = "move";
-        const target = event.target;
-        const block = getBlockElement(editor, target);
-        if (block) {
-          const rect = block.getBoundingClientRect();
-          const rootRect = rootElement.getBoundingClientRect();
-          const midY = rect.top + rect.height / 2;
-          const y = event.clientY < midY ? rect.top : rect.bottom;
-          setDropLine({
-            visible: true,
-            top: y + window.scrollY,
-            left: rootRect.left + window.scrollX,
-            width: rootRect.width
-          });
+        const block = getDropTargetBlock(editor, rootElement, event);
+        if (!block) {
+          setDropLine((s) => s.visible ? { ...s, visible: false } : s);
+          return true;
         }
+        const rect = block.getBoundingClientRect();
+        const rootRect = rootElement.getBoundingClientRect();
+        const midY = rect.top + rect.height / 2;
+        const y = event.clientY < midY ? rect.top : rect.bottom;
+        setDropLine({
+          visible: true,
+          top: y + window.scrollY,
+          left: rootRect.left + window.scrollX,
+          width: rootRect.width
+        });
         return true;
       },
       COMMAND_PRIORITY_HIGH
@@ -379,8 +428,7 @@ function BlockHandleInner({
         event.preventDefault();
         setDropLine((s) => ({ ...s, visible: false }));
         clearDragVisualState();
-        const target = event.target;
-        const block = getBlockElement(editor, target);
+        const block = getDropTargetBlock(editor, rootElement, event);
         if (!block) return false;
         editor.update(() => {
           const draggedNode = $getNodeByKey(draggedKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-plugin-block-handle",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Block handle plugin with add button and context menu",
   "license": "MIT",
   "type": "module",
@@ -16,8 +16,8 @@
     "dist"
   ],
   "dependencies": {
-    "@haklex/rich-editor-ui": "0.0.4",
-    "@haklex/rich-style-token": "0.0.4"
+    "@haklex/rich-style-token": "0.0.5",
+    "@haklex/rich-editor-ui": "0.0.5"
   },
   "devDependencies": {
     "@lexical/code": "^0.39.0",