Block Handle
A component that allows for the dragging and dropping of block nodes.
Installation
Copy and paste the following code into your project.
tsx
import {
BlockHandleAdd,
BlockHandleDraggable,
BlockHandlePopover,
} from 'prosekit/react/block-handle'
export default function BlockHandle() {
return (
<BlockHandlePopover className='flex items-center flex-row box-border justify-center transition py-2 [&:not([data-state])]:hidden will-change-transform data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[state=open]:animate-duration-150 data-[state=closed]:animate-duration-200'>
<BlockHandleAdd className='flex items-center box-border justify-center h-[1.5em] w-[1.5em] hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-zinc-500/50 dark:text-zinc-500/50 cursor-pointer'>
<div className='i-lucide-plus h-5 w-5' />
</BlockHandleAdd>
<BlockHandleDraggable className='flex items-center box-border justify-center h-[1.5em] w-[1.2em] hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded text-zinc-500/50 dark:text-zinc-500/50 cursor-grab'>
<div className='i-lucide-grip-vertical h-5 w-5' />
</BlockHandleDraggable>
</BlockHandlePopover>
)
}Usage
Add the BlockHandle component to your Editor component.
The BlockHandle consists of three parts:
BlockHandlePopover: A popover that appears on the left side of a block when you hover over it.BlockHandleAdd: A button that lets you insert a new block below the one you're hovering over.BlockHandleDraggable: A draggable component that allows to reorder a block.
You can choose to use either BlockHandleAdd, BlockHandleDraggable, or both components together.