Components · Rich text editor

Editor toolbar

The compact formatting bar of the STD RichTextEditor — a Tiptap WYSIWYG. It sits on a surface-2 strip above the prose area, separated by a hairline rule, and groups its controls with thin dividers: bold / italic / strike, a block-type select, bullet & ordered lists, blockquote + inline code, link, and undo / redo. Each icon control is an icon-btn--sm that reports its toggle state through aria-pressed — the active state is a token-only accent-soft fill.

Toolbar · role="toolbar" · icon-btn--sm · aria-pressed active
  • Text the transport group the moment you clear each checkpoint
  • Bring a printed health certificate for every beagle in your vehicle

Pinned states: the shell carries the focus-within accent ring; the caret sits inside a bold word within a bulleted list, so those two controls report aria-pressed="true" (accent-soft fill). Italic is pinned :hover. Remove link is disabled (no link under the caret) and Redo is disabled (empty redo stack); Undo stays live.

role="toolbar"
The bar is a labelled role="toolbar" (aria-label="Formatting") on a surface-2 strip above a hairline border-b; it only renders while editable — read-only mode drops it entirely.
icon-btn--sm
Each control is a 30px icon-btn with a 16px lucide glyph — transparent at rest, surface-3 on hover, and a focus-ring on :focus-visible. Prevents the editor losing its selection via onMouseDown → preventDefault.
aria-pressed
Toggle marks (bold, italic, strike, lists, blockquote, code, link) drive active = editor.isActive(...) → aria-pressed and the accent-soft .is-active fill, so screen readers announce the toggle and the highlight stays token-only.
text style
The block-type select maps the current node to Paragraph / Heading 2 / Heading 3 (StarterKit ships H2 & H3 as the exposed levels), swapping the block via toggleHeading.
disabled
Commands gate on editor.can(): Remove link is off unless a link is under the caret; Undo / Redo track the history stack. Disabled = opacity .4 + cursor:not-allowed.

Source · RichTextEditor.tsx toolbar (role="toolbar" · ToolbarButton = icon-btn icon-btn--sm + aria-pressed → accent-soft) · ToolbarSep group dividers · Tiptap StarterKit + @tiptap/extension-link · design-system/editor.