rme 0.2.5-alpha.13 → 0.2.5-alpha.15

package/dist/index.mjs

@@ -1908,7 +1908,7 @@ import {
   nodeInputRule as nodeInputRule10,
   setBlockType as setBlockType3
 } from "@rme-sdk/core";
-import { TextSelection as TextSelection11 } from "@rme-sdk/pm/state";
+import { TextSelection as TextSelection12 } from "@rme-sdk/pm/state";
 import { Decoration as Decoration8, DecorationSet as DecorationSet5 } from "@rme-sdk/pm/view";
 
 // src/editor/transform/parser.ts
@@ -9574,7 +9574,108 @@ MermaidBlockExtension = __decorateClass([
 ], MermaidBlockExtension);
 
 // src/editor/extensions/NodeIndicator/node-indicator-extension.tsx
+import { isHTMLElement as isHTMLElement3 } from "@ocavue/utils";
 import { PlainExtension as PlainExtension7 } from "@rme-sdk/core";
+import { NodeSelection as NodeSelection2, TextSelection as TextSelection11 } from "@rme-sdk/pm/state";
+
+// src/editor/extensions/NodeIndicator/drop-target.ts
+import { isHTMLElement } from "@ocavue/utils";
+import { NodeSelection } from "@rme-sdk/pm/state";
+function getTargetsByView(view) {
+  let stack = [[-1, view.state.doc]];
+  let targets = [];
+  while (stack.length > 0) {
+    const [pos, node] = stack.pop();
+    if (pos >= 0) {
+      let dom = view.nodeDOM(pos);
+      if (dom && isHTMLElement(dom)) {
+        let rect = dom.getBoundingClientRect();
+        let { top, bottom, left: x1, right: x2 } = rect;
+        targets.push(
+          [pos, [x1, top, x2, top]],
+          [pos + node.nodeSize, [x1, bottom, x2, bottom]]
+        );
+      }
+    }
+    if (node.isBlock && !node.isTextblock) {
+      let childPos = pos + 1;
+      for (let child of node.children) {
+        stack.push([childPos, child]);
+        childPos += child.nodeSize;
+      }
+    }
+  }
+  return targets;
+}
+function buildGetTarget(view, onDrag) {
+  let prevTargets = [];
+  let prevDoc;
+  let prevRect;
+  const getTargets = () => {
+    const rect = view.dom.getBoundingClientRect();
+    const doc = view.state.doc;
+    if (prevTargets && prevDoc && prevRect && rect.width === prevRect.width && rect.height === prevRect.height && rect.x === prevRect.x && rect.y === prevRect.y && prevDoc.eq(doc)) {
+      return prevTargets;
+    }
+    prevRect = rect;
+    prevDoc = doc;
+    prevTargets = getTargetsByView(view);
+    return prevTargets;
+  };
+  const getTargetImpl = (point, event2) => {
+    if (!view.editable || view.isDestroyed) {
+      return;
+    }
+    const compare = (p1, p2) => {
+      const [pos1, line1] = p1;
+      const [pos2, line2] = p2;
+      const p1Distance = pointLineDistance(point, line1);
+      const p2Distance = pointLineDistance(point, line2);
+      return p1Distance - p2Distance || pos1 - pos2;
+    };
+    let targets = getTargets();
+    targets.sort(compare);
+    targets = targets.slice(0, 8);
+    const target = targets.find((target2) => onDrag?.({ view, pos: target2[0], event: event2 }) !== false);
+    if (target && isDraggingToItself(view, target[0])) {
+      return void 0;
+    }
+    return target;
+  };
+  let prevPoint;
+  let prevTarget;
+  const getTargetCached = (point, event2) => {
+    if (prevPoint && pointEqual(prevPoint, point)) {
+      return prevTarget;
+    }
+    prevPoint = point;
+    prevTarget = getTargetImpl(point, event2);
+    return prevTarget;
+  };
+  return getTargetCached;
+}
+function pointEqual(a, b) {
+  return a[0] === b[0] && a[1] === b[1];
+}
+function pointPointDistance(a, b) {
+  return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]);
+}
+function pointLineDistance(point, line) {
+  return Math.min(
+    pointPointDistance(point, [line[0], line[1]]),
+    pointPointDistance(point, [line[2], line[3]])
+  );
+}
+function isDraggingToItself(view, pos) {
+  const dragging = view.dragging;
+  if (!dragging) return;
+  const { move } = dragging;
+  if (!move) return;
+  const selection = view.state.selection;
+  if (!(selection instanceof NodeSelection)) return;
+  const { from, to } = selection;
+  return from <= pos && pos <= to;
+}
 
 // src/editor/extensions/NodeIndicator/node-indicator-plugin.ts
 import { PluginKey } from "@rme-sdk/pm/state";
