examples on how to connect trait to css property?

[addlistener]

I'm trying to follow this tutorial

https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type

to trying to make a css property a custom trait ( not the default id and title)

however I'm having a hard time understanding the example. I messed with it for a while and finally getting completely lost...

Let's say I have a custom component, a custom trait, and wants the trait to bind with css property ( or more broadly I may want to add more custom logic let's say invert the background color values)

    // Model definition
    model: {
      // Default properties
      defaults: {
        tagName: 'div',
        droppable: false, // Can't drop other elements inside
        attributes: { // Default attributes
          background: "#000",
        },
        traits: [
          "background",
        ],
      }
    }

I guess this is already resolved in https://studio.grapesjs.com/ ? But IDK if it is resolvable thru the interfaces without modifying the source code.

And I have also read about
#1440
#1962
And it seems the issues are outdated?

[ronaldohoch]

Why did you need this instead of using the background in styles?

[addlistener]

I want to hide a lot of styles for simplicity. And I want to re-design the styles tools (let's say let the user pick from pre-defined background images)

[ronaldohoch]

Whe have some ways...

1. In init, you can define StyleManager

        styleManager: {
          clearProperties:true,
          sectors: []
        },

And then, add the sectors with custom properties.

      window.editor.StyleManager.addSector("Decorations", {
        name: "Decorations",
        open: false,
        buildProps: [
          'background', 'border', 'text-decoration'
        ],
      });

2. You can use https://grapesjs.com/docs/modules/Style-manager.html#customization but i don't have experience in it 😅
3. You can set the stylable property to each component, more painfull --'

[addlistener]

Thank you Ronaldo! But if I do it this way I think it will affect all the style editing of all the components instead of just some of the custom components?

And I think I might have figured out how to do it in traits... I need to try more

[ronaldohoch]

Oh, right. You can set the stylable property in these custom components.
Ex.: https://github.com/GrapesJS/mjml/blob/master/src/components/Button.ts#L19

The stylable property is what you are looking for.

[artf]

I'd suggest following what @ronaldohoch already mentioned as Traits are designed to handle mainly attribute and property values (eg. which don't depend on media queries) and Style Manager is designed to handle responsive styles.

Though you can still make a fully custom traits logic to handle specific values (definitely useful only for advanced use cases) you just need to indicate how to get/set your custom value.

traits: [
 {
   name: 'custom-trait-update-html'
   getValue: ({ component }) => {
      // The value is the inner HTML content
     return component.getInnerHTML();
   },
   setValue: ({ component, value }) => {
     // Update the inner HTML with a new value
     component.components(value);
   }
 }
]

[addlistener]

Thank you!

I get you both that Style Manager is dedicated on style management. I guess my use case is more like the "advance use cases" you mentioned.

They won't be affected by media queries. It's more like, choose a sushi template or a ramen template, then I will set the styles to sushi style or ramen style. I want to limit the choices to sushi & ramen style instead of let the users setting margins & colors