Hi there! Are you looking for the official Deno documentation? Try docs.deno.com for all your Deno learning needs.

EditorProps

Props are configuration values that can be passed to an editor view or included in a plugin. This interface lists the supported props.

The various event-handling functions may all return true to indicate that they handled the given event. The view will then take care to call preventDefault on the event, except with handleDOMEvents, where the handler itself is responsible for that.

How a prop is resolved depends on the prop. Handler functions are called one at a time, starting with the base props and then searching through the plugins (in order of appearance) until one of them returns true. For some props, the first plugin that yields a value gets precedence.

The optional type parameter refers to the type of this in prop functions, and is used to pass in the plugin type when defining a plugin.

interface EditorProps <P = any> {
attributes?: {
[name: string]: string;
}
| ((state: EditorState) => {
[name: string]: string;
}
)
;
clipboardParser?: DOMParser;
clipboardSerializer?: DOMSerializer;
clipboardTextParser?: (
this: P,
text: string,
$context: ResolvedPos,
plain: boolean,
view: EditorView,
) => Slice
;
clipboardTextSerializer?: (
this: P,
content: Slice,
view: EditorView,
) => string
;
createSelectionBetween?: (
this: P,
view: EditorView,
anchor: ResolvedPos,
) => Selection | null
;
decorations?: (this: P, state: EditorState) => DecorationSource | null | undefined;
domParser?: DOMParser;
editable?: (this: P, state: EditorState) => boolean;
handleClick?: (
this: P,
view: EditorView,
pos: number,
event: MouseEvent,
) => boolean | void
;
handleClickOn?: (
this: P,
view: EditorView,
pos: number,
node: Node,
nodePos: number,
event: MouseEvent,
direct: boolean,
) => boolean | void
;
handleDOMEvents?: [event in keyof DOMEventMap]?: (
this: P,
view: EditorView,
event: DOMEventMap[event],
) => boolean | void
;
handleDoubleClick?: (
this: P,
view: EditorView,
pos: number,
event: MouseEvent,
) => boolean | void
;
handleDoubleClickOn?: (
this: P,
view: EditorView,
pos: number,
node: Node,
nodePos: number,
event: MouseEvent,
direct: boolean,
) => boolean | void
;
handleDrop?: (
this: P,
view: EditorView,
event: DragEvent,
slice: Slice,
moved: boolean,
) => boolean | void
;
handleKeyDown?: (
this: P,
view: EditorView,
event: KeyboardEvent,
) => boolean | void
;
handleKeyPress?: (
this: P,
view: EditorView,
event: KeyboardEvent,
) => boolean | void
;
handlePaste?: (
this: P,
view: EditorView,
event: ClipboardEvent,
slice: Slice,
) => boolean | void
;
handleScrollToSelection?: (this: P, view: EditorView) => boolean;
handleTextInput?: (
this: P,
view: EditorView,
from: number,
to: number,
text: string,
) => boolean | void
;
handleTripleClick?: (
this: P,
view: EditorView,
pos: number,
event: MouseEvent,
) => boolean | void
;
handleTripleClickOn?: (
this: P,
view: EditorView,
pos: number,
node: Node,
nodePos: number,
event: MouseEvent,
direct: boolean,
) => boolean | void
;
markViews?: {
[mark: string]: MarkViewConstructor;
}
;
nodeViews?: {
[node: string]: NodeViewConstructor;
}
;
scrollMargin?: number | {
top: number;
right: number;
bottom: number;
left: number;
}
;
scrollThreshold?: number | {
top: number;
right: number;
bottom: number;
left: number;
}
;
transformCopied?: (
this: P,
slice: Slice,
view: EditorView,
) => Slice
;
transformPasted?: (
this: P,
slice: Slice,
view: EditorView,
) => Slice
;
transformPastedHTML?: (
this: P,
html: string,
view: EditorView,
) => string
;
transformPastedText?: (
this: P,
text: string,
plain: boolean,
view: EditorView,
) => string
;
}

§Type Parameters

§
P = any
[src]

§Properties

§
attributes?: {
[name: string]: string;
}
| ((state: EditorState) => {
[name: string]: string;
}
)
[src]

Control the DOM attributes of the editable element. May be either an object or a function going from an editor state to an object. By default, the element will get a class "ProseMirror", and will have its contentEditable attribute determined by the editable prop. Additional classes provided here will be added to the class. For other attributes, the value provided first (as in someProp) will be used.

§
clipboardParser?: DOMParser
[src]

The parser to use when reading content from the clipboard. When not given, the value of the domParser prop is used.

§
clipboardSerializer?: DOMSerializer
[src]

The DOM serializer to use when putting content onto the clipboard. If not given, the result of DOMSerializer.fromSchema will be used. This object will only have its serializeFragment method called, and you may provide an alternative object type implementing a compatible method.

§
clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean, view: EditorView) => Slice
[src]

A function to parse text from the clipboard into a document slice. Called after transformPastedText. The default behavior is to split the text into lines, wrap them in <p> tags, and call clipboardParser on it. The plain flag will be true when the text is pasted as plain text.

