@trafica/editor 1.0.46 → 1.0.48

package/dist/index.js

@@ -1038,26 +1038,33 @@ function renderCodeBlock(node, path) {
   return wrapper;
 }
 function renderImage(node, path) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const wrapper = document.createElement("figure");
   wrapper.dataset.blockPath = JSON.stringify(path);
   wrapper.dataset.imagePath = JSON.stringify(path);
   wrapper.contentEditable = "false";
   const align = (_a = node.attrs) == null ? void 0 : _a.align;
+  const fx = (_b = node.attrs) == null ? void 0 : _b.x;
+  const fy = (_c = node.attrs) == null ? void 0 : _c.y;
   wrapper.className = [
     "editor-image-wrapper",
-    align === "center" ? "editor-image-center" : "",
-    align === "right" ? "editor-image-right" : "",
-    align === "left" ? "editor-image-left" : ""
+    fx !== void 0 ? "editor-image-floating" : "",
+    !fx && align === "center" ? "editor-image-center" : "",
+    !fx && align === "right" ? "editor-image-right" : "",
+    !fx && align === "left" ? "editor-image-left" : ""
   ].filter(Boolean).join(" ");
+  if (fx !== void 0) {
+    wrapper.style.left = `${fx}px`;
+    wrapper.style.top = `${fy != null ? fy : 0}px`;
+  }
   const img = document.createElement("img");
-  img.src = (_c = (_b = node.attrs) == null ? void 0 : _b.src) != null ? _c : "";
-  img.alt = (_e = (_d = node.attrs) == null ? void 0 : _d.alt) != null ? _e : "";
+  img.src = (_e = (_d = node.attrs) == null ? void 0 : _d.src) != null ? _e : "";
+  img.alt = (_g = (_f = node.attrs) == null ? void 0 : _f.alt) != null ? _g : "";
   img.className = "editor-image";
   img.draggable = false;
-  if ((_f = node.attrs) == null ? void 0 : _f.width) img.style.width = `${node.attrs.width}px`;
+  if ((_h = node.attrs) == null ? void 0 : _h.width) img.style.width = `${node.attrs.width}px`;
   wrapper.appendChild(img);