@@ -9735,28 +9836,25 @@ function findFirstLineRectInElement(element) {
   const bottom = top + lineHeight;
   return { top, bottom, left, right };
 }
-var fallbackRect = Object.freeze({
-  top: -9999,
-  right: -9999,
-  bottom: -9999,
-  left: -9999,
-  width: 0,
-  height: 0,
-  x: -9999,
-  y: -9999
-});
 
 // src/editor/extensions/NodeIndicator/node-indicator-extension.tsx
-import { isHTMLElement as isHTMLElement2 } from "@ocavue/utils";
 var NodeIndicatorExtension = class extends PlainExtension7 {
   get name() {
     return "nodeIndicator";
   }
   createPlugin() {
+    let getTarget;
+    const initialState = {
+      node: null,
+      pos: null,
+      isDragging: false,
+      rect: null
+    };
     return {
       key: pluginKey,
+      initialState,
       state: {
-        init: () => ({ node: null, pos: null, isDragging: false, rect: null }),
+        init: () => initialState,
         apply: (tr, value) => {
           const meta = tr.getMeta(pluginKey);
           if (meta) {
@@ -9771,12 +9869,58 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
           return value;
         }
       },
+      view: (view) => {
+        getTarget = buildGetTarget(view);
+        return {};
+      },
       props: {
+        handleDrop: (view, event2, slice, move) => {
+          console.log("handleDrop", view, event2, slice, move);
+          if (!getTarget) return false;
+          const target = getTarget([event2.clientX, event2.clientY], event2);
+          if (!target) return false;
+          event2.preventDefault();
+          let insertPos = target[0];
+          let tr = view.state.tr;
+          if (move) {
+            const ext = view.state.plugins.find((plugin) => {
+              return plugin.spec.initialState?.isDragging === false;
+            });
+            const state = ext?.getState(view.state) || {};
+            const { node: draggingNode, pos: draggingPos } = state;
+            console.log("extstate", state);
+            if (!draggingNode || !draggingPos) return false;
+            tr = tr.delete(draggingPos, draggingPos + draggingNode.nodeSize);
+            let { node } = view.dragging || {};
+            if (node) node.replace(tr);
+            else tr.deleteSelection();
+          }
+          let pos = tr.mapping.map(insertPos);
+          let isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1;
+          let beforeInsert = tr.doc;
+          if (isNode) tr.replaceRangeWith(pos, pos, slice.content.firstChild);
+          else tr.replaceRange(pos, pos, slice);
+          if (tr.doc.eq(beforeInsert)) {
+            return true;
+          }
+          let $pos = tr.doc.resolve(pos);
+          if (isNode && NodeSelection2.isSelectable(slice.content.firstChild) && $pos.nodeAfter && $pos.nodeAfter.sameMarkup(slice.content.firstChild)) {
+            tr.setSelection(new NodeSelection2($pos));
+          } else {
+            let end = tr.mapping.map(insertPos);
+            tr.mapping.maps[tr.mapping.maps.length - 1].forEach(
+              (_from, _to, _newFrom, newTo) => end = newTo
+            );
+            tr.setSelection(selectionBetween(view, $pos, tr.doc.resolve(end)));
+          }
+          view.focus();
+          view.dispatch(tr.setMeta("uiEvent", "drop"));
+          return true;
+        },
         handleDOMEvents: {
           pointermove: (view, event2) => {
             const { x, y } = event2;
             const block = findBlockByCoords(view, x, y);
-            console.log("block", block?.node.type);
             if (!block) {
               view.dispatch(
                 view.state.tr.setMeta(pluginKey, { node: null, pos: null, isDragging: false })
@@ -9785,7 +9929,7 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
             }
             const { node, pos } = block;
             const element = view.nodeDOM(pos);
-            if (!element || !isHTMLElement2(element)) {
+            if (!element || !isHTMLElement3(element)) {
               view.dispatch(
                 view.state.tr.setMeta(pluginKey, { node: null, pos: null, isDragging: false })
               );
@@ -9798,13 +9942,15 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
               const parentElement = view.nodeDOM(parentPos);
               const rect = findFirstLineRect(parentElement, element);
               view.dispatch(
-                view.state.tr.setMeta(pluginKey, { node: parentNode, pos: parentPos, rect: rect || {} })
+                view.state.tr.setMeta(pluginKey, {
+                  node: parentNode,
+                  pos: parentPos,
+                  rect: rect || {}
+                })
               );
             } else {
               const rect = findFirstLineRect(void 0, element);
-              view.dispatch(
-                view.state.tr.setMeta(pluginKey, { node, pos, rect: rect || {} })
-              );
+              view.dispatch(view.state.tr.setMeta(pluginKey, { node, pos, rect: rect || {} }));
             }
             return false;
           }
@@ -9813,6 +9959,9 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
     };
   }
 };
+function selectionBetween(view, $anchor, $head, bias) {
+  return view.someProp("createSelectionBetween", (f) => f(view, $anchor, $head)) || TextSelection11.between($anchor, $head, bias);
+}
 
 // src/editor/extensions/Paragraph/paragraph-extension.ts
 import { ParagraphExtension } from "@rme-sdk/main/extensions";
@@ -10537,7 +10686,7 @@ var LineCodeMirrorExtension = class extends NodeExtension12 {
       const pos = tr.selection.$from.before();
       const end = pos + nodeSize + 1;
       tr.replaceWith(pos, end, this.type.create({ language }));
-      tr.setSelection(TextSelection11.near(tr.doc.resolve(pos + 1)));
+      tr.setSelection(TextSelection12.near(tr.doc.resolve(pos + 1)));
       if (dispatch) {
         dispatch(tr);
       }
@@ -10652,7 +10801,7 @@ var LineCodeMirrorExtension = class extends NodeExtension12 {
         type: this.type,
         beforeDispatch: ({ tr, start }) => {
           const $pos = tr.doc.resolve(start);
-          tr.setSelection(TextSelection11.near($pos));
+          tr.setSelection(TextSelection12.near($pos));
         },
         getAttributes
       })
@@ -10866,16 +11015,31 @@ import { Remirror as Remirror2 } from "@rme-sdk/react";
 import { memo as memo7, useCallback as useCallback19, useEffect as useEffect8, useMemo as useMemo5 } from "react";
 
 // src/editor/toolbar/BlockHandler/index.tsx
-import { isHTMLElement as isHTMLElement4 } from "@ocavue/utils";
-import { Selection as Selection4 } from "@rme-sdk/pm/state";
+import { isHTMLElement as isHTMLElement5 } from "@ocavue/utils";
 import { useExtension, useRemirrorContext as useRemirrorContext3 } from "@rme-sdk/react-core";
 import { useRef as useRef6 } from "react";
 import styled10 from "styled-components";
 
-// src/editor/toolbar/BlockHandler/drag-preview.ts
-import { isHTMLElement as isHTMLElement3 } from "@ocavue/utils";
+// src/editor/extensions/NodeIndicator/drag-preview.ts
+import { isHTMLElement as isHTMLElement4 } from "@ocavue/utils";
 import { Fragment as Fragment6, Slice as Slice3 } from "@rme-sdk/pm";
-import { NodeSelection } from "@rme-sdk/pm/state";
+import { NodeSelection as NodeSelection3 } from "@rme-sdk/pm/state";
+
+// src/editor/utils/get-box-element.ts
+function getBoxElement(element) {
+  const window2 = element.ownerDocument.defaultView;
+  if (!window2) {
+    return;
+  }
+  const style = window2.getComputedStyle(element);
+  const display = style.display;
+  if (display === "contents" && element.childElementCount === 1) {
+    return element.firstElementChild;
+  } else if (display === "none") {
+    return;
+  }
+  return element;
+}
 
 // src/editor/extensions/NodeIndicator/set-drag-preview.ts
 function setDragPreview(event2, element) {
@@ -10929,23 +11093,7 @@ function setDragPreview(event2, element) {
   });
 }
 
-// src/editor/utils/get-box-element.ts
-function getBoxElement(element) {
-  const window2 = element.ownerDocument.defaultView;
-  if (!window2) {
-    return;
-  }
-  const style = window2.getComputedStyle(element);
-  const display = style.display;
-  if (display === "contents" && element.childElementCount === 1) {
-    return element.firstElementChild;
-  } else if (display === "none") {
-    return;
-  }
-  return element;
-}
-
-// src/editor/toolbar/BlockHandler/drag-preview.ts
+// src/editor/extensions/NodeIndicator/drag-preview.ts
 function createDraggingPreview(view, hoverState, event2) {
   if (!event2.dataTransfer) {
     return;
@@ -10955,11 +11103,11 @@ function createDraggingPreview(view, hoverState, event2) {
     return;
   }
   const element = view.nodeDOM(pos);
-  if (!element || !isHTMLElement3(element)) {
+  if (!element || !isHTMLElement4(element)) {
     return;
   }
   const boxElement = getBoxElement(element);
-  if (!boxElement || !isHTMLElement3(boxElement)) {
+  if (!boxElement || !isHTMLElement4(boxElement)) {
     return;
   }
   event2.dataTransfer.clearData();
@@ -10973,7 +11121,7 @@ function setViewDragging(view, hoverState) {
   const dragging = {
     slice: new Slice3(Fragment6.from(node), 0, 0),
     move: true,
-    node: NodeSelection.create(view.state.doc, pos)
+    node: NodeSelection3.create(view.state.doc, pos)
   };
   view.dragging = dragging;
 }
@@ -10999,7 +11147,6 @@ var nodeTypeIconMap = {
 var BlockHandler = () => {
   const { view: editorView } = useRemirrorContext3({ autoUpdate: true });
   const dragStartPos = useRef6(null);
-  const isDragging = useRef6(false);
   const nodeIndicatorExtension = useExtension(NodeIndicatorExtension);
   const state = nodeIndicatorExtension.getPluginState();
   const handleClick = () => {
@@ -11009,96 +11156,14 @@ var BlockHandler = () => {
       const state2 = nodeIndicatorExtension.getPluginState();
       if (state2 && state2.pos !== null && state2.node && state2.node.isBlock) {
         dragStartPos.current = state2.pos;
-        isDragging.current = true;
         const dom = editorView.nodeDOM(state2.pos);
-        if (dom && isHTMLElement4(dom)) {
+        if (dom && isHTMLElement5(dom)) {
           createDraggingPreview(editorView, state2, event2);
           setViewDragging(editorView, state2);
         }
-        editorView.dispatch(
-          editorView.state.tr.setMeta(nodeIndicatorExtension.pluginKey, {
-            isDragging: true,
-            draggedNode: state2.node,
-            draggedPos: state2.pos
-          })
-        );
       }
     }
   };
-  const handleDragEnd = () => {
-    isDragging.current = false;
-    const element = document.querySelector(".rme-block-handler");
-    if (element) {
-      element.style.opacity = "";
-      element.style.transform = "";
-    }
-    if (editorView && nodeIndicatorExtension) {
-      editorView.dispatch(
-        editorView.state.tr.setMeta(nodeIndicatorExtension.pluginKey, {
-          isDragging: false,
-          draggedNode: null,
-          draggedPos: null
-        })
-      );
-    }
-  };
-  const handleDragOver = (event2) => {
-    const hasProsemirrorData = event2.dataTransfer.types.includes(
-      "application/x-prosemirror-node-pos"
-    );
-    if (hasProsemirrorData) {
-      event2.preventDefault();
-      event2.dataTransfer.dropEffect = "move";
-    }
-  };
-  const handleDrop = (event2) => {
-    console.log("handleDrop", editorView, nodeIndicatorExtension);
-    if (!editorView || !nodeIndicatorExtension) return;
-    const draggedPosStr = event2.dataTransfer.getData("application/x-prosemirror-node-pos");
-    console.log("draggedPosStr", draggedPosStr);
-    if (!draggedPosStr) return;
-    const draggedPos = parseInt(draggedPosStr, 10);
-    console.log("draggedPos", draggedPos);
-    if (isNaN(draggedPos)) return;
-    const draggedNode = editorView.state.doc.nodeAt(draggedPos);
-    console.log("draggedNode", draggedNode);
-    if (!draggedNode) return;
-    const dropPosResult = editorView.posAtCoords({ left: event2.clientX, top: event2.clientY });
-    console.log("dropPosResult", dropPosResult);
-    if (!dropPosResult) return;
-    const tr = editorView.state.tr;
-    let dropPos = dropPosResult.pos;
-    console.log("dropPos", dropPos);
-    if (dropPos >= draggedPos && dropPos < draggedPos + draggedNode.nodeSize) {
-      event2.preventDefault();
-      return;
-    }
-    try {
-      tr.delete(draggedPos, draggedPos + draggedNode.nodeSize);
-      let insertPos = tr.mapping.map(dropPos);
-      const $insertPos = tr.doc.resolve(insertPos);
-      if ($insertPos.parent.type.spec.isTextblock) {
-        if ($insertPos.depth > 0) {
-          insertPos = $insertPos.before($insertPos.depth);
-        }
-      }
-      tr.insert(insertPos, draggedNode);
-      tr.setSelection(Selection4.near(tr.doc.resolve(insertPos + draggedNode.nodeSize)));
-      editorView.dispatch(tr);
-    } catch (error) {
-      console.error("\u62D6\u62FD\u64CD\u4F5C\u5931\u8D25:", error);
-    } finally {
-      const dom = editorView.nodeDOM(draggedPos);
-      if (dom && isHTMLElement4(dom)) {
-        dom.classList.remove("node-indicator-dragging");
-      }
-      tr.setMeta(nodeIndicatorExtension.pluginKey, {
-        isDragging: false
-      });
-      editorView.dispatch(tr);
-    }
-    event2.preventDefault();
-  };
   if (!editorView || !state?.node) {
     return null;
   }
@@ -11122,9 +11187,6 @@ var BlockHandler = () => {
       draggable: "true",
       onClick: handleClick,
       onDragStart: handleDragStart,
-      onDragOver: handleDragOver,
-      onDrop: handleDrop,
-      onDragEnd: handleDragEnd,
       style: {
         position: "fixed",
         left: `${state?.rect?.left ? state.rect.left - 38 : 0}px`,