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.