Skip to content
HOC Site Docs
English
EnglishTürkçe
Esc
↑↓navigate↵open⌘Jpreview
On this page

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.

Field-level catalog tables below stay in English — they match the machine design schema used by the editor, API, and MCP.

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, font family, and font size (px) — inline spans, so any selection can differ
  • 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)
  • 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.

Was this page helpful?