@avocadostudio-ai/blocks 0.1.0 → 0.2.1

package/dist/blocks/_richtext-document.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Render a rich-text value stored as a ProseMirror *document*.
+ *
+ * The markdown-string form has a renderer next door in `_shared.tsx`. This one
+ * exists because an integration whose CMS has real rich text — Sanity Portable
+ * Text, Contentful Rich Text — maps the field to a document instead, so nothing
+ * is flattened on the way in. Both produce the same HTML for the constructs
+ * they share; the document form additionally carries what markdown has no
+ * syntax for, which today means `underline` and whatever marks the CMS's own
+ * schema declares.
+ *
+ * A node type this renderer does not know contributes its children and nothing
+ * else, and `avocadoUnknownBlock` contributes nothing at all. That is
+ * deliberate: an embedded entry is the integration's to render, and a
+ * placeholder shipped to a reader is worse than an omission. Integrations that
+ * want to draw one pass `renderUnknown`.
+ */
+import type { JSX, ReactNode } from "react";
+import { type RichTextDoc, type RichTextMark } from "@avocadostudio-ai/shared";
+export type RichTextDocumentProps = {
+    doc: RichTextDoc;
+    /**
+     * Draw a block this renderer cannot: an embedded entry, a table, a component
+     * from the CMS. Receives the source object the converter preserved.
+     */
+    renderUnknown?: (data: unknown, key: string) => ReactNode;
+    /**
+     * Draw a character style this renderer does not know — a site's own
+     * decorator, such as a brand highlight.
+     *
+     * Avocado ships five decorators; every CMS lets a project declare more, and
+     * a mark with no renderer would otherwise reach the page as unstyled text.
+     * Return `undefined` to decline and leave the content as it was.
+     */
+    renderMark?: (mark: RichTextMark, children: ReactNode, key: string) => ReactNode | undefined;
+};
+type RenderHooks = Pick<RichTextDocumentProps, "renderUnknown" | "renderMark">;
+export declare function renderRichTextDocument(doc: RichTextDoc, hooks?: RenderHooks): ReactNode[];
+/** The document form of `renderRichTextContent`, as a component. */
+export declare function RichTextDocument({ doc, renderUnknown, renderMark }: RichTextDocumentProps): JSX.Element;
+export {};

