Type Alias ResizableNodeViewOptions

Configuration options for creating a ResizableNodeView

Example

new ResizableNodeView({
  element: imgElement,
  node,
  getPos,
  onResize: (width, height) => {
    imgElement.style.width = `${width}px`
    imgElement.style.height = `${height}px`
  },
  onCommit: (width, height) => {
    editor.commands.updateAttributes('image', { width, height })
  },
  onUpdate: (node) => true,
  options: {
    directions: ['bottom-right', 'bottom-left'],
    min: { width: 100, height: 100 },
    preserveAspectRatio: true
  }
})

type ResizableNodeViewOptions = {
    contentElement?: HTMLElement;
    editor: Editor;
    element: HTMLElement;
    getPos: () => number | undefined;
    node: ProseMirrorNode;
    onCommit: (width: number, height: number) => void;
    onResize?: (width: number, height: number) => void;
    onUpdate: NodeView$1["update"];
    options?: {
        className?: {
            container?: string;
            handle?: string;
            resizing?: string;
            wrapper?: string;
        };
        createCustomHandle?: (
            direction: ResizableNodeViewDirection,
        ) => HTMLElement;
        directions?: ResizableNodeViewDirection[];
        max?: Partial<ResizableNodeDimensions>;
        min?: Partial<ResizableNodeDimensions>;
        preserveAspectRatio?: boolean;
    };
}

Index

Properties

contentElement? editor element getPos node onCommit onResize? onUpdate options?

Properties

`Optional`contentElement

contentElement?: HTMLElement

The DOM element that will hold the editable content element

editor

editor: Editor

The Tiptap editor instance

element

element: HTMLElement

The DOM element to make resizable (e.g., an img, video, or iframe element)

getPos

getPos: () => number | undefined

Function that returns the current position of the node in the document

node

node: ProseMirrorNode

The ProseMirror node instance

onCommit

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

Callback fired once when resize completes with final dimensions. Use this to persist the new size to the node's attributes.

Type Declaration

- (width: number, height: number): void
- Parameters
  - width: number
    Final width in pixels
  - height: number
    Final height in pixels
  Returns void

Example

onCommit: (width, height) => {
  const pos = getPos()
  if (pos !== undefined) {
    editor.commands.updateAttributes('image', { width, height })
  }
}

`Optional`onResize

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

Callback fired continuously during resize with current dimensions. Use this to update the element's visual size in real-time.

Type Declaration

- (width: number, height: number): void
- Parameters
  - width: number
    Current width in pixels
  - height: number
    Current height in pixels
  Returns void

Example

onResize: (width, height) => {
  element.style.width = `${width}px`
  element.style.height = `${height}px`
}

onUpdate

onUpdate: NodeView$1["update"]

Callback for handling node updates. Return true to accept the update, false to reject it.

Example

onUpdate: (node, decorations, innerDecorations) => {
  if (node.type !== this.node.type) return false
  return true
}

`Optional`options

options?: {
    className?: {
        container?: string;
        handle?: string;
        resizing?: string;
        wrapper?: string;
    };
    createCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement;
    directions?: ResizableNodeViewDirection[];
    max?: Partial<ResizableNodeDimensions>;
    min?: Partial<ResizableNodeDimensions>;
    preserveAspectRatio?: boolean;
}

Optional configuration for resize behavior and styling

Type Declaration

OptionalclassName?: { container?: string; handle?: string; resizing?: string; wrapper?: string }
Custom CSS class names for styling
Example
```
className: {
  container: 'resize-container',
  wrapper: 'resize-wrapper',
  handle: 'resize-handle',
  resizing: 'is-resizing'
}
```
- Optionalcontainer?: string
  Class for the outer container element
- Optionalhandle?: string
  Class applied to all resize handles
- Optionalresizing?: string
  Class added to container while actively resizing
- Optionalwrapper?: string
  Class for the wrapper element that contains the resizable element

`Optional`createCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement

Optional callback for creating custom resize handle elements.

This function allows developers to define their own handle element (e.g., custom icons, classes, or styles) for a given resize direction. It is called internally for each handle direction.

Example

createCustomHandle: (direction) => {
  const handle = document.createElement('div')
  handle.dataset.resizeHandle = direction
  handle.style.position = 'absolute'
  handle.className = 'tiptap-custom-handle'

  const isTop = direction.includes('top')
  const isBottom = direction.includes('bottom')
  const isLeft = direction.includes('left')
  const isRight = direction.includes('right')

  if (isTop) handle.style.top = '0'
  if (isBottom) handle.style.bottom = '0'
  if (isLeft) handle.style.left = '0'
  if (isRight) handle.style.right = '0'

  // Edge handles span the full width or height
  if (direction === 'top' || direction === 'bottom') {
    handle.style.left = '0'
    handle.style.right = '0'
  }

  if (direction === 'left' || direction === 'right') {
    handle.style.top = '0'
    handle.style.bottom = '0'
  }

  return handle
}

`Optional`directions?: ResizableNodeViewDirection[]

Which resize handles to display.

Default

['bottom-left', 'bottom-right', 'top-left', 'top-right']

Example

// Only show corner handles
directions: ['top-left', 'top-right', 'bottom-left', 'bottom-right']

// Only show right edge handle
directions: ['right']

Optionalmax?: Partial<ResizableNodeDimensions>
Maximum dimensions in pixels
Default
```
undefined (no maximum)
```
Example
```
max: { width: 1000, height: 800 }
```
Optionalmin?: Partial<ResizableNodeDimensions>
Minimum dimensions in pixels
Default
```
{ width: 8, height: 8 }
```
Example
```
min: { width: 100, height: 50 }
```
OptionalpreserveAspectRatio?: boolean
Always preserve aspect ratio when resizing. When false, aspect ratio is preserved only when Shift key is pressed.
Default
```
false
```
Example
```
preserveAspectRatio: true // Always lock aspect ratio
```

Type Alias ResizableNodeViewOptions

Example

Index

Properties

Properties

OptionalcontentElement

editor

element

getPos

node

onCommit

Type Declaration

Parameters

Returns void

Example

OptionalonResize

Type Declaration

Parameters

Returns void

Example

onUpdate

Example

Optionaloptions

Type Declaration

OptionalclassName?: { container?: string; handle?: string; resizing?: string; wrapper?: string }

Example

Optionalcontainer?: string

Optionalhandle?: string

Optionalresizing?: string

Optionalwrapper?: string

OptionalcreateCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement

Example

Optionaldirections?: ResizableNodeViewDirection[]

Default

Example

Optionalmax?: Partial<ResizableNodeDimensions>

Default

Example

Optionalmin?: Partial<ResizableNodeDimensions>

Default

Example

OptionalpreserveAspectRatio?: boolean

Default

Example

Settings

On This Page

`Optional`contentElement

`Optional`onResize

`Optional`options

`Optional`className?: { container?: string; handle?: string; resizing?: string; wrapper?: string }

`Optional`container?: string

`Optional`handle?: string

`Optional`resizing?: string

`Optional`wrapper?: string

`Optional`createCustomHandle?: (direction: ResizableNodeViewDirection) => HTMLElement

`Optional`directions?: ResizableNodeViewDirection[]

`Optional`max?: Partial<ResizableNodeDimensions>

`Optional`min?: Partial<ResizableNodeDimensions>

`Optional`preserveAspectRatio?: boolean