Block Handle

InstallationCopy Anchor Link

bunx --bun shadcn@latest add @slash-editor/block-handle

This component renders icon-only buttons and needs a TooltipProvider ancestor (delay={400} is what the playground itself uses).

It renders nothing while the editor is read-only: the gutter only ever inserts, reorders, or deletes blocks, so it stands down with the document instead of offering actions that would have to be rejected.

Gutter placementCopy Anchor Link

The handle renders in a gutter just left of each block: the band [block.left - BLOCK_GUTTER_WIDTH, block.left] (80px, exported from @slash-editor/core), which is also how far left of a block BlockDrag keeps that block hovered. It works with any left padding on the editor, including none: the handle then sits outside the editor element, so make sure no ancestor clips it (overflow: hidden) or covers it. Left padding of at least 80px keeps the gutter inside the editor's own box.

If you restyle the handle wider than that band, raise gutterWidth to match, or the handle vanishes while the pointer travels to it:

useSlashEditor({ blockKit: { drag: { gutterWidth: 120 } } });