Finding nodes with given id and adding/removing attributes of these nodes.

[AkromDev]

Hello guys.

I have a requirement that I have to upload multiple images/videos to the editor asynchronously.
But the thing is we don't want to wait until all files are uploaded to server.
Thus, I am inserting image nodes with file blobs as image src until all images are uploaded to server.
And as soon as I get the image urls from the server, I want to find the image nodes with the given id and replace blob source with actual url.

I tried to use Transforms.setNodes with match function, but it is returning only the first node matched.
So, when an image node with blob src are copied and pasted multiple times before server response, Transforms.setNodes with match works for only the first instance of the node.

Is there any way to find all image nodes with given blob id and remove blob ids and replace its src with image url?

Or is it better to keep using blob as img src and handle the replacing blob with urls in serializing part (while exporting to markdown) ?

Images for reference:

Two images with the same blobId

But only one of them is matched.

Match function
match: n => !Editor.isEditor(n) && n.type === 'image' && n.blobKey === blobId

Thank you in advance.

[TheSpyder]

"set nodes" is named as a plural because it can apply to a range, it doesn't mean multiple distinct elements.

I suggest using Node.nodes() to search for the images and then Transform.setNodes() individually on each one.

Do note however that replacing URLs this way means undo will then be able to restore the blob URLs... that's a fun problem to solve 😂 if you can't get it working, then yeah doing it on serialise would also be a good idea.

[AkromDev]

Thanks @TheSpyder for the response.

I used the editor.children and loop through each node and check if it has blobId. If it does, replace it using setNodes by providing at and match.

Do you think there will be any performance issues if I handle this case in serializing part? I am worried if having many blob srcs would slow down the editor.

Regarding the undo, it works automatically with CMD+Z shortcut since we use withHistory plugin, right? Because I haven't configured anything for the undo feature.

[echarles]

The async image upload case is covered in this article (search for useImageUploadHandler in the content)

https://www.smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs

[AkromDev]

Thanks @echarles for sharing the link, I will check it.