Cursor appears in the wrong position in Chrome 98

Hello :wave: I am using macOS + Chrome 98 and seeing the cursor being drawn in the wrong position when between two inline nodes but text is entered at the correct position.

Using dinos in the document example:

  1. Delete text between two dinos
  2. Observe that the cursor position is to the right hand side of the editor
  3. Enter text

HbbUGWu94Z

Following the same steps above, I am unable to replicate this on Safari. The cursor disappears between the nodes on Firefox 97.

Any ideas on how to work around this? Thank you!

2 Likes

I had the same problem.

This is a Chrome bug, and one that we haven’t found a convenient workaround for, so far. Changing the way your inline nodes are drawn so that they have invisible text (say, zero-width spaces) before and after them can help in some cases.

1 Like

Hey @marijn thanks for the suggestion. I ended up getting around this in a similar way but using Decorations as a ‘cursor target’.

This a basic outline of the steps:

  • Check if the position is directly between two inline nodes
  • If so, create an editable widget decoration either side of the cursor (content editable spans with zero-width spaces)
  • If not, remove the decorations
  • Check beforeInput events to prevent any content being added to the decorations

Cursor displays in the correct position in Chrome and is visible in Firefox :slight_smile:

@lflan thank you for your workaround! But it doesn’t work for me in Firefox :frowning:

Could you please show the exact code for your widget decoration DOM node?

nice!!!

Hello! Can you share your solution for better understanding your point?

I’ve implemented a workaround here:

Hope it can help anyone run into this issue. @katepol @a-yerzhyk

2 Likes