Undo manager not working properly on undoing a remove action
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.
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (4)
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
})
}
Ok I'm closing this one then and please open a new bug issue related to checkbox traits.
Thank you @artf it works, to fix this I was toggling the trait change listener by listening to undo command before & run events but this feels cleaner. The checkbox trait not getting checked or unchecked on undo/redo (trait value is updated on my end). Reproducible on Grapesjs webpage demo. Need help here as well thank you once again.
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:
- Check the GrapesJS documentation for your specific module
- Look for the
on()event listener method - 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.
Issue #5632
Add a change to the undomanager
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v91 Reproducible demo link https://...
Issue #4812
Layerable property not working as expected in parent-child scenario.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 107.0.5304.110 (Official Build) (arm64) Re...
Issue #5631
Undo manager add() not working as expected
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v91 Reproducible demo link -- Descr...
Issue #6263
Duplicated links are added using rte
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? ChromeReproducible demo link https://codepen...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins β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.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Tutorial
GrapesJS vs Webflow vs Tilda: What to Choose for Your Business in 2026
Choosing the right website platform in 2026 is no longer just about building a site
Tutorial
GJS Market 2.0 - Donations, Tracking, Labels and Better Product Discovery
Weβve rolled out a new set of GrapesJS marketplace updates across GJS Market, focused on improving how creators distribute products
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.