0
# TipTap Extension Superscript
1

2
The TipTap Extension Superscript provides superscript text formatting functionality for TipTap editors. It creates a mark extension that allows users to format text as superscript with keyboard shortcuts, HTML parsing, and programmatic commands.
3

4
## Package Information
5

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

11
## Core Imports
12

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

17
For default import:
18

19
```typescript
20
import Superscript from "@tiptap/extension-superscript";
21
```
22

23
For CommonJS:
24

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

29
## Basic Usage
30

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

35
// Add to editor extensions
36
const editor = new Editor({
37
  extensions: [
38
    Superscript.configure({
39
      HTMLAttributes: {
40
        class: 'my-superscript-class',
41
      },
42
    }),
43
  ],
44
  content: '<p>E=mc<sup>2</sup></p>',
45
});
46

47
// Use commands programmatically
48
editor.commands.setSuperscript();
49
editor.commands.toggleSuperscript();
50
editor.commands.unsetSuperscript();
51

52
// Use keyboard shortcut: Cmd/Ctrl + .
53
```
54

55
## Capabilities
56

57
### Superscript Mark Extension
58

59
Creates a TipTap mark extension for superscript text formatting.
60

61
```typescript { .api }
62
/**
63
 * Superscript mark extension for TipTap editors
64
 * Extends Mark.create with SuperscriptExtensionOptions
65
 */
66
const Superscript: Mark<SuperscriptExtensionOptions>;
67
```
68

69
### Extension Configuration
70

71
Configure the superscript extension with HTML attributes and other options.
72

73
```typescript { .api }
74
/**
75
 * Configuration options for the Superscript extension
76
 */
77
interface SuperscriptExtensionOptions {
78
  /**
79
   * HTML attributes to add to the superscript element
80
   * @default {}
81
   * @example { class: 'foo' }
82
   */
83
  HTMLAttributes: Record<string, any>;
84
}
85
```
86

87
### Editor Commands
88

89
The extension adds three commands to the TipTap editor's command interface.
90

91
```typescript { .api }
92
/**
93
 * Set a superscript mark on the current selection
94
 * @returns Command execution result
95
 * @example editor.commands.setSuperscript()
96
 */
97
setSuperscript(): boolean;
98

99
/**
100
 * Toggle a superscript mark on the current selection
101
 * @returns Command execution result  
102
 * @example editor.commands.toggleSuperscript()
103
 */
104
toggleSuperscript(): boolean;
105

106
/**
107
 * Unset/remove a superscript mark from the current selection
108
 * @returns Command execution result
109
 * @example editor.commands.unsetSuperscript()
110
 */
111
unsetSuperscript(): boolean;
112
```
113

114
### HTML Parsing
115

116
The extension automatically parses HTML content containing superscript formatting.
117

118
**Supported HTML Elements:**
119
- `<sup>` tags - Standard HTML superscript elements
120
- Elements with `vertical-align: super` CSS style
121

122
**HTML Rendering:**
123
- Renders superscript marks as `<sup>` elements
124
- Merges configured HTMLAttributes with element attributes
125

126
### Keyboard Shortcuts
127

128
**Default Shortcut:**
129
- `Cmd + .` (Mac) / `Ctrl + .` (Windows/Linux) - Toggles superscript formatting
130

131
## Usage Examples
132

133
### Basic Superscript
134

135
```typescript
136
import { Editor } from "@tiptap/core";
137
import { Superscript } from "@tiptap/extension-superscript";
138

139
const editor = new Editor({
140
  extensions: [Superscript],
141
  content: '<p>Water is H<sub>2</sub>O and E=mc<sup>2</sup></p>',
142
});
143

144
// Toggle superscript on selected text
145
editor.commands.toggleSuperscript();
146
```
147

148
### Custom HTML Attributes
149

150
```typescript
151
const editor = new Editor({
152
  extensions: [
153
    Superscript.configure({
154
      HTMLAttributes: {
155
        class: 'custom-superscript',
156
        'data-type': 'superscript',
157
      },
158
    }),
159
  ],
160
});
161
```
162

163
### Programmatic Text Formatting
164

165
```typescript
166
// Select text and apply superscript
167
editor
168
  .chain()
169
  .focus()
170
  .setTextSelection({ from: 1, to: 5 })
171
  .setSuperscript()
172
  .run();
173

174
// Remove superscript from selection
175
editor
176
  .chain()
177
  .focus()
178
  .setTextSelection({ from: 1, to: 5 })
179
  .unsetSuperscript()
180
  .run();
181
```
182

183
## Types
184

185
```typescript { .api }
186
/**
187
 * Configuration options interface for the Superscript extension
188
 */
189
interface SuperscriptExtensionOptions {
190
  /**
191
   * HTML attributes to add to the superscript element
192
   * @default {}
193
   */
194
  HTMLAttributes: Record<string, any>;
195
}
196

197
/**
198
 * Superscript mark extension instance
199
 * Created using Mark.create<SuperscriptExtensionOptions>
200
 */
201
declare const Superscript: Mark<SuperscriptExtensionOptions>;
202
```