0
# Core Editor Integration
1

2
Essential hooks and components for integrating Remirror editors with React applications. Provides state management, command access, and the main Remirror component.
3

4
## Capabilities
5

6
### useRemirror Hook
7

8
The primary hook for initializing and managing a Remirror editor instance within React components.
9

10
```typescript { .api }
11
/**
12
 * Primary hook for initializing and managing a Remirror editor instance
13
 * @param props - Configuration object with extensions, content, and options
14
 * @returns Manager, state, and context getter for the editor
15
 */
16
function useRemirror<Extension extends AnyExtension = AnyExtension>(
17
  props: UseRemirrorProps<Extension>
18
): UseRemirrorReturn<Extension>;
19

20
interface UseRemirrorProps<Extension extends AnyExtension = AnyExtension> {
21
  /** Function that returns the extensions to be used by the editor */
22
  extensions: () => Extension[];
23
  /** Initial content for the editor */
24
  content?: RemirrorContentType;
25
  /** Initial selection position */
26
  selection?: PrimitiveSelection;
27
  /** How to handle string content (html, markdown, etc.) */
28
  stringHandler?: StringHandler;
29
  /** Error handler for editor errors */
30
  onError?: (error: Error) => void;
31
}
32

33
interface UseRemirrorReturn<Extension extends AnyExtension = AnyExtension> {
34
  /** The extension manager instance */
35
  manager: RemirrorManager<Extension>;
36
  /** The current editor state */
37
  state: EditorState;
38
  /** Function to get the current framework context */
39
  getContext: () => FrameworkOutput<Extension>;
40
}
41
```
42

43
**Usage Example:**
44

45
```typescript
46
import { useRemirror, ReactExtension } from '@remirror/react';
47

48
function MyEditor() {
49
  const { manager, state } = useRemirror({
50
    extensions: () => [new ReactExtension()],
51
    content: '<p>Hello world!</p>',
52
    selection: 'end',
53
    stringHandler: 'html',
54
  });
55

56
  return <Remirror manager={manager} initialContent={state} />;
57
}
58
```
59

60
### Remirror Component
61

62
The main React component that renders the Remirror editor and provides context to child components.
63

64
```typescript { .api }
65
/**
66
 * Main React component that renders the Remirror editor
67
 * @param props - Configuration props for the editor component
68
 */
69
interface Remirror extends React.Component<RemirrorProps> {}
70

71
interface RemirrorProps {
72
  /** The extension manager instance from useRemirror */
73
  manager: RemirrorManager;
74
  /** Initial content for the editor */
75
  initialContent?: RemirrorContentType;
76
  /** Child components to render within the editor context */
77
  children?: React.ReactNode;
78
  /** CSS class names to apply to the editor */
79
  classNames?: string[];
80
  /** Whether the editor is editable */
81
  editable?: boolean;
82
  /** Auto focus configuration */
83
  autoFocus?: boolean | FocusType;
84
}
85
```
86

87
**Usage Example:**
88

89
```typescript
90
import React from 'react';
91
import { Remirror, useRemirror, ReactExtension } from '@remirror/react';
92

93
function EditorWithToolbar() {
94
  const { manager, state } = useRemirror({
95
    extensions: () => [new ReactExtension()],
96
    content: '<p>Start typing...</p>',
97
  });
98

99
  return (
100
    <Remirror 
101
      manager={manager} 
102
      initialContent={state}
103
      autoFocus
104
      classNames={['editor-container']}
105
    >
106
      {/* Child components have access to editor context */}
107
      <div>Your toolbar components go here</div>
108
    </Remirror>
109
  );
110
}
111
```
112

113
### EditorComponent
114

115
Alternative editor component with different rendering approach.
116

117
```typescript { .api }
118
/**
119
 * Alternative editor component with different rendering approach
120
 */
121
interface EditorComponent extends React.Component<RemirrorProps> {}
122
```
123

124
### Context and Providers
125

126
Context providers for editor state and internationalization.
127

128
```typescript { .api }
129
/**
130
 * React context for accessing Remirror editor state and methods
131
 */
132
const RemirrorContext: React.Context<RemirrorContextType>;
133

134
/**
135
 * Hook to access the Remirror context
136
 * @returns The current Remirror context value
137
 */
138
function useRemirrorContext(): UseRemirrorContextType;
139

140
/**
141
 * Internationalization context provider
142
 */
143
interface I18nProvider extends React.Component<I18nProps> {}
144

145
interface I18nProps {
146
  /** Locale configuration */
147
  locale?: string;
148
  /** Translation messages */
149
  messages?: Record<string, string>;
150
  /** Child components */
151
  children: React.ReactNode;
152
}
153
```
154

