How to undo selected / highlighted text when click on button with codemirror
<p>I have a simple codemirror text editor I am working on with bootstrap. I can click on my bold and code buttons OK and it wraps the selected / highlighted text corrctly.</p>

<p><strong>Question 1:</strong> When text is wrapped in a tag lets say <code>&lt;b&gt;something&lt;/b&gt;</code> If I go and select / highlight it again and click same bold button how can I <strong>undo it</strong> in codemirror?</p>

<p>Here's <a href="http://codepen.io/riwakawebsitedesigns/full/mVmxpp/" rel="nofollow">CodePen Full View</a></p>

<p>Here's <a href="http://codepen.io/riwakawebsitedesigns/pen/mVmxpp" rel="nofollow">Codepen Code View</a></p>

<p>Script</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {

// tooltips on hover
$('[data-toggle=\'tooltip\']').tooltip({container: 'body', html: true});

// Makes tooltips work on ajax generated content
$(document).ajaxStop(function() {
    $('[data-toggle=\'tooltip\']').tooltip({container: 'body'});
});

$('[data-toggle=\'tooltip\']').on('remove', function() {
    $(this).tooltip('destroy');
});


var editor = document.getElementById('text-editor');

$("#text-editor").each(function (i) {

    editor = CodeMirror.fromTextArea(this, {
        lineNumbers: true,
        mode: 'html'

    });

    editor.on("change", function() {
        document.getElementById('question-preview').innerHTML = editor.getValue('&lt;br&gt;')
        .replace('&lt;?','&amp;lt;?')
        .replace('?&gt;', '?&amp;gt;')
        .replace('&lt;script&gt;', '&amp;lt;script&amp;gt;')
        .replace('&lt;script&gt;', '&amp;lt;/script&amp;gt;')
        .replace('&lt;div&gt;', '&amp;lt;div&amp;gt;')
        .replace('&lt;/div&gt;', '&amp;lt;/div&amp;gt;')

    });

    //$('#hr').append('&lt;hr /&gt;');

    $('a[role="button"]').click(function(){

        var val = $(this).data('val');
        var string = editor.getSelection();

        switch(val){

            case 'bold': 
                editor.replaceSelection('&lt;b&gt;' + string + '&lt;/b&gt;');
            break;

            case 'italic': 
                editor.replaceSelection('&lt;i&gt;' + string + '&lt;/i&gt;');
            break;

            case 'quote': 
                editor.replaceSelection('&lt;blockquote&gt;&lt;p&gt;' + string + '&lt;/p&gt;&lt;/blockquote&gt;');
            break;

            case 'code': 
                editor.replaceSelection('&lt;pre&gt;&lt;code&gt;' + string + '&lt;/code&gt;&lt;/pre&gt;');

            break;

            case 'hr': 
                editor.replaceSelection('&lt;hr/&gt;');

            break;
        }

    });

    $(".dropdown-menu li a[class='btn-heading']").click(function(){
        var val = $(this).data('val');
        var string = editor.getSelection();

        switch(val){
            case 'h1': 
                editor.replaceSelection('&lt;h1&gt;' + string + '&lt;/h1&gt;');
            break;
            case 'h2': 
                editor.replaceSelection('&lt;h2&gt;' + string + '&lt;/h2&gt;');
            break;
            case 'h3': 
                editor.replaceSelection('&lt;h3&gt;' + string + '&lt;/h3&gt;');
            break;
            case 'h4': 
                editor.replaceSelection('&lt;h4&gt;' + string + '&lt;/h4&gt;');
            break;
            case 'h5': 
                editor.replaceSelection('&lt;h5&gt;' + string + '&lt;/h5&gt;');
            break;
            case 'h6': 
                editor.replaceSelection('&lt;h6&gt;' + string + '&lt;/h6&gt;');
            break;
        }
    });
});

});

&lt;/script&gt;
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="container"&gt;

&lt;div class="row"&gt;

&lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
&lt;div class="panel panel-default"  onLoad="text_editor();"&gt;
&lt;div class="panel-heading"&gt;

&lt;ul class="nav nav-pills" id="heading"&gt;
    &lt;li&gt;&lt;a role="button" data-val="bold"&gt;Bold&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a role="button" data-val="italic"&gt;Italic&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a role="button" data-val="link"&gt;Hyperlink&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a role="button" data-val="quote"&gt;Quote&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a role="button" data-val="code"&gt;Code&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a role="button" data-val="image"&gt;Image&lt;/a&gt;&lt;/li&gt;
    &lt;li class="dropdown"&gt;
        &lt;a class="dropdown-toggle" aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown"&gt;Heading &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="dropdown-menu"&gt; 
            &lt;li&gt;&lt;a class="btn-heading" data-val="h1"&gt;H1&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a class="btn-heading" data-val="h2"&gt;H2&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a class="btn-heading" data-val="h3"&gt;H3&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a class="btn-heading" data-val="h4"&gt;H4&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class="btn-heading" data-val="h5"&gt;H5&lt;/a&gt;&lt;/li&gt; 
            &lt;li&gt;&lt;a class="btn-heading" data-val="h6"&gt;H6&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;
&lt;div class="panel-body"&gt;
&lt;textarea id="text-editor" name="text-editor" class="form-control"&gt;&lt;/textarea&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;div class="row"&gt;

&lt;div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
&lt;div id="question-preview"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;
</code></pre>