4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1054,--- title: Strikethrough description: Strike through inline text. docs: - route: /docs/basic-marks title: Basic Marks - route: /docs/components/mark-toolbar-button title: Mark Toolbar Button - route: /docs/plugin-shortcuts title: Plugin Shortcuts --- Strikethrough applies the `strikethrough` leaf mark to selected text. The package owns the mark semantics; `BasicMarksKit` adds the Markdown-style input rule and shortcut. ## Features - `KEYS.strikethrough` leaf mark. - Directional selection affinity. - HTML deserialization from `s`, `del`, `strike`, and line-through text decoration. - `~~` rendering by default. - Optional Markdown-style input rule through `StrikethroughRules`. - Toolbar support through `MarkToolbarButton`.~~ ## Kit Usage ### Add Basic Marks `BasicMarksKit` includes `StrikethroughPlugin`, `~~` input rules, and a `mod+shift+x` shortcut. ```tsx import { createPlateEditor } from 'platejs/react'; import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit'; export const editor = createPlateEditor({ plugins: [...BasicMarksKit], }); ``` ### Add A Toolbar Button Use `MarkToolbarButton` with `KEYS.strikethrough`. ```tsx import { StrikethroughIcon } from 'lucide-react'; import { KEYS } from 'platejs'; import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button'; export function StrikethroughToolbarButton() { return ( ); } ``` ## Manual Usage Install the mark package. ```bash npm install @platejs/basic-nodes ``` Add `StrikethroughPlugin` directly when you want the default `` render. ```tsx 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. ```tsx 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' } }, }); ``` ## Ownership | 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 | Behavior | Source | |----------|--------| | Mark key | `KEYS.strikethrough` | | Leaf behavior | `node.isLeaf: true` | | Toggle transform | `editor.tf.strikethrough.toggle()` calls `editor.tf.toggleMark(type)`. | | 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 Reference | 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. | | `tf.strikethrough.toggle()` | `@platejs/basic-nodes` | Toggles the strikethrough mark at the selection. | 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/(plugins)/(marks)/strikethrough.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/(plugins)/(marks)/strikethrough.mdx"}],"className":"h-[70svh] min-h-80"}]]}]