Basic Marks covers the common inline formatting marks: bold, italic, underline, strikethrough, code, subscript, superscript, highlight, and kbd. The package owns mark plugins and transforms; the registry kit adds leaf components, toolbar wiring, and Markdown-style input rules.
Use strikethrough for deleted or replaced text.
BasicMarksKit is the full client-side registry kit. It includes mark plugins, input rules, CodeLeaf, HighlightLeaf, and KbdLeaf.
'use client';
import {
BoldRules,
CodeRules,
HighlightRules,
ItalicRules,
MarkComboRules,
ScriptRules,
StrikethroughRules,
UnderlineRules,
} from '@platejs/basic-nodes';
import {
BoldPlugin,
CodePlugin,
HighlightPlugin,
ItalicPlugin,
KbdPlugin,
ScriptPlugin,
StrikethroughPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';
import { KbdLeaf } from '@/components/editor/kbd';
export const BasicMarksKit = [
BoldPlugin.configure({
inputRules: [
BoldRules.markdown({ variant: '*' }),
BoldRules.markdown({ variant: '_' }),
MarkComboRules.markdown({ variant: 'boldItalic' }),
MarkComboRules.markdown({ variant: 'boldUnderline' }),
MarkComboRules.markdown({ variant: 'boldItalicUnderline' }),
MarkComboRules.markdown({ variant: 'italicUnderline' }),
],
}),
ItalicPlugin.configure({
inputRules: [
ItalicRules.markdown({ variant: '*' }),
ItalicRules.markdown({ variant: '_' }),
],
}),
UnderlinePlugin.configure({
inputRules: [UnderlineRules.markdown()],
}),
CodePlugin.configure({
component: CodeLeaf,
inputRules: [CodeRules.markdown()],
shortcuts: { toggle: { keys: 'mod+e' } },
}),
StrikethroughPlugin.configure({
inputRules: [StrikethroughRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+x' } },
}),
ScriptPlugin.configure({
inputRules: [
ScriptRules.markdown({ value: 'sub' }),
ScriptRules.markdown({ value: 'sup' }),
],
shortcuts: {
subscript: {
keys: 'mod+comma',
handler: ({ editor }) => {
editor.plugin(ScriptPlugin).update.toggle('sub');
},
},
superscript: {
keys: 'mod+period',
handler: ({ editor }) => {
editor.plugin(ScriptPlugin).update.toggle('sup');
},
},
},
}),
HighlightPlugin.configure({
component: HighlightLeaf,
inputRules: [
HighlightRules.markdown({ variant: '==' }),
HighlightRules.markdown({ variant: '≡' }),
],
shortcuts: { toggle: { keys: 'mod+shift+h' } },
}),
KbdPlugin.configure({ component: KbdLeaf }),
] as const;'use client';
import {
BoldRules,
CodeRules,
HighlightRules,
ItalicRules,
MarkComboRules,
ScriptRules,
StrikethroughRules,
UnderlineRules,
} from '@platejs/basic-nodes';
import {
BoldPlugin,
CodePlugin,
HighlightPlugin,
ItalicPlugin,
KbdPlugin,
ScriptPlugin,
StrikethroughPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
import { CodeLeaf } from '@/components/editor/code';
import { HighlightLeaf } from '@/components/editor/highlight';
import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/basic-marks';
export const editor = createPlateEditor({
plugins: [...BasicMarksKit],
});import { createPlateEditor } from 'platejs/react';
import { BasicMarksKit } from '@/components/editor/basic-marks';
export const editor = createPlateEditor({
Use MarkToolbarButton for direct mark toggles.
import { BoldPlugin } from '@platejs/basic-nodes/react';
import { BoldIcon } from 'lucide-react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function BoldToolbarButton() {
return (
<MarkToolbarButton plugin={BoldPlugin} tooltip="Bold (⌘+B)">
<BoldIcon />
</MarkToolbarButton>
);
}| Surface | Owner | What It Does |
|---|---|---|
BasicMarksKit | Registry | Configures the full mark set with input rules and client leaf components. |
BaseBasicMarksKit | Registry | Configures static/base mark plugins with static code, highlight, and kbd leaves. |
| Individual mark plugins | @platejs/basic-nodes | Own mark keys, HTML parsing, render tags, and toggle transforms. |
MarkToolbarButton | Registry UI | Reads mark state and calls the mark toolbar hook. |
The package exports each mark capability independently. The registry owns the editable and static mark presets.
| Mark | Plugin | Default property | Render | Notes |
|---|---|---|---|---|
| Bold | BoldPlugin | bold | strong | Deserializes strong, b, and bold font weight. |
| Italic | ItalicPlugin | italic | em | Deserializes em, i, and italic font style. |
| Underline | UnderlinePlugin | underline | u | Deserializes u and underline text decoration. |
| Strikethrough | StrikethroughPlugin | strikethrough | s | Uses directional selection affinity. |
| Code | CodePlugin | code | code | Uses hard selection affinity and skips pre HTML parents. |
| Script | ScriptPlugin | script | sub or sup | Uses one `'sub' |
| Highlight | HighlightPlugin | highlight | mark | Uses directional selection affinity. |
| Kbd | KbdPlugin | kbd | kbd | Uses hard selection affinity. |
PLUGINS.* identifies each capability. Reusable code reads its configured
text property from editor.plugin(Plugin).schema.key.
Boolean mark plugins expose editor.update.<mark>.toggle(). ScriptPlugin
exposes editor.update.script.toggle('sub' | 'sup').
BasicMarksKit registers input rules explicitly. The package plugins do not enable them by default.
| Rule Family | Kit Registration |
|---|---|
BoldRules.markdown | variant: '*' and variant: '_' |
ItalicRules.markdown | variant: '*' and variant: '_' |
UnderlineRules.markdown | Default underline rule |
CodeRules.markdown | Default inline code rule |
StrikethroughRules.markdown | Default strikethrough rule |
ScriptRules.markdown | value: 'sub' or value: 'sup' |
HighlightRules.markdown | variant: '==' and variant: '≡' |
MarkComboRules.markdown | Bold/italic/underline combinations |
See Plugin Input Rules for the runtime model.
Install the package when you want to compose marks yourself.
Add only the marks you need.
import {
BoldPlugin,
CodePlugin,
ItalicPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
export const markPlugins = [
BoldPlugin,
ItalicPlugin,
UnderlinePlugin,
CodePlugin,
];import {
BoldPlugin,
CodePlugin,
ItalicPlugin,
UnderlinePlugin,
} from '@platejs/basic-nodes/react';
export const markPlugins = [
BoldPlugin,
ItalicPlugin,
UnderlinePlugin,
CodePlugin,
];Use the individual pages for mark-specific setup and component details.
| API | Package | Use |
|---|---|---|
BasicMarksKit | Registry | Full client kit with highlight, kbd, input rules, and leaves. |
BaseBasicMarksKit | Registry | Static/base kit for server or static rendering. |
MarkToolbarButton | Registry UI | Toolbar control for one mark key. |
import { BoldPlugin } from '@platejs/basic-nodes/react';
import { BoldIcon } from 'lucide-react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function BoldToolbarButton() {
return (
<MarkToolbarButton plugin={BoldPlugin} tooltip="Bold (⌘+B)">
<BoldIcon />
</MarkToolbarButton>
);
}