Base Extensions
The required base extensions that power the Ritext editor.
Base extensions provide the foundational building blocks the editor needs to function. You should always include at minimum Document, Text, and Paragraph.
Import
import {
Document,
Text,
Paragraph,
TextStyle,
ListItem,
ListKeymap,
Dropcursor,
Gapcursor,
Placeholder,
TrailingNode,
CharacterCount,
} from 'ritext/extension/base';Extensions
Document
The root node of the ProseMirror document. Required.
DocumentText
The text node. Required.
TextParagraph
The basic paragraph node. Required to type text.
ParagraphTextStyle
Enables inline text style marks (used by Color, BackgroundColor, FontFamily, FontSize, LineHeight). Required if you use any of those extensions.
TextStyleListItem
The list item node, required when using BulletList or OrderedList.
ListItemListKeymap
Adds keyboard shortcuts for list navigation (Tab, Shift+Tab inside lists).
ListKeymapDropcursor
Shows a visual cursor when dragging content over the editor.
// Basic
Dropcursor
// With custom width
Dropcursor.configure({ width: 4 })Options:
Prop
Type
Gapcursor
Allows placing the cursor in gaps around block nodes (e.g., after a table).
GapcursorPlaceholder
Renders placeholder text when the editor is empty.
Placeholder.configure({
placeholder: 'Start typing...',
})Options:
Prop
Type
TrailingNode
Ensures there is always an empty paragraph at the end of the document, so users can always click to place the cursor below any block.
TrailingNodeCharacterCount
Tracks character and word count. Access via editor.storage.characterCount.
CharacterCount.configure({ limit: 1000 })
// Access counts
editor.storage.characterCount.characters() // number of characters
editor.storage.characterCount.words() // number of wordsOptions:
Prop
Type
Recommended Setup
import {
Document, Text, Paragraph, TextStyle,
ListItem, ListKeymap, Dropcursor, Gapcursor,
Placeholder, TrailingNode
} from 'ritext/extension/base';
const extensions = [
Document,
Text,
Paragraph,
TextStyle,
ListItem,
ListKeymap,
TrailingNode,
Dropcursor.configure({ width: 4 }),
Gapcursor,
Placeholder.configure({ placeholder: 'Start writing...' }),
// ... your feature extensions
];