Skip to main content
The drop cursor extension shows a visual indicator at the drop position when dragging content over the editor.

​
Installation

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

​
Usage

For most use cases, you should use the <DropIndicator /> component instead, which provides a better visual experience. This extension is a lower-level alternative.
import { createEditor } from 'prosekit/core'
import { defineDropCursor } from 'prosekit/extensions/drop-cursor'

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

​
API reference

​
defineDropCursor(options?)

Creates a drop cursor extension that shows a decoration at the drop position.
​
options.color
string | false
default:"'black'"
The color of the cursor. Use false to apply no color and rely only on class.
​
options.width
number
default:"1"
The precise width of the cursor in pixels.
​
options.class
string
A CSS class name to add to the cursor element.

​
Examples

​
Custom color

const editor = createEditor({
  extension: defineDropCursor({ 
    color: '#2563eb',
    width: 2
  })
})

​
Custom styling with CSS class

const editor = createEditor({
  extension: defineDropCursor({ 
    color: false,
    class: 'my-drop-cursor'
  })
})

.my-drop-cursor {
  background-color: #2563eb;
  width: 2px;
}