Skip to content

Commit ca93b4c

Browse files
zbeyenszbeyens
authored
Merge pull request #3743 from udecode/refactor/icons
Icons
2 parents 74d5db8 + 5750e75 commit ca93b4c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+2640
-1848
lines changed

‎apps/www/content/docs/alignment.mdx

+1
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ The editor instance.
6565
The alignment value.
6666
</APISubListItem>
6767
<APISubListItem parent="options" name="setNodesOptions" type="SetNodesOptions" optional>
68+
Options for the `setNodes` function.
6869
</APISubListItem>
6970

7071
</APISubList>

‎apps/www/content/docs/api/floating.mdx

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
---
2+
title: Floating
3+
description: API reference for floating UI components and hooks.
4+
---
5+
6+
<PackageInfo>
7+
8+
## Features
9+
10+
- Virtual floating elements that follow cursor position
11+
- Floating toolbar that appears on text selection
12+
- Built on top of Floating UI
13+
- Customizable positioning and behavior
14+
- Automatic updates on scroll and resize
15+
16+
</PackageInfo>
17+
18+
## Installation
19+
20+
```bash
21+
npm install @udecode/plate-floating
22+
```
23+
24+
## API Hooks
25+
26+
### useVirtualFloating
27+
28+
Creates a floating element with a controlled virtual element, typically used to follow cursor position.
29+
30+
<APIParameters>
31+
<APIItem name="options" type="UseVirtualFloatingOptions">
32+
Options for the virtual floating element.
33+
<APISubList>
34+
<APISubListItem parent="options" name="getBoundingClientRect" type="() => ClientRectObject" optional>
35+
Function to get the bounding client rect.
36+
- **Default:** Returns a zero-sized rect at (0,0)
37+
</APISubListItem>
38+
<APISubListItem parent="options" name="open" type="boolean" optional>
39+
Controls visibility of the floating element.
40+
</APISubListItem>
41+
<APISubListItem parent="options" name="whileElementsMounted" type="function" optional>
42+
Callback when elements are mounted.
43+
- **Default:** `autoUpdate` (updates on scroll and resize)
44+
</APISubListItem>
45+
</APISubList>
46+
</APIItem>
47+
</APIParameters>
48+
49+
<APIReturns>
50+
<APIItem name="style" type="React.CSSProperties">
51+
Style object to apply to the floating element.
52+
</APIItem>
53+
<APIItem name="virtualElementRef" type="React.MutableRefObject">
54+
Reference to the virtual element.
55+
</APIItem>
56+
<APIItem name="refs" type="object">
57+
References for floating UI positioning.
58+
</APIItem>
59+
<APIItem name="update" type="() => void">
60+
Function to manually update positioning.
61+
</APIItem>
62+
</APIReturns>
63+
64+
### useFloatingToolbar
65+
66+
Creates a floating toolbar that appears when text is selected in the editor.
67+
68+
<APIParameters>
69+
<APIItem name="state" type="FloatingToolbarState">
70+
State options for the floating toolbar.
71+
<APISubList>
72+
<APISubListItem parent="state" name="floatingOptions" type="UseVirtualFloatingOptions" optional>
73+
Options passed to useVirtualFloating.
74+
</APISubListItem>
75+
<APISubListItem parent="state" name="hideToolbar" type="boolean" optional>
76+
Force hide the toolbar.
77+
</APISubListItem>
78+
<APISubListItem parent="state" name="showWhenReadOnly" type="boolean" optional>
79+
Show toolbar in read-only mode.
80+
</APISubListItem>
81+
</APISubList>
82+
</APIItem>
83+
</APIParameters>
84+
85+
<APIReturns>
86+
<APIItem name="clickOutsideRef" type="React.RefObject">
87+
Ref to detect clicks outside the toolbar.
88+
</APIItem>
89+
<APIItem name="hidden" type="boolean">
90+
Whether the toolbar should be hidden.
91+
</APIItem>
92+
<APIItem name="props" type="object">
93+
Props to spread on the toolbar element.
94+
</APIItem>
95+
<APIItem name="ref" type="React.RefObject">
96+
Ref to attach to the toolbar element.
97+
</APIItem>
98+
</APIReturns>
99+
100+
## API
101+
102+
### getBoundingClientRect
103+
104+
Gets the bounding client rectangle for a location or array of locations in the editor.
105+
106+
<APIParameters>
107+
<APIItem name="editor" type="TEditor">
108+
The editor instance.
109+
</APIItem>
110+
<APIItem name="at" type="Location | Location[]" optional>
111+
The location(s) to get the bounding rectangle for. If not provided, uses the current editor selection.
112+
</APIItem>
113+
</APIParameters>
114+
115+
<APIReturns>
116+
<APIItem type="DOMRect | undefined">
117+
The merged bounding client rectangle of all specified locations, or undefined if no valid rectangles found.
118+
</APIItem>
119+
</APIReturns>
120+
121+
### getDOMSelectionBoundingClientRect
122+
123+
Gets the bounding client rectangle of the current DOM selection.
124+
125+
<APIReturns>
126+
<APIItem type="ClientRectObject">
127+
The bounding client rectangle of the DOM selection. Returns a zero-sized rect at (0,0) if no selection exists.
128+
</APIItem>
129+
</APIReturns>
130+
131+
### getRangeBoundingClientRect
132+
133+
Gets the bounding client rectangle for a specific Slate range.
134+
135+
<APIParameters>
136+
<APIItem name="editor" type="TEditor">
137+
The editor instance.
138+
</APIItem>
139+
<APIItem name="at" type="Range | null">
140+
The Slate range to get the bounding rectangle for.
141+
</APIItem>
142+
</APIParameters>
143+
144+
<APIReturns>
145+
<APIItem type="ClientRectObject">
146+
The bounding client rectangle of the range. Returns a zero-sized rect at (0,0) if the range is null or invalid.
147+
</APIItem>
148+
</APIReturns>
149+
150+
### getSelectionBoundingClientRect
151+
152+
Gets the bounding client rectangle of the current editor selection.
153+
154+
<APIParameters>
155+
<APIItem name="editor" type="PlateEditor">
156+
The editor instance.
157+
</APIItem>
158+
</APIParameters>
159+
160+
<APIReturns>
161+
<APIItem type="ClientRectObject">
162+
The bounding client rectangle of the selection. Returns a zero-sized rect at (0,0) if the selection is not expanded.
163+
</APIItem>
164+
</APIReturns>

