I have set up image uploads in my prosemirror instance (based off the great docs example), which has been expanded to works when files are pasted/dropped into the editor, as well as selected.
I am now looking to expand the functionality to check all clipboard HTML; so that any
<img> with src that is
data:image/png or a hotlinked url, will be uploaded to the server too.
What I would like to do is insert the clipboard HTML into the editor, replacing invalid
<img> with placeholder decorations. When the images have finished uploading, replace the placeholders with the new image nodes. Unfortunately, I’m not sure how to add these decorations, as I’m not sure how to get the img positions in the HTML when I don’t want to add invalid image nodes to the editor state.
Additionally, I am updating my placeholder decorations with upload progress. My current approach is to remove the previous decoration and add a new decoration at the same position with updated %progress. This doesn’t seem to cause any performance issues so far, but repeatedly destroying/creating DOM elements seems a little inelegant. Is there a better way of doing this?