§
clipboardTextSerializer?: (this: P, content: Slice, view: EditorView) => string
[src]

A function that will be called to get the text for the current selection when copying text to the clipboard. By default, the editor will use textBetween on the selected range.

§
createSelectionBetween?: (this: P, view: EditorView, anchor: ResolvedPos, head: ResolvedPos) => Selection | null
[src]

Can be used to override the way a selection is created when reading a DOM selection between the given anchor and head.

§
decorations?: (this: P, state: EditorState) => DecorationSource | null | undefined
[src]

A set of document decorations to show in the view.

§
domParser?: DOMParser
[src]

The parser to use when reading editor changes from the DOM. Defaults to calling DOMParser.fromSchema on the editor's schema.

§
editable?: (this: P, state: EditorState) => boolean
[src]

When this returns false, the content of the view is not directly editable.

§
handleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
[src]

Called when the editor is clicked, after handleClickOn handlers have been called.

§
handleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
[src]

Called for each node around a click, from the inside out. The direct flag will be true for the inner node.

§
handleDOMEvents?: [event in keyof DOMEventMap]?: (this: P, view: EditorView, event: DOMEventMap[event]) => boolean | void
[src]

Can be an object mapping DOM event type names to functions that handle them. Such functions will be called before any handling ProseMirror does of events fired on the editable DOM element. Contrary to the other event handling props, when returning true from such a function, you are responsible for calling preventDefault yourself (or not, if you want to allow the default behavior).

§
handleDoubleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
[src]

Called when the editor is double-clicked, after handleDoubleClickOn.

§
handleDoubleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
[src]

Called for each node around a double click.

§
handleDrop?: (this: P, view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void
[src]

Called when something is dropped on the editor. moved will be true if this drop moves from the current selection (which should thus be deleted).

§
handleKeyDown?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void
[src]

Called when the editor receives a keydown event.

§
handleKeyPress?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void
[src]

Handler for keypress events.

§
handlePaste?: (this: P, view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void
[src]

Can be used to override the behavior of pasting. slice is the pasted content parsed by the editor, but you can directly access the event to get at the raw content.

§
handleScrollToSelection?: (this: P, view: EditorView) => boolean
[src]

Called when the view, after updating its state, tries to scroll the selection into view. A handler function may return false to indicate that it did not handle the scrolling and further handlers or the default behavior should be tried.

§
handleTextInput?: (this: P, view: EditorView, from: number, to: number, text: string) => boolean | void
[src]

Whenever the user directly input text, this handler is called before the input is applied. If it returns true, the default behavior of actually inserting the text is suppressed.

§
handleTripleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
[src]

Called when the editor is triple-clicked, after handleTripleClickOn.

§
handleTripleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
[src]

Called for each node around a triple click.

§
markViews?: {
[mark: string]: MarkViewConstructor;
}
[src]

Pass custom mark rendering functions. Note that these cannot provide the kind of dynamic behavior that node views can—they just provide custom rendering logic. The third argument indicates whether the mark's content is inline.

§
nodeViews?: {
[node: string]: NodeViewConstructor;
}
[src]

Allows you to pass custom rendering and behavior logic for nodes. Should map node names to constructor functions that produce a NodeView object implementing the node's display behavior. The third argument getPos is a function that can be called to get the node's current position, which can be useful when creating transactions to update it. Note that if the node is not in the document, the position returned by this function will be undefined.

`decorations` is an array of node or inline decorations that are
active around the node. They are automatically drawn in the
normal way, and you will usually just want to ignore this, but
they can also be used as a way to provide context information to
the node view without adding it to the document itself.

`innerDecorations` holds the decorations for the node's content.
You can safely ignore this if your view has no content or a
`contentDOM` property, since the editor will draw the decorations
on the content. But if you, for example, want to create a nested
editor with the content, it may make sense to provide it with the
inner decorations.

(For backwards compatibility reasons, [mark
views](https://prosemirror.net/docs/ref/#view.EditorProps.markViews) can also be included in this
object.)
§
scrollMargin?: number | {
top: number;
right: number;
bottom: number;
left: number;
}
[src]

Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view. Defaults to 5.

§
scrollThreshold?: number | {
top: number;
right: number;
bottom: number;
left: number;
}
[src]

Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point, when scrolling the cursor into view, scrolling takes place. Defaults to 0.

§
transformCopied?: (this: P, slice: Slice, view: EditorView) => Slice
[src]

Can be used to transform copied or cut content before it is serialized to the clipboard.

§
transformPasted?: (this: P, slice: Slice, view: EditorView) => Slice
[src]

Can be used to transform pasted or dragged-and-dropped content before it is applied to the document.

§
transformPastedHTML?: (this: P, html: string, view: EditorView) => string
[src]

Can be used to transform pasted HTML text, before it is parsed, for example to clean it up.

§
transformPastedText?: (this: P, text: string, plain: boolean, view: EditorView) => string
[src]

Transform pasted plain text. The plain flag will be true when the text is pasted as plain text.