Pasting an image directly from the clipboard in a slate block triggers the creation of both a slate block and a (proper) image block.

[sneridagh]

Describe the bug
Pasting an image directly from the clipboard in a slate block triggers the creation of both a slate block and a (proper) image block.

To Reproduce
Steps to reproduce the behavior:

1. Edit any content with blocks
2. Click on an empty slate block
3. Copy an image
4. Paste directly from the clipboard into a slate block
5. Two blocks, one pure slate and an image block are created.

Expected behavior
Only the image block is created.

[sneridagh]

/cc @avoinea @tiberiuichim @ichim-david Does your users not try this feature? I'm so used to do this in Gitlab/Github...

[tiberiuichim]

@sneridagh I think I've noticed this problem at some point. It needs to be fixed.

[AnshulKahar2729]

/cc @avoinea @tiberiuichim @ichim-david Does your users not try this feature? I'm so used to do this in Gitlab/Github...

Can you attach the screenshots or recording, it will be better for understanding

[tiberiuichim]

@AnshulKahar2729 Go to Google Docs, create a new document using a template that also uses an image. From the google doc, copy everything, go to Volto to a new page, paste the clipboard. If you get two images pasted, it's a problem.

[AnshulKahar2729]

Ok, I got the problem. I tried to reproduce the problem and it happended. One more question, is it happening in all the blocks, or some specifics?

[tiberiuichim]

@AnshulKahar2729 it's concerning the integration between volto-slate and the volto blocks.

The problem is that the image slate node is not properly removed once a volto block is emitted.

volto/packages/volto-slate/src/utils/volto-blocks.js

Line 278 in 4bb07b9

blocks.push(syncCreateSlateBlock([childNode]));

volto/packages/volto-slate/src/blocks/Text/index.js

Line 95 in 4bb07b9

extractImages,

volto/packages/volto-slate/src/editor/plugins/Image/deconstruct.js

Lines 24 to 27 in 4bb07b9

	Transforms.removeNodes(editor, {
	at: pathRef.current,
	match: (node) => node.type === IMAGE,
	});

Somehow the slate tree transformation is not properly done.

[ichim-david]

For extra context, I've tried on the demo site to paste an image and it works just fine on a Mac.
Where you have issues is when you try to paste an image from the OS files, such as using the Finder
and copying an image from the HDD and then you paste in the browser.
When I did right click -> copy image, I got the image pasted just fine from the demo site as well from
external site images

[adityaa3pathi]

Hey, @ichim-david
Just want to ask, is this issue resolved? cause I'm not able to reproduce it in my local volto. It works just fine on Ubuntu 22.04.4 LTS.
On uploading images through HDD or from clipboard, no duplicate images are created.