package/dist/blocks/_richtext-document.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { MARK, NODE } from "@avocadostudio-ai/shared";
+function markNames(node) {
+    return new Set((node.marks ?? []).map((mark) => mark.type));
+}
+const BUILT_IN_MARKS = new Set([
+    MARK.bold,
+    MARK.italic,
+    MARK.strike,
+    MARK.code,
+    MARK.underline,
+    MARK.link
+]);
+function renderText(node, key, hooks) {
+    const marks = markNames(node);
+    let out = node.text ?? "";
+    // Innermost first, so the nesting matches what the markdown renderer emits
+    // for the same content and the two surfaces produce the same DOM.
+    if (marks.has(MARK.code))
+        out = _jsx("code", { children: out });
+    /*
+     * A site's own decorators sit just inside the standard emphasis, in the order
+     * the document lists them — so a highlighted phrase inside bold text nests as
+     * `<strong><span class="highlight">`, which is what a stylesheet expects.
+     */
+    if (hooks.renderMark) {
+        for (const mark of node.marks ?? []) {
+            if (BUILT_IN_MARKS.has(mark.type))
+                continue;
+            const custom = hooks.renderMark(mark, out, `${key}-${mark.type}`);
+            if (custom !== undefined)
+                out = custom;
+        }
+    }
+    if (marks.has(MARK.strike))
+        out = _jsx("s", { children: out });
+    if (marks.has(MARK.underline))
+        out = _jsx("u", { children: out });
+    if (marks.has(MARK.italic))
+        out = _jsx("em", { children: out });
+    if (marks.has(MARK.bold))
+        out = _jsx("strong", { children: out });
+    const link = (node.marks ?? []).find((mark) => mark.type === MARK.link);
+    const href = link?.attrs?.href;
+    if (typeof href === "string" && href.length > 0)
+        out = _jsx("a", { href: href, children: out });
+    return _jsx("span", { children: out }, key);
+}
+function renderInline(nodes, prefix, hooks) {
+    return (nodes ?? []).map((node, index) => {
+        const key = `${prefix}-${index}`;
+        if (node.type === NODE.hardBreak)
+            return _jsx("br", {}, key);
+        if (typeof node.text === "string")
+            return renderText(node, key, hooks);
+        return _jsx("span", { children: renderInline(node.content, key, hooks) }, key);
+    });
+}
+function textOf(nodes) {
+    return (nodes ?? []).map((node) => node.text ?? "").join("");
+}
+function isList(node) {
+    return node.type === NODE.bulletList || node.type === NODE.orderedList;
+}
+function renderNode(node, key, hooks) {
+    switch (node.type) {
+        case NODE.paragraph:
+            return _jsx("p", { children: renderInline(node.content, key, hooks) }, key);
+        case NODE.heading: {
+            const level = typeof node.attrs?.level === "number" ? Math.min(6, Math.max(1, node.attrs.level)) : 2;
+            const Tag = `h${level}`;
+            return _jsx(Tag, { children: renderInline(node.content, key, hooks) }, key);
+        }
+        case NODE.bulletList:
+        case NODE.orderedList: {
+            const Tag = node.type === NODE.orderedList ? "ol" : "ul";
+            return (_jsx(Tag, { children: (node.content ?? []).map((item, index) => {
+                    const itemKey = `${key}-${index}`;
+                    const children = item.content ?? [];
+                    return (_jsx("li", { children: children.map((child, childIndex) => isList(child)
+                            ? renderNode(child, `${itemKey}-${childIndex}`, hooks)
+                            : child.type === NODE.paragraph
+                                ? renderInline(child.content, `${itemKey}-${childIndex}`, hooks)
+                                : renderNode(child, `${itemKey}-${childIndex}`, hooks)) }, itemKey));
+                }) }, key));
+        }
+        case NODE.blockquote:
+            return (_jsx("blockquote", { children: (node.content ?? []).map((child, index) => renderNode(child, `${key}-${index}`, hooks)) }, key));
+        case NODE.codeBlock: {
+            const language = typeof node.attrs?.language === "string" ? node.attrs.language : undefined;
+            return (_jsx("pre", { children: _jsx("code", { className: language ? `language-${language}` : undefined, children: textOf(node.content) }) }, key));
+        }
+        case NODE.horizontalRule:
+            return _jsx("hr", {}, key);
+        case NODE.unknown:
+            return hooks.renderUnknown ? hooks.renderUnknown(node.attrs?.data, key) : null;
+        default:
+            // Something this renderer has no element for but which still wraps
+            // content — keep the prose rather than dropping the subtree.
+            return (_jsx("div", { children: (node.content ?? []).map((child, index) => renderNode(child, `${key}-${index}`, hooks)) }, key));
+    }
+}
+export function renderRichTextDocument(doc, hooks = {}) {
+    return (doc.content ?? []).map((node, index) => renderNode(node, `n${index}`, hooks));
+}
+/** The document form of `renderRichTextContent`, as a component. */
+export function RichTextDocument({ doc, renderUnknown, renderMark }) {
+    return _jsx(_Fragment, { children: renderRichTextDocument(doc, { renderUnknown, renderMark }) });
+}

package/dist/blocks/_shared.d.ts

@@ -1,5 +1,8 @@
 import type { AnchorHTMLAttributes, JSX, ReactNode } from "react";
+import { normalizeRichTextBody } from "@avocadostudio-ai/shared";
 export { BlockImage, type BlockImageProps } from "./block-image.tsx";
