Issue #2015💬 AnsweredOpened May 14, 2019by HakuTheWolfSpirit0 reactions

Is it possible to extract the updated properties in events

快速解答by artf

You can do it in this way:

Read full answer below ↓

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)

artfMay 19, 2019

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']);
    });
HakuTheWolfSpiritMay 20, 2019

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?

artfMay 23, 2019

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.

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

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.