0
# Plate Resizable
1

2
Plate Resizable provides React components for implementing resizable functionality within the Plate rich text editor ecosystem. It enables users to resize elements like images, tables, or other media through drag handles with proper state management and editor integration.
3

4
## Package Information
5

6
- **Package Name**: @udecode/plate-resizable
7
- **Package Type**: npm
8
- **Language**: TypeScript/React
9
- **Installation**: `npm install @udecode/plate-resizable`
10

11
## Core Imports
12

13
```typescript
14
import { Resizable, ResizeHandle } from "@udecode/plate-resizable";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const { Resizable, ResizeHandle } = require("@udecode/plate-resizable");
21
```
22

23
## Basic Usage
24

25
```typescript
26
import React from 'react';
27
import { Resizable, ResizeHandle } from "@udecode/plate-resizable";
28

29
function MyResizableComponent() {
30
  return (
31
    <Resizable options={{ align: 'center', minWidth: 100, maxWidth: '80%' }}>
32
      <div style={{ background: '#f0f0f0', padding: '20px' }}>
33
        <p>This content can be resized!</p>
34
        <ResizeHandle direction="right" />
35
        <ResizeHandle direction="left" />
36
      </div>
37
    </Resizable>
38
  );
39
}
40
```
41

42
## Architecture
43

44
Plate Resizable is built around several key components:
45

46
- **Resizable Component**: Main wrapper that provides resize context and manages element state
47
- **ResizeHandle Component**: Interactive handles for user resize operations  
48
- **Store Management**: Atom-based state management for resize operations and handle coordination
49
- **Utility Functions**: Length conversion and constraint utilities for different measurement units
50
- **Plate Integration**: Hooks and types that integrate with Plate's editor system and element management
51

52
## Capabilities
53

54
### Resizable Component
55

56
The main component that wraps content to make it resizable with configurable constraints and alignment options.
57

58
```typescript { .api }
59
interface ResizableOptions {
60
  /** Node alignment. */
61
  align?: 'center' | 'left' | 'right';
62
  maxWidth?: ResizeLength;
63
  minWidth?: ResizeLength;
64
  readOnly?: boolean;
65
}
66

67
const Resizable: React.ForwardRefExoticComponent<{
68
  options: ResizableOptions;
69
} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
70
```
71

72
### Resizable Hooks
73

74
Hooks for managing resizable state and behavior, typically used internally by the Resizable component.
75

76
```typescript { .api }
77
function useResizableState(options?: ResizableOptions): {
78
  align: 'center' | 'left' | 'right';
79
  maxWidth: ResizeLength;
80
  minWidth: ResizeLength;
81
  setNodeWidth: (w: number) => void;
82
  setWidth: (w: ResizeLength) => void;
83
  width: ResizeLength;
84
};
85

86
function useResizable(state: ReturnType<typeof useResizableState>): {
87
  context: {
88
    onResize: (event: ResizeEvent) => void;
89
  };
90
  props: {
91
    style: React.CSSProperties;
92
  };
93
  wrapperProps: {
94
    style: React.CSSProperties;
95
  };
96
  wrapperRef: React.RefObject<HTMLDivElement>;
97
};
98
```
99

100
### ResizeHandle Component
101

102
Interactive handle component that users drag to resize elements, with support for different directions and touch events.
103

104
```typescript { .api }
105
interface ResizeHandleOptions {
106
  direction?: ResizeDirection;
107
  initialSize?: number;
108
  onHover?: () => void;
109
  onHoverEnd?: () => void;
110
  onMouseDown?: React.MouseEventHandler;
111
  onResize?: (event: ResizeEvent) => void;
112
  onTouchStart?: React.TouchEventHandler;
113
}
114

115
const ResizeHandle: React.ComponentType<
116
  Omit<React.HTMLAttributes<HTMLDivElement>, 'onResize'> & 
117
  ResizeHandleOptions
118
>;
119

120
type ResizeHandleProps = React.ComponentPropsWithRef<typeof ResizeHandle>;
121
```
122

123
### ResizeHandle Hooks
124

