HOC Site
← Shared concepts
Rich text
TipTap HTML used by RichTextBlock, button labels, overlays, and object-bound rich text. Storage shape, toolbar features, and authoring rules are documented here.
Storage Rich text props are TipTap HTML **strings**, not slots and not a separate `html` key. Example: `content: "<p>Hello <strong>world</strong></p>"`. Empty content is typically an empty string or a minimal empty paragraph from the editor.
Editor features The shared TipTap stack (admin Puck + public forms) includes: - Headings levels 1–6 - Bold, italic, strike, and related StarterKit marks/nodes (paragraphs, lists, blockquotes, hard breaks) - Links (insert/edit/remove via the toolbar modal) - Text color and font family - Tables (insert/add/remove rows and columns) - Images from the file library (base64 embeds are not allowed) - YouTube embeds and Google Maps embeds Some surfaces (e.g. lifecycle email bodies) add extra extensions such as field-binding chips; those only appear where that editor enables them.
Public render Published HTML is rendered with the shared `.rich-text` styles (and related puck rich-text CSS) so headings, lists, tables, and embeds match the editor. Theme typography and colors still come from the website theme where CSS variables apply.
Where rich text appears - **RichTextBlock** — `content` HTML body on pages and chrome - **ButtonBlock** / **ButtonLink** — `text` label as HTML (often a short paragraph) - **ImageOverlayText** (legacy) — `overlay` HTML on the image - **ObjectBoundRichText** — binds an object schema `richText` field into the page - Object schema type `richText` and admin/public **SharedRichTextField** forms use the same extension stack
Authoring & MCP guidance - Keep first-viewport copy short; put long articles in object fields and bind them with ObjectBoundRichText. - Always write the HTML into the documented prop (`content`, `text`, or `overlay`) — do not invent an `html` prop. - Locale overlays localize these HTML strings like other localizable props; the modal Name field is not rich text and is not localized. - Prefer semantic HTML TipTap already emits (`<p>`, `<h2>`, `<ul>`, `<a href="…">`, tables) over hand-authored markup that the schema does not round-trip. - When documenting or generating JSON, treat the value as a string of HTML, never as a nested slot array.
Examples
// Short paragraph
{
"content": "<p>Browse categories and start a conversation.</p>"
}// Heading + list
{
"content": "<h2>What you get</h2><ul><li>Fast setup</li><li>Multi-locale publishing</li></ul>"
}