Widget decoration and cursor position issue

[lpellegr]

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:

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?

[marijn]

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.

@lpellegr

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?

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.

[lpellegr]

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?

[marijn]

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

[moxi]

@marijn

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.

@marijn i make a demo and found the decoration occupy the position. you can see in this demo ProseMirror Decoration Example (forked) - CodeSandbox.

before the .com postion is 16 ,and after the .com the position is 17.

[marijn]

@moxi

before the .com postion is 16 ,and after the .com the position is 17.

That’s not what I’m seeing. In the screenshot, you’re also after the first b, which may have something to do with this.

[moxi]

yes, after the first b is 18, the .com is created by decoration, so the 17 should be after the first b may be right. may be you can see the demo will get my point.

[marijn]

Oh, there’s an inline node there. Yes, node boundaries do create separate positions before and after. But that has nothing to do with the widget decoration.

[kepta]

@marijn

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

I understand this, wanted to know if there is a way to show a cursor after the decoration instead of the current behavior which is before. I have seen that some API methods have a bias of some sort to deal with this. Do you know what would be the best way to show it after the decoration instead of before?

The API for that is ProseMirror Reference manual , apologies for not looking it throughly.