Style:property:update and Property onChange trigger excessively

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)
  }
});

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

Thanks for reporting this, @SagarMaria.

Great question about Style:property:update and Property onChange trigger excessively. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!