How to get tags around selected text in a contenteditable? - range

Question

I'm trying to do an handler for applying certain formatting style (bold/cursive) at the click of respective button.
In particular, I want to handle selection of text: I want to toggle tags in a selection (tags are combinable).
I tried this way, but I think there should be better ideas. I found the nearest container to selected text, than I found all of its ancestors inside textarea.
var selection = document.getSelection();
var selectedText = selection.toString();
var range = selection.getRangeAt(0).cloneRange();
var firstTag = $("#textarea-ce *:contains("+selectedText+")");
var currNode = firstTag;
var newNode = $(document.createTextNode(selectedText))[0];
var currTagName;
var currTag;
var lastTag = false;
var found = false;
while (!lastTag) {
currTagName = $(currNode).prop('tagName').toLowerCase();
currTag = $("<"+currTagName+"><"+currTagName+"/>")[0];
if (currTagName != selectedTagName){
newNode = $(currTag).html(newNode);
}
else {
found = true;
}
if ($(currNode).parent().attr('id') == 'textarea-ce') {
lastTag = true;
}
else {
currNode = $(currNode).parent();
}
}
currNode = $(textarea).find(currNode)[0];
var newNodeContent = $(newNode).html();
if (!found) {
newNodeContent = "<"+selectedTagName+">"+newNodeContent+"<"+selectedTagName+"/>";
newNode = $(selectedTag).html($(newNode));
}
if (currTagName.startsWith("h")){
$(currNode).html(newNodeContent);
range.insertNode(currNode);
}
else {
$(currNode).replaceWith(newNode);
}
I used header (h1, h2,...) displayed as inline for sizing text.
In order to get surrounding tags I tried also with documentFragment (range.extractContents) but after a selection, sometimes it doesn't include tags, but only the text node.
The hardest challenge is to handle the case in which the user selects part of a formatted text and removes one of those tags.
Any suggestion is appreciated.