Add createType to StyleManager

package.json

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

src/dom_components/model/Components.js

@@ -70,7 +70,7 @@ module.exports = Backbone.Collection.extend({
     var style = model.get('style');
     var em = this.editor;
 
-    if(!_.isEmpty(style) && em && em.get('Config').forceClass){
+    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:{}});

src/editor/model/Editor.js

@@ -209,19 +209,6 @@ module.exports = Backbone.Model.extend({
       if (!opt.avoidStore) {
         this.set('changesCount', this.get('changesCount') + 1, opt)
       }
-      /*
-      var count = this.get('changesCount') + 1;
-      var stm = this.get('StorageManager');
-
-      if (!stm.isAutosave() || count < stm.getStepsBeforeSave()) {
-        return;
-      }
-
-      if (!opt.avoidStore) {
-        this.set('changesCount', count)
-        this.store();
-      }
-      */
     }, 0);
   },
 

src/style_manager/index.js

@@ -10,6 +10,7 @@
  * * [addType](#addtype)
  * * [getType](#gettype)
  * * [getTypes](#gettypes)
+ * * [createType](#createtype)
  * * [render](#render)
  *
  * With Style Manager you basically build categories (called sectors) of CSS properties which could
@@ -69,6 +70,7 @@ module.exports = () => {
      */
     name: 'StyleManager',
 
+
     /**
      * Get configuration object
      * @return {Object}
@@ -78,6 +80,7 @@ module.exports = () => {
       return c;
     },
 
+
     /**
      * Initialize module. Automatically called with a new instance of the editor
      * @param {Object} config Configurations
@@ -103,6 +106,7 @@ module.exports = () => {
       return this;
     },
 
+
     /**
      * Add new sector to the collection. If the sector with the same id already exists,
      * that one will be returned
@@ -128,6 +132,7 @@ module.exports = () => {
       return result;
     },
 
+
     /**
      * Get sector by id
      * @param {string} id  Sector id
@@ -140,6 +145,7 @@ module.exports = () => {
       return res.length ? res[0] : null;
     },
 
+
     /**
      * Get all sectors
      * @return {Sectors} Collection of sectors
@@ -148,6 +154,7 @@ module.exports = () => {
       return sectors;
     },
 
+
     /**
      * Add property to the sector identified by id
      * @param {string} sectorId Sector id
@@ -193,6 +200,7 @@ module.exports = () => {
       return prop;
     },
 
+
     /**
      * Get property by its CSS name and sector id
      * @param  {string} sectorId Sector id
@@ -213,6 +221,7 @@ module.exports = () => {
       return prop;
     },
 
+
     /**
      * Get properties of the sector
      * @param  {string} sectorId Sector id
@@ -230,6 +239,7 @@ module.exports = () => {
       return props;
     },
 
+
     /**
      * Get what to style inside Style Manager. If you select the component
      * without classes the entity is the Component itself and all changes will
@@ -258,6 +268,7 @@ module.exports = () => {
       return model;
     },
 
+
     /**
      * Add new property type
      * @param {string} id Type ID
@@ -279,6 +290,7 @@ module.exports = () => {
       properties.addType(id, definition);
     },
 
+
     /**
      * Get type
      * @param {string} id Type ID
@@ -288,6 +300,7 @@ module.exports = () => {
       return properties.getType(id);
     },
 
+
     /**
      * Get all types
      * @return {Array}
@@ -296,6 +309,35 @@ module.exports = () => {
       return properties.getTypes();
     },
 
+
+    /**
+     * Create new property from type
+     * @param {string} id Type ID
+     * @param  {Object} [options={}] Options
+     * @param  {Object} [options.model={}] Custom model object
+     * @param  {Object} [options.view={}] Custom view object
+     * @return {PropertyView}
+     * @example
+     * const propView = styleManager.createType('integer', {
+     *  model: {units: ['px', 'rem']}
+     * });
+     * propView.render();
+     * propView.model.on('change:value', ...);
+     * someContainer.appendChild(propView.el);
+     */
+    createType(id, {model = {}, view = {}} = {}) {
+      const type = this.getType(id);
+
+      if (type) {
+        return new type.view({
+          model: new type.model(model),
+          config: c,
+          ...view
+        });
+      }
+    },
+
+
     /**
      * Render sectors and properties
      * @return  {HTMLElement}

src/trait_manager/model/Traits.js

@@ -20,7 +20,7 @@ module.exports = Backbone.Collection.extend({
 
     // Use TraitFactory if necessary
     if (isString(models) || isArray(models)) {
-      const tm = em.get('TraitManager');
+      const tm = em && em.get && em.get('TraitManager');
       const tmOpts = tm && tm.getConfig();
       const tf = TraitFactory(tmOpts);