Toolbar

Overview

Document.Toolbar provides shared toolbar components that can be used across different document features (annotations, editing, etc.). The toolbar appears contextually based on user interactions like text selection.

Document.Toolbar.Selection

Floating toolbar that appears when text is selected in the document.

<Document.Toolbar.Selection>
  <Document.Annotation.AddButton />
</Document.Toolbar.Selection>

Props

Prop	Type	Description
`className`	`string`	Additional classes
`children`	`ReactNode`	Toolbar content (required)

Behavior

Appears above the text selection on mouse release (not during drag)
Automatically positions to stay within viewport
Hidden when selection is cleared or an action is taken

Combining Features

The toolbar can contain actions from multiple features:

<Document.Toolbar.Selection>
  <Document.Annotation.AddButton />
  {/* Future: <Document.Editing.FormatButton /> */}
</Document.Toolbar.Selection>

Hooks

useSelectionToolbarContext

Access toolbar actions from within the toolbar. Available inside Document.Toolbar.Selection.

import { useSelectionToolbarContext } from "@tilt-legal/cubitt-components/document";

function CustomToolbarButton() {
  const context = useSelectionToolbarContext();

  return (
    <button
      onClick={() => {
        doSomething();
        context?.hideToolbar();
      }}
    >
      Custom Action
    </button>
  );
}

Property	Type	Description
`hideToolbar`	`() => void`	Hide the toolbar

useSelectionToolbar

Low-level hook for building completely custom selection toolbars. Takes the TipTap editor instance.

import {
  useDocument,
  useSelectionToolbar,
} from "@tilt-legal/cubitt-components/document";

function CustomToolbar() {
  const { editor } = useDocument();
  const { isVisible, position, selectedText, selectionRange, hideToolbar } =
    useSelectionToolbar(editor);

  if (!isVisible) return null;

  return (
    <div style={{ top: position.top, left: position.left }}>
      Selected: "{selectedText}"
    </div>
  );
}

Property	Type	Description
`isVisible`	`boolean`	Whether toolbar should show
`position`	`{ top: number, left: number }`	Toolbar position in pixels
`selectedText`	`string`	Currently selected text
`selectionRange`	`{ from: number, to: number }`	Selection positions
`hideToolbar`	`() => void`	Hide the toolbar

Toolbar

On this page