Install the extension with a package manager of your choice.
Copy
Ask AI
$ npm i tiptap-extension-global-drag-handle
Copy
Ask AI
$ 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.
//extensions.tsimport GlobalDragHandle from 'tiptap-extension-global-drag-handle'import AutoJoiner from 'tiptap-extension-auto-joiner' // optionalexport 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.tsxconst 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.