Implement Styleable interface in Components and CssRules

GrapesJS · Jul 14, 2017 · 4b584a7 · 4b584a7
1 parent 6e17b1e
commit 4b584a7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js
@@ -1,7 +1,9 @@
+import Styleable from 'domain_abstract/model/Styleable';
+
 var Backbone = require('backbone');
 var Selectors = require('./Selectors');
 
-module.exports = Backbone.Model.extend({
+module.exports = Backbone.Model.extend(Styleable).extend({
 
 	defaults: {
     // Css selectors

diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
@@ -1,3 +1,5 @@
+import Styleable from 'domain_abstract/model/Styleable';
+
 var Backbone = require('backbone');
 var Components = require('./Components');
 var Selectors = require('selector_manager/model/Selectors');
@@ -7,7 +9,7 @@ const escapeRegExp = (str) => {
   return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
 }
 
-module.exports = Backbone.Model.extend({
+module.exports = Backbone.Model.extend(Styleable).extend({
 
   defaults: {
     // HTML tag of the component

diff --git a/src/domain_abstract/model/Stylable.js → src/domain_abstract/model/Styleable.js b/src/domain_abstract/model/Stylable.js → src/domain_abstract/model/Styleable.js
@@ -1,4 +1,4 @@
-export default class Stylable {
+export default {
 
   /**
    * To trigger the style change event on models I have to
@@ -8,23 +8,23 @@ export default class Stylable {
    */
   newStyle(prop) {
     return Object.assign({}, this.getStyle(), prop);
-  }
+  },
 
   /**
    * Get style object
    * @return {Object}
    */
   getStyle() {
     return this.get('style');
-  }
+  },
 
   /**
    * Set new style object
    * @param {Object} prop
    */
   setStyle(prop = {}) {
     this.set('style', this.newStyle(prop));
-  }
+  },
 
   /**
    * Add style property
@@ -43,7 +43,7 @@ export default class Stylable {
 
     prop = this.newStyle(prop);
     this.set('style', prop);
-  }
+  },
 
   /**
    * Remove style property