BUG: Class modifications of components are not automatically detected

For the moment, as a workaround, I added this in a editor.on('component:mount', (component) => {}); function until any feedback is received. It seems to be working well. In a case where a class is removed from the definition, the removed class will still be available on the saved component's class list, but I guess there's no workaround around this.

editor.on('component:mount', (component) => {  
    const cls = component.getClasses() || [];
    const clsArr = __isString(cls) ? cls.split(' ') : cls;
    // Default Class
    const dCls = component.defaults.classes || [];
    // Temporary class array for comparison
    const tClsArr = clsArr.map((cl) => __isString(cl) ? cl : cl.name);
    // New class that is not in current tClsArray 
    const nClsArr = dCls.filter((x) => tClsArr.indexOf(x) === -1);

    if(nClsArr.length > 0) {
      // Found a missing class, add it to the component
      component.addClass(nClsArr.toString());
    }

    function __isString(x) {
      return typeof x === 'string';
    }
  });

For now, I have achieved my expected result, but any feedback would be appreciated. Thanks.

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;
  }