From 5b45006b042d52d7c4d5d8f0e3fa64c4c31edbf4 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sun, 8 Jul 2018 13:46:22 +0200
Subject: [PATCH] Update API Reference docs

---
 docs/.vuepress/config.js      |   2 +
 docs/api.js                   |  13 +--
 docs/api/assets.md            | 148 ++++++++++++++++------------------
 docs/api/block_manager.md     | 100 +++++++++++------------
 docs/api/commands.md          |  67 +++++----------
 docs/api/components.md        | 111 ++++++++++++-------------
 src/asset_manager/index.js    |  47 +++++------
 src/block_manager/index.js    |  35 ++++----
 src/commands/config/config.js |   5 ++
 src/commands/index.js         |  42 +++-------
 src/dom_components/index.js   |  39 ++++-----
 11 files changed, 270 insertions(+), 339 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index f66f8df63..d472d3e63 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -57,6 +57,8 @@ module.exports = {
         ['/api/assets', 'Asset Manager'],
         ['/api/block_manager', 'Block Manager'],
         ['/api/commands', 'Commands'],
+        ['/api/components', 'DOM Components'],
+        ['/api/panels', 'Panels'],
       ],
       '/': [
         '',
diff --git a/docs/api.js b/docs/api.js
index 02d043a9a..7a91b166f 100644
--- a/docs/api.js
+++ b/docs/api.js
@@ -5,21 +5,22 @@ const docRoot = __dirname;
 const srcRoot = path.join(docRoot, '../src/');
 const binRoot = path.join(docRoot, '../node_modules/.bin/');
 const cmds = [
-  ['editor/index.js', 'editor.md'],
-  ['asset_manager/index.js', 'assets.md'],
-  ['commands/index.js', 'commands.md'],
-  ['dom_components/index.js', 'components.md'],
+  // ['editor/index.js', 'editor.md'],
+  // ['asset_manager/index.js', 'assets.md'],
+  // ['block_manager/index.js', 'block_manager.md'],
+  // ['commands/index.js', 'commands.md'],
+  // ['dom_components/index.js', 'components.md'],
   ['panels/index.js', 'panels.md'],
+  /*
   ['style_manager/index.js', 'style_manager.md'],
   ['storage_manager/index.js', 'storage_manager.md'],
   ['device_manager/index.js', 'device_manager.md'],
-  ['block_manager/index.js', 'block_manager.md'],
   ['selector_manager/index.js', 'selector_manager.md'],
   ['css_composer/index.js', 'css_composer.md'],
   ['modal_dialog/index.js', 'modal_dialog.md'],
   ['rich_text_editor/index.js', 'rich_text_editor.md'],
   ['keymaps/index.js', 'keymaps.md'],
-  ['undo_manager/index.js', 'undo_manager.md'],
+  ['undo_manager/index.js', 'undo_manager.md'],*/
 ].map(entry =>
   `${binRoot}documentation build ${srcRoot}/${entry[0]} -o ${docRoot}/api/${entry[1]} -f md --shallow --markdown-toc false`)
 .join(' && ');
diff --git a/docs/api/assets.md b/docs/api/assets.md
index 83879ecf6..2581350ce 100644
--- a/docs/api/assets.md
+++ b/docs/api/assets.md
@@ -2,49 +2,34 @@
 
 ## AssetManager
 
--   [add][1]
--   [get][2]
--   [getAll][3]
--   [getAllVisible][4]
--   [remove][5]
--   [getContainer][6]
--   [getAssetsEl][7]
--   [addType][8]
--   [getType][9]
--   [getTypes][10]
--   [store][11]
--   [load][12]
-
-Before using this methods you should get first the module from the editor instance, in this way:
+You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
 
 ```js
-var assetManager = editor.AssetManager;
+const editor = grapesjs.init({
+ assetManager: {
+   // options
+ }
+})
 ```
 
-### Parameters
-
--   `config` **[Object][13]** Configurations
-    -   `config.assets` **[Array][14]&lt;[Object][13]>** Default assets (optional, default `[]`)
-    -   `config.uploadText` **[String][15]** Upload text (optional, default `'Drop files here or click to upload'`)
-    -   `config.addBtnText` **[String][15]** Text for the add button (optional, default `'Add image'`)
-    -   `config.upload` **[String][15]** Where to send upload data. Expects as return a JSON with asset/s object
-        as: {data: [{src:'...'}, {src:'...'}]} (optional, default `''`)
-
-### Examples
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
 
-```javascript
-...
-{
-	assets: [
- 	{src:'path/to/image.png'},
-    ...
- ],
- upload: 'http://dropbox/path', // Set to false to disable it
- uploadText: 'Drop files here or click to upload',
-}
+```js
+const assetManager = editor.AssetManager;
 ```
 
-Returns **this** 
+-   [add][2]
+-   [get][3]
+-   [getAll][4]
+-   [getAllVisible][5]
+-   [remove][6]
+-   [store][7]
+-   [load][8]
+-   [getContainer][9]
+-   [getAssetsEl][10]
+-   [addType][11]
+-   [getType][12]
+-   [getTypes][13]
 
 ## add
 
@@ -52,8 +37,8 @@ Add new asset/s to the collection. URLs are supposed to be unique
 
 ### Parameters
 
--   `asset` **([string][15] \| [Object][13] \| [Array][14]&lt;[string][15]> | [Array][14]&lt;[Object][13]>)** URL strings or an objects representing the resource.
--   `opts` **[Object][13]?** Options (optional, default `{}`)
+-   `asset` **([string][14] \| [Object][15] \| [Array][16]&lt;[string][14]> | [Array][16]&lt;[Object][15]>)** URL strings or an objects representing the resource.
+-   `opts` **[Object][15]?** Options (optional, default `{}`)
 
 ### Examples
 
@@ -84,7 +69,7 @@ Returns the asset by URL
 
 ### Parameters
 
--   `src` **[string][15]** URL of the asset
+-   `src` **[string][14]** URL of the asset
 
 ### Examples
 
@@ -92,7 +77,7 @@ Returns the asset by URL
 var asset = assetManager.get('http://img.jpg');
 ```
 
-Returns **[Object][13]** Object representing the asset
+Returns **[Object][15]** Object representing the asset
 
 ## getAll
 
@@ -112,7 +97,7 @@ Remove the asset by its URL
 
 ### Parameters
 
--   `src` **[string][15]** URL of the asset
+-   `src` **[string][14]** URL of the asset
 
 ### Examples
 
@@ -128,7 +113,7 @@ Store assets data to the selected storage
 
 ### Parameters
 
--   `noStore` **[Boolean][16]** If true, won't store
+-   `noStore` **[Boolean][17]** If true, won't store
 
 ### Examples
 
@@ -136,7 +121,7 @@ Store assets data to the selected storage
 var assets = assetManager.store();
 ```
 
-Returns **[Object][13]** Data to store
+Returns **[Object][15]** Data to store
 
 ## load
 
@@ -145,7 +130,7 @@ The fetched data will be added to the collection.
 
 ### Parameters
 
--   `data` **[Object][13]** Object of data to load (optional, default `{}`)
+-   `data` **[Object][15]** Object of data to load (optional, default `{}`)
 
 ### Examples
 
@@ -155,19 +140,19 @@ var assets = assetManager.load({
 })
 ```
 
-Returns **[Object][13]** Loaded assets
+Returns **[Object][15]** Loaded assets
 
 ## getContainer
 
 Return the Asset Manager Container
 
-Returns **[HTMLElement][17]** 
+Returns **[HTMLElement][18]** 
 
 ## getAssetsEl
 
 Get assets element container
 
-Returns **[HTMLElement][17]** 
+Returns **[HTMLElement][18]** 
 
 ## render
 
@@ -175,7 +160,7 @@ Render assets
 
 ### Parameters
 
--   `assets` **[array][14]** Assets to render, without the argument will render
+-   `assets` **[array][16]** Assets to render, without the argument will render
                            all global assets
 
 ### Examples
@@ -191,24 +176,29 @@ assetManager.render(assets.filter(
 ));
 ```
 
-Returns **[HTMLElement][17]** 
+Returns **[HTMLElement][18]** 
 
 ## addType
 
-Add new type
+Add new type. If you want to get more about type definition we suggest to read the [module's page][19]
 
 ### Parameters
 
--   `id` **[string][15]** Type ID
--   `definition` **[Object][13]** Definition of the type. Each definition contains
+-   `id` **[string][14]** Type ID
+-   `definition` **[Object][15]** Definition of the type. Each definition contains
                                `model` (business logic), `view` (presentation logic)
                                and `isType` function which recognize the type of the
                                passed entity
-    addType('my-type', {
-     model: {},
-     view: {},
-     isType: (value) => {},
-    })
+
+### Examples
+
+```javascript
+assetManager.addType('my-type', {
+ model: {},
+ view: {},
+ isType: (value) => {},
+})
+```
 
 ## getType
 
@@ -216,46 +206,50 @@ Get type
 
 ### Parameters
 
--   `id` **[string][15]** Type ID
+-   `id` **[string][14]** Type ID
 
-Returns **[Object][13]** Type definition
+Returns **[Object][15]** Type definition
 
 ## getTypes
 
 Get types
 
-Returns **[Array][14]** 
+Returns **[Array][16]** 
+
+[1]: https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js
+
+[2]: #add
 
-[1]: #add
+[3]: #get
 
-[2]: #get
+[4]: #getall
 
-[3]: #getall
+[5]: #getallvisible
 
-[4]: #getallvisible
+[6]: #remove
 
-[5]: #remove
+[7]: #store
 
-[6]: #getcontainer
+[8]: #load
 
-[7]: #getassetsel
+[9]: #getcontainer
 
-[8]: #addtype
+[10]: #getassetsel
 
-[9]: #gettype
+[11]: #addtype
 
-[10]: #gettypes
+[12]: #gettype
 
-[11]: #store
+[13]: #gettypes
 
-[12]: #load
+[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[18]: https://developer.mozilla.org/docs/Web/HTML/Element
 
-[17]: https://developer.mozilla.org/docs/Web/HTML/Element
+[19]: /modules/Assets.html
diff --git a/docs/api/block_manager.md b/docs/api/block_manager.md
index 18492487a..0debc7620 100644
--- a/docs/api/block_manager.md
+++ b/docs/api/block_manager.md
@@ -2,45 +2,37 @@
 
 ## BlockManager
 
--   [add][1]
--   [get][2]
--   [getAll][3]
--   [getAllVisible][4]
--   [getCategories][5]
--   [getContainer][6]
--   [render][7]
-
-Block manager helps managing various, draggable, piece of contents that could be easily reused inside templates.
-
-Before using methods you should get first the module from the editor instance, in this way:
+You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
 
 ```js
-var blockManager = editor.BlockManager;
+const editor = grapesjs.init({
+ blockManager: {
+   // options
+ }
+})
 ```
 
-### Parameters
-
--   `config` **[Object][8]** Configurations
-    -   `config.blocks` **[Array][9]&lt;[Object][8]>** Default blocks (optional, default `[]`)
-
-### Examples
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
 
-```javascript
-...
-{
-    blocks: [
-     {id:'h1-block' label: 'Heading', content:'<h1>...</h1>'},
-     ...
-   ],
-}
-...
+```js
+const blockManager = editor.BlockManager;
 ```
 
+-   [add][2]
+-   [get][3]
+-   [getAll][4]
+-   [getAllVisible][5]
+-   [remove][6]
+-   [getConfig][7]
+-   [getCategories][8]
+-   [getContainer][9]
+-   [render][10]
+
 ## getConfig
 
 Get configuration object
 
-Returns **[Object][8]** 
+Returns **[Object][11]** 
 
 ## onLoad
 
@@ -52,16 +44,16 @@ Add new block to the collection.
 
 ### Parameters
 
--   `id` **[string][10]** Block id
--   `opts` **[Object][8]** Options
-    -   `opts.label` **[string][10]** Name of the block
-    -   `opts.content` **[string][10]** HTML content
-    -   `opts.category` **([string][10] \| [Object][8])** Group the block inside a catgegory.
+-   `id` **[string][12]** Block id
+-   `opts` **[Object][11]** Options
+    -   `opts.label` **[string][12]** Name of the block
+    -   `opts.content` **[string][12]** HTML content
+    -   `opts.category` **([string][12] \| [Object][11])** Group the block inside a catgegory.
                                              You should pass objects with id property, eg:
                                              {id: 'some-uid', label: 'My category'}
                                              The string will be converted in:
                                              'someid' => {id: 'someid', label: 'someid'}
-    -   `opts.attributes` **[Object][8]** Block attributes (optional, default `{}`)
+    -   `opts.attributes` **[Object][11]** Block attributes (optional, default `{}`)
 
 ### Examples
 
@@ -84,7 +76,7 @@ Return the block by id
 
 ### Parameters
 
--   `id` **[string][10]** Block id
+-   `id` **[string][12]** Block id
 
 ### Examples
 
@@ -120,7 +112,7 @@ Remove a block by id
 
 ### Parameters
 
--   `id` **[string][10]** Block id
+-   `id` **[string][12]** Block id
 
 Returns **Block** Removed block
 
@@ -129,13 +121,13 @@ Returns **Block** Removed block
 Get all available categories.
 It's possible to add categories only within blocks via 'add()' method
 
-Returns **([Array][9] | Collection)** 
+Returns **([Array][13] | Collection)** 
 
 ## getContainer
 
 Return the Blocks container element
 
-Returns **[HTMLElement][11]** 
+Returns **[HTMLElement][14]** 
 
 ## render
 
@@ -143,7 +135,7 @@ Render blocks
 
 ### Parameters
 
--   `blocks` **[Array][9]** Blocks to render, without the argument will render
+-   `blocks` **[Array][13]** Blocks to render, without the argument will render
                            all global blocks
 
 ### Examples
@@ -166,26 +158,32 @@ blockManager.render([
 blockManager.render();
 ```
 
-Returns **[HTMLElement][11]** Rendered element
+Returns **[HTMLElement][14]** Rendered element
+
+[1]: https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js
+
+[2]: #add
+
+[3]: #get
 
-[1]: #add
+[4]: #getall
 
-[2]: #get
+[5]: #getallvisible
 
-[3]: #getall
+[6]: #remove
 
-[4]: #getallvisible
+[7]: #getconfig
 
-[5]: #getcategories
+[8]: #getcategories
 
-[6]: #getcontainer
+[9]: #getcontainer
 
-[7]: #render
+[10]: #render
 
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[11]: https://developer.mozilla.org/docs/Web/HTML/Element
+[14]: https://developer.mozilla.org/docs/Web/HTML/Element
diff --git a/docs/api/commands.md b/docs/api/commands.md
index 5db7cb0f5..ddc3220e9 100644
--- a/docs/api/commands.md
+++ b/docs/api/commands.md
@@ -2,48 +2,25 @@
 
 ## Commands
 
--   [add][1]
--   [get][2]
--   [has][3]
-
-You can init the editor with all necessary commands via configuration
+You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
 
 ```js
-var editor = grapesjs.init({
-	...
- commands: {...} // Check below for the properties
-	...
-});
+const editor = grapesjs.init({
+ commands: {
+   // options
+ }
+})
 ```
 
-Before using methods you should get first the module from the editor instance, in this way:
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
 
 ```js
-var commands = editor.Commands;
+const commands = editor.Commands;
 ```
 
-### Parameters
-
--   `config` **[Object][4]** Configurations
-    -   `config.defaults` **[Array][5]&lt;[Object][4]>** Array of possible commands (optional, default `[]`)
-
-### Examples
-
-```javascript
-...
-commands: {
-	defaults: [{
-		id: 'helloWorld',
-		run:  function(editor, sender){
-			alert('Hello world!');
-		},
-		stop:  function(editor, sender){
-			alert('Stop!');
-		},
-	}],
-},
-...
-```
+-   [add][2]
+-   [get][3]
+-   [has][4]
 
 ## add
 
@@ -51,8 +28,8 @@ Add new command to the collection
 
 ### Parameters
 
--   `id` **[string][6]** Command's ID
--   `command` **([Object][4] \| [Function][7])** Object representing your command,
+-   `id` **[string][5]** Command's ID
+-   `command` **([Object][6] \| [Function][7])** Object representing your command,
      By passing just a function it's intended as a stateless command
      (just like passing an object with only `run` method).
 
@@ -78,7 +55,7 @@ Get command by ID
 
 ### Parameters
 
--   `id` **[string][6]** Command's ID
+-   `id` **[string][5]** Command's ID
 
 ### Examples
 
@@ -87,7 +64,7 @@ var myCommand = commands.get('myCommand');
 myCommand.run();
 ```
 
-Returns **[Object][4]** Object representing the command
+Returns **[Object][6]** Object representing the command
 
 ## has
 
@@ -95,21 +72,21 @@ Check if command exists
 
 ### Parameters
 
--   `id` **[string][6]** Command's ID
+-   `id` **[string][5]** Command's ID
 
 Returns **[Boolean][8]** 
 
-[1]: #add
+[1]: https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js
 
-[2]: #get
+[2]: #add
 
-[3]: #has
+[3]: #get
 
-[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[4]: #has
 
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
 [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 
diff --git a/docs/api/components.md b/docs/api/components.md
index 749a29131..6c15b0385 100644
--- a/docs/api/components.md
+++ b/docs/api/components.md
@@ -2,43 +2,30 @@
 
 ## DomComponents
 
--   [getWrapper][1]
--   [getComponents][2]
--   [addComponent][3]
--   [clear][4]
--   [load][5]
--   [store][6]
--   [render][7]
-
-With this module is possible to manage components inside the canvas.
-Before using methods you should get first the module from the editor instance, in this way:
+With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
 
 ```js
-var domComponents = editor.DomComponents;
+const editor = grapesjs.init({
+ domComponents: {
+   // options
+ }
+})
 ```
 
-### Parameters
-
--   `config` **[Object][8]** Configurations
-    -   `config.components` **([string][9] \| [Array][10]&lt;[Object][8]>)** HTML string or an array of possible components (optional, default `[]`)
-
-### Examples
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
 
-```javascript
-...
-domComponents: {
-   components: '<div>Hello world!</div>',
-}
-// Or
-domComponents: {
-   components: [
-     { tagName: 'span', style: {color: 'red'}, content: 'Hello'},
-     { style: {width: '100px', content: 'world!'}}
-   ],
-}
-...
+```js
+const domComponents = editor.DomComponents;
 ```
 
+-   [getWrapper][2]
+-   [getComponents][3]
+-   [addComponent][4]
+-   [clear][5]
+-   [load][6]
+-   [store][7]
+-   [render][8]
+
 ## load
 
 Load components from the passed object, if the object is empty will try to fetch them
@@ -47,9 +34,9 @@ The fetched data will be added to the collection
 
 ### Parameters
 
--   `data` **[Object][8]** Object of data to load (optional, default `''`)
+-   `data` **[Object][9]** Object of data to load (optional, default `''`)
 
-Returns **[Object][8]** Loaded data
+Returns **[Object][9]** Loaded data
 
 ## store
 
@@ -57,13 +44,13 @@ Store components on the selected storage
 
 ### Parameters
 
--   `noStore` **[Boolean][11]** If true, won't store
+-   `noStore` **[Boolean][10]** If true, won't store
 
-Returns **[Object][8]** Data to store
+Returns **[Object][9]** Data to store
 
 ## getWrapper
 
-Returns root component inside the canvas. Something like <body> inside HTML page
+Returns root component inside the canvas. Something like `<body>` inside HTML page
 The wrapper doesn't differ from the original Component Model
 
 ### Examples
@@ -117,18 +104,18 @@ as 'domComponents.getComponents().add(...)'
 
 ### Parameters
 
--   `component` **([Object][8] | Component | [Array][10]&lt;[Object][8]>)** Component/s to add
-    -   `component.tagName` **[string][9]** Tag name (optional, default `'div'`)
-    -   `component.type` **[string][9]** Type of the component. Available: ''(default), 'text', 'image' (optional, default `''`)
-    -   `component.removable` **[boolean][11]** If component is removable (optional, default `true`)
-    -   `component.draggable` **[boolean][11]** If is possible to move the component around the structure (optional, default `true`)
-    -   `component.droppable` **[boolean][11]** If is possible to drop inside other components (optional, default `true`)
-    -   `component.badgable` **[boolean][11]** If the badge is visible when the component is selected (optional, default `true`)
-    -   `component.stylable` **[boolean][11]** If is possible to style component (optional, default `true`)
-    -   `component.copyable` **[boolean][11]** If is possible to copy&paste the component (optional, default `true`)
-    -   `component.content` **[string][9]** String inside component (optional, default `''`)
-    -   `component.style` **[Object][8]** Style object (optional, default `{}`)
-    -   `component.attributes` **[Object][8]** Attribute object (optional, default `{}`)
+-   `component` **([Object][9] | Component | [Array][11]&lt;[Object][9]>)** Component/s to add
+    -   `component.tagName` **[string][12]** Tag name (optional, default `'div'`)
+    -   `component.type` **[string][12]** Type of the component. Available: ''(default), 'text', 'image' (optional, default `''`)
+    -   `component.removable` **[boolean][10]** If component is removable (optional, default `true`)
+    -   `component.draggable` **[boolean][10]** If is possible to move the component around the structure (optional, default `true`)
+    -   `component.droppable` **[boolean][10]** If is possible to drop inside other components (optional, default `true`)
+    -   `component.badgable` **[boolean][10]** If the badge is visible when the component is selected (optional, default `true`)
+    -   `component.stylable` **[boolean][10]** If is possible to style component (optional, default `true`)
+    -   `component.copyable` **[boolean][10]** If is possible to copy&paste the component (optional, default `true`)
+    -   `component.content` **[string][12]** String inside component (optional, default `''`)
+    -   `component.style` **[Object][9]** Style object (optional, default `{}`)
+    -   `component.attributes` **[Object][9]** Attribute object (optional, default `{}`)
 
 ### Examples
 
@@ -145,7 +132,7 @@ var comp1 = domComponents.addComponent({
 });
 ```
 
-Returns **(Component | [Array][10]&lt;Component>)** Component/s added
+Returns **(Component | [Array][11]&lt;Component>)** Component/s added
 
 ## render
 
@@ -154,7 +141,7 @@ Once the wrapper is rendered, and it's what happens when you init the editor,
 the all new components will be added automatically and property changes are all
 updated immediately
 
-Returns **[HTMLElement][12]** 
+Returns **[HTMLElement][13]** 
 
 ## clear
 
@@ -162,26 +149,28 @@ Remove all components
 
 Returns **this** 
 
-[1]: #getwrapper
+[1]: https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js
+
+[2]: #getwrapper
 
-[2]: #getcomponents
+[3]: #getcomponents
 
-[3]: #addcomponent
+[4]: #addcomponent
 
-[4]: #clear
+[5]: #clear
 
-[5]: #load
+[6]: #load
 
-[6]: #store
+[7]: #store
 
-[7]: #render
+[8]: #render
 
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[12]: https://developer.mozilla.org/docs/Web/HTML/Element
+[13]: https://developer.mozilla.org/docs/Web/HTML/Element
diff --git a/src/asset_manager/index.js b/src/asset_manager/index.js
index a39a8769e..e0bf469fe 100644
--- a/src/asset_manager/index.js
+++ b/src/asset_manager/index.js
@@ -1,41 +1,33 @@
 /**
+ * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js)
+ * ```js
+ * const editor = grapesjs.init({
+ *  assetManager: {
+ *    // options
+ *  }
+ * })
+ * ```
+ *
+ * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+ *
+ * ```js
+ * const assetManager = editor.AssetManager;
+ * ```
+ *
  * * [add](#add)
  * * [get](#get)
  * * [getAll](#getall)
  * * [getAllVisible](#getallvisible)
  * * [remove](#remove)
+ * * [store](#store)
+ * * [load](#load)
  * * [getContainer](#getcontainer)
  * * [getAssetsEl](#getassetsel)
  * * [addType](#addtype)
  * * [getType](#gettype)
  * * [getTypes](#gettypes)
- * * [store](#store)
- * * [load](#load)
- *
- * Before using this methods you should get first the module from the editor instance, in this way:
- *
- * ```js
- * var assetManager = editor.AssetManager;
- * ```
  *
  * @module AssetManager
- * @param {Object} config Configurations
- * @param {Array<Object>} [config.assets=[]] Default assets
- * @param {String} [config.uploadText='Drop files here or click to upload'] Upload text
- * @param {String} [config.addBtnText='Add image'] Text for the add button
- * @param {String} [config.upload=''] Where to send upload data. Expects as return a JSON with asset/s object
- * as: {data: [{src:'...'}, {src:'...'}]}
- * @return {this}
- * @example
- * ...
- * {
- * 	assets: [
- *  	{src:'path/to/image.png'},
- *     ...
- *  ],
- *  upload: 'http://dropbox/path', // Set to false to disable it
- *  uploadText: 'Drop files here or click to upload',
- * }
  */
 
 module.exports = () => {
@@ -268,13 +260,14 @@ module.exports = () => {
     },
 
     /**
-     * Add new type
+     * Add new type. If you want to get more about type definition we suggest to read the [module's page](/modules/Assets.html)
      * @param {string} id Type ID
      * @param {Object} definition Definition of the type. Each definition contains
      *                            `model` (business logic), `view` (presentation logic)
      *                            and `isType` function which recognize the type of the
      *                            passed entity
-     * addType('my-type', {
+     * @example
+     * assetManager.addType('my-type', {
      *  model: {},
      *  view: {},
      *  isType: (value) => {},
diff --git a/src/block_manager/index.js b/src/block_manager/index.js
index e524e8c14..8e975f2b1 100644
--- a/src/block_manager/index.js
+++ b/src/block_manager/index.js
@@ -1,32 +1,29 @@
 /**
+ * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js)
+ * ```js
+ * const editor = grapesjs.init({
+ *  blockManager: {
+ *    // options
+ *  }
+ * })
+ * ```
+ *
+ * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+ *
+ * ```js
+ * const blockManager = editor.BlockManager;
+ * ```
  * * [add](#add)
  * * [get](#get)
  * * [getAll](#getall)
  * * [getAllVisible](#getallvisible)
+ * * [remove](#remove)
+ * * [getConfig](#getconfig)
  * * [getCategories](#getcategories)
  * * [getContainer](#getcontainer)
  * * [render](#render)
  *
- * Block manager helps managing various, draggable, piece of contents that could be easily reused inside templates.
- *
- * Before using methods you should get first the module from the editor instance, in this way:
- *
- * ```js
- * var blockManager = editor.BlockManager;
- * ```
- *
  * @module BlockManager
- * @param {Object} config Configurations
- * @param {Array<Object>} [config.blocks=[]] Default blocks
- * @example
- * ...
- * {
- *     blocks: [
- *      {id:'h1-block' label: 'Heading', content:'<h1>...</h1>'},
- *      ...
- *    ],
- * }
- * ...
  */
 import { isElement } from 'underscore';
 
diff --git a/src/commands/config/config.js b/src/commands/config/config.js
index 618ca5665..7d12db6eb 100644
--- a/src/commands/config/config.js
+++ b/src/commands/config/config.js
@@ -6,17 +6,22 @@ module.exports = {
   defaults: [],
 
   // Editor model
+  // @deprecated
   em: null,
 
   // If true center new first-level components
+  // @deprecated
   firstCentered: true,
 
   // If true the new component will created with 'height', else 'min-height'
+  // @deprecated
   newFixedH: false,
 
   // Minimum height (in px) of new component
+  // @deprecated
   minComponentH: 50,
 
   // Minimum width (in px) of component on creation
+  // @deprecated
   minComponentW: 50
 };
diff --git a/src/commands/index.js b/src/commands/index.js
index 377206161..71e333eec 100644
--- a/src/commands/index.js
+++ b/src/commands/index.js
@@ -1,42 +1,24 @@
 /**
- *
- * * [add](#add)
- * * [get](#get)
- * * [has](#has)
- *
- * You can init the editor with all necessary commands via configuration
- *
+ * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js)
  * ```js
- * var editor = grapesjs.init({
- * 	...
- *  commands: {...} // Check below for the properties
- * 	...
- * });
+ * const editor = grapesjs.init({
+ *  commands: {
+ *    // options
+ *  }
+ * })
  * ```
  *
- * Before using methods you should get first the module from the editor instance, in this way:
+ * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
  *
  * ```js
- * var commands = editor.Commands;
+ * const commands = editor.Commands;
  * ```
  *
+ * * [add](#add)
+ * * [get](#get)
+ * * [has](#has)
+ *
  * @module Commands
- * @param {Object} config Configurations
- * @param {Array<Object>} [config.defaults=[]] Array of possible commands
- * @example
- * ...
- * commands: {
- * 	defaults: [{
- * 		id: 'helloWorld',
- * 		run:  function(editor, sender){
- * 			alert('Hello world!');
- * 		},
- * 		stop:  function(editor, sender){
- * 			alert('Stop!');
- * 		},
- * 	}],
- * },
- * ...
  */
 import { isFunction } from 'underscore';
 
diff --git a/src/dom_components/index.js b/src/dom_components/index.js
index 6e8f8246a..d331159d8 100644
--- a/src/dom_components/index.js
+++ b/src/dom_components/index.js
@@ -1,4 +1,18 @@
 /**
+ * With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js)
+ * ```js
+ * const editor = grapesjs.init({
+ *  domComponents: {
+ *    // options
+ *  }
+ * })
+ * ```
+ *
+ * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+ *
+ * ```js
+ * const domComponents = editor.DomComponents;
+ * ```
  *
  * * [getWrapper](#getwrapper)
  * * [getComponents](#getcomponents)
@@ -8,30 +22,9 @@
  * * [store](#store)
  * * [render](#render)
  *
- * With this module is possible to manage components inside the canvas.
- * Before using methods you should get first the module from the editor instance, in this way:
- *
- * ```js
- * var domComponents = editor.DomComponents;
- * ```
- *
  * @module DomComponents
- * @param {Object} config Configurations
- * @param {string|Array<Object>} [config.components=[]] HTML string or an array of possible components
- * @example
- * ...
- * domComponents: {
- *    components: '<div>Hello world!</div>',
- * }
- * // Or
- * domComponents: {
- *    components: [
- *      { tagName: 'span', style: {color: 'red'}, content: 'Hello'},
- *      { style: {width: '100px', content: 'world!'}}
- *    ],
- * }
- * ...
  */
+
 import { isEmpty } from 'underscore';
 
 module.exports = () => {
@@ -378,7 +371,7 @@ module.exports = () => {
     },
 
     /**
-     * Returns root component inside the canvas. Something like <body> inside HTML page
+     * Returns root component inside the canvas. Something like `<body>` inside HTML page
      * The wrapper doesn't differ from the original Component Model
      * @return {Component} Root Component
      * @example