0
# Labels and Internationalization
1

2
Comprehensive labeling system for accessibility and internationalization support with 40+ customizable labels. The system provides complete ARIA label coverage and supports full localization of the editor interface.
3

4
## Capabilities
5

6
### DEFAULT_LABELS Constant
7

8
Complete set of default English labels for all editor controls and UI elements.
9

10
```typescript { .api }
11
/**
12
 * Default English labels for all editor controls
13
 * Provides complete accessibility and internationalization support
14
 */
15
const DEFAULT_LABELS: RichTextEditorLabels;
16
```
17

18
**Usage Example:**
19

20
```typescript
21
import { DEFAULT_LABELS } from "@mantine/tiptap";
22

23
// Access default labels
24
console.log(DEFAULT_LABELS.boldControlLabel); // "Bold"
25
console.log(DEFAULT_LABELS.linkControlLabel); // "Link"
26

27
// Use as base for custom labels
28
const customLabels = {
29
  ...DEFAULT_LABELS,
30
  boldControlLabel: "Bold Text (Ctrl+B)",
31
  italicControlLabel: "Italic Text (Ctrl+I)",
32
};
33
```
34

35
### RichTextEditorLabels Interface
36

37
Complete TypeScript interface defining all available labels for editor controls and UI elements.
38

39
```typescript { .api }
40
interface RichTextEditorLabels {
41
  /** RichTextEditor.Bold control aria-label */
42
  boldControlLabel: string;
43
  /** RichTextEditor.Italic control aria-label */
44
  italicControlLabel: string;
45
  /** RichTextEditor.Underline control aria-label */
46
  underlineControlLabel: string;
47
  /** RichTextEditor.Strike control aria-label */
48
  strikeControlLabel: string;
49
  /** RichTextEditor.ClearFormatting control aria-label */
50
  clearFormattingControlLabel: string;
51
  
52
  /** RichTextEditor.H1 control aria-label */
53
  h1ControlLabel: string;
54
  /** RichTextEditor.H2 control aria-label */
55
  h2ControlLabel: string;
56
  /** RichTextEditor.H3 control aria-label */
57
  h3ControlLabel: string;
58
  /** RichTextEditor.H4 control aria-label */
59
  h4ControlLabel: string;
60
  /** RichTextEditor.H5 control aria-label */
61
  h5ControlLabel: string;
62
  /** RichTextEditor.H6 control aria-label */
63
  h6ControlLabel: string;
64
  
65
  /** RichTextEditor.BulletList control aria-label */
66
  bulletListControlLabel: string;
67
  /** RichTextEditor.OrderedList control aria-label */
68
  orderedListControlLabel: string;
69
  /** RichTextEditor.TaskList control aria-label */
70
  tasksControlLabel: string;
71
  /** RichTextEditor.TaskListSink control aria-label */
72
  tasksSinkLabel: string;
73
  /** RichTextEditor.TaskListLift control aria-label */
74
  tasksLiftLabel: string;
75
  
76
  /** RichTextEditor.Link control aria-label */
77
  linkControlLabel: string;
78
  /** RichTextEditor.Unlink control aria-label */
79
  unlinkControlLabel: string;
80
  
81
  /** RichTextEditor.AlignLeft control aria-label */
82
  alignLeftControlLabel: string;
83
  /** RichTextEditor.AlignCenter control aria-label */
84
  alignCenterControlLabel: string;
85
  /** RichTextEditor.AlignRight control aria-label */
86
  alignRightControlLabel: string;
87
  /** RichTextEditor.AlignJustify control aria-label */
88
  alignJustifyControlLabel: string;
89
  
90
  /** RichTextEditor.Code control aria-label */
91
  codeControlLabel: string;
92
  /** RichTextEditor.CodeBlock control aria-label */
93
  codeBlockControlLabel: string;
94
  /** RichTextEditor.Blockquote control aria-label */
95
  blockquoteControlLabel: string;
96
  
97
  /** RichTextEditor.Superscript control aria-label */
98
  superscriptControlLabel: string;
99
  /** RichTextEditor.Subscript control aria-label */
100
  subscriptControlLabel: string;
101
  
102
  /** RichTextEditor.ColorPicker control aria-label */
103
  colorPickerControlLabel: string;
104
  /** RichTextEditor.UnsetColor control aria-label */
105
  unsetColorControlLabel: string;
106
  /** RichTextEditor.Highlight control aria-label */
107
  highlightControlLabel: string;
108
  
109
  /** RichTextEditor.Hr control aria-label */
110
  hrControlLabel: string;
111
  /** RichTextEditor.Undo control aria-label */
112
  undoControlLabel: string;
113
  /** RichTextEditor.Redo control aria-label */
114
  redoControlLabel: string;
115
  /** RichTextEditor.SourceCode control aria-label */
116
  sourceCodeControlLabel: string;
117
  
118
  /** Function to get RichTextEditor.Color control aria-label based on color */
119
  colorControlLabel: (color: string) => string;
120
  /** Function to get aria-label for color palette colors */
121
  colorPickerColorLabel: (color: string) => string;
122
  
123
  /** Aria-label for link editor url input */
124
  linkEditorInputLabel: string;
125
  /** Placeholder for link editor url input */
126
  linkEditorInputPlaceholder: string;
127
  /** Content of external button tooltip when link opens in new tab */
128
  linkEditorExternalLink: string;
129
  /** Content of external button tooltip when link opens in same tab */
130
  linkEditorInternalLink: string;
131
  /** Save button content in link editor */
132
  linkEditorSave: string;
133
  
134
  /** Cancel button title text in color picker control */
135
  colorPickerCancel: string;
136
  /** Clear button title text in color picker control */
137
  colorPickerClear: string;
138
  /** Color picker button title text in color picker control */
139
  colorPickerColorPicker: string;
140
  /** Palette button title text in color picker control */
141
  colorPickerPalette: string;
142
  /** Save button title text in color picker control */
143
  colorPickerSave: string;
144
}
145
```
146

