Управление тулбаром с клавиатуры

[neSpecc]

Сейчас реализовано только открытие по TAB. Надо сделать чтобы дальнейшее нажатие на TAB переключало указатель по элементам тулбара (они становились синими слева направо по кругу), по ENTER делался новый node с выбранным инструментом. По ESCAPE тулбар закрывался.

[neSpecc]

• «Плюс» должен быть на одном уровне с редактируемым в данный момент узлом
• При нажатии на TAB открывается панель настройки текущего узла параграфа
• Повторное нажатие на TAB переключает фокус на следующий инструмент в тулбаре по кругу. Также переключаться можно стрелками клавиатуры
• ESCAPE закрывает тулбар
• В один момент времени должен быть виден только один «Плюс», у текущего узла
• Плюс должен поворачиваться на 45 градусов и превращаться в крестик, когда тулбар открыт

[dermanov-ru]

«Плюс» должен быть на одном уровне с редактируемым в данный момент узлом

я так сделал сначала. в таком положении кнопки (при открытии панели) оказываются поверх текста и их не видно. поэтому я опустил "плюс" ниже.
если делать на одном уровне надо будет добавить подложку

[neSpecc]

это вопрос дизайна, мы его решим.

[neSpecc]

пусть пока будет поверх

[dermanov-ru]

начал делать эту задачу.
просто через css не сделать, тк редактируемый блок не отловить через :focus
решил сделать через js на событиях focus\blur добавлять класс и с ним уже работать в css, но не получается отследить эти события

    var _this = this,
        selectedNodeClass = "selected";

    /** All blur on Window */
    window.addEventListener('focus', function (event) {
        // check if currently focused in contenteditable element
        if ("BODY" == event.target.tagName) return;

        event.target.classList.add(selectedNodeClass)
    }, false );

но событие никогда не происходит