Rasgos no mostrados tras recargar el editor para un componente personalizado

Versión GrapesJS

• Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Chrome 91V

Enlace de demo reproducible

https://jsfiddle.net/8tsj5vpb/

Describe el bicho

Me estoy encontrando con un problema con GrapesJS donde los rasgos definidos para un componente personalizado no se muestran después de recargar el editor. Los rasgos funcionan correctamente cuando se añade el componente por primera vez, pero al recargar el editor (por ejemplo, al refrescar la página), los rasgos ya no aparecen en el panel de rasgos.

Pasos para reproducirse:

• Definir un tipo de componente personalizado usando el editor. DomComponents.addType, incluyendo los rasgos en la sección de valores predeterminados.
• Añadir el componente personalizado al lienzo.
• Recargar el editor (por ejemplo, actualizar la página o reinicializar el editor).
• Seleccionar el componente personalizado en el editor.

Comportamiento esperado: Los rasgos definidos para el componente personalizado deberían aparecer en el panel de rasgos tras recargar el editor.

Comportamiento real: Los rasgos no aparecen en el panel de rasgos tras recargar el editor. ( solo muestra el ID y el título )

Fragmento de código: Aquí está la parte relevante de mi código:

editor. DomComponents.addType('bootstrap-card', {
    isComponent: el => el.tagName === 'DIV' && el.classList.contains('card'),
    modelo: {
        Predeterminados: {
            etiquetaNombre: 'div',
            atributos: {
                Clase: 'Tarjeta',
                'data-gjs-name': 'card'
            },
            Clases: ['Carta'],
            Rasgos: [
                {
                    tipo: 'select',
                    etiqueta: 'Tamaño de la tarjeta',
                    Nombre: 'Tamaño de Carta',
                    Opciones: [
                        { id: '', nombre: 'Default' },
                        { id: 'card-sm', nombre: 'Small' },
                        { id: 'card-lg', nombre: 'Large' }
                    ]
                },
                {
                    Tipo: 'Casilla de verificación',
                    etiqueta: 'Mostrar imagen',
                    Nombre: 'Show-Image'
                }
            ],
            Componentes: '
              <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">Este es un texto de ejemplo corto.</p>
                <a href="#" clase="btn btn-primary">Ve a algún sitio</a>
              </div>
            `
        }
    },
    Vista: {
        init() {
            this.listenTo(this.model, 'change:attributes:card-size', this.updateCardSize);
            this.listenTo(this.model, 'change:attributes:show-image', this.toggleImage);
        },
        updateCardSize() {
            tamaño const = this.model.get('attributes')['card-size'];
            this.el.classList.remove('card-sm', 'card-lg');
            si (tamaño) {
                this.el.classList.add(size);
            }
        },
        toggleImage() {
            const mostrarImagen = this.model.get('attributes')['mostrar-imagen'];
            const imgElement = this.el.querySelector('.card-img-top');
            if (imgElement) {
                imgElement.style.display = mostrarImagen ? 'bloquear': 'ninguno';
            }
        }
    }
});

Código de conducta

• Acepto seguir el Código de Conducta de este proyecto