āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/udecode/plate/api/resizable ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
npm install @platejs/resizable
useResizableStateManages state for resizable elements.
<API name="useResizableState"> <APIOptions type="ResizableOptions"> <APIItem name="align" type="'center' | 'left' | 'right'" optional> Node alignment. - **Default:** `'center'` </APIItem> <APIItem name="maxWidth" type="ResizeLength" optional> Maximum width constraint. - **Default:** `'100%'` </APIItem> <APIItem name="minWidth" type="ResizeLength" optional> Minimum width constraint. - **Default:** `92` </APIItem> <APIItem name="readOnly" type="boolean" optional> Whether the element is resizable in read-only mode. </APIItem> </APIOptions> <APIReturns type="object"> <APIItem name="align" type="'center' | 'left' | 'right'"> Current alignment setting. </APIItem> <APIItem name="maxWidth" type="ResizeLength"> Maximum width constraint. </APIItem> <APIItem name="minWidth" type="ResizeLength"> Minimum width constraint. </APIItem> <APIItem name="setNodeWidth" type="(width: number) => void"> Updates node width in editor state. </APIItem> <APIItem name="setWidth" type="(width: number | string) => void"> Updates width in local state. </APIItem> <APIItem name="width" type="number | string"> Current width value. </APIItem> </APIReturns> </API>useResizableProvides resize behavior props and handlers for resizable elements.
<API name="useResizable"> <APIParameters> <APIItem name="state" type="ReturnType<typeof useResizableState>"> State from `useResizableState`. </APIItem> </APIParameters> <APIReturns type="object"> <APIItem name="context" type="object"> <APISubList> <APISubListItem parent="context" name="onResize" type="(event: ResizeEvent) => void"> Handler for resize events. </APISubListItem> </APISubList> </APIItem> <APIItem name="props" type="object"> Style props for the resizable element: - `maxWidth`: Maximum width constraint - `minWidth`: Minimum width constraint - `position`: 'relative' - `width`: Current width </APIItem> <APIItem name="wrapperProps" type="object"> Style props for the wrapper element: - `position`: 'relative' </APIItem> <APIItem name="wrapperRef" type="React.RefObject<HTMLDivElement>"> Reference to the wrapper element. </APIItem> </APIReturns> </API>useResizeHandleStateManages state for resize handle elements.
<API name="useResizeHandleState"> <APIOptions type="ResizeHandleOptions"> <APIItem name="direction" type="ResizeDirection" optional> Direction of resize. - **Default:** `'left'` </APIItem> <APIItem name="initialSize" type="number" optional> Initial size of the resizable element. </APIItem> <APIItem name="onHover" type="() => void" optional> Callback when handle is hovered. </APIItem> <APIItem name="onHoverEnd" type="() => void" optional> Callback when handle hover ends. </APIItem> <APIItem name="onMouseDown" type="React.MouseEventHandler" optional> Custom mouse down handler. </APIItem> <APIItem name="onResize" type="(event: ResizeEvent) => void" optional> Custom resize handler. Falls back to store handler if not provided. </APIItem> <APIItem name="onTouchStart" type="React.TouchEventHandler" optional> Custom touch start handler. </APIItem> </APIOptions> <APIReturns type="object"> <APIItem name="direction" type="ResizeDirection"> Current resize direction. </APIItem> <APIItem name="initialPosition" type="number"> Initial cursor/touch position. </APIItem> <APIItem name="initialSize" type="number"> Initial element size. </APIItem> <APIItem name="isHorizontal" type="boolean"> Whether resize direction is horizontal. </APIItem> <APIItem name="isResizing" type="boolean"> Whether resize is in progress. </APIItem> <APIItem name="readOnly" type="boolean"> Editor read-only state. </APIItem> <APIItem name="setInitialPosition" type="(position: number) => void"> Update initial position. </APIItem> <APIItem name="setInitialSize" type="(size: number) => void"> Update initial size. </APIItem> <APIItem name="setIsResizing" type="(resizing: boolean) => void"> Update resize state. </APIItem> <APIItem name="onHover" type="() => void"> Hover callback. </APIItem> <APIItem name="onHoverEnd" type="() => void"> Hover end callback. </APIItem> <APIItem name="onMouseDown" type="React.MouseEventHandler"> Mouse down handler. </APIItem> <APIItem name="onResize" type="(event: ResizeEvent) => void"> Resize handler. </APIItem> <APIItem name="onTouchStart" type="React.TouchEventHandler"> Touch start handler. </APIItem> </APIReturns> </API>useResizeHandleProvides handlers and props for resize handle elements.
<API name="useResizeHandle"> <APIParameters> <APIItem name="state" type="ReturnType<typeof useResizeHandleState>"> State from `useResizeHandleState`. </APIItem> </APIParameters> <APIReturns type="object"> <APIItem name="hidden" type="boolean"> Whether the handle should be hidden (in read-only mode). </APIItem> <APIItem name="props" type="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 </APIItem> </APIReturns> </API>ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā