what is the name of this button/manager on grapes?

[censonalvin]

I was trying to find where or what is the name for this button/what manager is this fullscreen button to customize it (see first picture)? because on my customize UI it does not include the other stuff that I put (see the second image)

*first

*second

[ronaldohoch]

Hello!
There is a lot of ways :D

The command itself: https://github.com/artf/grapesjs/blob/dev/src/commands/view/Fullscreen.js
The button being configured: https://github.com/artf/grapesjs-preset-webpage/blob/master/src/panels.ts#L72

And you can search for it using editor.Panels.getPanel("options")

[ronaldohoch]

So, you should create a panel with Panel api from grapesjs:
https://grapesjs.com/docs/api/panels.html#panels

[censonalvin]

the said button here is my sidepanel buttons right? so i'll put their i.ds here ?

[censonalvin]

can't still put my sidepanel. i try to do something like this, but still can't figure it out

const pn = editor.Panels;
const panelViews2 = pn.addPanel({
id: 'options'
});
panelViews2.get('buttons').add([{
attributes: {
title: 'test'
},
label: Site Manager,
command: 'smallsidebar',
id: 'smngr',
class: 'smallsidebar-content'
}]);

[censonalvin]

it goes here. not on the sidepanel that i made

[censonalvin]

somehow i made it but it making a new button. even if it is not on fullscreen. btw it is not in the fullscreen mode (on the image sample)

[artf]

The fullscreen command supports a custom target option, so in your case, you can create a new custom command and update the button's command label.

const fullscreenAppCmd = 'fullscreen-app';
// Create new command for the fullscreen
editor.Commands.add(fullscreenAppCmd, {
 run: editor => editor.runCommand('core:fullscreen', { target: 'body' /* you can use your app container selector */  }),
 stop: editor => editor.stopCommand('core:fullscreen'),
})

// Update current fullscreen button
editor.Panels.getButton('options', 'fullscreen').set('command', fullscreenAppCmd)