Grapesjs traits Not Displayed After Reloading Editor for Custom Component

[unknow76616]

Describe the bug

I'm encountering an issue with GrapesJS where traits defined for a custom component are not being displayed after reloading the editor. The traits work correctly when the component is first added, but upon reloading the editor (e.g., refreshing the page), the traits no longer appear in the traits panel.

Steps to Reproduce:

- Define a custom component type using editor.DomComponents.addType, including traits in the defaults section.
- Add the custom component to the canvas.
- Reload the editor (e.g., refresh the page or reinitialize the editor).
- Select the custom component in the editor.

Expected Behavior: The traits defined for the custom component should appear in the traits panel after reloading the editor.

Actual Behavior: The traits do not appear in the traits panel after reloading the editor. ( it showing only id & title )

Code Snippet: Here is the relevant part of my code:

Code: Select all

editor.DomComponents.addType('bootstrap-card', {
    isComponent: el => el.tagName === 'DIV' && el.classList.contains('card'),
    model: {
        defaults: {
            tagName: 'div',
            attributes: {
                class: 'card',
                'data-gjs-name': 'card'
            },
            classes: ['card'],
            traits: [
                {
                    type: 'select',
                    label: 'Card Size',
                    name: 'card-size',
                    options: [
                        { id: '', name: 'Default' },
                        { id: 'card-sm', name: 'Small' },
                        { id: 'card-lg', name: 'Large' }
                    ]
                },
                {
                    type: 'checkbox',
                    label: 'Show Image',
                    name: 'show-image'
                }
            ],
            components: `
              <img class="card-img-top" src="https://via.placeholder.com/300x200" alt="Card Image">
              <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">This is a short example text.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            `
        }
    },
    view: {
        init() {
            this.listenTo(this.model, 'change:attributes:card-size', this.updateCardSize);
            this.listenTo(this.model, 'change:attributes:show-image', this.toggleImage);
        },
        updateCardSize() {
            const size = this.model.get('attributes')['card-size'];
            this.el.classList.remove('card-sm', 'card-lg');
            if (size) {
                this.el.classList.add(size);
            }
        },
        toggleImage() {
            const showImage = this.model.get('attributes')['show-image'];
            const imgElement = this.el.querySelector('.card-img-top');
            if (imgElement) {
                imgElement.style.display = showImage ? 'block' : 'none';
            }
        }
    }
});

[aimeos]

Can you please post a minimal code set which reproduces the problem and contains everything required so we can copy it to a test extension?