+export { RichTextDocument, renderRichTextDocument, type RichTextDocumentProps } from "./_richtext-document.tsx";
+export { normalizeRichTextBody };
 /**
  * Render a block "icon" prop safely. Icons may be a single emoji/symbol or an
  * image URL. Anything else (a bare icon-library name, descriptive text, an
@@ -20,5 +23,4 @@ export declare function PrimaryButton({ href, children, className, ...rest }: Bu
 export declare function SecondaryButton({ href, children, className, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function TertiaryButton({ href, children, className, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function renderInline(text: string): (string | JSX.Element)[];
-export declare function normalizeRichTextBody(input: string): string;
-export declare function renderRichTextContent(input: string): (import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[] | null)[];
+export declare function renderRichTextContent(input: string): (import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[])[];

package/dist/blocks/_shared.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parseInline, parseRichText, normalizeRichTextBody, resolveRichTextHeadingLevel } from "@avocadostudio-ai/shared";
 export { BlockImage } from "./block-image.js";
+export { RichTextDocument, renderRichTextDocument } from "./_richtext-document.js";
+// The grammar itself lives in @avocadostudio-ai/shared so that this renderer,
+// the editor overlay and the Puck adapter cannot drift apart again. What stays
+// here is presentation: which React elements a token becomes.
+export { normalizeRichTextBody };
 function isIconUrl(value) {
     return /^https?:\/\//i.test(value);
 }
@@ -79,75 +85,60 @@ export function SecondaryButton({ href, children, className, ...rest }) {
 export function TertiaryButton({ href, children, className, ...rest }) {
     return (_jsx("a", { href: href, className: ["btn-tertiary", className].filter(Boolean).join(" "), ...rest, children: children }));
 }
-export function renderInline(text) {
-    const tokens = [];
-    const regex = /\*\*(.+?)\*\*|\*(.+?)\*|\[(.+?)\]\((.+?)\)/g;
-    let last = 0;
-    let match;
-    while ((match = regex.exec(text)) !== null) {
-        if (match.index > last)
-            tokens.push(text.slice(last, match.index));
-        if (match[1] !== undefined) {
-            tokens.push(_jsx("strong", { children: match[1] }, match.index));
-        }
-        else if (match[2] !== undefined) {
-            tokens.push(_jsx("em", { children: match[2] }, match.index));
-        }
-        else if (match[3] !== undefined && match[4] !== undefined) {
-            tokens.push(_jsx("a", { href: match[4], children: match[3] }, match.index));
-        }
-        last = match.index + match[0].length;
+function renderInlineToken(token) {
+    switch (token.type) {
+        case "strong":
+            return _jsx("strong", { children: token.text }, token.at);
+        case "em":
+            return _jsx("em", { children: token.text }, token.at);
+        case "strike":
+            return _jsx("s", { children: token.text }, token.at);
+        case "code":
+            return _jsx("code", { children: token.text }, token.at);
+        case "link":
+            return (_jsx("a", { href: token.href, children: token.text }, token.at));
+        case "break":
+            return _jsx("br", {}, token.at);
+        default:
+            return token.text;
     }
-    if (last < text.length)
-        tokens.push(text.slice(last));
-    return tokens;
 }
-export function normalizeRichTextBody(input) {
-    return input
-        .replace(/\r\n?/g, "\n")
-        // Fix run-on sentence joins like "requested.Here's" -> "requested. Here's".
-        .replace(/([.!?])([A-Z])/g, "$1 $2")
-        // Avoid excessive blank lines while preserving paragraph breaks.
-        .replace(/\n{3,}/g, "\n\n")
-        .trim();
+export function renderInline(text) {
+    return parseInline(text).map(renderInlineToken);
 }
-function renderRichTextBlock(block, idx) {
-    const lines = block
-        .split(/\n+/)
-        .map((line) => line.trim())
-        .filter(Boolean);
-    if (lines.length === 0)
-        return null;
-    const headingMatch = /^(#{1,6})\s+(.+)$/.exec(lines[0]);
-    if (headingMatch) {
-        const heading = _jsx("h3", { children: renderInline(headingMatch[2].trim()) }, `${idx}-heading`);
-        const remainder = lines.slice(1).join(" ").trim();
-        if (!remainder)
-            return heading;
-        return [
-            heading,
-            _jsx("p", { children: renderInline(remainder) }, `${idx}-paragraph`)
-        ];
-    }
-    const unorderedItems = lines
-        .map((line) => /^\s*[-*+•]\s+(.+)$/.exec(line)?.[1]?.trim() ?? null)
-        .filter((line) => !!line && line.length > 0);
-    if (unorderedItems.length === lines.length) {
-        return (_jsx("ul", { children: unorderedItems.map((item, itemIdx) => (_jsx("li", { children: renderInline(item) }, itemIdx))) }, idx));
-    }
-    const orderedItems = lines
-        .map((line) => /^\s*\d+[.)]\s+(.+)$/.exec(line)?.[1]?.trim() ?? null)
-        .filter((line) => !!line && line.length > 0);
-    if (orderedItems.length === lines.length) {
-        return (_jsx("ol", { children: orderedItems.map((item, itemIdx) => (_jsx("li", { children: renderInline(item) }, itemIdx))) }, idx));
+function renderItems(items) {
+    return items.map((item, itemIdx) => (_jsxs("li", { children: [item.inline.map(renderInlineToken), item.children
+                ? item.children.type === "ordered-list"
+                    ? _jsx("ol", { children: renderItems(item.children.items) })
+                    : _jsx("ul", { children: renderItems(item.children.items) })
+                : null] }, itemIdx)));
+}
+function renderRichTextBlock(block) {
+    switch (block.type) {
+        case "heading": {
+            const Tag = `h${resolveRichTextHeadingLevel(block.level)}`;
+            const heading = _jsx(Tag, { children: block.inline.map(renderInlineToken) }, `${block.index}-heading`);
+            if (!block.trailing)
+                return heading;
+            return [
+                heading,
+                _jsx("p", { children: block.trailing.map(renderInlineToken) }, `${block.index}-paragraph`)
+            ];
+        }
+        case "unordered-list":
+            return _jsx("ul", { children: renderItems(block.items) }, block.index);
+        case "ordered-list":
+            return _jsx("ol", { children: renderItems(block.items) }, block.index);
+        case "blockquote":
+            return _jsx("blockquote", { children: block.children.map(renderRichTextBlock) }, block.index);
+        case "code":
+            return (_jsx("pre", { children: _jsx("code", { className: block.language ? `language-${block.language}` : undefined, children: block.code }) }, block.index));
+        case "rule":
+            return _jsx("hr", {}, block.index);
+        default:
+            return _jsx("p", { children: block.inline.map(renderInlineToken) }, block.index);
     }
-    return _jsx("p", { children: renderInline(block) }, idx);
 }
 export function renderRichTextContent(input) {
-    const body = normalizeRichTextBody(input);
-    const blocks = body
-        .split(/\n\s*\n+/)
-        .map((block) => block.trim())
-        .filter(Boolean);
-    return blocks.map((block, idx) => renderRichTextBlock(block, idx));
+    return parseRichText(input).map(renderRichTextBlock);
 }

package/dist/blocks/rich-text/styles.css

@@ -35,16 +35,74 @@
   margin-top: 0.3em;
 }
 
-.rich-text__body h3 {
+/*
+ * Body headings. A `##` renders <h2> here, so every level the parser can emit
+ * needs a size — without these the browser default applies and a body heading
+ * comes out larger than the section title above it. The scale stays below
+ * `.section__inner > h2`, which is the section's own heading.
+ */
+.rich-text__body :is(h2, h3, h4, h5, h6) {
   margin-top: 1.25em;
   margin-bottom: 0.45em;
-  font-size: 1.25rem;
   line-height: 1.3;
   letter-spacing: -0.01em;
   font-weight: 700;
   color: var(--heading);
 }
 
