@bettercms-ai/richtext 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/richtext",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "sideEffects": false,
   "description": "The one Portable Text contract for BetterCMS: schema, converters, and rendering. Shared by the backend, the dashboard and every delivery SDK.",

package/src/html.ts

@@ -230,6 +230,9 @@ export interface RenderOptions {
    * Wrapping at the top level rather than inside the block components is deliberate: a block
    * component only ever sees TEXT blocks, so a divider or an embedded image would get no
    * address — and those are exactly the nodes an editor most wants to click.
+   *
+   * List items are the one exception: a run of them renders as ONE `<ul>`/`<ol>` and the address
+   * sits on each `<li>`, because a wrapper per item would split the list into one-item lists.
    */
   bindingBase?: string;
 }
@@ -253,10 +256,27 @@ const tagOverrides = <T extends string>(
   return out;
 };
 
-const buildComponents = (classes: HtmlClasses = {}): Partial<PortableTextHtmlComponents> => ({
+/** The per-node address `portableTextToHtml({ bindingBase })` stamps. "" for a node with no key. */
+const bindingAttrs = (base: string, key: unknown): string =>
+  typeof key === "string" && key
+    ? ` data-bcms-field="${esc(base)}#${esc(key)}" data-bcms-kind="richtext"`
+    : "";
+
+/**
+ * `keys` is the set of `_key`s the value actually carries: to-html invents one (`li-0-1`) for an
+ * item that has none, and an invented key is an address that resolves to nothing.
+ */
+const buildComponents = (
+  classes: HtmlClasses = {},
+  binding?: { base: string; keys: ReadonlySet<unknown> },
+): Partial<PortableTextHtmlComponents> => ({
   block: tagOverrides(classes, STYLE_TAGS),
   list: tagOverrides(classes, { bullet: "ul", number: "ol", check: "ul" }),
-  listItem: tagOverrides(classes, { bullet: "li", number: "li", check: "li" }),
+  // With a base, every item carries its own address ON the `<li>` — see `bindingBase`.
+  listItem: binding
+    ? ({ value, children }: { value: { _key?: unknown }; children?: string }) =>
+        `<li${cls(classes, "li")}${binding.keys.has(value._key) ? bindingAttrs(binding.base, value._key) : ""}>${children ?? ""}</li>`
+    : tagOverrides(classes, { bullet: "li", number: "li", check: "li" }),
   types: {
     [PT_TYPES.divider]: () => "<hr>",
     [PT_TYPES.table]: ({ value }) => tableHtml(value as PortableTextTable),
@@ -362,6 +382,9 @@ const buildComponents = (classes: HtmlClasses = {}): Partial<PortableTextHtmlCom
 /** The undressed components, built once: the overwhelming majority of calls pass no classes. */
 const defaultComponents = buildComponents();
 
+const isListItem = (node: unknown): boolean =>
+  isRecord(node) && node._type === "block" && typeof node.listItem === "string" && !!node.listItem;
+
 export function portableTextToHtml(
   value: PortableText | null | undefined,
   opts: RenderOptions = {},
@@ -370,16 +393,28 @@ export function portableTextToHtml(
   const components = opts.classes ? buildComponents(opts.classes) : defaultComponents;
 
   if (opts.bindingBase) {
-    const base = esc(opts.bindingBase);
-    return value
-      .map((node) => {
-        const inner = toHTML([node] as never, { components });
-        // A node with no key cannot be addressed. Render it rather than dropping it — an
-        // unaddressable paragraph is a small loss, a missing one is content disappearing.
-        if (!node._key) return inner;
-        return `<div data-bcms-field="${base}#${esc(node._key)}" data-bcms-kind="richtext">${inner}</div>`;
-      })
-      .join("");
+    const base = opts.bindingBase;
+    const bound = buildComponents(opts.classes, { base, keys: new Set(value.map((n) => n._key)) });
+    const out: string[] = [];
+    for (let i = 0; i < value.length; ) {
+      const node = value[i];
+      // A RUN of list items renders as ONE list, each `<li>` carrying its own address. Wrapping
+      // items one by one gave every item its own `<ol>`, so numbering restarted at 1 on every line
+      // and bullets sat a list-margin apart — the canvas no longer looked like the site.
+      if (isListItem(node)) {
+        let end = i + 1;
+        while (end < value.length && isListItem(value[end])) end++;
+        out.push(toHTML(value.slice(i, end) as never, { components: bound }));
+        i = end;
+        continue;
+      }
+      const inner = toHTML([node] as never, { components });
+      // A node with no key cannot be addressed. Render it rather than dropping it — an
+      // unaddressable paragraph is a small loss, a missing one is content disappearing.
+      out.push(node._key ? `<div${bindingAttrs(base, node._key)}>${inner}</div>` : inner);
+      i++;
+    }
+    return out.join("");
   }
 
   const html = toHTML(value as never, { components });