Improve new rule creation with CSSRule

src/css_composer/model/CssRule.js

@@ -26,18 +26,21 @@ module.exports = Backbone.Model.extend(Styleable).extend({
 	},
 
   initialize(c, opt) {
-      this.config   = c || {};
+      this.config = c || {};
-      this.sm = opt ? opt.sm || {} : {};
+      const em = opt && opt.sm;
-      this.slct = this.config.selectors || [];
+      let selectors = this.config.selectors || [];
-
+      this.em = em;
-      if(this.sm.get){
+
-          var slct = [];
+      if (em) {
-          for(var i = 0; i < this.slct.length; i++)
+        const sm = em.get('SelectorManager');
-              slct.push(this.sm.get('SelectorManager').add(this.slct[i].name || this.slct[i]));
+        const slct = [];
-          this.slct = slct;
+        selectors.forEach((selector) => {
+          slct.push(sm.add(selector));
+        });
+        selectors = slct;
       }
 
-      this.set('selectors', new Selectors(this.slct));
+      this.set('selectors', new Selectors(selectors));
   },
 
   /**

test/specs/css_composer/e2e/CssComposer.js

@@ -54,9 +54,9 @@ module.exports = {
         it('Rules are correctly imported from default property', () => {
           var gj = grapesjs.init({
             stylePrefix: '',
-            storageManager: { autoload: 0, type:'none' },
+            storageManager: {autoload: 0, type:'none' },
-            assetManager: { storageType: 'none', },
+            assetManager: {storageType: 'none', },
-            cssComposer: { rules: rulesSet},
+            cssComposer: {rules: rulesSet},
             container: 'csscomposer-fixture',
           });
           var cssc = gj.editor.get('CssComposer');
@@ -68,8 +68,10 @@ module.exports = {
 
         it('New rule adds correctly the class inside selector manager', () => {
           var rules = cssc.getAll();
-          rules.add({ selectors: [{name: 'test1'}] });
+          rules.add({ selectors: [{name: 'test1', private: true}] });
-          expect(clsm.getAll().at(0).get('name')).toEqual('test1');
+          var rule = clsm.getAll().at(0);
+          expect(rule.get('name')).toEqual('test1');
+          expect(rule.get('private')).toEqual(true);
         });
 
         it('New rules are correctly imported inside selector manager', () => {