javascriptreactjsgrapesjs

Add multiple Traits with the options in GrapesJS but it only show one


I want to display my custom traits to be used for my text component classes, i have more than one custom traits with an option like this

editor.DomComponents.addType('text', {
        model: {
          defaults: {
            traits: [
              ...type.model.prototype.defaults.traits,
              {
                type: "style_select",
                options: textColor.map((color) => ({
                  name: color,
                  value: color,
                })),
                label: "Text Color",
              },
              {
                type: "style_select",
                options: textAlignment.map((align) => ({
                  name: align,
                  value: align,
                })),
                label: "Text Alignment",
              },
              {
                type: "style_select",
                options: textOpacity.map((opacity) => ({
                  name: opacity,
                  value: opacity,
                })),
                label: "Text Opacity",
              },
            ],
          },
        },
      });

but it only show the one with label 'Text Color', tried to modify the code and found that all my custom traits will be displayed if i use the key 'options' only in one of my traits. is there any solution for my problem?

i think i should use the 'options' in all of my custom traits since all my custom traits will be a select option type with more than 5 option datas


Solution

  • You're using the type value wrong. Change the type from 'style_select' to 'select'

    {
        type: "select",
        options: textColor.map((color) => ({ name: color, value: color })),
        label: "Text Color",
    }