Issue #4947💬 RespondidoAbierto el 27 de febrero de 2023por FaisalShaikhHAReacciones 2

El administrador de deshacer no funciona correctamente para deshacer una acción de eliminación

Respuesta rápidapor artf1

Sí, deshacer activa el 'change:columns', en tu caso podrías intentar envolver tus cambios en 'updateColumns' en el 'editor'. Deshacer. Gestionador.saltar. '''js updateColumns() { editor. UndoManager.skip(() => { Tus operaciones }) } ```

Lee la respuesta completa abajo ↓

Pregunta

Versión GrapesJS

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

¿Qué navegador usas?

Chrome - versión 110.0.5481.100 (Versión oficial) (arm64)

Enlace de demo reproducible

https://codepen.io/faisal-praella/pen/ExeNwxJ

Describe el bicho

  • He añadido un componente personalizado columns con un nombre de rasgo numérico columns usado para añadir o eliminar la columna del componente hijo.
  • Cuando añado una columna nueva usando el rasgo y deshago el cambio, funciona bien, pero cuando elimino la columna y deshago el cambio, se añade una columna extra.
  • Esto puede deberse a que cuando Grapesjs deshace eliminar cambio, añade la columna eliminada y también revierte el rasgo de columna, pero este cambio de rasgo de columna activa 'this.listenTo(this, "change:columns", this.updateColumns);' que también añade la nueva columna. Si este es el caso, ¿cómo evitar escuchar el cambio de rasgo de columna al deshacer o al deshacer el cambio eliminado? Grapesjs debería añadir primero el elemento eliminado y luego revertir todos los demás cambios de propiedad/rasgo (deshacer en orden inverso) o cualquier otra forma de manejar esta situación?

¿Cuál es el comportamiento esperado? No se debe añadir ninguna columna extra al deshacer la acción de eliminar.

¿Cuál es el comportamiento actual? Se añade una columna extra al deshacer la acción de eliminar.

https://user-images.githubusercontent.com/102785785/221497088-11a9ddf6-b083-4a15-98ad-694664b967ea.mp4

Código de conducta

  • Acepto seguir el Código de Conducta de este proyecto

Respuestas (4)

artf10 de marzo de 2023

Sí, deshacer activa el 'change:columns', en tu caso podrías intentar envolver tus cambios en 'updateColumns' en el 'editor'. Deshacer. Gestionador.saltar. '''js updateColumns() { editor. UndoManager.skip(() => { Tus operaciones }) }

artf11 de marzo de 2023

Vale, entonces cierro este y por favor abre un nuevo problema de error relacionado con rasgos de casilla.

FaisalShaikhHA10 de marzo de 2023

Gracias, @artf funciona, para arreglarlo estaba desactivando el oyente de cambio de rasgos escuchando los eventos de deshacer el comando antes y ejecutar, pero esto se siente más limpio. El rasgo de casilla no se marca ni desmarca al deshacer o rehacer (el valor del rasgo se actualiza por mi parte). Reproducible en la página web de Grapesjs demo. También necesito ayuda aquí, gracias de nuevo.

https://user-images.githubusercontent.com/102785785/224402423-fd04268a-8969-46ae-8a34-6d249493ecaf.mp4

ClaudeCode17 de mayo de 2026

Gracias por informar de esto, @FaisalShaikhHA.

Buena pregunta sobre El gestor de deshacer no funciona correctamente para deshacer una acción de eliminación. El enfoque recomendado con UndoManager 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!

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.