trying to toggle HTML wrap with TinyMCE

Question

I'm looking for hours for a solutions but can't find anything that works for me.. I am trying to create a button which will wrap a specific text with span which works fine.

Now i am trying to make it a toggle so i will be able to unwrap the span from the text but can't get it done..

Basically the button needs to work the same as the Italic button but i couldn't find its code anywhere in my files..

1. How can i determine if i'm on my requested node so i can deactivate?
2. How can i make it work as toggle as i mentioned above?

Here is my code-

        ed.addButton ('remark', {
            title : 'Remark Text',
            image: url + '../../images/remark-icon.png',
            onClick : function() {
                var state = true;
                ed.focus();

                ed.controlManager.setActive('remark', state);

                var text = ed.selection.getContent({format : 'text'});

                var selected_elem = ed.selection.getNode(); // Get selected element
                var elem_type = ed.selection.getNode().nodeName; // Get element type
                selected_elem = jQuery(selected_elem ).attr('class'); // Get element's class

                if( elem_type !== 'SPAN') {
                    ed.selection.setContent('<span class="remark-text">' + text + '</span>');
                }

                ed.on('NodeChange', function(e) {
                    state = true;
                    ed.controlManager.setActive('remark', state);
                });
            }
        });

Thanks for any help!

Answer 1

    ed.addButton ('remark', {
        title : 'Remark Text',
        image: url + '../../images/remark-icon.png',
        onClick : function() {
            var state = true;
            ed.focus();

            ed.controlManager.setActive('remark', state);

            var text = ed.selection.getContent({format : 'text'});

            var selected_elem = ed.selection.getNode(); // Get selected element
            var elem_type = ed.selection.getNode().nodeName; // Get element type
            selected_elem = jQuery(selected_elem); // Get element's class
            console.log(selected_elem);

            if( elem_type !== 'SPAN') {
                ed.selection.setContent('<span class="remark-text">' + text + '</span>');
            }

            ed.on('NodeChange', function(e) {
                elem_type = ed.selection.getNode().nodeName;

                if( elem_type == 'SPAN' && selected_elem.find("span").hasClass("remark-text") ) {
                    state = true;
                    ed.controlManager.setActive('remark', state);
                }
                else {
                    state = false;
                    ed.controlManager.setActive('remark', state);
                }
            });

        }
    });