@umbraco-cms/backoffice
    Preparing search index...

    Class ResizableNodeView

    A NodeView implementation that adds resize handles to any DOM element.

    This class creates a resizable node view for Tiptap/ProseMirror editors. It wraps your element with resize handles and manages the resize interaction, including aspect ratio preservation, min/max constraints, and keyboard modifiers.

    // Basic usage in a Tiptap extension
    addNodeView() {
      return ({ node, getPos }) => {
        const img = document.createElement('img')
        img.src = node.attrs.src

        return new ResizableNodeView({
          element: img,
          node,
          getPos,
          onResize: (width, height) => {
            img.style.width = `${width}px`
            img.style.height = `${height}px`
          },
          onCommit: (width, height) => {
            this.editor.commands.updateAttributes('image', { width, height })
          },
          onUpdate: () => true,
          options: {
            min: { width: 100, height: 100 },
            preserveAspectRatio: true
          }
        })
      }
    }
    Index

    Constructors

    constructor

    Properties

    classNames container contentElement? createCustomHandle? directions editor element getPos maxSize? minSize node onCommit onResize? onUpdate? preserveAspectRatio wrapper

    Accessors

    contentDOM dom

    Methods

    createContainer createWrapper destroy update

    Constructors

    • Creates a new ResizableNodeView instance.

      The constructor sets up the resize handles, applies initial sizing from node attributes, and configures all resize behavior options.

      Parameters

      Returns ResizableNodeView

    Properties

    classNames: {
        container: string;
        handle: string;
        resizing: string;
        wrapper: string;
    }

    CSS class names for elements

    container: HTMLElement

    The outer container element (returned as NodeView.dom)

    contentElement?: HTMLElement

    The editable DOM element inside the DOM

    createCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement

    Optional callback for creating custom resize handles

    directions: ResizableNodeViewDirection[]

    Active resize handle directions

    editor: Editor

    The Tiptap editor instance

    element: HTMLElement

    The DOM element being made resizable

    getPos: () => undefined | number

    Function to get the current node position

    maxSize?: Partial<ResizableNodeDimensions>

    Maximum allowed dimensions (optional)

    minSize: ResizableNodeDimensions

    Minimum allowed dimensions

    node: ProseMirrorNode

    The ProseMirror node instance

    onCommit: (width: number, height: number) => void

    Callback fired when resize completes

    onResize?: (width: number, height: number) => void

    Callback fired during resize

    onUpdate?: (
        node: ProseMirrorNode,
        decorations: readonly Decoration[],
        innerDecorations: DecorationSource,
    ) => boolean

    Callback for node updates

    preserveAspectRatio: boolean

    Whether to always preserve aspect ratio

    wrapper: HTMLElement

    The wrapper element that contains the element and handles

    Accessors

    • get contentDOM(): undefined | HTMLElement

      Returns undefined | HTMLElement

    • get dom(): HTMLElement

      Returns the top-level DOM node that should be placed in the editor.

      This is required by the ProseMirror NodeView interface. The container includes the wrapper, handles, and the actual content element.

      Returns HTMLElement

      The container element to be inserted into the editor

    Methods

    • Creates the outer container element.

      The container is the top-level element returned by the NodeView and wraps the entire resizable node. It's set up with flexbox to handle alignment and includes data attributes for styling and identification.

      Returns HTMLDivElement

      The container element

    • Creates the wrapper element that contains the content and handles.

      The wrapper uses relative positioning so that resize handles can be positioned absolutely within it. This is the direct parent of the content element being made resizable.

      Returns HTMLDivElement

      The wrapper element

    • Cleanup method called when the node view is being removed.

      Removes all event listeners to prevent memory leaks. This is required by the ProseMirror NodeView interface. If a resize is active when destroy is called, it will be properly cancelled.

      Returns void

    • Called when the node's content or attributes change.

      Updates the internal node reference. If a custom onUpdate callback was provided, it will be called to handle additional update logic.

      Parameters

      • node: ProseMirrorNode

        The new/updated node

      • decorations: readonly Decoration[]

        Node decorations

      • innerDecorations: DecorationSource

        Inner decorations

      Returns boolean

      false if the node type has changed (requires full rebuild), otherwise the result of onUpdate or true

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods