How to process back-end image upload when content is pasted into the editor?

I studied the “Prosemirror Image upload example” and created a DropImage plugin that basically checks the pasted content if file, image/png is available in the event.clipboardData items. If so, I upload the image to my back-end server.

This worked great, however, in the case when user pasted an html content that contains an image (eg: drag, select, and copy into clipboard paragraphs and images from a website), my code would not be called because it is now 2 events text/plain string and text/plain html. I don’t feel like parsing the html and figure out if and where the images are.

The content in the editor still showed the pasted images although they have direct links to the source, not the back-end links from my server. Could you please offer some suggestions how to handle this situation ?

I guess a second question I have is if there is someway to add onCreate or onDestroy handler hooks, then it would be convenient for me to add upload or delete images on the back-end server.

2 Likes