Skip to main content
Visual indicator showing where dragged content will be inserted. The drop cursor appears as a vertical line when dragging content over the editor.
Draggable demo image

👆 Drag this image into the editor below to see the drop cursor

​
Use Case

  • Visual Feedback - Shows exactly where content will drop
  • Precision Placement - Position images and files accurately
  • Better UX - Clear indicator prevents placement mistakes
  • Professional Feel - Matches modern editor behavior

​
Options

Configure the extension behavior:
​
color
string
default:"currentColor"
CSS color for the drop cursor indicator
​
width
number
default:"2"
Width of the drop cursor line in pixels
​
class
string
Optional CSS class to apply to the drop cursor element
Example: 
// Customize drop cursor appearance
const ConfiguredDropCursor = DropCursor.configure({
  color: '#3b82f6',
  width: 3,
  class: 'custom-drop-cursor'
});

// Use in SuperDoc
new SuperDoc({
  selector: '#editor',
  document: 'document.docx',
  editorExtensions: [ConfiguredDropCursor]
});

​
Source Code