在内容可编辑的编辑器中管理No Man's Land

Question

背景

我的程序提供智能大括号完成功能，即在输入]时自动添加[。

问题：

考虑这种情况：

注意放置插入符号左侧的编辑器。正如您在右侧的Inspect Element中所看到的，插入符号位于两个连续的<br>之间。它们之间没有文本节点或元素节点。插入符号都不属于<br>。这是一个无人的土地。令人惊讶的是，插入符号属于父编辑器！

在上方，您可以看到range.startContainer和range.endContainer都指向父内容可编辑编辑器div.editor.show。另外，提到2的第二个打印行是我使用range.startOffset得到的插入符号位置。我有一个微弱的猜测，2指的是插入符号之前的一个文本节点和一个<br>。

由于问题会发生什么：

在]插入整个[的第二个索引后，必须插入第二个div.editor，意思是在开头Th之后。所以，在我在无人区域找到我的插入符并按[后，会发生这种情况：

问题：

我该如何检测并提供修复来解决这个无人的土地问题？

JSFiddle

^{注意：这不会发生在<textarea> s。}