What is the idiomatic way to append and remove classes from components?

@deiga we are doing something like this.

{
      defaults: ->
        {
          name: type
          type: type
          tagName: 'div'
          socialElement: 'web'
          icons: {
            twitter: 'fa-twitter-square'
            linkedin: 'fa-linkedin-square'
            web: 'fa-globe'
          }
          components: {
            type: 'link'
            toolbar: []
          }
          attributes: {
            'class': "social_element fa fa-twitter-square"
          }
          traits: [
            {
              type: 'select'
              label: 'Icon'
              name: 'socialElement'
              changeProp: 1
              options: []
            }, {
              name: 'href'
              changeProp: 1
            }
          ]
        }

      init: ->
        this.listenTo(this, 'change:href', @onSocialUrlChange.bind(this))
        this.listenTo(this, 'change:socialElement', @onSocialIconChange.bind(this))

        @initSettings()
        @updateTraitValues()

      updateTraitValues: ->
        @_initSocialIcon()

      _initSocialIcon: ->
        icons = @attributes.icons
        classes = @getClasses()
        icon = ''
        for cls in classes
          icon = Object.keys(icons).find((key) -> icons[key] == cls)
          break if icon

        this.set('socialElement', icon || 'twitter')

      initSettings: ->
        icons = @attributes.icons
        @updateTrait('socialElement', {
          options: [
            { id: 'twitter', name: 'Twitter', value: 'twitter' },
            { id: 'linkedin', name: 'Linkedin', value: 'linkedin'},
            { id: 'web', name: 'Web', value: 'web' }
          ]
        })

      onSocialIconChange: (model, value) ->
        newClassSet = ['social_element', 'fa']
        model.setClass(newClassSet.concat(@attributes.icons[value]))
    }

I'd attach the trait to some component property instead of the class attribute, and based on the value I'd use properly removeClass and addClass

Thanks for reporting this, @deiga.

Great question about [QUESTION] What is the idiomatic way to append and remove classes from components?. The recommended approach with Components 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!