如何在contenteditable元素中编辑多个Range选区而不使其失效？

我最近碰到了一个奇怪的问题：当我试图修改contenteditable="true"容器内的多个文本选区（Range）的起始和结束点时，只要这个容器开启了contenteditable，多选区的编辑就会失效——但单个选区是正常的，非contenteditable容器里的多选区也没问题。

下面是我写的测试代码，能直观重现这个问题：

<script>
function clicked() {
  const selection = window.getSelection();
  for (let i = 0; i < selection.rangeCount; i++) {
    const range = selection.getRangeAt(i);
    range.setStart(range.startContainer, 0);
    range.setEnd(range.startContainer, range.startContainer.length);
  }
}
</script>

<h2>未开启"contenteditable"的情况</h2>
<div>
  <span>span1</span>
  <span>span2</span>
</div>
<br>

<h2>开启"contenteditable"的情况</h2>
<div contenteditable="true">
  <span>span3</span>
  <span>span4</span>
</div>
<br>

<input type="button" onclick="clicked()" value="modify selection(s)">
<br><br>

<h3>测试步骤与现象</h3>
<p>按住CTRL键，用鼠标<b>部分选中</b>以下文本，然后点击按钮：</p>
<ol>
  <li>同时选中span1和span2的部分文本，再点击按钮
    <p><small>（测试结果：两个选区都会正确扩展到对应span的全部文本）</small></p>
  </li>
  <li>同时选中span3和span4的部分文本，再点击按钮
    <p><small>（测试结果：选区无法正确扩展，多选区出现异常）</small></p>
  </li>
  <li>只选中span3的部分文本，再点击按钮
    <p><small>（测试结果：单个选区可以正确扩展）</small></p>
  </li>
  <li>同时选中span1、span2、span3、span4的部分文本，再点击按钮
    <p><small>（测试结果：所有选区都能正确扩展）</small></p>
  </li>
</ol>

我的需求很明确：希望第二个测试场景（开启contenteditable的容器内的多选区）能和其他场景表现一致，点击按钮后多个选区都能正确扩展到对应元素的全部文本。

另外说明一下：我是在火狐内核的浏览器上测试的，多选区是通过按住CTRL键+拖拽鼠标实现的——这个多选区功能目前在Chromium系浏览器里还不支持。

---
内容来源于stack exchange