Can i have active class auto insert for custom toolbarItems button?

[poneyphun12]

Summary

I’m adding custom toolbar buttons (e.g. Bold, Italic) using my own button elements.

The buttons work when clicked, but they don’t show active/selected state like the default Bold/Italic buttons in the editor.

Here is my sample code:

const createButton = (icon: string, execName: string) => {
    const button = document.createElement('button')

    button.type = 'button'
    button.className = `${execName}-btn toastui-editor-toolbar-icons`
    button.style.backgroundImage = 'none'
    button.innerHTML = `<i class="material-icons" style="font-size: 18px">${icon}</i>`

    button.addEventListener('click', (e) => {
      e.preventDefault()
      editorInstance?.exec(execName)
    })

    return button
  }

 editorInstance = new Editor({ el,
       toolbarItems: [
        [
          {
            name: 'bold',
            el: createButton('format_bold', 'bold'),
            command: 'bold', // this does not have any changes after i applied
            tooltip: 'Bold',
            className: 'bold-btn', // this does not have any changes after i applied
            onUpdated: (toolbarState) => {
              console.log('toolbarState', toolbarState)
            },
          },
          {
            name: 'italic',
            el: createButton('format_italic', 'italic'),
            command: 'italic',
            tooltip: 'Italic',
            className: 'italic-btn toastui-editor-toolbar-icons',
            onUpdated: (toolbarState) => {
              console.log('toolbarState', toolbarState)
            },
          },
      ]
}

screenshot

What I want to achieve

When text is bold or italic,
→ the matching custom button should show an active style automatically
(just like the default toolbar buttons).

Version

@toast-ui/editor": "^3.2.2"

Additional context

Is there a way to can toggle active class for custom toolbar buttons?