BUG: editor.Css.setRule API not working as expected, it is not updating the rule existing rule.

[FaisalShaikhHA]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Version 112.0.5615.137 (Official Build) (arm64)

Reproducible demo link

https://jsfiddle.net/yhj6qa1u/6/

Describe the bug

How to reproduce the bug?

1. Select a component and add some style using Style Manager.
2. Use editor.Css.setRule to set some style for that particular component, notice the previous styles are removed but as per the documentation it should update the CSS rule.

What is the expected behavior?
It should update the existing rule.

What is the current behavior?
It removes the existing rule rather than updating the existing rule.

Screen.Capture.on.2023-06-09.at.18-50-06.mp4

Code of Conduct

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

[artf]

Hi @FaisalShaikhHA this is expected behaviour but I guess the documentation of setRule is a bit misleading. The rule is actually updated (it doesn't create a new one with the same selector) but styles are simply replaced.

This is what you should do if you need to add new styles instead of replacing them

const selector = `#${this.getId()}`;
const rule = editor.Css.getRule(selector);
editor.Css.setRule(selector, {
   ...rule?.getStyle(),
   background: 'black'
});

I guess I can add a new addStyles?: boolean option to handle similar use cases.

[FaisalShaikhHA]

Thanks @artf for the clarification