Copy & Selection Issue with the image node

1

Hi

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.

image

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

Thanks.

2

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).

3

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.

image
image835×601 60.7 KB

4

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.

5

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