147
## Default Label Values
148

149
### Text Formatting Labels
150

151
```typescript
152
{
153
  boldControlLabel: "Bold",
154
  italicControlLabel: "Italic", 
155
  underlineControlLabel: "Underline",
156
  strikeControlLabel: "Strikethrough",
157
  clearFormattingControlLabel: "Clear formatting",
158
}
159
```
160

161
### Structure Labels
162

163
```typescript
164
{
165
  h1ControlLabel: "Heading 1",
166
  h2ControlLabel: "Heading 2",
167
  h3ControlLabel: "Heading 3", 
168
  h4ControlLabel: "Heading 4",
169
  h5ControlLabel: "Heading 5",
170
  h6ControlLabel: "Heading 6",
171
  
172
  bulletListControlLabel: "Bullet list",
173
  orderedListControlLabel: "Ordered list",
174
  tasksControlLabel: "Task list",
175
  tasksSinkLabel: "Decrease task level",
176
  tasksLiftLabel: "Increase task level",
177
  
178
  blockquoteControlLabel: "Blockquote",
179
  
180
  alignLeftControlLabel: "Align text: left",
181
  alignCenterControlLabel: "Align text: center", 
182
  alignRightControlLabel: "Align text: right",
183
  alignJustifyControlLabel: "Align text: justify",
184
}
185
```
186

187
### Advanced Control Labels
188

189
```typescript
190
{
191
  linkControlLabel: "Link",
192
  unlinkControlLabel: "Remove link",
193
  
194
  codeControlLabel: "Code",
195
  codeBlockControlLabel: "Code block",
196
  
197
  superscriptControlLabel: "Superscript",
198
  subscriptControlLabel: "Subscript",
199
  
200
  colorPickerControlLabel: "Text color",
201
  unsetColorControlLabel: "Unset color",
202
  highlightControlLabel: "Highlight text",
203
  
204
  hrControlLabel: "Horizontal line",
205
  undoControlLabel: "Undo",
206
  redoControlLabel: "Redo",
207
  sourceCodeControlLabel: "Switch between text/source code",
208
}
209
```
210

211
### Function-based Labels
212

213
```typescript
214
{
215
  colorControlLabel: (color) => `Set text color ${color}`,
216
  colorPickerColorLabel: (color) => `Set text color ${color}`,
217
}
218
```
219

220
### UI Element Labels
221

