Cuando el Gestor de Estilos está en otro div, el mensaje "Seleccionar un elemento antes de usar el Gestor de Estilos" no aparece

Usé este código para resolverlo: '''js const showStylesSector = editor => { const stylesButton = editor. Panels.getButton ('encabezado de panel en barra lateral', 'show-styles'); const layersButton = editor. Panels.getButton ('panel-sidebar-header', 'show-layers');

Desactiva esta función si el gestor de capas está activo. if (!layersButton.attributes.active) { stylesButton.set ('activo', 1); } };

editor.on('component:selected', () => { showStylesSector (editor); });

Esto no es lo que quiero, mi problema es antes de que se seleccione cualquier elemento, así que antes de que el evento "component:selected" se trigere. Lo arreglé temporalmente seleccionando un elemento al cargar el editor, pero no es lo que realmente quiero

editor.on('load', () => {
    editor.select(editor.getWrapper().find('#entry-point')[0])
});

Si usas el StyleManager en un elemento personalizado, tienes que gestionar ese estado tú mismo. '''html

<div class="sm-wrapper"> <div id="styles"></div><!-- aquí es donde se añade el gestor de estilos --> <div class="sm-vacty-state"> Seleccionar un elemento </div> </div> ``` '''js Usa 'component:toggled' ya que 'component:selected' no se activa si la selección está vacía editor.on('component:toggled', () => { if (editor.getSelected()) { Mostrar Gestor de Estilo, ocultar estado vacío } else { mostrar estado vacío, ocultar el gestor de estilo } }); ```

Gracias por informar de esto, @Nielsticot.

Buena pregunta sobre Cuando el Gestor de Estilos está en otro div, el mensaje "Seleccionar un elemento antes de usar el Administrador de Estilos" no se muestra. El enfoque recomendado con ProseMirror 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!