Improve UndoManager API

Hi @anatoli-dp the ability to view the undo history would be actually super cool and I was already thinking about how to extend the UndoManager module in order to allow this kind of functionality via a plugin (eg. you can render the UI with your framework of choice). The UndoManager stack is updated, with a new UndoAction object (containing infos about the action), on any change of listened models/collections (components, css rules, etc.). One thing worth noting is that one change can generate multiple UndoActions:

// This will generate one UndoAction for a new component 
// and another one for a new CSS Rule
editor.addComponents(`
  <div class="test">Hi</div>
  <style>.test{color: red}</style>
`);

Here is an example of how you could retrieve an array of grouped UndoActions (the private method I made during the last refactoring).

One thing to understand is how to identify each group of UndoActions with the proper description/label (as you have described).

yeah im aware of how to access the stack i just dont know how to intepret it to give a more meaningful description to the end user

i just dont know how to intepret it to give a more meaningful description to the end user

Each UndoAction (each instance of the stack) tells you the action type (eg. add, remove, reset, change) and details about the updated model (eg. Component, CssRule, etc.). You can try to read those data but I was thinking more about how to make each operation easily recognizable.

Thanks for reporting this, @anatoli-dp.

Great suggestion about [Feature]: Improve UndoManager API! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.

Using the event system:

editor.on('component:update', (component) => {
  // your logic here
});

Alternative approaches:

• Listen to selector:add for CSS selector changes
• Use selector:custom for custom rules
• Tap into the change:* events for fine-grained tracking
• Build a plugin that extends the editor with this capability

Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:

• A detailed use case
• Code example showing the desired behavior
• Why this matters for your workflow

The core team is receptive to well-motivated feature requests backed by real use cases.