+.rich-text__body h2 { font-size: 1.45rem; }
+.rich-text__body h3 { font-size: 1.25rem; }
+.rich-text__body h4 { font-size: 1.1rem; }
+.rich-text__body h5 { font-size: 1rem; }
+.rich-text__body h6 { font-size: 0.9375rem; }
+
+
+/* Constructs the editor can produce and the parser now renders. Without sizes
+   here they fall back to browser defaults, which do not match the block. */
+.rich-text__body blockquote {
+  margin: 1.25em 0;
+  padding: 0.15em 0 0.15em 1em;
+  border-left: 3px solid var(--rule, rgba(127, 127, 127, 0.3));
+  color: var(--body);
+  font-style: italic;
+}
+
+.rich-text__body blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.rich-text__body pre {
+  margin: 1.25em 0;
+  padding: 12px 14px;
+  border-radius: 6px;
+  background: rgba(127, 127, 127, 0.12);
+  overflow-x: auto;
+}
+
+.rich-text__body pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  line-height: 1.55;
+}
+
+.rich-text__body code {
+  padding: 0.12em 0.36em;
+  border-radius: 3px;
+  background: rgba(127, 127, 127, 0.15);
+  font-size: 0.9em;
+}
+
+.rich-text__body hr {
+  margin: 1.75em 0;
+  border: 0;
+  border-top: 1px solid var(--rule, rgba(127, 127, 127, 0.3));
+}
+
+.rich-text__body :is(ul, ol) :is(ul, ol) {
+  margin: 0.3em 0 0;
+}
+
 /* Dark */
 .dark .rich-text__body,
 .dark .rich-text__body li,

