Updated Drag Handle

[NiclasDev63]

Dragging list items now works as expected and allows dragging multiple nodes.

[vercel[bot]]

@NiclasDev63 is attempting to deploy a commit to the Elegance Team on Vercel.

A member of the Team first needs to authorize it.

[andrewdoro]

lgtm

[andrewdoro]

We can also reuse your extensions from npm. I find it better when we have composable extensions instead of being handled by library core. (this approach is similar to shadcn-ui components.

Let me know if you think that we can reuse your extensions. Looks like your drag extension can also help with https://github.com/steven-tey/novel/issues/341

If they can be used, I would recommend the following changes to the PR:

• update package json and update extensions for web demo and example
• change docs to show a drag and drop configuration

Great work💪

[NiclasDev63]

I tested locally using my npm packages instead of integrating the code directly into novel core and everything worked as expected.

Yes, my extension also solves #341, at least partially, as the scroll speed cannot be configured yet, but auto scrolling works.

I'm just not sure at the moment how the docs should be changed regarding the "show a drag and drop configuration" point. It would be good if you could explain this further.

[andrewdoro]

Hey, related to the scroll speed, it's fine for now as long as the user can disable the autoscroll feature.

Related to docs I had in mind something similar to: https://github.com/steven-tey/novel/blob/cb682b44a60ae569c0ca70afac9dd9ad8fee3f36/apps/docs/guides/image-upload.mdx

This would have a step by step structure to configure the drag and drop. The content for it can look like this:

1. Install dependecy tiptap-extension-global-drag-handle
2. Add Drag extenstion to extension array
3. Anything else that would be helpful for the user, such as the extension config

Let me know wdyt about this. I can also help with the docs.

[NiclasDev63]

Thanks, I'll try to add the documentation for the drag handle in the near future. And as for scrolling, you can disable the autoscroll function within the drag handle by setting scrollTreshold = 0, but you would also have to suppress the default behavior of html to avoid auto scrolling completely, since scrolling is automatically enabled as soon as an element is dragged. This would of course be possible, but I don't think this is an important feature, as auto scrolling is usually expected when dragging elements to the very edge of the screen.

[andrewdoro]

Yep that was the thing, just a config for your extension not the html native behaviour.

And as for scrolling, you can disable the autoscroll function within the drag handle by setting scrollTreshold = 0,

Could you please update the PR to add your extension packages, and remove the current drag and drop extension code from novel. We can add docs later.

[socket-security[bot]]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/tiptap-extension-auto-joiner@0.1.1	None	0	1.69 MB	niclasdev63

🚮 Removed packages: npm/@radix-ui/react-dropdown-menu@2.0.6, npm/@tailwindcss/typography@0.5.12, npm/clsx@2.1.0, npm/lucide-react@0.363.0, npm/next-themes@0.3.0, npm/next@14.1.4, npm/sonner@1.4.41, npm/tailwind-merge@2.2.2

View full report↗︎

[NiclasDev63]

I just deleted the drag handle code from novel core and used my npm packages instead. I also added the documentation for both extensions.