Strikethrough applies the strikethrough leaf mark to selected text. The package owns the mark semantics; BasicMarksKit adds the Markdown-style input rule and shortcut.
strikethrough leaf property owned by the PLUGINS.strikethrough capability.s, del, strike, and line-through text decoration.<s> rendering by default.StrikethroughRules.MarkToolbarButton.BasicMarksKit includes StrikethroughPlugin, ~~ input rules, and a mod+shift+x shortcut.
'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 StrikethroughPlugin to MarkToolbarButton so the button uses the configured mark key.
import { StrikethroughIcon } from 'lucide-react';
import { StrikethroughPlugin } from '@platejs/basic-nodes/react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function StrikethroughToolbarButton() {
return (
<MarkToolbarButton
plugin={StrikethroughPlugin}
tooltip="Strikethrough"
>
<StrikethroughIcon />
</MarkToolbarButton>
);
}Install the mark package.
Add StrikethroughPlugin directly when you want the default <s> render.
import { StrikethroughPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [StrikethroughPlugin],
});import { StrikethroughPlugin } from '@platejs/basic-nodes/react';
import { createPlateEditor } from 'platejs/react';
export const editor = createPlateEditor({
plugins: [StrikethroughPlugin],
});Configure the input rule and shortcut when you want the same behavior as the kit.
import { StrikethroughRules } from '@platejs/basic-nodes';
import { StrikethroughPlugin } from '@platejs/basic-nodes/react';
export const strikethroughPlugin = StrikethroughPlugin.configure({
inputRules: [StrikethroughRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+x' } },
});import { StrikethroughRules } from '@platejs/basic-nodes';
import { StrikethroughPlugin } from '@platejs/basic-nodes/react';
export const strikethroughPlugin = StrikethroughPlugin.configure({
inputRules: [StrikethroughRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+x' } },
});| Surface | Owner | What It Does |
|---|---|---|
BaseStrikethroughPlugin | @platejs/basic-nodes | Headless strikethrough mark, HTML parser, render tag, selection rule, and toggle transform. |
StrikethroughPlugin | @platejs/basic-nodes/react | React wrapper for the headless strikethrough mark. |
StrikethroughRules.markdown | @platejs/basic-nodes | Optional ~~ mark input rule factory. |
BasicMarksKit | Registry | Adds StrikethroughPlugin, the input rule, and mod+shift+x. |
MarkToolbarButton | Registry UI | Reads active mark state and calls the mark toggle hook. |
The package owns the mark. The registry owns shortcut configuration and toolbar placement.
| Behavior | Source |
|---|---|
| Mark key | editor.plugin(StrikethroughPlugin).schema.key (default: strikethrough) |
| Mark declaration | schema.mark: property.boolean({ default: false, omitDefault: true }) |
| Toggle command | tx.strikethrough.toggle() toggles the resolved schema key. |
| Selection affinity | directional |
| HTML tags | s, del, strike |
| HTML styles | text-decoration: line-through |
| HTML guard | Ignores descendants where textDecoration is none. |
| Render output | s |
| Kit input rule | StrikethroughRules.markdown() |
| Kit shortcut | mod+shift+x |
| API | Package | Use |
|---|---|---|
BaseStrikethroughPlugin | @platejs/basic-nodes | Headless strikethrough plugin. |
StrikethroughPlugin | @platejs/basic-nodes/react | React strikethrough plugin. |
StrikethroughRules.markdown() | @platejs/basic-nodes | Creates the ~~ mark input rule. |
tx.strikethrough.toggle() | @platejs/basic-nodes | Toggles the strikethrough mark at the selection. |
import { StrikethroughIcon } from 'lucide-react';
import { StrikethroughPlugin } from '@platejs/basic-nodes/react';
import { MarkToolbarButton } from '@/components/editor/mark-toolbar-button';
export function StrikethroughToolbarButton() {
return (
<MarkToolbarButton
plugin={StrikethroughPlugin}
tooltip="Strikethrough"
>
<StrikethroughIcon />
</MarkToolbarButton>
);
}