package/dist/blocks/tabs/styles.css

@@ -85,13 +85,20 @@
   margin-bottom: 0;
 }
 
-.tabs-block__content h3 {
+/* Body headings — see the note in rich-text/styles.css. Tighter scale than the
+   other rich bodies because tab panels are short. */
+.tabs-block__content :is(h2, h3, h4, h5, h6) {
   margin: 0 0 8px;
-  font-size: 1.15rem;
   font-weight: 600;
   color: var(--heading);
 }
 
+.tabs-block__content h2 { font-size: 1.3rem; }
+.tabs-block__content h3 { font-size: 1.15rem; }
+.tabs-block__content h4 { font-size: 1.05rem; }
+.tabs-block__content h5 { font-size: 1rem; }
+.tabs-block__content h6 { font-size: 0.9375rem; }
+
 .tabs-block__content ul {
   margin: 0 0 12px;
   padding-left: 24px;
@@ -145,3 +152,50 @@
     margin-bottom: 16px;
   }
 }
+
+/* Constructs the editor can produce and the parser now renders. Without sizes
+   here they fall back to browser defaults, which do not match the block. */
+.tabs-block__content blockquote {
+  margin: 1.25em 0;
+  padding: 0.15em 0 0.15em 1em;
+  border-left: 3px solid var(--rule, rgba(127, 127, 127, 0.3));
+  color: var(--body);
+  font-style: italic;
+}
+
+.tabs-block__content blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.tabs-block__content pre {
+  margin: 1.25em 0;
+  padding: 12px 14px;
+  border-radius: 6px;
+  background: rgba(127, 127, 127, 0.12);
+  overflow-x: auto;
+}
+
+.tabs-block__content pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  line-height: 1.55;
+}
+
+.tabs-block__content code {
+  padding: 0.12em 0.36em;
+  border-radius: 3px;
+  background: rgba(127, 127, 127, 0.15);
+  font-size: 0.9em;
+}
+
+.tabs-block__content hr {
+  margin: 1.75em 0;
+  border: 0;
+  border-top: 1px solid var(--rule, rgba(127, 127, 127, 0.3));
+}
+
+.tabs-block__content :is(ul, ol) :is(ul, ol) {
+  margin: 0.3em 0 0;
+}
+

package/dist/blocks/two-column/styles.css

@@ -57,16 +57,24 @@
   margin-top: 0.3em;
 }
 
