2021-10-14 06:13:50 +08:00
---
description: Adds a cursor when something is dragged inside the editor.
2021-10-15 03:20:21 +08:00
icon: drag-drop-line
2021-10-14 06:13:50 +08:00
---
2020-11-02 22:54:15 +08:00
# Dropcursor
2021-01-25 17:35:52 +08:00
[![Version ](https://img.shields.io/npm/v/@tiptap/extension-dropcursor.svg?label=version )](https://www.npmjs.com/package/@tiptap/extension-dropcursor)
[![Downloads ](https://img.shields.io/npm/dm/@tiptap/extension-dropcursor.svg )](https://npmcharts.com/compare/@tiptap/extension-dropcursor?minimal=true)
2020-11-18 19:34:48 +08:00
This extension loads the [ProseMirror Dropcursor plugin ](https://github.com/ProseMirror/prosemirror-dropcursor ) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged into the editor.
2020-11-06 04:39:08 +08:00
2021-10-20 04:30:45 +08:00
Note that Tiptap is headless, but the dropcursor needs CSS for its appearance. There are settings for the color and width, and you’ re free to add a custom CSS class.
2020-11-02 22:54:15 +08:00
## Installation
```bash
npm install @tiptap/extension -dropcursor
```
2020-11-18 19:12:34 +08:00
## Settings
2021-10-02 07:20:09 +08:00
### color
Color of the dropcursor.
2022-11-08 04:41:00 +08:00
Default: `'currentColor'`
2021-10-02 07:20:09 +08:00
```js
Dropcursor.configure({
color: '#ff0000'
})
```
### width
Width of the dropcursor.
Default: `1`
```js
Dropcursor.configure({
width: 2,
})
```
### class
One or multiple CSS classes that should be applied to the dropcursor.
```js
Dropcursor.configure({
class: 'my-custom-class',
})
```
2020-11-18 19:12:34 +08:00
2020-11-02 22:54:15 +08:00
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-dropcursor/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/ )
2020-11-02 22:54:15 +08:00
## Usage
2021-10-19 00:01:47 +08:00
https://embed.tiptap.dev/preview/Extensions/Dropcursor