# tiptap-extension-global-drag-handle

> drag handle extension for tiptap

Latest version **0.1.18** (published 2025-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install tiptap-extension-global-drag-handle
pnpm add tiptap-extension-global-drag-handle
yarn add tiptap-extension-global-drag-handle
bun add tiptap-extension-global-drag-handle
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.18 |
| Published | 2025-02-13 |
| First published | 2024-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 120.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 153 |
| Author | Niclas Gregor |
| Maintainers | niclasdev63 |
| Keywords | tiptap, tiptap extension, drag handle |

## Links

- npm: https://www.npmjs.com/package/tiptap-extension-global-drag-handle
- Repository: https://github.com/NiclasDev63/tiptap-extension-global-drag-handle
- Homepage: https://github.com/NiclasDev63/tiptap-extension-global-drag-handle#readme
- Issues: https://github.com/NiclasDev63/tiptap-extension-global-drag-handle/issues
- npm.io page: https://npm.io/package/tiptap-extension-global-drag-handle

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 0.1.18 (latest) — 2025-02-13
- 0.1.17 — 2025-02-12
- 0.1.16 — 2024-11-04
- 0.1.15 — 2024-10-29
- 0.1.14 — 2024-10-26
- 0.1.13 — 2024-09-10
- 0.1.12 — 2024-08-24
- 0.1.11 — 2024-08-21
- 0.1.10 — 2024-07-07
- 0.1.9 — 2024-07-06
- 0.1.8 — 2024-05-30
- 0.1.7 — 2024-05-19
- 0.1.6 — 2024-03-30
- 0.1.5 — 2024-03-30
- 0.1.4 — 2024-03-30
- … 4 more at https://npm.io/package/tiptap-extension-global-drag-handle/versions

## README

# Tiptap Extension: GlobalDragHandle
<a href="https://www.npmjs.com/package/tiptap-extension-global-drag-handle"><img alt="NPM Downloads" src="https://img.shields.io/npm/dw/tiptap-extension-global-drag-handle"></a>


## Install

NPM
```
$ npm install tiptap-extension-global-drag-handle
```

Yarn
```
$ yarn add tiptap-extension-global-drag-handle
```

## Usage

```js
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'

new Editor({
  extensions: [
    GlobalDragHandle,
  ],
})
```

In order to enjoy all the advantages of the drag handle, it is recommended to install the [AutoJoiner](https://github.com/NiclasDev63/tiptap-extension-auto-joiner) extension as well, which allows you to automatically join various nodes such as 2 lists that are next to each other.

## Configuration

Optionally, you can also configure the drag handle.

```js
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'

new Editor({
  extensions: [
    GlobalDragHandle.configure({
        dragHandleWidth: 20, // default

        // The scrollTreshold specifies how close the user must drag an element to the edge of the lower/upper screen for automatic 
        // scrolling to take place. For example, scrollTreshold = 100 means that scrolling starts automatically when the user drags an 
        // element to a position that is max. 99px away from the edge of the screen
        // You can set this to 0 to prevent auto scrolling caused by this extension
        scrollTreshold: 100, // default

        // The css selector to query for the drag handle. (eg: '.custom-handle').
        // If handle element is found, that element will be used as drag handle. 
        // If not, a default handle will be created
        dragHandleSelector: ".custom-drag-handle", // default is undefined


        // Tags to be excluded for drag handle
        // If you want to hide the global drag handle for specific HTML tags, you can use this option.
        // For example, setting this option to ['p', 'hr'] will hide the global drag handle for <p> and <hr> tags.
        excludedTags: [], // default

        // Custom nodes to be included for drag handle
        // For example having a custom Alert component. Add data-type="alert" to the node component wrapper.
        // Then add it to this list as ['alert']
        //
        customNodes: [],
    }),
  ],
})
```

## Styling
By default the drag handle is headless, which means it doesn't contain any css. If you want to apply styling to the drag handle, use the class "drag-handle" in your css file.
Take a look at [this](https://github.com/steven-tey/novel/blob/main/apps/web/styles/prosemirror.css#L131) example, to see how you can apply styling.

---
_Source: https://npm.io/package/tiptap-extension-global-drag-handle · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._