@bettercms-ai/richtext 0.11.0 → 0.12.0

package/package.json

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

@@ -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/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