0
# Text Formatting Controls
1
2
Pre-built controls for basic text styling including bold, italic, underline, strikethrough, and formatting removal. These controls provide immediate visual feedback and keyboard shortcut support.
3
4
## Capabilities
5
6
### Bold Control
7
8
Toggles bold formatting for selected text or at cursor position.
9
10
```typescript { .api }
11
/**
12
* Bold text formatting control
13
* Keyboard shortcut: Ctrl/Cmd + B
14
*/
15
RichTextEditor.Bold: React.ComponentType;
16
```
17
18
**Usage Example:**
19
20
```typescript
21
<RichTextEditor.ControlsGroup>
22
<RichTextEditor.Bold />
23
</RichTextEditor.ControlsGroup>
24
```
25
26
### Italic Control
27
28
Toggles italic formatting for selected text or at cursor position.
29
30
```typescript { .api }
31
/**
32
* Italic text formatting control
33
* Keyboard shortcut: Ctrl/Cmd + I
34
*/
35
RichTextEditor.Italic: React.ComponentType;
36
```
37
38
**Usage Example:**
39
40
```typescript
41
<RichTextEditor.ControlsGroup>
42
<RichTextEditor.Italic />
43
</RichTextEditor.ControlsGroup>
44
```
45
46
### Underline Control
47
48
Toggles underline formatting for selected text or at cursor position.
49
50
```typescript { .api }
51
/**
52
* Underline text formatting control
53
* Keyboard shortcut: Ctrl/Cmd + U
54
*/
55
RichTextEditor.Underline: React.ComponentType;
56
```
57
58
**Usage Example:**
59
60
```typescript
61
<RichTextEditor.ControlsGroup>
62
<RichTextEditor.Underline />
63
</RichTextEditor.ControlsGroup>
64
```
65
66
### Strikethrough Control
67
68
Toggles strikethrough formatting for selected text or at cursor position.
69
70
```typescript { .api }
71
/**
72
* Strikethrough text formatting control
73
* Keyboard shortcut: Ctrl/Cmd + Shift + S
74
*/
75
RichTextEditor.Strikethrough: React.ComponentType;
76
```
77
78
**Usage Example:**
79
80
```typescript
81
<RichTextEditor.ControlsGroup>
82
<RichTextEditor.Strikethrough />
83
</RichTextEditor.ControlsGroup>
84
```
85
86
### Clear Formatting Control
87
88
Removes all text formatting from selected text, reverting to plain text.
89
90
```typescript { .api }
91
/**
92
* Clear all text formatting control
93
* Removes bold, italic, underline, strikethrough, colors, and other formatting
94
*/
95
RichTextEditor.ClearFormatting: React.ComponentType;
96
```
97
98
**Usage Example:**
99
100
```typescript
101
<RichTextEditor.ControlsGroup>
102
<RichTextEditor.Bold />
103
<RichTextEditor.Italic />
104
<RichTextEditor.Underline />
105
<RichTextEditor.Strikethrough />
106
<RichTextEditor.ClearFormatting />
107
</RichTextEditor.ControlsGroup>
108
```
109
110
## Complete Text Formatting Example
111
112
```typescript
113
import { useEditor } from "@tiptap/react";
114
import StarterKit from "@tiptap/starter-kit";
115
import Underline from "@tiptap/extension-underline";
116
import { RichTextEditor } from "@mantine/tiptap";
117
118
function TextFormattingEditor() {
119
const editor = useEditor({
120
extensions: [
121
StarterKit,
122
Underline, // Required for underline functionality
123
],
124
content: "<p>Select this text and use formatting controls!</p>",
125
});
126
127
return (
128
<RichTextEditor editor={editor}>
129
<RichTextEditor.Toolbar sticky stickyOffset={60}>
130
{/* Text formatting controls group */}
131
<RichTextEditor.ControlsGroup>
132
<RichTextEditor.Bold />
133
<RichTextEditor.Italic />
134
<RichTextEditor.Underline />
135
<RichTextEditor.Strikethrough />
136
<RichTextEditor.ClearFormatting />
137
</RichTextEditor.ControlsGroup>
138
</RichTextEditor.Toolbar>
139
140
<RichTextEditor.Content />
141
</RichTextEditor>
142
);
143
}
144
```
145
146
## Control Behavior
147
148
### Active States
149
150
All text formatting controls automatically show their active state:
151
152
- **Bold**: Active when cursor is in bold text or bold text is selected
153
- **Italic**: Active when cursor is in italic text or italic text is selected
154
- **Underline**: Active when cursor is in underlined text or underlined text is selected
155
- **Strikethrough**: Active when cursor is in strikethrough text or strikethrough text is selected
156
157
### Keyboard Shortcuts
158
159
Text formatting controls support standard keyboard shortcuts:
160
161
- **Bold**: `Ctrl/Cmd + B`
162
- **Italic**: `Ctrl/Cmd + I`
163
- **Underline**: `Ctrl/Cmd + U`
164
- **Strikethrough**: `Ctrl/Cmd + Shift + S`
165
166
### Accessibility
167
168
All controls include proper accessibility features:
169
170
- **ARIA Labels**: Each control has descriptive aria-label attributes
171
- **Keyboard Navigation**: Controls are focusable and operable via keyboard
172
- **Screen Reader Support**: Active states are announced to screen readers
173
- **High Contrast**: Controls maintain visibility in high contrast modes
174
175
### Required Extensions
176
177
Some formatting options require specific Tiptap extensions:
178
179
- **Bold, Italic, Strikethrough**: Included in `@tiptap/starter-kit`
180
- **Underline**: Requires `@tiptap/extension-underline`
181
- **Clear Formatting**: Works with any installed text formatting extensions
182
183
## Customization
184
185
### Custom Labels
186
187
Override default accessibility labels for internationalization:
188
189
```typescript
190
<RichTextEditor
191
editor={editor}
192
labels={{
193
boldControlLabel: "Bold (Ctrl+B)",
194
italicControlLabel: "Italic (Ctrl+I)",
195
underlineControlLabel: "Underline (Ctrl+U)",
196
strikeControlLabel: "Strikethrough (Ctrl+Shift+S)",
197
clearFormattingControlLabel: "Remove formatting",
198
}}
199
>
200
{/* controls */}
201
</RichTextEditor>
202
```
203
204
### Custom Styling
205
206
Apply custom styles to formatting controls:
207
208
```typescript
209
<RichTextEditor.Bold
210
styles={{
211
control: {
212
backgroundColor: 'var(--mantine-color-blue-filled)',
213
color: 'white'
214
}
215
}}
216
/>
217
```