Safari skips non-text elements when performing word navigation (option + left/right arrow)

So I did some experiments with contentEditable in Safari, it seems that when performing word navigation (option + left/right arrow key) Safari will directly skip any non-text elements. Here is the example I use:

<div contenteditable="true" style="outline: none">
  <p>Edit this content to add your own quote</p>
    <img src="" />
  <p>Sothing else</p>


This does not happen with Chrome. What’s your suggestions in implementing the behaviour that allows user place cursors before and after any non-text block (as if they are a character?)

Is this some custom image node type, that it’s rendered as a <div> rather than a <p>? Does it have selectable turned on? If I try this with an image in an otherwise empty paragraph, I don’t see this issue.

Not really. I don’t think selectable plays a role here? I can replicate this problem on ProseMirror website:


Word selection for images (option + arrow key) seems only works fine in a single paragraph in Safari.

Ah, sorry, I was testing with just the Left/Right keys. Yeah, we let the platform handle Option+Left/Right, and if the platform decides that skips images, then that’s what those keys do. You could define your own key handlers to do something different, if you really want to.

1 Like