Register the wrapper in UndoManager

src/dom_components/model/Component.js

@@ -220,7 +220,6 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const um = em && em.get('UndoManager');
       const comps = this.components();
       if (um && !this.__hasUm) {
-        // um.add(this);
         um.add(comps);
         this.__hasUm = 1;
       }
@@ -231,7 +230,6 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const { em } = this;
       const um = em && em.get('UndoManager');
       if (um) {
-        um.remove(this);
         um.remove(this.components());
         delete this.__hasUm;
       }

src/dom_components/model/ComponentWrapper.js

@@ -5,6 +5,7 @@ export default Component.extend(
   {
     defaults: {
       ...Component.prototype.defaults,
+      __wrapper: 1,
       removable: false,
       copyable: false,
       draggable: false,
@@ -19,6 +20,16 @@ export default Component.extend(
         'background-position',
         'background-size'
       ]
+    },
+    __postAdd() {
+      const um = this.em && this.em.get('UndoManager');
+      um && !this.__hasUm && um.add(this);
+      return Component.prototype.__postAdd.call(this, arguments);
+    },
+    __postRemove() {
+      const um = this.em && this.em.get('UndoManager');
+      um && um.remove(this);
+      return Component.prototype.__postRemove.call(this, arguments);
     }
   },
   {

src/undo_manager/index.js

@@ -85,8 +85,8 @@ export default () => {
         }
       });
       um.changeUndoType('add', {
-        on(model, collection, options = {}) {
-          if (hasSkip(options)) return;
+        on: (model, collection, options = {}) => {
+          if (hasSkip(options) || !this.isRegistered(collection)) return;
           return {
             object: collection,
             before: undefined,
@@ -96,8 +96,8 @@ export default () => {
         }
       });
       um.changeUndoType('remove', {
-        on(model, collection, options = {}) {
-          if (hasSkip(options)) return;
+        on: (model, collection, options = {}) => {
+          if (hasSkip(options) || !this.isRegistered(collection)) return;
           return {
             object: collection,
             before: model,
@@ -248,6 +248,16 @@ export default () => {
       return um.isAvailable('redo');
     },
 
+    /**
+     * Check if the entity (Model/Collection) to tracked
+     * Note: New Components and CSSRules will be added automatically
+     * @param {Model|Collection} entity Entity to track
+     * @returns {Boolean}
+     */
+    isRegistered(obj) {
+      return !!this.getInstance().objectRegistry.isRegistered(obj);
+    },
+
     /**
      * Get stack of changes
      * @return {Collection}