Strike

The Strike mark applies strikethrough formatting to text. It renders as <s> and parses <s>, <del>, <strike>, and CSS text-decoration: line-through. Included in StarterKit by default.

When to use

Use Strike when you need:

A standard <s> mark with Cmd+Shift+X and ~~markdown~~
Editorial review or change-log style striking to show removed content
Pasted content with explicit strikethrough to survive (parses <s>, <strike>, <del>, and CSS line-through)

Notes:

Strike renders <s> (no semantic meaning). For “this was deleted” semantics, consider a custom <del>-rendered extension with timestamps
For task-completion styling, prefer TaskItem’s checked state, which carries semantic data

Live Playground

Select text and apply strikethrough with buttons, keyboard shortcut (Cmd+Shift+S / Ctrl+Shift+S), or type ~~text~~ to trigger the input rule.

Themed
Headless

With the default theme enabled. Click the S toolbar button or use Cmd+Shift+S / Ctrl+Shift+S.

Click to try it out

Plain editor without the theme. The buttons above call toggleStrike(), setStrike(), and unsetStrike() directly.

Click to try it out

Usage

Strike is included in StarterKit, so it works out of the box. To use it standalone:

import { Document, Paragraph, Text, Strike } from '@domternal/core';
import { DomternalEditor, DomternalToolbar } from '@domternal/vanilla';
import '@domternal/theme';

const editorEl = document.getElementById('editor')!;
const toolbarEl = document.createElement('div');
editorEl.before(toolbarEl);

const dm = new DomternalEditor(editorEl, {
  extensions: [Document, Paragraph, Text, Strike],
  content: '<p>This is <s>struck-through</s> text.</p>',
});

new DomternalToolbar(toolbarEl, { editor: dm.editor });

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent, DomternalToolbarComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Strike } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent, DomternalToolbarComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, Strike];
  content = '<p>This is <s>struck-through</s> text.</p>';
}

@if (editor(); as ed) {
  <domternal-toolbar [editor]="ed" />
}
<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, Strike } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Strike]}
      content="<p>This is <s>struck-through</s> text.</p>"
    >
      <Domternal.Toolbar />
      <Domternal.Content />
    </Domternal>
  );
}

<script setup lang="ts">
import { Domternal } from '@domternal/vue';
import { Document, Paragraph, Text, Strike } from '@domternal/core';

const extensions = [Document, Paragraph, Text, Strike];
</script>

<template>
  <Domternal :extensions="extensions" content="<p>This is <s>struck-through</s> text.</p>">
    <Domternal.Toolbar />
    <Domternal.Content />
  </Domternal>
</template>

import { Editor, Document, Paragraph, Text, Strike } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Strike],
  content: '<p>This is <s>struck-through</s> text.</p>',
});

// Toggle strike programmatically
editor.chain().focus().toggleStrike().run();

To disable Strike in StarterKit:

StarterKit.configure({ strike: false })

Schema

Property	Value
ProseMirror name	`strike`
Type	Mark
HTML tag	`<s>`

Parsing rules

Strike parses from multiple HTML sources for maximum compatibility:

Source	Condition
`<s>`	Always
`<del>`	Always
`<strike>`	Always
CSS `text-decoration`	Value includes `line-through`

The <strike> tag is deprecated HTML but still supported for backwards compatibility. The text-decoration style check uses includes('line-through'), so compound values like line-through dotted are also matched.

Options

Option	Type	Default	Description
`HTMLAttributes`	`Record<string, unknown>`	`{}`	Custom HTML attributes added to the rendered `<s>` element

import { Strike } from '@domternal/core';

const CustomStrike = Strike.configure({
  HTMLAttributes: { class: 'my-strike' },
});

Commands

setStrike

Applies strikethrough formatting to the current selection.

editor.commands.setStrike();

unsetStrike

Removes strikethrough formatting from the current selection.

editor.commands.unsetStrike();

toggleStrike

Toggles strikethrough formatting on the current selection. Applies strikethrough if not active, removes it if active.

editor.commands.toggleStrike();

// With chaining
editor.chain().focus().toggleStrike().run();

Keyboard shortcuts

Key	Action
`Mod-Shift-S`	Toggle strikethrough (`toggleStrike`)

Mod is Cmd on macOS and Ctrl on Windows/Linux.

Input rules

Input	Result
`~~text~~`	Wraps text in strikethrough

Type the closing ~~ to trigger the conversion. The markers are removed and the text between them gets strikethrough formatting.

Strike registers a button in the toolbar with the name strike in group format at priority 170.

Item	Type	Command	Icon	Shortcut	Active when
Strikethrough	`button`	`toggleStrike`	`textStrikethrough`	`Mod-Shift-S`	Strike mark is active on selection

Exports

import { Strike } from '@domternal/core';
import type { StrikeOptions } from '@domternal/core';

Export	Type	Description
`Strike`	Mark extension	The strikethrough mark extension
`StrikeOptions`	TypeScript type	Options for `Strike.configure()`

Source

@domternal/core - Strike.ts