Fix editor instance

src/commands/view/CommandAbstract.js

@@ -40,9 +40,7 @@ define(['backbone'],
 			 * @param	{Object}	sender	Button sender
 			 * @private
 			 * */
-			run: function(em, sender) {
+			run: function(em, sender) {},
-				console.warn("No run method found");
-			},
 
 			/**
 			 * Method that stop command
@@ -50,9 +48,7 @@ define(['backbone'],
 			 * @param	{Object}	sender	Button sender
 			 * @private
 			 * */
-			stop: function(em, sender) {
+			stop: function(em, sender) {}
-				console.warn("No stop method found");
-			}
 
 		});
 	});

src/commands/view/OpenStyleManager.js

@@ -9,12 +9,12 @@ define(['StyleManager'], function(StyleManager) {
 			{
 				this.sender	= sender;
 				if(!this.$cn){
-					var config		= em.get('Config'),
+					var config		= em.getConfig(),
-							panels		= em.get('Panels'),
+							panels		= em.Panels,
 							pfx				= config.styleManager.stylePrefix || 'sm-';
 
 					config.styleManager.stylePrefix = config.stylePrefix + pfx;
-					config.styleManager.target		= em;
+					config.styleManager.target = em.editor;
 
 					// Main container
 					this.$cn = $('<div/>');
@@ -23,7 +23,7 @@ define(['StyleManager'], function(StyleManager) {
 					this.$cn.append(this.$cn2);
 
 					// Class Manager container
-					this.clm = em.get('ClassManager');
+					this.clm = em.ClassManager;
 					if(this.clm){
 						this.$clm = new this.clm.ClassTagsView({
 							collection: new this.clm.ClassTags([]),
@@ -54,7 +54,7 @@ define(['StyleManager'], function(StyleManager) {
 					// Add all containers to the panel
 					this.panel.set('appendContent', this.$cn).trigger('change:appendContent');
 
-					this.target		= em;
+					this.target = em.editor;
 					this.listenTo( this.target ,'change:selectedComponent', this.toggleSm);
 				}
 				this.toggleSm();

src/editor/main.js

@@ -8,6 +8,8 @@
  * * [getStyle](#getstyle)
  * * [setStyle](#setstyle)
  * * [getSelected](#getselected)
+ * * [runCommand](#runcommand)
+ * * [stopCommand](#stopcommand)
  * * [store](#store)
  * * [load](#load)
  * * [render](#render)
@@ -27,7 +29,7 @@ define(function (require){
 		var Editor = function(config) {
 			var c = config || {},
 			defaults = require('./config/config'),
-			Editor = require('./model/Editor'),
+			EditorModel = require('./model/Editor'),
 			EditorView = require('./view/EditorView');
 
 			for (var name in defaults) {
@@ -35,9 +37,9 @@ define(function (require){
 					c[name] = defaults[name];
 			}
 
-			var editorModel = new Editor(c);
+			var em = new EditorModel(c);
 			var obj = {
-					model	: editorModel,
+					model	: em,
 			    config	: c,
 			};
 
@@ -45,62 +47,77 @@ define(function (require){
 
 		  return {
 
-		  	editor: editorModel,
+		  	editor: em,
 
 		  	/**
 				 * @property {DomComponents}
 				 */
-				DomComponents: editorModel.get('Components'),
+				DomComponents: em.get('Components'),
 
 				/**
 				 * @property {CssComposer}
 				 */
-				CssComposer: editorModel.get('CssComposer'),
+				CssComposer: em.get('CssComposer'),
 
 				/**
 				 * @property {StorageManager}
 				 */
-				StorageManager: editorModel.get('StorageManager'),
+				StorageManager: em.get('StorageManager'),
 
 				/**
 				 * @property {AssetManager}
 				 */
-				AssetManager: editorModel.get('AssetManager'),
+				AssetManager: em.get('AssetManager'),
 
 				/**
 				 * @property {ClassManager}
 				 */
-				ClassManager: editorModel.get('ClassManager'),
+				ClassManager: em.get('ClassManager'),
 
 				/**
 				 * @property {CodeManager}
 				 */
-				CodeManager: editorModel.get('CodeManager'),
+				CodeManager: em.get('CodeManager'),
 
 				/**
 				 * @property {Commands}
 				 */
-				Commands: editorModel.get('Commands'),
+				Commands: em.get('Commands'),
 
 				/**
 				 * @property {Dialog}
 				 */
-				Dialog: editorModel.get('Modal'),
+				Dialog: em.get('Modal'),
 
 				/**
 				 * @property {Panels}
 				 */
-				Panels: editorModel.get('Panels'),
+				Panels: em.get('Panels'),
 
 				/**
 				 * @property {StyleManager}
 				 */
-				StyleManager: editorModel.get('StyleManager'),
+				StyleManager: em.get('StyleManager'),
 
 				/**
 				 * @property {StyleManager}
 				 */
-				Canvas: editorModel.get('Canvas'),
+				Canvas: em.get('Canvas'),
+
+				/**
+				 * @property {Utils}
+				 */
+				Utils: em.get('Utils'),
+
+				/**
+				 * Initialize editor model
+				 * @return {this}
+				 * @private
+				 */
+				init: function(){
+					em.init(this);
+					return this;
+				},
 
 				/**
 				 * Returns configuration object
@@ -115,7 +132,7 @@ define(function (require){
 				 * @return {string} HTML string
 				 */
 				getHtml: function(){
-					return editorModel.getHtml();
+					return em.getHtml();
 				},
 
 				/**
@@ -123,7 +140,7 @@ define(function (require){
 				 * @return {string} CSS string
 				 */
 				getCss: function(){
-					return editorModel.getCss();
+					return em.getCss();
 				},
 
 				/**
@@ -131,7 +148,7 @@ define(function (require){
 				 * @return {Object}
 				 */
 				getComponents: function(){
-					return editorModel.get('Components').getComponents();
+					return em.get('Components').getComponents();
 				},
 
 				/**
@@ -148,7 +165,7 @@ define(function (require){
 				 * });
 				 */
 				setComponents: function(components){
-					editorModel.setComponents(components);
+					em.setComponents(components);
 					return this;
 				},
 
@@ -157,7 +174,7 @@ define(function (require){
 				 * @return {Object}
 				 */
 				getStyle: function(){
-					return editorModel.get('CssComposer').getRules();
+					return em.get('CssComposer').getRules();
 				},
 
 				/**
@@ -173,7 +190,7 @@ define(function (require){
 				 * });
 				 */
 				setStyle: function(style){
-					editorModel.setStyle(style);
+					em.setStyle(style);
 					return this;
 				},
 
@@ -182,7 +199,7 @@ define(function (require){
 				 * @return {grapesjs.Component}
 				 */
 				getSelected: function(){
-					return editorModel.getSelected();
+					return em.getSelected();
 				},
 
 				/**
@@ -193,21 +210,21 @@ define(function (require){
 				 * editor.runCommand('myCommand', {someValue: 1});
 				 */
 				runCommand: function(id, options) {
-					var command = editorModel.get('Commands').get(id);
+					var command = em.get('Commands').get(id);
 
 					if(command)
 						command.run(this, this, options);
 				},
 
 				/**
-				 * Stop command executed before
+				 * Stop the command if stop method was provided
 				 * @param {string} id Command ID
 				 * @param {Object} options Custom options
 				 * @example
 				 * editor.stopCommand('myCommand', {someValue: 1});
 				 */
 				stopCommand: function(id, options) {
-					var command = editorModel.get('Commands').get(id);
+					var command = em.get('Commands').get(id);
 
 					if(command)
 						command.stop(this, this, options);
@@ -218,7 +235,7 @@ define(function (require){
 				 * @return {Object} Stored data
 				 */
 				store: function(){
-					return editorModel.store();
+					return em.store();
 				},
 
 				/**
@@ -226,7 +243,7 @@ define(function (require){
 				 * @return {Object} Stored data
 				 */
 				load: function(){
-					return editorModel.load();
+					return em.load();
 				},
 
 				/**

src/editor/model/Editor.js

@@ -43,7 +43,7 @@ define([
 			},
 
 			initialize: function(c) {
-				this.config = _.clone(c);
+				this.config = c;
 				this.pfx = this.config.storagePrefix;
 				this.compName	= this.pfx + 'components' + this.config.id;
 				this.rulesName	= this.pfx + 'rules' + this.config.id;
@@ -70,6 +70,15 @@ define([
 				this.on('change:selectedComponent', this.componentSelected, this);
 			},
 
+			/**
+			 * Initialize editor model and set editor instance
+			 * @param {Editor} editor Editor instance
+			 * @return {this}
+			 */
+			init: function(editor){
+				this.set('Editor', editor);
+			},
+
 			/**
 			 * Initialize Parser
 			 * */

src/grapesjs/main.js

@@ -46,7 +46,7 @@ define(function (require) {
           throw new Error("'container' is required");
 
         c.el = document.querySelector(els);
-        var editor = new Editor(c);
+        var editor = new Editor(c).init();
 
         // Execute all plugins
         var plugs = plugins.getAll();

src/panels/view/ButtonView.js

@@ -141,6 +141,7 @@ function(Backbone, require) {
 		 * */
 		updateActive: function(){
 			var command	= null;
+			var editor = this.em && this.em.get ? this.em.get('Editor') : null;
 
 			if(this.commands)
 				command	= this.commands.get(this.model.get('command'));
@@ -154,7 +155,7 @@ function(Backbone, require) {
 					this.parentM.set('active', true, { silent: true }).trigger('checkActive');
 
 				if(command)
-					command.run(this.em, this.model);
+					command.run(editor, this.model);
 			}else{
 				this.$el.removeClass(this.activeCls);
 
@@ -164,7 +165,7 @@ function(Backbone, require) {
 					this.parentM.set('active', false, { silent: true }).trigger('checkActive');
 
 				if(command)
-					command.stop(this.em, this.model);
+					command.stop(editor, this.model);
 			}
 		},
 

test/specs/grapesjs/main.js

@@ -148,8 +148,8 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         editor.testVal = '';
         editor.setComponents(htmlString);
         editor.Commands.add('test-command', {
-          run: function(editor, caller, opts){
+          run: function(ed, caller, opts){
-            editor.testVal = editor.getHtml() + opts.val;
+            ed.testVal = ed.getHtml() + opts.val;
           },
         });
         editor.runCommand('test-command', {val: 5});
@@ -161,8 +161,8 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         editor.testVal = '';
         editor.setComponents(htmlString);
         editor.Commands.add('test-command', {
-          stop: function(editor, caller, opts){
+          stop: function(ed, caller, opts){
-            editor.testVal = editor.getHtml() + opts.val;
+            ed.testVal = ed.getHtml() + opts.val;
           },
         });
         editor.stopCommand('test-command', {val: 5});

test/specs/panels/e2e/PanelsE2e.js

@@ -0,0 +1,74 @@
+
+define(['GrapesJS'],
+  function(GrapesJS) {
+
+    return {
+      run : function(){
+
+          describe('E2E tests', function() {
+
+            var fixtures;
+            var fixture;
+            var obj;
+            var editorName = 'panel-fixture';
+
+            before(function () {
+              fixtures  = $("#fixtures");
+            });
+
+            beforeEach(function () {
+              obj = GrapesJS;
+              config = {
+                container: '#' + editorName,
+                storage: { autoload: 0, type:'none' },
+              };
+              fixture   = $('<div id="' + editorName + '"></div>');
+              fixture.empty().appendTo(fixtures);
+            });
+
+            afterEach(function () {
+              delete obj;
+              delete config;
+              fixture.remove();
+            });
+
+            after(function () {
+              fixture.remove();
+            });
+
+            it('Command is correctly executed on button click', function() {
+              var commandId = 'command-test';
+              config.commands = {
+                defaults: [{
+                  id: commandId,
+                  run: function(ed, caller){
+                    ed.testValue = 'testValue';
+                    caller.set('active', false);
+                  }
+                }]
+              };
+              config.panels = {
+                defaults  : [{
+                  id      : 'toolbar-test',
+                  buttons : [{
+                      id          : 'button-test',
+                      className   : 'fa fa-smile-o',
+                      command     : commandId,
+                  }],
+                }],
+              };
+              var editor = obj.init(config);
+              editor.testValue = '';
+              var button = editor.Panels.getButton('toolbar-test', 'button-test');
+              button.set('active', 1);
+              editor.testValue.should.equal('testValue');
+              button.get('active').should.equal(false);
+            });
+
+        });
+
+      }
+
+    };
+
+});

test/specs/panels/main.js

@@ -6,7 +6,8 @@ define([
 				modulePath + '/view/PanelView',
 				modulePath + '/view/PanelsView',
 				modulePath + '/view/ButtonView',
-				modulePath + '/view/ButtonsView'
+				modulePath + '/view/ButtonsView',
+				modulePath + '/e2e/PanelsE2e'
 				 ],
 	function(
 					Panels,
@@ -14,7 +15,8 @@ define([
 					PanelView,
 					PanelsView,
 					ButtonView,
-					ButtonsView
+					ButtonsView,
+					e2e
 					) {
 
 		describe('Panels', function() {
@@ -111,5 +113,6 @@ define([
 			PanelsView.run();
 			ButtonView.run();
 			ButtonsView.run();
+			e2e.run();
 		});
 });