0
# UI Components
1

2
Pre-built React components for common editor functionality including formatting buttons, toolbars, and specialized UI elements.
3

4
## Capabilities
5

6
### Formatting Buttons
7

8
Ready-to-use buttons for text formatting operations.
9

10
```typescript { .api }
11
/**
12
 * Button to toggle bold formatting
13
 */
14
interface ToggleBoldButton extends React.Component {}
15

16
/**
17
 * Button to toggle italic formatting
18
 */
19
interface ToggleItalicButton extends React.Component {}
20

21
/**
22
 * Button to toggle underline formatting
23
 */
24
interface ToggleUnderlineButton extends React.Component {}
25

26
/**
27
 * Button to toggle strikethrough formatting
28
 */
29
interface ToggleStrikeButton extends React.Component {}
30

31
/**
32
 * Button to toggle inline code formatting
33
 */
34
interface ToggleCodeButton extends React.Component {}
35

36
/**
37
 * Button to toggle subscript formatting
38
 */
39
interface ToggleSubscriptButton extends React.Component {}
40

41
/**
42
 * Button to toggle superscript formatting
43
 */
44
interface ToggleSuperscriptButton extends React.Component {}
45
```
46

47
**Usage Example:**
48

49
```typescript
50
import React from 'react';
51
import { 
52
  ToggleBoldButton, 
53
  ToggleItalicButton, 
54
  ToggleUnderlineButton 
55
} from '@remirror/react';
56

57
function FormattingToolbar() {
58
  return (
59
    <div>
60
      <ToggleBoldButton />
61
      <ToggleItalicButton />
62
      <ToggleUnderlineButton />
63
    </div>
64
  );
65
}
66
```
67

68
### Block Element Buttons
69

70
Buttons for managing block-level elements and structures.
71

72
```typescript { .api }
73
/**
74
 * Button to toggle heading levels
75
 */
76
interface ToggleHeadingButton extends React.Component {}
77

78
/**
79
 * Button to toggle blockquote
80
 */
81
interface ToggleBlockquoteButton extends React.Component {}
82

83
/**
84
 * Button to toggle code block
85
 */
86
interface ToggleCodeBlockButton extends React.Component {}
87

88
/**
89
 * Button to toggle callout blocks
90
 */
91
interface ToggleCalloutButton extends React.Component {}
92

93
/**
94
 * Button to toggle whitespace display
95
 */
96
interface ToggleWhitespaceButton extends React.Component {}
97
```
98

99
### List Management Buttons
100

101
Buttons for creating and managing different types of lists.
102

103
```typescript { .api }
104
/**
105
 * Button to toggle bullet lists
106
 */
107
interface ToggleBulletListButton extends React.Component {}
108

109
/**
110
 * Button to toggle ordered lists
111
 */
112
interface ToggleOrderedListButton extends React.Component {}
113

114
/**
115
 * Button to toggle task lists
116
 */
117
interface ToggleTaskListButton extends React.Component {}
118

119
/**
120
 * Button to increase list indentation
121
 */
122
interface IncreaseIndentButton extends React.Component {}
123

124
/**
125
 * Button to decrease list indentation
126
 */
127
interface DecreaseIndentButton extends React.Component {}
128
```
129

130
### Text Alignment Buttons
131

132
Buttons for controlling text alignment.
133

134
```typescript { .api }
135
/**
136
 * Button to left align text
137
 */
138
interface LeftAlignButton extends React.Component {}
139

140
/**
141
 * Button to center align text
142
 */
143
interface CenterAlignButton extends React.Component {}
144

145
/**
146
 * Button to right align text
147
 */
148
interface RightAlignButton extends React.Component {}
149

150
/**
151
 * Button to justify align text
152
 */
153
interface JustifyAlignButton extends React.Component {}
154
```
155

156
### Content Insertion Buttons
157

158
Buttons for inserting various content types.
159

160
```typescript { .api }
161
/**
162
 * Button to insert horizontal rule
163
 */
164
interface InsertHorizontalRuleButton extends React.Component {}
165

166
/**
167
 * Button to create table
168
 */
169
interface CreateTableButton extends React.Component {}
170

171
/**
172
 * Button to toggle column layout
173
 */
174
interface ToggleColumnsButton extends React.Component {}
175
```
176

177
### Font Size Buttons
178

179
Buttons for adjusting font size.
180

