Marker

class

Marker is a continuous part of the model (like a range), is named and represents some kind of information about the marked part of the model document. In contrary to nodes, which are building blocks of the model document tree, markers are not stored directly in the document tree but in the model markers' collection. Still, they are document data, by giving additional meaning to the part of a model document between marker start and marker end.

In this sense, markers are similar to adding and converting attributes on nodes. The difference is that attribute is connected with a given node (e.g. a character is bold no matter if it gets moved or content around it changes). Markers on the other hand are continuous ranges and are characterized by their start and end position. This means that any character in the marker is marked by the marker. For example, if a character is moved outside of marker it stops being "special" and the marker is shrunk. Similarly, when a character is moved into the marker from other place in document model, it starts being "special" and the marker is enlarged.

Another upside of markers is that finding marked part of document is fast and easy. Using attributes to mark some nodes and then trying to find that part of document would require traversing whole document tree. Marker gives instant access to the range which it is marking at the moment.

Markers are built from a name and a range.

Range of the marker is updated automatically when document changes, using live range mechanism.

Name is used to group and identify markers. Names have to be unique, but markers can be grouped by using common prefixes, separated with :, for example: user:john or search:3. That's useful in term of creating namespaces for custom elements (e.g. comments, highlights). You can use this prefixes in event-update listeners to listen on changes in a group of markers. For instance: model.markers.on( 'update:user', callback ); will be called whenever any user:* markers changes.

There are two types of markers.

Markers managed directly, without using operations. They are added directly by ModelWriter to the MarkerCollection without any additional mechanism. They can be used as bookmarks or visual markers. They are great for showing results of the find, or select link when the focus is in the input.
Markers managed using operations. These markers are also stored in MarkerCollection but changes in these markers is managed the same way all other changes in the model structure - using operations. Therefore, they are handled in the undo stack and synchronized between clients if the collaboration plugin is enabled. This type of markers is useful for solutions like spell checking or comments.

Both type of them should be added / updated by addMarker and removed by removeMarker methods.

model.change( ( writer ) => {
	const marker = writer.addMarker( name, { range, usingOperation: true } );

	// ...

	writer.removeMarker( marker );
} );

See ModelWriter to find more examples.

Since markers need to track change in the document, for efficiency reasons, it is best to create and keep as little markers as possible and remove them as soon as they are not needed anymore.

Markers can be downcasted and upcasted.

Markers downcast happens on event-addMarker and event-removeMarker events. Use downcast converters or attach a custom converter to mentioned events. For data pipeline, marker should be downcasted to an element. Then, it can be upcasted back to a marker. Again, use upcast converters or attach a custom converter to event-element.

Marker instances are created and destroyed only by MarkerCollection.

See source

Properties

affectsData : boolean
readonly

A value indicating if the marker changes the data.

See source (with github icon)
managedUsingOperations : boolean
readonly

A value indicating if the marker is managed using operations. See marker class description to learn more about marker types. See addMarker.

See source (with github icon)
name : string
readonly

Marker's name.

See source (with github icon)
_affectsData : boolean
internal

