4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T229d,--- title: Floating description: API reference for @platejs/floating. --- `@platejs/floating` contains the React hooks and rectangle utilities used by floating toolbars, cursor-anchored UI, and virtual elements in Plate. It wraps Floating UI and exports the Floating UI primitives Plate components use. ## Installation ```bash npm install @platejs/floating ``` ## Ownership | Surface | Owner | Use | | --- | --- | --- | | `useVirtualFloating` | `@platejs/floating` | `useFloating` with a controlled virtual reference element. | | `useFloatingToolbarState` | `@platejs/floating` | Builds toolbar state from editor focus, selection, read-only state, and Floating UI options. | | `useFloatingToolbar` | `@platejs/floating` | Turns toolbar state into DOM props, ref, outside-click ref, and hidden state. | | Rect utilities | `@platejs/floating` | Convert editor ranges, DOM selection, and client rect arrays into Floating UI-compatible rects. | | Floating UI exports | `@platejs/floating` | Re-exported middleware and hooks from `@floating-ui/react`. | ## Virtual Floating `useVirtualFloating` creates a Floating UI virtual reference. Use it when the floating element follows a selection, cursor, or computed rectangle instead of a real DOM reference element. ```tsx title="Virtual floating element" import { flip, getDefaultBoundingClientRect, offset, useVirtualFloating, } from '@platejs/floating'; export function SelectionPopover({ open, rect, }: { open: boolean; rect?: DOMRect; }) { const floating = useVirtualFloating({ getBoundingClientRect: () => rect ?? getDefaultBoundingClientRect(), middleware: [offset(8), flip()], open, placement: 'top', }); return (

Selection actions

); } ``` Supplies the virtual element rect. Defaults to `getDefaultBoundingClientRect`. When `false`, the returned style sets `display: 'none'`. Defaults to Floating UI `autoUpdate`. Forwarded to Floating UI `useFloating`. Absolute/fixed position style: `position`, `left`, `top`, `display`, and `visibility`. Mutable virtual reference element. The hook updates its `getBoundingClientRect`. Floating UI refs. Attach `refs.setFloating` to the floating element. Floating UI manual position update. ## Floating Toolbar Floating toolbar setup is split into two hooks. Build state first, then pass that state to `useFloatingToolbar`. ```tsx title="Floating toolbar state" import { flip, offset, useFloatingToolbar, useFloatingToolbarState, } from '@platejs/floating'; import { useEditorId, useEventEditorValue } from 'platejs/react'; export function ToolbarShell() { const editorId = useEditorId(); const focusedEditorId = useEventEditorValue('focus'); const state = useFloatingToolbarState({ editorId, focusedEditorId, floatingOptions: { middleware: [offset(12), flip({ padding: 12 })], placement: 'top', }, }); const { clickOutsideRef, hidden, props, ref } = useFloatingToolbar(state); if (hidden) return null; return (

Toolbar

); } ``` Current editor id. Focused editor id from `useEventEditorValue('focus')`. Options passed to `useVirtualFloating`. Force the toolbar closed. Allow the toolbar to show when the editor is read-only. Internal toolbar state for `useFloatingToolbar`. State returned by `useFloatingToolbarState`. Ref from `useOnClickOutside`. It closes the toolbar and ignores `.ignore-click-outside/toolbar`. `true` when the toolbar should not render. Props to spread on the toolbar root. Floating element ref callback. The toolbar opens only for an expanded selection with text. It stays hidden while the mouse is down, when `hideToolbar` is true, when a different editor owns focus, or when the editor is read-only and `showWhenReadOnly` is not set. ## Rectangle Utilities These helpers normalize editor locations and DOM ranges into rectangles. Returns a zero-size offscreen rect used as a safe Floating UI fallback. Creates a Floating UI virtual element with `getDefaultBoundingClientRect`. Creates a ref-like object whose `current.getBoundingClientRect()` reads editor locations. It throws when no rect exists and no `fallbackRect` is provided. Reads one or more editor locations, converts them to DOM ranges, and returns the merged bounding rect. If `at` is omitted, it uses `editor.selection`. Returns the DOM rect for a range, or `getDefaultBoundingClientRect()` when the range or DOM range is missing. Returns the selection rect only when the editor selection is expanded. Collapsed selections return the default rect. Returns `window.getSelection().getRangeAt(0).getBoundingClientRect()`, or the default rect when no DOM selection exists. Creates a DOMRect-like object and computes `width`, `height`, `x`, and `y`. Merges client rects by min left/top and max right/bottom. It throws when the array is empty. ## Floating UI Re-exports `@platejs/floating` re-exports the Floating UI middleware and React hooks used by Plate UI, including `autoUpdate`, `flip`, `hide`, `inline`, `offset`, `shift`, `size`, `useFloating`, `useInteractions`, `useClick`, `useDismiss`, `FloatingPortal`, and related types. Use those exports when a Plate UI component already imports from `@platejs/floating`; use `@floating-ui/react` directly only when the component is not coupled to Plate. ## Related Components - [Toolbar](/docs/toolbar) covers the registry floating-toolbar component that consumes these hooks. - [Plate Store](/docs/api/core/plate-store) covers `useEditorId` and `useEventEditorValue`. 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"../../content/docs/api/floating.mdx","content":"$50","type":"registry:file","target":"content/docs/plate/api/floating.mdx"}],"className":"h-[70svh] min-h-80"}]]}]