Class modifications of components are not automatically detected

Yeah, this is intentional with classes, with your approach you won't be able to remove defined classes from the component, they will keep being added on component init.

Which is fine for when a class has been forgotten on a component and we want to add it in another version of the plugin on render. For us, we've set these classes to private, so they are not visible to the user and can't be removed manually.

I believe, as a workaround, I could store old classes definition to a new property and compare them before rendering the new class to see which one needs to be removed. I can work on a workaround that will work for us.

Thanks for your reply @artf,

Something like this in the initClasses() function of Component.ts would add the new classes to the element on render. Let me know what you think :

    const cls = this.get('classes') || attrCls || [];
    
    // changing from const to let
    let clsArr = isString(cls) ? cls.split(' ') : cls;

    /* Compare with default class  */
    const dCls = result(this, 'defaults').classes || [];
    const tClsArr = clsArr.map((cl: any) => isString(cl) ? cl : cl.name);
    const nClsArr = dCls.filter((x: any) => tClsArr.indexOf(x) === -1);
    if(nClsArr.length > 0) {
      clsArr = [].concat(clsArr, nClsArr);
    }

    this.stopListening(...toListen);
    const classes = this.normalizeClasses(clsArr);
    const selectors = new Selectors([]);
    this.set('classes', selectors, opts);
    selectors.add(classes);
    selectors.on('add remove reset', this.__upSymbCls);
    // Clear attributes from classes
    attrCls && classes.length && this.set('attributes', restAttr);
    // @ts-ignore
    this.listenTo(...toListen);
    return this;
  }

Thanks for reporting this, @Sw33tgt.

Great question about Class modifications of components are not automatically detected. The recommended approach with Canvas is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!