Skip to content

Commit 5750e75

Browse files
zbeyenszbeyens
committed
docs
1 parent bedeb26 commit 5750e75

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

+2402
-2064
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

+139-20
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,164 @@
11
---
22
title: Floating
3-
description: API reference for @udecode/plate-floating.
3+
description: API reference for floating UI components and hooks.
44
---
55

6-
`floating` components provide utilities for creating floating UI elements.
6+
<PackageInfo>
77

8-
### FloatingComponent
8+
## Features
99

10-
A component for creating floating UI elements.
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.
1129

1230
<APIParameters>
13-
<APIItem name="className" type="string">
14-
Additional classes to apply to the floating component.
15-
</APIItem>
16-
<APIItem name="...props" type="React.ComponentProps<typeof FloatingPrimitive>">
17-
Additional props to pass to the floating component.
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>
1846
</APIItem>
1947
</APIParameters>
48+
2049
<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>
2163

22-
A component that renders a floating UI element.
64+
### useFloatingToolbar
2365

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>
2498
</APIReturns>
2599

26-
### FloatingHandle
100+
## API
27101

28-
A handle for interacting with floating components.
102+
### getBoundingClientRect
103+
104+
Gets the bounding client rectangle for a location or array of locations in the editor.
29105

30106
<APIParameters>
31-
<APIItem name="className" type="string">
32-
Additional classes to apply to the handle.
33-
</APIItem>
34-
<APIItem name="withHandle" type="boolean">
35-
Whether to display a visual handle.
107+
<APIItem name="editor" type="TEditor">
108+
The editor instance.
36109
</APIItem>
37-
<APIItem name="...props" type="React.ComponentProps<typeof FloatingPrimitive.Handle>">
38-
Additional props to pass to the handle.
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.
39112
</APIItem>
40113
</APIParameters>
114+
41115
<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>
42120

43-
A component that renders a handle for interacting with floating components.
121+
### getDOMSelectionBoundingClientRect
44122

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>
45129
</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>

0 commit comments

Comments
 (0)