From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Plate
  • Plitev42
    • Editor API
    • Editor Transforms
    • Node
    • Element
    • Text
    • Path
    • Point
    • Range
    • Location
    • Location Ref
    • Document Change
  • Plate Core
    • Plate Components
    • Plate Editor
    • Plate Plugin
    • Plate Store
    • Plate Controller
  • Plate Utils
  • React Utils
  • cn
  • Floating
  • Resizable

Resizable

Previous

API reference for @platejs/resizable.

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

Installation

pnpm add @platejs/resizable
pnpm add @platejs/resizable

Usage

import type { PlateElementProps }
Floating

On This Page

InstallationUsageResizableResizeHandleTypes And Length UtilitiesRelated Components
Build your editor
Production-ready AI template and reusable components.
Get all-access
from
'platejs/react'
;
import { PlateElement, useEditor } from 'platejs/react';
import { Image, ImagePlugin } from '@platejs/media/react';
import { Resizable, ResizeHandle } from '@platejs/resizable';
export function ImageElement(props: PlateElementProps<typeof ImagePlugin>) {
const editor = useEditor();
return (
<PlateElement {...props}>
<Resizable
align="center"
minWidth={120}
width={props.element.width}
onResizeEnd={(width) =>
editor.plugin(ImagePlugin).update.set(
{ width },
{ at: props.element }
)
}
>
<ResizeHandle direction="left" />
<Image alt={props.element.alt} />
<ResizeHandle direction="right" />
</Resizable>
{props.children}
</PlateElement>
);
}
import type { PlateElementProps } from 'platejs/react';
import { PlateElement, useEditor } from 'platejs/react';
import { Image, ImagePlugin } from '@platejs/media/react';
import { Resizable, ResizeHandle } from '@platejs/resizable';
 
export function ImageElement(props: PlateElementProps<typeof ImagePlugin>) {
  const editor = useEditor();
 
  return (
    <PlateElement {...props}>
      <Resizable
        align="center"
        minWidth={120}
        width={props.element.width}
        onResizeEnd={(width) =>
          editor.plugin(ImagePlugin).update.set(
            { width },
            { at: props.element }
          )
        }
      >
        <ResizeHandle direction="left" />
        <Image alt={props.element.alt} />
        <ResizeHandle direction="right" />
      </Resizable>
      {props.children}
    </PlateElement>
  );
}

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 92.

    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, listens on window while dragging, and supports arrow keys. Hold Shift for a larger keyboard step.

Types And Length Utilities

APIContract
ResizeDirection`'bottom'
ResizeLength`number
ResizeEvent{ delta; direction; finished; initialSize }
resizeLengthClampClamps a pixel or percentage length against mixed constraints.
resizeLengthToRelativeConverts pixels to a percentage.
resizeLengthToStaticConverts a percentage to pixels.

Related Components

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