TinyMCE 5.x - выделите пользовательскую кнопку

Question

Я создал пользовательскую кнопку ссылки и хочу, чтобы она выделялась / выделялась при выборе / нажатии на ссылку в текстовом редакторе, точно так же, как нажатие на полужирный текст показывает выделенный значок полужирного шрифта. В TinyMCE 4 вы можете просто использовать «stateSelector», чтобы подсветить его при выборе такого типа элемента DOM, например:

editor.ui.registry.addButton('SpecialLink', {
        icon: 'link',
        onAction: makeSpecialLink(),
        **stateSelector: 'a[href]'**
});

Я не могу найти ничего о том, что stateSelector был заменен на TinyMCE 5 , и пока все, что я смог сделать, это воссоздать некоторые из этих функций внутри tinymce.init:

    init_instance_callback: function(editor) {
            editor.on("SelectionChange", function(e){
                let elem = editor.selection.getNode();
                if( $(elem).is("a") )
                    console.log("Highlight the Special Link button");
                else
                    console.log("Deselect the Special Link button");
            })
        }

Я могу сослаться на myMCE.plugins.SpecialLink, но я не могу позвонить setActive(true).

Любая помощь будет принята с благодарностью!

Answer 1

Вы можете использовать addToggleButton вместо addButton, а затем позвонить setActive.

Вот фрагмент моего кода.

  editor.ui.registry.addToggleButton('my-action', {
    icon: null,
    text: 'My action',
    onAction: function onAction() {
       // ...do stuff
    },
    onSetup: function(api) {
      function nodeChangeHandler(){
        const selectedNode = editor.selection.getNode();
        return api.setActive(selectedNode.id === constants.id);
      }
      editor.on('NodeChange', nodeChangeHandler);
    }
  });
}

https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton