Is it possible to extract the updated properties in events
Question
Hello,
I am wondering if it is possible to react on property updates.
I have tried to use the built-in events, but its not clear to me how I am supposed to extract the required information from the model.
For example when I handle the event component:styleUpdate:font-family then I get a model with alot of information, but not exactly which font-family is the new one.
It would be awesome, if it was possible to have the updated html node and the updated css properties for further processing.
Answers (3)
You can do it in this way:
editor.on('component:styleUpdate:font-family', component => {
console.log('updated component', component, 'font-family new value', component.getStyle()['font-family']);
});
Thanks for your answer. That would mean that I had to write for every single an event handler. Isn't there a more generic way to solve this issue?
That would mean that I had to write for every single an event handler.
Every single what? property? In that case you can try this:
editor.on('component:styleUpdate', (component, prop) => {
console.log('updated component', component, 'property:', prop, 'value:', component.getStyle()[prop]);
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #917
[QUESTION] Custom style properties per element
Is it possible to have custom style property UI per element. For example, consider that I want the font-size to be shown as textbox for tex...
Issue #3135
[Help Wanted] How to easily override existing component ?
For example, I want to add a double click event handler on the default video component to open the assets manager. My basic idea was to get...
Issue #4897
component:styleUpdate / component:styleUpdate:propertyName not fired
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Edge 109.0.1518.70 Reproducible demo link...
Issue #3586
how to listen the components change in a component.
init() { this.listenTo(this.model,'change:components', this.handleComponentsChange); }, I develop a component, I try to listen the child co...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.