Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Plate
  • Editor API
  • Editor Transforms
  • Node
  • Element
  • Text
  • Path
  • Point
  • Range
  • Location
  • Anchor
  • Selection
  • Document Change
  • DOM API
  • React Hooks
  • Plate Core
    • Plate Components
    • Plate Editor
    • Plate Plugin
    • Editor Context
    • Plate Controller
  • Plate Utils
  • Resizable

Resizable

PreviousNext

API reference for platejs/resizable/react.

platejs/resizable/react exports two headless React components and their types. The package owns pointer, touch, keyboard, RTL, ARIA, and transient resize behavior. Registry components own styling and editor persistence.

Installation

pnpm add platejs @tanstack/react-virtual
pnpm add platejs @tanstack/react-virtual

Usage
Plate UtilsSelection

On This Page

InstallationUsageResizableResizeHandleTypesRelated components
Build your editor
Production-ready AI template and reusable components.
Get all-access
import type { EditorElementProps } from 'platejs/react';
import { EditorElement, useEditor, usePath } from 'platejs/react';
import { ImagePlugin } from 'platejs/media/react';
import { Resizable, ResizeHandle } from 'platejs/resizable/react';
export function ImageElement(props: EditorElementProps<typeof ImagePlugin>) {
const editor = useEditor();
const path = usePath();
return (
<EditorElement {...props}>
<div contentEditable={false}>
<Resizable
align="center"
minWidth={120}
width={props.element.width}
onResizeEnd={(width) =>
editor.plugin(ImagePlugin).update.set({ width }, { at: path })
}
>
<ResizeHandle direction="left" />
<img
alt={props.element.alt}
src={props.element.url}
style={{ width: '100%' }}
/>
<ResizeHandle direction="right" />
</Resizable>
</div>
{props.children}
</EditorElement>
);
}
import type { EditorElementProps } from 'platejs/react';
import { EditorElement, useEditor, usePath } from 'platejs/react';
import { ImagePlugin } from 'platejs/media/react';
import { Resizable, ResizeHandle } from 'platejs/resizable/react';
 
export function ImageElement(props: EditorElementProps<typeof ImagePlugin>) {
  const editor = useEditor();
  const path = usePath();
 
  return (
    <EditorElement {...props}>
      <div contentEditable={false}>
        <Resizable
          align="center"
          minWidth={120}
          width={props.element.width}
          onResizeEnd={(width) =>
            editor.plugin(ImagePlugin).update.set({ width }, { at: path })
          }
        >
          <ResizeHandle direction="left" />
          <img
            alt={props.element.alt}
            src={props.element.url}
            style={{ width: '100%' }}
          />
          <ResizeHandle direction="right" />
        </Resizable>
      </div>
      {props.children}
    </EditorElement>
  );
}

Resizable owns the private family context consumed by nested handles. No provider or raw resize store is part of the public API.

Resizable

OptionsResizableProps

    Controls resize direction math. Defaults to center.

    Maximum width. Defaults to 100%.

    Minimum width. Defaults to 0.

    Commits the finished width to the owning feature.

    Current width. Defaults to 100%.

    React 19 ref for the inner resizable element.

ResizeHandle

OptionsResizeHandleProps

    Resize edge. Defaults to left.

    Starting size. The handle reads its parent when omitted.

    Called during mouse or touch hover.

    Called when hover or resizing finishes.

    Overrides the nearest Resizable callback.

The handle renders a slider, disappears in read-only mode, and supports arrow keys. Hold Shift for a larger keyboard step. Pointer gestures listen on the handle's owning window. Pointer cancellation, window blur, unmount, read-only changes, and external width changes discard the preview. ARIA values and bounds use pixels; the value text preserves the configured unit.

Types

APIContract
ResizeDirection'bottom', 'left', 'right', or 'top'.
ResizeLengthnumber or string; pixel values such as 120 or "120px", or percentages such as "50%".
ResizeEvent{ delta; direction; finished; initialSize }

Related components

  • Media covers media elements that consume these primitives.
  • Resize Handle covers the styled registry wrappers.