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);

Thanks for reporting this, @mapsmarketing.

Great question about Loading component and styles from pageManager. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!