@bettercms-ai/richtext 0.11.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bettercms-ai/richtext",
-  "version": "0.11.0",
+  "version": "0.12.1",
   "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/from-lexical.ts

@@ -95,7 +95,8 @@ function spansFrom(
   if (!isRecord(value)) return [];
   const node = value as LexNode;
 
-  if (node.type === "link") {
+  // An `autolink` is Lexical's link for a URL typed as text: the same annotation, so the same mark.
+  if (node.type === "link" || node.type === "autolink") {
     const href = safeHref(node.url ?? "");
     // An unsafe href does not become an unsafe link and does not silently delete the label —
     // the text survives, unlinked.

package/src/html.ts

@@ -1,7 +1,9 @@
 import { toHTML, type PortableTextHtmlComponents } from "@portabletext/to-html";
 import {
+  BUILTIN_CALLOUT_KEY,
   BUILTIN_EMBED_KEY,
   BUILTIN_IMAGE_KEY,
+  BUILTIN_TOGGLE_KEY,
   PT_TYPES,
   pullQuoteHref,
   type PortableText,
@@ -307,6 +309,42 @@ function embedHtml(value: unknown, _classes: HtmlClasses): string {
   return `<iframe src="${esc(src)}"${title ? ` title="${esc(title)}"` : ""}${IFRAME_ATTRS}></iframe>`;
 }
 
+/** Plain multi-line text as paragraphs: a blank line starts a new one, a single newline is a `<br>`. */
+const paragraphs = (text: string): string =>
+  text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean)
+    .map((p) => `<p>${p.split("\n").map(esc).join("<br>")}</p>`).join("");
+
+const CALLOUT_TONES = new Set(["info", "tip", "warning"]);
+
+/**
+ * A callout: a titled note in its tone. Its payload is its own text, so it renders as content — a marker
+ * here was the whole note missing from every delivered page. An unknown tone renders as `info`.
+ */
+function calloutHtml(value: unknown): string {
+  const f = fieldsOf(value);
+  const tone = CALLOUT_TONES.has(str(f.tone)) ? str(f.tone) : "info";
+  const title = str(f.title);
+  const body = paragraphs(typeof f.message === "string" ? f.message : "");
+  if (!title && !body) return "";
+  return `<div class="bcms-callout bcms-callout--${tone}" data-rt="callout" data-callout="${tone}" role="note">`
+    + (title ? `<p class="bcms-callout__title" data-title>${esc(title)}</p>` : "")
+    + `<div class="bcms-callout__body" data-body>${body}</div></div>`;
+}
+
+/** A toggle: `<details>`, so it opens and closes on a page with no script. */
+function toggleHtml(value: unknown): string {
+  const f = fieldsOf(value);
+  const title = str(f.title);
+  const body = paragraphs(typeof f.body === "string" ? f.body : "");
+  if (!title && !body) return "";
+  return `<details class="bcms-toggle" data-rt="toggle"><summary class="bcms-toggle__title">${esc(title)}</summary>`
+    + `<div class="bcms-toggle__body" data-body>${body}</div></details>`;
+}
+
+/** Built-in blocks this serialiser renders from their own fields (no project lookup): read-time html re-derives them. */
+export const isSelfRenderedBlock = (node: unknown): boolean =>
+  isRecord(node) && (node.schemaKey === BUILTIN_CALLOUT_KEY || node.schemaKey === BUILTIN_TOGGLE_KEY);
+
 /**
  * A video: the file itself where the URL is one, the provider's player where it is a provider's.
  *
@@ -486,6 +524,8 @@ const buildComponents = (
       const v = value as { schemaKey?: unknown };
       if (v.schemaKey === BUILTIN_IMAGE_KEY) return imageHtml(value, classes);
       if (v.schemaKey === BUILTIN_EMBED_KEY) return embedHtml(value, classes);
+      if (v.schemaKey === BUILTIN_CALLOUT_KEY) return calloutHtml(value);
+      if (v.schemaKey === BUILTIN_TOGGLE_KEY) return toggleHtml(value);
       /**
        * A pre-P1c TABLE is the exception to the marker, and it has to be: it resolves against
        * nothing. Its rows are text, held right here, so a marker would DELETE visible content.

package/src/ingest.ts

@@ -795,11 +795,39 @@ const allowsBlockObject = (schema: PtSchema | undefined, name: string): boolean
 const isElement = (n: unknown): n is Element =>
   !!n && typeof n === "object" && (n as Node).nodeType === 1;
 
+const BLOCK_TAGS = new Set([
+  "ADDRESS", "ARTICLE", "ASIDE", "BLOCKQUOTE", "DD", "DETAILS", "DIV", "DL", "DT", "FIGCAPTION", "FIGURE", "FOOTER",
+  "H1", "H2", "H3", "H4", "H5", "H6", "HEADER", "HR", "LI", "MAIN", "NAV", "OL", "P", "PRE", "SECTION", "TABLE", "UL",
+]);
+
+/**
+ * The parser, minus the indentation between block elements. The converter skips that whitespace
+ * at the top level but turns it into an empty block inside a wrapper, so `<div><p>a</p>\n<p>b</p></div>`
+ * came back as three blocks. Only ASCII whitespace beside a block element goes: a space between two
+ * inline elements is a word break, and `&nbsp;` or a `<br>` is an author's blank line.
+ */
+const withoutBlockWhitespace =
+  (parse: (html: string) => Document) =>
+  (html: string): Document => {
+    const doc = parse(html);
+    const walker = doc.createTreeWalker(doc.body ?? doc, 4 /* NodeFilter.SHOW_TEXT */);
+    const blank: Node[] = [];
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      const beside = [n.previousSibling, n.nextSibling].some((s) => !!s && BLOCK_TAGS.has(s.nodeName));
+      if (beside && /^[ \t\n\r]*$/.test(n.nodeValue ?? "") && n.parentNode?.nodeName !== "PRE") blank.push(n);
+    }
+    for (const n of blank) n.parentNode?.removeChild(n);
+    return doc;
+  };
+
 export function htmlToPortableText(html: string, opts: IngestOptions = {}): PortableText {
   if (typeof html !== "string" || html.trim() === "") return [];
   const key = opts.keyGenerator ?? randomKey;
+  const parse =
+    opts.parseHtml ?? (typeof DOMParser !== "undefined" ? (markup: string) => new DOMParser().parseFromString(markup, "text/html") : undefined);
   const converted = ptHtmlToPortableText(html, {
-    ...(opts.parseHtml ? { parseHtml: opts.parseHtml } : {}),
+    // The browser's own parser when none is passed (Node must pass one), so both drop the same whitespace.
+    ...(parse ? { parseHtml: withoutBlockWhitespace(parse) } : {}),
     // `ptSchemaFor` returns a schema DEFINITION — the same object `EditorProvider` takes, so
     // the editor and this filter are literally configured from one value. The deserialiser
     // wants the COMPILED form, so the compile happens here rather than at every call site.

package/src/types.ts

@@ -462,6 +462,9 @@ export const STORABLE_BLOCK_TYPES: ReadonlySet<string> = new Set<string>([
  */
 export const BUILTIN_IMAGE_KEY = "builtin:image" as const;
 export const BUILTIN_EMBED_KEY = "builtin:video" as const;
+/** A callout (`{ tone: info|tip|warning, title, message }`) and a toggle (`{ title, body }`): plain text, read straight. */
+export const BUILTIN_CALLOUT_KEY = "builtin:callout" as const;
+export const BUILTIN_TOGGLE_KEY = "builtin:toggle" as const;
 
 /**
  * The `schemaKey` of a component embedded in rich text. A wire value shared with the dashboard