222
```typescript
223
{
224
  linkEditorInputLabel: "Enter URL",
225
  linkEditorInputPlaceholder: "https://example.com/",
226
  linkEditorExternalLink: "Open link in a new tab",
227
  linkEditorInternalLink: "Open link in the same tab", 
228
  linkEditorSave: "Save",
229
  
230
  colorPickerCancel: "Cancel",
231
  colorPickerClear: "Clear color",
232
  colorPickerColorPicker: "Color picker",
233
  colorPickerPalette: "Color palette",
234
  colorPickerSave: "Save",
235
}
236
```
237

238
## Internationalization Examples
239

240
### Spanish Labels
241

242
```typescript
243
import { RichTextEditor, DEFAULT_LABELS } from "@mantine/tiptap";
244

245
const spanishLabels = {
246
  ...DEFAULT_LABELS,
247
  boldControlLabel: "Negrita",
248
  italicControlLabel: "Cursiva", 
249
  underlineControlLabel: "Subrayado",
250
  strikeControlLabel: "Tachado",
251
  clearFormattingControlLabel: "Limpiar formato",
252
  
253
  h1ControlLabel: "Encabezado 1",
254
  h2ControlLabel: "Encabezado 2",
255
  h3ControlLabel: "Encabezado 3",
256
  
257
  bulletListControlLabel: "Lista con viñetas",
258
  orderedListControlLabel: "Lista numerada",
259
  
260
  linkControlLabel: "Enlace",
261
  unlinkControlLabel: "Quitar enlace",
262
  
263
  codeControlLabel: "Código",
264
  codeBlockControlLabel: "Bloque de código",
265
  
266
  undoControlLabel: "Deshacer",
267
  redoControlLabel: "Rehacer",
268
  
269
  colorControlLabel: (color) => `Establecer color del texto ${color}`,
270
};
271

272
function SpanishEditor() {
273
  return (
274
    <RichTextEditor editor={editor} labels={spanishLabels}>
275
      {/* editor controls */}
276
    </RichTextEditor>
277
  );
278
}
279
```
280

281
### French Labels
282

283
```typescript
284
const frenchLabels = {
285
  ...DEFAULT_LABELS,
286
  boldControlLabel: "Gras",
287
  italicControlLabel: "Italique",
288
  underlineControlLabel: "Souligné", 
289
  strikeControlLabel: "Barré",
290
  clearFormattingControlLabel: "Effacer la mise en forme",
291
  
292
  h1ControlLabel: "Titre 1",
293
  h2ControlLabel: "Titre 2", 
294
  h3ControlLabel: "Titre 3",
295
  
296
  bulletListControlLabel: "Liste à puces",
297
  orderedListControlLabel: "Liste numérotée",
298
  
299
  linkControlLabel: "Lien",
300
  unlinkControlLabel: "Supprimer le lien",
301
  
302
  alignLeftControlLabel: "Aligner à gauche",
303
  alignCenterControlLabel: "Centrer",
304
  alignRightControlLabel: "Aligner à droite",
305
  alignJustifyControlLabel: "Justifier",
306
  
307
  undoControlLabel: "Annuler",
308
  redoControlLabel: "Rétablir",
309
  
310
  linkEditorInputLabel: "Saisir l'URL", 
311
  linkEditorInputPlaceholder: "https://exemple.com/",
312
  linkEditorSave: "Sauvegarder",
313
};
314
```
315

316
### Custom Labels with Keyboard Shortcuts
317

318
```typescript
319
const labelswithShortcuts = {
320
  ...DEFAULT_LABELS,
321
  boldControlLabel: "Bold (Ctrl+B)",
322
  italicControlLabel: "Italic (Ctrl+I)",
323
  underlineControlLabel: "Underline (Ctrl+U)",
324
  
325
  h1ControlLabel: "Heading 1 (Ctrl+Alt+1)",
326
  h2ControlLabel: "Heading 2 (Ctrl+Alt+2)",
327
  h3ControlLabel: "Heading 3 (Ctrl+Alt+3)",
328
  
329
  linkControlLabel: "Add Link (Ctrl+K)",
330
  codeControlLabel: "Inline Code (Ctrl+E)",
331
  
332
  undoControlLabel: "Undo (Ctrl+Z)",
333
  redoControlLabel: "Redo (Ctrl+Y)",
334
};
335
```
336

