I'm using rangy and have a case with a contenteditable div where the users selection can be saved and later restored so that HTML can be inserted.

My problem is that if the user selects within a header element, I don't want the html inserted within a header.

So I'm trying to figure out how to use rangy so that if the the selection is made within a header then I can move it before the header element.

So if the user selects within an h1:

<div id="editable" contenteditable>
     <h1>|user selects here| Header Text</h1>
</div>

Then the saved selection would be moved before the h1:

| selection boundary moved here |<div id="editable" contenteditable>
     <h1>|user selects here| Header Text</h1>
</div>

I've tried the following to see if I could move the selection boundary:

var sel = rangy.getSelection();
var range = sel.getRangeAt(0);

range.setStartBefore(sel.anchorNode.parentNode);

sel.removeAllRanges();
sel.addRange(range);

selected = rangy.saveSelection();

But when I select within the H1, it still sets the saved selection boundaries within the H1 and not before it. I'm not sure how I can get the boundaries moved before the header element.