prosemirror-dropcursor

What is prosemirror-dropcursor?

The prosemirror-dropcursor package is a plugin for ProseMirror, a toolkit for building rich-text editors. This plugin adds a drop cursor to the editor, which is a visual indicator that shows where content will be inserted when it is dragged and dropped.

What are prosemirror-dropcursor's main functionalities?

Adding a Drop Cursor

This code sample demonstrates how to add a drop cursor to a ProseMirror editor. The DropCursor plugin is instantiated and added to the editor's state plugins. When content is dragged and dropped into the editor, the drop cursor will indicate the insertion point.

const { DropCursor } = require('prosemirror-dropcursor');
const { EditorState } = require('prosemirror-state');
const { EditorView } = require('prosemirror-view');
const { schema } = require('prosemirror-schema-basic');
const { DOMParser } = require('prosemirror-model');

const dropCursor = new DropCursor();

const state = EditorState.create({
  doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')),
  plugins: [dropCursor]
});

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

Other packages similar to prosemirror-dropcursor

prosemirror-gapcursor

The prosemirror-gapcursor package provides a similar visual indicator for gaps between blocks in a ProseMirror editor. Unlike prosemirror-dropcursor, which shows where content will be inserted during a drag-and-drop operation, prosemirror-gapcursor shows a cursor in places where the regular text cursor cannot go, such as between two block elements.

prosemirror-menu

The prosemirror-menu package offers a set of UI components for building menus in a ProseMirror editor. While it does not provide a drop cursor, it enhances the editor's functionality by adding menu items for various editing actions. This package complements prosemirror-dropcursor by providing additional user interface elements.

README

prosemirror-dropcursor

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This is a non-core example module for ProseMirror. ProseMirror is a well-behaved rich semantic content editor based on contentEditable, with support for collaborative editing and custom document schemas.

This module implements a plugin that shows a drop cursor for ProseMirror.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license. There's a forum for general discussion and support requests, and the Github bug tracker is the place to report issues.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Documentation

• dropCursor(options?: interface = {}) → Plugin
  Create a plugin that, when added to a ProseMirror instance, causes a decoration to show up at the drop position when something is dragged over the editor.

  Nodes may add a disableDropCursor property to their spec to control the showing of a drop cursor inside them. This may be a boolean or a function, which will be called with a view, a position, and the DragEvent, and should return a boolean.

  • options

    • color?: string
      The color of the cursor. Defaults to black.

    • width?: number
      The precise width of the cursor in pixels. Defaults to 1.

    • class?: string
      A CSS class name to add to the cursor element.

Changelog

1.8.2 (2025-04-22)

Bug fixes

Make sure the drop cursor is positioned in the right place when the editor is scaled with a CSS transform.

Fix the width of the cursor when in a transformed element. Fix incorrect check in dragleave handler

Fix an issue where the dropcursor would hide when drag moved over the top editor element.