What would be the best approach for creating a synchronized component ?

[VanShane]

Hi, does anyone have an idea on what the best approach would be to create synchronized components (header, footer, etc.. anything realy).

So far I have tried to use the this.on('component:update', this.handleUpdate) in the component model, but the update seems to be triggered way to many times (on state change (hovered,...), on copy, etc...), and style changes are not being taken into account since the updateStyles event only seems to be triggered when using inline styles (wich I don't wish to use). I have tried triggering the event manually listening to the editor.on('component:styleUpdate') wich does work but this creates conflicts between the updates (component:update + styleUpdate).

Can I execute a custom event somewhere to track style + updates (children included) to trigger the synchronisation proscess. And how could this be achieved ?

Any help would be apreciated :)

[artf]

Check the discussion about Symbols

[VanShane]

Hi @artf, thanks for your answer, I'll try this out to see if this corresponds to our needs.

[VanShane]

Hey @artf, so I've tried out the symbols API, which is great and corresponds exactly to our needs, but I notice that it doesn't update any style changes. (verifiable in the demo provided in the docs https://jsfiddle.net/artur_arseniev/ta19s6go/)

Is this a known problem and if so are there any plans or ways to overcome this issue ?

[artf]

You rely on CSS classes for that or you can implement your own logic to update styles cross symbols