[QUESTION] how to make fullscreen command

[gasserol]

Hi, unfortunately I do not find documentation and can't manage to get it understand from code:
I know there is a built-in command 'fullscreen', but with my configuration (from tutorial) it does load only canvas in fullscreen, no panels.
Here is my html code:

<div class="ogaeditor">
                <div class="panel__top">
                    <div class="panel__basic-actions"></div>
                    <div class="panel__devices"></div>
                    <div class="panel__switcher"></div>
                </div>
                <div class="editor-row">
                    <div class="editor-canvas">
                        <div id="gjs">
                            <h1>Hello World Component!</h1>
                        </div>
                    </div>
                    <div class="panel__right">
                        <div class="layers-container"></div>
                        <div class="styles-container"></div>
                        <div class="traits-container"></div>
                        <div id="blocks" class="blocks-container"></div>
                    </div>
                </div>
            </div>

and here my panel code:

editor.Panels.addPanel({
    id: 'basic-actions',
    el: '.panel__basic-actions',
    buttons: [
        ...
        {
            id: 'show-full',
            className: 'btn-show-full',
            label: '<i class="fas fa-expand-arrows-alt">',
            //context: 'show-full',
            //id: ful,
            //command: 'set-fullscreen',
            command: 'fullscreen', // Built-in command

        },
        {
            id: 'show-undo',
            className: 'btn-show-undo',
            label: '<i class="fas fa-undo">',
            context: 'show-undo',

            command(editor) {
                const um = editor.UndoManager;
                um.undo();
            },
        },
        {
            id: 'show-redo',
            className: 'btn-show-redo',
            label: '<i class="fas fa-redo">',
            context: 'show-redo',

            command(editor) {
                const um = editor.UndoManager;
                um.redo();
            },
        },
    ],
});

Can somebody put me on the right way? Many thanks for your precious help and best regards!

[artf]

Good point, the default Fullscreen command enables the fullscreen on the container (#gjs) but with external panels this obviosly doesn't work, and this is why you see only the canvas.
I'd really appreciate a PR for a new option which would allow me to do something like this:

// from
command: 'fullscreen',
// to
command: editor => editor.runCommand('fullscreen', { target: '.ogaeditor' }),
// The target might be a selector string or any HTMLElement

[gabjdev]

Hi @artf ,
Above code worked for full screen, but after I exit full screen manually, it doesn't work anymore.
Could you post code to exit full screen with same button?

[electrotype]

@nativeer I had the same problem. My workaround is to call stopCommand before runCommand:

editor.stopCommand('fullscreen');
editor.runCommand('fullscreen', {  target: '#something' });

Seems to work for me.