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.

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.

Vanilla JS/TS

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

Click to try it out

Angular

Click to try it out

Vanilla JS preview - Angular components produce the same output

React

Click to try it out

Vanilla JS preview - React components produce the same output

Headless

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:

Vanilla JS/TS

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

const editorEl = document.getElementById('editor')!;

// Toolbar
const toolbar = document.createElement('div');
toolbar.className = 'dm-toolbar';
toolbar.innerHTML = `<div class="dm-toolbar-group">
  <button class="dm-toolbar-button" data-mark="strike">${defaultIcons.textStrikethrough}</button>
</div>`;
editorEl.before(toolbar);

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

// Toggle strike on click
toolbar.addEventListener('click', (e) => {
  const btn = (e.target as Element).closest<HTMLButtonElement>('[data-mark]');
  if (btn) editor.chain().focus().toggleStrike().run();
});

Angular

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

editor.html

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

React

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

Headless

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.

Toolbar items

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