-
-
Notifications
You must be signed in to change notification settings - Fork 755
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3743 from udecode/refactor/icons
Icons
- Loading branch information
Showing
66 changed files
with
2,640 additions
and
1,848 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| --- | ||
| title: Floating | ||
| description: API reference for floating UI components and hooks. | ||
| --- | ||
|
|
||
| <PackageInfo> | ||
|
|
||
| ## Features | ||
|
|
||
| - Virtual floating elements that follow cursor position | ||
| - Floating toolbar that appears on text selection | ||
| - Built on top of Floating UI | ||
| - Customizable positioning and behavior | ||
| - Automatic updates on scroll and resize | ||
|
|
||
| </PackageInfo> | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| npm install @udecode/plate-floating | ||
| ``` | ||
|
|
||
| ## API Hooks | ||
|
|
||
| ### useVirtualFloating | ||
|
|
||
| Creates a floating element with a controlled virtual element, typically used to follow cursor position. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="options" type="UseVirtualFloatingOptions"> | ||
| Options for the virtual floating element. | ||
| <APISubList> | ||
| <APISubListItem parent="options" name="getBoundingClientRect" type="() => ClientRectObject" optional> | ||
| Function to get the bounding client rect. | ||
| - **Default:** Returns a zero-sized rect at (0,0) | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="open" type="boolean" optional> | ||
| Controls visibility of the floating element. | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="whileElementsMounted" type="function" optional> | ||
| Callback when elements are mounted. | ||
| - **Default:** `autoUpdate` (updates on scroll and resize) | ||
| </APISubListItem> | ||
| </APISubList> | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <APIItem name="style" type="React.CSSProperties"> | ||
| Style object to apply to the floating element. | ||
| </APIItem> | ||
| <APIItem name="virtualElementRef" type="React.MutableRefObject"> | ||
| Reference to the virtual element. | ||
| </APIItem> | ||
| <APIItem name="refs" type="object"> | ||
| References for floating UI positioning. | ||
| </APIItem> | ||
| <APIItem name="update" type="() => void"> | ||
| Function to manually update positioning. | ||
| </APIItem> | ||
| </APIReturns> | ||
|
|
||
| ### useFloatingToolbar | ||
|
|
||
| Creates a floating toolbar that appears when text is selected in the editor. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="state" type="FloatingToolbarState"> | ||
| State options for the floating toolbar. | ||
| <APISubList> | ||
| <APISubListItem parent="state" name="floatingOptions" type="UseVirtualFloatingOptions" optional> | ||
| Options passed to useVirtualFloating. | ||
| </APISubListItem> | ||
| <APISubListItem parent="state" name="hideToolbar" type="boolean" optional> | ||
| Force hide the toolbar. | ||
| </APISubListItem> | ||
| <APISubListItem parent="state" name="showWhenReadOnly" type="boolean" optional> | ||
| Show toolbar in read-only mode. | ||
| </APISubListItem> | ||
| </APISubList> | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <APIItem name="clickOutsideRef" type="React.RefObject"> | ||
| Ref to detect clicks outside the toolbar. | ||
| </APIItem> | ||
| <APIItem name="hidden" type="boolean"> | ||
| Whether the toolbar should be hidden. | ||
| </APIItem> | ||
| <APIItem name="props" type="object"> | ||
| Props to spread on the toolbar element. | ||
| </APIItem> | ||
| <APIItem name="ref" type="React.RefObject"> | ||
| Ref to attach to the toolbar element. | ||
| </APIItem> | ||
| </APIReturns> | ||
|
|
||
| ## API | ||
|
|
||
| ### getBoundingClientRect | ||
|
|
||
| Gets the bounding client rectangle for a location or array of locations in the editor. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="editor" type="TEditor"> | ||
| The editor instance. | ||
| </APIItem> | ||
| <APIItem name="at" type="Location | Location[]" optional> | ||
| The location(s) to get the bounding rectangle for. If not provided, uses the current editor selection. | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <APIItem type="DOMRect | undefined"> | ||
| The merged bounding client rectangle of all specified locations, or undefined if no valid rectangles found. | ||
| </APIItem> | ||
| </APIReturns> | ||
|
|
||
| ### getDOMSelectionBoundingClientRect | ||
|
|
||
| Gets the bounding client rectangle of the current DOM selection. | ||
|
|
||
| <APIReturns> | ||
| <APIItem type="ClientRectObject"> | ||
| The bounding client rectangle of the DOM selection. Returns a zero-sized rect at (0,0) if no selection exists. | ||
| </APIItem> | ||
| </APIReturns> | ||
|
|
||
| ### getRangeBoundingClientRect | ||
|
|
||
| Gets the bounding client rectangle for a specific Slate range. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="editor" type="TEditor"> | ||
| The editor instance. | ||
| </APIItem> | ||
| <APIItem name="at" type="Range | null"> | ||
| The Slate range to get the bounding rectangle for. | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <APIItem type="ClientRectObject"> | ||
| The bounding client rectangle of the range. Returns a zero-sized rect at (0,0) if the range is null or invalid. | ||
| </APIItem> | ||
| </APIReturns> | ||
|
|
||
| ### getSelectionBoundingClientRect | ||
|
|
||
| Gets the bounding client rectangle of the current editor selection. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="editor" type="PlateEditor"> | ||
| The editor instance. | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <APIItem type="ClientRectObject"> | ||
| The bounding client rectangle of the selection. Returns a zero-sized rect at (0,0) if the selection is not expanded. | ||
| </APIItem> | ||
| </APIReturns> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,206 @@ | ||
| --- | ||
| title: Resizable | ||
| --- | ||
|
|
||
| <PackageInfo> | ||
|
|
||
| ## Features | ||
|
|
||
| - Resizable elements with handles | ||
| - Configurable min/max width constraints | ||
| - Center/left/right alignment support | ||
| - Width persistence in editor state | ||
|
|
||
| </PackageInfo> | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| npm install @udecode/plate-resizable | ||
| ``` | ||
|
|
||
| ## API | ||
|
|
||
| ### useResizableState | ||
|
|
||
| Manages state for resizable elements. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="options" type="ResizableOptions" optional> | ||
| <APISubList> | ||
| <APISubListItem parent="options" name="align" type="'center' | 'left' | 'right'" optional> | ||
| Node alignment. | ||
| - **Default:** `'center'` | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="maxWidth" type="ResizeLength" optional> | ||
| Maximum width constraint. | ||
| - **Default:** `'100%'` | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="minWidth" type="ResizeLength" optional> | ||
| Minimum width constraint. | ||
| - **Default:** `92` | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="readOnly" type="boolean" optional> | ||
| Whether the element is resizable in read-only mode. | ||
| </APISubListItem> | ||
| </APISubList> | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <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> | ||
|
|
||
| ### useResizable | ||
|
|
||
| Provides resize behavior props and handlers for resizable elements. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="state" type="ReturnType<typeof useResizableState>"> | ||
| State from useResizableState. | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <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> | ||
|
|
||
| ### useResizeHandleState | ||
|
|
||
| Manages state for resize handle elements. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="options" type="ResizeHandleOptions"> | ||
| <APISubList> | ||
| <APISubListItem parent="options" name="direction" type="ResizeDirection" optional> | ||
| Direction of resize. | ||
| - **Default:** `'left'` | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="initialSize" type="number" optional> | ||
| Initial size of the resizable element. | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="onHover" type="() => void" optional> | ||
| Callback when handle is hovered. | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="onHoverEnd" type="() => void" optional> | ||
| Callback when handle hover ends. | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="onMouseDown" type="React.MouseEventHandler" optional> | ||
| Custom mouse down handler. | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="onResize" type="(event: ResizeEvent) => void" optional> | ||
| Custom resize handler. Falls back to store handler if not provided. | ||
| </APISubListItem> | ||
| <APISubListItem parent="options" name="onTouchStart" type="React.TouchEventHandler" optional> | ||
| Custom touch start handler. | ||
| </APISubListItem> | ||
| </APISubList> | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <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> | ||
|
|
||
| ### useResizeHandle | ||
|
|
||
| Provides handlers and props for resize handle elements. | ||
|
|
||
| <APIParameters> | ||
| <APIItem name="state" type="ReturnType<typeof useResizeHandleState>"> | ||
| State from useResizeHandleState. | ||
| </APIItem> | ||
| </APIParameters> | ||
|
|
||
| <APIReturns> | ||
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.