Issue #2456Opened December 12, 2019by varadero2 reactions

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

Question

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 ?

Answers (3)

artfDecember 14, 20192 reactions

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/

varaderoDecember 12, 20190 reactions

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:

grapesjs-traits-bug

pouyamiralayiDecember 12, 20190 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.