Managing No Man Land in a content editing editor

Question

Background:

My program offers an intelligent bracket that automatically adds ]as you type [.

Problem:

Consider this scenario:

Pay attention to the editor on the left, where the carriage is located. As you can see in the "Check" element on the right, the carriage is located directly between two consecutive <br>s. There is no node text or node element between them. The carriage does not belong to any of <br>s. This is a land without people. It's amazing that the carriage belongs to the parent editor!

range.startContainer range.endContainer , div.editor.show. , , 2, , range.startOffset. , 2 node <br>, .

- :

], [, div.editor, Th . , , [, :

:

?

JSFiddle

^{: <textarea> s.}