@bettercms-ai/ui 0.8.3 → 0.9.0

package/dist/blocks.d.ts

@@ -49,7 +49,12 @@ interface PortableTextProps {
     value: unknown;
     /** `<blockId>__<prop>`. Present ⇒ stamp a per-block address. Absent ⇒ published output. */
     bindingBase?: string;
+    /**
+     * Renders an embedded block this renderer cannot resolve (a component — it has no project).
+     * Anything but `undefined` replaces the marker; `null` renders nothing.
+     */
+    renderBlock?: (value: Record<string, unknown>) => React.ReactNode;
 }
-declare function PortableText({ value, bindingBase }: PortableTextProps): react_jsx_runtime.JSX.Element | null;
+declare function PortableText({ value, bindingBase, renderBlock }: PortableTextProps): react_jsx_runtime.JSX.Element | null;
 
 export { ComponentInstance, Footer, FormPlaceholder, Navbar, PortableText, type PortableTextProps, Section, Slider, Tabs };

package/dist/blocks.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 });
@@ -452,9 +478,9 @@ function runsOf(blocks) {
   }
   return runs;
 }
-function PortableText({ value, bindingBase }) {
+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));