I created a new button in the TinyMCE toolbar. Its purpose is to add a new class on selected the text. It's working, but in some cases the existing tag is replaced when adding the new class.

For example:

<p> dummy text dummy text <strong> dummy text </strong> <p>

Some times the strong tag is removed if I select the content in the strong tag. This doesn't only happen on strong tags though, span, em, u tags too.

setup: function(editor) {
  editor.addButton('addClasses', {
    menu: [{
      onclick: function(e) {
        let ed = tinyMCE.activeEditor;
        let content = ed.selection.getContent({
          'format': 'html'
        });
        let new_selection_content = `<span class="text-${color}">${content}</span>`;
        ed.execCommand('mceInsertContent', false, new_selection_content);
      }
    }
  }
}

I have to keep the existing tags and just want to add the new class on the selected text. How can I achieve my task?

For reference I'm using TinyMCE version 4.