0
# Core Editor View
1

2
The EditorView class is the central component that manages the DOM structure representing an editable document and handles all user interactions. It serves as the bridge between ProseMirror's abstract document model and the browser's DOM.
3

4
## Capabilities
5

6
### EditorView Class
7

8
The main class for creating and managing editor instances.
9

10
```typescript { .api }
11
/**
12
 * An editor view manages the DOM structure that represents an
13
 * editable document. Its state and behavior are determined by its props.
14
 */
15
class EditorView {
16
  /**
17
   * Create a view. `place` may be a DOM node that the editor should
18
   * be appended to, a function that will place it into the document,
19
   * or an object whose `mount` property holds the node to use as the
20
   * document container. If it is `null`, the editor will not be
21
   * added to the document.
22
   */
23
  constructor(
24
    place: null | DOMNode | ((editor: HTMLElement) => void) | {mount: HTMLElement},
25
    props: DirectEditorProps
26
  );
27
}
28
```
29

30
**Usage Examples:**
31

32
```typescript
33
import { EditorView } from "prosemirror-view";
34
import { EditorState } from "prosemirror-state";
35

36
// Mount to DOM element
37
const view = new EditorView(document.querySelector("#editor"), {
38
  state: myEditorState,
39
  dispatchTransaction(tr) {
40
    this.updateState(this.state.apply(tr));
41
  }
42
});
43

44
// Mount with custom placement function
45
const view2 = new EditorView((dom) => {
46
  document.body.appendChild(dom);
47
}, { state: myEditorState });
48

49
// Mount to specific container
50
const view3 = new EditorView({ mount: document.querySelector("#container") }, {
51
  state: myEditorState
52
});
53
```
54

55
### State and Properties
56

57
Core properties that define the editor's current state and configuration.
58

59
```typescript { .api }
60
class EditorView {
61
  /** The view's current state */
62
  readonly state: EditorState;
63
  
64
  /** An editable DOM node containing the document */
65
  readonly dom: HTMLElement;
66
  
67
  /** Indicates whether the editor is currently editable */
68
  readonly editable: boolean;
69
  
70
  /** When editor content is being dragged, contains drag information */
71
  readonly dragging: null | {slice: Slice, move: boolean};
72
  
73
  /** Holds true when a composition is active */
74
  readonly composing: boolean;
75
  
76
  /** The view's current props */
77
  readonly props: DirectEditorProps;
78
  
79
  /** 
80
   * Get the document root in which the editor exists. 
81
   * Usually the top-level document, but might be a shadow DOM root.
82
   */
83
  readonly root: Document | ShadowRoot;
84
  
85
  /** This is true when the view has been destroyed */
86
  readonly isDestroyed: boolean;
87
}
88
```
89

90
### State Updates
91

92
Methods for updating the editor's state and configuration.
93

94
```typescript { .api }
95
class EditorView {
96
  /**
97
   * Update the view's props. Will immediately cause an update to the DOM.
98
   */
99
  update(props: DirectEditorProps): void;
100
  
101
  /**
102
   * Update the view by updating existing props object with the object
103
   * given as argument. Equivalent to `view.update(Object.assign({}, view.props, props))`.
104
   */
105
  setProps(props: Partial<DirectEditorProps>): void;
106
  
107
  /**
108
   * Update the editor's `state` prop, without touching any of the other props.
109
   */
110
  updateState(state: EditorState): void;
111
}
112
```
113

114
**Usage Examples:**
115

116
```typescript
117
// Update state
118
const newState = view.state.apply(transaction);
119
view.updateState(newState);
120

121
// Update props
122
view.setProps({
123
  editable: false,
124
  decorations: () => myDecorations
125
});
126

127
// Full props update
128
view.update({
129
  ...view.props,
130
  state: newState,
131
  handleKeyDown: myKeyHandler
132
});
133
```
134

135
### Focus Management
136

137
Methods for managing editor focus state.
138

