Tiptap Strike Extension

import { Strike } from "@tiptap/extension-strike";

import { Strike, StrikeOptions, inputRegex, pasteRegex } from "@tiptap/extension-strike";

const { Strike } = require("@tiptap/extension-strike");

import { Strike } from "@tiptap/extension-strike";
import { Editor } from "@tiptap/core";

// Register the extension
const editor = new Editor({
  extensions: [
    Strike,
    // ... other extensions
  ],
});

// Use commands programmatically
editor.commands.setStrike();      // Apply strikethrough
editor.commands.toggleStrike();   // Toggle strikethrough
editor.commands.unsetStrike();    // Remove strikethrough

// Use keyboard shortcut: Mod-Shift-s (Ctrl+Shift+s or Cmd+Shift+s)
// Type markdown syntax: ~~strikethrough text~~

/**
 * Strike extension for tiptap that adds strikethrough text formatting
 */
const Strike: Mark<StrikeOptions>;

interface StrikeOptions {
  /**
   * HTML attributes to add to the strike element.
   * @default {}
   * @example { class: 'custom-strike', 'data-testid': 'strike' }
   */
  HTMLAttributes: Record<string, any>;
}

interface StrikeCommands {
  /**
   * Set a strike mark on the current selection
   * @example editor.commands.setStrike()
   */
  setStrike(): boolean;
  
  /**
   * Toggle a strike mark on the current selection
   * @example editor.commands.toggleStrike()
   */
  toggleStrike(): boolean;
  
  /**
   * Remove strike mark from the current selection
   * @example editor.commands.unsetStrike()
   */
  unsetStrike(): boolean;
}

/**
 * Matches strikethrough syntax on input: ~~text~~
 * Used to automatically convert typed markdown syntax to strike formatting
 */
const inputRegex: RegExp;

/**
 * Matches strikethrough syntax on paste: ~~text~~
 * Used to automatically convert pasted markdown syntax to strike formatting
 */
const pasteRegex: RegExp;

interface StrikeExtension {
  /**
   * Returns default configuration options for the extension
   */
  addOptions(): StrikeOptions;
  
  /**
   * Defines how HTML elements are parsed into strike marks
   * Supports: <s>, <del>, <strike> tags and text-decoration: line-through
   */
  parseHTML(): Array<{
    tag?: string;
    style?: string;
    consuming?: boolean;
    getAttrs?: (value: string) => any;
  }>;
  
  /**
   * Defines how strike marks are rendered as HTML
   * Renders as <s> tag with merged attributes
   */
  renderHTML(props: { HTMLAttributes: Record<string, any> }): [string, Record<string, any>, number];
  
  /**
   * Adds strike-related commands to the editor
   */
  addCommands(): Record<string, () => (props: any) => boolean>;
  
  /**
   * Adds keyboard shortcuts for strike functionality
   * Registers Mod-Shift-s (Ctrl+Shift+s or Cmd+Shift+s) to toggle strike
   */
  addKeyboardShortcuts(): Record<string, () => boolean>;
  
  /**
   * Adds input rules for automatic markdown-style parsing
   * Converts ~~text~~ to strikethrough formatting while typing
   */
  addInputRules(): Array<any>;
  
  /**
   * Adds paste rules for automatic markdown-style parsing
   * Converts ~~text~~ to strikethrough formatting when pasting
   */
  addPasteRules(): Array<any>;
}

import { Strike } from "@tiptap/extension-strike";
import { Editor } from "@tiptap/core";

const editor = new Editor({
  extensions: [
    Strike.configure({
      HTMLAttributes: {
        class: 'my-strike-class',
      },
    }),
  ],
  content: '<p>This is <s>strikethrough</s> text.</p>',
});

// Check if strike is active
const isActive = editor.isActive('strike');

// Apply strikethrough to current selection
if (!isActive) {
  editor.commands.setStrike();
}

// Toggle strikethrough
editor.commands.toggleStrike();

// Remove strikethrough
editor.commands.unsetStrike();

<!-- Input: ~~strikethrough~~ -->
<p>This is <s>strikethrough</s> text.</p>

<!-- With custom HTMLAttributes -->
<p>This is <s class="my-strike-class">strikethrough</s> text.</p>