Rich Text
Toolbar Buttons
Composable toolbar buttons for the RichEditor.
Toolbar buttons are passed as children of RichEditor.Toolbar. They must be rendered inside a RichEditor.Root (they use Plate's editor context internally).
MarkToolbarButton
Toggle bold/italic marks.
import { MarkToolbarButton } from '@workspace/rich-text/components/mark-toolbar-button';
<MarkToolbarButton nodeType="bold" tooltip="Bold (Cmd+B)">B</MarkToolbarButton>
<MarkToolbarButton nodeType="italic" tooltip="Italic (Cmd+I)">I</MarkToolbarButton>| Prop | Type | Description |
|---|---|---|
nodeType | string | Mark type: 'bold' or 'italic' |
clear | string | string[] | Other mark types to clear when applying this mark |
tooltip | string | Tooltip text |
children | ReactNode | Button label |
ListToolbarButton
Toggle ordered/bulleted lists.
import { ListToolbarButton } from '@workspace/rich-text/components/list-toolbar-button';
<ListToolbarButton listType="ordered" />
<ListToolbarButton listType="bulleted" />| Prop | Type | Description |
|---|---|---|
listType | 'ordered' | 'bulleted' | List type (preferred over nodeType) |
nodeType | string | Raw Plate node type (advanced) |
SuitSymbolButton
Insert bridge suit symbols.
import { SuitSymbolButton } from '@workspace/rich-text/plugins/suit/suit-symbol-button';
<SuitSymbolButton suit="S" /> {/* Spade */}
<SuitSymbolButton suit="H" /> {/* Heart */}
<SuitSymbolButton suit="D" /> {/* Diamond */}
<SuitSymbolButton suit="C" /> {/* Club */}| Prop | Type | Description |
|---|---|---|
suit | 'S' | 'H' | 'D' | 'C' | Suit to insert |
displayChar | string | Override the display character (defaults to Unicode suit glyph) |
mode | EditorMode | Display mode (default: 'default') |
disabled | boolean | Disable the button |
Each button shows the suit glyph with its color and the keyboard shortcut (\S, \H, \D, \C).
IndentToolbarButton
Indent or outdent list items.
import { IndentToolbarButton } from '@workspace/rich-text/components/list-toolbar-button';
<IndentToolbarButton /> {/* Indent */}
<IndentToolbarButton reverse /> {/* Outdent */}| Prop | Type | Description |
|---|---|---|
reverse | boolean | When true, outdents instead of indenting (default: false) |
Full Toolbar Example
const SUITS = ['S', 'H', 'D', 'C'] as const;
<RichEditor.Toolbar>
<MarkToolbarButton nodeType="bold">B</MarkToolbarButton>
<MarkToolbarButton nodeType="italic">I</MarkToolbarButton>
<ListToolbarButton listType="ordered" />
<ListToolbarButton listType="bulleted" />
{SUITS.map((suit) => (
<SuitSymbolButton key={suit} suit={suit} />
))}
</RichEditor.Toolbar>