181
```typescript { .api }
182
/**
183
 * Button to increase font size
184
 */
185
interface IncreaseFontSizeButton extends React.Component {}
186

187
/**
188
 * Button to decrease font size
189
 */
190
interface DecreaseFontSizeButton extends React.Component {}
191
```
192

193
### History Buttons
194

195
Buttons for undo/redo operations.
196

197
```typescript { .api }
198
/**
199
 * Button to undo last action
200
 */
201
interface UndoButton extends React.Component {}
202

203
/**
204
 * Button to redo last action
205
 */
206
interface RedoButton extends React.Component {}
207
```
208

209
### Data Transfer Buttons
210

211
Buttons for clipboard operations.
212

213
```typescript { .api }
214
/**
215
 * Button to copy content
216
 */
217
interface CopyButton extends React.Component {}
218

219
/**
220
 * Button to cut content
221
 */
222
interface CutButton extends React.Component {}
223

224
/**
225
 * Button to paste content
226
 */
227
interface PasteButton extends React.Component {}
228
```
229

230
### Generic Buttons
231

232
General-purpose button components.
233

234
```typescript { .api }
235
/**
236
 * Generic command button
237
 */
238
interface CommandButton extends React.Component {}
239

240
/**
241
 * Dropdown button component
242
 */
243
interface DropdownButton extends React.Component {}
244
```
245

246
## Button Groups
247

248
Pre-configured groups of related buttons for common use cases.
249

250
```typescript { .api }
251
/**
252
 * Basic formatting buttons (bold, italic, underline)
253
 */
254
interface BasicFormattingButtonGroup extends React.Component {}
255

256
/**
257
 * Extended formatting buttons
258
 */
259
interface FormattingButtonGroup extends React.Component {}
260

261
/**
262
 * List-related buttons
263
 */
264
interface ListButtonGroup extends React.Component {}
265

266
/**
267
 * Heading level buttons
268
 */
269
interface HeadingLevelButtonGroup extends React.Component {}
270

271
/**
272
 * Text alignment buttons
273
 */
274
interface TextAlignmentButtonGroup extends React.Component {}
275

276
/**
277
 * Undo/redo buttons
278
 */
279
interface HistoryButtonGroup extends React.Component {}
280

281
/**
282
 * Copy/cut/paste buttons
283
 */
284
interface DataTransferButtonGroup extends React.Component {}
285

286
/**
287
 * Indentation buttons
288
 */
289
interface IndentationButtonGroup extends React.Component {}
290

291
/**
292
 * Callout type buttons
293
 */
294
interface CalloutTypeButtonGroup extends React.Component {}
295

296
/**
297
 * Command button group
298
 */
299
interface CommandButtonGroup extends React.Component {}
300

301
/**
302
 * Baseline button group
303
 */
304
interface BaselineButtonGroup extends React.Component {}
305
```
306

307
**Usage Example:**
308

309
```typescript
310
import React from 'react';
311
import { 
312
  BasicFormattingButtonGroup, 
313
  ListButtonGroup, 
314
  HistoryButtonGroup 
315
} from '@remirror/react';
316

317
function CompactToolbar() {
318
  return (
319
    <div>
320
      <BasicFormattingButtonGroup />
321
      <ListButtonGroup />
322
      <HistoryButtonGroup />
323
    </div>
324
  );
325
}
326
```
327

328
## Menu Components
329

330
Interactive menu components for various editor functions.
331

332
```typescript { .api }
333
/**
334
 * Command menu item
335
 */
336
interface CommandMenuItem extends React.Component {}
337

338
/**
339
 * Toggle callout menu item
340
 */
341
interface ToggleCalloutMenuItem extends React.Component {}
342

343
/**
344
 * Toggle heading menu item
345
 */
346
interface ToggleHeadingMenuItem extends React.Component {}
347
```
348

349
## Toolbar Components
350

351
Complete toolbar solutions for different editor modes.
352

353
```typescript { .api }
354
/**
355
 * Base toolbar component
356
 */
357
interface BaseToolbar extends React.Component {}
358

359
/**
360
 * Floating toolbar that appears near selection
361
 */
362
interface FloatingToolbar extends React.Component {}
363

364
/**
365
 * Markdown-specific toolbar
366
 */
367
interface MarkdownToolbar extends React.Component {}
368

369
/**
370
 * WYSIWYG toolbar
371
 */
372
interface WysiwygToolbar extends React.Component {}
373

374
/**
375
 * Vertical divider for toolbars
376
 */
377
interface VerticalDivider extends React.Component {}
378
```
379

