Chrome caret/cursor larger than the text with inlined items

1

Hi everyone!

I’m currently working on a text editor inspired by the dino example from ProseMirror (you can see it here: ProseMirror dino example). In my editor, a widget from a plugin is added after each word. However, I’ve encountered an issue where if there’s a widget at the end of a line, the caret (cursor) becomes noticeably larger compared to when it’s adjacent to regular text.

When you navigate the cursor through the text, its size is consistent with the text size, even if it’s next to a dino widget. The anomaly appears when you have a dino widget at the end of a line, and you position your cursor right after it, as demonstrated in the screenshot:

Screenshot 2023-10-24 at 13.24.09

Interestingly, this behavior is exclusive to the Chrome browser (or at least it does not happen on Firefox!). I’m speculating that it might be related to how Chrome interprets the ProseMirror-separator and the ProseMirror-trailingBreak at the end of a line, affecting the caret’s size – but that’s just a hunch. :slight_smile:

Has anyone else encountered this issue or knows a potential workaround?

2

The caret is drawn by the browser, and not really something ProseMirror has control over. Sometimes, adding a dummy zero-width space to the end of your widget, so that the cursor isn’t directly next to a non-text element, can help work around it.

3

Oh wow, Chrome happily accepted a zero-width space for this. I’ll add it and pretend that it’s not that bad of a hack. Huge thanks @marijn, was spending quite some time trying to figure out a solution.