0
# TipTap Extension Text Style
1

2
TipTap Extension Text Style is a comprehensive text styling system for the TipTap rich text editor framework. It provides modular styling capabilities including text color, background color, font family, font size, and line height through a mark-based system built on ProseMirror. The extension offers both individual styling extensions and a convenient bundle for complete text styling functionality.
3

4
## Package Information
5

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

11
## Core Imports
12

13
```typescript
14
import { 
15
  TextStyle, 
16
  Color, 
17
  BackgroundColor, 
18
  FontFamily, 
19
  FontSize, 
20
  LineHeight,
21
  TextStyleKit 
22
} from "@tiptap/extension-text-style";
23
```
24

25
Individual styling extensions can be imported separately:
26

27
```typescript
28
import { Color } from "@tiptap/extension-text-style/color";
29
import { BackgroundColor } from "@tiptap/extension-text-style/background-color";
30
import { FontFamily } from "@tiptap/extension-text-style/font-family";
31
import { FontSize } from "@tiptap/extension-text-style/font-size";
32
import { LineHeight } from "@tiptap/extension-text-style/line-height";
33
import { TextStyle } from "@tiptap/extension-text-style/text-style";
34
import { TextStyleKit } from "@tiptap/extension-text-style/text-style-kit";
35
```
36

37
## Basic Usage
38

39
```typescript
40
import { Editor } from "@tiptap/core";
41
import { TextStyleKit } from "@tiptap/extension-text-style";
42

43
// Use the complete text styling kit
44
const editor = new Editor({
45
  extensions: [
46
    TextStyleKit.configure({
47
      color: {},
48
      backgroundColor: {},
49
      fontFamily: {},
50
      fontSize: {},
51
      lineHeight: {}
52
    })
53
  ]
54
});
55

56
// Apply text styles using commands
57
editor.commands.setColor("#ff0000");
58
editor.commands.setBackgroundColor("#ffff00");
59
editor.commands.setFontFamily("Arial");
60
editor.commands.setFontSize("18px");
61
editor.commands.setLineHeight("1.5");
62

63
// Chain multiple styling operations
64
editor.chain()
65
  .setColor("#0066cc")
66
  .setFontSize("16px")
67
  .setFontFamily("Georgia")
68
  .run();
69
```
70

71
## Architecture
72

73
The extension is built around several key components:
74

75
- **TextStyle Mark**: Core ProseMirror mark that serves as the foundation for all text styling, handles HTML span parsing and rendering
76
- **Styling Extensions**: Individual extensions (Color, BackgroundColor, FontFamily, FontSize, LineHeight) that extend TextStyle with specific attributes
77
- **Command System**: TipTap command interface augmentation providing chainable styling operations
78
- **HTML Processing**: Robust parsing of existing HTML content with special handling for nested span elements
79
- **TextStyleKit**: Convenience bundle that configures all styling extensions together
80

81
## Global Types
82

83
```typescript { .api }
84
/**
85
 * Available text style attributes that can be applied to text
86
 */
87
interface TextStyleAttributes extends Record<string, any> {
88
  color?: string | null;
89
  backgroundColor?: string | null;
90
  fontFamily?: string | null;
91
  fontSize?: string | null;
92
  lineHeight?: string | null;
93
}
94
```
95

96
## Capabilities
97

98
### Core Text Style Mark
99

100
Foundation mark for all text styling operations, providing HTML span element handling and command integration.
101

102
```typescript { .api }
103
const TextStyle: Mark<TextStyleOptions>;
104

105
interface TextStyleOptions {
106
  HTMLAttributes: Record<string, any>;
107
  mergeNestedSpanStyles: boolean;
108
}
109
```
110

111
[Text Style Mark](./text-style.md)
112

113
### Text Color Styling
114

115
Apply and manage text color with robust HTML parsing and CSS style generation.
116

117
```typescript { .api }
118
const Color: Extension<ColorOptions>;
119

120
interface ColorOptions {
121
  types: string[];
122
}
123
```
124

125
[Color Styling](./color.md)
126

127
### Background Color Styling
128

129
Apply background colors to text with support for nested span style merging.
130

131
```typescript { .api }
132
const BackgroundColor: Extension<BackgroundColorOptions>;
133

134
interface BackgroundColorOptions {
135
  types: string[];
136
}
137
```
138

139
[Background Color](./background-color.md)
140

141
### Font Family Styling
142

143
Set custom font families on text selections with CSS font-family support.
144

145
```typescript { .api }
146
const FontFamily: Extension<FontFamilyOptions>;
147

148
interface FontFamilyOptions {
149
  types: string[];
150
}
151
```
152

153
[Font Family](./font-family.md)
154

155
### Font Size Styling
156

157
Control text font sizes with flexible CSS units support.
158

159
```typescript { .api }
160
const FontSize: Extension<FontSizeOptions>;
161

162
interface FontSizeOptions {
163
  types: string[];
164
}
165
```
166

167
[Font Size](./font-size.md)
168

169
### Line Height Styling
170

171
Adjust line spacing for improved text readability and layout control.
172

173
```typescript { .api }
174
const LineHeight: Extension<LineHeightOptions>;
175

176
interface LineHeightOptions {
177
  types: string[];
178
}
179
```
180

181
[Line Height](./line-height.md)
182

183
### Complete Styling Bundle
184

185
Convenient bundle extension that includes all text styling capabilities with individual configuration.
186

187
```typescript { .api }
188
const TextStyleKit: Extension<TextStyleKitOptions>;
189

190
interface TextStyleKitOptions {
191
  backgroundColor: Partial<BackgroundColorOptions> | false;
192
  color: Partial<ColorOptions> | false;
193
  fontFamily: Partial<FontFamilyOptions> | false;
194
  fontSize: Partial<FontSizeOptions> | false;
195
  lineHeight: Partial<LineHeightOptions> | false;
196
  textStyle: Partial<TextStyleOptions> | false;
197
}
198
```
199

200
[TextStyle Kit](./text-style-kit.md)