Copy/pasting void elements is not working

[evasteingrims]

Description

Copy/pasting a void element is not working. Copy/paste works for text but then then when I try to copy a void element and paste, the text is pasted instead of the element

Recording

Screen.Recording.2022-01-26.at.14.07.33.mov

Sandbox
It works in slate-react version 0.61.3 but not in version 0.72.6,

https://codesandbox.io/s/slate-reproductions-forked-bx8wd

Steps
To reproduce the behavior:

1. Go to https://codesandbox.io/s/slate-reproductions-forked-1k4uo?file=/package.json
2. Click on one of the green boxes
3. Copy with the keyboard
4. Paste with the keyboard
5. The green box is not pasted

Expectation
The green box should be pasted

Environment

• Slate Version: 0.72.6
• Operating System: OS 10.15.7
• Browser: Chrome

[nemanja-tosic]

I have tested both versions provided and copy/paste does not work on either 0.61.3 nor 0.72.6.

I would also suggest we tweak the wording of the issue a bit (of course if @evasteingrims would confirm that this is indeed the case, and not a failed reproduction on my end).

Namely, copy/paste of the void element does work if you have the void element as part of an expanded selection (first thing to confirm). So for example, if you select the text around the void and paste everything works as expected. What does not work - when you only click the void and copy, it does not add anything to the clipboard (second thing to confirm).

My view of the issue then is, given the above is correct - copy does not add the focused void element when the selection is collapsed (or rather, click + copy, as opposed to selecting a fragment).

[evasteingrims]

I have tested both versions provided and copy/paste does not work on either 0.61.3 nor 0.72.6.

I would also suggest we tweak the wording of the issue a bit (of course if @evasteingrims would confirm that this is indeed the case, and not a failed reproduction on my end).

Namely, copy/paste of the void element does work if you have the void element as part of an expanded selection (first thing to confirm). So for example, if you select the text around the void and paste everything works as expected. What does not work - when you only click the void and copy, it does not add anything to the clipboard (second thing to confirm).

My view of the issue then is, given the above is correct - copy does not add the focused void element when the selection is collapsed (or rather, click + copy, as opposed to selecting a fragment).

We are using version 0.61.3 in our project and copy pasting works as expected there.

But yes you are correct, I can confirm both things suggested here

[Schipy]

I can confirm, and would like to +1 this issue
Here's a simple repro from Slate official examples:

• Go to mentions example
• click on a mention to select it (it should render with an extra border, when it gets selected)
  • (in this case the slate selection will be a collapsed selection that points to the empty text inside the inline void element)
• hit copy (cmd+c)
• clipboard remains empty (internal onCopy is not even fired)

when selection is a range the inline element is properly copied as part of that larger selection

• select a range, including a mention node as well
• copy will put the correct slate model fragment (including the inline void element node) on clipboard

[evasteingrims]

We haven't been able to upgrade Slate versions in long time because of this issue. Has anyone found a workaround?

[dylans]

In general I think you need to be able to select the empty elements just before and after the void in order for copy-paste to retain the structure.

That said, you can (and should) write your own paste handler to retain the void. There's a partial example in #4333 and discussion in various PRs around copy/paste (in particular #4489 ), but essentially application/x-slate-fragment contains the full tree so you could make sure you preserve the void if it's the only element in the selection.