From fe137a08511dd84585b6809ebc96997ab09bbdeb Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 9 Jun 2016 15:27:47 +0200
Subject: [PATCH] Add setStyle method to the editor

---
 src/editor/main.js          | 20 ++++++++++++++++++--
 src/editor/model/Editor.js  |  5 ++++-
 test/specs/grapesjs/main.js | 20 ++++++++++++++++++++
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/editor/main.js b/src/editor/main.js
index 8e613c5b3..125afbe89 100644
--- a/src/editor/main.js
+++ b/src/editor/main.js
@@ -31,11 +31,13 @@ define(function (require){
 
 		  	editor: editorModel,
 
+		  	/**
+				 * @property {DomComponents}
+				 */
 				DomComponents: DomComponents,
 
 				/**
 				 * @property {CssComposer}
-				 * @type {[type]}
 				 */
 				CssComposer: CssComposer,
 
@@ -81,6 +83,16 @@ define(function (require){
 					return editorModel.get('CssComposer').getRules();
 				},
 
+				/**
+				 * Set style inside editor's canvas. This method overrides actual style
+				 * @param {Array<Object>|Object|string} style CSS string or style model
+				 * @return {this}
+				 */
+				setStyle: function(style){
+					editorModel.setStyle(style);
+					return this;
+				},
+
 				/**
 				 * Returns selected component, if there is one
 				 * @return {grapesjs.Component}
@@ -89,8 +101,12 @@ define(function (require){
 					return editorModel.getSelected();
 				},
 
+				/**
+				 * Render editor
+				 * @return {HTMLElement}
+				 */
 				render: function() {
-					return	editorView.render().$el;
+					return	editorView.render().el;
 				},
 
 			};
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 266ecc7aa..53f6eb4c6 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -573,7 +573,10 @@ define([
 			 * @return {this}
 			 */
 			setStyle: function(style){
-				//return this.CssComposer.setStyle(style);
+				var rules = this.CssComposer.getRules();
+				for(var i = 0, len = rules.length; i < len; i++)
+					rules.pop();
+				rules.add(style);
 				return this;
 			},
 
diff --git a/test/specs/grapesjs/main.js b/test/specs/grapesjs/main.js
index 784fef99e..5e9333693 100644
--- a/test/specs/grapesjs/main.js
+++ b/test/specs/grapesjs/main.js
@@ -95,6 +95,26 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         editor.getComponents().length.should.equal(3);
       });
 
+      it('Set style as CSS', function() {
+        var editor = obj.init(config);
+        editor.setStyle(cssString);
+        editor.setStyle(cssString);
+        var styles = editor.getStyle();
+        styles.length.should.equal(2);
+        styles.at(1).get('selectors').at(0).get('name').should.equal('test3');
+      });
+
+      it('Set style as as array of objects', function() {
+        var editor = obj.init(config);
+        editor.setStyle([
+          {selectors: ['test4']},
+          {selectors: ['test5']}
+        ]);
+        var styles = editor.getStyle();
+        styles.length.should.equal(2);
+        styles.at(1).get('selectors').at(0).get('name').should.equal('test5');
+      });
+
     });
 
   });