@bettercms-ai/ui 0.8.2 → 0.9.0

package/dist/renderer.js

@@ -78,7 +78,30 @@ var STORABLE_BLOCK_TYPES = /* @__PURE__ */ new Set([
 ]);
 
 // ../richtext/src/styled.ts
-var STYLED_TAGS = ["span", "small", "sup", "sub", "kbd", "abbr", "time"];
+var STYLED_TAGS = [
+  "span",
+  "small",
+  "sup",
+  "sub",
+  "kbd",
+  "abbr",
+  "time",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "mark",
+  "code",
+  "q",
+  "cite",
+  "dfn",
+  "var",
+  "samp",
+  "ins",
+  "del"
+];
 var TAG_SET = new Set(STYLED_TAGS);
 var isStyledTag = (tag) => typeof tag === "string" && TAG_SET.has(tag);
 var ATTR_NAMES = /* @__PURE__ */ new Set(["title", "datetime", "style", "aria-label"]);
@@ -356,7 +379,7 @@ function Table({ value }) {
     head < rows.length && /* @__PURE__ */ jsx2("tbody", { children: rendered.slice(head) })
   ] });
 }
-function buildComponents() {
+function buildComponents(renderBlock) {
   return {
     types: {
       [PT_TYPES.divider]: () => /* @__PURE__ */ jsx2("hr", {}),
@@ -370,9 +393,12 @@ function buildComponents() {
        * A generic embedded block renders as a marker, not as content: its payload references
        * something (a component, a media id) that has to be RESOLVED against the project, and
        * this renderer has no project. A marker keeps the node visible and addressable rather
-       * than rendering nothing at all, which is how embedded content used to vanish.
+       * than rendering nothing at all, which is how embedded content used to vanish. A caller
+       * that CAN resolve it passes `renderBlock`.
        */
       [PT_TYPES.block]: ({ value }) => {
+        const rendered = renderBlock?.(value);
+        if (rendered !== void 0) return /* @__PURE__ */ jsx2(Fragment, { children: rendered });
         const v = value;
         const key = typeof v.schemaKey === "string" ? v.schemaKey : "block";
         return /* @__PURE__ */ jsx2("div", { className: "bcms-block", "data-bcms-schema-key": key });
@@ -442,12 +468,32 @@ function buildComponents() {
     unknownBlockStyle: ({ children }) => /* @__PURE__ */ jsx2("p", { children })
   };
 }
-function PortableText({ value, bindingBase }) {
+var isListItem = (node) => node._type === "block" && typeof node.listItem === "string" && !!node.listItem;
+function runsOf(blocks) {
+  const runs = [];
+  for (const node of blocks) {
+    const last = runs.at(-1);
+    if (last && isListItem(node) && isListItem(last[0])) last.push(node);
+    else runs.push([node]);
+  }
+  return runs;
+}
+function PortableText({ value, bindingBase, renderBlock }) {
   const blocks = React.useMemo(() => normalizePortableText(readValue(value)), [value]);
-  const components = React.useMemo(buildComponents, []);
+  const components = React.useMemo(() => buildComponents(renderBlock), [renderBlock]);
+  const listComponents = React.useMemo(() => {
+    if (!bindingBase) return null;
+    const keys = new Set(blocks.map((b) => b._key));
+    return {
+      ...components,
+      listItem: ({ value: item, children }) => keys.has(item._key) ? /* @__PURE__ */ jsx2("li", { "data-bcms-field": `${bindingBase}#${item._key}`, "data-bcms-kind": "richtext", children }) : /* @__PURE__ */ jsx2("li", { children })
+    };
+  }, [bindingBase, blocks, components]);
   if (blocks.length === 0) return null;
-  if (!bindingBase) return /* @__PURE__ */ jsx2(PT, { value: blocks, components });
-  return /* @__PURE__ */ jsx2(Fragment, { children: blocks.map((node) => /* @__PURE__ */ jsx2(Bound, { base: bindingBase, nodeKey: node._key, children: /* @__PURE__ */ jsx2(PT, { value: [node], components }) }, node._key)) });
+  if (!bindingBase || !listComponents) return /* @__PURE__ */ jsx2(PT, { value: blocks, components });
+  return /* @__PURE__ */ jsx2(Fragment, { children: runsOf(blocks).map(
+    (run) => isListItem(run[0]) ? /* @__PURE__ */ jsx2(PT, { value: run, components: listComponents }, run[0]._key) : /* @__PURE__ */ jsx2(Bound, { base: bindingBase, nodeKey: run[0]._key, children: /* @__PURE__ */ jsx2(PT, { value: run, components }) }, run[0]._key)
+  ) });
 }
 function readValue(value) {
   if (Array.isArray(value)) return value;