CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

MutationObserver (engine/view/observer)

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

class
See source

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.

    See source

  • domConverter : DomConverter

    Reference to the domConverter.

    See source

  • isEnabled : Boolean

    readonly inherited

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

    See source

  • renderer : Renderer

    Reference to the _renderer.

    See source

  • view : View

    readonly inherited

    An instance of the view controller.

    See source

  • _config : Object

    private

    Native mutation observer config.

    See source

  • _domElements : Array.<HTMLElement>

    private

    Observed DOM elements.

    See source

  • _mutationObserver : MutationObserver

    private

    Native mutation observer.

    See source

Methods

  • checkShouldIgnoreEventFromTarget( domTarget ) → Boolean

    inherited

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

    See source

    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.

    See source

  • disable()

    inherited

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

    See source

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

    See source

    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.

    See source

  • observe( domElement, name )

    inherited

    Starts observing the given root element.

    See source

    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.

    See source

    Parameters

    mutation : Object

    Native mutation object.

    Returns

    Boolean

  • _onMutations( domMutations )

    private

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

    See source

    Parameters

    domMutations : Array.<Object>

    Array of native mutations.