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

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';
@@ -412,7 +412,7 @@ function NodeInspector({
 }) {
   const base = node.style.base ?? {};
   const setT = (patch) => onTransform({ ...transform, ...patch });
-  const handled = /* @__PURE__ */ new Set(["content", "label"]);
+  const handled = /* @__PURE__ */ new Set(["content", "label", "html"]);
   const extraKeys = Object.keys(node.props).filter(
     (k) => !handled.has(k) && (["string", "number", "boolean"].includes(typeof node.props[k]) || isBinding(node.props[k]))
   );
@@ -427,14 +427,11 @@ function NodeInspector({
       /* @__PURE__ */ jsx("button", { type: "button", style: iconBtn, title: "Close", onClick: onClose, children: "\u2715" })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: body, children: [
-      "content" in node.props ? /* @__PURE__ */ jsx(Group, { label: "Content", children: /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          style: { ...input2, minHeight: 64, resize: "vertical", lineHeight: 1.4 },
-          value: String(node.props.content ?? ""),
-          onChange: (e) => onProps({ content: e.target.value })
-        }
-      ) }) : null,
+      "content" in node.props || node.type === "richtext" ? /* @__PURE__ */ jsxs("p", { style: { fontSize: 11, color: "var(--fg-3, #94a3b8)", margin: "0 0 12px", lineHeight: 1.45, paddingBottom: 12, borderBottom: "1px solid #1e293b" }, children: [
+        "\u270E Edit the text ",
+        /* @__PURE__ */ jsx("strong", { children: "directly on the page" }),
+        " \u2014 click in and type. This panel is for layout, style, and bindings."
+      ] }) : null,
       "label" in node.props ? /* @__PURE__ */ jsx(Group, { label: "Label", children: /* @__PURE__ */ jsx("input", { style: input2, value: String(node.props.label ?? ""), onChange: (e) => onProps({ label: e.target.value }) }) }) : null,
       extraKeys.length ? /* @__PURE__ */ jsx(Group, { label: "Properties", children: extraKeys.map((k) => /* @__PURE__ */ jsx(PropField, { name: k, value: node.props[k], onChange: (v) => onProps({ [k]: v }) }, k)) }) : null,
       /* @__PURE__ */ jsxs(Group, { label: "Position & size", children: [
@@ -842,13 +839,17 @@ function EditablePage({
     };
   }, [measureBox, ed.state.doc]);
   useEffect(() => {
-    if (!editing || !selection || !pageRef.current || selNode?.type !== "text") return;
-    const el = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
-    if (!el) return;
+    const t = selNode?.type;
+    const editable = t === "text" || t === "heading" || t === "richtext";
+    if (!editing || !selection || !pageRef.current || !editable) return;
+    const wrapper = pageRef.current.querySelector(`[data-cms="${cssEscape2(selection)}"]`);
+    if (!wrapper) return;
+    const isRich = t === "richtext";
+    const el = (isRich ? wrapper.firstElementChild : wrapper) ?? wrapper;
     el.setAttribute("contenteditable", "true");
     el.style.outline = "none";
     el.focus();
-    const commit = () => ed.apply({ t: "set_props", id: selection, patch: { content: el.innerText } });
+    const commit = () => ed.apply({ t: "set_props", id: selection, patch: isRich ? { html: el.innerHTML } : { content: el.innerText } });
     el.addEventListener("blur", commit);
     return () => {
       el.removeEventListener("blur", commit);
@@ -1189,6 +1190,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 = [
@@ -1401,6 +1403,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({