BUG/[QUESTION]: How to correctly wrap a Component on add/mount?

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v128

Reproducible demo link

https://jsfiddle.net/fjyk6n4a/2/

Describe the bug

Hi @artf, I am currently trying to wrap a component in a section component if its has not been wrapped yet. I am hooking into the component:mount event and replacing the added component with the section component (which has the added one as child). My Code looks something like this:

editor.on('component:mount', (component) => {
       if (component.parent().attributes.tagName !== 'body')
            return;
        if (component.is('section'))
            return;
        component.replaceWith({
            type: 'section',
            components: component
        });
})

The issue I'm facing is that the UndoManager stack is not completely aligned with what is happening. After the add and wrap the stack has 3 Entries: remove of original component, add of section and add of original component. When clicking undo the section is removed and the original component stays. But it is buggy in means of it is not removable and not really there because the stack entries do not reflect the changes correctly (maybe missing the initial add).

How to reproduce what I described:

1. open reproducable demo link
2. add text component (is wrapped in section as visible in layers)
3. click ctrl+z to undo
4. text is still in canvas and layers, section is gone. text is not removable

My Question: Ideally I would like to change the UndoManager stack in that on undo either the section and original component are both removed at the same time and without bugs (currently the problem) or the original component is removed and if you click undo again then the section is removed (as if the section was added first). In component:mount event the stack does not have the newest entry of the add yet so I cant manipulate it at that time. What is the best way to wrap the Component without having problems with the UndoManager or how can I manipulate the stack to fix it?

Code of Conduct

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