Add and test plugin system

src/editor/main.js

@@ -38,7 +38,50 @@ define(function (require){
 				 */
 				CssComposer: editorModel.get('CssComposer'),
 
-				// AssetManager, Canvas, ClassManager, CodeManager, Commands, Dialog, Panels, StoragManager, StyleManager
+				/**
+				 * @property {StorageManager}
+				 */
+				StorageManager: editorModel.get('StorageManager'),
+
+				/**
+				 * @property {AssetManager}
+				 */
+				AssetManager: editorModel.get('AssetManager'),
+
+				/**
+				 * @property {ClassManager}
+				 */
+				ClassManager: editorModel.get('ClassManager'),
+
+				/**
+				 * @property {CodeManager}
+				 */
+				CodeManager: editorModel.get('CodeManager'),
+
+				/**
+				 * @property {Commands}
+				 */
+				Commands: editorModel.get('Commands'),
+
+				/**
+				 * @property {Dialog}
+				 */
+				Dialog: editorModel.get('Modal'),
+
+				/**
+				 * @property {Panels}
+				 */
+				Panels: editorModel.get('Panels'),
+
+				/**
+				 * @property {StyleManager}
+				 */
+				StyleManager: editorModel.get('StyleManager'),
+
+				/**
+				 * @property {StyleManager}
+				 */
+				Canvas: editorModel.get('Canvas'),
 
 				/**
 				 * Returns configuration object
@@ -110,11 +153,18 @@ define(function (require){
 
 				/**
 				 * Store data to the current storage
-				 * @return {this}
+				 * @return {Object} Stored data
 				 */
 				store: function(){
-					editorModel.store();
-					return this;
+					return editorModel.store();
+				},
+
+				/**
+				 * Store data to the current storage
+				 * @return {Object} Stored data
+				 */
+				load: function(){
+					return editorModel.load();
 				},
 
 				/**

src/editor/model/Editor.js

@@ -252,7 +252,7 @@ define([
 			initStorage: function() {
 				this.stm = new StorageManager(this.config.storage || this.config.storageManager);
 				this.StorageManager = this.stm;
-				this.stm.loadDefaultProviders().setCurrent(this.config.storageType);
+				this.stm.loadDefaultProviders().setCurrent(this.stm.getConfig().type);
 				this.set('StorageManager', this.stm);
 			},
 
@@ -621,6 +621,7 @@ define([
 
 			/**
 			 * Store data to the current storage
+			 * @return {Object} Stored data
 			 */
 			store: function(){
 				var sm = this.StorageManager;
@@ -646,18 +647,18 @@ define([
 				console.log('Store');
 				console.log(store);
 				sm.store(store);
+				return store;
 			},
 
 			/**
 			 * Load data from the current storage
+			 * @return {Object} Loaded data
 			 */
 			load: function(){
 				var result = this.getCacheLoad(1);
-				var comps = [];
-
-				console.log(result);
 				//this.setComponents(result.components || result.html);
 				//this.setStyle(result.styles || result.css);
+				return result;
 			},
 
 			/**

src/grapesjs/config/config.js

@@ -22,19 +22,8 @@ define(function () {
     // Enable/Disable undo manager
     undoManager: true,
 
-    storageId: '', // (!)
-
-    //Indicates which storage to use. Available: local | remote | none
-    storageType: 'local', // (!)
-
-    // More correct
-    storage:{
-        id: '',
-        type: '',
-
-        // Indicates if load data inside editor after init
-        autoload: 1,
-    },
+    // Storage Manager
+    storage: {},
 
     // Array of plugins to init
     plugins: [],

src/grapesjs/main.js

@@ -7,12 +7,6 @@ define(function (require) {
     Editor = require('editor/main'),
     PluginManager = require('PluginManager');
 
-    // Set default options
-    for (var name in defaults) {
-      if (!(name in c))
-        c[name] = defaults[name];
-    }
-
     var plugins = new PluginManager();
     var editors = [];
 
@@ -35,6 +29,12 @@ define(function (require) {
         var c = config || {};
         var els = c.container;
 
+        // Set default options
+        for (var name in defaults) {
+          if (!(name in c))
+            c[name] = defaults[name];
+        }
+
         if(!els)
           throw new Error("'container' is required");
 
@@ -44,6 +44,10 @@ define(function (require) {
         // Execute all plugins
         var plugs = plugins.getAll();
         for (var id in plugs){
+          // Check if plugin is requested
+          if(c.plugins.indexOf(id) < 0)
+            continue;
+
           var plug = plugins.get(id);
           plug(editor);
         }

src/storage_manager/config/config.js

@@ -11,7 +11,7 @@ define(function () {
     autoload: 1,
 
 		// Indicates which storage to use. Available: local | remote
-		storageType: 'local',
+		type: 'local',
 
 		// If autosave enabled, indicates how many steps (general changes to structure)
 		// need to be done before save. Useful with remoteStorage to reduce remote calls

src/storage_manager/main.js

@@ -25,12 +25,12 @@
  * @param {Boolean} [config.autosave=true] Indicates if autosave mode is enabled, works in conjunction with stepsBeforeSave
  * @param {number} [config.stepsBeforeSave=1] If autosave enabled, indicates how many steps/changes are necessary
  * before autosave is triggered
- * @param {string} [config.storageType='local'] Default storage type. Available: 'local' | 'remote' | ''(do not store)
+ * @param {string} [config.type='local'] Default storage type. Available: 'local' | 'remote' | ''(do not store)
  * @example
  * ...
  * storageManager: {
  *  	autosave: false,
- *  	storageType: 'remote',
+ *  	type: 'remote',
  * }
  * ...
  */
@@ -53,7 +53,7 @@ define(function(require) {
 
 		defaultStorages.remote	= new RemoteStorage(c);
 		defaultStorages.local = new LocalStorage(c);
-		c.currentStorage = c.storageType;
+		c.currentStorage = c.type;
 
 		return {
 

test/specs/class_manager/e2e/ClassManager.js

@@ -33,9 +33,8 @@ define(
               var Grapes = require('editor/main');
               this.gjs = new Grapes({
                 stylePrefix: '',
-                storageType: 'none',
                 storageManager: {
-                  storageType: 'none',
+                  type: 'none',
                 },
                 assetManager: {
                   storageType: 'none',

test/specs/css_composer/e2e/CssComposer.js

@@ -14,8 +14,7 @@ define(function(require) {
               this.Grapes = require('editor/main');
               this.gjs = new this.Grapes({
                 stylePrefix: '',
-                storageType: 'none',
-                storageManager: { storageType: 'none', },
+                storageManager: { type: 'none', },
                 assetManager: { storageType: 'none', },
                 container: 'csscomposer-fixture',
               });
@@ -45,8 +44,7 @@ define(function(require) {
             it('Rules are correctly imported from default property', function() {
               var gj = new this.Grapes({
                 stylePrefix: '',
-                storageType: 'none',
-                storageManager: { storageType: 'none', },
+                storageManager: { type: 'none', },
                 assetManager: { storageType: 'none', },
                 cssComposer: { defaults: this.rulesSet},
                 container: 'csscomposer-fixture',

test/specs/grapesjs/main.js

@@ -12,6 +12,17 @@ define(['GrapesJS', 'PluginManager', 'chai'],
       var htmlString;
       var config;
 
+      var storage;
+      var storageId = 'testStorage';
+      var storageMock = {
+        store: function(data){
+          storage = data;
+        },
+        load: function(keys){
+          return storage;
+        },
+      };
+
       before(function () {
         editorName = 'editor-fixture';
         fixtures = $("#fixtures");
@@ -23,7 +34,10 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         documentEl = '<style>' + cssString + '</style>' + htmlString;
         config = {
           container: '#' + editorName,
-          storage: { autoload: 0 },
+          storage: {
+            autoload: 0,
+            type:'none'
+          },
         }
         obj = new GrapesJS();
         fixture = $('<div id="' + editorName + '"></div>');
@@ -115,6 +129,20 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         styles.at(1).get('selectors').at(0).get('name').should.equal('test5');
       });
 
+      it('Adds new storage as plugin and store data there', function() {
+        var pluginName = storageId + '-plugin';
+        obj.plugins.add(pluginName, function(edt){
+          edt.StorageManager.add(storageId, storageMock);
+        });
+        config.storage.type = storageId;
+        config.plugins = [pluginName];
+        var editor = obj.init(config);
+        editor.setComponents(htmlString);
+        editor.store();
+        var data = editor.load();
+        data.html.should.equal(htmlString);
+      });
+
     });
 
   });

test/specs/storage_manager/main.js

@@ -94,7 +94,7 @@ define([
           beforeEach(function () {
             storeValue = [];
             obj = new StorageManager({
-              storageType: storageId,
+              type: storageId,
             });
             obj.add(storageId, storage);
           });