Adjust clone method in Component with `avoidInlineStyle`

src/dom_components/model/Component.js

@@ -1,4 +1,4 @@
-import { isUndefined, isArray, isEmpty, has } from 'underscore';
+import { isUndefined, isArray, isEmpty, has, clone } from 'underscore';
 import Styleable from 'domain_abstract/model/Styleable';
 
 const Backbone = require('backbone');
@@ -233,7 +233,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     classes.length && (attributes.class = classes.join(' '));
 
     // If style is not empty I need an ID attached to the component
-    if (!isEmpty(this.get('style')) && !has(attributes, 'id')) {
+    if (!isEmpty(this.getStyle()) && !has(attributes, 'id')) {
       attributes.id = this.getId();
     }
 
@@ -476,21 +476,21 @@ module.exports = Backbone.Model.extend(Styleable).extend({
    * @private
    */
   clone(reset) {
-    var attr = _.clone(this.attributes),
-    comp = this.get('components'),
-    traits = this.get('traits'),
-    cls = this.get('classes');
+    const em = this.em;
+    const style = this.getStyle();
+    const attr = clone(this.attributes);
+    delete attr.attributes.id;
     attr.components = [];
     attr.classes = [];
     attr.traits = [];
 
-    comp.each((md, i) => {
+    this.get('components').each((md, i) => {
       attr.components[i]	= md.clone(1);
     });
-    traits.each((md, i) => {
+    this.get('traits').each((md, i) => {
       attr.traits[i] = md.clone();
     });
-    cls.each((md, i) => {
+    this.get('classes').each((md, i) => {
       attr.classes[i]	= md.get('name');
     });
 
@@ -501,6 +501,10 @@ module.exports = Backbone.Model.extend(Styleable).extend({
       this.opt.collection = null;
     }
 
+    if (em.getConfig('avoidInlineStyle') && !isEmpty(style)) {
+      attr.style = style;
+    }
+
     return new this.constructor(attr, this.opt);
   },
 

src/dom_components/model/Components.js

@@ -1,4 +1,6 @@
-var Backbone = require('backbone');
+import { isEmpty } from 'underscore';
+
+const Backbone = require('backbone');
 
 module.exports = Backbone.Collection.extend({
 
@@ -67,16 +69,18 @@ module.exports = Backbone.Collection.extend({
   },
 
   onAdd(model, c, opts) {
-    var style = model.get('style');
-    var em = this.editor;
-
-    if (!_.isEmpty(style) && em && em.get && em.get('Config').forceClass) {
-      var cssC = this.editor.get('CssComposer');
-      var newClass = this.editor.get('SelectorManager').add(model.cid);
-      model.set({style:{}});
-      model.get('classes').add(newClass);
-      var rule = cssC.add(newClass);
-      rule.set('style', style);
+    const em = this.editor;
+    const style = model.get('style');
+    const avoidInline = em && em.getConfig('avoidInlineStyle');
+
+    if (!isEmpty(style) && !avoidInline &&
+      em && em.get && em.get('Config').forceClass) {
+        var cssC = this.editor.get('CssComposer');
+        var newClass = this.editor.get('SelectorManager').add(model.cid);
+        model.set({style:{}});
+        model.get('classes').add(newClass);
+        var rule = cssC.add(newClass);
+        rule.set('style', style);
     }
   },
 

src/dom_components/view/ComponentView.js

@@ -154,30 +154,14 @@ module.exports = Backbone.View.extend({
    * */
   updateStyle() {
     const em = this.em;
+    const model = this.model;
+
     if (em && em.get('avoidInlineStyle')) {
-      const model = this.model;
       this.el.id = model.getId();
       model.setStyle(model.getStyle());
     } else {
-      this.setAttribute('style', this.getStyleString());
-    }
-  },
-
-
-  /**
-   * Return style string
-   * @return  {string}
-   * @private
-   * */
-  getStyleString() {
-    var style  = '';
-    this.style = this.model.get('style');
-    for(var key in this.style) {
-        if(this.style.hasOwnProperty(key))
-          style += key + ':' + this.style[key] + ';';
+      this.setAttribute('style', model.styleToString());
     }
-
-    return style;
   },