Manually Edit contenteditable Source HTML

Question

I have a working content editor which uses a contenteditable div as a basic WYSIWYG editor.

I need to allow users to edit the source HTML of the contenteditable div if they wish to do so. I have a mostly working solution to achieve this which looks like this:

// function to show bootstrap modal and insert contenteditable html into modal's textarea
function editHTML(){
  editorTextarea.attr('contenteditable', false);
  var htmlContent = document.getElementById("main-editor").innerHTML;
  editorModal.modal({backdrop: false});
  editorTextarea.html(document.createTextNode(htmlContent));
}

// function to replace contenteditable's HTML with edited HTML in textarea
function saveNewHTML(){
  mainEditor.empty();
  mainEditor.html($.parseHTML(editorTextarea.val()));
  editorModal.modal('hide');
  editorTextarea.attr('contenteditable', true);
  editorTextarea.empty();
}

The above functions work the first time they are used. i.e. I can successfully write content into the contenteditable div, then edit its HTML in the textarea; the new HTML is successfully written back to the contenteditable div.

However, if I continue editing in the contenteditable div and then trigger editHTML(); again, the textarea is populated with the same HTML from the first editHTML(); event.

I've tried setting htmlContent as a global var and "nullifying" it with htmlContent = null; inside saveNewHtml();, but that does not help.... And yet using the browser's inspect tool, calling $('#main-editor').html(); returns the correct value.

This is pretty simple stuff, so I'm a bit flummoxed as to why this isn't working....!

P.S. I'm using Safari (latest) and I don't need to support old browsers (and can remove support for IE altogether if need be. What a pleasure!).