‎apps/www/content/docs/api/resizable.mdx

+206
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
---
2+
title: Resizable
3+
---
4+
5+
<PackageInfo>
6+
7+
## Features
8+
9+
- Resizable elements with handles
10+
- Configurable min/max width constraints
11+
- Center/left/right alignment support
12+
- Width persistence in editor state
13+
14+
</PackageInfo>
15+
16+
## Installation
17+
18+
```bash
19+
npm install @udecode/plate-resizable
20+
```
21+
22+
## API
23+
24+
### useResizableState
25+
26+
Manages state for resizable elements.
27+
28+
<APIParameters>
29+
<APIItem name="options" type="ResizableOptions" optional>
30+
<APISubList>
31+
<APISubListItem parent="options" name="align" type="'center' | 'left' | 'right'" optional>
32+
Node alignment.
33+
- **Default:** `'center'`
34+
</APISubListItem>
35+
<APISubListItem parent="options" name="maxWidth" type="ResizeLength" optional>
36+
Maximum width constraint.
37+
- **Default:** `'100%'`
38+
</APISubListItem>
39+
<APISubListItem parent="options" name="minWidth" type="ResizeLength" optional>
40+
Minimum width constraint.
41+
- **Default:** `92`
42+
</APISubListItem>
43+
<APISubListItem parent="options" name="readOnly" type="boolean" optional>
44+
Whether the element is resizable in read-only mode.
45+
</APISubListItem>
46+
</APISubList>
47+
</APIItem>
48+
</APIParameters>
49+
50+
<APIReturns>
51+
<APIItem name="align" type="'center' | 'left' | 'right'">
52+
Current alignment setting.
53+
</APIItem>
54+
<APIItem name="maxWidth" type="ResizeLength">
55+
Maximum width constraint.
56+
</APIItem>
57+
<APIItem name="minWidth" type="ResizeLength">
58+
Minimum width constraint.
59+
</APIItem>
60+
<APIItem name="setNodeWidth" type="(width: number) => void">
61+
Updates node width in editor state.
62+
</APIItem>
63+
<APIItem name="setWidth" type="(width: number | string) => void">
64+
Updates width in local state.
65+
</APIItem>
66+
<APIItem name="width" type="number | string">
67+
Current width value.
68+
</APIItem>
69+
</APIReturns>
70+
71+
### useResizable
72+
73+
Provides resize behavior props and handlers for resizable elements.
74+
75+
<APIParameters>
76+
<APIItem name="state" type="ReturnType<typeof useResizableState>">
77+
State from useResizableState.
78+
</APIItem>
79+
</APIParameters>
80+
81+
<APIReturns>
82+
<APIItem name="context" type="object">
83+
<APISubList>
84+
<APISubListItem parent="context" name="onResize" type="(event: ResizeEvent) => void">
85+
Handler for resize events.
86+
</APISubListItem>
87+
</APISubList>
88+
</APIItem>
89+
<APIItem name="props" type="object">
90+
Style props for the resizable element:
91+
- maxWidth: Maximum width constraint
92+
- minWidth: Minimum width constraint
93+
- position: 'relative'
94+
- width: Current width
95+
</APIItem>
96+
<APIItem name="wrapperProps" type="object">
97+
Style props for the wrapper element:
98+
- position: 'relative'
99+
</APIItem>
100+
<APIItem name="wrapperRef" type="React.RefObject<HTMLDivElement>">
101+
Reference to the wrapper element.
102+
</APIItem>
103+
</APIReturns>
104+
105+
### useResizeHandleState
106+
107+
Manages state for resize handle elements.
108+
109+
<APIParameters>
110+
<APIItem name="options" type="ResizeHandleOptions">
111+
<APISubList>
112+
<APISubListItem parent="options" name="direction" type="ResizeDirection" optional>
113+
Direction of resize.
114+
- **Default:** `'left'`
115+
</APISubListItem>
116+
<APISubListItem parent="options" name="initialSize" type="number" optional>
117+
Initial size of the resizable element.
118+
</APISubListItem>
119+
<APISubListItem parent="options" name="onHover" type="() => void" optional>
120+
Callback when handle is hovered.
121+
</APISubListItem>
122+
<APISubListItem parent="options" name="onHoverEnd" type="() => void" optional>
123+
Callback when handle hover ends.
124+
</APISubListItem>
125+
<APISubListItem parent="options" name="onMouseDown" type="React.MouseEventHandler" optional>
126+
Custom mouse down handler.
127+
</APISubListItem>
128+
<APISubListItem parent="options" name="onResize" type="(event: ResizeEvent) => void" optional>
129+
Custom resize handler. Falls back to store handler if not provided.
130+
</APISubListItem>
131+
<APISubListItem parent="options" name="onTouchStart" type="React.TouchEventHandler" optional>
132+
Custom touch start handler.
133+
</APISubListItem>
134+
</APISubList>
135+
</APIItem>
136+
</APIParameters>
137+
138+
<APIReturns>
139+
<APIItem name="direction" type="ResizeDirection">
140+
Current resize direction.
141+
</APIItem>
142+
<APIItem name="initialPosition" type="number">
143+
Initial cursor/touch position.
144+
</APIItem>
145+
<APIItem name="initialSize" type="number">
146+
Initial element size.
147+
</APIItem>
148+
<APIItem name="isHorizontal" type="boolean">
149+
Whether resize direction is horizontal.
150+
</APIItem>
151+
<APIItem name="isResizing" type="boolean">
152+
Whether resize is in progress.
153+
</APIItem>
154+
<APIItem name="readOnly" type="boolean">
155+
Editor read-only state.
156+
</APIItem>
157+
<APIItem name="setInitialPosition" type="(position: number) => void">
158+
Update initial position.
159+
</APIItem>
160+
<APIItem name="setInitialSize" type="(size: number) => void">
161+
Update initial size.
162+
</APIItem>
163+
<APIItem name="setIsResizing" type="(resizing: boolean) => void">
164+
Update resize state.
165+
</APIItem>
166+
<APIItem name="onHover" type="() => void">
167+
Hover callback.
168+
</APIItem>
169+
<APIItem name="onHoverEnd" type="() => void">
170+
Hover end callback.
171+
</APIItem>
172+
<APIItem name="onMouseDown" type="React.MouseEventHandler">
173+
Mouse down handler.
174+
</APIItem>
175+
<APIItem name="onResize" type="(event: ResizeEvent) => void">
176+
Resize handler.
177+
</APIItem>
178+
<APIItem name="onTouchStart" type="React.TouchEventHandler">
179+
Touch start handler.
180+
</APIItem>
181+
</APIReturns>
182+
183+
### useResizeHandle
184+
185+
Provides handlers and props for resize handle elements.
186+
187+
<APIParameters>
188+
<APIItem name="state" type="ReturnType<typeof useResizeHandleState>">
189+
State from useResizeHandleState.
190+
</APIItem>
191+
</APIParameters>
192+
193+
<APIReturns>
194+
<APIItem name="hidden" type="boolean">
195+
Whether the handle should be hidden (in read-only mode).
196+
</APIItem>
197+
<APIItem name="props" type="object">
198+
Props to spread on the handle element:
199+
- onMouseDown: Mouse down event handler
200+
- onMouseOut: Mouse out event handler
201+
- onMouseOver: Mouse over event handler
202+
- onTouchEnd: Touch end event handler
203+
- onTouchMove: Touch move event handler
204+
- onTouchStart: Touch start event handler
205+
</APIItem>
206+
</APIReturns>

‎apps/www/content/docs/block-selection.mdx

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
---
22
title: Block Selection
3+
docs:
4+
- route: /docs/components/block-selection
5+
title: Block Selection
36
---
47

58
<ComponentPreview name="block-selection-demo" />

0 commit comments

Comments
 (0)