BUG: Unnecessary Canvas style

[ctrhub]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Arc Version 1.35.0 / Chromium Engine 123.0

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

My special case:
In my case, all styles from plugins and general styles are located in the header. So, to achieve similar behavior in the editor, I add these styles to the Canvas head. And when I specify the background color in my general styles, it is overridden by the GJS Canvas styles. This obliges me to specify the !important rule, which I don't want to do.

I'm guessing this shouldn't be a rare case, even if there is no built-in mechanism for managing the contents of the Canvas head.

How to reproduce the bug?

1. Go to https://grapesjs.com/demo.html
2. Run the following code in the console(DevTools)

const style = document.createElement('style');
      style.innerHTML = 'body { background-color: black; }';
      editor.Canvas.getDocument().head.insertAdjacentElement('beforeend', style);

What is the expected behavior?
GJS styles in the canvas should not affect body styles unless the body is selected or highlighted by the editor.

What is the current behavior?
Defines body background-color.

Code of Conduct

• I agree to follow this project's Code of Conduct

[artf]

There is canvasCss option for that.

Next time open a Discussion please, as this is not a core bug but wrong usage.

[ctrhub]

Hey @artf. Thanks for the answer. I'm not sure that we understood each other and I would like to clarify one detail.
Yes, I know about the canvasCss property, moreover, I use it to change the styles of the selected component. I understand the essence of the property: it is intended to store canvas styles, styles that do not affect the result of hmtl/css, styles that will not be exported, right?
Then why do the default canvas styles have this CSS rule body { background-color: white; } ? And why it makes sense us to override it?
I understand the case where the body element is selected, in which case it makes sense to apply some styles to the body for interactivity.
But why specify body {background-color: white; } by default, it doesn’t affect the interactivity of the editor?
Moreover, by default the body has a white background, this seems to be the default color in all browsers, no?
This is kind of unexpected behavior that requires me to apply !important to my exported style so that I can override the styles from canvasCss.

[artf]

it is intended to store canvas styles, styles that do not affect the result of hmtl/css, styles that will not be exported, right?

Correct

by default the body has a white background, this seems to be the default color in all browsers, no?

yeah but the iframe body doesn't have any default background color that's why that style is there, so you'll need to figure it something for your use case.