0
# TextStyle Kit
1

2
The TextStyleKit is a convenience extension that bundles all text styling extensions together, providing a simple way to add comprehensive text styling capabilities to a TipTap editor.
3

4
## Capabilities
5

6
### TextStyleKit Extension
7

8
Bundle extension that includes all text styling extensions (TextStyle, Color, BackgroundColor, FontFamily, FontSize, LineHeight) with individual configuration options.
9

10
```typescript { .api }
11
/**
12
 * Bundle extension containing all text styling capabilities
13
 * Automatically configures and includes all styling extensions
14
 */
15
const TextStyleKit: Extension<TextStyleKitOptions>;
16

17
interface TextStyleKitOptions {
18
  /** BackgroundColor extension config or false to disable */
19
  backgroundColor: Partial<BackgroundColorOptions> | false;
20
  /** Color extension config or false to disable */
21
  color: Partial<ColorOptions> | false;
22
  /** FontFamily extension config or false to disable */
23
  fontFamily: Partial<FontFamilyOptions> | false;
24
  /** FontSize extension config or false to disable */
25
  fontSize: Partial<FontSizeOptions> | false;
26
  /** LineHeight extension config or false to disable */
27
  lineHeight: Partial<LineHeightOptions> | false;
28
  /** TextStyle mark config or false to disable (not recommended) */
29
  textStyle: Partial<TextStyleOptions> | false;
30
}
31
```
32

33
**Usage Example:**
34

35
```typescript
36
import { Editor } from "@tiptap/core";
37
import { TextStyleKit } from "@tiptap/extension-text-style/text-style-kit";
38

39
const editor = new Editor({
40
  extensions: [
41
    TextStyleKit.configure({
42
      // All extensions enabled with default options
43
      backgroundColor: {},
44
      color: {},
45
      fontFamily: {},
46
      fontSize: {},
47
      lineHeight: {},
48
      textStyle: {}
49
    })
50
  ]
51
});
52
```
53

54
## Configuration Examples
55

56
### Complete Text Styling Setup
57

58
Enable all text styling capabilities with default settings:
59

60
```typescript
61
import { TextStyleKit } from "@tiptap/extension-text-style/text-style-kit";
62

63
const editor = new Editor({
64
  extensions: [
65
    TextStyleKit.configure({
66
      backgroundColor: {},
67
      color: {},
68
      fontFamily: {},
69
      fontSize: {},
70
      lineHeight: {},
71
      textStyle: {}
72
    })
73
  ]
74
});
75

76
// All commands are now available
77
editor.commands.setColor("#ff0000");
78
editor.commands.setBackgroundColor("#ffff00");
79
editor.commands.setFontFamily("Arial");
80
editor.commands.setFontSize("18px");
81
editor.commands.setLineHeight("1.5");
82
```
83

84
### Partial Configuration
85

86
Enable only specific styling capabilities:
87

88
```typescript
89
const editor = new Editor({
90
  extensions: [
91
    TextStyleKit.configure({
92
      // Enable only color and font styling
93
      color: {},
94
      fontFamily: {},
95
      fontSize: {},
96
      textStyle: {}, // Always include for foundation
97
      
98
      // Disable background and line height
99
      backgroundColor: false,
100
      lineHeight: false
101
    })
102
  ]
103
});
104

105
// Only color, font family, and font size commands available
106
editor.commands.setColor("#0066cc");
107
editor.commands.setFontFamily("Georgia");
108
editor.commands.setFontSize("16px");
109

110
// These commands would not be available:
111
// editor.commands.setBackgroundColor(); // Not available
112
// editor.commands.setLineHeight();      // Not available
113
```
114

115
### Custom Extension Configuration
116

117
Configure individual extensions with custom options:
118

119
```typescript
120
const editor = new Editor({
121
  extensions: [
122
    TextStyleKit.configure({
123
      // Configure color for headings and paragraphs
124
      color: {
125
        types: ['textStyle', 'heading', 'paragraph']
126
      },
127
      
128
      // Configure background color for textStyle only
129
      backgroundColor: {
130
        types: ['textStyle']
131
      },
132
      
133
      // Standard font configuration
134
      fontFamily: {},
135
      fontSize: {},
136
      lineHeight: {},
137
      
138
      // TextStyle with custom HTML attributes
139
      textStyle: {
140
        HTMLAttributes: {
141
          class: 'custom-text-style'
142
        },
143
        mergeNestedSpanStyles: true
144
      }
145
    })
146
  ]
147
});
148
```
149

