BUG: Css edits aren't persisted to the DOM

[wunksert]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome Version 109.0.5414.87

Describe the bug

How to reproduce the bug?

1. Create a @Keyframes animation on the GrapesJS canvas

@keyframes appear_1234{
  0%: {opacity:0};
  100%: {opacity:100%}
}

In JS, create a new CssRule by passing the following string into editor.Css.addRules:

let updatedRule = `@keyframes appear_1234{
  0%: {opacity:0};
  100%: {opacity:90%};
}`

3. Add it to the canvas: editor.Css.addRules(updatedRule)

What is the expected behavior?
The DOM should be updated

What is the current behavior?
The DOM is not updated. HOWEVER, if I call editor.getCss(), I can see the correct value for opacity is returning.

If is necessary to execute some code in order to reproduce the bug, paste it here below:

function setup(){
    let initialAnimation = `
    @keyframes appear_1234{
        0%: {opacity:0};
        100%: {opacity:100%}
      }
    `
    editor.Css.addRules(initialAnimation);
}

function update(){
    let updatedAnimation = `
    @keyframes appear_1234{
        0%: {opacity:0};
        100%: {opacity:90%}
      }
    `
    editor.Css.addRules(updatedAnimation);
}


setup()
update()
//DOM is not updated.

//Css string is updated though
editor.getCss()

Code of Conduct

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

[artf]

Seems to be related to CssGroupRuleView here. In case of at-rules like @keyframes we have to force the re-render of the parent container.

[wunksert]

@artf facing this issue again with editor.CssComposer.remove(myCssRule)
the editor css removes the rule but it's not flushed through to the DOM. How to you recommend I force re-render of the DOM while keeping the state of my editor intact? editor.refresh isn't flushing the styles to the DOM