feat(lexical-playground): draggable block

[LuciNyan]

Description

Add draggable block plugin

2022-09-14.23.41.11.mov

Close: #2115

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lexical	✅ Ready (Inspect)	Visit Preview	Sep 17, 2022 at 1:21PM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	Sep 17, 2022 at 1:21PM (UTC)

[hustlefueled]

I tried the deployment on the playground. Don't think this works yet. Or am I too early here? 🤔

[LuciNyan]

I tried the deployment on the playground. Don't think this works yet. Or am I too early here? 🤔

Yes, It's WIP, there is currently no drop handling.

[LuciNyan]

Hi @hustlefueled. Now it's working properly, but I haven't finished processing all the cases.

[echarles]

Tested on the deployed playground and it works beautifully for paragraphs, images... move. Maybe the handle could be vertically positioned at the top instead of at the middle (not sure what other editors do).

[hustlefueled]

Works for me too now. Looks good.

[fantactuka]

This PR is amazing! @LuciNyan do you plan any changes to it, otherwise can help with rebasing if needed and it should go to a playground!

[LuciNyan]

This PR is amazing! @LuciNyan do you plan any changes to it, otherwise can help with rebasing if needed and it should go to a playground!

Hi @fantactuka. This PR is not yet able to be used, it has some flaws and doesn't cover all cases. I'm sorry I may not be able to fix them for a while because my baby is sick, but I'll be back as soon as I can.

[DaniGuardiola]

I've been playing with this plugin for a bit and it's pretty awesome! Some thoughts:

• Locally, I had to add anchorEl.scrollTop to the computed top of both the drag handler and the drop target to account for scrollable containers.
• The drop action seems a little flaky. Sometimes it won't work, depending on where your mouse is when releasing the mouse.

[LuciNyan]

Glad you like it! 😄 And Thank you for providing a lot of useful food for thought.

• Locally, I had to add anchorEl.scrollTop to the computed top of both the drag handler and the drop target to account for scrollable containers.

I don't quite understand. Could you give me a specific example?

• The drop action seems a little flaky. Sometimes it won't work, depending on where your mouse is when releasing the mouse.

I have noticed that this happens when I drag to the very end of the content and then drag down. Do you mean this scenario? If you are talking about other scenarios, Could you provide the steps to reproduce them?

[fantactuka]

Thanks @LuciNyan for amazing feature! Any improvements can go separately, and I believe many people would be happy to play around draggable blocks

[silvergravel]

Any ETA on when / if this implementation will be shifted to @lexical/react?

[amilich]

Any ETA on when / if this implementation will be shifted to @lexical/react?

is this usable in the react library yet?

[ivailop7]

Any ETA on when / if this implementation will be shifted to @lexical/react?

is this usable in the react library yet?

This has been available for a year+ in the playground. The plugin code is available inside the playground folder in the repo.

[nickpapciak]

I can't get this plugin working in react. I tried copying the way it was done from the playground folder but it did not work. Could I get some help on how to use the DraggableBlockPlugin?

[iamdipansh]

I can't get this plugin working in react. I tried copying the way it was done from the playground folder but it did not work. Could I get some help on how to use the DraggableBlockPlugin?

I'm having the same issue.