Skip to main content
The drop indicator extension provides a visual indicator when dragging blocks within the editor, showing where the block will be dropped.

​
Installation

The drop indicator extension is included in the prosekit package. 
import { defineDropIndicator } from 'prosekit/extensions/drop-indicator'

​
Usage

This extension is typically used with the <DropIndicator /> and <BlockHandleDraggable /> components for a complete drag-and-drop experience.
import { createEditor } from 'prosekit/core'
import { defineDropIndicator } from 'prosekit/extensions/drop-indicator'

const editor = createEditor({
  extension: defineDropIndicator()
})

​
API reference

​
defineDropIndicator()

Creates a drop indicator extension that shows where dragged blocks will be dropped.

​
With UI components

The drop indicator extension works best with ProseKit’s UI components: 
import { useEditor } from 'prosekit/react'
import { DropIndicator } from 'prosekit/react/drop-indicator'
import { BlockHandleDraggable } from 'prosekit/react/block-handle'

export default function Editor() {
  const editor = useEditor({ 
    extension: defineDropIndicator() 
  })

  return (
    <ProseKit editor={editor}>
      <div ref={editor.mount} />
      <DropIndicator />
      <BlockHandleDraggable />
    </ProseKit>
  )
}

​
How it works

The drop indicator extension:
  1. Tracks drag events within the editor
  2. Calculates drop position based on cursor location
  3. Shows visual indicator at the target position
  4. Handles drop events to move blocks

​
Use cases

Reorder paragraphs

Drag and drop paragraphs to reorder content

Move headings

Reorganize document structure by moving headings

Rearrange lists

Move list items and nested lists

Position media

Place images and videos precisely