Paste and Decorations


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?


Overriding paste behavior is still a little tricky, since there’s so much going on, but you could write a handlePaste prop that, after inserting the pasted slice, scans for invalid nodes and immediately updates them. Or alternatively, fire a separate transaction directly after the paste event to handle this.

That’s the recommended approach—ProseMirror decorations can’t be updated, only recreated (though if you really care a lot, and make sure you only use each DOM node at one position at a time, you could use the same DOM nodes for the updated widgets).