Changes in component's attributes being reproduced in all the instances instead of just one

Thanks @rmadeiraneto for the report. Yeah, unfortunately that's an issue if you're mutating arrays/objects properties in that way and to avoid that you have 2 options:

1. Avoid direct mutations (assign new references when you have to update them)
2. Define defaults as a function

defaults: () => ({ customArray: [1,2,3] }),

But unfortunately... the second options doesn't work right now 😅 I'll fix it in the next release

@artf using defaults as a function works, thanks for quick response and for providing the alternative fix on this issue. About the first suggestion, I think it's not about people should mutate or not the object, because we're talking about using the provided method (set). I'm sorry I didn't have the time to look at the source code, but you're probably mutating the defaults object inside the 'set' method, probably because the reference comes from early on in the component lifecycle. Again, without looking into the code, I assume that when you merge the defaults with the attributes of the component, you're keeping the reference to the defaults object instead of using a merge method that would return a copy instead, for example, the from immutable. I'll try to find some time to look into the code and suggest something more specific

Again, thanks for the alternative and for this amazing library, keep up the great work!

Thanks for reporting this, @rmadeiraneto.

Great suggestion about Changes in component's attributes being reproduced in all the instances instead of just one! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

• Listen to selector:add for CSS selector changes
• Use selector:custom for custom rules
• Tap into the change:* events for fine-grained tracking
• Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

• A detailed use case
• Code example showing the desired behavior
• Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.