EditorView

An editor view manages the DOM structure that represents an editable document. Its state and behavior are determined by its props.

class EditorView {

constructor(place:

| null

| DOMNode

| ((editor: HTMLElement) => void)

| {

mount: HTMLElement;

}

, props: DirectEditorProps);

private _props;

private _root;

private destroyPluginViews;

private directPlugins;

private mounted;

private pluginViews;

private prevDirectPlugins;

private updateDraggedNode;

private updatePluginViews;

private updateStateInner;

get composing(): boolean;

readonly dom: HTMLElement;

dragging: null | {

slice: Slice;

move: boolean;

};

editable: boolean;

get props(): DirectEditorProps;

get root(): Document | ShadowRoot;

get isDestroyed(): boolean;

state: EditorState;

coordsAtPos(pos: number, side?: number): {

left: number;

right: number;

top: number;

bottom: number;

};

destroy(): void;

dispatch(tr: Transaction): void;

dispatchEvent(event: Event): void;

domAtPos(pos: number, side?: number): {

node: DOMNode;

offset: number;

};

endOfTextblock(dir:

| "up"

| "down"

| "left"

| "right"

| "forward"

| "backward"

, state?: EditorState): boolean;

focus(): void;

hasFocus(): boolean;

nodeDOM(pos: number): DOMNode | null;

pasteHTML(html: string, event?: ClipboardEvent): boolean;

pasteText(text: string, event?: ClipboardEvent): boolean;

posAtCoords(coords: {

left: number;

top: number;

}): {

pos: number;

inside: number;

} | null;

posAtDOM(

node: DOMNode,

offset: number,

bias?: number,

): number;

setProps(props: Partial<DirectEditorProps>): void;

someProp<PropName extends keyof EditorProps, Result>(propName: PropName, f: (value: NonNullable<EditorProps[PropName]>) => Result): Result | undefined;

someProp<PropName extends keyof EditorProps>(propName: PropName): NonNullable<EditorProps[PropName]> | undefined;

update(props: DirectEditorProps): void;

updateRoot(): void;

updateState(state: EditorState): void;

}

§Constructors

new EditorView(place: null | DOMNode | ((editor: HTMLElement) => void) | {

mount: HTMLElement;

}, props: DirectEditorProps)

[src]

Create a view. place may be a DOM node that the editor should be appended to, a function that will place it into the document, or an object whose mount property holds the node to use as the document container. If it is null, the editor will not be added to the document.

§Properties

_props

_root

destroyPluginViews

directPlugins

mounted

pluginViews

prevDirectPlugins

updateDraggedNode

updatePluginViews

updateStateInner

composing: boolean readonly

[src]

Holds true when a composition is active.

dom: HTMLElement

[src]

An editable DOM node containing the document. (You probably should not directly interfere with its content.)

dragging: null | {

slice: Slice;

move: boolean;

}

[src]

When editor content is being dragged, this object contains information about the dragged slice and whether it is being copied or moved. At any other time, it is null.

editable: boolean

[src]

Indicates whether the editor is currently editable.

props: DirectEditorProps readonly

[src]

The view's current props.

root: Document | ShadowRoot readonly

[src]

Get the document root in which the editor exists. This will usually be the top-level document, but might be a shadow DOM root if the editor is inside one.

isDestroyed: boolean readonly

[src]

This is true when the view has been destroyed (and thus should not be used anymore).

state: EditorState

[src]

The view's current state.

§Methods

coordsAtPos(pos: number, side?: number): {

left: number;

right: number;

top: number;

bottom: number;

}

[src]

Returns the viewport rectangle at a given document position. left and right will be the same number, as this returns a flat cursor-ish rectangle. If the position is between two things that aren't directly adjacent, side determines which element is used. When < 0, the element before the position is used, otherwise the element after.

destroy(): void

[src]

Removes the editor from the DOM and destroys all node views.

dispatch(tr: Transaction): void

[src]

Dispatch a transaction. Will call dispatchTransaction when given, and otherwise defaults to applying the transaction to the current state and calling updateState with the result. This method is bound to the view instance, so that it can be easily passed around.

dispatchEvent(event: Event): void

[src]

Used for testing.

domAtPos(pos: number, side?: number): {

node: DOMNode;

offset: number;

}

[src]

Find the DOM position that corresponds to the given document position. When side is negative, find the position as close as possible to the content before the position. When positive, prefer positions close to the content after the position. When zero, prefer as shallow a position as possible.

Note that you should*not** mutate the editor's internal DOM,
only inspect it (and even that is usually not necessary).

[src]

Find out whether the selection is at the end of a textblock when moving in a given direction. When, for example, given "left", it will return true if moving left from the current cursor position would leave that position's parent textblock. Will apply to the view's current state by default, but it is possible to pass a different state.

focus(): void

[src]

Focus the editor.

hasFocus(): boolean

[src]

Query whether the view has focus.

nodeDOM(pos: number): DOMNode | null

[src]

Find the DOM node that represents the document node after the given position. May return null when the position doesn't point in front of a node or if the node is inside an opaque node view.

This is intended to be able to call things like
`getBoundingClientRect` on that DOM node. Do*not** mutate the
editor DOM directly, or add styling this way, since that will be
immediately overriden by the editor as it redraws the node.

pasteHTML(html: string, event?: ClipboardEvent): boolean

[src]

Run the editor's paste logic with the given HTML string. The event, if given, will be passed to the handlePaste hook.

pasteText(text: string, event?: ClipboardEvent): boolean

[src]

Run the editor's paste logic with the given plain-text input.

posAtCoords(coords: {

left: number;

top: number;

}): {

pos: number;

inside: number;

} | null

[src]

Given a pair of viewport coordinates, return the document position that corresponds to them. May return null if the given coordinates aren't inside of the editor. When an object is returned, its pos property is the position nearest to the coordinates, and its inside property holds the position of the inner node that the position falls inside of, or -1 if it is at the top level, not in any node.

posAtDOM(node: DOMNode, offset: number, bias?: number): number

[src]

Find the document position that corresponds to a given DOM position. (Whenever possible, it is preferable to inspect the document structure directly, rather than poking around in the DOM, but sometimes—for example when interpreting an event target—you don't have a choice.)

The `bias` parameter can be used to influence which side of a DOM
node to use when the position is inside a leaf node.

setProps(props: Partial<DirectEditorProps>): void

[src]

Update the view by updating existing props object with the object given as argument. Equivalent to view.update(Object.assign({}, view.props, props)).

someProp<PropName extends keyof EditorProps, Result>(propName: PropName, f: (value: NonNullable<EditorProps[PropName]>) => Result): Result | undefined

[src]

Goes over the values of a prop, first those provided directly, then those from plugins given to the view, then from plugins in the state (in order), and calls f every time a non-undefined value is found. When f returns a truthy value, that is immediately returned. When f isn't provided, it is treated as the identity function (the prop value is returned directly).

someProp<PropName extends keyof EditorProps>(propName: PropName): NonNullable<EditorProps[PropName]> | undefined

[src]

update(props: DirectEditorProps): void

[src]

Update the view's props. Will immediately cause an update to the DOM.

updateRoot(): void

[src]

When an existing editor view is moved to a new document or shadow tree, call this to make it recompute its root.

updateState(state: EditorState): void

[src]

Update the editor's state prop, without touching any of the other props.