BUG: Using !important code provided here breaks background image and gradient.

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox

Reproducible demo link

https://jsfiddle.net/jLgb0mv3/1/

Describe the bug

How to reproduce the bug?

1. ...Put this code in the editor:

editor.on('styleable:change', (model, property) => { const value = model.getStyle()[property]; if (value.indexOf('!important') === -1) { model.addStyle({ [property]: value + ' !important' }); } });

2. Try to set a background image or gradient.

What is the expected behavior? It should let you set a background image or gradient.

What is the current behavior? It doesn't.

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

// your code here

const editor = grapesjs.init({ container: '#gjs', fromElement: 1, height: '100%', storageManager: { type: 0 }, plugins: ['gjs-blocks-basic'] }); editor.on('styleable:change', (model, property) => { const value = model.getStyle()[property]; if (value.indexOf('!important') === -1) { model.addStyle({ [property]: value + ' !important' }); } });

Code of Conduct

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