Automatic remove all tag in Element?

Question

I found some code, but when I modify selected text by button (B, I, U), it automatically remove all details of other tags.

Ex:
<font color="red"> to <font>
<span style="font-size: 50px"> to <span>

Full code:

<button data-action="B"><b>b</b></button>
<button data-action="I"><i>i</i></button>
<button data-action="U"><u>u</u></button>
<p contenteditable>The <font color="red">quick</font> brown <span style="font-size: 50px">fox jumps</span> over the lazy dog.</p>
<script>
$( function(){    
    var selectionWrapper = 'X-SELECTION';

    function getTextData( element ) {
      function getTextNodesIn( root ) {
        var textNodes = [];
        var parents = [];

        function getTextNodes( node ) {
          if( node.nodeType === 3 ){     
            var text = node.textContent;
            textNodes.push({
              text: text,
              parents: parents.slice( 0 )
            });
          } else {
            if( node !== root ){
              parents.push( node.tagName );
            }
            for( var i = 0, len = node.childNodes.length; i < len; ++i ){
              getTextNodes( node.childNodes[ i ] );
            }
            parents.pop();
          }
        }

        getTextNodes( element );

        return textNodes;
      }    

      return getTextNodesIn( element );   
    }

    function handleSelection( container, action ) {
      var textData = getTextData( container );
      container.innerHTML = '';

      //if every textNode in the selection has action as a parent, we want
      //to remove it from all of them.
      var selection = _( textData ).filter( function( data ){
        return _( data.parents ).contains( selectionWrapper );
      });
      var remove = _( selection ).every( function( data ) {
        return _( data.parents ).contains( action ) || data.text.trim() === ''; 
      });
      _( selection ).each( function( data ){
        if( remove ) {
          data.parents = _( data.parents ).without( action );
        } else {
          data.parents.push( action );
        }
      });

      //rebuild each text node
      _( textData ).each( function( data ){
        //no need to add empty text nodes
        if( data.text === '' ) {
          return;
        }
        //remove duplicates of the same parent tag and remove the selection wrapper
        var parents = _( data.parents ).chain().uniq().without( selectionWrapper ).value();            
        var target = container;
        _( parents ).each( function( parent ){
          var node = document.createElement( parent );
          target.appendChild( node );
          target = node;
        });
        var text = document.createTextNode( data.text );
        target.appendChild( text );
      });
    }

    $( 'button' ).on( 'click', function(){
      var action = $( this ).attr( 'data-action' );            
      var selection = window.getSelection();  

      for( var i = 0; i < selection.rangeCount; i++ ){
        var range = selection.getRangeAt( i );      
        var node = document.createElement( selectionWrapper );                    
        node.appendChild( range.extractContents() );          
        range.insertNode( node );
        handleSelection( $( 'p' )[ 0 ], action );
      }

      return false;           
    });
  });    
</script>

How to keep these tags unaffected by it?

Here is DEMO: https://muil.me/47480214