tiptap/docs/api/extensions/dropcursor.md
2022-12-23 00:00:57 +01:00

1.7 KiB
Raw Blame History

description icon
Adds a cursor when something is dragged inside the editor. drag-drop-line

Dropcursor

Version Downloads

This extension loads the ProseMirror Dropcursor plugin by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged into the editor.

Note that Tiptap is headless, but the dropcursor needs CSS for its appearance. There are settings for the color and width, and youre free to add a custom CSS class.

Installation

npm install @tiptap/extension-dropcursor

:::warning Are you using Yarn, pNPM, npm 6 or less? Unfortunately your package manager does not install peer dependencies automatically and you have to install them by your own. Please see here which packages are needed and how to install them. :::

Settings

color

Color of the dropcursor.

Default: 'currentColor'

Dropcursor.configure({
  color: '#ff0000'
})

width

Width of the dropcursor.

Default: 1

Dropcursor.configure({
  width: 2,
})

class

One or multiple CSS classes that should be applied to the dropcursor.

Dropcursor.configure({
  class: 'my-custom-class',
})

Source code

packages/extension-dropcursor/

Usage

https://embed.tiptap.dev/preview/Extensions/Dropcursor