Floating

API reference for floating UI components and hooks.

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

Installation

npm install @udecode/plate-floating

API Hooks

useVirtualFloating

Creates a floating element with a controlled virtual element, typically used to follow cursor position.

Parameters

Collapse all

    Options for the virtual floating element.

Returns

Collapse all

    Style object to apply to the floating element.

    Reference to the virtual element.

    References for floating UI positioning.

    Function to manually update positioning.

useFloatingToolbar

Creates a floating toolbar that appears when text is selected in the editor.

Parameters

Collapse all

    State options for the floating toolbar.

Returns

Collapse all

    Ref to detect clicks outside the toolbar.

    Whether the toolbar should be hidden.

    Props to spread on the toolbar element.

    Ref to attach to the toolbar element.

API

getBoundingClientRect

Gets the bounding client rectangle for a location or array of locations in the editor.

Parameters

Collapse all

    The editor instance.

    The location(s) to get the bounding rectangle for. If not provided, uses the current editor selection.

Returns

Collapse all

    The merged bounding client rectangle of all specified locations, or undefined if no valid rectangles found.

getDOMSelectionBoundingClientRect

Gets the bounding client rectangle of the current DOM selection.

Returns

Collapse all

    The bounding client rectangle of the DOM selection. Returns a zero-sized rect at (0,0) if no selection exists.

getRangeBoundingClientRect

Gets the bounding client rectangle for a specific Slate range.

Parameters

Collapse all

    The editor instance.

    The Slate range to get the bounding rectangle for.

Returns

Collapse all

    The bounding client rectangle of the range. Returns a zero-sized rect at (0,0) if the range is null or invalid.

getSelectionBoundingClientRect

Gets the bounding client rectangle of the current editor selection.

Parameters

Collapse all

    The editor instance.

Returns

Collapse all

    The bounding client rectangle of the selection. Returns a zero-sized rect at (0,0) if the selection is not expanded.

cnResizable