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

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome Version 112.0.5615.137 (Official Build)

Reproducible demo link

https://jsfiddle.net/SagarMaria/sunygp2f/3/

Describe the bug

How to reproduce the bug?

In the jsfiddle simply click on the "Hello World" component.
Observe the numerous console logs.
Click away elsewhere on the canvas, repeat.

What is the expected behavior? style:property:update should only trigger on some style property change for the selected component

What is the current behavior? style:property:update event is instead firing numerous times even when a component is simply selected

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

// editor.on(
      'style:property:update',
      (property) => {
        console.log('property', property);
      },
    );

I'm looking for a way to target a the radio input change event on a custom sector in style manager. Existing documented methods don't seem to be reliable as they are firing in undesired ways.

Ideally I would like some event to detect a change in this radio button value for text align, and be able to utilize that event to add certain class names to the component, look for parents, etc:

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (2)

artf• May 2, 20230 reactions

The behaviour is correct as style:property:update triggers on any update of the Style Manager Property (not only its value). So for your specific case you would need to update the callback in this way

editor.on('style:property:update', ({ property, to }) => {
  // Check for the property name and if the update is related to the value
  if (property.getName() === 'text-align' && to.value !== undefined) {
     console.log('text align property updated with', to.value)
  }
});

SagarMaria• May 2, 20230 reactions

Hi @artf, thanks for the quick reply, but actually, part of the problem is still that even after making a change e.g. click "center" align radio option with the if statement you suggested, subsequent selections of that component still log out style:property:update value with property and to set as the existing value (even if you don't change anything and just select the component). Here is a quick video below and I also updated the jsfiddle with your suggestion.

Is there a way to simply listen for a change on the radio value/click on a different radio option in the style manager? I also tried using the property's onChange but it operates in a similar way to the style:property:update, logging with each click even if no style value has been updated.

https://user-images.githubusercontent.com/83087753/235668944-27e9ee52-f24f-412f-9707-c63cef4b502e.mp4

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: Style:property:update and Property onChange trigger excessively

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (2)

Related Questions and Answers

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

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

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

BUG: Lists not working with default RTE

Paid Plugins That Match This Issue

Browse Plugin Categories