Issue #5173Opened June 9, 2023by FaisalShaikhHA1 reactions

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

Question

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?

Select a component and add some style using Style Manager.
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.

https://github.com/GrapesJS/grapesjs/assets/102785785/28560d08-156a-46da-b901-3aec0636a62a

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (2)

artf• June 15, 20231 reactions

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• June 15, 20230 reactions

Thanks @artf for the clarification

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

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

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (2)

Related Questions and Answers

BUG: Style:property:update and Property onChange trigger excessively

BUG: Performance issue while dragging component to canvas when you have 2k component on canvas

BUG: Component with pointer-events: 'all' (except wrapper) or editable component are draggable & droppable to itself.

BUG: <> is introduced at the beginning editor.getHtml()

Paid Plugins That Match This Issue

Browse Plugin Categories