prosemirror-view

To provide custom rendering and behavior for specific nodes or marks, you provide constructor functions via the nodeViews or markViews properties in EditorProps.

NodeViews

A NodeViewConstructor receives:

• node: The current Node being rendered.
• view: The EditorView instance.
• getPos: A function to retrieve the node's current position in the document.
• decorations: Active decorations around the node.
• innerDecorations: Decorations for the node's content.

MarkViews

A MarkViewConstructor receives:

• mark: The current Mark being rendered.
• view: The EditorView instance.
• inline: A boolean indicating if the mark is inline.

The editor manages copy, cut, and paste events.

• Copy/Cut: When a selection is made, the editor serializes the content into HTML and plain text to populate the clipboard. If the browser's clipboard API is broken (e.g., older IE/Edge), it uses a fallback captureCopy mechanism.
• Paste: The editor parses clipboard data into a Slice. You can intercept this via handlePaste in view.someProp.

A ViewMutationRecord represents a change that occurred within the editor view. This includes standard DOM mutations (via MutationObserver) and selection changes.

When a selection change is recorded, the object includes a type: "selection" property and a target property pointing to the DOMNode where the selection occurred.

type ViewMutationRecord = MutationRecord | { type: "selection", target: DOMNode }

When building a NodeView, the update method is critical for performance. It is called when the underlying document changes. If your update method returns false, the EditorView will destroy the current DOM and create a new view from scratch.

For custom views, the update logic typically follows this pattern:

1. Check if the node type is compatible (or if spec.multiType is true).
2. Call your custom update logic.
3. If your custom logic returns true, call this.updateInner(...) to sync the contentDOM and decorations.
4. Return the result of your custom update.

When initializing an EditorView, you can provide a configuration object to control how the view interacts with the document state and plugins.

• plugins: An array of Plugin objects to use in the view. These plugins will have their view and props applied. Note: Do not pass plugins that contain state components (like state fields, filterTransaction filters, or appenders) directly to the EditorView configuration. Such plugins must be part of the EditorState to function correctly; otherwise, an error will occur.

• dispatchTransaction: A callback function used to handle transactions (state updates) produced by the view. If you provide this callback, you are responsible for ensuring that the new state is applied to the view, typically by calling the view's updateState method with a new state that has the transaction applied via state.apply(tr).

Use scrollRectIntoView to ensure a specific rectangular area is visible within the editor's viewport. It traverses up the DOM tree from a starting node (or the editor itself) to find scrollable containers and adjusts their scrollTop and scrollLeft properties.

This function respects the following EditorView properties:

• scrollThreshold: A value (number or Rect) defining the boundary within which scrolling is triggered.
• scrollMargin: A number defining the padding applied to the scrolled position.

If the container is the document.body, it uses window.scrollBy. Otherwise, it scrolls the specific HTMLElement.

The textRange function creates a DOM Range object covering a specific portion of a Text node. To optimize performance, it reuses a single Range object internally. If you need to ensure the next call starts with a fresh range object, call clearReusedRange() first.

• node: The Text node to target.
• from (optional): The starting offset within the text node.
• to (optional): The ending offset within the text node. If omitted, it defaults to the end of the text node.

Use selectionFromDOM(view, origin) to translate a native browser selection into a ProseMirror Selection object. This is essential when you need to synchronize the editor's state with user interactions that happen at the DOM level (like drag-and-drop or external selection changes).

• view: The current EditorView instance.
• origin (optional): A string (e.g., "pointer") used to determine the selection bias. Providing "pointer" helps ensure the selection direction matches the user's interaction.

Returns a Selection object (like TextSelection or NodeSelection) or null if the selection cannot be mapped to the document.