Bold
Apply bold formatting to emphasize important text.
Italic
Apply italic formatting for emphasis or stylistic purposes.
Underline
Apply underline formatting to text.
Strikethrough
Apply strikethrough formatting to indicate deleted content.
Code
Format inline code snippets and technical terms.
Subscript
Format text as subscript for mathematical expressions.
Superscript
Format text as superscript for mathematical expressions.
Kbd
Display keyboard shortcuts and key combinations.
Highlight
Highlight important text with background colors.
Kit Usage
Installation
The BasicMarksKit bundles plugins for Bold, Italic, Underline, Strikethrough, Code, Subscript, Superscript, Highlight, and Kbd marks, along with their respective UI components from Plate UI.
CodeLeaf: Renders inline code elements.HighlightLeaf: Renders highlighted text elements.KbdLeaf: Renders keyboard shortcut elements.
Add Kit
Add the kit to your plugins:
import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
const editor = createPlateEditor({
plugins: [
// ...otherPlugins,
...BasicMarksKit,
],
});Manual Usage
pnpm add @platejs/basic-nodes
Add Toolbar Button
You can add MarkToolbarButton to your Toolbar to control text formatting marks.
For individual plugin setup and configuration, see the specific plugin documentation pages linked above.