[QUESTION] enable 'view components' button on panel by default

[ghost]

this button is currently off by default. so you have to turn it on every time, which is not obvious to everyone.

how do you make it active right away?

[mcottret]

Hi @Enmaboya !

Looking at the default Panels configuration, it should be active by default.

If you have a custom panels configuration, you need to add the active: true property to the button's configuration (like here).

Alternatively, you can retrieve the button using the Panels API to make it active after initializing the editor, eg:

editor.Panels.getButton('options', 'sw-visibility').set('active', true);

Note that the getButton parameters may vary depending on your panels & buttons configurations.

[ghost]

@mcottret thank you so much!

[sdchamoli]

In Angular
myPlugin: any;

this.myPlugin = editor => { editor.Panels.addPanel({ id: 'basic-actions', el: '.panel__basic-actions', buttons: [ { id: 'visibility', active: true, // active by default className: 'btn-toggle-borders', label: 'B', command: 'sw-visibility', // Built-in command } ], }); }

After that inn your editor init add your plugin

return grapesjs.init({

plugins: [this.myPlugin], })