0
# Editor Hooks
1

2
Specialized hooks for accessing editor state, commands, and functionality. Essential for building custom editor interfaces and handling editor events.
3

4
## Capabilities
5

6
### Command Access Hooks
7

8
Hooks for accessing and executing editor commands.
9

10
```typescript { .api }
11
/**
12
 * Access to all available editor commands
13
 * @returns Object containing all available commands
14
 */
15
function useCommands(): RemirrorCommands;
16

17
/**
18
 * Access to chainable command API for complex operations
19
 * @returns Chainable command interface
20
 */
21
function useChainedCommands(): ChainedFromExtensions<Extensions>;
22

23
/**
24
 * Access to editor helper methods for querying state
25
 * @returns Object containing helper methods
26
 */
27
function useHelpers(): RemirrorHelpers;
28
```
29

30
**Usage Example:**
31

32
```typescript
33
import React from 'react';
34
import { useCommands, useChainedCommands } from '@remirror/react';
35

36
function CustomToolbar() {
37
  const commands = useCommands();
38
  const chain = useChainedCommands();
39

40
  const makeBoldAndItalic = () => {
41
    chain.toggleBold().toggleItalic().run();
42
  };
43

44
  return (
45
    <div>
46
      <button onClick={() => commands.toggleBold()}>Bold</button>
47
      <button onClick={makeBoldAndItalic}>Bold + Italic</button>
48
    </div>
49
  );
50
}
51
```
52

53
### State Access Hooks
54

55
Hooks for accessing current editor state and DOM references.
56

57
```typescript { .api }
58
/**
59
 * Access to the current ProseMirror EditorState
60
 * @returns Current editor state
61
 */
62
function useEditorState(): EditorState;
63

64
/**
65
 * Access to the ProseMirror EditorView instance
66
 * @returns Current editor view
67
 */
68
function useEditorView(): EditorView;
69

70
/**
71
 * Reference to the editor's DOM element
72
 * @returns Ref object containing the editor DOM element
73
 */
74
function useEditorDomRef(): React.RefObject<HTMLElement>;
75

76
/**
77
 * Access to the extension manager
78
 * @returns Current RemirrorManager instance
79
 */
80
function useManager(): RemirrorManager;
81
```
82

83
### Selection and Content Hooks
84

85
Hooks for working with editor selection and content.
86

87
```typescript { .api }
88
/**
89
 * Get the current editor selection
90
 * @returns Current selection object
91
 */
92
function useCurrentSelection(): Selection;
93

94
/**
95
 * Get the currently selected text
96
 * @returns Currently selected text as string
97
 */
98
function useSelectedText(): string;
99

100
/**
101
 * Get the range of a mark at the current position
102
 * @param mark - Mark type to check for
103
 * @returns Range information for the mark
104
 */
105
function useMarkRange(mark?: MarkType): MarkRange | undefined;
106

107
/**
108
 * Detect when the document has changed
109
 * @returns Boolean indicating if document changed in last update
110
 */
111
function useDocChanged(): boolean;
112
```
113

114
**Usage Example:**
115

116
```typescript
117
import React from 'react';
118
import { useSelectedText, useCurrentSelection } from '@remirror/react';
119

120
function SelectionInfo() {
121
  const selectedText = useSelectedText();
122
  const selection = useCurrentSelection();
123

124
  return (
125
    <div>
126
      <p>Selected text: "{selectedText}"</p>
127
      <p>Selection from {selection.from} to {selection.to}</p>
128
    </div>
129
  );
130
}
131
```
132

133
### Extension Management Hooks
134

135
Hooks for working with extensions and their state.
136

137
```typescript { .api }
138
/**
139
 * Access a specific extension instance
140
 * @param Constructor - Extension constructor or name
141
 * @returns Extension instance or undefined
142
 */
143
function useExtension<T extends AnyExtension>(
144
  Constructor: ExtensionConstructor<T> | string
145
): T | undefined;
146

147
/**
148
 * Check if an extension is available
149
 * @param Constructor - Extension constructor or name
150
 * @returns Boolean indicating extension availability
151
 */
152
function useHasExtension<T extends AnyExtension>(
153
  Constructor: ExtensionConstructor<T> | string
154
): boolean;
155

156
/**
157
 * Check if marks or nodes are currently active
158
 * @param types - Mark or node types to check
159
 * @returns Boolean indicating if any are active
160
 */
161
function useActive(types?: string | string[]): boolean;
162

163
/**
164
 * Get attributes of a node or mark at current position
165
 * @param type - Node or mark type
166
 * @returns Attributes object or undefined
167
 */
168
function useAttrs(type?: string | NodeType | MarkType): ProsemirrorAttributes | undefined;
169
```
170

171
**Usage Example:**
172

173
```typescript
174
import React from 'react';
175
import { useExtension, useActive, BoldExtension } from '@remirror/react';
176

177
function BoldStatus() {
178
  const boldExtension = useExtension(BoldExtension);
179
  const isBold = useActive('bold');
180

181
  return (
182
    <div>
183
      <p>Bold extension loaded: {boldExtension ? 'Yes' : 'No'}</p>
184
      <p>Currently bold: {isBold ? 'Yes' : 'No'}</p>
185
    </div>
186
  );
187
}
188
```
189