125
Hooks for managing resize handle state and interactions.
126

127
```typescript { .api }
128
function useResizeHandleState(options: ResizeHandleOptions): {
129
  direction: ResizeDirection;
130
  initialPosition: number;
131
  initialSize: number;
132
  isHorizontal: boolean;
133
  isResizing: boolean;
134
  readOnly: boolean;
135
  setInitialPosition: (pos: number) => void;
136
  setInitialSize: (size: number) => void;  
137
  setIsResizing: (resizing: boolean) => void;
138
  onHover?: () => void;
139
  onHoverEnd?: () => void;
140
  onMouseDown?: React.MouseEventHandler;
141
  onResize: (event: ResizeEvent) => void;
142
  onTouchStart?: React.TouchEventHandler;
143
};
144

145
function useResizeHandle(state: ReturnType<typeof useResizeHandleState>): {
146
  hidden: boolean;
147
  props: {
148
    onMouseDown: React.MouseEventHandler;
149
    onMouseOut: () => void; 
150
    onMouseOver: () => void;
151
    onTouchEnd: () => void;
152
    onTouchMove: () => void;
153
    onTouchStart: React.TouchEventHandler;
154
  };
155
};
156
```
157

158
### Store Management
159

160
Context providers and hooks for managing resizable state across components.
161

162
```typescript { .api }
163
// Resizable store
164
const ResizableProvider: React.ComponentType<React.PropsWithChildren<{}>>;
165
const resizableStore: any; // Jotai atom store instance
166

167
function useResizableSet<K extends keyof ResizableStoreState>(field: K, value: ResizableStoreState[K]): void;
168
function useResizableStore(): ResizableStoreState;
169
function useResizableValue<K extends keyof ResizableStoreState>(field: K): ResizableStoreState[K];
170

171
interface ResizableStoreState {
172
  width: React.CSSProperties['width'];
173
}
174

175
// ResizeHandle store  
176
interface ResizeHandleStoreState {
177
  onResize: ((event: ResizeEvent) => void) | null;
178
}
179

180
const ResizeHandleProvider: React.ComponentType<React.PropsWithChildren<ResizeHandleStoreState>>;
181

182
function useResizeHandleSet<K extends keyof ResizeHandleStoreState>(field: K, value: ResizeHandleStoreState[K]): void;
183
function useResizeHandleStore(): ResizeHandleStoreState;
184
function useResizeHandleValue<K extends keyof ResizeHandleStoreState>(field: K): ResizeHandleStoreState[K];
185
```
186

187
### Utility Functions
188

189
Helper functions for converting between different length formats and applying constraints.
190

191
```typescript { .api }
192
function isTouchEvent(event: MouseEvent | TouchEvent): event is TouchEvent;
193

194
interface ResizeLengthClampOptions<T = ResizeLength> {
195
  max?: T;
196
  min?: T;
197
}
198

199
function resizeLengthClamp<T extends ResizeLength>(
200
  length: T,
201
  parentLength: number,
202
  options: ResizeLengthClampOptions<ResizeLength>
203
): T;
204

205
function resizeLengthClampStatic(
206
  length: ResizeLengthStatic,
207
  options: ResizeLengthClampOptions<ResizeLengthStatic>
208
): ResizeLengthStatic;
209

210
function resizeLengthToRelative(
211
  length: ResizeLength,
212
  parentLength: number
213
): ResizeLengthRelative;
214

215
function resizeLengthToStatic(
216
  length: ResizeLength,
217
  parentLength: number
218
): ResizeLengthStatic;
219
```
220

221
## Types
222

223
```typescript { .api }
224
type ResizeDirection = 'bottom' | 'left' | 'right' | 'top';
225

226
interface ResizeEvent {
227
  delta: ResizeLengthStatic;
228
  direction: ResizeDirection;
229
  finished: boolean;  
230
  initialSize: ResizeLengthStatic;
231
}
232

233
type ResizeLength = ResizeLengthRelative | ResizeLengthStatic;
234
type ResizeLengthRelative = string;
235
type ResizeLengthStatic = number;
236
237
```