Decoration

Decoration objects can be provided to the view through the decorations prop. They come in several variants—see the static members of this class for details.

class Decoration {

readonly from: number;

get spec(): any;

readonly to: number;

static inline(

from: number,

to: number,

attrs: DecorationAttrs,

spec?: {

[key: string]: any;

inclusiveStart?: boolean;

inclusiveEnd?: boolean;

): Decoration;

static node(

from: number,

to: number,

attrs: DecorationAttrs,

spec?: any,

): Decoration;

static widget(

pos: number,

toDOM: WidgetConstructor,

spec?: {

[key: string]: any;

side?: number;

marks?: readonly Mark[];

stopEvent?: (event: Event) => boolean;

ignoreSelection?: boolean;

key?: string;

destroy?: (node: DOMNode) => void;

): Decoration;

}

§Properties

from: number

[src]

The start position of the decoration.

spec: any readonly

[src]

The spec provided when creating this decoration. Can be useful if you've stored extra information in that object.

to: number

[src]

The end position. Will be the same as from for widget decorations.

§Static Methods

inline(from: number, to: number, attrs: DecorationAttrs, spec?: {

[key: string]: any;

inclusiveStart?: boolean;

inclusiveEnd?: boolean;

}): Decoration

[src]

Creates an inline decoration, which adds the given attributes to each inline node between from and to.

node(from: number, to: number, attrs: DecorationAttrs, spec?: any): Decoration

[src]

Creates a node decoration. from and to should point precisely before and after a node in the document. That node, and only that node, will receive the given attributes.

widget(pos: number, toDOM: WidgetConstructor, spec?: {

[key: string]: any;

side?: number;

marks?: readonly Mark[];

stopEvent?: (event: Event) => boolean;

ignoreSelection?: boolean;

key?: string;

destroy?: (node: DOMNode) => void;

}): Decoration

[src]

Creates a widget decoration, which is a DOM node that's shown in the document at the given position. It is recommended that you delay rendering the widget by passing a function that will be called when the widget is actually drawn in a view, but you can also directly pass a DOM node. getPos can be used to find the widget's current document position.