Resizable

PreviousNext

API reference for @platejs/resizable.

Features

  • Resizable elements with handles
  • Configurable min/max width constraints
  • Center/left/right alignment support
  • Width persistence in editor state

Installation

pnpm add @platejs/resizable

API

useResizableState

Manages state for resizable elements.

OptionsResizableOptions

  • align optional 'center' | 'left' | 'right'

    Node alignment.

    • Default: 'center'

  • maxWidth optional ResizeLength

    Maximum width constraint.

    • Default: '100%'

  • minWidth optional ResizeLength

    Minimum width constraint.

    • Default: 92

  • readOnly optional boolean

    Whether the element is resizable in read-only mode.

Returnsobject

Collapse all

  • align 'center' | 'left' | 'right'

    Current alignment setting.

  • maxWidth ResizeLength

    Maximum width constraint.

  • minWidth ResizeLength

    Minimum width constraint.

  • setNodeWidth (width: number) => void

    Updates node width in editor state.

  • setWidth (width: number | string) => void

    Updates width in local state.

  • width number | string

    Current width value.

useResizable

Provides resize behavior props and handlers for resizable elements.

Parameters

Collapse all

  • state ReturnType<typeof useResizableState>

    State from useResizableState.

Returnsobject

Collapse all

  • context object

  • props object

    Style props for the resizable element:

    • maxWidth: Maximum width constraint
    • minWidth: Minimum width constraint
    • position: 'relative'
    • width: Current width

  • wrapperProps object

    Style props for the wrapper element:

    • position: 'relative'

  • wrapperRef React.RefObject<HTMLDivElement>

    Reference to the wrapper element.

useResizeHandleState

Manages state for resize handle elements.

OptionsResizeHandleOptions

Collapse all

  • direction optional ResizeDirection

    Direction of resize.

    • Default: 'left'

  • initialSize optional number

    Initial size of the resizable element.

  • onHover optional () => void

    Callback when handle is hovered.

  • onHoverEnd optional () => void

    Callback when handle hover ends.

  • onMouseDown optional React.MouseEventHandler

    Custom mouse down handler.

  • onResize optional (event: ResizeEvent) => void

    Custom resize handler. Falls back to store handler if not provided.

  • onTouchStart optional React.TouchEventHandler

    Custom touch start handler.

Returnsobject

Collapse all

  • direction ResizeDirection

    Current resize direction.

  • initialPosition number

    Initial cursor/touch position.

  • initialSize number

    Initial element size.

  • isHorizontal boolean

    Whether resize direction is horizontal.

  • isResizing boolean

    Whether resize is in progress.

  • readOnly boolean

    Editor read-only state.

  • setInitialPosition (position: number) => void

    Update initial position.

  • setInitialSize (size: number) => void

    Update initial size.

  • setIsResizing (resizing: boolean) => void

    Update resize state.

  • onHover () => void

    Hover callback.

  • onHoverEnd () => void

    Hover end callback.

  • onMouseDown React.MouseEventHandler

    Mouse down handler.

  • onResize (event: ResizeEvent) => void

    Resize handler.

  • onTouchStart React.TouchEventHandler

    Touch start handler.

useResizeHandle

Provides handlers and props for resize handle elements.

Parameters

Collapse all

  • state ReturnType<typeof useResizeHandleState>

    State from useResizeHandleState.

Returnsobject

Collapse all

  • hidden boolean

    Whether the handle should be hidden (in read-only mode).

  • props object

    Props to spread on the handle element:

    • onMouseDown: Mouse down event handler
    • onMouseOut: Mouse out event handler
    • onMouseOver: Mouse over event handler
    • onTouchEnd: Touch end event handler
    • onTouchMove: Touch move event handler
    • onTouchStart: Touch start event handler
可调整大小Slate