Add resetId to the Component model

src/block_manager/view/BlockView.js

@@ -64,9 +64,7 @@ module.exports = Backbone.View.extend({
       }
 
       if (model.get('resetId')) {
-        result.onAll(model => {
-          console.log(model, model.get);
-        });
+        result.onAll(model => model.resetId());
       }
     }
 

src/dom_components/model/Component.js

@@ -791,6 +791,18 @@ const Component = Backbone.Model.extend(Styleable).extend(
       return attrs.id || this.ccid || this.cid;
     },
 
+    /**
+     * Return model id
+     * @param {String} id
+     * @return {self}
+     */
+    setId(id) {
+      const attrs = { ...this.get('attributes') };
+      attrs.id = id;
+      this.set('attributes', attrs);
+      return this;
+    },
+
     /**
      * Get the DOM element of the model. This works only of the
      * model is alredy rendered
@@ -854,6 +866,23 @@ const Component = Backbone.Model.extend(Styleable).extend(
         this.components().forEach(model => model.onAll(clb));
       }
       return this;
+    },
+
+    /**
+     * Reset id of the component and any of its style rule
+     * @param {Object} [opts={}] Options
+     * @return {self}
+     */
+    resetId(opts = {}) {
+      const { em } = this;
+      const oldId = this.getId();
+      if (!oldId) return;
+      const newId = Component.createId(this);
+      this.setId(newId);
+      const rule = em && em.get('CssComposer').getIdRule(oldId);
+      const selector = rule && rule.get('selectors').at(0);
+      selector && selector.set('name', newId);
+      return this;
     }
   },
   {