[QUESTION] (Possibly a bug) How to apply traits to components used for GrapesJs initialization

[varadero]

I am using

        this.gjs.DomComponents.addType('some-name', {
            isComponent: (el: HTMLElement) => {
                let isCmp = false;
                if (el.attributes) {
                    isCmp = el.attributes['some-attribute'] !== undefined;
                }
                return isCmp;
            },
            model: {
                defaults: {
                    traits: [
                        {
                            type: 'select', // Type of the trait
                            label: 'Trait label', // The label you will see in Settings
                            name: 'some-attribute', // The name of the attribute/property to use on component
                            options: myItems.map(x => ({ id: x.id, name: x.name }))
                        }
                    ],
                    // As by default, traits are binded to attributes, so to define
                    // their initial value we can use attributes
                    attributes: { 'some-attribute': '' },
                },
            },
        });

This works but only for blocks which are added/drag-dropped to the editor manually after it is initialized. If we supply components when we call grapesjs.init({..., components: [..]}), the components defined in components do not have the traits. How can we apply traits to initially loaded components too, not only to these added later manually ?

[varadero]

This is how it can be reproduced:

• Go to https://jsfiddle.net/nwsy6mv1/3/
• Open blocks and place "1 Column" block
• Click inside the column and go to "Settings"
• You will see the drop-down trait with label "Trait label"
• At this time the grapesjs components are saved in the local storage because it is configured as storageManager: { type: 'local' }
• Refresh the browser so grapesjs will load components from the local storage
• Click on the column and go to "Settings"

What happens: The settings panel now contains only the default traits but not the one specified in the code. Now if you add manually another "1 Column" block and click on its settings - you will see the trait. If you keep refreshing, every trait specified will not be available for "initially loaded" components - it will be available only for these manually dragged-dropped into the grapesjs editor.

An animated gif:

[pouyamiralayi]

Hi @varadero please define your custom type as a plugin. cheers!

[varadero]

@pouyamiralayi I want to add a trait let's say for all input elements (used the sample provided in grapesjs.com web page at https://grapesjs.com/docs/modules/Traits.html). Or to all elements with specific attribute. I can't add all possible such elements as plugins. But the real problem is that something that works for manually added blocks stops working for the same blocks after refresh. Is there a workaround regarding missing traits after reload ?

[pouyamiralayi]

@varadero currently there is a problem on storing custom types unless they are defined inside a plugin.

to add a trait let's say for all input elements

you can define a custom type which extends from input and append your trait for that type. cheers!

[artf]

currently there is a problem on storing custom types unless they are defined inside a plugin.

Not a problem 😬, you just need to load custom types before the content and using plugins is the only way

I can't add all possible such elements as plugins

https://jsfiddle.net/artur_arseniev/9tg0a36c/

[lofcz]

Note for anyone stumbling on this:

If you config your editor with properties components and or style (say loaded from your server) fiddle provided by artf (https://jsfiddle.net/artur_arseniev/9tg0a36c/) won't work! You need to load content asyncly via storeManager @artf please take into consideration noting this somewhere