BUG: Css edits aren't persisted to the DOM
- Dominant language
- TypeScript
- Stars
- 26.2k
- Forks
- 4.6k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 6
Description
### GrapesJS version
- [X] 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%}
}
```
2.
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
- [X] I agree to follow this project's Code of Conduct
Contributor guide
Assessment
This issue has not been assessed yet.