Widget decoration and cursor position issue

#1

Hi there!

I am not sure whether this is a bug or maybe a limitation but considering the upload handling example, the editor cursor cannot be moved before the character next to the widget decoration that temporarily replaces the image node:

prosemirror-widget-decoration-cursor-issue

Here are the steps for reproduction:

  1. Open the upload handling example: https://prosemirror.net/examples/upload/
  2. In the sample editor, move the cursor after the letter “g” of the word “paragraph”.
  3. Click on the button “Choose File” and select an image.
  4. While the placeholder image is present (i.e. not yet replaced by the final image), move the cursor to one character to the right with the keyboard right arrow key.

At this stage, you will notice the cursor moves after the letter “r”. I was expecting the cursor to move before the letter “r”. If you try to move the cursor to the left, you will see the cursor moves directly to the left side of the placeholder and it is not possible to get the cursor positioned between the right side of the placeholder and the letter “r”.

The issue is present with the image placeholder only. Once the placeholder is replaced by the final image, the cursor moves as expected. Is this a bug with widget decorations? how to get the cursor move as expected?

Other than this issue, is it normal that the widget decoration cannot be moved (dragged and dropped) as for the final image node it temporarily replaces?

#2

Decorations don’t change the document, and as such, they don’t introduce new cursor positions—there’s still only one cursor position at the point where the widget is shown, so you can’t put your cursor on both sides.

Yes. Widgets aren’t nodes, so they don’t get the default drag/drop behavior that nodes get. You’d have to implement that yourself if you want it to be possible.

#3

Thanks for the clarification.

What would be the recommended approach to attach to widgets the default drag/drop behavior that nodes get? do you have an example?

#4

You could create a specific node type for placeholders (or use image nodes with a specific attribute set).