For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Editor bubble menu

Verified

A floating toolbar over selected text: turn into, bold, italic, underline, strike, code, link, and highlight.

When to use

Use when: Formatting should appear over selected text instead of in a fixed toolbar.
Avoid when: A fixed toolbar above the document is wanted; compose Toolbar instead.

Installation

bunx shelf add editor-bubble-menu

The source lands in src/components/ui/editor-bubble-menu.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Editor from "@/components/ui/editor-bubble-menu";

<Editor.Root>
  <Editor.Content />
  <EditorBubbleMenu />
</Editor.Root>

Built on

Packages: @floating-ui/dom, @stylexjs/stylex, @tiptap/core, @tiptap/extension-bubble-menu, @tiptap/extension-floating-menu, @tiptap/react
Shelf items: Button, Dropdown Menu, Editor, Editor link popover, foundations, Icons, Toggle, Toolbar, utils
Figma: Optional native Figma library. See Designers.

Verified

Size: 1.5 kB gzipped on its own, 189 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
Accessibility: Axe passes on 3 stories
Behavior: 3 interaction tests in Storybook
React Compiler: Compiles with React Compiler
React Doctor: React Doctor finds nothing