javascript - 如何获得正确的插入符号绝对位置

Question

我range.getBoundingClientRect用来获取插入符号的位置，但是在end按下键时它给出了错误的值。

目前，我有一个内容可编辑的 div 和一个插入符号 div：

<div id="editor" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales tellus nulla, quis viverra ipsum accumsan nec. Vivamus felis velit, dictum nec purus sed, placerat placerat libero. 
</div>
<div id="caret"></div>

我检测到选择何时更改以更新插入符号位置：

document.addEventListener("selectionchange", function() {
  const rect = document.getSelection().getRangeAt(0).getBoundingClientRect();
  document.getElementById('caret').style.left = `${rect.left}px`;
  document.getElementById('caret').style.top = `${rect.top}px`;
})

当我按下 end 键时，我的插入符号位于下一行的开头，而不是当前行的末尾。这是因为getBoundingClientRect给出了错误的值。

这是一个复制品：

https://jsfiddle.net/2dauymov/10/

我在 Chrome 78 上。