Bold applies the bold leaf mark to selected text. BoldPlugin owns the mark key, shortcut, HTML parsing, render tag, and toggle transform.
BasicMarksKit includes BoldPlugin, bold input rules, and the standard toolbar buttons that use the plugin descriptor.
'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({
Pass BoldPlugin to MarkToolbarButton so the button uses the configured mark key.
import { BoldIcon } from 'lucide-react';
import { BoldPlugin } from '@platejs/basic-nodes/react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function BoldToolbarButton() {
return (
<MarkToolbarButton plugin={BoldPlugin} tooltip="Bold (⌘+B)">
<BoldIcon />
</MarkToolbarButton>
);
}Install the mark package.
Add BoldPlugin directly when you do not want the whole kit.
import { BoldPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [BoldPlugin],
});import { BoldPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [BoldPlugin],
});Register Markdown-style input rules when users should type bold delimiters.
import { BoldRules } from '@platejs/basic-nodes';
import { BoldPlugin } from '@platejs/basic-nodes/react';
export const boldPlugin = BoldPlugin.configure({
inputRules: [
BoldRules.markdown({ variant: '*' }),
BoldRules.markdown({ variant: '_' }),
],
});import { BoldRules } from '@platejs/basic-nodes';
import { BoldPlugin } from '@platejs/basic-nodes/react';
export const boldPlugin = BoldPlugin.configure({
inputRules: [
BoldRules.markdown({ variant: '*' }),
BoldRules.markdown({ variant: '_' }),
],
});| Surface | Owner | What It Does |
|---|---|---|
BaseBoldPlugin | @platejs/basic-nodes | Headless bold mark, HTML parser, render tag, and toggle transform. |
BoldPlugin | @platejs/basic-nodes/react | React wrapper with default mod+b shortcut. |
BoldRules.markdown | @platejs/basic-nodes | Optional mark input rule factory. |
BasicMarksKit | Registry | Adds BoldPlugin with * and _ Markdown-style input rules. |
MarkToolbarButton | Registry UI | Reads active mark state and calls the mark toggle hook. |
The package owns the mark. The registry owns toolbar placement and icon choice.
| Behavior | Source |
|---|---|
| Mark key | editor.plugin(BoldPlugin).schema.key (default: bold) |
| Mark declaration | schema.mark: property.boolean({ default: false, omitDefault: true }) |
| Toggle command | tx.bold.toggle() toggles the resolved schema key. |
| Shortcut | BoldPlugin registers mod+b. |
| HTML tags | strong, b |
| HTML styles | font-weight: 600, 700, or bold |
| HTML guard | Ignores descendants where fontWeight is normal. |
| Render output | strong |
| API | Package | Use |
|---|---|---|
BaseBoldPlugin | @platejs/basic-nodes | Headless bold plugin. |
BoldPlugin | @platejs/basic-nodes/react | React bold plugin with shortcut defaults. |
BoldRules.markdown(options) | @platejs/basic-nodes | Creates a bold mark input rule. |
tx.bold.toggle() | @platejs/basic-nodes | Toggles the bold mark at the selection. |
import { BoldIcon } from 'lucide-react';
import { BoldPlugin } from '@platejs/basic-nodes/react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function BoldToolbarButton() {
return (
<MarkToolbarButton plugin={BoldPlugin} tooltip="Bold (⌘+B)">
<BoldIcon />
</MarkToolbarButton>
);
}