Issue #4947πŸ’¬ AnsweredOpened February 27, 2023by FaisalShaikhHA2 reactions

Undo manager not working properly on undoing a remove action

Quick answerby artf❀ 1

Yeah undo triggers the change:columns, in your case you could try to wrap your updateColumns changes in editor.UndoManager.skip.

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome - version 110.0.5481.100 (Official Build) (arm64)

Reproducible demo link

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

Describe the bug

  • I have added a custom columns component with a number trait name columns used for adding or removing the child component column.
  • When I add a new column using the trait and undo the change it works fine but when I remove the column and undo the change an extra column is added.
  • This might be because when Grapesjs undo remove change it appends the removed column and reverts the column trait as well, but this column trait change triggers this.listenTo(this, "change:columns", this.updateColumns); which adds the new column as well. If this is the case then how to avoid listening to the column trait change on undo or when undoing the removed change Grapesjs should append the removed element first and then revert all other property/trait changes (undo in reverse order) or any other way to handle this situation?

What is the expected behavior? No extra column should be added on undoing the remove action.

What is the current behavior? An extra column is added on undoing the remove action.

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

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (4)

artfβ€’ March 10, 2023

Yeah undo triggers the change:columns, in your case you could try to wrap your updateColumns changes in editor.UndoManager.skip.

updateColumns() {
  editor.UndoManager.skip(() => {
    // your operations
  })
}
artfβ€’ March 11, 2023

Ok I'm closing this one then and please open a new bug issue related to checkbox traits.

ClaudeCodeβ€’ May 17, 2026

Thanks for reporting this, @FaisalShaikhHA.

Great question about Undo manager not working properly on undoing a remove action. The recommended approach with UndoManager is to use the event-driven API.

Start here:

  1. Check the GrapesJS documentation for your specific module
  2. Look for the on() event listener method
  3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

  • Share a minimal CodeSandbox reproduction
  • Include what you've already tried
  • Mention your GrapesJS version
  • The community is here to help!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.