How to configure Drag & Drop (v0.65.2)

[joaomarceloods]

Hi! I'm trying to set up Drag & Drop in this sandbox, but the handles don't appear. Can anyone help me find what's missing?

https://codesandbox.io/s/slate-plugins-drag-n-drop-attempt-k1gpu

I looked for clues in these links, but I still can't find what's wrong:

• Example page:
  https://slate-plugins.udecode.io/docs/components/dnd

• Source code of the example page, where I discovered withDraggables:
  https://github.com/udecode/slate-plugins/blob/46d6745b20ed1a3556a1d9372b0909d16cd09d19/docs/src/live/config/withStyledDraggables.tsx

• These discussions:

  • How to configure drag & drop #497 - it seems to be for an old version of slate-plugins
  • Can't get drag and drop working #614 - no replies

[zbeyens]

Thanks for raising the issue, this is due to a recent breaking change, I just fixed it with : https://codesandbox.io/s/slate-plugins-playground-v1-2mh1c?file=/config/withStyledDraggables.tsx:1454-1505

[joaomarceloods]

@zbeyens Thanks for replying. I copied the withStyledDraggables.tsx file to my sandbox but it doesn't really fix it.

https://codesandbox.io/s/slate-plugins-drag-n-drop-attempt-withstyleddraggables-1btm6?file=/src/App.js:883-958

It clearly works in your sandbox, so maybe I skipped a necessary plugin or component?

[joaomarceloods]

@zbeyens Of course, I forgot to add the createParagraphPlugin itself -- now the handles appear. 😅

But there's another issue: each time I drag a paragraph to a different position, it deletes one character from the other paragraph, where the cursor was blinking -- and it moves the cursor to the "drop" position. Do you know why and how to prevent this?

https://codesandbox.io/s/slate-plugins-drag-n-drop-attempt-dragging-deletes-characters-7ltmk?file=/src/App.js:1156-1180

GIF demonstration

[zbeyens]

I can't reproduce the delete bug.

As for the cursor, the drop behavior is just calling Transforms.moveNode so the cursor position can be corrected afterwards

[joaomarceloods]

@zbeyens My apologies, the sandbox is fixed, would you please take a second look? Here's more detail:

https://codesandbox.io/s/slate-plugins-drag-n-drop-attempt-dragging-deletes-characters-7ltmk

• Drag-and-drop deletes a character only when you drop the line in the middle of another line.
• The character deleted is usually where the cursor was.
• Some times you get errors when you drag-and-drop, I don't understand what's the cause:
  • Cannot resolve a Slate point from DOM point: [object HTMLButtonElement],1
  • Invariant Violation. Expected targetIds to be registered. - then the two lines merge together

Demo (recorded): https://recordit.co/B8KRa7HyQb

[zbeyens]

It seems the bug happens in slate-react >0.62.1

Sandbox with v0.62.1, upgrading to 0.63 introduce the bugs

In the meantime, we're patching the peer-dependency https://github.com/udecode/slate-plugins/pull/777/files

[zbeyens]

Fixed in v1

[joaomarceloods]

@zbeyens I upgraded plate to 3.5.1 but it seems the bug is still there: when you drop an element, the cursor deletes one character.

If I use slate-react 0.66.1, which is a peer dependency of slate 3.5.1, the bug is still there.

• Sandbox: https://codesandbox.io/s/plate-drag-drop-deletes-characters-te7eo
• Recording: https://recordit.co/bv7xrVJKCx

There's no bug if I use slate-react 0.62.1 like you suggested before, but it doesn't respect the peer dependency version.

• Sandbox: https://codesandbox.io/s/plate-drag-drop-deletes-characters-0-62-1-wuq38

[zbeyens]

There is a new bug introduced by slate-react (I think >0.66?), I need to take a look at it. The previous versions should work fine.