CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

DowncastDispatcher (engine/conversion)

@ckeditor/ckeditor5-engine/src/conversion/downcastdispatcher

class
See source

The downcast dispatcher is a central point of downcasting (conversion from the model to the view), which is a process of reacting to changes in the model and firing a set of events. The callbacks listening to these events are called converters. The converters' role is to convert the model changes to changes in view (for example, adding view nodes or changing attributes on view elements).

During the conversion process, downcast dispatcher fires events basing on the state of the model and prepares data for these events. It is important to understand that the events are connected with the changes done on the model, for example: "a node has been inserted" or "an attribute has changed". This is in contrary to upcasting (a view-to-model conversion) where you convert the view state (view nodes) to a model tree.

The events are prepared basing on a diff created by the Differ, which buffers them and then passes to the downcast dispatcher as a diff between the old model state and the new model state.

Note that because the changes are converted, there is a need to have a mapping between the model structure and the view structure. To map positions and elements during the downcast (a model-to-view conversion), use Mapper.

Downcast dispatcher fires the following events for model tree changes:

  • insert – If a range of nodes was inserted to the model tree.
  • remove – If a range of nodes was removed from the model tree.
  • attribute – If an attribute was added, changed or removed from a model node.

For insert and attribute, the downcast dispatcher generates consumables. These are used to have control over which changes have already been consumed. It is useful when some converters overwrite others or convert multiple changes (for example, it converts an insertion of an element and also converts that element's attributes during the insertion).

Additionally, downcast dispatcher fires events for marker changes:

Note that changing a marker is done through removing the marker from the old range and adding it to the new range, so both of these events are fired.

Finally, a downcast dispatcher also handles firing events for the model selection conversion:

  • selection – Converts the selection from the model to the view.
  • attribute – Fired for every selection attribute.
  • addMarker – Fired for every marker that contains a selection.

Unlike the model tree and the markers, the events for selection are not fired for changes but for a selection state.

When providing custom listeners for a downcast dispatcher, remember to check whether a given change has not been consumed yet.

When providing custom listeners for a downcast dispatcher, keep in mind that you should not stop the event. If you stop it, then the default converter at the lowest priority will not trigger the conversion of this node's attributes and child nodes.

When providing custom listeners for a downcast dispatcher, remember to use the provided view downcast writer to apply changes to the view document.

You can read more about conversion in the following guide:

An example of a custom converter for the downcast dispatcher:

// You will convert inserting a "paragraph" model element into the model.
downcastDispatcher.on( 'insert:paragraph', ( evt, data, conversionApi ) => {
	// Remember to check whether the change has not been consumed yet and consume it.
	if ( !conversionApi.consumable.consume( data.item, 'insert' ) ) {
		return;
	}

	// Translate the position in the model to a position in the view.
	const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );

	// Create a <p> element that will be inserted into the view at the `viewPosition`.
	const viewElement = conversionApi.writer.createContainerElement( 'p' );

	// Bind the newly created view element to the model element so positions will map accordingly in the future.
	conversionApi.mapper.bindElements( data.item, viewElement );

	// Add the newly created view element to the view.
	conversionApi.writer.insert( viewPosition, viewElement );
} );

Filtering

Properties

