Type Editor

---

Type Editor / @type-editor/dropcursor

@type-editor/dropcursor

This is a refactored version of the prosemirror-dropcursor module.

This module implements a plugin that displays a visual drop cursor indicator when content is dragged over the editor. The drop cursor helps users see where dragged content will be inserted, appearing as a colored line or block at the potential drop position during drag-and-drop operations.

Installation

npm install @type-editor/dropcursor

Usage

import { EditorState } from "@type-editor/state";
import { EditorView } from "@type-editor/view";
import { dropCursor } from "@type-editor/dropcursor";

const state = EditorState.create({
  schema: mySchema,
  plugins: [dropCursor({ color: "blue", width: 2 })],
});

const view = new EditorView(document.querySelector("#editor"), { state });

API

dropCursor

Creates a plugin that displays a visual drop cursor indicator when content is dragged over the editor.

function dropCursor(options?: DropCursorOptions): Plugin;

Parameters:

• options - Optional configuration for the drop cursor appearance

Returns: A ProseMirror plugin instance

DropCursorOptions

Configuration options for the drop cursor plugin.

interface DropCursorOptions {
  color?: string | false;
  width?: number;
  class?: string;
}

Option	Type	Default	Description
color	string | false	"black"	The color of the cursor. Set to false to apply no color and rely only on the CSS class.
width	number	1	The precise width of the cursor in pixels.
class	string	—	A CSS class name to add to the cursor element for custom styling.

Node Spec Integration

Nodes may add a disableDropCursor property to their spec to control whether the drop cursor can appear inside them. This can be:

• Boolean: true to disable the drop cursor, false to enable it
• Function: (view: EditorView, pos: number, event: DragEvent) => boolean for dynamic control

Example

const imageNode = {
  // ...other spec properties...
  disableDropCursor: true, // Never show drop cursor inside this node
};

const customNode = {
  // ...other spec properties...
  disableDropCursor: (view, pos, event) => {
    // Dynamically decide based on context
    return event.dataTransfer?.types.includes("text/plain") ?? false;
  },
};

Styling

The drop cursor element can be styled via CSS using the class option:

dropCursor({ class: "my-drop-cursor", color: false });

.my-drop-cursor {
  background-color: #3b82f6;
  box-shadow: 0 0 4px rgba(59, 130, 246, 0.5);
}

License

MIT

Modules

Module	Description
drop-cursor-plugin	‐
DropCursorView	‐
types/DropCursorOptions	‐
types/EventHandler	‐
types/NodeSpec	‐
types/Rect	‐