search

measuredco / puck

The visual editor for React
https://puckeditor.com
MIT License
5.32k stars 327 forks source link

New drag-and-drop engine #556

Open chrisvxd opened 3 months ago

chrisvxd commented 3 months ago

Introduce a new drag-and-drop engine to resolve numerous issues:

  1. 123

  2. 389

  3. 455

  4. 520

Proposals

Proposal 1 - dnd-kit (preferred)

The new experimental dnd-kit release, whilst in early alpha, may resolve all issues 1 - 4. This is the solution currently being explored.

Being implemented here: https://github.com/measuredco/puck/pull/598

Proposal 2 - custom drag-and-drop library

Creating a custom drag-and-drop library may be more suitable for Puck's needs, and a POC has been created, but significant additional effort is needed to support 3 and 4.

Cross-cutting concerns

Anishali2 commented 2 months ago

@chrisvxd I have expertise in dnd-kit can i start working?

chrisvxd commented 2 months ago

@Anishali2 I appreciate that, but we're pretty far down the road now in #598 and just ironing out the last few bits with the dnd-kit team!

If you have any expertise in the experimental brand of dnd-kit, I may have some questions for you in the Discord!

Anishali2 commented 2 months ago

@chrisvxd Sure

Sarfraz-droid commented 1 month ago

You can also consider using react-dnd. I had some issues while using dndkit between iframes. Since it does not uses HTML Dnd Api

chrisvxd commented 1 month ago

@Sarfraz-droid we're sticking with dnd-kit now, but we're using the experimental build and actively contributing to it.

We require a lot of very complex behaviour that most dnd libraries just don't solve for (iframes is obviously one, but there's a ton more like nested dragging, animations, inline CSS, transforms, placeholders, etc).

skowrons commented 1 month ago

Just a thought: Have you considered the new drag-and-drop library from Atlassian? It's entirely built in JavaScript and is framework-independent.

https://github.com/atlassian/pragmatic-drag-and-drop