Los símbolos se rompen al cargar páginas progresivamente (las instancias pierden __symbol enlace)
Ah, y estaré encantado de contribuir si me dices en qué solución debería centrarme (un comando para reconectar instancias, un método asincrónico para cargar datos de proyectos como hago en Silex, ...) CC @artf
Lee la respuesta completa abajo ↓Pregunta
Aquí tienes un vídeo que muestra el error:
https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31
Versión GrapesJS
- Confirmo que uso la última versión de GrapesJS
¿Qué navegador usas?
Firefox último y Chrome v141.0.7390.122
Enlace de demo reproducible
Puedo usar un fiddle/codepen si hace falta, o puedes reproducir usando https://canary.silex.me (necesitas una cuenta gitlab.com), sin necesidad de configuración, el bug se reproduce inmediatamente
O aún más fácil, sin una cuenta gitlab.com:
'''bash NPX @silexlabs/[email protected]
Entonces tienes un sitio en blanco en http://localhost:6805
### Describe el bicho
¡Hola!
Al cargar un proyecto progresivamente (las páginas cargadas una a una para evitar congelaciones del navegador, [como este código](https://github.com/silexlabs/silex-lib/blob/main/src/ts/client/grapesjs/storage.ts#L93-L112)), se rompe el enlace bidireccional de Symbols:
* Instancia → sincronización de símbolos principales funciona - tuve que añadir 'editor.trigger('symbol')' para que funcionara
* Falla la sincronización de → instancias del símbolo principal
* Instancia → Instancia falla (esto es resultado del problema de la Instancia → Principal)
La causa raíz parece ser que GrapesJS resuelve correctamente '__symbols' (array de referencias de instancias), pero **instancias mantienen '__symbol: 0'** si se crearon más tarde (después de los símbolos), por lo que el enlace permanece roto
Quizá lo que necesitamos es una forma no bloqueadora de cargar muchas páginas, o una forma de tener símbolos "enlazados" tras cargar cada página, o ambas :)
### Reproducirse
1. Crear un símbolo
1. Colocar dos instancias de ese símbolo en el lienzo (misma página o páginas diferentes)
1. Salvar el proyecto
1. Recargar el editor (las páginas se cargan progresivamente)
1. Editar una de las dos instancias (estilo, atributos o texto vía RTE)
### Esperado
Los cambios deberían aplicarse a la otra instancia
### De verdad
Los cambios no se aplican a la otra instancia, pero si dejas caer otra instancia en el lienzo, tendrá los últimos cambios de después de recargar
Nota: Las instancias tienen '__symbol: 0', por lo que cambiar la instancia nunca actualiza el símbolo
### Código de conducta
- [x] Acepto seguir el Código de Conducta de este proyecto
Respuestas (4)
Ah, y estaré encantado de contribuir si me dices en qué solución debería centrarme (un comando para reconectar instancias, un método asincrónico para cargar datos de proyectos como hago en Silex, ...)
CC @artf
Sí, parece un problema con esa forma de cargar páginas 🤔 No veo ningún problema en mi parte (carga completa del proyecto). ¿Cuál es la razón de cargar páginas de esa manera?
sí, parece que hay un problema con esa forma de cargar páginas 🤔, no veo ningún problema en mi parte (carga completa del proyecto). ¿Cuál es la razón de cargar páginas de esa manera?
Así evita bloquear el hilo principal durante demasiado tiempo. Cuando los usuarios cargan un sitio web real, normalmente muestra una advertencia de que un script ha congelado el navegador. ¿O existe algún mecanismo que no conozco para cargar los sitios?
Gracias por informar de esto, @lexoyo.
El problema con **los símbolos se rompen al cargar páginas progresivamente (las instancias pierden __symbol enlace) parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.
Qué probar:
- Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);
2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos
3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
Es seguro interactuar con el componente aquí
});
Recomendaciones de siguientes pasos:
- Prueba con la última versión de GrapesJS si no lo has hecho
- Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
- Incluir errores de GrapesJS, de navegador y de consola en tu informe
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #4208
Error de estado de clic de estilo en todos los elementos
Versión GrapesJS [X] Confirmo que se debe usar la última versión de GrapesJS ¿Qué navegador usas? Brave Last, probado en Chrome Last y Safa...
Issue #6549
No se pudo redimensionar la imagen
Versión GrapesJS [x] Confirmo que uso la última versión de GrapesJS ¿Qué navegador usas? Chrome Enlace de demo reproducible https://codepen...
Issue #4529
Cuando redimensionamos una imagen con la clase 'xyz', todos los elementos de la página con la misma clase también se redimensionan porque el editor añade CSS a esas clases.
Versión GrapesJS[X] Confirmo que se debe usar la última versión de GrapesJS¿Qué navegador usas? Versión 104.0.5112.101 (Versión oficial) (a...
Issue #6248
Bug de showOffsets cuando el cuerpo del iframe tiene zoom
Versión GrapesJS [x] Confirmo que uso la última versión de GrapesJS ¿Qué navegador usas? Chrome Enlace de demo reproducible https://jsfiddl...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.