@trafica/editor 1.0.44 → 1.0.46

package/dist/index.js

@@ -2203,6 +2203,10 @@ function mergeAtCursor(state, pastedDoc, sel) {
     const lastIdx = mergedDoc.children.length - 1;
     return { mergedDoc, cursorPos: endOfBlock(mergedDoc.children[lastIdx], lastIdx) };
   }
+  const LIST_CONTAINERS = /* @__PURE__ */ new Set(["bullet_list", "ordered_list", "check_list"]);
+  if (LIST_CONTAINERS.has(currentBlock.type) && relPath.length > 0) {
+    return mergeIntoListContainer(state, pasted, existingBlocks, blockIdx, currentBlock, relPath, charOffset);
+  }
   const [beforeChildren, afterChildren] = splitBlockChildren(currentBlock, relPath, charOffset);
   let newBlocks;
   let cursorBlockOffset;
@@ -2260,6 +2264,85 @@ function mergeAtCursor(state, pastedDoc, sel) {
     cursorPos: cursorInBlock
   };
 }
+function mergeIntoListContainer(state, pasted, existingBlocks, blockIdx, listBlock, relPath, charOffset) {
+  var _a, _b, _c, _d, _e;
+  const itemIdx = relPath[0];
+  const itemRelPath = relPath.slice(1);
+  const listItems = listBlock.children;
+  const currentItem = listItems[itemIdx];
+  const isCheckList = listBlock.type === "check_list";
+  const itemType = isCheckList ? "check_list_item" : "list_item";
+  if (!currentItem) {
+    const newBlocks = [...existingBlocks, ...pasted];
+    const lastIdx = newBlocks.length - 1;
+    return {
+      mergedDoc: { ...state.doc, children: newBlocks },
+      cursorPos: endOfBlock(newBlocks[lastIdx], lastIdx)
+    };
+  }
+  const [beforeChildren, afterChildren] = splitBlockChildren(currentItem, itemRelPath, charOffset);
+  const makeItem = (children) => ({
+    type: itemType,
+    attrs: isCheckList ? { checked: false } : {},
+    children: children.length > 0 ? children : [{ type: "text", text: "", marks: [] }]
+  });
+  let newItems;
+  let cursorItemIdx;
+  if (pasted.length === 1) {
+    const pastedChildren = (_a = pasted[0].children) != null ? _a : [];
+    const merged = [...beforeChildren, ...pastedChildren, ...afterChildren];
+    newItems = [
+      ...listItems.slice(0, itemIdx),
+      { ...currentItem, children: merged.length > 0 ? merged : [{ type: "text", text: "", marks: [] }] },
+      ...listItems.slice(itemIdx + 1)
+    ];
+    cursorItemIdx = itemIdx;
+  } else {
+    const firstPasted = pasted[0];
+    const lastPasted = pasted[pasted.length - 1];
+    const middlePasted = pasted.slice(1, -1);
+    const firstItem = { ...currentItem, children: [...beforeChildren, ...(_b = firstPasted.children) != null ? _b : []] };
+    const lastItem = makeItem([...(_c = lastPasted.children) != null ? _c : [], ...afterChildren]);
+    const midItems = middlePasted.map((p) => {
+      var _a2;
+      return makeItem((_a2 = p.children) != null ? _a2 : []);
+    });
+    newItems = [
+      ...listItems.slice(0, itemIdx),
+      firstItem,
+      ...midItems,
+      lastItem,
+      ...listItems.slice(itemIdx + 1)
+    ];
+    cursorItemIdx = itemIdx + 1 + midItems.length;
+  }
+  const newList = { ...listBlock, children: newItems };
+  const mergedBlocks = [
+    ...existingBlocks.slice(0, blockIdx),
+    newList,
+    ...existingBlocks.slice(blockIdx + 1)
+  ];
+  const targetItem = newItems[cursorItemIdx];
+  let cursorPos;
+  if (pasted.length === 1) {
+    const pastedChildren = (_d = pasted[0].children) != null ? _d : [];
+    const cursorChildIdx = beforeChildren.length + pastedChildren.length;
+    const nodeBefore = targetItem == null ? void 0 : targetItem.children[cursorChildIdx - 1];
+    cursorPos = nodeBefore && isTextNode(nodeBefore) ? { path: [blockIdx, cursorItemIdx, cursorChildIdx - 1], offset: nodeBefore.text.length } : { path: [blockIdx, cursorItemIdx], offset: 0 };
+  } else {
+    const lpChildren = (_e = pasted[pasted.length - 1].children) != null ? _e : [];
+    if (lpChildren.length > 0) {
+      const lastNode = lpChildren[lpChildren.length - 1];
+      cursorPos = {
+        path: [blockIdx, cursorItemIdx, lpChildren.length - 1],
+        offset: isTextNode(lastNode) ? lastNode.text.length : 0
+      };
+    } else {
+      cursorPos = { path: [blockIdx, cursorItemIdx], offset: 0 };
+    }
+  }
+  return { mergedDoc: { ...state.doc, children: mergedBlocks }, cursorPos };
+}
 function splitBlockChildren(block, relPath, offset) {
   const children = block.children;
   if (children.length === 0) return [[], []];
@@ -7953,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);
@@ -8433,7 +8517,21 @@ 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);
+        if (path.length === 1) {
+          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);
@@ -8486,6 +8584,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;
@@ -8518,6 +8617,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;
@@ -8635,6 +8776,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",
             {
@@ -8695,6 +8849,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",
           {
@@ -8717,6 +8891,46 @@ 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 oldIndex = imagePath[imagePath.length - 1];
+  const parentPath = imagePath.slice(0, -1);
+  let adj = targetIndex > oldIndex ? targetIndex - 1 : targetIndex;
+  adj = Math.max(0, Math.min(state.doc.children.length - 1, adj));
+  if (adj === oldIndex) return;
+  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");
@@ -9068,7 +9282,9 @@ ${text}
   }
 }
 function serializeMDInline(children) {
+  if (!children) return "";
   return children.map((child) => {
+    if (!child) return "";
     if (!isTextNode(child)) return serializeMDBlock(child, 0);
     return serializeMDText(child);
   }).join("");