Sign up (with export icon)

Marker

Api-class iconclass

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.

  1. 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.

  2. 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 );
} );
Copy code

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 (with github icon)

Properties

Methods

  • Chevron-right icon

    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).

  • Chevron-right icon

    delegate( events ) → EmitterMixinDelegateChain
    inherited

    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
  • Chevron-right icon

    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).

  • Chevron-right icon

    getData() → MarkerData

    Returns the marker data (properties defining the marker).

    See source (with github icon)

    Returns

    MarkerData
  • Chevron-right icon

    getEnd() → ModelPosition

    Returns current marker end position.

    See source (with github icon)

    Returns

    ModelPosition
  • Chevron-right icon

    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
  • Chevron-right icon

    getStart() → ModelPosition

    Returns current marker start position.

    See source (with github icon)

    Returns

    ModelPosition
  • Chevron-right icon

    is( type ) → this is ModelElement | ModelRootElement
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelRootElement
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelText
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelLiveRange
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelDocumentFragment
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelRange | ModelLiveRange
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelLivePosition
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelPosition | ModelLivePosition
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelSelection | ModelDocumentSelection
    inherited

    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
  • Chevron-right icon

    is( type ) → this is Marker
    inherited

    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
  • Chevron-right icon

    is( type, name ) → boolean
    inherited

    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
  • Chevron-right icon

    is( type, name ) → boolean
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelTextProxy
    inherited

    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
  • Chevron-right icon

    is( type ) → this is ModelDocumentSelection
    inherited

    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
  • Chevron-right icon

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

    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
  • Chevron-right icon

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

    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
  • Chevron-right icon

    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
  • Chevron-right icon

    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
  • Chevron-right icon

    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
  • Chevron-right icon

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

    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
  • Chevron-right icon

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

    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
  • Chevron-right icon

    toJSON() → unknown

    Converts Marker to plain object and returns it.

    See source (with github icon)

    Returns

    unknown

    Marker converted to plain object.

  • Chevron-right icon

    _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.

  • Chevron-right icon

    _detachLiveRange() → void
    internal

    Unbinds and destroys currently attached live range.

    See source (with github icon)

    Returns

    void

Events

Was this page helpful?

Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.

GitHubSupportContact Us

© 2003 - 2025  CKSource. All rights reserved.