I am struggling to work out how to manage the problem of double-clicking on a paragraph giving one type of range, vs selected the same paragraph giving a smaller range.

The issue being that if I double-click then the end container seems to be the following paragraph, but when selecting manually then the end container remains the same paragraph.

To demonstrate this I have a jsfiddle - https://jsfiddle.net/Abeeee/uagt0z28/39/ that uses insertText to inject text at a range collapse position;

var range0 = range.cloneRange();

range.collapse(true);
document.execCommand('insertText', false, '!!!START!!!');

sel.removeAllRanges();
sel.addRange(range0);
range0.collapse(false);
document.execCommand('insertText', false, '!!!END!!!');

the problem is found when you double-click on a word in a paragraph (which selects the whole paragraph), and then you click [setRangeText] to see where the code believes the start and end points of that selection are).

What I want is that the paragraph is surrounded by the START and END markers to the left and right of the first and last words as seen here ...

... but what I get is the END marker sitting with the next paragraph (and inside the < p> tag for that para), as seen here...

How do I fix/correct for this?