Traits Not Displayed After Reloading Editor for Custom Component

Alababdiy commented 2 months ago

GrapesJS version

[X] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 91V

Reproducible demo link

https://jsfiddle.net/8tsj5vpb/

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:

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';
            }
        }
    }
});

Code of Conduct

[X] I agree to follow this project's Code of Conduct

mohamedsalem401 commented 2 months ago

Hey @Alababdiy, I wasn't able to reproduce the issue you described in the JSFiddle.

mohamedsalem401 commented 2 months ago

@Alababdiy I was unable to reproduce the issue using the link provided. However, it seems like the issue is that GrapesJS doesn't allow adding or defining a component after it has been initialized.

GrapesJS / grapesjs