Dropcursor

Dropcursor shows a visual line when dragging content over the editor, indicating where the content will be dropped. It renders a horizontal bar for block-level drops and a vertical line for inline drops.

Included in StarterKit by default.

Usage

Dropcursor is included in StarterKit, so it works out of the box. To use it standalone:

Vanilla JS/TS

import { Editor, Document, Paragraph, Text, Dropcursor } from '@domternal/core';
import '@domternal/theme';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Dropcursor],
  content: '<p>Drag content over the editor to see the drop cursor.</p>',
});

Angular

import { Component, signal } from '@angular/core';
import { DomternalEditorComponent } from '@domternal/angular';
import { Editor, Document, Paragraph, Text, Dropcursor } from '@domternal/core';

@Component({
  selector: 'app-editor',
  imports: [DomternalEditorComponent],
  templateUrl: './editor.html',
})
export class EditorComponent {
  editor = signal<Editor | null>(null);
  extensions = [Document, Paragraph, Text, Dropcursor];
  content = '<p>Drag content over the editor to see the drop cursor.</p>';
}

editor.html

<domternal-editor
  [extensions]="extensions"
  [content]="content"
  (editorCreated)="editor.set($event)"
/>

React

import { Domternal } from '@domternal/react';
import { Document, Paragraph, Text, Dropcursor } from '@domternal/core';

export default function Editor() {
  return (
    <Domternal
      extensions={[Document, Paragraph, Text, Dropcursor]}
      content="<p>Drag content over the editor to see the drop cursor.</p>"
    >
      <Domternal.Content />
    </Domternal>
  );
}

Headless

import { Editor, Document, Paragraph, Text, Dropcursor } from '@domternal/core';

const editor = new Editor({
  element: document.getElementById('editor')!,
  extensions: [Document, Paragraph, Text, Dropcursor],
  content: '<p>Drag content over the editor to see the drop cursor.</p>',
});

To configure Dropcursor in StarterKit:

StarterKit.configure({
  dropcursor: { color: '#3b82f6', width: 2 },
})

To disable Dropcursor in StarterKit:

StarterKit.configure({ dropcursor: false })

Options

Option	Type	Default	Description
color	string	'currentColor'	CSS color of the drop cursor line
width	number	1	Width of the drop cursor line in pixels
class	string	undefined	CSS class name added to the drop cursor element

import { Dropcursor } from '@domternal/core';

const editor = new Editor({
  extensions: [
    Dropcursor.configure({
      color: '#3b82f6',
      width: 2,
      class: 'my-drop-cursor',
    }),
  ],
});

Note

Domternal defaults the color to 'currentColor' (inherits from the editor’s text color), unlike ProseMirror’s built-in default of 'black'. This makes the drop cursor adapt automatically to light and dark themes.

Commands

Dropcursor does not register any commands.

Keyboard shortcuts

Dropcursor does not register any keyboard shortcuts.

Input rules

Dropcursor does not register any input rules.

Toolbar items

Dropcursor does not register any toolbar items.

How it works

Dropcursor creates a ProseMirror dropCursor() plugin that listens for four DOM events on the editor:

• dragover - calculates the drop position using ProseMirror’s coordinate system and shows/updates the cursor element. The cursor auto-removes after 5 seconds if the drag stalls.
• dragleave - hides the cursor immediately when the drag leaves the editor area
• dragend - removes the cursor after a 20ms delay when the drag ends
• drop - removes the cursor after a 20ms delay when content is dropped

The cursor is a simple <div> element with absolute positioning (z-index: 50) and pointer-events: none so it does not interfere with the drag operation. It is appended to the editor’s offset parent, not rendered as a ProseMirror decoration.

Block vs inline

The cursor renders differently depending on the drop target:

• Block drops (between paragraphs, headings, etc.) - a horizontal bar spanning the full width of the editor. The CSS class prosemirror-dropcursor-block is added.
• Inline drops (within a text node) - a vertical line at the cursor position. The CSS class prosemirror-dropcursor-inline is added.

Disabling per node

Individual node types can disable the drop cursor by setting disableDropCursor in their ProseMirror node spec:

// Static: always disable
{ disableDropCursor: true }

// Dynamic: disable based on context
{ disableDropCursor: (view, pos, event) => /* ... */ }

Exports

import { Dropcursor } from '@domternal/core';
import type { DropcursorOptions } from '@domternal/core';

Export	Type	Description
Dropcursor	Extension	The dropcursor extension
DropcursorOptions	TypeScript type	Options for Dropcursor.configure()

Source

@domternal/core - Dropcursor.ts