In GrapeJS Add a class to a DIV tag using traits

Question

I can't solve a problem related to traits in grapejs

I created a traits that acts on the DIV and SECTION tags

It should give the possibility to add a pre-determined class (contained in a drop-down) to a DIV element. On data attributes it works for me. If I add a class to a DIV that contains another class (example myclass) it does not work: I delete the old class. Instead, it should add the new class to the old one.

Try adding the block "SECTION" to the editor: it has its own class "myclass" that is deleted if through the “component setting” I go to edit it

Has anyone already done something similar? I would then implement everything to use tailwind and its classes I have made a working demo

https://jsfiddle.net/zucco/5jnt9zhL/18/

Tried to re-read the technical documentation from scratch to no avail

Here the code of my traits:

editor.DomComponents.addType('universal', {
  isComponent: el => el.tagName === 'DIV' || el.tagName === 'SECTION',
  model: {
    defaults: {
      traits: [
        {
          label: 'Colore',
          name: 'class',
          type: 'select',
          options: [
            { value: '', name: 'Default' },
            { value: 'colore_1', name: 'Colore 1' },
            { value: 'colore_2', name: 'Colore 2' }
          ]
        },
        {
          label: 'Dimensione Colonna',
          name: 'data-colsize',
          type: 'select',
          options: [
            { value: '', name: 'Default' },
            { value: '1', name: '1' },
            { value: '2', name: '2' },
            { value: '3', name: '3' },
            { value: '4', name: '4' },
            { value: '5', name: '5' },
            { value: '6', name: '6' },
            { value: '7', name: '7' },
            { value: '8', name: '8' },
            { value: '9', name: '9' },
            { value: '10', name: '10' },
            { value: '11', name: '11' },
            { value: '12', name: '12' }
          ]
        }
      ]
    },


updated(property) {
  if (property.attributes && property.attributes.class) {
    const existingClasses = this.getClasses().join(' ');
    const selectedClass = property.attributes.class;
    const updatedClasses = existingClasses.length > 0 ? existingClasses + ' ' + selectedClass : selectedClass;
    this.setAttributes({ class: updatedClasses });
  }
}


  }
});