Marker
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 theMarkerCollection
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.
Properties
-
affectsData : boolean
readonlymodule:engine/model/markercollection~Marker#affectsData
A value indicating if the marker changes the data.
-
managedUsingOperations : boolean
readonlymodule:engine/model/markercollection~Marker#managedUsingOperations
A value indicating if the marker is managed using operations. See marker class description to learn more about marker types. See
addMarker
. -
name : string
readonlymodule:engine/model/markercollection~Marker#name
Marker's name.
-
_affectsData : boolean
internalmodule:engine/model/markercollection~Marker#_affectsData
Specifies whether the marker affects the data produced by the data pipeline (is persisted in the editor's data).
-
_managedUsingOperations : boolean
internalmodule:engine/model/markercollection~Marker#_managedUsingOperations
Flag indicates if the marker is managed using operations or not.
-
_liveRange : null | ModelLiveRange
privatemodule:engine/model/markercollection~Marker#_liveRange
Range marked by the marker.
Methods
-
constructor( name, liveRange, managedUsingOperations, affectsData )
module:engine/model/markercollection~Marker#constructor
Creates a marker instance.
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
inheritedmodule:engine/model/markercollection~Marker#delegate
Delegates selected events to another
Emitter
. For instance:emitterA.delegate( 'eventX' ).to( emitterB ); emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
then
eventX
is delegated (fired by)emitterB
andemitterC
along withdata
:emitterA.delegate( 'eventX' ).to( emitterB ); emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
and
eventY
is delegated (fired by)emitterC
along withdata
:emitterA.delegate( 'eventX' ).to( emitterB ); emitterA.delegate( 'eventX', 'eventY' ).to( emitterC );
Parameters
events : Array<string>
Event names that will be delegated to another emitter.
Returns
-
fire( eventOrInfo, args ) → GetEventInfo<TEvent>[ 'return' ]
inheritedmodule:engine/model/markercollection~Marker#fire
Fires an event, executing all callbacks registered for it.
The first parameter passed to callbacks is an
EventInfo
object, followed by the optionalargs
provided in thefire()
method call.Type parameters
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 theevt.return
's property (the event info is the first param of every callback).
-
getData() → MarkerData
module:engine/model/markercollection~Marker#getData
Returns the marker data (properties defining the marker).
Returns
-
getEnd() → ModelPosition
module:engine/model/markercollection~Marker#getEnd
-
getRange() → ModelRange
module:engine/model/markercollection~Marker#getRange
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 getMarker
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.Returns
-
module:engine/model/markercollection~Marker#getStart
-
is( type ) → this is ModelElement | ModelRootElement
inheritedmodule: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
Assuming that the object being checked is an element, you can also check its name:
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
Parameters
type : 'element' | 'model:element'
Returns
this is ModelElement | ModelRootElement
-
is( type ) → this is ModelRootElement
inheritedmodule: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
Assuming that the object being checked is an element, you can also check its name:
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
Parameters
type : 'rootElement' | 'model:rootElement'
Returns
this is ModelRootElement
-
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
Note: Until version 20.0.0 this method wasn't accepting
'$text'
type. The legacy'text'
type is still accepted for backward compatibility.Parameters
type : '$text' | 'model:$text'
Returns
this is ModelText
-
is( type ) → this is ModelLiveRange
inheritedmodule: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
Parameters
type : 'liveRange' | 'model:liveRange'
Returns
this is ModelLiveRange
-
is( type ) → this is ModelDocumentFragment
inheritedmodule: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
Parameters
type : 'documentFragment' | 'model:documentFragment'
Returns
this is ModelDocumentFragment
-
is( type ) → this is ModelRange | ModelLiveRange
inheritedmodule: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
Parameters
type : 'range' | 'model:range'
Returns
this is ModelRange | ModelLiveRange
-
is( type ) → this is ModelLivePosition
inheritedmodule: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
Parameters
type : 'livePosition' | 'model:livePosition'
Returns
this is ModelLivePosition
-
is( type ) → this is ModelPosition | ModelLivePosition
inheritedmodule: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
Parameters
type : 'position' | 'model:position'
Returns
this is ModelPosition | ModelLivePosition
-
is( type ) → this is ModelSelection | ModelDocumentSelection
inheritedmodule:engine/model/markercollection~Marker#is:SELECTION
Checks whether the object is of type
ModelSelection
orModelDocumentSelection
.selection.is( 'selection' ); // -> true selection.is( 'model:selection' ); // -> true selection.is( 'view:selection' ); // -> false selection.is( 'range' ); // -> false
Parameters
type : 'selection' | 'model:selection'
Returns
this is ModelSelection | ModelDocumentSelection
-
module:engine/model/markercollection~Marker#is:MARKER
-
is( type, name ) → boolean
inheritedmodule:engine/model/markercollection~Marker#is:ELEMENT_NAME
Checks whether the object is of type
ModelElement
or its subclass and has the specifiedname
.element.is( 'element', 'imageBlock' ); // -> true if this is an <imageBlock> element text.is( 'element', 'imageBlock' ); -> false
Type parameters
N : extends string
Parameters
type : 'element' | 'model:element'
name : N
Returns
boolean
-
is( type, name ) → boolean
inheritedmodule:engine/model/markercollection~Marker#is:ROOT_ELEMENT_NAME
Checks whether the object is of type
ModelRootElement
and has the specifiedname
.rootElement.is( 'rootElement', '$root' );
Type parameters
N : extends string
Parameters
type : 'rootElement' | 'model:rootElement'
name : N
Returns
boolean
-
is( type ) → this is ModelTextProxy
inheritedmodule: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
Note: Until version 20.0.0 this method wasn't accepting
'$textProxy'
type. The legacy'textProxt'
type is still accepted for backward compatibility.Parameters
type : '$textProxy' | 'model:$textProxy'
Returns
this is ModelTextProxy
-
is( type ) → this is ModelDocumentSelection
inheritedmodule: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
Parameters
type : 'documentSelection' | 'model:documentSelection'
Returns
this is ModelDocumentSelection
-
is( type ) → this is ModelNode | ModelText | ModelElement | ModelRootElement
inheritedmodule: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 aModelNode
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
Since this method is also available on a range of view objects, you can prefix the type of the object with
model:
orview:
to check, for example, if this is the model's or view's element: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
By using this method it is also possible to check a name of an element:
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
Parameters
type : 'node' | 'model:node'
Returns
this is ModelNode | ModelText | ModelElement | ModelRootElement
-
listenTo( emitter, event, callback, [ options ] ) → void
inheritedmodule: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' );
An event callback can stop the event and set the return value of the
fire
method.Type parameters
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
inheritedmodule:engine/model/markercollection~Marker#off
Stops executing the callback on the given event. Shorthand for
this.stopListening( this, event, callback )
.Parameters
event : string
The name of the event.
callback : Function
The function to stop being called.
Returns
void
-
on( event, callback, [ options ] ) → void
inheritedmodule:engine/model/markercollection~Marker#on
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).Type parameters
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
inheritedmodule:engine/model/markercollection~Marker#once
Registers a callback function to be executed on the next time the event is fired only. This is similar to calling
on
followed byoff
in the callback.Type parameters
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
inheritedmodule: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.
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 ofevent
to all emitters.
Returns
void
-
stopListening( [ emitter ], [ event ], [ callback ] ) → void
inheritedmodule: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.
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 fromemitter
.[ callback ] : Function
(Requires the
event
) The function to be removed from the call list for the givenevent
.
Returns
void
-
_attachLiveRange( liveRange ) → ModelLiveRange
internalmodule:engine/model/markercollection~Marker#_attachLiveRange
Binds new live range to the marker and detach the old one if is attached.
Parameters
liveRange : ModelLiveRange
Live range to attach
Returns
ModelLiveRange
Attached live range.
-
_detachLiveRange() → void
internalmodule:engine/model/markercollection~Marker#_detachLiveRange
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.
Parameters
eventInfo : EventInfo
An object containing information about the fired event.
range : ModelRange
data : object
Related:
-
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.
Parameters
eventInfo : EventInfo
An object containing information about the fired event.
range : ModelRange
data : object
Related: