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.

OptionsUseVirtualFloatingOptions

Collapse all

    Function to get the bounding client rect.

    • Default: Returns a zero-sized rect at (0,0)

    Controls visibility of the floating element.

    Callback when elements are mounted.

    • Default: autoUpdate (updates on scroll and resize)

Returnsobject

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.

OptionsFloatingToolbarState

Collapse all

    Options passed to useVirtualFloating.

    Force hide the toolbar.

    Show toolbar in read-only mode.

Returnsobject

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.

ReturnsDOMRect | undefined

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

getDOMSelectionBoundingClientRect

ReturnsClientRectObject

    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.

ReturnsClientRectObject

    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.

ReturnsClientRectObject

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