Extensions Overview
Browse all available extensions for Ritext.
Ritext extensions are modular features you opt into. Each extension adds a formatting capability and automatically registers its toolbar button. Include only what you need.
Base Extensions
Base extensions are required for the editor to function. Always include them.
import {
Document, Text, Paragraph, TextStyle,
ListItem, ListKeymap, Dropcursor, Gapcursor,
Placeholder, TrailingNode, CharacterCount
} from 'ritext/extension/base';See Base Extensions for details.
All Extensions
| Extension | Import Path | Description |
|---|---|---|
| Bold | ritext/extension/bold | Bold text formatting |
| Italic | ritext/extension/italic | Italic text formatting |
| Underline | ritext/extension/underline | Underline text |
| Strike | ritext/extension/strike | Strikethrough text |
| Clear Format | ritext/extension/clearformat | Remove all formatting |
| Subscript | ritext/extension/subscript | Subscript text |
| Superscript | ritext/extension/superscript | Superscript text |
| Sub & Superscript | ritext/extension/subandsuperscript | Combined sub/superscript dropdown |
| Heading | ritext/extension/heading | H1–H6 headings |
| Font Family | ritext/extension/font-family | Change font family |
| Font Size | ritext/extension/font-size | Change font size |
| Color | ritext/extension/color | Text color picker |
| Background Color | ritext/extension/backgroundcolor | Text background color |
| Line Height | ritext/extension/lineheight | Line height control |
| Bullet List | ritext/extension/bulletlist | Unordered list |
| Ordered List | ritext/extension/orderedlist | Numbered list |
| Task List | ritext/extension/tasklist | Checkbox task list |
| Block Quote | ritext/extension/blockquote | Block quote |
| Horizontal Rule | ritext/extension/horizontalrule | Horizontal divider |
| Text Align | ritext/extension/textalign | Left/Center/Right/Justify |
| Indent/Outdent | ritext/extension/indentoutdent | Text indentation |
| History | ritext/extension/history | Undo/Redo |
| Hard Break | ritext/extension/hardbreak | Insert line break |
| Link | ritext/extension/link | Hyperlinks |
| Image | ritext/extension/image | Image insertion and editing |
| Table | ritext/extension/table | Table insertion and editing |
| Emoji | ritext/extension/emoji | Emoji picker |
Common Extension Pattern
Every Ritext extension follows the same pattern:
import { Bold } from 'ritext/extension/bold';
// Use as-is
const extensions = [Bold];
// Or configure with options
const extensions = [
Bold.configure({
className: 'my-button-class',
tooltip: true,
}),
];Common Options
All toolbar extensions share a set of common styling options:
Prop
Type
Surface & Bubble Menu
Every extension supports a surface option that controls where its button is rendered, and an order option that controls its position inside each surface.
Bold.configure({
surface: {
toolbar: true, // show in Toolbar (default: true)
bubbleMenu: true, // show in BubbleMenu (default: false for most)
},
order: {
bubbleMenu: 2, // position inside BubbleMenu — lower = earlier
},
})To hide a button from the toolbar but keep it in the bubble menu:
Color.configure({
surface: { toolbar: false, bubbleMenu: true },
order: { bubbleMenu: 6 },
})Default bubble menu positions (extensions that opt in by default):
| Order | Extension |
|---|---|
| 1 | Heading |
| 2 | Bold |
| 3 | Italic |
| 4 | Underline |
| 5 | Strike |
| 6 | Color |
| 7 | Background Color |
| 8 | Text Align |
| 9 | Link |
| 10 | Hard Break |
| 11 | Emoji |
See BubbleMenu for full component documentation.