Removing editor styles when initializing the editor

[adavidson21]

Hey all,

This may be a basic question (I'm new to grapesjs and using it in an Angular 11 project), but I'm looking to remove the grey top and side bar from the editor when initializing the editor.

I came across this CSS from the Getting Started section of the docs (and it works when I inspect and manually add it to the element with gjs-cv-canvas class)-

/* Reset some default styling */
.gjs-cv-canvas {
  top: 0;
  width: 100%;
  height: 100%;
}

But, I can't seem to figure out how to accomplish this on initialization. Ideally, I'd be able to add it in here:

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: true,
  height: '300px',
  width: 'auto',
  storageManager: false,
  panels: { defaults: [] },
});

Any help would be awesome!

[ronaldohoch]

Hello and welcome!

If you console.log(editor.Panels.getPanels()) you will see all Panels available.

The id property is the name of Panel

So, you can do:

editor.on("load",()=>{
   editor.Panels.removePanel("commands");
})

[adavidson21]

Using the init in my original question,

const editor = grapesjs.init({
  container: '#gjs',
  fromElement: true,
  height: '300px',
  width: 'auto',
  storageManager: false,
  panels: { defaults: [] },
});

I'm able to get the canvas to look like this:

But the issue I'm trying to fix is removing the grey top and side bar in that image so that I'm left with only the white canvas (with the goal being to add custom block/style managers).

By using panels: { defaults: [] },, it seems to be taking care of removing all of the panels from the editor, because when I use that log statement, this is the output:

So I guess I'm more or less looking for something like the editor on load function, but that sets the CSS of the editor instead.

[artf]

I'm not sure why you can't simply use that CSS rule to reset the default styling

[adavidson21]

Yeah, I was able to use that rule like

:host ::ng-deep .gjs-cv-canvas {
    top: 0;
    width: 100%;
    height: 100%;
}

Which worked perfectly, but was more or less looking to see if it was something I could pass in on init. Just didn't know if I was missing it in the docs!

[ronaldohoch]

this rule isn't deprecated in Angular 12+?