155
### Change Handlers
156

157
Components for handling editor content changes in different formats.
158

159
```typescript { .api }
160
/**
161
 * Component for handling HTML content changes
162
 */
163
interface OnChangeHTML extends React.Component<OnChangeHTMLProps> {}
164

165
interface OnChangeHTMLProps {
166
  /** Callback when HTML content changes */
167
  onChange: (html: string) => void;
168
}
169

170
/**
171
 * Component for handling JSON content changes
172
 */
173
interface OnChangeJSON extends React.Component<OnChangeJSONProps> {}
174

175
interface OnChangeJSONProps {
176
  /** Callback when JSON content changes */
177
  onChange: (json: RemirrorJSON) => void;
178
}
179
```
180

181
**Usage Example:**
182

183
```typescript
184
import React, { useState } from 'react';
185
import { Remirror, OnChangeHTML, useRemirror, ReactExtension } from '@remirror/react';
186

187
function EditorWithHTMLOutput() {
188
  const [html, setHtml] = useState('');
189
  const { manager, state } = useRemirror({
190
    extensions: () => [new ReactExtension()],
191
  });
192

193
  return (
194
    <div>
195
      <Remirror manager={manager} initialContent={state}>
196
        <OnChangeHTML onChange={setHtml} />
197
      </Remirror>
198
      <div>Current HTML: {html}</div>
199
    </div>
200
  );
201
}
202
```
203

204
### Utility Functions
205

206
Core utility functions for creating managers and editor views.
207

208
```typescript { .api }
209
/**
210
 * Create a Remirror manager configured for React
211
 * @param options - Configuration options for the manager
212
 * @returns Configured RemirrorManager instance
213
 */
214
function createReactManager<Extension extends AnyExtension>(
215
  options: CreateReactManagerOptions<Extension>
216
): RemirrorManager<Extension>;
217

218
interface CreateReactManagerOptions<Extension extends AnyExtension> {
219
  /** Extensions to include in the manager */
220
  extensions: Extension[];
221
  /** Framework-specific settings */
222
  settings?: ManagerSettings;
223
}
224

225
/**
226
 * Create a ProseMirror EditorView instance
227
 * @param element - DOM element to mount the editor
228
 * @param state - Initial editor state
229
 * @returns EditorView instance
230
 */
231
function createEditorView(
232
  element: HTMLElement,
233
  state: EditorState
234
): EditorView;
235
```
236

237
## Types
238

239
### Core Framework Types
240

241
```typescript { .api }
242
interface ReactExtensions extends AnyExtension[] {}
243

244
interface ReactFrameworkOutput<Extension extends AnyExtension = AnyExtension> {
245
  /** Extension manager */
246
  manager: RemirrorManager<Extension>;
247
  /** Current editor state */
248
  state: EditorState;
249
  /** Editor view instance */
250
  view: EditorView;
251
  /** Available commands */
252
  commands: RemirrorCommands;
253
  /** Helper methods */
254
  helpers: RemirrorHelpers;
255
  /** Chain commands */
256
  chain: ChainedFromExtensions<Extension>;
257
}
258

259
interface UseRemirrorContextType<Extension extends AnyExtension = AnyExtension> {
260
  /** Framework output */
261
  framework: ReactFrameworkOutput<Extension>;
262
  /** Root element props */
263
  getRootProps: (config?: GetRootPropsConfig) => RefKeyRootProps;
264
}
265

266
interface GetRootPropsConfig {
267
  /** Additional CSS classes */
268
  className?: string;
269
  /** Additional props to merge */
270
  props?: Record<string, any>;
271
}
272

273
interface RefKeyRootProps extends RefProps {
274
  /** Ref to the editor element */
275
  ref: React.RefObject<HTMLElement>;
276
  /** CSS class names */
277
  className: string;
278
  /** Additional HTML attributes */
279
  [key: string]: any;
280
}
281

282
interface RefProps {
283
  /** Ref callback */
284
  ref: React.Ref<HTMLElement>;
285
}
286
```
287

288
## Update and Reason Tracking
289

290
```typescript { .api }
291
/**
292
 * Hook to get the reason for the last editor update
293
 * @returns The update reason
294
 */
295
function useUpdateReason(): UpdateReason;
296

297
interface UpdateReason {
298
  /** The source of the update */
299
  source: 'local' | 'remote' | 'init';
300
  /** Whether this was a state change */
301
  stateUpdate: boolean;
302
  /** Whether this was a transaction */
303
  transactions: readonly Transaction[];
304
}
305
```