@particle-academy/fancy-cms-ui 0.0.1-dev.14 → 0.0.1-dev.15

package/dist/editor.cjs

@@ -1297,7 +1297,7 @@ function EditablePage({
     },
     [ed, selNode]
   );
-  const addNodeAt = react.useCallback(
+  react.useCallback(
     (kind, targetId) => {
       const doc2 = ed.state.doc;
       const target = targetId ? doc2.nodes[targetId] : null;
@@ -1326,12 +1326,48 @@ function EditablePage({
     window.addEventListener("mousemove", onMove);
     return () => window.removeEventListener("mousemove", onMove);
   }, [editing, draggingEl]);
+  const [dropHint, setDropHint] = react.useState(null);
+  const computeDropTarget = (clientX, clientY) => {
+    const el = document.elementFromPoint(clientX, clientY)?.closest("[data-cms]");
+    if (!el) return { id: null, edge: "inside", rect: null };
+    const id = el.getAttribute("data-cms");
+    const node = ed.state.doc.nodes[id];
+    const r = el.getBoundingClientRect();
+    const rect = { x: r.left, y: r.top, w: r.width, h: r.height };
+    if (node && CONTAINER_TYPES2.has(node.type)) return { id, edge: "inside", rect };
+    return { id, edge: clientY < r.top + r.height / 2 ? "before" : "after", rect };
+  };
+  const onPageDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+    setDropHint(computeDropTarget(e.clientX, e.clientY));
+  };
+  const insertRelative = (kind, hint) => {
+    const doc2 = ed.state.doc;
+    let parent;
+    let order;
+    if (!hint.id || hint.edge === "inside") {
+      parent = hint.id ?? (doc2.sections[doc2.sections.length - 1] ?? null);
+      const sib = childrenOf(doc2, parent);
+      order = keyBetween(sib.length ? sib[sib.length - 1].order : null, null);
+    } else {
+      const target = doc2.nodes[hint.id];
+      parent = target.parent;
+      const sib = childrenOf(doc2, parent);
+      const idx = sib.findIndex((n) => n.id === hint.id);
+      order = hint.edge === "before" ? keyBetween(idx > 0 ? sib[idx - 1].order : null, target.order) : keyBetween(target.order, idx < sib.length - 1 ? sib[idx + 1].order : null);
+    }
+    const id = `n${doc2.seq + 1}-${Math.floor(performance.now())}`;
+    const def = ADD_DEFAULTS[kind];
+    ed.apply({ t: "insert_node", node: { id, type: def.type, parent, order, layout: def.layout, props: { ...def.props }, style: { base: { ...def.style } } } });
+    ed.select(id);
+  };
   const onPageDrop = (e) => {
     const kind = e.dataTransfer.getData("application/x-cms-element");
     if (!kind) return;
     e.preventDefault();
-    const el = document.elementFromPoint(e.clientX, e.clientY)?.closest("[data-cms]");
-    addNodeAt(kind, el?.getAttribute("data-cms") ?? null);
+    insertRelative(kind, computeDropTarget(e.clientX, e.clientY));
+    setDropHint(null);
     setDraggingEl(false);
   };
   const setStyle = (patch) => selection && ed.apply({ t: "set_style", id: selection, breakpoint: "base", patch });
@@ -1407,7 +1443,8 @@ function EditablePage({
       ref: pageRef,
       onClickCapture,
       onContextMenu: onContextMenuSelect,
-      onDragOver: editing ? (e) => e.preventDefault() : void 0,
+      onDragOver: editing ? onPageDragOver : void 0,
+      onDragLeave: editing ? () => setDropHint(null) : void 0,
       onDrop: editing ? onPageDrop : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsx(CmsPage, { doc: ed.state.doc, registry, data })
     }
@@ -1478,10 +1515,23 @@ function EditablePage({
         onAdd: addNode
       }
     ) : null,
+    editing && dropHint?.rect ? /* @__PURE__ */ jsxRuntime.jsx(DropIndicator, { hint: dropHint }) : null,
     editing ? /* @__PURE__ */ jsxRuntime.jsx(ElementPalette, { open: paletteOpen, onDragChange: setDraggingEl }) : null,
     editing && timelineDock ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: 0, right: 0, bottom: 0, zIndex: Z2 }, children: timelineDock }) : null
   ] });
 }
+function DropIndicator({
+  hint
+}) {
+  const r = hint.rect;
+  if (!r) return null;
+  const color = "#ec4899";
+  if (hint.edge === "inside") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: r.x, top: r.y, width: r.w, height: r.h, outline: `2px dashed ${color}`, outlineOffset: -2, borderRadius: 6, pointerEvents: "none", zIndex: Z2 + 4 } });
+  }
+  const y = hint.edge === "before" ? r.y : r.y + r.h;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "fixed", left: r.x, top: y - 1.5, width: r.w, height: 3, background: color, borderRadius: 2, boxShadow: "0 0 0 1px #fff", pointerEvents: "none", zIndex: Z2 + 4 } });
+}
 function ElementPalette({ open, onDragChange }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",