Las herramientas de componentes se desalinean cuando el editor se redimensiona

Gracias @bernesto por el informe, pero como no podemos detectar cambios en el diseño programático sin afectar al rendimiento, en este caso tienes que actualizar manualmente el diseño del editor mediante 'editor.refresh()' (por ejemplo, en tu ejemplo pondrías la llamada justo al final de la función resizeEditor)

Hola @artf, de hecho me lo mezclé accidentalmente en la última solicitud de tirada que aceptaste (src/canvas/model/Frame.ts). Quizá quieras echar un vistazo a lo que añadí y ver si está causando algún problema. Ahora mismo lo tenemos en pruebas y no hemos visto una degradación en el rendimiento, y soluciona el problema.

de hecho, esto se mezcló accidentalmente en la última solicitud de tirada que aceptaste

y de hecho lo quité porque parecía no tener relación 🤣

No es un problema añadirlo de nuevo, pero ten en cuenta que tu ejemplo solo funcionará por el dispositivo de sobremesa. El ancho llena el contenedor y eso activa el redimensionamiento de la ventana del iframe (que luego activará el evento añadido). No funcionará si cambias a un dispositivo más pequeño, en ese caso no se activará ningún evento de redimensionamiento, así que aún necesitas la llamada de actualización.

Gracias por informar de esto, @bernesto.

Buena pregunta sobre las herramientas de componentes que se desalinean cuando el editor se redimensiona. El enfoque recomendado con Canvas 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!