Skip to main content
1

Install the extension

Install the extension with a package manager of your choice.
$ npm i tiptap-extension-global-drag-handle

$ yarn add tiptap-extension-global-drag-handle
In order to enjoy all the advantages of a drag handle, it is recommended to install the auto joiner extension as well, which allows you to automatically join various nodes such as 2 lists that are next to each other.
$ npm i tiptap-extension-auto-joiner

$ yarn add tiptap-extension-auto-joiner
2

Add drag extension

// extensions.ts
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
import AutoJoiner from 'tiptap-extension-auto-joiner' // optional

export const defaultExtensions = [
    GlobalDragHandle,
    AutoJoiner, // optional
    // other extensions
];

// editor.tsx
const Editor = () => {
    return <EditorContent extensions={defaultExtensions} />
}
3

Configure the extension

//extensions.ts
import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
import AutoJoiner from 'tiptap-extension-auto-joiner' // optional

export const defaultExtensions = [
    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
    }),
    AutoJoiner.configure({
        elementsToJoin: ["bulletList", "orderedList"] // default
    }),
    // other extensions
];

// editor.tsx
const Editor = () => {
    return <EditorContent extensions={defaultExtensions} />
}
4

Add 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 to see an example of drag handle styling.