Issue #3173Opened December 8, 2020by niveth092 reactions

How to remove the eye-slash button in preview mode?

Question

Hi @artf ! I have created a web builder using GrapesJS. I want to remove the eye-slash button in preview mode and replace it with the back button. How to do it? Kindly please help me.

Answers (3)

collindutterJanuary 19, 20211 reactions

@niveth09 here is the code for extending the preview command without the eye button:

    const cmdVis = 'sw-visibility';
    commands.extend('preview', {
        run(editor, sender): void {
            this.sender = sender;
            this.selected = [...editor.getSelectedAll()];
            editor.select();

            if (!this.shouldRunSwVisibility) {
                this.shouldRunSwVisibility = editor.Commands.isActive(cmdVis);
            }

            this.shouldRunSwVisibility && editor.stopCommand(cmdVis);
            editor.getModel().stopDefault();

            const panels = this.getPanels(editor);
            const canvas = editor.Canvas.getElement();

            panels.forEach((panel) => panel.set('visible', false));

            const canvasS = canvas.style;
            canvasS.width = '100%';
            canvasS.height = '100%';
            canvasS.top = '0';
            canvasS.left = '0';
            canvasS.padding = '0';
            canvasS.margin = '0';
            editor.refresh();
            this.tglEffects(1);
        },
    });

artfDecember 16, 20200 reactions

I'd suggest extending the original Preview command

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.