Custom action tool icon (wrongfully) initially active

[cleverplatypus]

I added a simple class toggling action as follows

//...
config: {
              actions: [
                {
                  icon: `<svg style="width:24px;height:24px" viewBox="0 0 24 24">
                                    <path d="M19,16V13H23V11H19V8L15,12L19,16M5,8V11H1V13H5V16L9,12L5,8M11,20H13V4H11V20Z" />
                                </svg>`,
                  name: "centered",
                  title: "Centered",
                },
              ],
//...

The first time the tuning menu is displayed, the icon is active and clicking it correctly applies the image-tool--centered but the icon is set to inactive.

The next times the tuning menu is displayed the issue is gone and the icon's active state correctly reflects the presence of the css class.

Has line 87 of tunes.js anything to do with this behaviour?

      el.classList.toggle(this.CSS.buttonActive, toolData[tune.name]);

[cleverplatypus]

Built locally.

It looks like

https://github.com/editor-js/image/blob/e26b3e7c106486d2d776219e18cd125469991a25/src/index.js#L303

is not initialising the tunes defined in actions in the data setter.

When changed to

    Tunes.tunes.concat(this.config.actions).forEach(({ name: tune }) => {

the issue is fixed.

This concat approach would to be consistent with the approach in Tunes.render.

https://github.com/editor-js/image/blob/e26b3e7c106486d2d776219e18cd125469991a25/src/tunes.js#L73