tiptap
tiptap copied to clipboard
ueberdosis
[Documentation]: `drag-handle-react` and `node-range` pro extensions documentation
What’s the URL to the page you’re sending feedback for?
https://tiptap.dev/docs/editor/extensions
What part of the documentation needs improvement?
There is no description of above plugins
What is helpful about that part?
There is no description of above plugins
What is hard to understand, missing or misleading?
There is no description of above plugins
Anything to add? (optional)
No response
Any updates? It would be awesome to have docs for drag-handle (framework agnostic, I'm Svelte developer)
Sorry we are in the middle of a huge documentation refactor and that is why it is not up yet.
Hopefully in the coming weeks we can release it
Here is the preliminary version:
title: Drag Handle extension tags:
- type: pro meta: category: Editor title: Drag Handle extension | Tiptap Editor Docs description: Enable dragging nodes around your Tiptap Editor with the Drag Handle Extension. Learn how to set it up here in the Docs! extension: name: Drag Handle description: You ever wanted to drag nodes around your editor? Well we too - so here is an extension for that. type: extension icon: GripVertical isPro: true
import { CodeDemo } from '@/components/CodeDemo' import { Callout } from '@/components/ui/Callout'
You ever wanted to drag nodes around your editor? Well we too - so here is an extension for that.
The DragHandle extension allows you to easily handle dragging nodes around in the editor. You can define custom render functions, placement, and more.
Install
npm install @tiptap-pro/extension-drag-handle
Settings
render
Renders an element that is positioned with tippy.js. This is the element that will be displayed as the handle when dragging a node around.
DragHandle.configure({
render: () => {
const element = document.createElement('div')
// Use as a hook for CSS to insert an icon
element.classList.add('custom-drag-handle')
return element
},
})
tippyOptions
Options for tippy.js. You can pass any options that are available in the tippy.js documentation.
Default: undefined
DragHandle.configure({
tippyOptions: {
placement: 'left',
},
})
onNodeChange
Returns a node or null when a node is hovered over. This can be used to highlight the node that is currently hovered over.
Default: undefined
DragHandle.configure({
onNodeChange: ({ node, editor }) => {
if (!node) {
selectedNode = null
return
}
// Do something with the node
selectedNode = node
},
})
Commands
lockDragHandle()
Locks the draghandle in place and visibility. If the drag handle was visible, it will remain visible until unlocked. If it was hidden, it will remain hidden until unlocked.
This can be useful if you want to have a menu inside of the drag handle and want it to remain visible whether the drag handle is moused over or not.
editor.commands.lockDragHandle()
unlockDragHandle()
Unlocks the draghandle. Resets to default visibility and behavior.
editor.commands.unlockDragHandle()
toggleDragHandle()
Toggle draghandle lock state. If the drag handle is locked, it will be unlocked and vice versa.
editor.commands.toggleDragHandle()
@nperez0111 thanks! Just set it up in my editor and it's mostly working.
One notable major issue happens with lists. The drag handle plugin applies to the list as a whole instead of allowing me to drag individual items. Is this a known issue? Is there a config I can apply to select list items individually?
@nperez0111 thanks! Just set it up in my editor and it's mostly working.
One notable major issue happens with lists. The drag handle plugin applies to the list as a whole instead of allowing me to drag individual items. Is this a known issue? Is there a config I can apply to select list items individually?
I didn't find any way of changing this behavior, this extension does have the wanted behavior, although as for my use case it also has a few problems.