337
## Implementation Patterns
338

339
### Dynamic Label Loading
340

341
```typescript
342
import { useState, useEffect } from "react";
343

344
function LocalizedEditor({ locale }: { locale: string }) {
345
  const [labels, setLabels] = useState(DEFAULT_LABELS);
346
  
347
  useEffect(() => {
348
    async function loadLabels() {
349
      try {
350
        const localeLabels = await import(`./labels/${locale}.js`);
351
        setLabels({ ...DEFAULT_LABELS, ...localeLabels.default });
352
      } catch {
353
        // Fallback to default labels
354
        setLabels(DEFAULT_LABELS);
355
      }
356
    }
357
    
358
    loadLabels();
359
  }, [locale]);
360
  
361
  return (
362
    <RichTextEditor editor={editor} labels={labels}>
363
      {/* editor controls */}
364
    </RichTextEditor>
365
  );
366
}
367
```
368

369
### Context-based Localization
370

371
```typescript
372
import { createContext, useContext } from "react";
373

374
const LocaleContext = createContext<string>('en');
375

376
function useLocalizedLabels() {
377
  const locale = useContext(LocaleContext);
378
  
379
  const labelMap = {
380
    en: DEFAULT_LABELS,
381
    es: spanishLabels,
382
    fr: frenchLabels,
383
  };
384
  
385
  return labelMap[locale] || DEFAULT_LABELS;
386
}
387

388
function LocalizedEditor() {
389
  const labels = useLocalizedLabels();
390
  
391
  return (
392
    <RichTextEditor editor={editor} labels={labels}>
393
      {/* editor controls */}
394
    </RichTextEditor>
395
  );
396
}
397
```
398

399
### Partial Label Override
400

401
```typescript
402
// Only override specific labels, keep defaults for others
403
const partialLabels = {
404
  boldControlLabel: "Make Bold",
405
  italicControlLabel: "Make Italic",
406
  // Other labels use DEFAULT_LABELS values
407
};
408

409
<RichTextEditor editor={editor} labels={partialLabels}>
410
  {/* Controls will use custom labels where provided, defaults elsewhere */}
411
</RichTextEditor>
412
```
413

414
## Accessibility Benefits
415

416
### Screen Reader Support
417

418
Labels provide comprehensive screen reader support:
419

420
- **Control Identification**: Each control has descriptive ARIA labels
421
- **State Announcement**: Active states are communicated via accessibility attributes
422
- **Keyboard Navigation**: Proper labeling supports keyboard-only users
423
- **Context Information**: Labels provide context about control functionality
424

425
### Compliance
426

427
The labeling system supports:
428

429
- **WCAG 2.1 AA Compliance**: Proper labeling for accessibility standards
430
- **Section 508**: Government accessibility requirements 
431
- **ARIA Best Practices**: Following established ARIA labeling patterns
432
- **Internationalization**: Support for right-to-left languages and localization
433

434
## TypeScript Integration
435

436
### Type Safety
437

438
```typescript
439
import type { RichTextEditorLabels } from "@mantine/tiptap";
440

441
// Type-safe label objects
442
const typedLabels: Partial<RichTextEditorLabels> = {
443
  boldControlLabel: "Bold", // ✓ Valid
444
  invalidLabel: "Invalid", // ✗ TypeScript error
445
};
446

447
// Function labels are type-checked
448
const colorLabels: RichTextEditorLabels['colorControlLabel'] = 
449
  (color: string) => `Apply ${color} color`;
450
```
451

452
### Label Validation
453

454
```typescript
455
function validateLabels(labels: Partial<RichTextEditorLabels>): boolean {
456
  // Ensure function labels are properly typed
457
  if (labels.colorControlLabel && typeof labels.colorControlLabel !== 'function') {
458
    return false;
459
  }
460
  
461
  // Ensure string labels are strings
462
  const stringLabels = ['boldControlLabel', 'italicControlLabel'] as const;
463
  for (const label of stringLabels) {
464
    if (labels[label] && typeof labels[label] !== 'string') {
465
      return false;
466
    }
467
  }
468
  
469
  return true;
470
}
471
```