Closed piszczu4 closed 1 week ago
Any updates? It would be awesome to have docs for drag-handle (framework agnostic, I'm Svelte developer)
I also looking for drag handle docs. Any Updates?
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
How are we going with this @nperez0111 ?
Are there any updates on this?
I actually started writing this yesterday. Should be finished on monday
Here is the preliminary version:
title: Drag Handle extension tags:
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.
npm install @tiptap-pro/extension-drag-handle
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
},
})
Options for tippy.js. You can pass any options that are available in the tippy.js documentation.
Default: undefined
DragHandle.configure({
tippyOptions: {
placement: 'left',
},
})
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
},
})
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()
Unlocks the draghandle. Resets to default visibility and behavior.
editor.commands.unlockDragHandle()
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.
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
Integrate this pro extension by registering for a free Tiptap account and following our access guide to Tiptap’s private repository.
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()
when I try to use this extension In my Code,it appears error like thats:GET http://localhost:3001/node_modules/.vite/deps/@tiptap-pro_extension-drag-handle.js?v=71b69e5f net::ERR_ABORTED 504 (Outdated Optimize Dep)
when I try to use this extension In my Code,it appears error like thats:GET http://localhost:3001/node_modules/.vite/deps/@tiptap-pro_extension-drag-handle.js?v=71b69e5f net::ERR_ABORTED 504 (Outdated Optimize Dep)
This is your vite dev server configuration, totally unrelated to this
@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?
@nachodeh this extension deals with moving the outermost blocks in the editor, not sub items, we will consider this in the future as an enhancement to the current functionality but for now it is out of scope because it is complicated to implement
@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?
@nachodeh this extension deals with moving the outermost blocks in the editor, not sub items, we will consider this in the future as an enhancement to the current functionality but for now it is out of scope because it is complicated to implement
I see how complicated this can be to implement. Unfortunately, without being able to move sub items, the extension misses a critical use case (moving list items has got to be among the most popular use cases for this feature).
I'll stick to https://github.com/NiclasDev63/tiptap-extension-global-drag-handle for now, but keen to try this one out once the functionality is in place.
Thanks for your work on this!
when I try to use this extension In my Code,it appears error like thats:GET http://localhost:3001/node_modules/.vite/deps/@tiptap-pro_extension-drag-handle.js?v=71b69e5f net::ERR_ABORTED 504 (Outdated Optimize Dep)
This is your vite dev server configuration, totally unrelated to this
Thanks, I've solved it. There are other problems. Dragging to the top or bottom of the page will not automatically scroll in the corresponding direction.
@tiptap-pro/extension-drag-handle
Boss, when will it be deployed to the Tiptap document I am currently experiencing issues while using:
I use the Vue3 framework
I posted the same docs that I had above.
The node-range extension is not really worth documenting since it is more of a helper function than something you would have in your editor
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