Text format
A toolbar with every inline text format. Select text and apply a format with a button or a keyboard shortcut.
Installation
This pattern is built from files in @intentui/editor. Install the editor, then copy the code above into a component of your own.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/editor
What's included
| Piece | Why it is here |
|---|---|
RichTextExtension | Lexical's rich text behavior. Every pattern needs it. |
InitialStateExtension | Applies the seeded content immediately, so the server and the client render the same. Leave it out if your editor starts empty. See Seeding initial content. |
FormatStateExtension | Tracks which formats are active, so buttons show as pressed. |
ShortcutsExtension | Registers the keyboard shortcuts below. Remove it and the buttons still work, but the shortcuts do not. |
TextFormatToolbarPlugin | The toggle buttons. |
Toolbar | The container that holds toolbar plugins. See Toolbar. |
Formats
| Group | Formats |
|---|---|
| Basic | Bold, italic, underline, strikethrough |
| Marks | Highlight, inline code |
| Script | Subscript, superscript |
| Case | Uppercase, lowercase, title case |
Markdown formats only
Set formats="markdown" to render bold, italic, strikethrough and inline code in one group. These are the formats Markdown can write, see the Markdown editor.
<Toolbar>
<TextFormatToolbarPlugin formats="markdown" />
</Toolbar>Basic formats only
Set formats="basic" to render only the first group.
<Toolbar>
<TextFormatToolbarPlugin formats="basic" />
</Toolbar>Keyboard
Use Cmd instead of Ctrl on macOS.
| Format | Shortcut |
|---|---|
| Bold | Ctrl B |
| Italic | Ctrl I |
| Underline | Ctrl U |
| Strikethrough | Ctrl Shift X |
| Inline code | Ctrl Shift C |
| Subscript | Ctrl , |
| Superscript | Ctrl . |
| Lowercase | Ctrl Shift 1 |
| Uppercase | Ctrl Shift 2 |
| Title case | Ctrl Shift 3 |
The three case shortcuts use Ctrl on every platform. Highlight has no shortcut.
Styling
Each format is styled by an entry under text in components/editor/theme.ts.
text: {
bold: "font-bold",
code: "rounded-sm bg-muted px-1.5 py-0.5 font-mono text-sm",
highlight: "rounded bg-warning-subtle",
// ...
}API
Props of
TextFormatToolbarPlugin.formats"basic" | "markdown" | "all"basic renders bold, italic, underline and strikethrough only. markdown renders bold, italic, strikethrough and inline code. all adds highlight, code, subscript, superscript and the case formats.Default:
"all"Related patterns
- Block format for headings, lists and quotes.
- Color for text and highlight colors.
- Floating toolbar to show these controls next to the selection.