How to handle copy/paste of image already within editor?

1

I figured that once we got an image into the editor there’d be some basic handling for copy/paste within the same document, but there doesn’t seem to be any.

I tried using handlePaste but the slice it receives is empty.

@marijn sorry to ping you directly; is there a recommended way to handle intra-editor image pastes? I’m sure I could figure something out but I don’t want to reinvent the wheel, and poorly at that.

Thank you so much for this magical project and all the time you spend.

2

What do you mean, the slice is empty? If you are pasting an image, there should be an image in the slice.

1 Like
4

Thanks for the reply @marijn, that’s good to know.

Unfortunately there is no image in the slice - it’s just excluded. The surrounding text nodes are in the slice but the image is totally missing.

Update: Ah I finally located the problem but I’m not sure of a possible solution.

In toDOM we strip out the src of the image because we store images externally and don’t want the base64 src in the output HTML. But apparently this prevents pasting images within the editor. Is there any way we can prevent outputting the src without breaking image pasting in the editor?

5

I don’t know how your images work if they don’t have an src attribute, but you’ll probably need to use a custom image node type in your schema that matches what you are doing there.

6

Thanks again for your reply @marijn. They do have a src in the form of a data-src. We fetch the base64 and display it as src via a NodeView.

As such our toDOM doesn’t output the src because images can briefly have a src defined when they’re pasted, before they’re processed and uploaded.

Are we just out of luck with regards to this breaking pasting? Our editor is basically completed and I’ve discovered this seemingly insurmountable issue.

Thanks again for any advice; I really appreciate it!

7

I pointed you towards a solution in my reply, so I’m not sure why are you are now asking whether you are just out of luck.

8

@marijn I’m sorry if it seems dumb but that doesn’t make sense to me. The schema defines attributes but as far as I know there’s no sort of “required” flag for given attributes, so I don’t understand why lacking a src would prevent the node from appearing in the pasted slice, and as such I don’t see how I could solve it by modifying the schema

The schema for our image looks like this:

image
image709×360 36.8 KB

9

This parse rule only matches images with an src attribute.

1 Like
10

Thank you so much for your patient assistance! I think that should help me get this fixed.