Cursor jumps from the line end to widget decorator

Hi @marijn! ProseMirror is fantastic project, thank you for your awesome work.

I stuck with the following issue:

When there is a widget decoration on the line
 and user type something to the end of the line
 and external view.updateState(..) is happening (e.g. some event from collaboration service)

input cursor jumps to the position of the latest widget in the line.

I extracted the problem to the following snippet: https://glitch.com/edit/#!/deep-canid

NOTES:

  • it looks like the issue is reproduced in Chrome only (tested in Firefox and Safari - it works well).
  • if start typing in the middle of the line - it works as expected.
  • if disable widget plugin - cursor behavior is consistent.

Can you assist on the issue? I lost hope trying to debug a problem.

Thank you in advance / Vladimir

Thanks for providing a demo. When this happens, the DOM selection as reported by the selection object is actually at the end of the line… but the cursor is shown before the text node, and subsequent typing does end up there. So there’s definitely a browser bug involved.

The question is what is triggering it and if we can work around it. Your demo is constantly causing DOM updates because of the way it creates its widget decorations (they cannot be considered equivalent to an earlier version because the editor can’t prove that the render functions are the same). You can add a key: pos to the last argument to Decoration.widget to fix that, which will speed up rendering and work around this issue (usually, I suppose).

That’s not fixing the root cause though. You could try creating a simple ProseMirror-less demo that reproduces the issue by replaying the same DOM interactions (replace the widget, twice, with plain JS when you type), and if that works, report a bug to the Chrome team.

I know this thread is old, but I’m running into this issue still. Has anyone (@vladminsky?) investigated further or posted a bug to chrome?

My use case involves cursor position creating a widget over the hovered block (and removing from the last hovered block) and it’s a pretty big UX issue since sometimes a user can be typing and text is inserted in an unintended place (no collaboration, just decorations removed/added in a setMeta dispatch). I actually tried to manually set selection after removing/adding widget but my first attempt did not work. But as you point out, prosemirror has the right internal selection from/to pointer so I don’t think this would work.

This has been reported in the Chrome bug tracker at https://bugs.chromium.org/p/chromium/issues/detail?id=977991 , but no one seems to be acting on it.

Thanks for the link @marijn , will monitor and just starred it in hopes it will gain attention :+1:

Perhaps other Prosemirror supporters / consumers / users can star it too? (How best to raise awareness that this should be done? It only takes a few seconds and a gmail account)

1 Like