Incorrect (visual) cursor in Safari if atom node is last node in line

[philippkuehn]

Issue details

When using atom nodes it’s not possible to place the cursor after it when the node is the last node in a line. You can see that in the offical dinos example. When placing a dino at the end of a line, Safari renders the cursor at the start of a line. If I type something, the content will be placed after the dino (which is correct) but it feels weird because of the wrong (visual) cursor rendered by Safari.

Steps to reproduce

• go to https://prosemirror.net/examples/dino/
• insert dino at end of line
• see incorrect cursor position

ProseMirror version

prosemirror-view: 1.18.4

Affected platforms

• Chrome
• Firefox
• Internet Explorer
• Desktop Safari
• iOS Safari

Screenshots / Screencast (Optional)

RPReplay_Final1620282287.MP4

[robbertbrak]

As mentioned in the referenced issue, this is not just an issue on iOS. It also happens in Safari 14.1 on desktop.

[philippkuehn]

Ah you are right! So maybe this will be easier to debug.

[robbertbrak]

I noticed that the issue goes away if you set the contenteditable attribute of the atoms (mentions / dinos) to true instead of false.

Of course, setting contenteditable="true" leads to other issues, such as that it then becomes possible (in some cases) to place the cursor inside the atom and edit the text content of the mention. But perhaps something can be done in ProseMirror to prevent this from happening (e.g. by detecting when the cursor moves inside an atom).

[marijnh]

This is definitely a browser bug, but attached patch tries to work around it by injecting an additional src-less <img> element, which seems to stop the bug from triggering. I'd appreciate it if those affected could test this thoroughly to see if it produces any regressions for them, since this kind of kludges is always a bit scary. I'll hold off on releasing it until I get some feedback.

[mmorearty]

Thanks @marijnh. Looks like there's a separate bug in this. It does fix the bug described in this issue, but if the cursor moves to an empty paragraph (including if the entire document is empty), there is a crash: TypeError: undefined is not an object (evaluating 'lastChild.dom')

In addTextblockHacks on this line:

    if (result.safari && lastChild.dom.contentEditable == "false")

Here's a way to repro with the Dino example:

• git clone https://github.com/ProseMirror/website.git
• Edit the prosemirror-view line in package.json to say "prosemirror-view": "ProseMirror/prosemirror-view" (this is an npm trick to tell it to install directly from GitHub instead of from the npm registry)
• npm install
• then run and test

[marijnh]

Argh, my bad, yes, that was an obvious bug. Attached patch should address it.

[mmorearty]

Looks good. In my app I tested things such as cursor movement, selection, clicking, typing, and pasting near this, and everything was fine.

[philippkuehn]

Thanks for the fix. Looks good to me!

[srsudar]

I'm seeing this after another type of atom node, also in Safari. The node has contentEditable = "false", like I'd expect to be caught by this fix. Does anyone have any debugging tips?