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

package/dist/editor.js

@@ -1,5 +1,5 @@
 import { keyBetween } from './chunk-7YYLYBLI.js';
-import { CmsPage, defaultRegistry } from './chunk-IXPYY4S2.js';
+import { CmsPage, defaultRegistry } from './chunk-KCJWSR7D.js';
 import { reduce, childrenOf, isBinding } from './chunk-3YZMELJJ.js';
 import { useReducer, useCallback, useMemo, useRef, useState, useLayoutEffect, Fragment, useEffect } from 'react';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
@@ -878,7 +878,7 @@ function EditablePage({
     },
     [ed, selNode]
   );
-  const addNodeAt = useCallback(
+  useCallback(
     (kind, targetId) => {
       const doc2 = ed.state.doc;
       const target = targetId ? doc2.nodes[targetId] : null;
@@ -907,12 +907,48 @@ function EditablePage({
     window.addEventListener("mousemove", onMove);
     return () => window.removeEventListener("mousemove", onMove);
   }, [editing, draggingEl]);
+  const [dropHint, setDropHint] = 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 });
@@ -988,7 +1024,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__ */ jsx(CmsPage, { doc: ed.state.doc, registry, data })
     }
@@ -1059,10 +1096,23 @@ function EditablePage({
         onAdd: addNode
       }
     ) : null,
+    editing && dropHint?.rect ? /* @__PURE__ */ jsx(DropIndicator, { hint: dropHint }) : null,
     editing ? /* @__PURE__ */ jsx(ElementPalette, { open: paletteOpen, onDragChange: setDraggingEl }) : null,
     editing && timelineDock ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(
     "div",
@@ -1139,6 +1189,7 @@ var ADD_DEFAULTS = {
   callout: { type: "callout", props: { content: "Heads up \u2014 this is a callout.", variant: "info" }, style: {} },
   divider: { type: "divider", props: {}, style: {} },
   code: { type: "code", props: { content: "npm install @particle-academy/react-fancy", lang: "bash" }, style: {} },
+  richtext: { type: "richtext", props: { html: "<p>Rich <strong>text</strong> with <em>inline</em> formatting.</p>" }, style: {} },
   repeater: { type: "repeater", props: { items: "" }, style: { gap: { value: 12, unit: "px" } }, layout: "stack" }
 };
 var GRIPS = [
@@ -1351,6 +1402,7 @@ var ADD_MENU = [
   { kind: "box", label: "Box" },
   { kind: "divider", label: "Divider" },
   { kind: "code", label: "Code" },
+  { kind: "richtext", label: "Rich text" },
   { kind: "repeater", label: "Repeater" }
 ];
 function EditBar({