Strikethrough

Strike through inline text.

Basic Marks Mark Toolbar Button 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.

Loading…

Features

KEYS.strikethrough leaf mark.
Directional selection affinity.
HTML deserialization from s, del, strike, and line-through text decoration.
<s> 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.

'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  StrikethroughRules,
  SubscriptRules,
  SuperscriptRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  StrikethroughPlugin,
  SubscriptPlugin,
  SuperscriptPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/ui/code-node';
import { HighlightLeaf } from '@/components/ui/highlight-node';
import { KbdLeaf } from '@/components/ui/kbd-node';
 
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({
    inputRules: [CodeRules.markdown()],
    node: { component: CodeLeaf },
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  SubscriptPlugin.configure({
    inputRules: [SubscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+comma' } },
  }),
  SuperscriptPlugin.configure({
    inputRules: [SuperscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+period' } },
  }),
  HighlightPlugin.configure({
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    node: { component: HighlightLeaf },
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.withComponent(KbdLeaf),
];

'use client';
 
import {
  BoldRules,
  CodeRules,
  HighlightRules,
  ItalicRules,
  MarkComboRules,
  StrikethroughRules,
  SubscriptRules,
  SuperscriptRules,
  UnderlineRules,
} from '@platejs/basic-nodes';
import {
  BoldPlugin,
  CodePlugin,
  HighlightPlugin,
  ItalicPlugin,
  KbdPlugin,
  StrikethroughPlugin,
  SubscriptPlugin,
  SuperscriptPlugin,
  UnderlinePlugin,
} from '@platejs/basic-nodes/react';
 
import { CodeLeaf } from '@/components/ui/code-node';
import { HighlightLeaf } from '@/components/ui/highlight-node';
import { KbdLeaf } from '@/components/ui/kbd-node';
 
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({
    inputRules: [CodeRules.markdown()],
    node: { component: CodeLeaf },
    shortcuts: { toggle: { keys: 'mod+e' } },
  }),
  StrikethroughPlugin.configure({
    inputRules: [StrikethroughRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+x' } },
  }),
  SubscriptPlugin.configure({
    inputRules: [SubscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+comma' } },
  }),
  SuperscriptPlugin.configure({
    inputRules: [SuperscriptRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+period' } },
  }),
  HighlightPlugin.configure({
    inputRules: [
      HighlightRules.markdown({ variant: '==' }),
      HighlightRules.markdown({ variant: '≡' }),
    ],
    node: { component: HighlightLeaf },
    shortcuts: { toggle: { keys: 'mod+shift+h' } },
  }),
  KbdPlugin.withComponent(KbdLeaf),
];

import { createPlateEditor } from 'platejs/react';
 
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
 
export const editor = createPlateEditor({
  plugins: [...BasicMarksKit],
});

import { createPlateEditor } from 'platejs/react';
 
import { BasicMarksKit } from '@/components/editor/plugins/basic-marks-kit';
 
export const editor = createPlateEditor({
  plugins: [...BasicMarksKit],
});

Use MarkToolbarButton with KEYS.strikethrough.

import { StrikethroughIcon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function StrikethroughToolbarButton() {
  return (
    <MarkToolbarButton
      nodeType={KEYS.strikethrough}
      tooltip="Strikethrough"
    >
      <StrikethroughIcon />
    </MarkToolbarButton>
  );
}

import { StrikethroughIcon } from 'lucide-react';
import { KEYS } from 'platejs';
 
import { MarkToolbarButton } from '@/components/ui/mark-toolbar-button';
 
export function StrikethroughToolbarButton() {
  return (
    <MarkToolbarButton
      nodeType={KEYS.strikethrough}
      tooltip="Strikethrough"
    >
      <StrikethroughIcon />
    </MarkToolbarButton>
  );
}

Manual Usage

Install the mark package.

pnpm add @platejs/basic-nodes

pnpm add @platejs/basic-nodes

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' } },
});

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.

Keyboard Input Subscript

On This Page

Features Kit Usage Add Basic Marks Add A Toolbar Button Manual Usage Ownership Behavior API Reference

Build your editor

Production-ready AI template and reusable components.