GrapesJS / GrapesJS/grapesjs

BUG: Css edits aren't persisted to the DOM

Open
#4,847 2 comments 1 reaction 0 assignees View on GitHub
bug help wanted
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.