0
# Core Components
1

2
Essential components for building rich text editors including the main wrapper, content area, toolbar, and control grouping components.
3

4
## Capabilities
5

6
### RichTextEditor
7

8
Main wrapper component that provides context and styling for all child components. Uses the compound component pattern with 30+ static sub-components.
9

10
```typescript { .api }
11
/**
12
 * Main rich text editor wrapper component
13
 * @param props - RichTextEditor configuration and children
14
 * @returns JSX.Element with context provider and styling
15
 */
16
function RichTextEditor(props: RichTextEditorProps): JSX.Element;
17

18
interface RichTextEditorProps extends BoxProps, StylesApiProps<RichTextEditorFactory>, ElementProps<'div'> {
19
  /** Tiptap editor instance (required) */
20
  editor: Editor | null;
21
  /** Determines whether code highlight styles should be added @default true */
22
  withCodeHighlightStyles?: boolean;
23
  /** Determines whether typography styles should be added @default true */
24
  withTypographyStyles?: boolean;
25
  /** Called if RichTextEditor.SourceCode clicked */
26
  onSourceCodeTextSwitch?: (isSourceCodeModeActive: boolean) => void;
27
  /** Labels that are used in controls for accessibility and i18n */
28
  labels?: Partial<RichTextEditorLabels>;
29
  /** Child editor components (required) */
30
  children: React.ReactNode;
31
}
32

33
type RichTextEditorVariant = 'default' | 'subtle';
34

35
type RichTextEditorStylesNames =
36
  | 'linkEditorSave'
37
  | 'linkEditorDropdown'
38
  | 'root'
39
  | 'content'
40
  | 'Typography'
41
  | 'control'
42
  | 'controlIcon'
43
  | 'controlsGroup'
44
  | 'toolbar'
45
  | 'linkEditor'
46
  | 'linkEditorInput'
47
  | 'linkEditorExternalControl';
48
```
49

50
**Usage Example:**
51

52
```typescript
53
import { useEditor } from "@tiptap/react";
54
import StarterKit from "@tiptap/starter-kit";
55
import { RichTextEditor } from "@mantine/tiptap";
56

57
function MyEditor() {
58
  const editor = useEditor({
59
    extensions: [StarterKit],
60
    content: "<p>Hello world!</p>",
61
  });
62

63
  return (
64
    <RichTextEditor 
65
      editor={editor}
66
      withCodeHighlightStyles={true}
67
      withTypographyStyles={true}
68
      labels={{ boldControlLabel: "Make text bold" }}
69
    >
70
      <RichTextEditor.Toolbar>
71
        <RichTextEditor.Bold />
72
      </RichTextEditor.Toolbar>
73
      <RichTextEditor.Content />
74
    </RichTextEditor>
75
  );
76
}
77
```
78

79
### RichTextEditor.Content
80

81
Renders the actual editor content area where users type and edit text. Automatically integrates with Tiptap's EditorContent.
82

83
```typescript { .api }
84
/**
85
 * Editor content area component
86
 * @param props - Content area styling and configuration
87
 * @returns JSX.Element with Tiptap EditorContent integration
88
 */
89
RichTextEditor.Content: React.ComponentType<RichTextEditorContentProps>;
90

91
interface RichTextEditorContentProps extends BoxProps, CompoundStylesApiProps<RichTextEditorContentFactory>, ElementProps<'div'> {}
92

93
type RichTextEditorContentStylesNames = 'root';
94
```
95

96
**Usage Example:**
97

98
```typescript
99
<RichTextEditor editor={editor}>
100
  <RichTextEditor.Toolbar>
101
    {/* toolbar controls */}
102
  </RichTextEditor.Toolbar>
103
  
104
  {/* Content area where users type */}
105
  <RichTextEditor.Content />
106
</RichTextEditor>
107
```
108

109
### RichTextEditor.Toolbar
110

111
Container component for organizing editor controls with optional sticky positioning and visual styling.
112

113
```typescript { .api }
114
/**
115
 * Toolbar container for organizing editor controls
116
 * @param props - Toolbar configuration including sticky positioning
117
 * @returns JSX.Element toolbar container
118
 */
119
RichTextEditor.Toolbar: React.ComponentType<RichTextEditorToolbarProps>;
120

121
interface RichTextEditorToolbarProps extends BoxProps, CompoundStylesApiProps<RichTextEditorToolbarFactory>, ElementProps<'div'> {
122
  /** Determines whether position: sticky styles should be added @default false */
123
  sticky?: boolean;
124
  /** Sets top style to offset elements with fixed position @default 0 */
125
  stickyOffset?: React.CSSProperties['top'];
126
}
127

128
type RichTextEditorToolbarStylesNames = 'toolbar';
129
```
130