-.two-column__body h3 {
+/* Body headings — see the note in rich-text/styles.css. These rules come after
+   `.two-column__text h2` on purpose: same specificity, so order decides, and a
+   heading written inside the body must not take the column title's size. */
+.two-column__body :is(h2, h3, h4, h5, h6) {
   margin-top: 1.25em;
   margin-bottom: 0.45em;
-  font-size: 1.25rem;
   line-height: 1.3;
   letter-spacing: -0.01em;
   font-weight: 700;
   color: var(--heading);
 }
 
+.two-column__body h2 { font-size: 1.45rem; }
+.two-column__body h3 { font-size: 1.25rem; }
+.two-column__body h4 { font-size: 1.1rem; }
+.two-column__body h5 { font-size: 1rem; }
+.two-column__body h6 { font-size: 0.9375rem; }
+
 .two-column__cta {
   margin-top: 8px;
 }
@@ -81,3 +89,50 @@
     order: 0;
   }
 }
+
+/* Constructs the editor can produce and the parser now renders. Without sizes
+   here they fall back to browser defaults, which do not match the block. */
+.two-column__body blockquote {
+  margin: 1.25em 0;
+  padding: 0.15em 0 0.15em 1em;
+  border-left: 3px solid var(--rule, rgba(127, 127, 127, 0.3));
+  color: var(--body);
+  font-style: italic;
+}
+
+.two-column__body blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.two-column__body pre {
+  margin: 1.25em 0;
+  padding: 12px 14px;
+  border-radius: 6px;
+  background: rgba(127, 127, 127, 0.12);
+  overflow-x: auto;
+}
+
+.two-column__body pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  line-height: 1.55;
+}
+
+.two-column__body code {
+  padding: 0.12em 0.36em;
+  border-radius: 3px;
+  background: rgba(127, 127, 127, 0.15);
+  font-size: 0.9em;
+}
+
+.two-column__body hr {
+  margin: 1.75em 0;
+  border: 0;
+  border-top: 1px solid var(--rule, rgba(127, 127, 127, 0.3));
+}
+
+.two-column__body :is(ul, ol) :is(ul, ol) {
+  margin: 0.3em 0 0;
+}
+

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export { BlocksHydrator } from "./blocks-hydrator.tsx";
 export { BlockErrorBoundary } from "./block-error-boundary.tsx";
 export { rendererTypes } from "./blocks/index.ts";
 export type { BlockImageProps } from "./blocks/block-image.tsx";
+export { RichTextDocument, renderRichTextDocument, type RichTextDocumentProps } from "./blocks/_richtext-document.tsx";

package/dist/index.js

@@ -3,3 +3,4 @@ export { BlockCatalogue } from "./catalogue.js";
 export { BlocksHydrator } from "./blocks-hydrator.js";
 export { BlockErrorBoundary } from "./block-error-boundary.js";
 export { rendererTypes } from "./blocks/index.js";
+export { RichTextDocument, renderRichTextDocument } from "./blocks/_richtext-document.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avocadostudio-ai/blocks",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,8 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./styles.css": "./dist/blocks/styles.css"
   },
@@ -25,10 +26,11 @@
     "dist"
   ],
   "dependencies": {
-    "@avocadostudio-ai/shared": "0.1.0"
+    "@avocadostudio-ai/richtext": "0.2.1",
+    "@avocadostudio-ai/shared": "0.2.1"
   },
   "peerDependencies": {
-    "next": ">=14.0.0",
+    "next": ">=15.0.0",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0"
   },
@@ -47,8 +49,7 @@
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node ./scripts/copy-css.mjs",
-    "test": "NODE_ENV=test tsx --test src/blocks/*/renderer.test.ts src/blocks/*.test.ts",
-    "test:unit": "NODE_ENV=test tsx --test src/blocks/*/renderer.test.ts src/blocks/*.test.ts",
+    "test": "NODE_ENV=test node ../../scripts/run-tests.mjs",
     "typecheck": "tsc --noEmit"
   }
 }