150
### Minimal Configuration
151

152
For basic text styling needs:
153

154
```typescript
155
const editor = new Editor({
156
  extensions: [
157
    TextStyleKit.configure({
158
      // Just color and basic styling
159
      color: {},
160
      textStyle: {},
161
      
162
      // Disable other features
163
      backgroundColor: false,
164
      fontFamily: false,
165
      fontSize: false,
166
      lineHeight: false
167
    })
168
  ]
169
});
170
```
171

172
## Available Commands
173

174
When TextStyleKit is configured, all enabled extension commands become available:
175

176
### Color Commands (if enabled)
177
```typescript
178
editor.commands.setColor(color: string);
179
editor.commands.unsetColor();
180
```
181

182
### Background Color Commands (if enabled)
183
```typescript
184
editor.commands.setBackgroundColor(backgroundColor: string);
185
editor.commands.unsetBackgroundColor();
186
```
187

188
### Font Family Commands (if enabled)
189
```typescript
190
editor.commands.setFontFamily(fontFamily: string);
191
editor.commands.unsetFontFamily();
192
```
193

194
### Font Size Commands (if enabled)
195
```typescript
196
editor.commands.setFontSize(fontSize: string);
197
editor.commands.unsetFontSize();
198
```
199

200
### Line Height Commands (if enabled)
201
```typescript
202
editor.commands.setLineHeight(lineHeight: string);
203
editor.commands.unsetLineHeight();
204
```
205

206
### TextStyle Commands (if enabled)
207
```typescript
208
editor.commands.toggleTextStyle(attributes?: TextStyleAttributes);
209
editor.commands.removeEmptyTextStyle();
210
```
211

212
## Chaining Operations
213

214
All enabled commands can be chained together:
215

216
```typescript
217
// Apply multiple styles at once
218
editor.chain()
219
  .setColor("#333333")
220
  .setBackgroundColor("#f5f5f5")
221
  .setFontFamily("Georgia")
222
  .setFontSize("18px") 
223
  .setLineHeight("1.6")
224
  .run();
225

226
// Remove all styling
227
editor.chain()
228
  .unsetColor()
229
  .unsetBackgroundColor()
230
  .unsetFontFamily()
231
  .unsetFontSize()
232
  .unsetLineHeight()
233
  .removeEmptyTextStyle()
234
  .run();
235
```
236

237
## Bundle Architecture
238

239
The TextStyleKit works by:
240

241
1. **Extension Registration**: Conditionally registers each styling extension based on configuration
242
2. **Option Forwarding**: Passes configuration options to individual extensions
243
3. **Dependency Management**: Automatically includes TextStyle mark when any styling extension is enabled
244
4. **Command Aggregation**: Makes all enabled extension commands available through the editor
245

246
## vs Individual Extension Imports
247

248
### Using TextStyleKit (Recommended)
249
```typescript
250
import { TextStyleKit } from "@tiptap/extension-text-style/text-style-kit";
251

252
const editor = new Editor({
253
  extensions: [
254
    TextStyleKit.configure({
255
      color: {},
256
      fontFamily: {},
257
      fontSize: {}
258
    })
259
  ]
260
});
261
```
262

263
### Using Individual Extensions
264
```typescript
265
import { TextStyle } from "@tiptap/extension-text-style/text-style";
266
import { Color } from "@tiptap/extension-text-style/color";
267
import { FontFamily } from "@tiptap/extension-text-style/font-family";
268
import { FontSize } from "@tiptap/extension-text-style/font-size";
269

270
const editor = new Editor({
271
  extensions: [
272
    TextStyle,
273
    Color,
274
    FontFamily,
275
    FontSize
276
  ]
277
});
278
```
279

280
Both approaches are equivalent, but TextStyleKit provides more convenient configuration and ensures proper dependencies are included.