Specifies whether the marker affects the data produced by the data pipeline (is persisted in the editor's data).

See source (with github icon)
_managedUsingOperations : boolean
internal

Flag indicates if the marker is managed using operations or not.

See source (with github icon)
_liveRange : null | ModelLiveRange
private

Range marked by the marker.

See source (with github icon)

Methods

constructor( name, liveRange, managedUsingOperations, affectsData )

Creates a marker instance.

See source (with github icon)

Parameters

name : string

Marker name.

liveRange : ModelLiveRange

Range marked by the marker.

managedUsingOperations : boolean

Specifies whether the marker is managed using operations.

affectsData : boolean

Specifies whether the marker affects the data produced by the data pipeline (is persisted in the editor's data).
delegate( events ) → EmitterMixinDelegateChain
inherited

module:engine/model/markercollection~Marker#delegate
Delegates selected events to another Emitter. For instance:
```
emitterA.delegate( 'eventX' ).to( emitterB );
emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
```
Copy code
then eventX is delegated (fired by) emitterB and emitterC along with data:
```
emitterA.fire( 'eventX', data );
```
Copy code
and eventY is delegated (fired by) emitterC along with data:
```
emitterA.fire( 'eventY', data );
```
Copy code
See source (with github icon)

Parameters

events : Array<string>

Event names that will be delegated to another emitter.

Returns

EmitterMixinDelegateChain
fire( eventOrInfo, args ) → GetEventInfo<TEvent>[ 'return' ]
inherited

Fires an event, executing all callbacks registered for it.

The first parameter passed to callbacks is an EventInfo object, followed by the optional args provided in the fire() method call.

See source (with github icon)

Type parameters

TEvent : extends BaseEvent

The type describing the event. See BaseEvent.

Parameters

eventOrInfo : GetNameOrEventInfo<TEvent>

The name of the event or EventInfo object if event is delegated.

args : TEvent[ 'args' ]

Additional arguments to be passed to the callbacks.

Returns

GetEventInfo<TEvent>[ 'return' ]

By default the method returns undefined. However, the return value can be changed by listeners through modification of the evt.return's property (the event info is the first param of every callback).
getData() → MarkerData

Returns the marker data (properties defining the marker).

See source (with github icon)

Returns

MarkerData
getEnd() → ModelPosition

Returns current marker end position.

See source (with github icon)

Returns

ModelPosition
getRange() → ModelRange

Returns a range that represents the current state of the marker.

Keep in mind that returned value is a Range, not a ModelLiveRange. This means that it is up-to-date and relevant only until next model document change. Do not store values returned by this method. Instead, store name and get Marker instance from MarkerCollection every time there is a need to read marker properties. This will guarantee that the marker has not been removed and that it's data is up-to-date.

See source (with github icon)

Returns

ModelRange
getStart() → ModelPosition

Returns current marker start position.

See source (with github icon)

Returns

ModelPosition
is( type ) → this is ModelElement | ModelRootElement
inherited

module:engine/model/markercollection~Marker#is:ELEMENT
Checks whether the object is of type ModelElement or its subclass.
```
element.is( 'element' ); // -> true
element.is( 'node' ); // -> true
element.is( 'model:element' ); // -> true
element.is( 'model:node' ); // -> true

element.is( 'view:element' ); // -> false
element.is( 'documentSelection' ); // -> false
```
Copy code
Assuming that the object being checked is an element, you can also check its name:
```
element.is( 'element', 'imageBlock' ); // -> true if this is an <imageBlock> element
text.is( 'element', 'imageBlock' ); -> false
```
Copy code
See source (with github icon)

Parameters

type : 'element' | 'model:element'

Returns

this is ModelElement | ModelRootElement
is( type ) → this is ModelRootElement
inherited

module:engine/model/markercollection~Marker#is:ROOT_ELEMENT
Checks whether the object is of type ModelRootElement.
```
rootElement.is( 'rootElement' ); // -> true
rootElement.is( 'element' ); // -> true
rootElement.is( 'node' ); // -> true
rootElement.is( 'model:rootElement' ); // -> true
rootElement.is( 'model:element' ); // -> true
rootElement.is( 'model:node' ); // -> true

rootElement.is( 'view:element' ); // -> false
rootElement.is( 'documentFragment' ); // -> false
```
Copy code
Assuming that the object being checked is an element, you can also check its name:
```
rootElement.is( 'rootElement', '$root' ); // -> same as above
```
Copy code
See source (with github icon)

Parameters

type : 'rootElement' | 'model:rootElement'

Returns

this is ModelRootElement
is( type ) → this is ModelText
inherited

module:engine/model/markercollection~Marker#is:TEXT
Checks whether the object is of type ModelText.
```
text.is( '$text' ); // -> true
text.is( 'node' ); // -> true
text.is( 'model:$text' ); // -> true
text.is( 'model:node' ); // -> true

text.is( 'view:$text' ); // -> false
text.is( 'documentSelection' ); // -> false
```
Copy code
Note: Until version 20.0.0 this method wasn't accepting '$text' type. The legacy 'text' type is still accepted for backward compatibility.

See source (with github icon)

Parameters

type : '$text' | 'model:$text'

Returns

this is ModelText
is( type ) → this is ModelLiveRange
inherited

module:engine/model/markercollection~Marker#is:LIVE_RANGE
Checks whether the object is of type ModelLiveRange.
```
liveRange.is( 'range' ); // -> true
liveRange.is( 'model:range' ); // -> true
liveRange.is( 'liveRange' ); // -> true
liveRange.is( 'model:liveRange' ); // -> true

liveRange.is( 'view:range' ); // -> false
liveRange.is( 'documentSelection' ); // -> false
```
Copy code
See source (with github icon)

Parameters

type : 'liveRange' | 'model:liveRange'

Returns

this is ModelLiveRange
is( type ) → this is ModelDocumentFragment
inherited

module:engine/model/markercollection~Marker#is:DOCUMENT_FRAGMENT
Checks whether the object is of type ModelDocumentFragment.
```
docFrag.is( 'documentFragment' ); // -> true
docFrag.is( 'model:documentFragment' ); // -> true

docFrag.is( 'view:documentFragment' ); // -> false
docFrag.is( 'element' ); // -> false
docFrag.is( 'node' ); // -> false
```
Copy code
See source (with github icon)

Parameters

type : 'documentFragment' | 'model:documentFragment'

Returns

this is ModelDocumentFragment
is( type ) → this is ModelRange | ModelLiveRange
inherited

module:engine/model/markercollection~Marker#is:RANGE
Checks whether the object is of type ModelRange or its subclass.
```
range.is( 'range' ); // -> true
range.is( 'model:range' ); // -> true

range.is( 'view:range' ); // -> false
range.is( 'documentSelection' ); // -> false
```
Copy code
See source (with github icon)

Parameters

type : 'range' | 'model:range'

Returns

this is ModelRange | ModelLiveRange
is( type ) → this is ModelLivePosition
inherited

module:engine/model/markercollection~Marker#is:LIVE_POSITION
Checks whether the object is of type ModelLivePosition.
```
livePosition.is( 'position' ); // -> true
livePosition.is( 'model:position' ); // -> true
livePosition.is( 'liveposition' ); // -> true
livePosition.is( 'model:livePosition' ); // -> true

livePosition.is( 'view:position' ); // -> false
livePosition.is( 'documentSelection' ); // -> false
```
Copy code
See source (with github icon)

Parameters

type : 'livePosition' | 'model:livePosition'

Returns

this is ModelLivePosition
is( type ) → this is ModelPosition | ModelLivePosition
inherited

module:engine/model/markercollection~Marker#is:POSITION
Checks whether the object is of type ModelPosition or its subclass.
```
position.is( 'position' ); // -> true
position.is( 'model:position' ); // -> true

position.is( 'view:position' ); // -> false
position.is( 'documentSelection' ); // -> false
```
Copy code
See source (with github icon)

Parameters

type : 'position' | 'model:position'

Returns

this is ModelPosition | ModelLivePosition
is( type ) → this is ModelSelection | ModelDocumentSelection
inherited

module:engine/model/markercollection~Marker#is:SELECTION
Checks whether the object is of type ModelSelection or ModelDocumentSelection.
```
selection.is( 'selection' ); // -> true
selection.is( 'model:selection' ); // -> true

selection.is( 'view:selection' ); // -> false
selection.is( 'range' ); // -> false
```
Copy code
See source (with github icon)

Parameters

type : 'selection' | 'model:selection'

Returns

this is ModelSelection | ModelDocumentSelection
is( type ) → this is Marker
inherited

module:engine/model/markercollection~Marker#is:MARKER
Checks whether the object is of type Marker.
```
marker.is( 'marker' ); // -> true
marker.is( 'model:marker' ); // -> true

marker.is( 'view:element' ); // -> false
marker.is( 'documentSelection' ); // -> false
```
Copy code
See source (with github icon)

Parameters

type : 'marker' | 'model:marker'

Returns

this is Marker
is( type, name ) → boolean
inherited

module:engine/model/markercollection~Marker#is:ELEMENT_NAME
Checks whether the object is of type ModelElement or its subclass and has the specified name.
```
element.is( 'element', 'imageBlock' ); // -> true if this is an <imageBlock> element
text.is( 'element', 'imageBlock' ); -> false
```
Copy code
See source (with github icon)

Type parameters

N : extends string

Parameters

type : 'element' | 'model:element'

name : N

Returns

boolean
is( type, name ) → boolean
inherited

module:engine/model/markercollection~Marker#is:ROOT_ELEMENT_NAME
Checks whether the object is of type ModelRootElement and has the specified name.
```
rootElement.is( 'rootElement', '$root' );
```
Copy code
See source (with github icon)

Type parameters

N : extends string

Parameters

type : 'rootElement' | 'model:rootElement'

name : N

Returns

boolean
is( type ) → this is ModelTextProxy
inherited

module:engine/model/markercollection~Marker#is:TEXT_PROXY
Checks whether the object is of type ModelTextProxy.
```
textProxy.is( '$textProxy' ); // -> true
textProxy.is( 'model:$textProxy' ); // -> true

textProxy.is( 'view:$textProxy' ); // -> false
textProxy.is( 'range' ); // -> false
```
Copy code
Note: Until version 20.0.0 this method wasn't accepting '$textProxy' type. The legacy 'textProxt' type is still accepted for backward compatibility.

See source (with github icon)

Parameters

type : '$textProxy' | 'model:$textProxy'

Returns

this is ModelTextProxy
is( type ) → this is ModelDocumentSelection
inherited

module:engine/model/markercollection~Marker#is:DOCUMENT_SELECTION
Checks whether the object is of type ModelDocumentSelection.
```
selection.is( 'selection' ); // -> true
selection.is( 'documentSelection' ); // -> true
selection.is( 'model:selection' ); // -> true
selection.is( 'model:documentSelection' ); // -> true

selection.is( 'view:selection' ); // -> false
selection.is( 'element' ); // -> false
selection.is( 'node' ); // -> false
```
Copy code
See source (with github icon)

Parameters

type : 'documentSelection' | 'model:documentSelection'

Returns

this is ModelDocumentSelection
is( type ) → this is ModelNode | ModelText | ModelElement | ModelRootElement
inherited

module:engine/model/markercollection~Marker#is:NODE
Checks whether the object is of type ModelNode or its subclass.

This method is useful when processing model objects that are of unknown type. For example, a function may return a ModelDocumentFragment or a ModelNode that can be either a text node or an element. This method can be used to check what kind of object is returned.
```
someObject.is( 'element' ); // -> true if this is an element
someObject.is( 'node' ); // -> true if this is a node (a text node or an element)
someObject.is( 'documentFragment' ); // -> true if this is a document fragment
```
Copy code
Since this method is also available on a range of view objects, you can prefix the type of the object with model: or view: to check, for example, if this is the model's or view's element:
```
modelElement.is( 'model:element' ); // -> true
modelElement.is( 'view:element' ); // -> false
```
Copy code
By using this method it is also possible to check a name of an element:
```
imageElement.is( 'element', 'imageBlock' ); // -> true
imageElement.is( 'element', 'imageBlock' ); // -> same as above
imageElement.is( 'model:element', 'imageBlock' ); // -> same as above, but more precise
```
Copy code
See source (with github icon)

Parameters

type : 'node' | 'model:node'

Returns

this is ModelNode | ModelText | ModelElement | ModelRootElement
listenTo( emitter, event, callback, [ options ] ) → void
inherited

module:engine/model/markercollection~Marker#listenTo:BASE_EMITTER
Registers a callback function to be executed when an event is fired in a specific (emitter) object.

Events can be grouped in namespaces using :. When namespaced event is fired, it additionally fires all callbacks for that namespace.
```
// myEmitter.on( ... ) is a shorthand for myEmitter.listenTo( myEmitter, ... ).
myEmitter.on( 'myGroup', genericCallback );
myEmitter.on( 'myGroup:myEvent', specificCallback );

// genericCallback is fired.
myEmitter.fire( 'myGroup' );
// both genericCallback and specificCallback are fired.
myEmitter.fire( 'myGroup:myEvent' );
// genericCallback is fired even though there are no callbacks for "foo".
myEmitter.fire( 'myGroup:foo' );
```
Copy code
An event callback can stop the event and set the return value of the fire method.

See source (with github icon)

Type parameters

TEvent : extends BaseEvent

The type describing the event. See BaseEvent.

Parameters

emitter : Emitter

The object that fires the event.

event : TEvent[ 'name' ]

The name of the event.

callback : GetCallback<TEvent>

The function to be called on event.

[ options ] : GetCallbackOptions<TEvent>

Additional options.

Returns

void
off( event, callback ) → void
inherited

Stops executing the callback on the given event. Shorthand for this.stopListening( this, event, callback ).

See source (with github icon)

Parameters

event : string

The name of the event.

callback : Function

The function to stop being called.

Returns

void
on( event, callback, [ options ] ) → void
inherited

Registers a callback function to be executed when an event is fired.

Shorthand for this.listenTo( this, event, callback, options ) (it makes the emitter listen on itself).

See source (with github icon)

Type parameters

TEvent : extends BaseEvent

The type descibing the event. See BaseEvent.

Parameters

event : TEvent[ 'name' ]

The name of the event.

callback : GetCallback<TEvent>

The function to be called on event.

[ options ] : GetCallbackOptions<TEvent>

Additional options.

Returns

void
once( event, callback, [ options ] ) → void
inherited

Registers a callback function to be executed on the next time the event is fired only. This is similar to calling on followed by off in the callback.

See source (with github icon)

Type parameters

TEvent : extends BaseEvent

The type descibing the event. See BaseEvent.

Parameters

event : TEvent[ 'name' ]

The name of the event.

callback : GetCallback<TEvent>

The function to be called on event.

[ options ] : GetCallbackOptions<TEvent>

Additional options.

Returns

void
stopDelegating( [ event ], [ emitter ] ) → void
inherited

module:engine/model/markercollection~Marker#stopDelegating
Stops delegating events. It can be used at different levels:
- To stop delegating all events.
- To stop delegating a specific event to all emitters.
- To stop delegating a specific event to a specific emitter.
See source (with github icon)

Parameters

[ event ] : string

The name of the event to stop delegating. If omitted, stops it all delegations.

[ emitter ] : Emitter

(requires event) The object to stop delegating a particular event to. If omitted, stops delegation of event to all emitters.

Returns

void
stopListening( [ emitter ], [ event ], [ callback ] ) → void
inherited

module:engine/model/markercollection~Marker#stopListening:BASE_STOP
Stops listening for events. It can be used at different levels:
- To stop listening to a specific callback.
- To stop listening to a specific event.
- To stop listening to all events fired by a specific object.
- To stop listening to all events fired by all objects.
See source (with github icon)

Parameters

[ emitter ] : Emitter

The object to stop listening to. If omitted, stops it for all objects.

[ event ] : string

(Requires the emitter) The name of the event to stop listening to. If omitted, stops it for all events from emitter.

[ callback ] : Function

(Requires the event) The function to be removed from the call list for the given event.

Returns

void
toJSON() → unknown

Converts Marker to plain object and returns it.

See source (with github icon)

Returns

unknown

Marker converted to plain object.
_attachLiveRange( liveRange ) → ModelLiveRange
internal

Binds new live range to the marker and detach the old one if is attached.

See source (with github icon)

Parameters

liveRange : ModelLiveRange

Live range to attach

Returns

ModelLiveRange

Attached live range.
_detachLiveRange() → void
internal

Unbinds and destroys currently attached live range.

See source (with github icon)

Returns

void

Events

change:content( eventInfo, range, data )

module:engine/model/markercollection~Marker#event:change:content
Fired whenever change on ModelDocument is done inside marker range. This is a delegated ModelLiveRange change:content event.

When marker is removed from MarkerCollection, all event listeners listening to it should be removed. It is best to do it on MarkerCollection update event.

See source (with github icon)

Parameters

eventInfo : EventInfo

An object containing information about the fired event.

range : ModelRange

data : object

Related:
- ModelLiveRange#event:change:content
change:range( eventInfo, range, data )

module:engine/model/markercollection~Marker#event:change:range
Fired whenever marker range is changed due to changes on ModelDocument. This is a delegated ModelLiveRange change:range event.

When marker is removed from MarkerCollection, all event listeners listening to it should be removed. It is best to do it on MarkerCollection update event.

See source (with github icon)

Parameters

eventInfo : EventInfo

An object containing information about the fired event.

range : ModelRange

data : object

Related:
- ModelLiveRange#event:change:range

Marker

Properties

affectsData : boolean readonly

managedUsingOperations : boolean readonly

name : string readonly

_affectsData : boolean internal

_managedUsingOperations : boolean internal

_liveRange : null | ModelLiveRange Lock icon private

Methods

constructor( name, liveRange, managedUsingOperations, affectsData )

Parameters

delegate( events ) → EmitterMixinDelegateChain inherited

Parameters

Returns

fire( eventOrInfo, args ) → GetEventInfo<TEvent>[ 'return' ] inherited

Type parameters

Parameters

Returns

getData() → MarkerData

Returns

getEnd() → ModelPosition

Returns

getRange() → ModelRange

Returns

getStart() → ModelPosition

Returns

is( type ) → this is ModelElement | ModelRootElement inherited

Parameters

Returns

is( type ) → this is ModelRootElement inherited

Parameters

Returns

is( type ) → this is ModelText inherited

Parameters

Returns

is( type ) → this is ModelLiveRange inherited

Parameters

Returns

is( type ) → this is ModelDocumentFragment inherited

Parameters

Returns

is( type ) → this is ModelRange | ModelLiveRange inherited

Parameters

Returns

is( type ) → this is ModelLivePosition inherited

Parameters

Returns

is( type ) → this is ModelPosition | ModelLivePosition inherited

Parameters

Returns

is( type ) → this is ModelSelection | ModelDocumentSelection inherited

Parameters

Returns

is( type ) → this is Marker inherited

Parameters

Returns

is( type, name ) → boolean inherited

Type parameters

Parameters

Returns

is( type, name ) → boolean inherited

Type parameters

Parameters

Returns

is( type ) → this is ModelTextProxy inherited

Parameters

Returns

is( type ) → this is ModelDocumentSelection inherited

Parameters

Returns

is( type ) → this is ModelNode | ModelText | ModelElement | ModelRootElement inherited

Parameters

Returns

listenTo( emitter, event, callback, [ options ] ) → void inherited

Type parameters

Parameters

Returns

off( event, callback ) → void inherited

Parameters

Returns

`affectsData : boolean`
readonly

`managedUsingOperations : boolean`
readonly

`name : string`
readonly

`_affectsData : boolean`
internal

`_managedUsingOperations : boolean`
internal

`_liveRange : null | ModelLiveRange`
private

`constructor( name, liveRange, managedUsingOperations, affectsData )`

`delegate( events ) → EmitterMixinDelegateChain`
inherited

`fire( eventOrInfo, args ) → GetEventInfo<TEvent>[ 'return' ]`
inherited

`getData() → MarkerData`

`getEnd() → ModelPosition`

`getRange() → ModelRange`

`getStart() → ModelPosition`

`is( type ) → this is ModelElement | ModelRootElement`
inherited

`is( type ) → this is ModelRootElement`
inherited

`is( type ) → this is ModelText`
inherited

`is( type ) → this is ModelLiveRange`
inherited

`is( type ) → this is ModelDocumentFragment`
inherited

`is( type ) → this is ModelRange | ModelLiveRange`
inherited

`is( type ) → this is ModelLivePosition`
inherited

`is( type ) → this is ModelPosition | ModelLivePosition`
inherited

`is( type ) → this is ModelSelection | ModelDocumentSelection`
inherited

`is( type ) → this is Marker`
inherited

`is( type, name ) → boolean`
inherited

`is( type, name ) → boolean`
inherited

`is( type ) → this is ModelTextProxy`
inherited

`is( type ) → this is ModelDocumentSelection`
inherited

`is( type ) → this is ModelNode | ModelText | ModelElement | ModelRootElement`
inherited

`listenTo( emitter, event, callback, [ options ] ) → void`
inherited

`off( event, callback ) → void`
inherited

`on( event, callback, [ options ] ) → void`
inherited

`once( event, callback, [ options ] ) → void`
inherited

`stopDelegating( [ event ], [ emitter ] ) → void`
inherited

`stopListening( [ emitter ], [ event ], [ callback ] ) → void`
inherited

`toJSON() → unknown`

`_attachLiveRange( liveRange ) → ModelLiveRange`
internal

`_detachLiveRange() → void`
internal

`change:content( eventInfo, range, data )`

`change:range( eventInfo, range, data )`