-  const caption = (_g = node.attrs) == null ? void 0 : _g.caption;
+  const caption = (_i = node.attrs) == null ? void 0 : _i.caption;
   if (caption !== void 0) {
     const figcaption = document.createElement("figcaption");
     figcaption.className = "editor-image-caption";
@@ -1644,7 +1651,7 @@ var htmlSerializer = {
   }
 };
 function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = false) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C;
   switch (node.type) {
     case "paragraph": {
       const alignVal = (_a = node.attrs) == null ? void 0 : _a.align;
@@ -1696,16 +1703,19 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = fal
       const width = ((_m = node.attrs) == null ? void 0 : _m.width) ? ` width="${node.attrs.width}"` : "";
       const align = ((_n = node.attrs) == null ? void 0 : _n.align) ? ` data-align="${node.attrs.align}"` : "";
       const caption = ((_o = node.attrs) == null ? void 0 : _o.caption) ? escapeHTML(node.attrs.caption) : "";
+      const x = (_p = node.attrs) == null ? void 0 : _p.x;
+      const y = (_q = node.attrs) == null ? void 0 : _q.y;
+      const posAttrs = x !== void 0 ? ` data-x="${Math.round(x)}" data-y="${Math.round(y != null ? y : 0)}" style="position:absolute;left:${Math.round(x)}px;top:${Math.round(y != null ? y : 0)}px;"` : "";
       if (caption) {
-        return `<figure${align}><img src="${src}" alt="${alt}"${width} /><figcaption>${caption}</figcaption></figure>`;
+        return `<figure${align}${posAttrs}><img src="${src}" alt="${alt}"${width} /><figcaption>${caption}</figcaption></figure>`;
       }
-      return `<figure${align}><img src="${src}" alt="${alt}"${width} /></figure>`;
+      return `<figure${align}${posAttrs}><img src="${src}" alt="${alt}"${width} /></figure>`;
     }
     case "horizontal_rule":
       return "<hr />";
     case "table": {
       const rows = node.children.map((c) => serializeBlock(c)).join("");
-      const colWidths = (_q = (_p = node.attrs) == null ? void 0 : _p.colWidths) != null ? _q : [];
+      const colWidths = (_s = (_r = node.attrs) == null ? void 0 : _r.colWidths) != null ? _s : [];
       let colgroup = "";
       if (colWidths.length > 0) {
         const total = colWidths.reduce((s, w) => s + w, 0) || colWidths.length * 120;
@@ -1718,15 +1728,15 @@ function serializeBlock(node, idCounts = /* @__PURE__ */ new Map(), inCell = fal
       return `<tr>${cells}</tr>`;
     }
     case "table_cell": {
-      if ((_r = node.attrs) == null ? void 0 : _r.covered) return "";
-      const cs = ((_s = node.attrs) == null ? void 0 : _s.colspan) > 1 ? ` colspan="${(_t = node.attrs) == null ? void 0 : _t.colspan}"` : "";
-      const rs = ((_u = node.attrs) == null ? void 0 : _u.rowspan) > 1 ? ` rowspan="${(_v = node.attrs) == null ? void 0 : _v.rowspan}"` : "";
+      if ((_t = node.attrs) == null ? void 0 : _t.covered) return "";
+      const cs = ((_u = node.attrs) == null ? void 0 : _u.colspan) > 1 ? ` colspan="${(_v = node.attrs) == null ? void 0 : _v.colspan}"` : "";
+      const rs = ((_w = node.attrs) == null ? void 0 : _w.rowspan) > 1 ? ` rowspan="${(_x = node.attrs) == null ? void 0 : _x.rowspan}"` : "";
       return `<td${cs}${rs} style="border:1px solid #d1d5db;padding:0.5em 0.75em;vertical-align:top;min-width:40px;word-break:break-word;">${node.children.map((c) => serializeBlock(c, /* @__PURE__ */ new Map(), true)).join("")}</td>`;
     }
     case "table_header": {
-      if ((_w = node.attrs) == null ? void 0 : _w.covered) return "";
-      const cs = ((_x = node.attrs) == null ? void 0 : _x.colspan) > 1 ? ` colspan="${(_y = node.attrs) == null ? void 0 : _y.colspan}"` : "";
-      const rs = ((_z = node.attrs) == null ? void 0 : _z.rowspan) > 1 ? ` rowspan="${(_A = node.attrs) == null ? void 0 : _A.rowspan}"` : "";
+      if ((_y = node.attrs) == null ? void 0 : _y.covered) return "";
+      const cs = ((_z = node.attrs) == null ? void 0 : _z.colspan) > 1 ? ` colspan="${(_A = node.attrs) == null ? void 0 : _A.colspan}"` : "";
+      const rs = ((_B = node.attrs) == null ? void 0 : _B.rowspan) > 1 ? ` rowspan="${(_C = node.attrs) == null ? void 0 : _C.rowspan}"` : "";
       return `<th${cs}${rs} style="border:1px solid #d1d5db;padding:0.5em 0.75em;vertical-align:top;min-width:40px;word-break:break-word;background:#f9fafb;font-weight:600;text-align:left;">${node.children.map((c) => serializeBlock(c, /* @__PURE__ */ new Map(), true)).join("")}</th>`;
     }
     default:
@@ -1880,6 +1890,10 @@ function parseHTMLNode(node) {
       const img = el.querySelector("img");
       const caption = (_h = (_g = el.querySelector("figcaption")) == null ? void 0 : _g.textContent) != null ? _h : "";
       const align = (_i = el.getAttribute("data-align")) != null ? _i : "";
+      const dxRaw = el.getAttribute("data-x");
+      const dyRaw = el.getAttribute("data-y");
+      const fx = dxRaw !== null ? parseFloat(dxRaw) : void 0;
+      const fy = dyRaw !== null ? parseFloat(dyRaw) : void 0;
       if (img) {
         return {
           type: "image",
@@ -1888,7 +1902,8 @@ function parseHTMLNode(node) {
             alt: (_k = img.getAttribute("alt")) != null ? _k : "",
             ...img.getAttribute("width") ? { width: parseFloat(img.getAttribute("width")) } : {},
             ...align ? { align } : {},
-            ...caption ? { caption } : {}
+            ...caption ? { caption } : {},
+            ...fx !== void 0 && !isNaN(fx) ? { x: fx, y: fy != null ? fy : 0 } : {}
           },
           children: []
         };
@@ -8036,7 +8051,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 [imageDragging, setImageDragging] = react.useState(false);
   const [findReplaceOpen, setFindReplaceOpen] = react.useState(false);
   const [findReplaceMode, setFindReplaceMode] = react.useState("find");
   const [linkPopupOpen, setLinkPopupOpen] = react.useState(false);
@@ -8519,19 +8534,19 @@ function EditorCore({
         e.preventDefault();
         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) || ""
-          };
-        }
+        const imgEl = fig.querySelector("img");
+        const figRect = fig.getBoundingClientRect();
+        imageDragRef.current = {
+          imagePath: path,
+          startX: e.clientX,
+          startY: e.clientY,
+          active: false,
+          ghostW: Math.min(figRect.width || 300, 320),
+          ghostH: Math.min(figRect.height || 200, 200),
+          ghostSrc: (imgEl == null ? void 0 : imgEl.src) || "",
+          offsetX: e.clientX - figRect.left,
+          offsetY: e.clientY - figRect.top
+        };
         return;
       }
       setSelectedImagePath(null);
@@ -8618,39 +8633,47 @@ function EditorCore({
     };
   }, [engine]);
   react.useEffect(() => {
-    const DRAG_THRESHOLD = 6;
+    const DRAG_THRESHOLD = 4;
     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;
+      if (!drag.active) {
+        drag.active = true;
+        setImageDragging(true);
+        document.body.style.userSelect = "none";
+      }
       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
-      });
+      if (!container) return;
+      const cr = container.getBoundingClientRect();
+      const x = Math.max(0, e.clientX - cr.left - drag.offsetX + container.scrollLeft);
+      const y = Math.max(0, e.clientY - cr.top - drag.offsetY + container.scrollTop);
+      const fig = container.querySelector(
+        `[data-image-path="${JSON.stringify(drag.imagePath)}"]`
+      );
+      if (fig) {
+        fig.style.position = "absolute";
+        fig.style.left = `${x}px`;
+        fig.style.top = `${y}px`;
+        fig.style.margin = "0";
+        fig.style.zIndex = "10";
+      }
     };
     const onMouseUp = (e) => {
       const drag = imageDragRef.current;
       if (!drag) return;
       imageDragRef.current = null;
-      if (!drag.active) {
-        setImageDragState(null);
-        return;
-      }
+      document.body.style.userSelect = "";
+      setImageDragging(false);
+      if (!drag.active) return;
       const container = containerRef.current;
-      const { dropIndex } = getImageDropTarget(container, e.clientY, drag.imagePath);
-      setImageDragState(null);
-      moveImageInDoc(drag.imagePath, dropIndex, engine);
+      if (!container) return;
+      const cr = container.getBoundingClientRect();
+      const x = Math.max(0, e.clientX - cr.left - drag.offsetX + container.scrollLeft);
+      const y = Math.max(0, e.clientY - cr.top - drag.offsetY + container.scrollTop);
+      setImageAttr(drag.imagePath, { x: Math.round(x), y: Math.round(y) })(engine);
     };
     document.addEventListener("mousemove", onMouseMove);
     document.addEventListener("mouseup", onMouseUp);
@@ -8776,19 +8799,6 @@ 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",
             {
@@ -8849,26 +8859,6 @@ 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",
           {
@@ -8891,46 +8881,6 @@ 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");