Methods

  • constructor( conversionApi )

    Creates a downcast dispatcher instance.

    See source

    Parameters

    conversionApi : Object

    Additional properties for an interface that will be passed to events fired by the downcast dispatcher.

    Related:

  • convert( range, markers, writer, [ options ] )

    Starts a conversion of a model range and the provided markers.

    See source

    Parameters

    range : Range

    The inserted range.

    markers : Map.<String, Range>

    The map of markers that should be down-casted.

    writer : DowncastWriter

    The view writer that should be used to modify the view document.

    [ options ] : Object

    Optional options object passed to convertionApi.options.

    Fires

  • convertChanges( differ, markers, writer )

    Converts changes buffered in the given model differ and fires conversion events based on it.

    See source

    Parameters

    differ : Differ

    The differ object with buffered changes.

    markers : MarkerCollection

    Markers related to the model fragment to convert.

    writer : DowncastWriter

    The view writer that should be used to modify the view document.

    Fires

  • convertSelection( selection, markers, writer )

    Starts the model selection conversion.

    See source

    Fires events for a given selection to start the selection conversion.

    Parameters

    selection : Selection

    The selection to convert.

    markers : MarkerCollection

    Markers connected with the converted model.

    writer : DowncastWriter

    View writer that should be used to modify the view document.

    Fires

  • _convertAttribute( range, key, oldValue, newValue, conversionApi )

    protected

    Starts a conversion of an attribute change on a given range.

    See source

    For each node in the given range, attribute event is fired with the passed data.

    Parameters

    range : Range

    Changed range.

    key : String

    Key of the attribute that has changed.

    oldValue : *

    Attribute value before the change or null if the attribute has not been set before.

    newValue : *

    New attribute value or null if the attribute has been removed.

    conversionApi : DowncastConversionApi

    The conversion API object.

    Fires

  • _convertInsert( range, conversionApi, [ options ] = { [options.doNotAddConsumables] } )

    protected

    Fires insertion conversion of a range of nodes.

    See source

    For each node in the range, insert event is fired. For each attribute on each node, attribute event is fired.

    Parameters

    range : Range

    The inserted range.

    conversionApi : DowncastConversionApi

    The conversion API object.

    [ options ] : Object
    Properties
    [ options.doNotAddConsumables ] : Boolean

    Whether the ModelConsumable should not get populated for items in the provided range.

    Defaults to false

    Fires

  • _convertMarkerAdd( markerName, markerRange, conversionApi )

    protected

    Converts the added marker. Fires the addMarker event for each item in the marker's range. If the range is collapsed, a single event is dispatched. See the event description for more details.

    See source

    Parameters

    markerName : String

    Marker name.

    markerRange : Range

    The marker range.

    conversionApi : DowncastConversionApi

    The conversion API object.

    Fires

  • _convertMarkerRemove( markerName, markerRange, conversionApi )

    protected

    Fires the conversion of the marker removal. Fires the removeMarker event with the provided data.

    See source

    Parameters

    markerName : String

    Marker name.

    markerRange : Range

    The marker range.

    conversionApi : DowncastConversionApi

    The conversion API object.

    Fires

  • _convertReinsert( range, conversionApi )

    protected

    Fires re-insertion conversion (with a reconversion flag passed to insert events) of a range of elements (only elements on the range depth, without children).

    See source

    For each node in the range on its depth (without children), insert event is fired. For each attribute on each node, attribute event is fired.

    Parameters

    range : Range

    The range to reinsert.

    conversionApi : DowncastConversionApi

    The conversion API object.

    Fires

  • _convertRemove( position, length, name, conversionApi )

    protected

    Fires conversion of a single node removal. Fires remove event with provided data.

    See source

    Parameters

    position : Position

    Position from which node was removed.

    length : Number

    Offset size of removed node.

    name : String

    Name of removed node.

    conversionApi : DowncastConversionApi

    The conversion API object.

  • _addConsumablesForInsert( consumable, walkerValues ) → ModelConsumable

    private

    Populates provided ModelConsumable with values to consume from a given range, assuming that the range has just been inserted to the model.

    See source

    Parameters

    consumable : ModelConsumable

    The consumable.

    walkerValues : Iterable.<TreeWalkerValue>

    The walker values for the inserted range.

    Returns

    ModelConsumable

    The values to consume.

  • _addConsumablesForRange( consumable, range, type ) → ModelConsumable

    private

    Populates provided ModelConsumable with values to consume for a given range.

    See source

    Parameters

    consumable : ModelConsumable

    The consumable.

    range : Range

    The affected range.

    type : String

    Consumable type.

    Returns

    ModelConsumable

    The values to consume.

  • _addConsumablesForSelection( consumable, selection, markers ) → ModelConsumable

    private

    Populates provided ModelConsumable with selection consumable values.

    See source

    Parameters

    consumable : ModelConsumable

    The consumable.

    selection : Selection

    The selection to create the consumable from.

    markers : Iterable.<Marker>

    Markers that contain the selection.

    Returns

    ModelConsumable

    The values to consume.

  • _createConversionApi( writer, [ refreshedItems ], [ options ] ) → DowncastConversionApi

    private

    Builds an instance of the DowncastConversionApi from a template and a given DowncastWriter and options object.

    See source

    Parameters

    writer : DowncastWriter

    View writer that should be used to modify the view document.

    [ refreshedItems ] : Set.<Element>

    A set of model elements that should not reuse their previous view representations.

    [ options ] : Object

    Optional options passed to convertionApi.options.

    Returns

    DowncastConversionApi

    The conversion API object.

  • _reduceChanges( changes ) → Iterable.<DiffItem>

    private

    Fires the reduction of changes buffered in the Differ.

    See source

    Features can replace selected DiffItems with reinsert entries to trigger reconversion. The DowncastHelpers.elementToStructure() is using this event to trigger reconversion.

    Parameters

    changes : Iterable.<DiffItem>

    Returns

    Iterable.<DiffItem>

    Fires

  • _testAndFire( type, data, conversionApi )

    private

    Tests whether given event wasn't already fired and if so, fires it.

    See source

    Parameters

    type : String

    Event type.

    data : Object

    Event data.

    conversionApi : DowncastConversionApi

    The conversion API object.

    Fires

  • _testAndFireAddAttributes( item, conversionApi )

    private

    Fires not already fired events for setting attributes on just inserted item.

    See source

    Parameters

    item : Item

    The model item to convert attributes for.

    conversionApi : DowncastConversionApi

    The conversion API object.