380
**Usage Example:**
381

382
```typescript
383
import React from 'react';
384
import { Remirror, useRemirror, FloatingToolbar } from '@remirror/react';
385

386
function EditorWithFloatingToolbar() {
387
  const { manager, state } = useRemirror({
388
    extensions: () => [/* your extensions */],
389
  });
390

391
  return (
392
    <Remirror manager={manager} initialContent={state}>
393
      <FloatingToolbar />
394
      {/* Toolbar will appear when text is selected */}
395
    </Remirror>
396
  );
397
}
398
```
399

400
## Popup Components
401

402
Specialized popup components for enhanced editing features.
403

404
```typescript { .api }
405
/**
406
 * Emoji picker popup
407
 */
408
interface EmojiPopupComponent extends React.Component {}
409

410
/**
411
 * Mention popup component
412
 */
413
interface MentionAtomPopupComponent extends React.Component {}
414
```
415

416
## Floating Components
417

418
Components for floating UI elements with positioning.
419

420
```typescript { .api }
421
/**
422
 * Wrapper for floating UI elements with positioning
423
 */
424
interface FloatingWrapper extends React.Component<{
425
  /** Child components to render */
426
  children: React.ReactNode;
427
  /** Positioning options */
428
  placement?: Placement;
429
  /** Whether to show/hide the floating element */
430
  enabled?: boolean;
431
}> {}
432

433
/**
434
 * Portal for rendering components into editor's positioner widget
435
 */
436
interface PositionerPortal extends React.Component<{
437
  /** Components to render in the portal */
438
  children: React.ReactNode;
439
  /** Positioner instance to use */
440
  positioner?: Positioner;
441
}> {}
442
```
443

444
## Feature Components
445

446
Complete feature implementations as single components.
447

448
```typescript { .api }
449
/**
450
 * Complete find and replace UI
451
 */
452
interface FindReplaceComponent extends React.Component<{
453
  /** Whether the component is visible */
454
  visible?: boolean;
455
  /** Callback when visibility changes */
456
  onVisibilityChange?: (visible: boolean) => void;
457
}> {}
458
```
459

460
**Usage Example:**
461

462
```typescript
463
import React, { useState } from 'react';
464
import { Remirror, useRemirror, FindReplaceComponent } from '@remirror/react';
465

466
function EditorWithFindReplace() {
467
  const [showFindReplace, setShowFindReplace] = useState(false);
468
  const { manager, state } = useRemirror({
469
    extensions: () => [/* your extensions */],
470
  });
471

472
  return (
473
    <div>
474
      <button onClick={() => setShowFindReplace(true)}>
475
        Find & Replace
476
      </button>
477
      <Remirror manager={manager} initialContent={state}>
478
        <FindReplaceComponent 
479
          visible={showFindReplace}
480
          onVisibilityChange={setShowFindReplace}
481
        />
482
      </Remirror>
483
    </div>
484
  );
485
}
486
```
487

488
## Provider Components
489

490
Context providers for theming and configuration.
491

492
```typescript { .api }
493
/**
494
 * Theme context provider for styling components
495
 */
496
interface ThemeProvider extends React.Component<{
497
  /** Theme configuration object */
498
  theme?: Theme;
499
  /** Child components */
500
  children: React.ReactNode;
501
}> {}
502

503
interface Theme {
504
  /** Color scheme */
505
  colors?: Record<string, string>;
506
  /** Typography settings */
507
  typography?: Record<string, string | number>;
508
  /** Component-specific styles */
509
  components?: Record<string, any>;
510
}
511
```
512

513
## Icon System
514

515
Icon components and utilities for consistent iconography.
516

517
```typescript { .api }
518
/**
519
 * Base icon component and icon system utilities
520
 * Includes various predefined icons for editor actions
521
 */
522
interface IconSystem {
523
  /** Base icon component */
524
  Icon: React.ComponentType<{
525
    name: string;
526
    size?: number;
527
    color?: string;
528
  }>;
529
  /** Icon registration utilities */
530
  registerIcon: (name: string, component: React.ComponentType) => void;
531
  /** Available icon names */
532
  availableIcons: string[];
533
}
534
```