Skip to content

prosekit/web/resizable

<prosekit-resizable-root>
  <img src="..." />
  <prosekit-resizable-handle>...</prosekit-resizable-handle>
</prosekit-resizable-root>

<prosekit-resizable-handle> custom element.

Properties: ResizableHandleProps

new ResizableHandleElement(): ResizableHandleElement

position: "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right"

The position of the handle.

"bottom-right"

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void


new ResizeStartEvent(width: number, height: number): ResizeStartEvent

readonly detail: object


new ResizeEndEvent(width: number, height: number): ResizeEndEvent

readonly detail: object


<prosekit-resizable-root> custom element.

Properties: ResizableRootProps

Events: ResizableRootEvents

Data attributes:

AttributeDescription
data-resizingPresent when the element is being resized

new ResizableRootElement(): ResizableRootElement

width: number | null

The width of the resizable element.

null

height: number | null

The height of the resizable element.

null

aspectRatio: number | null

The aspect ratio of the resizable element.

null

addController(controller: ReactiveController): void

removeController(controller: ReactiveController): void

connectedCallback(): void

disconnectedCallback(): void

position: "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right"

The position of the handle.

"bottom-right"


width: number | null

The width of the resizable element.

null

height: number | null

The height of the resizable element.

null

aspectRatio: number | null

The aspect ratio of the resizable element.

null


resizeStart: ResizeStartEvent

Emitted when a resize operation starts.

resizeEnd: ResizeEndEvent

Emitted when a resize operation ends.