Can we listen to change in style in component?

[azan-baloch]

Hey @artf thanks for this amazing project❤️

I am making a component and i want to know if there’s a way to listen for style changes when someone updates styles from the Style Manager.

For example:
view: { init() { this.listenTo(this, "change:style", this.renderTopBarComponent); },

[danstarns]

Hey @azan-baloch please see:

• https://grapesjs.com/docs/api/style_manager.html#available-events

Also, you can hook into backbone and listen for change events to the style property of the Stylable model, see source:

• https://github.com/GrapesJS/grapesjs/blob/dev/packages/core/src/dom_components/model/Component.ts#L139
• https://github.com/GrapesJS/grapesjs/blob/dev/packages/core/src/domain_abstract/model/StyleableModel.ts#L120

[azan-baloch]

Hey @danstarns , i am getting issue in events.

change:style event is not triggering in my component, I’m printing all the triggered events in the console, but the change:style event is not showing up, i have written some demo code, take a look please

model: { defaults: { type: "topbar", droppable: false, draggable: true, style: { color: 'white' }, }, init() { this.on('all', (eventName) => { console.log(Event triggered: ${eventName}); }); this.on('change:style:color', this.checkingUpdate); }, checkingUpdate(){ alert('updated'); }, },

The change:style event is trigerred when the component is dropped onto the canvas, but it does not trigger when I try to update any style.

Here is list of events that are triggered, i am logging them in console.

Event triggered: add
Event triggered: change:style:color (triggered just once only if I have the style property defined in the defaults , like this:
style: { color: 'white' } If the style property is not present in the defaults, no change:style event is triggered,)
topbar rendered
Event triggered: removed
Event triggered: change:status
Event triggered: component:update:status
Event triggered: change
Event triggered: change:status
Event triggered: component:update:status
Event triggered: change

[azan-baloch]

Here's image of code and console