Docs Editor Model/Schema Cases Scenarios Tips Playground Coverage

formatStrikeThrough

How formatStrikeThrough inputType applies strikethrough formatting and varies across browsers.

Overview

The formatStrikeThrough inputType is triggered when the user applies strikethrough formatting (typically via context menu or programmatically). The browser wraps selected text in a <s> or <strike> element.

Basic Behavior

Scenario: Text selected within paragraph

Before (Text selected)

HTML:
<p>Hello world text</p>

After formatStrikeThrough (Chrome/Edge)

HTML:
<p>Hello <s>world</s> text</p>
Uses <s> element

After formatStrikeThrough (Firefox)

HTML:
<p>Hello <strike>world</strike> text</p>
Uses <strike> element (deprecated)

Browser-Specific Differences

Element Used for Strikethrough

Chrome/Edge

  • Uses <s> element

Firefox

  • Uses <strike> element (deprecated HTML)

IME Composition + formatStrikeThrough

⚠️ Critical Issue

During IME composition, formatStrikeThrough may not work as expected. On macOS with Korean IME, the event may not fire; insertCompositionText may fire instead.

See formatBold for detailed workarounds.

Editor-Specific Handling

Different editor frameworks handle strikethrough formatting similarly to other text formatting. Here's how major editors implement formatStrikeThrough:

Slate.js

Strikethrough Formatting

Slate uses Transforms.setNodes() to toggle strikethrough marks: 

    import { Editor, Transforms, Text } from 'slate';

function isStrikethroughActive(editor: Editor) {
  const marks = Editor.marks(editor);
  return marks?.strikethrough === true;
}

function handleFormatStrikethrough(editor: Editor) {
  const isActive = isStrikethroughActive(editor);
  Transforms.setNodes(
    editor,
    { strikethrough: !isActive },
    { match: n => Text.isText(n), split: true }
  );
}

element.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'formatStrikeThrough') {
    e.preventDefault();
    handleFormatStrikethrough(editor);
  }
});
  • Mark-based: Formatting stored as { strikethrough: true } on text nodes.
  • Same pattern: Uses identical Transforms API as other formatting marks.
ProseMirror

Strikethrough Formatting

ProseMirror uses toggleMark with strikethrough mark: 

    import { toggleMark } from 'prosemirror-commands';
import { schema } from './schema';

function handleFormatStrikethrough(state, dispatch) {
  return toggleMark(schema.marks.strikethrough)(state, dispatch);
}

view.dom.addEventListener('beforeinput', (e) => {
  if (e.inputType === 'formatStrikeThrough') {
    e.preventDefault();
    const { state, dispatch } = view;
    if (handleFormatStrikethrough(state, dispatch)) {
      // Handled
    }
  }
});
  • Mark system: Uses schema.marks.strikethrough mark type.
  • Same command: Uses toggleMark() like other formatting.
Draft.js

Strikethrough Formatting

Draft.js uses RichUtils.toggleInlineStyle() with STRIKETHROUGH: 

    import { EditorState, RichUtils } from 'draft-js';

function handleFormatStrikethrough(editorState) {
  return RichUtils.toggleInlineStyle(editorState, 'STRIKETHROUGH');
}

function handleKeyCommand(command) {
  if (command === 'strikethrough') {
    const newState = handleFormatStrikethrough(editorState);
    setEditorState(newState);
    return 'handled';
  }
  return 'not-handled';
}
  • Inline style: Uses 'STRIKETHROUGH' style string.
  • Same utility: Uses RichUtils.toggleInlineStyle like other formatting.

Related resources