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 block handle

Verified

A drag handle beside each block, with a menu to turn it into another kind, duplicate, or delete it.

When to use

Use when: Blocks need to be reordered by dragging, or turned into another kind, duplicated, or deleted.
Avoid when: The document is a single paragraph.

Installation

bunx shelf add editor-block-handle

The source lands in src/components/ui/editor-block-handle.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-block-handle";

<Editor.Root>
  <Editor.Content />
  <EditorBlockHandle />
</Editor.Root>

Built on

Packages: @stylexjs/stylex, @tiptap/extension-drag-handle, @tiptap/extension-drag-handle-react, @tiptap/pm
Shelf items: Button, Dropdown Menu, Editor, foundations, Icons
Figma: Optional native Figma library. See Designers.

Verified

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