Avoid loading images when creating clipboard/drag-and-drop html

I use clipboardSerializer to convert some nodes to image representations for exporting them to Google Docs etc. (in PM I render them as node views). Basically I have a webservice that can render these nodes to PNG and in clipboardSerializer I generate URLs for this webservice and set them as the img src attributes.

The problem I have is that even though the nodes never get attached to document.body and never rendered in the browser the images are still loaded, which causes unnecessary traffic when you just want to copy or drag-and-drop items around inside PM.

Does anyone have an idea on how to avoid this?

In theory one could “park” the real URL in a data-src attribute (or similar) and then convert that to the src attribute before putting the innerHtml to the clipboard (for browsers that have an clipboard api) and then remove the src attribute again before parsing it when it is pasted inside PM. Not sure how that would fit into the current editor props though…

You can pass a serializer a document to use (which will default to the global document). If you pass it something like document.implementation.createHTMLDocument("") (not supported on old browsers), that should avoid this issue (ProseMirror’s internal clipboard-DOM-parser already does this).

Thanks for the pointer. It almost did the trick: serializeFragment doesnt cause the images to be loaded anymore. However, in prosemirror-view serializeForClipboard the fragment then gets appended to a div that is created in the default document, causing the images to be loaded.

Do you think it would make sense to use a detached document instead of the default document in serializeForClipboard (and maybe parseFromClipboard as well)? It is already being used in readHTML in the same file, as you pointed out, so the instance could even be shared I guess.

If you want, I could also create a PR for this.

Good point. This patch should do it.

Yep, that did it. Thanks so much, you’re the best!