Refactor modules with new loader

src/block_manager/main.js

@@ -44,6 +44,7 @@ define(function(require) {
          * Initialize module. Automatically called with a new instance of the editor
          * @param {Object} config Configurations
          * @param {Array<Object>} [config.blocks=[]] Default blocks
+         * @return {this}
          * @example
          * ...
          * {
@@ -53,7 +54,6 @@ define(function(require) {
          *    ],
          * }
          * ...
-         * @return {this}
          */
         init: function(config) {
           c = config || {};

src/canvas/view/CanvasView.js

@@ -121,7 +121,7 @@ function(Backbone, FrameView) {
       this.toolsEl.appendChild(this.placerEl);
       this.toolsEl.appendChild(this.ghostEl);
 			this.$el.append(this.toolsEl);
-      var rte = this.em.get('RichTextEditor');
+      var rte = this.em.get('rte');
 
       if(rte)
         this.toolsEl.appendChild(rte.render());

src/code_manager/main.js

@@ -19,9 +19,9 @@
  */
 define(function(require) {
 
-	var CodeManager = function(config) {
+	var CodeManager = function() {
 
-		var c = config || {},
+		var c = {},
 		defaults = require('./config/config'),
 		gHtml = require('./model/HtmlGenerator'),
 		gCss = require('./model/CssGenerator'),
@@ -29,28 +29,65 @@ define(function(require) {
 		eCM = require('./model/CodeMirrorEditor'),
 		editorView = require('./view/EditorView');
 
-		for (var name in defaults) {
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
-
 		var generators = {},
 		defGenerators	= {},
 		viewers = {},
 		defViewers = {};
 
-		defGenerators.html = new gHtml();
-		defGenerators.css	= new gCss();
-		defGenerators.json = new gJson();
-
-		defViewers.CodeMirror = new eCM();
-
 		return {
 
+			getConfig: function() {
+				return c;
+			},
+
 			config: c,
 
 			EditorView: editorView,
 
+			/**
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'CodeManager',
+
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
+
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+       */
+      init: function(config) {
+        c = config || {};
+        for (var name in defaults) {
+					if (!(name in c))
+						c[name] = defaults[name];
+				}
+
+				var ppfx = c.pStylePrefix;
+				if(ppfx)
+					c.stylePrefix = ppfx + c.stylePrefix;
+
+				defGenerators.html = new gHtml();
+				defGenerators.css	= new gCss();
+				defGenerators.json = new gJson();
+
+				defViewers.CodeMirror = new eCM();
+        return this;
+      },
+
+      /**
+       * Callback on load
+       */
+      onLoad: function(){
+      	this.loadDefaultGenerators().loadDefaultViewers();
+      },
+
 			/**
 			 * Add new code generator to the collection
 			 * @param	{string} id Code generator ID

src/commands/view/ExportTemplate.js

@@ -41,7 +41,7 @@ define(function() {
 
 					$editor 	= new this.cm.EditorView({
 						model		: editor,
-						config		: this.cm.config
+						config		: this.cm.getConfig()
 					}).render().$el;
 
 				editor.init( $input[0] );

src/commands/view/SelectPosition.js

@@ -9,7 +9,7 @@ define(function() {
 			 * */
 			startSelectPosition: function(trg, doc) {
 				this.isPointed = false;
-				var utils = this.editorModel.Utils;
+				var utils = this.editorModel.get('Utils');
 				if(utils && !this.sorter)
 					this.sorter = new utils.Sorter({
 						container: this.getCanvasBody(),

src/css_composer/model/CssRules.js

@@ -29,7 +29,7 @@ define(['backbone','./CssRule'],
 
       add: function(models, opt){
         if(typeof models === 'string')
-          models = this.editor.Parser.parseCss(models);
+          models = this.editor.get('Parser').parseCss(models);
         return Backbone.Collection.prototype.add.apply(this, [models, opt]);
       },
 

src/demo.js

@@ -10,7 +10,7 @@ require(['config/require-config'], function() {
 			container	: '#gjs',
 			height: '100%',
 			fromElement: true,
-			storage:{ autoload: 0 },
+			storageManager:{ autoload: 0 },
 
 			commands: 		{
 					defaults		: [{

src/device_manager/config/config.js

@@ -1,7 +1,7 @@
 define(function () {
 	return {
 
-    'devices': [],
+    devices: [],
 
     deviceLabel: 'Device',
 

src/device_manager/main.js

@@ -1,4 +1,5 @@
 /**
+ * * [init](#init)
  * * [add](#add)
  * * [get](#get)
  * * [getAll](#getall)
@@ -10,38 +11,61 @@
  * ```
  *
  * @module DeviceManager
- * @param {Object} config Configurations
- * @param {Array<Object>} [config.devices=[]] Default devices
- * @example
- * ...
- * deviceManager: {
- *    devices: [
- *      {name: 'Desktop', width: ''}
- *      {name: 'Tablet', width: '991px'}
- *    ],
- * }
- * ...
  */
 define(function(require) {
 
-  return function(config) {
+  return function() {
-    var c = config || {},
+    var c = {},
-      defaults = require('./config/config'),
+    defaults = require('./config/config'),
-      Devices = require('./model/Devices'),
+    Devices = require('./model/Devices'),
-      DevicesView = require('./view/DevicesView');
+    DevicesView = require('./view/DevicesView');
+    var devices, view;
 
-    for (var name in defaults) {
+    return {
-      if (!(name in c))
-        c[name] = defaults[name];
-    }
 
-    var devices = new Devices(c.devices);
+        /**
-    var view = new DevicesView({
+         * Name of the module
-      collection: devices,
+         * @type {String}
-      config: c
+         * @private
-    });
+         */
+        name: 'DeviceManager',
 
-    return {
+        /**
+         * Indicates if module is public
+         * @type {Boolean}
+         * @private
+         */
+        public: true,
+
+        /**
+         * Initialize module. Automatically called with a new instance of the editor
+         * @param {Object} config Configurations
+         * @param {Array<Object>} [config.devices=[]] Default devices
+         * @example
+         * ...
+         * {
+         *    devices: [
+         *      {name: 'Desktop', width: ''}
+         *      {name: 'Tablet', width: '991px'}
+         *    ],
+         * }
+         * ...
+         * @return {this}
+         */
+        init: function(config) {
+          c = config || {};
+          for (var name in defaults) {
+            if (!(name in c))
+              c[name] = defaults[name];
+          }
+
+          devices = new Devices(c.devices);
+          view = new DevicesView({
+            collection: devices,
+            config: c
+          });
+          return this;
+        },
 
         /**
          * Add new device to the collection. URLs are supposed to be unique

src/dom_components/model/Components.js

@@ -50,7 +50,7 @@ define([ 'backbone', 'require'],
 
 			add: function(models, opt){
 				if(typeof models === 'string'){
-					var parsed = this.editor.Parser.parseHtml(models);
+					var parsed = this.editor.get('Parser').parseHtml(models);
 					models = parsed.html;
 
 					if(parsed.css)

src/editor/model/Editor.js

@@ -1,3 +1,11 @@
+var deps = ['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'DeviceManager', 'Parser',
+         'SelectorManager', 'ModalDialog', 'AssetManager', 'CodeManager', 'Panels', 'RichTextEditor',
+        'BlockManager',
+        'CssComposer',
+        'Commands',
+        'Canvas',
+        'DomComponents',
+        'StyleManager'];
 define([
         'backbone',
         'backboneUndo',
@@ -60,23 +68,24 @@ define([
 				if(c.el && c.fromElement)
 					this.config.components = c.el.innerHTML;
 
-				this.initDeviceManager();
+				this.loadModule('Utils'); // no dep
-				this.initParser();
+				this.loadModule('StorageManager'); // No dep
-				this.initStorage();
+				this.loadModule('DeviceManager'); // No dep
-				this.loadModule('SelectorManager');
+				this.loadModule('Parser'); // No dep
-				this.initModal();
+				this.loadModule('SelectorManager'); // No dep
+				this.loadModule('ModalDialog'); // No dep
 				this.loadModule('AssetManager'); // requires SelectorManager
-				this.initUtils();
+				this.loadModule('CodeManager'); // no deps
-				this.initCodeManager();
+				this.loadModule('Panels'); // no deps
+				this.loadModule('RichTextEditor'); // no deps
 				this.initCommands();
-				this.initPanels();
+				//this.initRichTextEditor();
-				this.initRichTextEditor();
 				this.initCssComposer();
-				this.initComponents();
+				this.initComponents(); // Requires AssetManager and Dialog for images components
-				this.initCanvas();
+				this.initCanvas(); // Requires RTE
 				this.initUndoManager();
 				this.initStyleManager();
-				this.loadModule('BlockManager'); // Requres utils, canvas
+				this.loadModule('BlockManager'); // Requires utils, canvas
 
 				this.on('change:selectedComponent', this.componentSelected, this);
 			},
@@ -90,7 +99,7 @@ define([
 				var c = this.config;
 				var M = new require(moduleName)();
 				var name = M.name.charAt(0).toLowerCase() + M.name.slice(1);
-				var cfg = c[name] || c[M.name];
+				var cfg = c[name] || c[M.name] || {};
 				cfg.pStylePrefix = c.stylePrefix;
 
 				// Check if module is storable
@@ -104,6 +113,9 @@ define([
 				cfg.em = this;
 				M.init(cfg);
 
+				if(M.onLoad)
+					M.onLoad();
+
 				// Bind the module to the editor model if public
 				if(M.public)
 					this.set(M.name, M);
@@ -120,36 +132,6 @@ define([
 				this.set('Editor', editor);
 			},
 
-			/**
-			 * Initialize device manager
-			 * @private
-			 * */
-			initDeviceManager: function(){
-				var cfg = this.config.deviceManager;
-				cfg.em = this;
-				cfg.pStylePrefix = this.config.stylePrefix;
-				var dm = new DeviceManager(cfg);
-				this.set('DeviceManager', dm);
-			},
-
-			/**
-			 * Initialize Parser
-			 * @private
-			 * */
-			initParser: function() {
-				this.Parser = new Parser();
-				this.set('parser', this.Parser);
-			},
-
-			/**
-			 * Initialize Utils
-			 * @private
-			 * */
-			initUtils: function() {
-				this.Utils = new Utils();
-				this.set('Utils', this.Utils);
-			},
-
 			/**
 			 * Initialize Style Manager
 			 * @private
@@ -174,7 +156,7 @@ define([
 				pfx	= cfg.stylePrefix || 'css-';
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
 
-				if(this.StorageManager.getConfig().autoload)
+				if(this.get('StorageManager').getConfig().autoload)
 					df = this.loadRules();
 
 				if(elStyle)
@@ -187,7 +169,7 @@ define([
 				this.cssc = new CssComposer(cfg);
 				this.CssComposer = this.cssc;
 				this.set('CssComposer', this.cssc);
-				if(this.stm.isAutosave())
+				if(this.get('StorageManager').isAutosave())
 					this.listenRules(this.cssc.getRules());
 			},
 
@@ -225,8 +207,8 @@ define([
 				var count = this.get('changesCount') + 1,
 						avSt	= opt ? opt.avoidStore : 0;
 				this.set('changesCount', count);
-
+        var stm = this.get('StorageManager');
-				if(this.stm.isAutosave() && count < this.stm.getStepsBeforeSave())
+				if(stm.isAutosave() && count < stm.getStepsBeforeSave())
 					return;
 
 				if(!avSt){
@@ -245,7 +227,7 @@ define([
 				comp = '',
 				cmpStylePfx	= cfg.stylePrefix || 'comp-';
 
-				if(this.StorageManager.getConfig().autoload)
+				if(this.get('StorageManager').getConfig().autoload)
 					comp = this.loadComponents();
 
 				cfg.pStylePrefix	= this.config.stylePrefix;
@@ -254,11 +236,9 @@ define([
 				if(comp)
 					cfg.components = comp;
 
-				if(this.rte)
+				cfg.rte = this.get('rte') || '';
-					cfg.rte = this.rte;
 
-				if(this.modal)
+				cfg.modal = this.get('Modal') || '';
-					cfg.modal = this.modal;
 
 				cfg.am = this.get('AssetManager') || '';
 
@@ -267,7 +247,7 @@ define([
 				this.cmp = new DomComponents(cfg);
 				this.Components = this.cmp;
 
-				if(this.stm.isAutosave()){
+				if(this.get('StorageManager').isAutosave()){
 					// Call UndoManager here so it's possible to call it also for children inside
 					this.initUndoManager();
 					this.initChildrenComp(this.cmp.getWrapper());
@@ -295,61 +275,6 @@ define([
 				this.set('Canvas', this.cv);
 			},
 
-			/**
-			 * Initialize rich text editor
-			 * @private
-			 * */
-			initRichTextEditor: function() {
-				var cfg = this.config.rte,
-				rteStylePfx	= cfg.stylePrefix || 'rte-';
-				cfg.pStylePrefix	= this.config.stylePrefix;
-				cfg.stylePrefix	= cfg.pStylePrefix + rteStylePfx;
-				cfg.em = this;
-				this.rte = new RichTextEditor(cfg);
-				this.set('RichTextEditor', this.rte);
-			},
-
-			/**
-			 * Initialize storage
-			 * @private
-			 * */
-			initStorage: function() {
-				this.stm = new StorageManager(this.config.storage || this.config.storageManager);
-				this.StorageManager = this.stm;
-				this.stm.loadDefaultProviders().setCurrent(this.stm.getConfig().type);
-				this.set('StorageManager', this.stm);
-			},
-
-			/**
-			 * Initialize dialog
-			 * @private
-			 * */
-			initModal: function() {
-				var cfg = this.config.modal,
-				pfx = cfg.stylePrefix || 'mdl-';
-				cfg.stylePrefix = this.config.stylePrefix + pfx;
-				this.modal = new ModalDialog(cfg);
-				this.on('loaded', function(){
-					this.modal.render().appendTo(this.config.el || 'body');
-				}, this);
-				this.Dialog = this.modal;
-				this.set('Modal', this.modal);
-			},
-
-			/**
-			 * Initialize Code Manager
-			 * @private
-			 * */
-			initCodeManager: function() {
-				var cfg = this.config.codeManager,
-				pfx = cfg.stylePrefix || 'cm-';
-				cfg.stylePrefix = this.config.stylePrefix + pfx;
-				this.cm = new CodeManager(cfg);
-				this.CodeManager = this.cm;
-				this.cm.loadDefaultGenerators().loadDefaultViewers();
-				this.set('CodeManager', this.cm);
-			},
-
 			/**
 			 * Initialize Commands
 			 * @private
@@ -368,22 +293,6 @@ define([
 				this.set('Commands', this.com);
 			},
 
-			/**
-			 * Initialize Panels
-			 * @private
-			 * */
-			initPanels: function() {
-				var cfg = this.config.panels,
-					pfx = cfg.stylePrefix || 'pn-';
-				cfg.pStylePrefix = this.config.stylePrefix;
-				cfg.stylePrefix = this.config.stylePrefix + pfx;
-				cfg.em = this;
-				this.pn = new Panels(cfg);
-				//this.pn.addPanel({ id: 'views-container'});
-				this.Panels = this.pn;
-				this.set('Panels', this.pn);
-			},
-
 			/**
 			 * Initialize Undo manager
 			 * @private
@@ -445,7 +354,8 @@ define([
 				var updatedCount = this.get('changesCount') + 1,
 						avSt	= opt ? opt.avoidStore : 0;
 				this.set('changesCount', updatedCount);
-				if(this.stm.isAutosave() && updatedCount < this.stm.getStepsBeforeSave()){
+				var stm = this.get('StorageManager');
+				if(stm.isAutosave() && updatedCount < stm.getStepsBeforeSave()){
 					return;
 				}
 
@@ -510,7 +420,7 @@ define([
 						comps	=  JSON.parse(result.style);
 					}catch(err){}
 				}else if(result.css)
-					comps = this.Parser.parseCss(result.css);
+					comps = this.get('Parser').parseCss(result.css);
 
 				return comps;
 			},
@@ -610,8 +520,8 @@ define([
 			 * @private
 			 */
 			getComponents: function(){
-				var cmp = this.Components;
+				var cmp = this.get('Components');
-				var cm = this.CodeManager;
+				var cm = this.get('CodeManager');
 
 				if(!cmp || !cm)
 					return;
@@ -649,8 +559,8 @@ define([
 			 * @private
 			 */
 			getHtml: function(){
-				var cmp = this.Components;
+				var cmp = this.get('Components');
-				var cm = this.CodeManager;
+				var cm = this.get('CodeManager');
 
 				if(!cmp || !cm)
 					return;
@@ -665,9 +575,9 @@ define([
 			 * @private
 			 */
 			getCss: function(){
-				var cmp = this.Components;
+				var cmp = this.get('Components');
-				var cm = this.CodeManager;
+				var cm = this.get('CodeManager');
-				var cssc = this.CssComposer;
+				var cssc = this.get('CssComposer');
 
 				if(!cmp || !cm || !cssc)
 					return;
@@ -682,7 +592,7 @@ define([
 			 * @private
 			 */
 			store: function(){
-				var sm = this.StorageManager;
+				var sm = this.get('StorageManager');
 
 				if(!sm)
 					return;
@@ -739,7 +649,7 @@ define([
 				if(this.cacheLoad && !f)
 					return this.cacheLoad;
 
-				var sm = this.StorageManager;
+				var sm = this.get('StorageManager');
 				var load = [];
 
 				if(!sm)

src/grapesjs/config/config.js

@@ -26,7 +26,7 @@ define(function () {
     noticeOnUnload: true,
 
     // Storage Manager
-    storage: {},
+    storageManager: {},
 
     // Array of plugins to init
     plugins: [],

src/modal_dialog/main.js

@@ -1,55 +1,78 @@
+/**
+ * @class Modal
+ * */
 define(function(require) {
-	/**
+	return function() {
-	 * @class 	Modal
+		var c = {},
-	 * @param 	{Object} Configurations
+		defaults = require('./config/config'),
-	 *
+		ModalM = require('./model/Modal'),
-	 * @return	{Object}
+		ModalView	= require('./view/ModalView');
- 	 * */
+		var model, modal;
-	function Modal(config)
-	{
-		var c			= config || {},
-			defaults	= require('./config/config'),
-			ModalM		= require('./model/Modal'),
-			ModalView	= require('./view/ModalView');
 
-		for (var name in defaults) {
+	  return {
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
 
-		this.model		= new ModalM(c);
+	  	/**
-		var obj			= {
+       * Name of the module
-				model	: this.model,
+       * @type {String}
-		    	config	: c,
+       * @private
-		};
+       */
+      name: 'Modal',
+
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
+
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+       */
+      init: function(config) {
+        c = config || {};
+        for (var name in defaults) {
+					if (!(name in c))
+						c[name] = defaults[name];
+				}
 
-	    this.modal 		= new ModalView(obj);
+				var ppfx = c.pStylePrefix;
-	}
+				if(ppfx)
+					c.stylePrefix = ppfx + c.stylePrefix;
 
-	Modal.prototype	= {
+				model = new ModalM(c);
+			  modal = new ModalView({
+					model: model,
+				  config: c,
+				});
+				c.em.on('loaded', function(){
+					this.render().appendTo(c.em.config.el || 'body');
+				}, this);
+        return this;
+      },
 
-			getModel	: function(){
+			getModel: function(){
-				return	this.model;
+				return model;
 			},
 
-			render		: function(){
+			render: function(){
-				return	this.modal.render().$el;
+				return modal.render().$el;
 			},
 
-			show		: function(){
+			show: function(){
-				return this.modal.show();
+				return modal.show();
 			},
 
-			hide		: function(){
+			hide: function(){
-				return this.modal.hide();
+				return modal.hide();
 			},
 
-			setTitle	: function(v){
+			setTitle: function(v){
-				return this.modal.setTitle(v);
+				return modal.setTitle(v);
 			},
 
-			setContent	: function(v){
+			setContent: function(v){
-				return this.modal.setContent(v);
+				return modal.setContent(v);
 			},
 
 			/**
@@ -57,9 +80,8 @@ define(function(require) {
 			 * @return {HTMLElement}
 			 */
 			getContentEl: function(){
-				return this.modal.getContent();
+				return modal.getContent();
 			}
+		};
 	};
-
-	return Modal;
 });

src/panels/main.js

@@ -46,30 +46,53 @@
  */
 define(function(require) {
 
-	var Panels = function(config){
+	return function(){
+		var c = {},
+		defaults = require('./config/config'),
+		Panel = require('./model/Panel'),
+		Panels = require('./model/Panels'),
+		PanelView = require('./view/PanelView'),
+		PanelsView = require('./view/PanelsView');
+		var panels, PanelsViewObj;
 
-		var c = config || {},
+	  return {
-			defaults = require('./config/config'),
-			Panel = require('./model/Panel'),
-			Panels = require('./model/Panels'),
-			PanelView = require('./view/PanelView'),
-			PanelsView = require('./view/PanelsView');
-
-	  // Set default options
-		for (var name in defaults) {
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
 
-		var panels = new Panels(c.defaults);
+	  	/**
-		var obj = {
+       * Name of the module
-			collection : panels,
+       * @type {String}
-			config : c,
+       * @private
-		};
+       */
+      name: 'Panels',
+
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
+
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+       */
+      init: function(config) {
+        c = config || {};
+        for (var name in defaults) {
+					if (!(name in c))
+						c[name] = defaults[name];
+				}
 
-	  var PanelsViewObj = new PanelsView(obj);
+				var ppfx = c.pStylePrefix;
+				if(ppfx)
+					c.stylePrefix = ppfx + c.stylePrefix;
 
-	  return {
+				panels = new Panels(c.defaults);
+			  PanelsViewObj = new PanelsView({
+					collection : panels,
+					config : c,
+				});
+        return this;
+      },
 
 	  	/**
 	  	 * Returns the collection of panels
@@ -175,6 +198,4 @@ define(function(require) {
 
 	  };
 	};
-
-	return Panels;
 });

src/parser/main.js

@@ -1,22 +1,53 @@
 define(function(require) {
 
-  var Parser = function(config) {
+  var Parser = function() {
-
+    var c = {},
-    var c = config || {},
     defaults = require('./config/config'),
     parserCss = require('./model/ParserCss'),
     parserHtml = require('./model/ParserHtml');
+    var pHtml, pCss;
 
-    // Set default options
+    return {
-    for (var name in defaults) {
-      if (!(name in c))
-        c[name] = defaults[name];
-    }
 
-    var pHtml = new parserHtml(c);
+      /**
-    var pCss = new parserCss(c);
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'Parser',
 
-    return {
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
+
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+       * @param {Array<Object>} [config.blocks=[]] Default blocks
+       * @return {this}
+       * @example
+       * ...
+       * {
+       *     blocks: [
+       *      {id:'h1-block' label: 'Heading', content:'<h1>...</h1>'},
+       *      ...
+       *    ],
+       * }
+       * ...
+       */
+      init: function(config) {
+        c = config || {};
+        for (var name in defaults) {
+          if (!(name in c))
+            c[name] = defaults[name];
+        }
+        pHtml = new parserHtml(c);
+        pCss = new parserCss(c);
+        return this;
+      },
 
       /**
        * Parse HTML string and return valid model

src/rich_text_editor/main.js

@@ -1,25 +1,52 @@
 define(function(require) {
 
-	return function(config) {
+	return function() {
-		var c = config || {},
+		var c = {},
-			defaults = require('./config/config'),
+		defaults = require('./config/config'),
-			rte = require('./view/TextEditorView'),
+		rte = require('./view/TextEditorView'),
-			CommandButtons = require('./model/CommandButtons'),
+		CommandButtons = require('./model/CommandButtons'),
-			CommandButtonsView = require('./view/CommandButtonsView');
+		CommandButtonsView = require('./view/CommandButtonsView');
-
+		var tlbPfx, toolbar;
-		for (var name in defaults) {
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
-
-		var tlbPfx = c.stylePrefix;
-		var toolbar = new CommandButtonsView({
-			collection: new CommandButtons(c.commands),
-			config: c,
-		});
 
 		return {
 
+			/**
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'rte',
+
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
+
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+       */
+      init: function(config) {
+        c = config || {};
+        for (var name in defaults) {
+					if (!(name in c))
+						c[name] = defaults[name];
+				}
+
+				var ppfx = c.pStylePrefix;
+				if(ppfx)
+					c.stylePrefix = ppfx + c.stylePrefix;
+
+				tlbPfx = c.stylePrefix;
+				toolbar = new CommandButtonsView({
+					collection: new CommandButtons(c.commands),
+					config: c,
+				});
+        return this;
+      },
+
 			/**
        * Triggered when the offset of the editro is changed
        * @private
@@ -42,6 +69,7 @@ define(function(require) {
 			 * @param {View} view
 			 * */
 			attach: function(view){
+				console.log('attatch');
 				view.$el.wysiwyg({}).focus();
 				this.lastEl = view.el;
 

src/storage_manager/main.js

@@ -19,45 +19,73 @@
  * ```
  *
  * @module StorageManager
- * @param {Object} config Configurations
- * @param {string} [config.id='gjs-'] The prefix for the fields, useful to differentiate storing/loading
- * with multiple editors on the same page. For example, in local storage, the item of HTML will be saved like 'gjs-html'
- * @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.type='local'] Default storage type. Available: 'local' | 'remote' | ''(do not store)
- * @example
- * ...
- * storageManager: {
- *  	autosave: false,
- *  	type: 'remote',
- * }
- * ...
  */
 define(function(require) {
 
-	var StorageManager = function(config) {
+	var StorageManager = function() {
-
+		var c = {},
-		var c = config || {},
 		defaults = require('./config/config'),
 		LocalStorage = require('./model/LocalStorage'),
 		RemoteStorage = require('./model/RemoteStorage');
 
-		for (var name in defaults){
-			if (!(name in c))
-				c[name] = defaults[name];
-		}
-
 		var storages = {};
 		var defaultStorages = {};
 
-		defaultStorages.remote	= new RemoteStorage(c);
-		defaultStorages.local = new LocalStorage(c);
-		c.currentStorage = c.type;
-
 		return {
 
 			/**
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'StorageManager',
+
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
+
+      /**
+       * Initialize module. Automatically called with a new instance of the editor
+       * @param {Object} config Configurations
+			 * @param {string} [config.id='gjs-'] The prefix for the fields, useful to differentiate storing/loading
+			 * with multiple editors on the same page. For example, in local storage, the item of HTML will be saved like 'gjs-html'
+			 * @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.type='local'] Default storage type. Available: 'local' | 'remote' | ''(do not store)
+			 * @example
+			 * ...
+			 * {
+			 *  	autosave: false,
+			 *  	type: 'remote',
+			 * }
+			 * ...
+       */
+      init: function(config) {
+        c = config || {};
+        for (var name in defaults){
+					if (!(name in c))
+						c[name] = defaults[name];
+				}
+
+				defaultStorages.remote	= new RemoteStorage(c);
+				defaultStorages.local = new LocalStorage(c);
+				c.currentStorage = c.type;
+        return this;
+      },
+
+      /**
+       * Callback executed after the module is loaded
+       * @private
+       */
+      onLoad: function(){
+      	this.loadDefaultProviders().setCurrent(c.type);
+      },
+
+			/**
 			 * Checks if autosave is enabled
 			 * @return {Boolean}
 			 * */

src/utils/main.js

@@ -5,6 +5,27 @@ define(function(require) {
     var Sorter = require('./Sorter');
 
     return {
+      /**
+       * Name of the module
+       * @type {String}
+       * @private
+       */
+      name: 'Utils',
+
+      /**
+       * Indicates if module is public
+       * @type {Boolean}
+       * @private
+       */
+      public: true,
+
+      /**
+       * Initialize module
+       */
+      init: function() {
+        return this;
+      },
+
       Sorter: Sorter,
     };
   };

test/specs/asset_manager/main.js

@@ -101,7 +101,7 @@ define(['StorageManager','AssetManager',
 					var storageManager;
 
 					beforeEach(function () {
-	      		storageManager = new StorageManager({
+	      		storageManager = new StorageManager().init({
 	      			autoload: 0,
 	      			type: storageId
 	      		})

test/specs/css_composer/e2e/CssComposer.js

@@ -14,7 +14,7 @@ define(['GrapesJS'],function(Grapes) {
               Grapes = Grapes;
               this.gjs = Grapes.init({
                 stylePrefix: '',
-                storage: { autoload: 0, type:'none' },
+                storageManager: { autoload: 0, type:'none' },
                 assetManager: { storageType: 'none', },
                 container: 'csscomposer-fixture',
               });
@@ -44,7 +44,7 @@ define(['GrapesJS'],function(Grapes) {
             it('Rules are correctly imported from default property', function() {
               var gj = new Grapes.init({
                 stylePrefix: '',
-                storage: { autoload: 0, type:'none' },
+                storageManager: { autoload: 0, type:'none' },
                 assetManager: { storageType: 'none', },
                 cssComposer: { defaults: this.rulesSet},
                 container: 'csscomposer-fixture',

test/specs/device_manager/main.js

@@ -16,7 +16,7 @@ define([ 'DeviceManager',
         beforeEach(function () {
           testNameDevice = 'Tablet';
           testWidthDevice = '100px';
-          obj = new DeviceManager();
+          obj = new DeviceManager().init();
         });
 
         afterEach(function () {

test/specs/grapesjs/main.js

@@ -34,7 +34,7 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         documentEl = '<style>' + cssString + '</style>' + htmlString;
         config = {
           container: '#' + editorName,
-          storage: {
+          storageManager: {
             autoload: 0,
             type:'none'
           },
@@ -134,7 +134,7 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         obj.plugins.add(pluginName, function(edt){
           edt.StorageManager.add(storageId, storageMock);
         });
-        config.storage.type = storageId;
+        config.storageManager.type = storageId;
         config.plugins = [pluginName];
         var editor = obj.init(config);
         editor.setComponents(htmlString);

test/specs/panels/main.js

@@ -26,7 +26,7 @@ define([
 				var obj;
 
 				beforeEach(function () {
-					obj = new Panels();
+					obj = new Panels().init();
 				});
 
 				afterEach(function () {

test/specs/selector_manager/e2e/ClassManager.js

@@ -33,7 +33,7 @@ define(['GrapesJS', 'SelectorManager/model/Selectors', 'SelectorManager/view/Cla
             beforeEach(function () {
               this.gjs = GrapesJS.init({
                 stylePrefix: '',
-                storage: { autoload: 0, type:'none' },
+                storageManager: { autoload: 0, type:'none' },
                 assetManager: {
                   storageType: 'none',
                 },

test/specs/storage_manager/main.js

@@ -16,7 +16,7 @@ define([
         var obj;
 
         beforeEach(function () {
-          obj = new StorageManager();
+          obj = new StorageManager().init();
         });
 
         afterEach(function () {
@@ -93,7 +93,7 @@ define([
 
           beforeEach(function () {
             storeValue = [];
-            obj = new StorageManager({
+            obj = new StorageManager().init({
               type: storageId,
             });
             obj.add(storageId, storage);