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

package/dist/editor.js

@@ -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);