131
**Usage Example:**
132

133
```typescript
134
<RichTextEditor editor={editor}>
135
  {/* Sticky toolbar that stays at top when scrolling */}
136
  <RichTextEditor.Toolbar sticky stickyOffset={60}>
137
    <RichTextEditor.ControlsGroup>
138
      <RichTextEditor.Bold />
139
      <RichTextEditor.Italic />
140
    </RichTextEditor.ControlsGroup>
141
  </RichTextEditor.Toolbar>
142
  
143
  <RichTextEditor.Content />
144
</RichTextEditor>
145
```
146

147
### RichTextEditor.ControlsGroup
148

149
Groups related controls together with visual separation, typically used within toolbars to organize functionality.
150

151
```typescript { .api }
152
/**
153
 * Groups related controls with visual separation
154
 * @param props - Control group styling configuration
155
 * @returns JSX.Element container for grouped controls
156
 */
157
RichTextEditor.ControlsGroup: React.ComponentType<RichTextEditorControlsGroupProps>;
158

159
interface RichTextEditorControlsGroupProps extends BoxProps, CompoundStylesApiProps<RichTextEditorControlsGroupFactory>, ElementProps<'div'> {}
160

161
type RichTextEditorControlsGroupStylesNames = 'controlsGroup';
162
```
163

164
**Usage Example:**
165

166
```typescript
167
<RichTextEditor.Toolbar>
168
  {/* Group text formatting controls */}
169
  <RichTextEditor.ControlsGroup>
170
    <RichTextEditor.Bold />
171
    <RichTextEditor.Italic />
172
    <RichTextEditor.Underline />
173
  </RichTextEditor.ControlsGroup>
174

175
  {/* Group heading controls */}
176
  <RichTextEditor.ControlsGroup>
177
    <RichTextEditor.H1 />
178
    <RichTextEditor.H2 />
179
    <RichTextEditor.H3 />
180
  </RichTextEditor.ControlsGroup>
181
</RichTextEditor.Toolbar>
182
```
183

184
### RichTextEditor.Control
185

186
Base component for creating custom editor controls. Provides consistent styling and behavior patterns.
187

188
```typescript { .api }
189
/**
190
 * Base component for creating custom editor controls
191
 * @param props - Control configuration including active state and interactions
192
 * @returns JSX.Element button component for editor controls
193
 */
194
RichTextEditor.Control: React.ComponentType<RichTextEditorControlProps>;
195

196
interface RichTextEditorControlProps extends BoxProps, CompoundStylesApiProps<RichTextEditorControlFactory>, ElementProps<'button'> {
197
  /** Determines whether the control should have active state @default false */
198
  active?: boolean;
199
  /** Determines whether the control can be interacted with @default true */
200
  interactive?: boolean;
201
}
202

203
type RichTextEditorControlStylesNames = 'control';
204
```
205

206
**Usage Example:**
207

208
```typescript
209
import { useRichTextEditorContext } from "@mantine/tiptap";
210
import { IconCustom } from "@tabler/icons-react";
211

212
function CustomControl() {
213
  const { editor } = useRichTextEditorContext();
214
  
215
  return (
216
    <RichTextEditor.Control
217
      active={editor?.isActive('customMark')}
218
      onClick={() => editor?.chain().focus().toggleCustomMark().run()}
219
      aria-label="Apply custom formatting"
220
    >
221
      <IconCustom size={16} />
222
    </RichTextEditor.Control>
223
  );
224
}
225
```
226

227
## Component Hierarchy
228

229
The typical component hierarchy for a rich text editor:
230

231
```typescript
232
<RichTextEditor editor={editor}>
233
  <RichTextEditor.Toolbar sticky>
234
    <RichTextEditor.ControlsGroup>
235
      <RichTextEditor.Bold />
236
      <RichTextEditor.Italic />
237
      {/* More controls... */}
238
    </RichTextEditor.ControlsGroup>
239
    
240
    <RichTextEditor.ControlsGroup>
241
      <RichTextEditor.H1 />
242
      <RichTextEditor.H2 />
243
      {/* More controls... */}
244
    </RichTextEditor.ControlsGroup>
245
  </RichTextEditor.Toolbar>
246
  
247
  <RichTextEditor.Content />
248
</RichTextEditor>
249
```
250

251
## Styling and Theming
252

253
All core components integrate with Mantine's styling system:
254

255
- **CSS Variables**: Components respond to Mantine theme variables
256
- **Style Overrides**: Use `styles` prop to override specific style slots
257
- **Class Names**: Use `classNames` prop to add custom CSS classes
258
- **Variants**: Support for different visual variants (default, subtle)
259
- **Unstyled**: Can disable all default styles with `unstyled` prop