Full editor
This is components/editor/editor.tsx, exactly as the CLI installs it. Everything the editor can do is wired up here, so it is the best place to see how the pieces fit together.
Installation
Install the editor, then render DemoEditor, or rename it and use it as the starting point for your own.
npx shadcn@latest add @intentui/editor
What's included
Extensions
The dependencies list in defineExtension decides which behaviors the editor has.
| Extension | Behavior | Pattern |
|---|---|---|
RichTextExtension | Rich text editing. Required. | |
HistoryExtension | Undo and redo. | History |
TabIndentationExtension | Indent with Tab. | Alignment and indent |
ListExtension, CheckListExtension | Bulleted, numbered and check lists. | Block format |
HashtagExtension, SpecialTextExtension | Highlights hashtags and special words. | Special text |
LinkExtension, AutoLinkExtension | Links and automatic link detection. | Link |
CodeExtension | Code blocks with syntax highlighting. | Code block |
LayoutExtension | Columns. | Columns |
EmojiExtension | Emoji nodes. | Emoji |
TableExtension | Tables. | Table |
HorizontalRuleExtension | Dividers. | Divider |
ImageExtension, DragDropPasteExtension | Images, including drag, drop and paste. | Image |
MentionExtension | Mention nodes. | Mention |
AutocompleteExtension | Inline suggestions. | Autocomplete |
TabFocusExtension | Tab focus behavior. | Tab focus |
SpeechToTextExtension | Dictation. | Speech to text |
ShortcutsExtension | Keyboard shortcuts. | Shortcuts |
FormatStateExtension | Tracks the current format so controls reflect it. | Text format |
ClearEditorExtension | Clears the document. | Clear |
ClipboardDOMImportExtension | Cleaner pasting of HTML. | |
AutoFocusExtension | Focuses the editor on mount. |
Markdown typing shortcuts are registered with registerMarkdownShortcuts in register, using the EDITOR_TRANSFORMERS list. See Markdown shortcuts.
Regions
| Region | In the file | Details |
|---|---|---|
| Toolbar | <Toolbar> with the toolbar plugins | Toolbar |
| Content area | <ContentEditable variant="draggable" /> | Content area |
| Overlays | Drag handle, floating toolbar, link editor, table actions, emoji picker, mentions, context menu, slash menu | Floating toolbar, Slash menu |
| Activity bar | <ActivityBar> with count, speech to text, read-only toggle and shortcuts | Activity bar |
Make it smaller
For an editor limited to what Markdown can express, see the Markdown editor, which ships as editor-md.tsx. For an editor built around the slash menu, see the Block editor, which ships as editor-block.tsx.
Delete what you do not need. Each pattern shows which extensions and plugins belong together, so you can remove a feature completely: its extension, its imports and its JSX.
Related patterns
Start with Text format, Slash menu and Table.