DropCursor extension

Visual indicator showing where dragged content will be inserted.

The drop cursor appears as a vertical line when dragging content over the editor.

👆 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