SetStyle/getCss() produces duplicated css
There are default styles applied that you can simply disable (pass an empty string) https://github.com/GrapesJS/grapesjs/blob/a83847b1b35e69e5a5810ccf1eb1e1384bf0aab1/src/editor/config/config.ts#L143-L147
Read full answer below βQuestion
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome Latest
Reproducible demo link
https://codesandbox.io/s/silent-river-ifczcv
Describe the bug
How to reproduce the bug?
- Visit the site
- See console. Pay attention to the
*andbodyselector
Expected result Should not be duplicated
If is necessary to execute some code in order to reproduce the bug, paste it here below:
editor = grapesjs.init({
storageManager: false
// ...
})
editor.on("update", () => {
// save to backend
console.log("editor getCSs", editor.getCss());
});
editor.on("load", () => {
// this will come from backend
const style = "* { box-sizing: border-box; } body {margin: 0;}";
editor.setStyle(style);
// const html = backendHtml (<body><div></div></body>)
// editor.setComponents(html)
});
Description
I do this because the new storageManager mechanism/schema destroys my entire app, especially the backend stuff.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (2)
There are default styles applied that you can simply disable (pass an empty string) https://github.com/GrapesJS/grapesjs/blob/a83847b1b35e69e5a5810ccf1eb1e1384bf0aab1/src/editor/config/config.ts#L143-L147
Thanks for reporting this, @handhikadj.
Great question about setStyle/getCss() produces duplicated css. The recommended approach with StyleManager is to use the event-driven API.
Start here:
- Check the GrapesJS documentation for your specific module
- Look for the
on()event listener method - 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!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4851
this.on('change:attributes:type', this.handleTypeChange) do not support array type
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 108.0.5359.125Reproducible demo link...
Issue #6152
CSS added via custom code persists after custom code component is removed
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? any Reproducible demo link https://grapesj...
Issue #5263
Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo...
Issue #5019
Can't set preview mode on editor init when using loadProjectData()
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v111 Reproducible demo link https:/...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins βPremium plugins ship with support, regular updates, and production-ready features β save days of integration work.
Browse premium plugins βBrowse Plugin Categories
Jump directly to plugin category pages on the marketplace.