How To Undo Selected / Highlighted Text When Click On Button With Codemirror

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. Question 1:

Solution 1:

I tried with this and it worked:

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

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

        switch(val){

            case 'bold':
              if(string.indexOf('<b>') > -1){
                editor.replaceSelection(string.replace('<b>', '').replace('</b>', ''));
              } else{
                editor.replaceSelection('<b>' + string + '</b>'); 
              }
            break;

            case 'italic': 
                editor.replaceSelection('<i>' + string + '</i>');
            break;

            case 'quote': 
                editor.replaceSelection('<blockquote><p>' + string + '</p></blockquote>');
            break;

            case 'code': 
                editor.replaceSelection('<pre><code>' + string + '</code></pre>');

            break;

            case 'hr': 
                editor.replaceSelection('<hr/>');

            break;
        }

    });

It just checks your string if it has <b> tag, and if it does just removes them.

CodePen link

Solution 2:

for me this works perfect

mac

cmd + u

windows

ctrl + u

similiar to editor.undoSelection

manual

according to the other answer i didnt get the point