I am writing some sort of editor, where only parts are editable. By clicking behind the row, the caret should be placed at the end of the row for some user input.

In FF this works, in chrome it works until you click behind the row twice. The second click will remove the caret. According to the selection object, the current range is still set to the rows text, but if I for example log the range on "click" it is still the same, but in the view the caret is gone and nothing happens on input.

The following example demonstrates with the visible outline, that the selection seems to change to the wrapping parent, which seems not to be reflected in the pages selection state. How can I detect something that is not there / how does the browser know about the other selection but does not give me access to it? is there any workaround for this problem or am I just stranded in the contenteditable rabithole?

document.addEventListener("selectionchange", () => {
  console.log(document.getSelection().anchorNode?.nodeName)
});

Not Working
<br>
<div contenteditable>
  <div contenteditable="false"><span contenteditable>test</div></span>
  <div contenteditable="false"><span contenteditable>test</div></span>
</div>
<br>
Working
<br>
<div contenteditable>
  <div><span>test</div></span>
  <div><span>test</div></span>
</div>