[repro provided] remove flex container when there's no child

[addlistener]

https://stackblitz.com/edit/grapesjs-react-custom-ui-vlofm5?file=src%2FApp.tsx

The core lines to remove flex container when there's no child. Since the container has neither height nor children it will be better for us to remove it for the user.

    editor.on('component:update:components', (model) => {
      if (model.get('type') === 'container') {
        const childCount = model.components().length;
        if (childCount === 0) {
          console.log('should remove');
          model.remove();
        }
      }
    });

Problem

Drag item2 into the first line. The result is good.

However, if you press "undo" the removed child will not be added back to the second line. And then there's no undo actions available.

My guess

Maybe it has sth to do with "backbone-undo" not tracking the removed model? I checked its API and seems there's no thing I can do. How can I fix this?

Or in another way, is there sth I can do to "merge" more changes into an undo action? I guess even if this is fixed you still need two undo actions. The ideal way is to undo only once.

[artf]

Yeah, for some reason, your removal replaces the one done after moving the component and that's why it breaks with undo. Not sure what is happening but definitely not an expected behavior, I'll investigate.