Class

MutationObserver (engine/view/observer)

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

class

Mutation observer class observes changes in the DOM, fires event-mutations event, mark view elements as changed and call render. Because all mutated nodes are marked as "to be rendered" and the render is called, all changes will be reverted, unless the mutation will be handled by the event-mutations event listener. It means user will see only handled changes, and the editor will block all changes which are not handled.

Mutation Observer also take care of reducing number of mutations which are fired. It removes duplicates and mutations on elements which do not have corresponding view elements. Also text mutation is fired only if parent element do not change child list.

Note that this observer is attached by the View and is available by default.

Filtering

Properties

  • document : Document

    readonly inherited

    A reference to the Document object.

  • domConverter : DomConverter

    Reference to the domConverter.

  • isEnabled : Boolean

    readonly inherited

    The state of the observer. If it is disabled, no events will be fired.

  • renderer : Renderer

    Reference to the _renderer.

  • view : View

    readonly inherited

    An instance of the view controller.

  • _config : Object

    private

    Native mutation observer config.

  • _domElements : Array.<HTMLElement>

    private

    Observed DOM elements.

  • _mutationObserver : MutationObserver

    private

    Native mutation observer.

Methods

  • checkShouldIgnoreEventFromTarget( domTarget ) → Boolean

    inherited

    Checks whether a given DOM event should be ignored (should not be turned into a synthetic view document event).

    Currently, an event will be ignored only if its target or any of its ancestors has the data-cke-ignore-events attribute. This attribute can be used inside the structures generated by DowncastWriter#createUIElement() to ignore events fired within a UI that should be excluded from CKEditor 5's realms.

    Parameters

    domTarget : Node

    The DOM event target to check (usually an element, sometimes a text node and potentially sometimes a document, too).

    Returns

    Boolean

    Whether this event should be ignored by the observer.

  • destroy()

    inherited

    Disables and destroys the observer, among others removes event listeners created by the observer.

  • disable()

    inherited

    Disables the observer. This method is called before rendering to prevent firing events during rendering.

    Related:

  • enable()

    inherited

    Enables the observer. This method is called when the observer is registered to the View and after rendering (all observers are disabled before rendering).

    A typical use case for disabling observers is that mutation observers need to be disabled for the rendering. However, a child class may not need to be disabled, so it can implement an empty method.

    Related:

  • flush()

    Synchronously fires event-mutations event with all mutations in record queue. At the same time empties the queue so mutations will not be fired twice.

  • observe( domElement, name )

    inherited

    Starts observing the given root element.

    Parameters

    domElement : HTMLElement
    name : String

    The name of the root element.

  • _isBogusBrMutation( mutation ) → Boolean

    private

    Checks if mutation was generated by the browser inserting bogus br on the end of the block element. Such mutations are generated while pressing space or performing native spellchecker correction on the end of the block element in Firefox browser.

    Parameters

    mutation : Object

    Native mutation object.

    Returns

    Boolean
  • _onMutations( domMutations )

    private

    Handles mutations. Deduplicates, mark view elements to sync, fire event and call render.

    Parameters

    domMutations : Array.<Object>

    Array of native mutations.