双击触发contenteditable元素聚焦并正常定位光标实现方案求助

我琢磨这个问题好久了，实在没辙才来这儿求助！

我想要实现的效果是：

• 一开始有个普通的contenteditable div，默认状态下不能编辑文本，也完全不能和文本交互
• 双击这个元素后，它要变成可编辑状态，而且光标得和正常单击元素时一样，精准定位在双击的位置

先给大家看基础的contenteditable元素：

<div contenteditable>Edit this text</div>

正常点击它的话，光标会落在点击的位置，直接就能编辑。但我要的是双击才触发编辑，而且初始状态不能碰文本。

我试过两种方案，但都有坑：

方案1：用遮罩层（overlay）实现初始不可交互 #

我用了一个遮罩层覆盖在可编辑元素上，双击遮罩层时隐藏它，再让可编辑元素聚焦：

<div id="wrapper">
  <div id="overlay"></div>
  <div id="editable" contenteditable>Edit this text</div>
</div>

overlay.ondblclick = () => {
  overlay.style.display = 'none';
  editable.focus();
};
// 还加了onblur事件用来恢复遮罩层

👉 问题：光标会直接跳到元素的开头位置，根本不在双击的地方！如果不用focus()，那还得第三次点击才能真正聚焦编辑，太麻烦了。

方案2：动态切换contenteditable属性 #

一开始把contenteditable设为false，双击时改成true，再配合CSS让未聚焦时不能交互：

<div id="editable" contenteditable="false">Edit this text</div>

editable.ondblclick = () => {
  editable.setAttribute('contenteditable', true);
};
// 用onblur事件把contenteditable改回false

👉 问题：双击的时候，会直接选中点击位置的单词，而不是把光标放在那里，完全不是我想要的正常编辑体验！

补充说明：这是我个人项目用的，无障碍、兼容性这些都不用考虑，只要能实现效果就行！

备注：内容来源于stack exchange，提问作者user13505160