How can I toggle a ui button such as "bold" in Aloha editor?

Question

How can I toggle a ui button such as "bold" in Aloha editor? This seems like an easy task, but I can't seem to figure it out...

aloha(document.querySelector('#editable'));

// Assuming I have a button with class "action-bold"
$('.action-bold').click(function(event) {
   if ($(event.target).attr('class') === 'active') {
      return aloha.ui.command(aloha.ui.commands.unformat);
   } else {
      return aloha.ui.command(aloha.ui.commands[command]);
   }
});

function middleware(event) {
    $('.active').removeClass('active');
    if ('leave' !== event.type) {
        var states = aloha.ui.states(aloha.ui.commands, event);
        for (var selector in states) {
            $('.action-' + selector).toggleClass('active', states[selector]);
        }
    }
    return event;
}

aloha.editor.stack.unshift(middleware);

Answer 1

had a similar problem and must say Aloha Editor documentation is quite bad. Only way to get somewhere is to read the code. Here is my solution of toggling toolbar buttons:

for (var command in aloha.ui.commands) {
  $('.action-' + command).on( 'click',
        function (e) {
            var cmd = aloha.ui.commands[$(this).attr('class').substr(7)];
            var applyTag = !$(this).attr('active');
            aloha.ui.command({
                'action': function(bnds) {
                    return aloha.editing.wrap(cmd.node.toUpperCase(), bnds[0], bnds[1], applyTag);
                }
            })(e);
        }
  );
}

This assumes that you don't set an additional class ##active## on the button, instead just add an additional attribute active to it.

I wrote a small post on it and how i derived there: http://me-kono.eu/blog/2015/06/aloha-editor-how-to-create-toggling-toolbar-buttons/