I've searched SO for similar questions, but it seems that they are all wrapped up in just making a div editable using contenteditable="true".
I am curious about the most efficient way to keep track of all the formatting tags added to a document. Just wrapping / unwrapping selected text with jQuery seems to corrupt the document after a few edits because of broken overlapping tags.
Would the correct approach be to separate all characters into an array, work out a logic to add / modify / remove tags at positions defined by window.getSelection(), and then render an output version to load into the editable div? Or is there a better solution?