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

1

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>
  <div>
    <img src="https://picsum.photos/100/100" />
  </div>
  <p>Sothing else</p>
</div>

safari-example

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?)

2

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.

3

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

example

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

4

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