How to add a custom button with custom command in default panel of grapesjs

I also had trouble with that when had tried to button to Panel. So, I used the following way: ` editor.Panels.addButton('#target panel id#',

{ id: 'alert-button', className: 'btn-alert-button', label: 'Click my butt(on)', command(editor) { alert('Hello World'); } active: true }); ` However, the panel and button were displayed.

It turns on it needs to use the render method to rerender Panel manager object. I can't find information about it into docs. So, decided this note here: editor.Panels.render(); After that, the button and panel are displayed.

This is well documented at https://grapesjs.com/docs/getting-started.html#panels-buttons. You have two methods to add a panel with buttons: (1) When initializing GrapesJS, (2) After GrapesJS was initialized with addPanel.

Please note that this is for a panel that you have defined with <div id='basic-actions'></div>.

GrapesJS.init()

this.editor = grapesjs.init({
      container: '#gjs',
      fromElement: false,/* https://github.com/artf/grapesjs#usage */
      addBasicStyle: true,
      height: '800px',
      width: 'auto',

      panels: {
  id: 'basic-actions',
  el: '.panel__basic-actions',
  buttons: [
    {
      id: 'alert-button',
      className: 'btn-alert-button',
      label: 'Click my butt(on)',
      command(editor) { alert('Hello World'); }
    }
  ]
},
...});

After GrapesJS was initialized

editor.Panels.addPanel({
  id: 'basic-actions',
  el: '.panel__basic-actions',
  buttons: [
    {
      id: 'alert-button',
      className: 'btn-alert-button',
      label: 'Click my butt(on)',
      command(editor) { alert('Hello World'); }
    }
  ]
});