Update JSDocs and README

README.md

@@ -12,7 +12,7 @@ Mainly GrapesJS was designed to be used inside a [CMS] to speed up a creation of
 <p align="center"><img src="http://grapesjs.com/img/gjs-concept.png" alt="GrapesJS - Style Manager" height="400" align="center"/></p>
 <br/>
 
-Generally any 'template system', that you find in various applications like CMS, is composed by the **structure** (HTML), **style** (CSS) and **variables**, which are then replaced with other templates and contents on server-side and rendered on client.
+Generally any 'template system', that you'd find in various applications like CMS, is composed by the **structure** (HTML), **style** (CSS) and **variables**, which are then replaced with other templates and contents on server-side and rendered on client.
 
 This demo shows an example of what is possible to achieve: http://grapesjs.com/demo.html
 
@@ -116,8 +116,7 @@ You could also grab the content directly from the element with `fromElement` pro
 </script>
 ```
 
-Unfortunately with the configuration above you wouldn't see a lot. This because GrapesJS itself is empty, adding panels, buttons and other stuff will be your job (actually it's not empty but you need buttons to show them up).
+For more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html
-The section below will explain some basic configurations but for a more practical example I suggest to look up the code inside this demo: http://grapesjs.com/demo.html
 
 
 ## Configuration

src/editor/main.js

@@ -23,6 +23,26 @@
  *
  * @module Editor
  * @param {Object} config Configurations
+ * @param {string} config.container='' Selector for the editor container, eg. '#myEditor'
+ * @param {string|Array<Object>} [config.components=''] HTML string or object of components
+ * @param {string|Array<Object>} [config.style=''] CSS string or object of rules
+ * @param {Boolean} [config.fromElement=false] If true, will fetch HTML and CSS from selected container
+ * @param {Boolean} [config.copyPaste=true] Enable/Disable the possibility to copy(ctrl + c) & paste(ctrl + v) components
+ * @param {Boolean} [config.undoManager=true] Enable/Disable undo manager
+ * @param {Boolean} [config.autorender=true] If true renders editor on init
+ * @param {string} [config.height='900px'] Height for the editor container
+ * @param {string} [config.width='100%'] Width for the editor container
+ * @param {Object} [config.storage={}] Storage manager configuration, see the relative documentation
+ * @param {Object} [config.styleManager={}] Style manager configuration, see the relative documentation
+ * @param {Object} [config.commands={}] Commands configuration, see the relative documentation
+ * @param {Object} [config.domComponents={}] Components configuration, see the relative documentation
+ * @param {Object} [config.panels={}] Panels configuration, see the relative documentation
+ * @example
+ * var editor = grapesjs.init({
+ * 	container : '#gjs',
+ * 	components: '<div class="txt-red">Hello world!</div>',
+ * 	style: '.txt-red{color: red}',
+ * });
  */
 define(function (require){
 

src/editor/model/Editor.js

@@ -77,6 +77,7 @@ define([
 			 * Initialize editor model and set editor instance
 			 * @param {Editor} editor Editor instance
 			 * @return {this}
+			 * @private
 			 */
 			init: function(editor){
 				this.set('Editor', editor);
@@ -84,6 +85,7 @@ define([
 
 			/**
 			 * Initialize Parser
+			 * @private
 			 * */
 			initParser: function() {
 				this.Parser = new Parser();
@@ -143,6 +145,7 @@ define([
 			/**
 			 * Listen for new rules
 			 * @param {Object} collection
+			 * @private
 			 */
 			listenRules: function(collection) {
 				this.stopListening(collection, 'add remove', this.listenRule);
@@ -155,6 +158,7 @@ define([
 			/**
 			 * Listen for rule changes
 			 * @param {Object} model
+			 * @private
 			 */
 			listenRule: function(model) {
 				this.stopListening(model, 'change:style', this.ruleUpdated);
@@ -166,6 +170,7 @@ define([
 			 * @param	{Object}	model
 			 * @param	{Mixed}		val	Value
 			 * @param	{Object}	opt	Options
+			 * @private
 			 * */
 			ruleUpdated: function(model, val, opt) {
 				var count = this.get('changesCount') + 1,
@@ -413,6 +418,7 @@ define([
 			 * @param	{Object}	model
 			 * @param	{Mixed}		val	Value
 			 * @param	{Object}	opt	Options
+			 * @private
 			 * */
 			componentsUpdated: function(model, val, opt){
 				var updatedCount = this.get('changesCount') + 1,
@@ -433,7 +439,7 @@ define([
 			 * @param 	{Object} 	Model
 			 * @param 	{Mixed} 	New value
 			 * @param 	{Object} 	Options
-			 *
+			 * @private
 			 * */
 			componentSelected: function(model, val, options){
 				if(!this.get('selectedComponent'))
@@ -444,8 +450,8 @@ define([
 
 			/**
 			 * Load components from storage
-			 *
 			 * @return	{Object}
+			 * @private
 			 * */
 			loadComponents: function() {
 				var comps = '';
@@ -463,8 +469,7 @@ define([
 
 			/**
 			 * Save components to storage
-			 *
+			 * @private
-			 * @return void
 			 * */
 			storeComponents: function() {
 				this.store();
@@ -502,7 +507,7 @@ define([
 			 * @param	{Object}	model
 			 * @param	{Mixed}		val	Value
 			 * @param	{Object}	opt	Options
-			 *
+			 * @private
 			 * */
 			updateComponents: function(model, val, opt) {
 				var comps	= model.get('components'),
@@ -533,6 +538,7 @@ define([
 			/**
 			 * Init stuff like storage for already existing elements
 			 * @param {Object}	model
+			 * @private
 			 */
 			initChildrenComp: function(model) {
 					var comps	= model.get('components');
@@ -551,7 +557,7 @@ define([
 			 * @param	{Object}	model
 			 * @param	{Mixed}		val	Value
 			 * @param	{Object}	opt	Options
-			 *
+			 * @private
 			 * */
 			rmComponents: function(model, val, opt){
 				var avSt	= opt ? opt.avoidStore : 0;
@@ -563,6 +569,7 @@ define([
 			/**
 			 * Returns model of the selected component
 			 * @return {Component|null}
+			 * @private
 			 */
 			getSelected: function(){
 				return this.get('selectedComponent');
@@ -572,6 +579,7 @@ define([
 			 * Set components inside editor's canvas. This method overrides actual components
 			 * @param {Object|string} components HTML string or components model
 			 * @return {this}
+			 * @private
 			 */
 			setComponents: function(components){
 				return this.Components.setComponents(components);
@@ -580,6 +588,7 @@ define([
 			/**
 			 * Returns components model from the editor's canvas
 			 * @return {Components}
+			 * @private
 			 */
 			getComponents: function(){
 				var cmp = this.Components;
@@ -596,6 +605,7 @@ define([
 			 * Set style inside editor's canvas. This method overrides actual style
 			 * @param {Object|string} style CSS string or style model
 			 * @return {this}
+			 * @private
 			 */
 			setStyle: function(style){
 				var rules = this.CssComposer.getRules();
@@ -608,6 +618,7 @@ define([
 			/**
 			 * Returns rules/style model from the editor's canvas
 			 * @return {Rules}
+			 * @private
 			 */
 			getStyle: function(){
 				return this.CssComposer.getRules();
@@ -616,6 +627,7 @@ define([
 			/**
 			 * Returns HTML built inside canvas
 			 * @return {string} HTML string
+			 * @private
 			 */
 			getHtml: function(){
 				var cmp = this.Components;
@@ -631,6 +643,7 @@ define([
 			/**
 			 * Returns CSS built inside canvas
 			 * @return {string} CSS string
+			 * @private
 			 */
 			getCss: function(){
 				var cmp = this.Components;
@@ -647,6 +660,7 @@ define([
 			/**
 			 * Store data to the current storage
 			 * @return {Object} Stored data
+			 * @private
 			 */
 			store: function(){
 				var sm = this.StorageManager;
@@ -676,6 +690,7 @@ define([
 			/**
 			 * Load data from the current storage
 			 * @return {Object} Loaded data
+			 * @private
 			 */
 			load: function(){
 				var result = this.getCacheLoad(1);

src/editor/view/EditorView.js

@@ -1,8 +1,6 @@
 define(['backbone'],
 function(Backbone){
-	/**
+
-	 * @class EditorView
-	 * */
 	return Backbone.View.extend({
 
 		initialize: function() {

src/storage_manager/model/LocalStorage.js

@@ -7,7 +7,9 @@ define(['backbone'],
 				checkLocal: true,
 			},
 
-			/** @inheritdoc */
+			/**
+			* @private
+			*/
 			store: function(data) {
 				this.checkStorageEnvironment();
 
@@ -15,7 +17,9 @@ define(['backbone'],
 					localStorage.setItem(key, data[key]);
 			},
 
-			/** @inheritdoc */
+			/**
+			 * @private
+			 */
 			load: function(keys){
 				this.checkStorageEnvironment();
 				var result = {};
@@ -29,7 +33,9 @@ define(['backbone'],
 				return result;
 			},
 
-			/** @inheritdoc */
+			/**
+			 * @private
+			 */
 			remove: function(keys) {
 				this.checkStorageEnvironment();
 
@@ -39,6 +45,7 @@ define(['backbone'],
 
 			/**
 			 * Check storage environment
+			 * @private
 			 * */
 			checkStorageEnvironment: function() {
 				if(this.get('checkLocal') && !localStorage)

src/storage_manager/model/RemoteStorage.js

@@ -13,7 +13,9 @@ define(['backbone'],
 				onComplete: function(){},
 			},
 
-			/** @inheritdoc */
+			/**
+			 * @private
+			 */
 			store: function(data) {
 				var fd = {},
 				params = this.get('params');
@@ -35,7 +37,9 @@ define(['backbone'],
 				});
 			},
 
-			/** @inheritdoc */
+			/**
+			 * @private
+			 */
 			load: function(keys){
 				var result = {},
 				fd = {},