0
# Tiptap Strike Extension
1

2
The Strike extension for tiptap provides strikethrough text formatting functionality. This extension allows users to apply, toggle, and remove strikethrough formatting in rich text editors, with keyboard shortcuts and automatic parsing of markdown-style strikethrough syntax.
3

4
## Package Information
5

6
- **Package Name**: @tiptap/extension-strike
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tiptap/extension-strike`
10

11
## Core Imports
12

13
```typescript
14
import { Strike } from "@tiptap/extension-strike";
15
```
16

17
For full imports:
18

19
```typescript
20
import { Strike, StrikeOptions, inputRegex, pasteRegex } from "@tiptap/extension-strike";
21
```
22

23
CommonJS:
24

25
```javascript
26
const { Strike } = require("@tiptap/extension-strike");
27
```
28

29
## Basic Usage
30

31
```typescript
32
import { Strike } from "@tiptap/extension-strike";
33
import { Editor } from "@tiptap/core";
34

35
// Register the extension
36
const editor = new Editor({
37
  extensions: [
38
    Strike,
39
    // ... other extensions
40
  ],
41
});
42

43
// Use commands programmatically
44
editor.commands.setStrike();      // Apply strikethrough
45
editor.commands.toggleStrike();   // Toggle strikethrough
46
editor.commands.unsetStrike();    // Remove strikethrough
47

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

52
## Capabilities
53

54
### Strike Extension Class
55

56
Creates a tiptap extension that provides strikethrough text formatting capabilities.
57

58
```typescript { .api }
59
/**
60
 * Strike extension for tiptap that adds strikethrough text formatting
61
 */
62
const Strike: Mark<StrikeOptions>;
63
```
64

65
### Extension Configuration
66

67
Configure the Strike extension with HTML attributes.
68

69
```typescript { .api }
70
interface StrikeOptions {
71
  /**
72
   * HTML attributes to add to the strike element.
73
   * @default {}
74
   * @example { class: 'custom-strike', 'data-testid': 'strike' }
75
   */
76
  HTMLAttributes: Record<string, any>;
77
}
78
```
79

80
### Strike Commands
81

82
The extension adds these commands to the editor's command interface:
83

84
```typescript { .api }
85
interface StrikeCommands {
86
  /**
87
   * Set a strike mark on the current selection
88
   * @example editor.commands.setStrike()
89
   */
90
  setStrike(): boolean;
91
  
92
  /**
93
   * Toggle a strike mark on the current selection
94
   * @example editor.commands.toggleStrike()
95
   */
96
  toggleStrike(): boolean;
97
  
98
  /**
99
   * Remove strike mark from the current selection
100
   * @example editor.commands.unsetStrike()
101
   */
102
  unsetStrike(): boolean;
103
}
104
```
105

106
### Input Pattern Matching
107

108
Regular expressions used for automatic strikethrough text parsing:
109

110
```typescript { .api }
111
/**
112
 * Matches strikethrough syntax on input: ~~text~~
113
 * Used to automatically convert typed markdown syntax to strike formatting
114
 */
115
const inputRegex: RegExp;
116

117
/**
118
 * Matches strikethrough syntax on paste: ~~text~~
119
 * Used to automatically convert pasted markdown syntax to strike formatting
120
 */
121
const pasteRegex: RegExp;
122
```
123

124
### Extension Methods
125

126
Core extension methods for HTML processing and behavior:
127

128
```typescript { .api }
129
interface StrikeExtension {
130
  /**
131
   * Returns default configuration options for the extension
132
   */
133
  addOptions(): StrikeOptions;
134
  
135
  /**
136
   * Defines how HTML elements are parsed into strike marks
137
   * Supports: <s>, <del>, <strike> tags and text-decoration: line-through
138
   */
139
  parseHTML(): Array<{
140
    tag?: string;
141
    style?: string;
142
    consuming?: boolean;
143
    getAttrs?: (value: string) => any;
144
  }>;
145
  
146
  /**
147
   * Defines how strike marks are rendered as HTML
148
   * Renders as <s> tag with merged attributes
149
   */
150
  renderHTML(props: { HTMLAttributes: Record<string, any> }): [string, Record<string, any>, number];
151
  
152
  /**
153
   * Adds strike-related commands to the editor
154
   */
155
  addCommands(): Record<string, () => (props: any) => boolean>;
156
  
157
  /**
158
   * Adds keyboard shortcuts for strike functionality
159
   * Registers Mod-Shift-s (Ctrl+Shift+s or Cmd+Shift+s) to toggle strike
160
   */
161
  addKeyboardShortcuts(): Record<string, () => boolean>;
162
  
163
  /**
164
   * Adds input rules for automatic markdown-style parsing
165
   * Converts ~~text~~ to strikethrough formatting while typing
166
   */
167
  addInputRules(): Array<any>;
168
  
169
  /**
170
   * Adds paste rules for automatic markdown-style parsing
171
   * Converts ~~text~~ to strikethrough formatting when pasting
172
   */
173
  addPasteRules(): Array<any>;
174
}
175
```
176

177
## Usage Examples
178

179
### Basic Setup
180

181
```typescript
182
import { Strike } from "@tiptap/extension-strike";
183
import { Editor } from "@tiptap/core";
184

185
const editor = new Editor({
186
  extensions: [
187
    Strike.configure({
188
      HTMLAttributes: {
189
        class: 'my-strike-class',
190
      },
191
    }),
192
  ],
193
  content: '<p>This is <s>strikethrough</s> text.</p>',
194
});
195
```
196

197
### Programmatic Control
198

199
```typescript
200
// Check if strike is active
201
const isActive = editor.isActive('strike');
202

203
// Apply strikethrough to current selection
204
if (!isActive) {
205
  editor.commands.setStrike();
206
}
207

208
// Toggle strikethrough
209
editor.commands.toggleStrike();
210

211
// Remove strikethrough
212
editor.commands.unsetStrike();
213
```
214

215
### HTML Output
216

217
The extension renders strikethrough text using the `<s>` HTML tag:
218

219
```html
220
<!-- Input: ~~strikethrough~~ -->
221
<p>This is <s>strikethrough</s> text.</p>
222

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

227
### Supported HTML Input
228

229
The extension recognizes these HTML elements as strikethrough:
230

231
- `<s>strikethrough</s>`
232
- `<del>strikethrough</del>`
233
- `<strike>strikethrough</strike>`
234
- `<span style="text-decoration: line-through">strikethrough</span>`
235

236
### Keyboard Shortcuts
237

238
- **Windows/Linux**: `Ctrl + Shift + S`
239
- **macOS**: `Cmd + Shift + S`
240

241
### Markdown-Style Input
242

243
Users can type `~~text~~` and it will automatically convert to strikethrough formatting, both when typing and when pasting content.