Merge branch '15-beta' into dev

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "grapesjs",
-  "version": "0.14.33",
+  "version": "0.15.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.14.33",
+  "version": "0.15.3-rc.2",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/css_composer/index.js

@@ -201,9 +201,9 @@ module.exports = () => {
       var rule = this.get(selectors, s, w, opt);
 
       // do not create rules that were found before
-      // unless this is an at-rule, for which multiple declarations
+      // unless this is a single at-rule, for which multiple declarations
       // make sense (e.g. multiple `@font-type`s)
-      if (rule && rule.config && !rule.config.atRuleType) {
+      if (rule && rule.config && !rule.config.singleAtRule) {
         return rule;
       } else {
         opt.state = s;

src/dom_components/config/config.js

@@ -37,7 +37,7 @@ module.exports = {
   // structure, but in case you need it you can use this option.
   // If you have `config.avoidInlineStyle` disabled the wrapper will be stored
   // as we need to store inlined style.
-  storeWrapper: 1,
+  storeWrapper: 0,
 
   // List of void elements
   voidElements: [

src/dom_components/model/Component.js

@@ -153,13 +153,13 @@ const Component = Backbone.Model.extend(Styleable).extend(
       this.config = opt.config || {};
       this.ccid = Component.createId(this);
       this.set('attributes', this.get('attributes') || {});
-      this.listenTo(this, 'change:script', this.scriptUpdated);
-      this.listenTo(this, 'change:tagName', this.tagUpdated);
-      this.listenTo(this, 'change:attributes', this.attrUpdated);
       this.initClasses();
       this.initTraits();
       this.initComponents();
       this.initToolbar();
+      this.listenTo(this, 'change:script', this.scriptUpdated);
+      this.listenTo(this, 'change:tagName', this.tagUpdated);
+      this.listenTo(this, 'change:attributes', this.attrUpdated);
       this.set('status', '');
 
       // Register global updates for collection properties
@@ -325,8 +325,9 @@ const Component = Backbone.Model.extend(Styleable).extend(
      */
     setStyle(prop = {}, opts = {}) {
       const em = this.em;
+      const { opt } = this;
 
-      if (em && em.getConfig('avoidInlineStyle')) {
+      if (em && em.getConfig('avoidInlineStyle') && !opt.temporary) {
         prop = isString(prop) ? this.parseStyle(prop) : prop;
         prop = { ...prop, ...this.get('style') };
         const state = this.get('state');
@@ -355,7 +356,9 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const id = this.getId();
 
       // Add classes
-      this.get('classes').each(cls => classes.push(cls.get('name')));
+      this.get('classes').forEach(cls =>
+        classes.push(isString(cls) ? cls : cls.get('name'))
+      );
       classes.length && (attributes.class = classes.join(' '));
 
       // Check if we need an ID on the component

src/dom_components/model/Components.js

@@ -37,11 +37,10 @@ module.exports = Backbone.Collection.extend({
     const cssc = em.get('CssComposer');
     const parsed = em.get('Parser').parseHtml(value);
 
-    if (parsed.css && cssc) {
-      const { avoidUpdateStyle } = opt;
+    if (parsed.css && cssc && !opt.temporary) {
       cssc.addCollection(parsed.css, {
-        extend: 1,
-        avoidUpdateStyle
+        ...opt,
+        extend: 1
       });
     }
 
@@ -62,7 +61,7 @@ module.exports = Backbone.Collection.extend({
     return Backbone.Collection.prototype.add.apply(this, [models, opt]);
   },
 
-  onAdd(model, c, opts) {
+  onAdd(model, c, opts = {}) {
     const em = this.em;
     const style = model.getStyle();
     const avoidInline = em && em.getConfig('avoidInlineStyle');
@@ -72,7 +71,8 @@ module.exports = Backbone.Collection.extend({
       !avoidInline &&
       em &&
       em.get &&
-      em.getConfig('forceClass')
+      em.getConfig('forceClass') &&
+      !opts.temporary
     ) {
       const name = model.cid;
       const rule = em.get('CssComposer').setClassRule(name, style);

src/trait_manager/view/TraitsView.js

@@ -38,10 +38,7 @@ module.exports = DomainViews.extend({
     const ppfx = this.ppfx;
     const comp = this.em.getSelected();
     this.el.className = `${this.className} ${ppfx}one-bg ${ppfx}two-color`;
-
-    if (comp) {
-      this.collection = comp.get('traits');
-      this.render();
-    }
+    this.collection = comp ? comp.get('traits') : [];
+    this.render();
   }
 });