Typedef

BubblingEmitter (engine/view/observer)

@ckeditor/ckeditor5-engine/src/view/observer/bubblingemittermixin

typedefEmitter

Bubbling emitter for the view document.

Bubbling emitter is triggering events in the context of specified view element name, predefined '$text', '$root', '$document' and '$capture' contexts, and context matchers provided as a function.

Before bubbling starts, listeners for '$capture' context are triggered. Then the bubbling starts from the deeper selection position (by firing event on the '$text' context) and propagates the view document tree up to the '$root' and finally the listeners at '$document' context are fired (this is the default context).

Examples:

// Listeners registered in the context of the view element names:
this.listenTo( viewDocument, 'enter', ( evt, data ) => {
	// ...
}, { context: 'blockquote' } );

this.listenTo( viewDocument, 'enter', ( evt, data ) => {
	// ...
}, { context: 'li' } );

// Listeners registered in the context of the '$text' and '$root' nodes.
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
	// ...
}, { context: '$text', priority: 'high' } );

this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
	// ...
}, { context: '$root' } );

// Listeners registered in the context of custom callback function.
this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
	// ...
}, { context: isWidget } );

this.listenTo( view.document, 'arrowKey', ( evt, data ) => {
	// ...
}, { context: isWidget, priority: 'high' } );

Example flow for selection in text:

<blockquote><p>Foo[]bar</p></blockquote>

Fired events on contexts:

  1. '$capture'
  2. '$text'
  3. 'p'
  4. 'blockquote'
  5. '$root'
  6. '$document'

Example flow for selection on element (i.e., Widget):

<blockquote><p>Foo[<widget/>]bar</p></blockquote>

Fired events on contexts:

  1. '$capture'
  2. widget (custom matcher)
  3. 'p'
  4. 'blockquote'
  5. '$root'
  6. '$document'

There could be multiple listeners registered for the same context and at different priority levels:

<p>Foo[]bar</p>
  1. '$capture' at priorities:
    1. 'highest'
    2. 'high'
    3. 'normal'
    4. 'low'
    5. 'lowest'
  2. '$text' at priorities:
    1. 'highest'
    2. 'high'
    3. 'normal'
    4. 'low'
    5. 'lowest'
  3. 'p' at priorities:
    1. 'highest'
    2. 'high'
    3. 'normal'
    4. 'low'
    5. 'lowest'
  4. '$root' at priorities:
    1. 'highest'
    2. 'high'
    3. 'normal'
    4. 'low'
    5. 'lowest'
  5. '$document' at priorities:
    1. 'highest'
    2. 'high'
    3. 'normal'
    4. 'low'
    5. 'lowest'

Filtering