BUG: Loading `component` and `styles` from `pageManager`

One annoying thing is that the editor is prepending the below default styles which when saving the styles has numerous duplicates of it:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

Edit: Looking at the docs I finally managed to find protectedCss and when set to empty stops the styles being prepended.

Hi @mapsmarketing currently GrapesJS is not able to properly import HTML documents as string, so the parser skips elements like html, head, body and returns only what is parsed inside the body, one workaround you could do right now is to pass component as object

component: {
  attributes: { id: 'ignt' },
  components: '<div class="my-el">Testing world!</div>',
},

Regarding the styles, it's the browser's default CSSOM parser issue, please refer to this plugin

Hi @artf ,

I've found a way to get the body attributes along with the styles saving correctly via the following method:

const pageManager = editor.Pages;
const page = pageManager.get('my-page-id').toJSON();
const component = pageManager.get('my-page-id').getMainComponent();
page.styles = editor.getCss({ component });

I noticed that your Page.toJSON outputs everything of the specified page. However, it doesn't seem to output the styles correctly (it's always set as undefined for me), so I retrieve the styles for the active page via the editor and override the ones in the JSON. I believe styles are not set due to the if (!props.frames) check you have in Page.ts

The below is an example of how I'm loading in the HTML. I am using frames since component doesn't work with the supplied structure. I am loading in the styles without the use of the parser plugin and it seems to be loading in without issues.

const pageJSON = {...}; // Contains the `frames` and `styles`
const editor = grapesjs.init({
    pageManager: {
        pages: [
            {
                id: 'my-page-id',
                frames: pageJSON.frames,
                styles: pageJSON.styles,
            }
        ]
    }
});

I also noticed that the PageManager.select function doesn't update styles when switching between the pages which forces me to run: editor.setStyle(pageJSON.styles);