@trafica/editor 1.0.45 → 1.0.47

package/dist/index.js

@@ -8036,6 +8036,7 @@ function EditorCore({
   const isComposingRef = react.useRef(false);
   const stateRef = react.useRef(engine.getState());
   const [selectedImagePath, setSelectedImagePath] = react.useState(null);
+  const [imageDragState, setImageDragState] = react.useState(null);
   const [findReplaceOpen, setFindReplaceOpen] = react.useState(false);
   const [findReplaceMode, setFindReplaceMode] = react.useState("find");
   const [linkPopupOpen, setLinkPopupOpen] = react.useState(false);
@@ -8516,7 +8517,19 @@ function EditorCore({
       const fig = target.closest("[data-image-path]");
       if (fig == null ? void 0 : fig.dataset.imagePath) {
         e.preventDefault();
-        setSelectedImagePath(JSON.parse(fig.dataset.imagePath));
+        const path = JSON.parse(fig.dataset.imagePath);
+        setSelectedImagePath(path);
+        const imgEl = fig.querySelector("img");
+        const rect = imgEl == null ? void 0 : imgEl.getBoundingClientRect();
+        imageDragRef.current = {
+          imagePath: path,
+          startX: e.clientX,
+          startY: e.clientY,
+          active: false,
+          ghostW: Math.min((rect == null ? void 0 : rect.width) || 300, 320),
+          ghostH: Math.min((rect == null ? void 0 : rect.height) || 200, 200),
+          ghostSrc: (imgEl == null ? void 0 : imgEl.src) || ""
+        };
         return;
       }
       setSelectedImagePath(null);
@@ -8569,6 +8582,7 @@ function EditorCore({
     engine.dispatch(tr);
   }, [engine]);
   const imageResizeRef = react.useRef(null);
+  const imageDragRef = react.useRef(null);
   react.useEffect(() => {
     const onMouseMove = (e) => {
       const drag = imageResizeRef.current;
@@ -8601,6 +8615,48 @@ function EditorCore({
       document.removeEventListener("mouseup", onMouseUp);
     };
   }, [engine]);
+  react.useEffect(() => {
+    const DRAG_THRESHOLD = 6;
+    const onMouseMove = (e) => {
+      const drag = imageDragRef.current;
+      if (!drag) return;
+      const dx = e.clientX - drag.startX;
+      const dy = e.clientY - drag.startY;
+      if (!drag.active && Math.sqrt(dx * dx + dy * dy) < DRAG_THRESHOLD) return;
+      drag.active = true;
+      const container = containerRef.current;
+      const { dropIndex, indicatorClientY } = getImageDropTarget(container, e.clientY, drag.imagePath);
+      setImageDragState({
+        ghostX: e.clientX,
+        ghostY: e.clientY,
+        ghostW: drag.ghostW,
+        ghostH: drag.ghostH,
+        ghostSrc: drag.ghostSrc,
+        dropIndicatorClientY: indicatorClientY,
+        dropIndex,
+        imagePath: drag.imagePath
+      });
+    };
+    const onMouseUp = (e) => {
+      const drag = imageDragRef.current;
+      if (!drag) return;
+      imageDragRef.current = null;
+      if (!drag.active) {
+        setImageDragState(null);
+        return;
+      }
+      const container = containerRef.current;
+      const { dropIndex } = getImageDropTarget(container, e.clientY, drag.imagePath);
+      setImageDragState(null);
+      moveImageInDoc(drag.imagePath, dropIndex, engine);
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [engine]);
   react.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
@@ -8718,6 +8774,19 @@ function EditorCore({
               ].join(" ")
             }
           ),
+          imageDragState && (() => {
+            const container = containerRef.current;
+            if (!container) return null;
+            const cr = container.getBoundingClientRect();
+            const relY = imageDragState.dropIndicatorClientY - cr.top + container.scrollTop;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "editor-image-drop-indicator",
+                style: { top: relY }
+              }
+            );
+          })(),
           linkTooltip && /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -8778,6 +8847,26 @@ function EditorCore({
             onClose: () => setSelectedImagePath(null)
           }
         ),
+        imageDragState && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "editor-image-drag-ghost",
+            style: {
+              left: imageDragState.ghostX,
+              top: imageDragState.ghostY,
+              width: imageDragState.ghostW,
+              height: imageDragState.ghostH
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: imageDragState.ghostSrc,
+                alt: "",
+                style: { width: "100%", height: "100%", objectFit: "contain", display: "block" }
+              }
+            )
+          }
+        ),
         !readOnly && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -8800,6 +8889,51 @@ function EditorCore({
     }
   );
 }
+function getImageDropTarget(container, clientY, imagePath) {
+  const fallback = { dropIndex: imagePath[0], indicatorClientY: clientY };
+  if (!container) return fallback;
+  const blocks = Array.from(
+    container.querySelectorAll(":scope > [data-block-path]")
+  );
+  if (blocks.length === 0) return fallback;
+  const gaps = [];
+  gaps.push({ y: blocks[0].getBoundingClientRect().top, index: 0 });
+  for (let i = 0; i < blocks.length - 1; i++) {
+    const bottom = blocks[i].getBoundingClientRect().bottom;
+    const top = blocks[i + 1].getBoundingClientRect().top;
+    gaps.push({ y: (bottom + top) / 2, index: i + 1 });
+  }
+  gaps.push({ y: blocks[blocks.length - 1].getBoundingClientRect().bottom, index: blocks.length });
+  let best = gaps[0];
+  let bestDist = Math.abs(clientY - best.y);
+  for (const gap of gaps) {
+    const dist = Math.abs(clientY - gap.y);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = gap;
+    }
+  }
+  return { dropIndex: best.index, indicatorClientY: best.y };
+}
+function moveImageInDoc(imagePath, targetIndex, engine) {
+  const state = engine.getState();
+  const imageNode = getNodeAtPath(state.doc, imagePath);
+  if (!imageNode) return;
+  const isTopLevel = imagePath.length === 1;
+  const topLevelIndex = imagePath[0];
+  let adj = targetIndex;
+  if (isTopLevel) {
+    if (targetIndex > topLevelIndex) adj = targetIndex - 1;
+    adj = Math.max(0, Math.min(state.doc.children.length - 1, adj));
+    if (adj === topLevelIndex) return;
+  } else {
+    adj = Math.max(0, Math.min(state.doc.children.length, adj));
+  }
+  const tr = createTransaction();
+  tr.steps.push({ type: "delete_node", path: imagePath });
+  tr.steps.push({ type: "insert_node", parentPath: [], index: adj, node: imageNode });
+  engine.dispatch(tr);
+}
 var BLOCK_TAGS = "p|h[1-6]|ul|ol|li|blockquote|pre|figure|table|thead|tbody|tr|th|td";
 var _OPEN_ONLY_RE = new RegExp(`^<(${BLOCK_TAGS})(?:\\s[^>]*)?>$`, "i");
 var _CLOSE_ONLY_RE = new RegExp(`^<\\/(${BLOCK_TAGS})>$`, "i");