trying to toggle HTML wrap with TinyMCE - wordpress

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..
How can i determine if i'm on my requested node so i can deactivate?
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);
}
});
}
});