Class

DowncastDispatcher (engine/conversion)

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

class

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. 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 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, 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 on the new range, so both events are fired.

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

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

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

When providing custom listeners for downcast dispatcher, keep in mind that any callback that has consumed a value from a consumable and converted the change should also stop the event (for efficiency purposes).

When providing custom listeners for 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 guides:

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

	// Remember to stop the event propagation.
	evt.stop();
} );

Filtering

Properties

Methods

  • constructor( conversionApi )

    Creates a downcast dispatcher instance.

    Parameters

    conversionApi : Object

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

    Related:

  • convertAttribute( range, key, oldValue, newValue, writer )

    Starts conversion of attribute change on given range.

    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.

    writer : DowncastWriter

    View writer that should be used to modify view document.

    Fires

  • convertChanges( differ, markers, writer )

    Takes a model differ object with buffered changes and fires conversion basing on it.

    Parameters

    differ : Differ

    The differ object with buffered changes.

    markers : MarkerCollection

    Markers connected with the converted model.

    writer : DowncastWriter

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

  • convertInsert( range, writer )

    Starts a conversion of a range insertion.

    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.

    writer : DowncastWriter

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

    Fires

  • convertMarkerAdd( markerName, markerRange, writer )

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

    Parameters

    markerName : String

    Marker name.

    markerRange : Range

    Marker range.

    writer : DowncastWriter

    View writer that should be used to modify view document.

    Fires

  • convertMarkerRemove( markerName, markerRange, writer )

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

    Parameters

    markerName : String

    Marker name.

    markerRange : Range

    Marker range.

    writer : DowncastWriter

    View writer that should be used to modify view document.

    Fires

  • convertRemove( position, length, name, writer )

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

    Parameters

    position : Position

    Position from which node was removed.

    length : Number

    Offset size of removed node.

    name : String

    Name of removed node.

    writer : DowncastWriter

    View writer that should be used to modify view document.

  • convertSelection( selection, markers, writer )

    Starts model selection conversion.

    Fires events for given selection to start selection conversion.

    Parameters

    selection : Selection

    Selection to convert.

    markers : MarkerCollection

    Markers connected with converted model.

    writer : DowncastWriter

    View writer that should be used to modify view document.

    Fires

  • _clearConversionApi()

    private

    Clears conversion API object.

  • _createConsumableForRange( range, type ) → ModelConsumable

    private

    Creates ModelConsumable with values to consume for given range.

    Parameters

    range : Range

    Affected range.

    type : String

    Consumable type.

    Returns

    ModelConsumable

    Values to consume.

  • _createInsertConsumable( range ) → ModelConsumable

    private

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

    Parameters

    range : Range

    Inserted range.

    Returns

    ModelConsumable

    Values to consume.

  • _createSelectionConsumable( selection, markers ) → ModelConsumable

    private

    Creates ModelConsumable with selection consumable values.

    Parameters

    selection : Selection

    Selection to create consumable from.

    markers : Iterable.<Marker>

    Markers which contains selection.

    Returns

    ModelConsumable

    Values to consume.

  • _testAndFire( type, data )

    private

    Tests passed consumable to check whether given event can be fired and if so, fires it.

    Parameters

    type : String

    Event type.

    data : Object

    Event data.

    Fires

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 collapsed model selection that is inside a marker is converted.

    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 event name.

    If the marker range is collapsed:

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

    If selection inside a marker is converted:

    • there is only one event,
    • conversionApi.consumable includes selection instance with 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:

    • when an attribute has been added, changed, or removed from a node,
    • when a node with an attribute is inserted,
    • when 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:image).

    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.

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

    Inserted item.

    data.range : Range

    Range spanning over inserted item.

    conversionApi : DowncastConversionApi

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

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

    Fired for removed nodes.

    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 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 marker is removed from the model.

    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.

    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.