139
```typescript { .api }
140
class EditorView {
141
  /**
142
   * Query whether the view has focus.
143
   * Works around IE focus handling issues.
144
   */
145
  hasFocus(): boolean;
146
  
147
  /**
148
   * Focus the editor.
149
   */
150
  focus(): void;
151
  
152
  /**
153
   * When an existing editor view is moved to a new document or
154
   * shadow tree, call this to make it recompute its root.
155
   */
156
  updateRoot(): void;
157
}
158
```
159

160
**Usage Examples:**
161

162
```typescript
163
// Check and focus if needed
164
if (!view.hasFocus()) {
165
  view.focus();
166
}
167

168
// After moving to new document/shadow root
169
view.updateRoot();
170
```
171

172
### Prop Querying
173

174
Utility for querying prop values across the view and its plugins.
175

176
```typescript { .api }
177
class EditorView {
178
  /**
179
   * Goes over the values of a prop, first those provided directly,
180
   * then those from plugins given to the view, then from plugins in
181
   * the state (in order), and calls `f` every time a non-undefined
182
   * value is found. When `f` returns a truthy value, that is
183
   * immediately returned. When `f` isn't provided, it is treated as
184
   * the identity function (the prop value is returned directly).
185
   */
186
  someProp<PropName extends keyof EditorProps, Result>(
187
    propName: PropName,
188
    f: (value: NonNullable<EditorProps[PropName]>) => Result
189
  ): Result | undefined;
190
  
191
  someProp<PropName extends keyof EditorProps>(
192
    propName: PropName
193
  ): NonNullable<EditorProps[PropName]> | undefined;
194
}
195
```
196

197
**Usage Examples:**
198

199
```typescript
200
// Get first editable prop value
201
const isEditable = view.someProp("editable", f => f(view.state));
202

203
// Check if any plugin handles a key
204
const handled = view.someProp("handleKeyDown", f => f(view, event));
205

206
// Get nodeViews configuration
207
const nodeViews = view.someProp("nodeViews");
208
```
209

210
### Transaction Dispatch
211

212
Method for dispatching transactions to update the editor state.
213

214
```typescript { .api }
215
class EditorView {
216
  /**
217
   * Dispatch a transaction. Will call `dispatchTransaction` when given,
218
   * and otherwise defaults to applying the transaction to the current
219
   * state and calling `updateState` with the result.
220
   * This method is bound to the view instance, so that it can be
221
   * easily passed around.
222
   */
223
  dispatch(tr: Transaction): void;
224
}
225
```
226

227
**Usage Examples:**
228

229
```typescript
230
import { TextSelection } from "prosemirror-state";
231

232
// Create and dispatch transaction
233
const tr = view.state.tr.insertText("Hello, world!");
234
view.dispatch(tr);
235

236
// Move cursor to start
237
const startSelection = TextSelection.create(view.state.doc, 0);
238
view.dispatch(view.state.tr.setSelection(startSelection));
239

240
// Use as callback
241
button.addEventListener("click", view.dispatch);
242
```
243

244
### Cleanup
245

246
Method for properly destroying the editor view.
247

248
```typescript { .api }
249
class EditorView {
250
  /**
251
   * Removes the editor from the DOM and destroys all node views.
252
   */
253
  destroy(): void;
254
}
255
```
256

257
**Usage Examples:**
258

259
```typescript
260
// Clean up when component unmounts
261
useEffect(() => {
262
  return () => {
263
    view.destroy();
264
  };
265
}, [view]);
266

267
// Check if destroyed
268
if (view.isDestroyed) {
269
  console.log("View has been destroyed");
270
}
271
```
272

273
### Testing Utilities
274

275
Methods primarily intended for testing scenarios.
276

277
```typescript { .api }
278
class EditorView {
279
  /**
280
   * Used for testing. Dispatches a DOM event to the view.
281
   */
282
  dispatchEvent(event: Event): boolean;
283
}
284
```
285

286
**Usage Examples:**
287

288
```typescript
289
// Simulate key press in tests
290
const keyEvent = new KeyboardEvent("keydown", { key: "Enter" });
291
const handled = view.dispatchEvent(keyEvent);
292
```