Pregunta: Etiquetas de capas

Puedes ampliar el modelo de tu(s) componente(s) y sobrescribir la función 'getName'

Por si esto le resulta útil a alguien, he encontrado una forma sencilla/alternativa de hacerlo cuando se crea un componente.

Editor.on('component:create', function(component) {

Filtra los tipos de etiquetas que te interesan
  if( component.attributes.tagName === 'div' ) {

Consigue información que quieras usar como texto de reemplazo
    En mi caso, el atributo id del elemento component, que se almacena en component.ccid
    const idParts = component.ccid.split('-')
    if( idParts.length > 0 & idParts[0] === 'cbt') {
      Esto es específico de mi caso, pero 'component.attributes.name' es el campo que aparece en el gestor de capas
      component.attributes.name = ''
      for( sea i=1; i < idParts.length; i++ ) {
        component.attributes.name += idParts[i].charAt(0).toUpperCase() + idParts[i].slice(1) + ' '
      }
    }
    else {
      component.attributes.name = 'Div'
    }
  }
})

Así lo hice yo:

  grapesInstance.on('component:create', (component) => {
    component.getName = () => component.attributes['custom-name'] || '${component.attributes.tagName}#${component.ccid}';
  });

La ventaja es que si el id o la etiqueta de los componentes cambian más adelante, seguirán actualizándose en el gestor de capas y también puedes renombrar componentes individuales.

Gracias por informar de esto, @fmay.

Excelente pregunta sobre Pregunta: Etiquetas de capas. El enfoque recomendado con GrapesJS es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!