[Bug] editor.Panels.addPanel duplicate buttons

[yuzhva]

While creating a custom plugin, in case, when editor.Panels.addPanel is using inside plugin function - buttons are duplicated.

Example: https://jsfiddle.net/kncdah8b/

Buttons are not duplicated:

• when using single Panels.addButton API while loop buttons separately
• when adding panel after editor const editor = grapesjs.init({}) has been created

Currently, I'm using the next trick to avoid the duplications:

function gjsPlugin(editor) {
  editor.on('load', () => {
    editor.Panels.addPanel({
      id: 'custom-panel',
      el: '.custom-panel',
      buttons: [
        {
          id: 'PANEL_ACTION.EXPT',
          className: 'fa fa-code',
          command: 'export-template',
          attributes: { title: 'View code' }
        }
      ]
    });
  });
}

[yuzhva]

Closing the issue, as I found the other solution:

const panelCustom = editor.Panels.addPanel({
    id: 'panel__custom',
    el: '.panel__custom'
  });

const panelCustomButtons = panelCustom.get('buttons');
panelCustomButtons.add(topBarButtonsCenter);

But the issue with editor.Panels.addPanel({ buttons: [] }); still exist (=

[artf]

Thanks @YUzhva for the report and the solution. I'll try to check this out

[hellocaio]

Same here, I tested the panels example (Getting started) in the docs too and keep getting duplicate buttons. @yuzhva solution works, thanks :)

[FaisalShaikhHA]

Hi, @artf facing the same issue and @yuzhva solution not working for me as well. I am adding panels from (Getting started) docs but with different names.

[Adarshsingh2k]

did any one find any resolution for this ug in react