Events

  • addMarker( eventInfo, data = { data.item, [data.range], data.markerRange, data.markerName }, conversionApi )

    Fired when a new marker is added to the model. Also fired when a collapsed model selection that is inside a marker is converted.

    See source

    addMarker is a namespace for a class of events. Names of actually called events follow this pattern: addMarker:markerName. By specifying certain marker names, you can make the events even more gradual. For example, if markers are named foo:abc, foo:bar, then it is possible to listen to addMarker:foo or addMarker:foo:abc and addMarker:foo:bar events.

    If the marker range is not collapsed:

    • the event is fired for each item in the marker range one by one,
    • conversionApi.consumable includes each item of the marker range and the consumable value is same as the event name.

    If the marker range is collapsed:

    • there is only one event,
    • conversionApi.consumable includes marker range with the event name.

    If the selection inside a marker is converted:

    • there is only one event,
    • conversionApi.consumable includes the selection instance with the event name.

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    data : Object

    Additional information about the change.

    Properties
    data.item : Item | Selection

    Item inside the new marker or the selection that is being converted.

    [ data.range ] : Range

    Range spanning over converted item. Available only in marker conversion, if the marker range was not collapsed.

    data.markerRange : Range

    Marker range.

    data.markerName : String

    Marker name.

    conversionApi : DowncastConversionApi

    Conversion interface to be used by callback, passed in DowncastDispatcher constructor.

  • attribute( eventInfo, data = { data.item, data.range, data.attributeKey, data.attributeOldValue, data.attributeNewValue }, conversionApi )

    Fired in the following cases:

    See source
    • when an attribute has been added, changed, or removed from a node,
    • when a node with an attribute is inserted,
    • when a collapsed model selection attribute is converted.

    attribute is a namespace for a class of events. Names of actually called events follow this pattern: attribute:attributeKey:name. attributeKey is the key of added/changed/removed attribute. name is either '$text' if change was on a text node, or the name of element which attribute has changed.

    This way listeners can either listen to a general attribute:bold event or specific event (for example attribute:src:imageBlock).

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    data : Object

    Additional information about the change.

    Properties
    data.item : Item | DocumentSelection

    Changed item or converted selection.

    data.range : Range

    Range spanning over changed item or selection range.

    data.attributeKey : String

    Attribute key.

    data.attributeOldValue : *

    Attribute value before the change. This is null when selection attribute is converted.

    data.attributeNewValue : *

    New attribute value.

    conversionApi : DowncastConversionApi

    Conversion interface to be used by callback, passed in DowncastDispatcher constructor.

  • insert( eventInfo, data = { data.item, data.range }, conversionApi )

    Fired for inserted nodes.

    See source

    insert is a namespace for a class of events. Names of actually called events follow this pattern: insert:name. name is either '$text', when a text node has been inserted, or name of inserted element.

    This way, the listeners can either listen to a general insert event or specific event (for example insert:paragraph).

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    data : Object

    Additional information about the change.

    Properties
    data.item : Item

    The inserted item.

    data.range : Range

    Range spanning over inserted item.

    conversionApi : DowncastConversionApi

    Conversion interface to be used by callback, passed in the DowncastDispatcher constructor.

  • reduceChanges( eventInfo, data = { data.changes } )

    Fired to enable reducing (transforming) changes buffered in the Differ before convertChanges() will fire any conversion events.

    See source

    For instance, a feature can replace selected DiffItems with a reinsert entry to trigger reconversion of an element when e.g. its attribute has changes. The DowncastHelpers.elementToStructure() helper is using this event to trigger reconversion of an element when the element, its attributes or direct children changed.

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    data : Object
    Properties
    data.changes : Iterable.<DiffItem>

    A buffered changes to get reduced.

  • remove( eventInfo, data = { data.position, data.length }, conversionApi )

    Fired for removed nodes.

    See source

    remove is a namespace for a class of events. Names of actually called events follow this pattern: remove:name. name is either '$text', when a a text node has been removed, or the name of removed element.

    This way, listeners can either listen to a general remove event or specific event (for example remove:paragraph).

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    data : Object

    Additional information about the change.

    Properties
    data.position : Position

    Position from which the node has been removed.

    data.length : Number

    Offset size of the removed node.

    conversionApi : DowncastConversionApi

    Conversion interface to be used by callback, passed in DowncastDispatcher constructor.

  • removeMarker( eventInfo, data = { data.markerRange, data.markerName }, conversionApi )

    Fired when a marker is removed from the model.

    See source

    removeMarker is a namespace for a class of events. Names of actually called events follow this pattern: removeMarker:markerName. By specifying certain marker names, you can make the events even more gradual. For example, if markers are named foo:abc, foo:bar, then it is possible to listen to removeMarker:foo or removeMarker:foo:abc and removeMarker:foo:bar events.

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    data : Object

    Additional information about the change.

    Properties
    data.markerRange : Range

    Marker range.

    data.markerName : String

    Marker name.

    conversionApi : DowncastConversionApi

    Conversion interface to be used by callback, passed in DowncastDispatcher constructor.

  • selection( eventInfo, selection, conversionApi )

    Fired for selection changes.

    See source

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    selection : Selection

    Selection that is converted.

    conversionApi : DowncastConversionApi

    Conversion interface to be used by callback, passed in DowncastDispatcher constructor.