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

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

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

  • conversionApi : DowncastConversionApi

    An interface passed by the dispatcher to the event callbacks.

    See source

  • _reconversionEventsMapping : Map.<String, String>

    private

    Maps conversion event names that will trigger element reconversion for a given element name.

    See source

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:

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

    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.

    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.

    See source

    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.

    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.

    writer : DowncastWriter

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

    Fires

  • convertMarkerAdd( markerName, markerRange, writer )

    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.

    writer : DowncastWriter

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

    Fires

  • convertMarkerRemove( markerName, markerRange, writer )

    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.

    writer : DowncastWriter

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

    Fires

  • convertRemove( position, length, name, writer )

    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.

    writer : DowncastWriter

    View writer that should be used to modify view document.

  • 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

  • reconvertElement( element, writer )

    Starts the reconversion of an element. It will:

    See source

    This will not reconvert children of the element if they have existing (already converted) views. For newly inserted child elements it will behave the same as convertInsert.

    Element reconversion is defined by the triggerBy configuration for the elementToElement() conversion helper.

    Parameters

    element : Element

    The element to be reconverted.

    writer : DowncastWriter

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

    Fires

  • _mapReconversionTriggerEvent( modelName, eventName )

    protected

    Maps the model element "insert" reconversion for given event names. The event names must be fully specified:

    See source
    • For "attribute" change event, it should include the main element name, i.e: 'attribute:attributeName:elementName'.
    • For child node change events, these should use the child event name as well, i.e:
      • For adding a node: 'insert:childElementName'.
      • For removing a node: 'remove:childElementName'.

    Note: This method should not be used directly. The reconversion is defined by the triggerBy() configuration of the elementToElement() conversion helper.

    Parameters

    modelName : String

    The name of the main model element for which the events will trigger the reconversion.

    eventName : String

    The name of an event that would trigger conversion for a given model element.

  • _clearConversionApi()

    private

    Clears the conversion API object.

    See source

  • _convertInsertWithAttributes( data )

    private

    Internal method for converting element insertion. It will fire events for the inserted element and events for its attributes.

    See source

    Parameters

    data : Object

    Event data.

    Fires

  • _createConsumableForRange( range, type ) → ModelConsumable

    private

    Creates ModelConsumable with values to consume for a given range.

    See source

    Parameters

    range : Range

    The affected range.

    type : String

    Consumable type.

    Returns

    ModelConsumable

    The values to consume.

  • _createInsertConsumable( range ) → ModelConsumable

    private

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

    See source

    Parameters

    range : Range

    The inserted range.

    Returns

    ModelConsumable

    The values to consume.

  • _createSelectionConsumable( selection, markers ) → ModelConsumable

    private

    Creates ModelConsumable with selection consumable values.

    See source

    Parameters

    selection : Selection

    The selection to create the consumable from.

    markers : Iterable.<Marker>

    Markers that contain the selection.

    Returns

    ModelConsumable

    The values to consume.

  • _isReconvertTriggerEvent( eventName, elementName ) → Boolean

    private

    Checks if the resulting change should trigger element reconversion.

    See source

    These are defined by a triggerBy() configuration for the elementToElement() conversion helper.

    Parameters

    eventName : String

    The event name to check.

    elementName : String

    The element name to check.

    Returns

    Boolean

  • _mapChangesWithAutomaticReconversion( differ ) → Array.<Object>

    private

    Returns differ changes together with added "reconvert" type changes for reconvertElement. These are defined by a the triggerBy() configuration for the elementToElement() conversion helper.

    See source

    This method will remove every mapped insert or remove change with a single "reconvert" change.

    For instance: Having a triggerBy() configuration defined for the <complex> element that issues this element reconversion on foo and bar attributes change, and a set of changes for this element:

    const differChanges = [
	{ type: 'attribute', attributeKey: 'foo', ... },
	{ type: 'attribute', attributeKey: 'bar', ... },
	{ type: 'attribute', attributeKey: 'baz', ... }
];

    This method will return:

    const updatedChanges = [
	{ type: 'reconvert', element: complexElementInstance },
	{ type: 'attribute', attributeKey: 'baz', ... }
];

    In the example above, the 'baz' attribute change will fire an attribute event

    Parameters

    differ : Differ

    The differ object with buffered changes.

    Returns

    Array.<Object>

    Updated set of changes.

  • _testAndFire( type, data )

    private

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

    See source

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

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

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