Toogle Button on Quickbar does not toggle --enabled class when setting active

[teeej]

When creating a custom toggle button on a quickbar (distraction free mode), the toggle of the button does not toggle the .tox-tbtn--enabled class on the button when calling the api.setActive(state) function. The state is held by the button but the class does not toggle on/off. There is no way to have a "on" state for the css for these buttons without that class being toggled.

Also the onSetup function is being called with every click of the button, not just when it is invoked. You will see by the console.log that the onSetup function is being called ++1 times with each consecutive click of the button.

[teeej]

Fiddle demonstrating the issue - https://fiddle.tiny.cloud/SVhaab.

Code is directly from the documentation - https://www.tiny.cloud/docs/ui-components/typesoftoolbarbuttons/#togglebutton.

[lnewson]

Hi @teeej,

This appears to be an issue with our documentation so I'm going to transfer this to the docs repo. The problem is that a new button is setup each time the context toolbar is shown/re-rendered. As such, the onSetup function needs to set the initial state, not just when some other event happens because that event may have already occurred (as is the case here). Anyways, I've updated your fiddle to show how this can be done and you'll see it works as expected here: https://fiddle.tiny.cloud/PVhaab/2

Edit: To clarify, this was the part I added to onSetup:

api.setActive(editor.formatter.match('strikethrough'));

[teeej]

Thanks @lnewson!