Floating Selection Toolbar

Create a floating action toolbar that anchors to the current text selection inside an existing Remirror editor. The toolbar should rely on the editor's floating positioning tools to follow selections, hide appropriately, and render custom action content.

Capabilities

Selection-aware visibility

• The floating toolbar stays hidden when the editor selection is collapsed or empty, and becomes visible only when a text range is selected. @test

Anchored positioning with offset control

• The toolbar renders in a floating container anchored to the active selection, defaulting to a top placement and updating its coordinates when the selection changes. @test
• Passing an offset prop shifts the toolbar away from the selection by the specified pixel distance. @test

Reactive updates

• While a selection stays active, the toolbar recomputes its position when the viewport scrolls or resizes. @test
• The toolbar hides after the selection is cleared or the editor loses focus, respecting an optional hide delay. @test

Custom action rendering

• The toolbar renders children returned by a renderActions callback, which receives the current selected text and active mark state. @test

Implementation

@generates

API

export type FloatingPlacement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'
  | 'right'
  | 'right-start'
  | 'right-end';

export interface FloatingToolbarProps {
  placement?: FloatingPlacement;
  offset?: number;
  hideDelayMs?: number;
  renderActions?: (context: {
    selectedText: string;
    activeMarks: Record<string, boolean>;
  }) => React.ReactNode;
  children?: React.ReactNode;
}

export function FloatingToolbar(props: FloatingToolbarProps): JSX.Element;

Dependencies { .dependencies }

@remirror/react { .dependency }

Provides the editor context and floating positioning utilities required to anchor the toolbar to text selections.