tiptap/docs/api/extensions/dropcursor.md
Dominik f387ad3dd4
feat(pm): new prosemirror package for dependency resolving
* chore:(core): migrate to tsup

* chore: migrate blockquote and bold to tsup

* chore: migrated bubble-menu and bullet-list to tsup

* chore: migrated more packages to tsup

* chore: migrate code and character extensions to tsup

* chore: update package.json to simplify build for all packages

* chore: move all packages to tsup as a build process

* chore: change ci build task

* feat(pm): add prosemirror meta package

* rfix: resolve issues with build paths & export mappings

* docs: update documentation to include notes for @tiptap/pm

* chore(pm): update tsconfig

* chore(packages): update packages

* fix(pm): add package export infos & fix dependencies

* chore(general): start moving to pm package as deps

* chore: move to tiptap pm package internally

* fix(demos): fix demos working with new pm package

* fix(tables): fix tables package

* fix(tables): fix tables package

* chore(demos): pinned typescript version

* chore: remove unnecessary tsconfig

* chore: fix netlify build

* fix(demos): fix package resolving for pm packages

* fix(tests): fix package resolving for pm packages

* fix(tests): fix package resolving for pm packages

* chore(tests): fix tests not running correctly after pm package

* chore(pm): add files to files array

* chore: update build workflow

* chore(tests): increase timeout time back to 12s

* chore(docs): update docs

* chore(docs): update installation guides & pm information to docs

* chore(docs): add link to prosemirror docs

* fix(vue-3): add missing build step

* chore(docs): comment out cdn link

* chore(docs): remove semicolons from docs

* chore(docs): remove unnecessary installation note

* chore(docs): remove unnecessary installation note
2023-02-02 17:37:33 +01:00

64 lines
1.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
description: Adds a cursor when something is dragged inside the editor.
icon: drag-drop-line
---
# Dropcursor
[![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)
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.
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
```bash
npm install @tiptap/extension-dropcursor
```
## Settings
### color
Color of the dropcursor.
Default: `'currentColor'`
```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',
})
```
## Source code
[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-dropcursor/)
## Usage
https://embed.tiptap.dev/preview/Extensions/Dropcursor