CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

ResizeObserver (utils/dom)

@ckeditor/ckeditor5-utils/src/dom/resizeobserver

class
See source

A helper class which instances allow performing custom actions when native DOM elements are resized.

const editableElement = editor.editing.view.getDomRoot();

const observer = new ResizeObserver( editableElement, entry => {
	console.log( 'The editable element has been resized in DOM.' );
	console.log( entry.target ); // -> editableElement
	console.log( entry.contentRect.width ); // -> e.g. '423px'
} );

By default, it uses the native DOM resize observer under the hood and in browsers that do not support the native API yet, a polyfilled observer is used instead.

Filtering

Properties

  • _callback : function

    private readonly

    The callback executed each time _element is resized.

    See source

  • _element : HTMLElement

    private readonly

    The element observer by this observer.

    See source

Static properties

  • _observerInstance

    protected readonly static

    The single native observer instance (or polyfill in browsers that do not support the API) shared across all ResizeObserver instances.

    See source

  • _elementCallbacks

    private readonly static

    A mapping of native DOM elements and their callbacks shared across all ResizeObserver instances.

    See source

Methods

  • constructor( element, callback )

    Creates an instance of the ResizeObserver class.

    See source

    Parameters

    element : HTMLElement

    A DOM element that is to be observed for resizing. Note that the element must be visible (i.e. not detached from DOM) for the observer to work.

    callback : function

    A function called when the observed element was resized. It passes the ResizeObserverEntry object with information about the resize event.

  • destroy()

    Destroys the observer which disables the callback passed to the constructor.

    See source

Static methods

  • _addElementCallback( element, callback )

    private static

    Registers a new resize callback for the DOM element.

    See source

    Parameters

    element : HTMLElement
    callback : function

  • _createObserver()

    private static

    Creates the single native observer shared across all ResizeObserver instances. If the browser does not support the native API, it creates a polyfill.

    See source

  • _deleteElementCallback( element, callback )

    private static

    Removes a resize callback from the DOM element. If no callbacks are left for the element, it removes the element from the native observer.

    See source

    Parameters

    element : HTMLElement
    callback : function

  • _getElementCallbacks( element ) → Set.<HTMLElement> | null

    private static

    Returns are registered resize callbacks for the DOM element.

    See source

    Parameters

    element : HTMLElement

    Returns

    Set.<HTMLElement> | null