The UndoManager hasUndo() method returns true when it shouldnt
So there is an extra action added to the queue while it shouldn't, which is when I am dragging a block over the canvas. Not really, are you able to create a reproducible demo, as I'm not able to reproduce it?
Read full answer below ↓Question
I am trying to disable the undo button when there are no undo actions to do.
To do so, I am listening to 'change:changesCount' event, and using editor?.attributes?.UndoManager?.hasUndo() to set the undo button disabled state.
editor.on('change:changesCount', editor => setHasUndo(editor?.attributes?.UndoManager?.hasUndo()));
It is doing the job for me except in the below scenario:
- I am creating a new template on a blank canvas
- I drag and drop a block
- I undo
The problem here is that even though the undo now should be disabled, it is not, because editor?.attributes?.UndoManager?.hasUndo() is returning true, same as editor?.UndoManager?.hasUndo(). After doing one extra useless undo, editor?.UndoManager?.hasUndo() starts returning false.
I think the problem is that when I hover a block over the canvas, even before dropping it, we have an action added to the queue, and therefore changesCount is equal to 1 already. After dropping the block changesCount is increased to 2, while it should be 1.
So there is an extra action added to the queue while it shouldn't, which is when I am dragging a block over the canvas.
To note that this doesn't happen with the second block or all the blocks after. It only happens with the first block dragged and dropped.
As a summary, when dragging and dropping the first block into the canvas, there are now 2 undo actions in the UndoManager queue, and not only 1 as expected.
Answers (3)
So there is an extra action added to the queue while it shouldn't, which is when I am dragging a block over the canvas.
Not really, are you able to create a reproducible demo, as I'm not able to reproduce it?
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.
Thanks for reporting this, @alimajed93.
Great question about The UndoManager hasUndo() method returns true when it shouldnt. The recommended approach with Canvas 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 #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 #3639
[Feature]: Improve UndoManager API
One thing i think would add great functionality is a more detailed history stack. U can get the undo stack and build a sort of history repo...
Issue #5593
Layer manager not refreshing on page change
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? MS Edge 120.0.2210.91 Reproducible demo li...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.