Issue #6143💬 RespondidoAbierto el 10 de septiembre de 2024por rhoenerSBSReacciones 0

question components undo-manager bug canvas

ERROR/[PREGUNTA]: ¿Cómo envolver correctamente un componente al añadir/montar?

Respuesta rápidapor jasonvijayy

Hola @artf, Enlace reproducible También me cuelga cuando uso 'component.replaceWith()' junto con UndoManager. Esto solo ocurre cuando se activa 'replaceWith()' durante los eventos del ciclo de vida del editor (por ejemplo, 'cambiar:estado', 'componente:seleccionado', 'componente:deseleccionado'). Al deshacer, GrapesJS...

Lee la respuesta completa abajo ↓

Pregunta

Versión GrapesJS

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

¿Qué navegador usas?

Chrome v128

Enlace de demo reproducible

https://jsfiddle.net/fjyk6n4a/2/

Describe el bicho

Hola @artf, Actualmente estoy intentando envolver un componente en un componente de sección si aún no está envolvido. Estoy conectando al evento component:mount y reemplazando el componente añadido por el componente section (que tiene el añadido como hijo). Mi código se ve algo así: '''js editor.on('component:mount', (component) => { if (component.parent().attributes.tagName !== 'body') regresar; si (component.is('sección')) regresar; component.replaceWith({ tipo: 'sección', Componentes: Componente }); })

El problema al que me enfrento es que la pila de UndoManager no está completamente alineada con lo que está ocurriendo. Después de añadir y envolver, la pila tiene 3 entradas: eliminar el componente original, añadir la sección y añadir el componente original. Al hacer clic en deshacer, la sección se elimina y el componente original permanece.  Pero tiene fallos porque no es removible y realmente no está ahí, ya que las entradas de la pila no reflejan correctamente los cambios (quizá le falta el añadido inicial).

**Cómo reproducir lo que he descrito:**
1. Enlace de demostración reproducible abierto
2. añadir componente de texto (se envuelve en sección como visible en capas)
3. Haz clic Ctrl+Z para deshacer
4. El texto sigue en lienzo y capas, la sección ha desaparecido. El texto no es removible

**Mi pregunta:**
Idealmente me gustaría cambiar la pila de UndoManager de modo que al deshacer o la sección y el componente original se eliminen al mismo tiempo y sin errores (que es el problema actual) o se elimine el componente original y si vuelves a hacer clic en deshacer la sección se elimine (como si la sección se hubiera añadido primero). En el evento component:mount, la pila aún no tiene la entrada más reciente del añadido, así que no puedo manipularla en ese momento. 
¿Cuál es la mejor manera de envolver el Componente sin tener problemas con UndoManager o cómo puedo manipular la pila para solucionarlo?

### Código de conducta

- [X] Acepto seguir el Código de Conducta de este proyecto

Respuestas (2)

jasonvijayy• 30 de enero de 2026

Hola @artf,

Enlace reproducible

También me cuelga cuando uso 'component.replaceWith()' junto con UndoManager.

Esto solo ocurre cuando se activa 'replaceWith()' durante los eventos del ciclo de vida del editor (por ejemplo, 'cambiar:estado', 'componente:seleccionado', 'componente:deseleccionado').

Al deshacer, GrapesJS intenta restaurar la selección/estado del componente antiguo, pero ya no existe en la colección madre, lo que provoca errores como:

'No se pueden leer propiedades de indefinidas (leyendo 'indexOf')'

La misma lógica de 'reemplazarWith()' funciona bien cuando se ejecuta desde Trait.

¿Existe alguna forma recomendada y segura para deshacer un componente durante los cambios de selección?

Gracias.

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @rhoenerSBS.

Buena pregunta sobre BUG/[PREGUNTA]: ¿Cómo envolver correctamente un componente al añadir/montar?. El enfoque recomendado con Canvas es usar la API orientada a eventos.

Empieza aquí:

Consulta la documentación de GrapesJS de tu módulo específico
Busca el método del oyente de eventos 'on()'
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!