190
### Event Handling Hooks
191

192
Hooks for handling editor events and custom events.
193

194
```typescript { .api }
195
/**
196
 * Listen to extension events
197
 * @param event - Event name to listen to
198
 * @param handler - Event handler function
199
 * @param options - Event options
200
 */
201
function useExtensionEvent<T = any>(
202
  event: string,
203
  handler: (params: T) => void,
204
  options?: { priority?: number }
205
): void;
206

207
/**
208
 * Listen to custom extension events
209
 * @param event - Custom event name
210
 * @param handler - Event handler function
211
 */
212
function useExtensionCustomEvent<T = any>(
213
  event: string,
214
  handler: (params: T) => void
215
): void;
216
```
217

218
**Usage Example:**
219

220
```typescript
221
import React, { useState } from 'react';
222
import { useExtensionEvent } from '@remirror/react';
223

224
function EventLogger() {
225
  const [events, setEvents] = useState<string[]>([]);
226

227
  useExtensionEvent('focus', () => {
228
    setEvents(prev => [...prev, 'Editor focused']);
229
  });
230

231
  useExtensionEvent('blur', () => {
232
    setEvents(prev => [...prev, 'Editor blurred']);
233
  });
234

235
  return (
236
    <div>
237
      <h3>Recent Events:</h3>
238
      <ul>
239
        {events.map((event, index) => (
240
          <li key={index}>{event}</li>
241
        ))}
242
      </ul>
243
    </div>
244
  );
245
}
246
```
247

248
### Portal and Container Hooks
249

250
Hooks for working with React portals and containers.
251

252
```typescript { .api }
253
/**
254
 * Access to the portal container for rendering React components
255
 * @returns Portal container instance
256
 */
257
function usePortalContainer(): PortalContainer;
258

259
/**
260
 * Force a component re-render
261
 * @returns Function to trigger re-render
262
 */
263
function useForceUpdate(): () => void;
264
```
265

266
### Internationalization Hook
267

268
Hook for accessing internationalization functionality.
269

270
```typescript { .api }
271
/**
272
 * Access internationalization functions and current locale
273
 * @returns i18n utilities and current locale information
274
 */
275
function useI18n(): UseI18nReturn;
276

277
interface UseI18nReturn {
278
  /** Current locale */
279
  locale: string;
280
  /** Translation function */
281
  t: (key: string, values?: Record<string, any>) => string;
282
  /** Format date function */
283
  formatDate: (date: Date) => string;
284
  /** Format number function */
285
  formatNumber: (num: number) => string;
286
}
287
```
288

289
## Types
290

291
### Extension Callback Types
292

293
```typescript { .api }
294
interface UseExtensionCallback<T extends AnyExtension = AnyExtension> {
295
  /** The extension instance */
296
  extension: T;
297
  /** Extension context */
298
  context: ExtensionContext<T>;
299
}
300

301
interface ExtensionContext<T extends AnyExtension = AnyExtension> {
302
  /** Current editor state */
303
  state: EditorState;
304
  /** Current editor view */
305
  view: EditorView;
306
  /** Extension manager */
307
  manager: RemirrorManager;
308
}
309
```
310

311
### Mark Range Types
312

313
```typescript { .api }
314
interface MarkRange {
315
  /** Start position of the mark */
316
  from: number;
317
  /** End position of the mark */
318
  to: number;
319
  /** The mark instance */
320
  mark: Mark;
321
  /** Text content within the mark */
322
  text: string;
323
}
324
```
325

326
### Command Types
327

328
```typescript { .api }
329
interface RemirrorCommands {
330
  /** Toggle bold formatting */
331
  toggleBold: () => CommandFunction;
332
  /** Toggle italic formatting */
333
  toggleItalic: () => CommandFunction;
334
  /** Toggle underline formatting */
335
  toggleUnderline: () => CommandFunction;
336
  /** Insert text at current position */
337
  insertText: (text: string) => CommandFunction;
338
  /** Delete current selection */
339
  deleteSelection: () => CommandFunction;
340
  /** Focus the editor */
341
  focus: () => CommandFunction;
342
  /** Blur the editor */
343
  blur: () => CommandFunction;
344
  /** Undo last action */
345
  undo: () => CommandFunction;
346
  /** Redo last undone action */
347
  redo: () => CommandFunction;
348
  /** Additional commands from extensions */
349
  [commandName: string]: (...args: any[]) => CommandFunction;
350
}
351

352
interface RemirrorHelpers {
353
  /** Check if mark is active */
354
  isMarkActive: (type: string) => boolean;
355
  /** Check if node is active */
356
  isNodeActive: (type: string) => boolean;
357
  /** Get mark attributes */
358
  getMarkAttrs: (type: string) => ProsemirrorAttributes | undefined;
359
  /** Get node attributes */
360
  getNodeAttrs: (type: string) => ProsemirrorAttributes | undefined;
361
  /** Additional helpers from extensions */
362
  [helperName: string]: (...args: any[]) => any;
363
}
364

365
interface ChainedFromExtensions<Extension extends AnyExtension = AnyExtension> {
366
  /** Chain multiple commands together */
367
  [commandName: string]: (...args: any[]) => ChainedFromExtensions<Extension>;
368
  /** Execute the command chain */
369
  run: () => boolean;
370
}
371
```