Tiptap Extension: GlobalDragHandle
Install
NPM
$ npm install tiptap-extension-global-drag-handle
Yarn
$ yarn add tiptap-extension-global-drag-handle
Usage
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 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.
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
new Editor({
extensions: [
GlobalDragHandle.configure({
dragHandleWidth: 20,
scrollTreshold: 100,
dragHandleSelector: ".custom-drag-handle"
}),
],
})
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 example, to see how you can apply styling.