Copy & Selection Issue with the image node


I’m working on a custom editor and ran into an issue that I found the example editor also has, do I’d like to to know whether the issues are bugs or features.

Issue 1: when an image is selected within a wider range, the image itself isn’t marked as selected.


But if I only click the image and select it, the image is highlighted. image

The expected behavior is that whenever the image is within the selection range, it should he highlighted. I was thinking maybe I could fix this by use a custom NodeView for image and observe the selection changes and update the UI accordingly. But I’m not sure whether that is a workaround or a right way to handle this case.

  1. When a image is copied, it appears that the clipboard does not keep the text representation (e.g. [title, url]) of it thus pasting the content into a plain text editor will not show anything about the image. I was hoping that the pasted content could at least show the “alt” or “src” of image instead of nothing.

My question uses an image as an example, but I do have the same issues with other similar non-editable leaf node (e.g. Video, Math…etc) so I’d like to know how could I improve the experience on

  • Selection
  • Plain text representation


This is intentional. The blue border means there’s a node selection on the node with the border. When it’s part of a text selection, it’ll be highlighted by the browser’s native selection highlighting, which in this case appears to not do anything (both Firefox and Chrome will put a blue overlay on the image, so I’m not sure what’s happening in the screenshot).

Hi, did the native selection of images in the ProseMirror editor in browsers ever get resolved? I’ve used the example text editor on the site to insert an image and when I use cursor selection, the native browser selection (blue overlay) doesn’t seem to appear.

I believe the issue is when draggable=true, images don’t get the native blue overlay upon selection. This occurs whether or not contenteditable=true.

The reason why we do so is that the element that has been set to draggable, on which browser will add a default rule user-select: none .

Allow select text on a HTML 5 draggable child element