MutationObserver (engine/view/observer)



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.



  • readonly inherited

    document : Document

    A reference to the Document object.

  • domConverter : DomConverter

    Reference to the domConverter.

  • readonly inherited

    isEnabled : Boolean

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

  • renderer : Renderer

    Reference to the _renderer.

  • readonly inherited

    view : View

    An instance of the view controller.

  • private

    _config : Object

    Native mutation observer config.

  • private

    _domElements : Array.<HTMLElement>

    Observed DOM elements.

  • private

    _mutationObserver : MutationObserver

    Native mutation observer.


  • inherited

    checkShouldIgnoreEventFromTarget( domTarget ) → Boolean

    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.


    domTarget : Node

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



    Whether this event should be ignored by the observer.

  • inherited


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

  • inherited


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


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


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

  • inherited

    observe( domElement, name )

    Starts observing the given root element.


    domElement : HTMLElement
    name : String

    The name of the root element.

  • private

    _isBogusBrMutation( mutation ) → Boolean

    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.


    mutation : Object

    Native mutation object.


  • private

    _onMutations( domMutations )

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


    domMutations : Array.<Object>

    Array of native mutations.