slate
slate copied to clipboard
ianstormtaylor
Copy/pasting void elements is not working
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
https://user-images.githubusercontent.com/11168195/151177768-48934c59-0656-415f-b3e6-d5ec3729b149.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:
- Go to https://codesandbox.io/s/slate-reproductions-forked-1k4uo?file=/package.json
- Click on one of the green boxes
- Copy with the keyboard
- Paste with the keyboard
- 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
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).
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
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
We haven't been able to upgrade Slate versions in long time because of this issue. Has anyone found a workaround?
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 https://github.com/ianstormtaylor/slate/pull/4333 and discussion in various PRs around copy/paste (in particular https://github.com/ianstormtaylor/slate/pull/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.
