Add API Reference generation script

8 years ago · c032964abf
18 changed files with 2948 additions and 6 deletions
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@ -53,8 +53,10 @@ module.exports = {
    sidebar: {
      '/api/': [
        '',
-        '/api/editor.md',
+        ['/api/editor', 'Editor'],
-        '/api/assets.md',
+        ['/api/assets', 'Asset Manager'],
        ['/api/block_manager', 'Block Manager'],
        ['/api/commands', 'Commands'],
      ],
      '/': [
        '',
--- a/docs/api.js
+++ b/docs/api.js
@ -0,0 +1,39 @@
 // This script uses documentation to generate API Reference files
 const path = require('path');
 const exec = require('child_process').exec;
 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'],
  ['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'],
 ].map(entry =>
  `${binRoot}documentation build ${srcRoot}/${entry[0]} -o ${docRoot}/api/${entry[1]} -f md --shallow --markdown-toc false`)
 .join(' && ');
 console.log('Start API Reference generation...');
 exec(cmds, (error, stdout, stderr) => {
  if (error) {
    console.error( 'Failed to update API Reference: ', error);
    return;
  }
  stdout.trim().split('\n').forEach(function (line) {
    console.info(line);
  });
  console.log('API Reference generation done!');
 });
--- a/docs/api/assets.md
+++ b/docs/api/assets.md
@ -1,3 +1,261 @@
-# Assets
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
-Assets API
+## 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:
 ```js
 var assetManager = editor.AssetManager;
 ```
 ### 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
 ```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',
 }
 ```
 Returns **this** 
 ## add
 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 `{}`)
 ### Examples
 ```javascript
 // In case of strings, would be interpreted as images
 assetManager.add('http://img.jpg');
 assetManager.add(['http://img.jpg', './path/to/img.png']);
 // Using objects you could indicate the type and other meta informations
 assetManager.add({
 	src: 'http://img.jpg',
 	//type: 'image',	//image is default
 	height: 300,
 width: 200,
 });
 assetManager.add([{
 	src: 'http://img.jpg',
 },{
 	src: './path/to/img.png',
 }]);
 ```
 Returns **Model** 
 ## get
 Returns the asset by URL
 ### Parameters
 -   `src` **[string][15]** URL of the asset
 ### Examples
 ```javascript
 var asset = assetManager.get('http://img.jpg');
 ```
 Returns **[Object][13]** Object representing the asset
 ## getAll
 Return the global collection, containing all the assets
 Returns **Collection** 
 ## getAllVisible
 Return the visible collection, which containes assets actually rendered
 Returns **Collection** 
 ## remove
 Remove the asset by its URL
 ### Parameters
 -   `src` **[string][15]** URL of the asset
 ### Examples
 ```javascript
 assetManager.remove('http://img.jpg');
 ```
 Returns **this** 
 ## store
 Store assets data to the selected storage
 ### Parameters
 -   `noStore` **[Boolean][16]** If true, won't store
 ### Examples
 ```javascript
 var assets = assetManager.store();
 ```
 Returns **[Object][13]** Data to store
 ## load
 Load data from the passed object.
 The fetched data will be added to the collection.
 ### Parameters
 -   `data` **[Object][13]** Object of data to load (optional, default `{}`)
 ### Examples
 ```javascript
 var assets = assetManager.load({
 	assets: [...]
 })
 ```
 Returns **[Object][13]** Loaded assets
 ## getContainer
 Return the Asset Manager Container
 Returns **[HTMLElement][17]** 
 ## getAssetsEl
 Get assets element container
 Returns **[HTMLElement][17]** 
 ## render
 Render assets
 ### Parameters
 -   `assets` **[array][14]** Assets to render, without the argument will render
                           all global assets
 ### Examples
 ```javascript
 // Render all assets
 assetManager.render();
 // Render some of the assets
 const assets = assetManager.getAll();
 assetManager.render(assets.filter(
 asset => asset.get('category') == 'cats'
 ));
 ```
 Returns **[HTMLElement][17]** 
 ## addType
 Add new type
 ### Parameters
 -   `id` **[string][15]** Type ID
 -   `definition` **[Object][13]** 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) => {},
    })
 ## getType
 Get type
 ### Parameters
 -   `id` **[string][15]** Type ID
 Returns **[Object][13]** Type definition
 ## getTypes
 Get types
 Returns **[Array][14]** 
 [1]: #add
 [2]: #get
 [3]: #getall
 [4]: #getallvisible
 [5]: #remove
 [6]: #getcontainer
 [7]: #getassetsel
 [8]: #addtype
 [9]: #gettype
 [10]: #gettypes
 [11]: #store
 [12]: #load
 [13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 [17]: https://developer.mozilla.org/docs/Web/HTML/Element
--- a/docs/api/block_manager.md
+++ b/docs/api/block_manager.md
@ -0,0 +1,191 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## 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:
 ```js
 var blockManager = editor.BlockManager;
 ```
 ### Parameters
 -   `config` **[Object][8]** Configurations
    -   `config.blocks` **[Array][9]&lt;[Object][8]>** Default blocks (optional, default `[]`)
 ### Examples
 ```javascript
 ...
 {
    blocks: [
     {id:'h1-block' label: 'Heading', content:'<h1>...</h1>'},
     ...
   ],
 }
 ...
 ```
 ## getConfig
 Get configuration object
 Returns **[Object][8]** 
 ## onLoad
 Load default blocks if the collection is empty
 ## add
 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.
                                             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 `{}`)
 ### Examples
 ```javascript
 blockManager.add('h1-block', {
  label: 'Heading',
  content: '<h1>Put your title here</h1>',
  category: 'Basic',
  attributes: {
    title: 'Insert h1 block'
  }
 });
 ```
 Returns **Block** Added block
 ## get
 Return the block by id
 ### Parameters
 -   `id` **[string][10]** Block id
 ### Examples
 ```javascript
 const block = blockManager.get('h1-block');
 console.log(JSON.stringify(block));
 // {label: 'Heading', content: '<h1>Put your ...', ...}
 ```
 ## getAll
 Return all blocks
 ### Examples
 ```javascript
 const blocks = blockManager.getAll();
 console.log(JSON.stringify(blocks));
 // [{label: 'Heading', content: '<h1>Put your ...'}, ...]
 ```
 Returns **Collection** 
 ## getAllVisible
 Return the visible collection, which containes blocks actually rendered
 Returns **Collection** 
 ## remove
 Remove a block by id
 ### Parameters
 -   `id` **[string][10]** Block id
 Returns **Block** Removed block
 ## getCategories
 Get all available categories.
 It's possible to add categories only within blocks via 'add()' method
 Returns **([Array][9] | Collection)** 
 ## getContainer
 Return the Blocks container element
 Returns **[HTMLElement][11]** 
 ## render
 Render blocks
 ### Parameters
 -   `blocks` **[Array][9]** Blocks to render, without the argument will render
                           all global blocks
 ### Examples
 ```javascript
 // Render all blocks (inside the global collection)
 blockManager.render();
 // Render new set of blocks
 const blocks = blockManager.getAll();
 blockManager.render(blocks.filter(
 block => block.get('category') == 'sections'
 ));
 // Or a new set from an array
 blockManager.render([
 {label: 'Label text', content: '<div>Content</div>'}
 ]);
 // Back to blocks from the global collection
 blockManager.render();
 ```
 Returns **[HTMLElement][11]** Rendered element
 [1]: #add
 [2]: #get
 [3]: #getall
 [4]: #getallvisible
 [5]: #getcategories
 [6]: #getcontainer
 [7]: #render
 [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [11]: https://developer.mozilla.org/docs/Web/HTML/Element
--- a/docs/api/commands.md
+++ b/docs/api/commands.md
@ -0,0 +1,116 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## Commands
 -   [add][1]
 -   [get][2]
 -   [has][3]
 You can init the editor with all necessary commands via configuration
 ```js
 var editor = grapesjs.init({
 	...
 commands: {...} // Check below for the properties
 	...
 });
 ```
 Before using methods you should get first the module from the editor instance, in this way:
 ```js
 var 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
 Add new command to the collection
 ### Parameters
 -   `id` **[string][6]** Command's ID
 -   `command` **([Object][4] \| [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).
 ### Examples
 ```javascript
 commands.add('myCommand', {
 	run(editor, sender) {
 		alert('Hello world!');
 	},
 	stop(editor, sender) {
 	},
 });
 // As a function
 commands.add('myCommand2', editor => { ... });
 ```
 Returns **this** 
 ## get
 Get command by ID
 ### Parameters
 -   `id` **[string][6]** Command's ID
 ### Examples
 ```javascript
 var myCommand = commands.get('myCommand');
 myCommand.run();
 ```
 Returns **[Object][4]** Object representing the command
 ## has
 Check if command exists
 ### Parameters
 -   `id` **[string][6]** Command's ID
 Returns **[Boolean][8]** 
 [1]: #add
 [2]: #get
 [3]: #has
 [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
--- a/docs/api/components.md
+++ b/docs/api/components.md
@ -0,0 +1,187 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## 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:
 ```js
 var domComponents = editor.DomComponents;
 ```
 ### 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
 ```javascript
 ...
 domComponents: {
   components: '<div>Hello world!</div>',
 }
 // Or
 domComponents: {
   components: [
     { tagName: 'span', style: {color: 'red'}, content: 'Hello'},
     { style: {width: '100px', content: 'world!'}}
   ],
 }
 ...
 ```
 ## load
 Load components from the passed object, if the object is empty will try to fetch them
 autonomously from the selected storage
 The fetched data will be added to the collection
 ### Parameters
 -   `data` **[Object][8]** Object of data to load (optional, default `''`)
 Returns **[Object][8]** Loaded data
 ## store
 Store components on the selected storage
 ### Parameters
 -   `noStore` **[Boolean][11]** If true, won't store
 Returns **[Object][8]** Data to store
 ## getWrapper
 Returns root component inside the canvas. Something like <body> inside HTML page
 The wrapper doesn't differ from the original Component Model
 ### Examples
 ```javascript
 // Change background of the wrapper and set some attribute
 var wrapper = domComponents.getWrapper();
 wrapper.set('style', {'background-color': 'red'});
 wrapper.set('attributes', {'title': 'Hello!'});
 ```
 Returns **Component** Root Component
 ## getComponents
 Returns wrapper's children collection. Once you have the collection you can
 add other Components(Models) inside. Each component can have several nested
 components inside and you can nest them as more as you wish.
 ### Examples
 ```javascript
 // Let's add some component
 var wrapperChildren = domComponents.getComponents();
 var comp1 = wrapperChildren.add({
  style: { 'background-color': 'red'}
 });
 var comp2 = wrapperChildren.add({
  tagName: 'span',
  attributes: { title: 'Hello!'}
 });
 // Now let's add an other one inside first component
 // First we have to get the collection inside. Each
 // component has 'components' property
 var comp1Children = comp1.get('components');
 // Procede as before. You could also add multiple objects
 comp1Children.add([
  { style: { 'background-color': 'blue'}},
  { style: { height: '100px', width: '100px'}}
 ]);
 // Remove comp2
 wrapperChildren.remove(comp2);
 ```
 Returns **Components** Collection of components
 ## addComponent
 Add new components to the wrapper's children. It's the same
 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 `{}`)
 ### Examples
 ```javascript
 // Example of a new component with some extra property
 var comp1 = domComponents.addComponent({
  tagName: 'div',
  removable: true, // Can't remove it
  draggable: true, // Can't move it
  copyable: true, // Disable copy/past
  content: 'Content text', // Text inside component
  style: { color: 'red'},
  attributes: { title: 'here' }
 });
 ```
 Returns **(Component | [Array][10]&lt;Component>)** Component/s added
 ## render
 Render and returns wrapper element with all components inside.
 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]** 
 ## clear
 Remove all components
 Returns **this** 
 [1]: #getwrapper
 [2]: #getcomponents
 [3]: #addcomponent
 [4]: #clear
 [5]: #load
 [6]: #store
 [7]: #render
 [8]: 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/Array
 [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 [12]: https://developer.mozilla.org/docs/Web/HTML/Element
--- a/docs/api/css_composer.md
+++ b/docs/api/css_composer.md
@ -0,0 +1,199 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## CssComposer
 This module contains and manage CSS rules for the template inside the canvas
 Before using the methods you should get first the module from the editor instance, in this way:
 ```js
 var cssComposer = editor.CssComposer;
 ```
 ### Parameters
 -   `config` **[Object][1]** Configurations
    -   `config.rules` **([string][2] \| [Array][3]&lt;[Object][1]>)** CSS string or an array of rule objects (optional, default `[]`)
 ### Examples
 ```javascript
 ...
 CssComposer: {
   rules: '.myClass{ color: red}',
 }
 ```
 ## load
 Load data from the passed object, if the object is empty will try to fetch them
 autonomously from the storage manager.
 The fetched data will be added to the collection
 ### Parameters
 -   `data` **[Object][1]** Object of data to load
 Returns **[Object][1]** Loaded rules
 ## store
 Store data to the selected storage
 ### Parameters
 -   `noStore` **[Boolean][4]** If true, won't store
 Returns **[Object][1]** Data to store
 ## add
 Add new rule to the collection, if not yet exists with the same selectors
 ### Parameters
 -   `selectors` **[Array][3]&lt;Selector>** Array of selectors
 -   `state` **[String][2]** Css rule state
 -   `width` **[String][2]** For which device this style is oriented
 -   `opts` **[Object][1]** Other options for the rule (optional, default `{}`)
 ### Examples
 ```javascript
 var sm = editor.SelectorManager;
 var sel1 = sm.add('myClass1');
 var sel2 = sm.add('myClass2');
 var rule = cssComposer.add([sel1, sel2], 'hover');
 rule.set('style', {
  width: '100px',
  color: '#fff',
 });
 ```
 Returns **Model** 
 ## get
 Get the rule
 ### Parameters
 -   `selectors` **[Array][3]&lt;Selector>** Array of selectors
 -   `state` **[String][2]** Css rule state
 -   `width` **[String][2]** For which device this style is oriented
 -   `ruleProps` **[Object][1]** Other rule props
 ### Examples
 ```javascript
 var sm = editor.SelectorManager;
 var sel1 = sm.add('myClass1');
 var sel2 = sm.add('myClass2');
 var rule = cssComposer.get([sel1, sel2], 'hover');
 // Update the style
 rule.set('style', {
  width: '300px',
  color: '#000',
 });
 ```
 Returns **(Model | null)** 
 ## getAll
 Get the collection of rules
 Returns **Collection** 
 ## clear
 Remove all rules
 Returns **this** 
 ## setIdRule
 Add/update the CSS rule with id selector
 ### Parameters
 -   `name` **[string][2]** Id selector name, eg. 'my-id'
 -   `style` **[Object][1]** Style properties and values (optional, default `{}`)
 -   `opts` **[Object][1]** Custom options, like `state` and `mediaText` (optional, default `{}`)
 ### Examples
 ```javascript
 const rule = cc.setIdRule('myid', { color: 'red' });
 const ruleHover = cc.setIdRule('myid', { color: 'blue' }, { state: 'hover' });
 // This will add current CSS:
 // #myid { color: red }
 // #myid:hover { color: blue }
 ```
 Returns **CssRule** The new/updated rule
 ## getIdRule
 Get the CSS rule by id selector
 ### Parameters
 -   `name` **[string][2]** Id selector name, eg. 'my-id'
 -   `opts` **[Object][1]** Custom options, like `state` and `mediaText` (optional, default `{}`)
 ### Examples
 ```javascript
 const rule = cc.getIdRule('myid');
 const ruleHover = cc.setIdRule('myid', { state: 'hover' });
 ```
 Returns **CssRule** 
 ## setClassRule
 Add/update the CSS rule with class selector
 ### Parameters
 -   `name` **[string][2]** Class selector name, eg. 'my-class'
 -   `style` **[Object][1]** Style properties and values (optional, default `{}`)
 -   `opts` **[Object][1]** Custom options, like `state` and `mediaText` (optional, default `{}`)
 ### Examples
 ```javascript
 const rule = cc.setClassRule('myclass', { color: 'red' });
 const ruleHover = cc.setClassRule('myclass', { color: 'blue' }, { state: 'hover' });
 // This will add current CSS:
 // .myclass { color: red }
 // .myclass:hover { color: blue }
 ```
 Returns **CssRule** The new/updated rule
 ## getClassRule
 Get the CSS rule by class selector
 ### Parameters
 -   `name` **[string][2]** Class selector name, eg. 'my-class'
 -   `opts` **[Object][1]** Custom options, like `state` and `mediaText` (optional, default `{}`)
 ### Examples
 ```javascript
 const rule = cc.getClassRule('myclass');
 const ruleHover = cc.getClassRule('myclass', { state: 'hover' });
 ```
 Returns **CssRule** 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
--- a/docs/api/device_manager.md
+++ b/docs/api/device_manager.md
@ -0,0 +1,65 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## DeviceManager
 Before using methods you should get first the module from the editor instance, in this way:
 ```js
 var deviceManager = editor.DeviceManager;
 ```
 ## add
 Add new device to the collection. URLs are supposed to be unique
 ### Parameters
 -   `name` **[string][1]** Device name
 -   `width` **[string][1]** Width of the device
 -   `opts` **[Object][2]** Custom options
 ### Examples
 ```javascript
 deviceManager.add('Tablet', '900px');
 deviceManager.add('Tablet2', '900px', {
 height: '300px',
 widthMedia: '810px', // the width that will be used for the CSS media
 });
 ```
 Returns **Device** Added device
 ## get
 Return device by name
 ### Parameters
 -   `name` **[string][1]** Name of the device
 ### Examples
 ```javascript
 var device = deviceManager.get('Tablet');
 console.log(JSON.stringify(device));
 // {name: 'Tablet', width: '900px'}
 ```
 ## getAll
 Return all devices
 ### Examples
 ```javascript
 var devices = deviceManager.getAll();
 console.log(JSON.stringify(devices));
 // [{name: 'Desktop', width: ''}, ...]
 ```
 Returns **Collection** 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
--- a/docs/api/editor.md
+++ b/docs/api/editor.md
@ -1,3 +1,535 @@
-# Editor
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
-Editor API
+## $
 Editor class contains the top level API which you'll probably use to custom the editor or extend it with plugins.
 You get the Editor instance on init method
 ```js
 var editor = grapesjs.init({...});
 ```
 # Available Events
 ## Components
 -   `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
 -   `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback
 -   `component:clone` - Triggered when a new component is added by a clone command, the model is passed as an argument to the callback
 -   `component:update` - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback
 -   `component:update:{propertyName}` - Listen any property change, the model is passed as an argument to the callback
 -   `component:styleUpdate` - Triggered when the style of the component is updated, the model is passed as an argument to the callback
 -   `component:styleUpdate:{propertyName}` - Listen for a specific style property change, the model is passed as an argument to the callback
 -   `component:selected` - New component selected, the selected model is passed as an argument to the callback
 -   `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback
 -   `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback
 ## Blocks
 -   `block:add` - New block added
 -   `block:remove` - Block removed
 -   `block:drag:start` - Started dragging block, model of the block is passed as an argument
 -   `block:drag` - Dragging block, the block's model and the drag event are passed as arguments
 -   `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
 ## Assets
 -   `asset:add` - New asset added
 -   `asset:remove` - Asset removed
 -   `asset:upload:start` - Before the upload is started
 -   `asset:upload:end` - After the upload is ended
 -   `asset:upload:error` - On any error in upload, passes the error as an argument
 -   `asset:upload:response` - On upload response, passes the result as an argument
 ## Keymaps
 -   `keymap:add` - New keymap added. The new keyamp object is passed as an argument
 -   `keymap:remove` - Keymap removed. The removed keyamp object is passed as an argument
 -   `keymap:emit` - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
 -   `keymap:emit:{keymapId}` - `keymapId` emitted, in arguments you get keymapId, shortcutUsed, Event
 ## Style Manager
 -   `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
 -   `styleManager:change:{propertyName}` - As above but for a specific style property
 ## Storages
 -   `storage:start` - Before the storage request is started
 -   `storage:start:store` - Before the store request. The object to store is passed as an argumnet (which you can edit)
 -   `storage:start:load` - Before the load request. Items to load are passed as an argumnet (which you can edit)
 -   `storage:load` - Triggered when something was loaded from the storage, loaded object passed as an argumnet
 -   `storage:store` - Triggered when something is stored to the storage, stored object passed as an argumnet
 -   `storage:end` - After the storage request is ended
 -   `storage:end:store` - After the store request
 -   `storage:end:load` - After the load request
 -   `storage:error` - On any error on storage request, passes the error as an argument
 -   `storage:error:store` - Error on store request, passes the error as an argument
 -   `storage:error:load` - Error on load request, passes the error as an argument
 ## Canvas
 -   `canvas:dragenter` - When something is dragged inside the canvas, `DataTransfer` instance passed as an argument
 -   `canvas:dragover` - When something is dragging on canvas, `DataTransfer` instance passed as an argument
 -   `canvas:drop` - Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments
 -   `canvas:dragend` - When a drag operation is ended, `DataTransfer` instance passed as an argument
 -   `canvas:dragdata` - On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
    By changing `result.content` you're able to customize what is dropped
 ## Selectors
 -   `selector:add` - Triggers when a new selector/class is created
 ## RTE
 -   `rte:enable` - RTE enabled. The view, on which RTE is enabled, is passed as an argument
 -   `rte:disable` - RTE disabled. The view, on which RTE is disabled, is passed as an argument
 ## Commands
 -   `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview'))
 -   `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
 -   `run:{commandName}:before` - Triggered before the command is called
 -   `stop:{commandName}:before` - Triggered before the command is called to stop
 -   `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)
 ## General
 -   `canvasScroll` - Triggered when the canvas is scrolle
 -   `undo` - Undo executed
 -   `redo` - Redo executed
 -   `load` - When the editor is loaded
 ### Parameters
 -   `config` **[Object][1]** Configurations
    -   `config.container` **[string][2]** ='' Selector for the editor container, eg. '#myEditor'
    -   `config.components` **([string][2] \| [Array][3]&lt;[Object][1]>)** HTML string or object of components (optional, default `''`)
    -   `config.style` **([string][2] \| [Array][3]&lt;[Object][1]>)** CSS string or object of rules (optional, default `''`)
    -   `config.fromElement` **[Boolean][4]** If true, will fetch HTML and CSS from selected container (optional, default `false`)
    -   `config.undoManager` **[Boolean][4]** Enable/Disable undo manager (optional, default `true`)
    -   `config.autorender` **[Boolean][4]** If true renders editor on init (optional, default `true`)
    -   `config.noticeOnUnload` **[Boolean][4]** Enable/Disable alert message before unload the page (optional, default `true`)
    -   `config.height` **[string][2]** Height for the editor container (optional, default `'900px'`)
    -   `config.width` **[string][2]** Width for the editor container (optional, default `'100%'`)
    -   `config.storage` **[Object][1]** Storage manager configuration, see the relative documentation (optional, default `{}`)
    -   `config.styleManager` **[Object][1]** Style manager configuration, see the relative documentation (optional, default `{}`)
    -   `config.commands` **[Object][1]** Commands configuration, see the relative documentation (optional, default `{}`)
    -   `config.domComponents` **[Object][1]** Components configuration, see the relative documentation (optional, default `{}`)
    -   `config.panels` **[Object][1]** Panels configuration, see the relative documentation (optional, default `{}`)
    -   `config.showDevices` **[Object][1]** If true render a select of available devices inside style manager panel (optional, default `true`)
    -   `config.keepEmptyTextNodes` **[Boolean][4]** If false, removes empty text nodes when parsed (unless they contain a space) (optional, default `false`)
    -   `config.defaultCommand` **[string][2]** Command to execute when no other command is running (optional, default `'select-comp'`)
    -   `config.plugins` **[Array][3]** Array of plugins to execute on start (optional, default `[]`)
    -   `config.pluginsOpts` **[Object][1]** Custom options for plugins (optional, default `{}`)
 ### Examples
 ```javascript
 var editor = grapesjs.init({
  container : '#gjs',
  components: '<div class="txt-red">Hello world!</div>',
  style: '.txt-red{color: red}',
 });
 ```
 ## AssetManager
 ## getConfig
 Returns configuration object
 ### Parameters
 -   `prop` **[string][2]?** Property name
 Returns **any** Returns the configuration object or
 the value of the specified property
 ## getHtml
 Returns HTML built inside canvas
 ### Parameters
 -   `opts`  
 Returns **[string][2]** HTML string
 ## getCss
 Returns CSS built inside canvas
 ### Parameters
 -   `opts` **[Object][1]** Options (optional, default `{}`)
 Returns **[string][2]** CSS string
 ## getJs
 Returns JS of all components
 Returns **[string][2]** JS string
 ## getComponents
 Returns components in JSON format object
 Returns **[Object][1]** 
 ## setComponents
 Set components inside editor's canvas. This method overrides actual components
 ### Parameters
 -   `components` **([Array][3]&lt;[Object][1]> | [Object][1] \| [string][2])** HTML string or components model
 ### Examples
 ```javascript
 editor.setComponents('<div class="cls">New component</div>');
 // or
 editor.setComponents({
 type: 'text',
  classes:['cls'],
  content: 'New component'
 });
 ```
 Returns **this** 
 ## addComponents
 Add components
 ### Parameters
 -   `components` **([Array][3]&lt;[Object][1]> | [Object][1] \| [string][2])** HTML string or components model
 -   `opts` **[Object][1]** Options
    -   `opts.avoidUpdateStyle` **[Boolean][4]** If the HTML string contains styles,
        by default, they will be created and, if already exist, updated. When this option
        is true, styles already created will not be updated. (optional, default `false`)
 ### Examples
 ```javascript
 editor.addComponents('<div class="cls">New component</div>');
 // or
 editor.addComponents({
 type: 'text',
  classes:['cls'],
  content: 'New component'
 });
 ```
 Returns **(Model | [Array][3]&lt;Model>)** 
 ## getStyle
 Returns style in JSON format object
 Returns **[Object][1]** 
 ## setStyle
 Set style inside editor's canvas. This method overrides actual style
 ### Parameters
 -   `style` **([Array][3]&lt;[Object][1]> | [Object][1] \| [string][2])** CSS string or style model
 ### Examples
 ```javascript
 editor.setStyle('.cls{color: red}');
 //or
 editor.setStyle({
  selectors: ['cls']
  style: { color: 'red' }
 });
 ```
 Returns **this** 
 ## getSelected
 Returns the last selected component, if there is one
 Returns **Model** 
 ## getSelectedAll
 Returns an array of all selected components
 Returns **[Array][3]** 
 ## getSelectedToStyle
 Get a stylable entity from the selected component.
 If you select a component without classes the entity is the Component
 itself and all changes will go inside its 'style' attribute. Otherwise,
 if the selected component has one or more classes, the function will
 return the corresponding CSS Rule
 Returns **Model** 
 ## select
 Select a component
 ### Parameters
 -   `el` **(Component | [HTMLElement][5])** Component to select
 ### Examples
 ```javascript
 // Select dropped block
 editor.on('block:drag:stop', function(model) {
 editor.select(model);
 });
 ```
 Returns **this** 
 ## selectAdd
 Add component to selection
 ### Parameters
 -   `el` **(Component | [HTMLElement][5] \| [Array][3])** Component to select
 ### Examples
 ```javascript
 editor.selectAdd(model);
 ```
 Returns **this** 
 ## selectRemove
 Remove component from selection
 ### Parameters
 -   `el` **(Component | [HTMLElement][5] \| [Array][3])** Component to select
 ### Examples
 ```javascript
 editor.selectRemove(model);
 ```
 Returns **this** 
 ## selectToggle
 Toggle component selection
 ### Parameters
 -   `el` **(Component | [HTMLElement][5] \| [Array][3])** Component to select
 ### Examples
 ```javascript
 editor.selectToggle(model);
 ```
 Returns **this** 
 ## setDevice
 Set device to the editor. If the device exists it will
 change the canvas to the proper width
 ### Parameters
 -   `name` **[string][2]** Name of the device
 ### Examples
 ```javascript
 editor.setDevice('Tablet');
 ```
 Returns **this** 
 ## getDevice
 Return the actual active device
 ### Examples
 ```javascript
 var device = editor.getDevice();
 console.log(device);
 // 'Tablet'
 ```
 Returns **[string][2]** Device name
 ## runCommand
 Execute command
 ### Parameters
 -   `id` **[string][2]** Command ID
 -   `options` **[Object][1]** Custom options (optional, default `{}`)
 ### Examples
 ```javascript
 editor.runCommand('myCommand', {someValue: 1});
 ```
 Returns **any** The return is defined by the command
 ## stopCommand
 Stop the command if stop method was provided
 ### Parameters
 -   `id` **[string][2]** Command ID
 -   `options` **[Object][1]** Custom options (optional, default `{}`)
 ### Examples
 ```javascript
 editor.stopCommand('myCommand', {someValue: 1});
 ```
 Returns **any** The return is defined by the command
 ## store
 Store data to the current storage
 ### Parameters
 -   `clb` **[Function][6]** Callback function
 Returns **[Object][1]** Stored data
 ## load
 Load data from the current storage
 ### Parameters
 -   `clb` **[Function][6]** Callback function
 Returns **[Object][1]** Stored data
 ## getContainer
 Returns container element. The one which was indicated as 'container'
 on init method
 Returns **[HTMLElement][5]** 
 ## getDirtyCount
 Return the count of changes made to the content and not yet stored.
 This count resets at any `store()`
 Returns **[number][7]** 
 ## setCustomRte
 Replace the built-in Rich Text Editor with a custom one.
 ### Parameters
 -   `obj` **[Object][1]** Custom RTE Interface
 ### Examples
 ```javascript
 editor.setCustomRte({
  // Function for enabling custom RTE
  // el is the HTMLElement of the double clicked Text Component
  // rte is the same instance you have returned the first time you call
  // enable(). This is useful if need to check if the RTE is already enabled so
  // ion this case you'll need to return the RTE and the end of the function
  enable: function(el, rte) {
    rte = new MyCustomRte(el, {}); // this depends on the Custom RTE API
    ...
    return rte; // return the RTE instance
  },
  // Disable the editor, called for example when you unfocus the Text Component
 disable: function(el, rte) {
    rte.blur(); // this depends on the Custom RTE API
 }
 // Called when the Text Component is focused again. If you returned the RTE instance
 // from the enable function, the enable won't be called again instead will call focus,
 // in this case to avoid double binding of the editor
 focus: function (el, rte) {
  rte.focus(); // this depends on the Custom RTE API
 }
 });
 ```
 ## on
 Attach event
 ### Parameters
 -   `event` **[string][2]** Event name
 -   `callback` **[Function][6]** Callback function
 Returns **this** 
 ## off
 Detach event
 ### Parameters
 -   `event` **[string][2]** Event name
 -   `callback` **[Function][6]** Callback function
 Returns **this** 
 ## trigger
 Trigger event
 ### Parameters
 -   `event` **[string][2]** Event to trigger
 Returns **this** 
 ## destroy
 Destroy the editor
 ## render
 Render editor
 Returns **[HTMLElement][5]** 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 [5]: https://developer.mozilla.org/docs/Web/HTML/Element
 [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
--- a/docs/api/keymaps.md
+++ b/docs/api/keymaps.md
@ -0,0 +1,99 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## isString
 This module allows to create shortcuts for functions and commands (via command id)
 You can access the module in this way
 ```js
 const keymaps = editor.Keymaps;
 ```
 ## getConfig
 Get module configurations
 Returns **[Object][1]** Configuration object
 ## add
 Add new keymap
 ### Parameters
 -   `id` **[string][2]** Keymap id
 -   `keys` **[string][2]** Keymap keys, eg. `ctrl+a`, `⌘+z, ctrl+z`
 -   `handler` **([Function][3] \| [string][2])** Keymap handler, might be a function
 ### Examples
 ```javascript
 // 'ns' is just a custom namespace
 keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => {
 console.log('do stuff');
 });
 // or
 keymaps.add('ns:my-keymap', '⌘+s, ctrl+s', 'some-gjs-command');
 // listen to events
 editor.on('keymap:emit', (id, shortcut, e) => {
 // ...
 })
 ```
 Returns **[Object][1]** Added keymap
 or just a command id as a string
 ## get
 Get the keymap by id
 ### Parameters
 -   `id` **[string][2]** Keymap id
 ### Examples
 ```javascript
 keymaps.get('ns:my-keymap');
 // -> {keys, handler};
 ```
 Returns **[Object][1]** Keymap object
 ## getAll
 Get all keymaps
 ### Examples
 ```javascript
 keymaps.getAll();
 // -> {id1: {}, id2: {}};
 ```
 Returns **[Object][1]** 
 ## remove
 Remove the keymap by id
 ### Parameters
 -   `id` **[string][2]** Keymap id
 ### Examples
 ```javascript
 keymaps.remove('ns:my-keymap');
 // -> {keys, handler};
 ```
 Returns **[Object][1]** Removed keymap
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
--- a/docs/api/modal_dialog.md
+++ b/docs/api/modal_dialog.md
@ -0,0 +1,99 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## Modal
 -   [open][1]
 -   [close][2]
 -   [isOpen][3]
 -   [setTitle][4]
 -   [getTitle][5]
 -   [setContent][6]
 -   [getContent][7]
 Before using the methods you should get first the module from the editor instance, in this way:
 ```js
 var modal = editor.Modal;
 ```
 ## open
 Open the modal window
 Returns **this** 
 ## close
 Close the modal window
 Returns **this** 
 ## isOpen
 Checks if the modal window is open
 Returns **[Boolean][8]** 
 ## setTitle
 Set the title to the modal window
 ### Parameters
 -   `title` **[string][9]** Title
 ### Examples
 ```javascript
 modal.setTitle('New title');
 ```
 Returns **this** 
 ## getTitle
 Returns the title of the modal window
 Returns **[string][9]** 
 ## setContent
 Set the content of the modal window
 ### Parameters
 -   `content` **([string][9] \| [HTMLElement][10])** Content
 ### Examples
 ```javascript
 modal.setContent('<div>Some HTML content</div>');
 ```
 Returns **this** 
 ## getContent
 Get the content of the modal window
 Returns **[string][9]** 
 [1]: #open
 [2]: #close
 [3]: #isopen
 [4]: #settitle
 [5]: #gettitle
 [6]: #setcontent
 [7]: #getcontent
 [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [10]: https://developer.mozilla.org/docs/Web/HTML/Element
--- a/docs/api/panels.md
+++ b/docs/api/panels.md
@ -0,0 +1,240 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## Panels
 -   [addPanel][1]
 -   [addButton][2]
 -   [removeButton][3]
 -   [getButton][4]
 -   [getPanel][5]
 -   [getPanels][6]
 -   [render][7]
 This module manages panels and buttons inside the editor.
 You can init the editor with all panels and buttons necessary via configuration
 ```js
 var editor = grapesjs.init({
  ...
 panels: {...} // Check below for the possible properties
  ...
 });
 ```
 Before using methods you should get first the module from the editor instance, in this way:
 ```js
 var panelManager = editor.Panels;
 ```
 ### Parameters
 -   `config` **[Object][8]** Configurations
    -   `config.defaults` **[Array][9]&lt;[Object][8]>** Array of possible panels (optional, default `[]`)
 ### Examples
 ```javascript
 ...
 panels: {
   defaults: [{
     id: 'main-toolbar',
     buttons: [{
       id: 'btn-id',
       className: 'some',
       attributes: {
         title: 'MyTitle'
       }
     }],
    }],
 }
 ...
 ```
 ## init
 Initialize module. Automatically called with a new instance of the editor
 ### Parameters
 -   `config` **[Object][8]** Configurations
 ## getPanels
 Returns the collection of panels
 Returns **Collection** Collection of panel
 ## getPanelsEl
 Returns panels element
 Returns **[HTMLElement][10]** 
 ## addPanel
 Add new panel to the collection
 ### Parameters
 -   `panel` **([Object][8] | Panel)** Object with right properties or an instance of Panel
 ### Examples
 ```javascript
 var newPanel = panelManager.addPanel({
  id: 'myNewPanel',
 visible  : true,
 buttons  : [...],
 });
 ```
 Returns **Panel** Added panel. Useful in case passed argument was an Object
 ## removePanel
 Remove a panel from the collection
 ### Parameters
 -   `panel` **([Object][8] | Panel | [String][11])** Object with right properties or an instance of Panel or Painel id
 ### Examples
 ```javascript
 const newPanel = panelManager.removePanel({
  id: 'myNewPanel',
 visible  : true,
 buttons  : [...],
 });
 const newPanel = panelManager.removePanel('myNewPanel');
 ```
 Returns **Panel** Removed panel. Useful in case passed argument was an Object
 ## getPanel
 Get panel by ID
 ### Parameters
 -   `id` **[string][11]** Id string
 ### Examples
 ```javascript
 var myPanel = panelManager.getPanel('myNewPanel');
 ```
 Returns **(Panel | null)** 
 ## addButton
 Add button to the panel
 ### Parameters
 -   `panelId` **[string][11]** Panel's ID
 -   `button` **([Object][8] | Button)** Button object or instance of Button
 ### Examples
 ```javascript
 var newButton = panelManager.addButton('myNewPanel',{
  id: 'myNewButton',
  className: 'someClass',
  command: 'someCommand',
  attributes: { title: 'Some title'},
  active: false,
 });
 // It's also possible to pass the command as an object
 // with .run and .stop methods
 ...
 command: {
  run: function(editor) {
    ...
  },
  stop: function(editor) {
    ...
  }
 },
 // Or simply like a function which will be evaluated as a single .run command
 ...
 command: function(editor) {
  ...
 }
 ```
 Returns **(Button | null)** Added button. Useful in case passed button was an Object
 ## removeButton
 Remove button from the panel
 ### Parameters
 -   `panelId` **[string][11]** Panel's ID
 -   `button` **([Object][8] | Button | [String][11])** Button object or instance of Button or button id
 ### Examples
 ```javascript
 const removedButton = panelManager.removeButton('myNewPanel',{
  id: 'myNewButton',
  className: 'someClass',
  command: 'someCommand',
  attributes: { title: 'Some title'},
  active: false,
 });
 // It's also possible to use the button id
 const removedButton = panelManager.removeButton('myNewPanel','myNewButton');
 ```
 Returns **(Button | null)** Removed button.
 ## getButton
 Get button from the panel
 ### Parameters
 -   `panelId` **[string][11]** Panel's ID
 -   `id` **[string][11]** Button's ID
 ### Examples
 ```javascript
 var button = panelManager.getButton('myPanel','myButton');
 ```
 Returns **(Button | null)** 
 ## render
 Render panels and buttons
 Returns **[HTMLElement][10]** 
 [1]: #addpanel
 [2]: #addbutton
 [3]: #removebutton
 [4]: #getbutton
 [5]: #getpanel
 [6]: #getpanels
 [7]: #render
 [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [10]: https://developer.mozilla.org/docs/Web/HTML/Element
 [11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
--- a/docs/api/rich_text_editor.md
+++ b/docs/api/rich_text_editor.md
@ -0,0 +1,115 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## RichTextEditor
 This module allows to customize the toolbar of the Rich Text Editor and use commands from the HTML Editing APIs.
 For more info about HTML Editing APIs check here:
 [https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand][1]
 It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize')
 and leave this task to the Style Manager.
 Before using methods you should get first the module from the editor instance, in this way:
 ```js
 var rte = editor.RichTextEditor;
 ```
 ## add
 Add a new action to the built-in RTE toolbar
 ### Parameters
 -   `name` **[string][2]** Action name
 -   `action` **[Object][3]** Action options (optional, default `{}`)
 ### Examples
 ```javascript
 rte.add('bold', {
  icon: '<b>B</b>',
  attributes: {title: 'Bold',}
  result: rte => rte.exec('bold')
 });
 rte.add('link', {
  icon: document.getElementById('t'),
  attributes: {title: 'Link',}
  // Example on it's easy to wrap a selected content
  result: rte => rte.insertHTML(`<a href="#">${rte.selection()}</a>`)
 });
 // An example with fontSize
 rte.add('fontSize', {
  icon: `<select class="gjs-field">
        <option>1</option>
        <option>4</option>
        <option>7</option>
      </select>`,
    // Bind the 'result' on 'change' listener
  event: 'change',
  result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
  // Callback on any input change (mousedown, keydown, etc..)
  update: (rte, action) => {
    const value = rte.doc.queryCommandValue(action.name);
    if (value != 'false') { // value is a string
      action.btn.firstChild.value = value;
    }
   }
  })
 ```
 ## get
 Get the action by its name
 ### Parameters
 -   `name` **[string][2]** Action name
 ### Examples
 ```javascript
 const action = rte.get('bold');
 // {name: 'bold', ...}
 ```
 Returns **[Object][3]** 
 ## getAll
 Get all actions
 Returns **[Array][4]** 
 ## remove
 Remove the action from the toolbar
 ### Parameters
 -   `name` **[string][2]** 
 ### Examples
 ```javascript
 const action = rte.remove('bold');
 // {name: 'bold', ...}
 ```
 Returns **[Object][3]** Removed action
 ## getToolbarEl
 Get the toolbar element
 Returns **[HTMLElement][5]** 
 [1]: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [5]: https://developer.mozilla.org/docs/Web/HTML/Element
--- a/docs/api/selector_manager.md
+++ b/docs/api/selector_manager.md
@ -0,0 +1,132 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## SelectorManager
 Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better this concept let's take
 a look at this code:
 ```css
 span > #send-btn.btn{
 ...
 }
 ```
 ```html
 <span>
  <button id="send-btn" class="btn"></button>
 </span>
 ```
 In this scenario we get:
 span     -> selector of type `tag`
 send-btn -> selector of type `id`
 btn      -> selector of type `class`
 So, for example, being `btn` the same class entity it'll be easier to refactor and track things.
 Before using methods you should get first the module from the editor instance, in this way:
 ```js
 var selectorManager = editor.SelectorManager;
 ```
 ### Parameters
 -   `config` **[Object][1]** Configurations
    -   `config.selectors` **[Array][2]&lt;[Object][1]>** Default selectors (optional, default `[]`)
    -   `config.states` **[Array][2]&lt;[Object][1]>** Default states (optional, default `[]`)
    -   `config.label` **[String][3]** Classes label (optional, default `'Classes'`)
    -   `config.statesLabel` **[String][3]** The empty state label (optional, default `'- State -'`)
 ### Examples
 ```javascript
 ...
 {
 selectors: [
   {name:'myselector1'},
    ...
 ],
 states: [{
   name: 'hover', label: 'Hover'
 },{
   name: 'active', label: 'Click'
 }],
 statesLabel: '- Selecte State -',
 }
 ```
 Returns **this** 
 ## add
 Add a new selector to collection if it's not already exists. Class type is a default one
 ### Parameters
 -   `name` **[String][3]** Selector name
 -   `opts` **[Object][1]** Selector options (optional, default `{}`)
    -   `opts.label` **[String][3]** Label for the selector, if it's not provided the label will be the same as the name (optional, default `''`)
    -   `opts.type` **[String][3]** Type of the selector. At the moment, only 'class' (1) is available (optional, default `1`)
 ### Examples
 ```javascript
 var selector = selectorManager.add('selectorName');
 // Same as
 var selector = selectorManager.add('selectorName', {
  type: 1,
  label: 'selectorName'
 });
 ```
 Returns **Model** 
 ## addClass
 Add class selectors
 ### Parameters
 -   `classes` **([Array][2] \| [string][3])** Array or string of classes
 ### Examples
 ```javascript
 sm.addClass('class1');
 sm.addClass('class1 class2');
 sm.addClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
 ```
 Returns **[Array][2]** Array of added selectors
 ## get
 Get the selector by its name
 ### Parameters
 -   `name` **[String][3]** Selector name
 -   `type`   (optional, default `Selector.TYPE_CLASS`)
 -   `tyoe` **[String][3]** Selector type
 ### Examples
 ```javascript
 var selector = selectorManager.get('selectorName');
 ```
 Returns **(Model | null)** 
 ## getAll
 Get all selectors
 Returns **Collection** 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
--- a/docs/api/storage_manager.md
+++ b/docs/api/storage_manager.md
@ -0,0 +1,169 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## index
 Before using methods you should get first the module from the editor instance, in this way:
 ```js
 var storageManager = editor.StorageManager;
 ```
 ## getConfig
 Get configuration object
 Returns **[Object][1]** 
 ## isAutosave
 Checks if autosave is enabled
 Returns **[Boolean][2]** 
 ## setAutosave
 Set autosave value
 ### Parameters
 -   `v` **[Boolean][2]** 
 Returns **this** 
 ## getStepsBeforeSave
 Returns number of steps required before trigger autosave
 Returns **[number][3]** 
 ## setStepsBeforeSave
 Set steps required before trigger autosave
 ### Parameters
 -   `v` **[number][3]** 
 Returns **this** 
 ## add
 Add new storage
 ### Parameters
 -   `id` **[string][4]** Storage ID
 -   `storage` **[Object][1]** Storage wrapper
    -   `storage.load` **[Function][5]** Load method
    -   `storage.store` **[Function][5]** Store method
 ### Examples
 ```javascript
 storageManager.add('local2', {
  load: function(keys, clb, clbErr) {
    var res = {};
    for (var i = 0, len = keys.length; i < len; i++){
      var v = localStorage.getItem(keys[i]);
      if(v) res[keys[i]] = v;
    }
    clb(res); // might be called inside some async method
    // In case of errors...
    // clbErr('Went something wrong');
  },
  store: function(data, clb, clbErr) {
    for(var key in data)
      localStorage.setItem(key, data[key]);
    clb(); // might be called inside some async method
  }
 });
 ```
 Returns **this** 
 ## get
 Returns storage by id
 ### Parameters
 -   `id` **[string][4]** Storage ID
 Returns **([Object][1] | null)** 
 ## getStorages
 Returns all storages
 Returns **[Array][6]** 
 ## getCurrent
 Returns current storage type
 Returns **[string][4]** 
 ## setCurrent
 Set current storage type
 ### Parameters
 -   `id` **[string][4]** Storage ID
 Returns **this** 
 ## store
 Store key-value resources in the current storage
 ### Parameters
 -   `data` **[Object][1]** Data in key-value format, eg. {item1: value1, item2: value2}
 -   `clb` **[Function][5]** Callback function
 ### Examples
 ```javascript
 storageManager.store({item1: value1, item2: value2});
 ```
 Returns **([Object][1] | null)** 
 ## load
 Load resource from the current storage by keys
 ### Parameters
 -   `keys` **([string][4] \| [Array][6]&lt;[string][4]>)** Keys to load
 -   `clb` **[Function][5]** Callback function
 ### Examples
 ```javascript
 storageManager.load(['item1', 'item2'], res => {
 // res -> {item1: value1, item2: value2}
 });
 storageManager.load('item1', res => {
 // res -> {item1: value1}
 });
 ```
 ## getCurrentStorage
 Get current storage
 Returns **Storage** 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
--- a/docs/api/style_manager.md
+++ b/docs/api/style_manager.md
@ -0,0 +1,304 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## StyleManager
 With Style Manager you basically build categories (called sectors) of CSS properties which could
 be used to custom components and classes.
 You can init the editor with all sectors and properties via configuration
 ```js
 var editor = grapesjs.init({
  ...
 styleManager: {...} // Check below for the possible properties
  ...
 });
 ```
 Before using methods you should get first the module from the editor instance, in this way:
 ```js
 var styleManager = editor.StyleManager;
 ```
 ### Parameters
 -   `config` **[Object][1]** Configurations
    -   `config.sectors` **[Array][2]&lt;[Object][1]>** Array of possible sectors (optional, default `[]`)
 ### Examples
 ```javascript
 ...
 styleManager: {
   sectors: [{
     id: 'dim',
     name: 'Dimension',
     properties: [{
       name: 'Width',
       property: 'width',
       type: 'integer',
       units: ['px', '%'],
       defaults: 'auto',
       min: 0,
 }],
    }],
 }
 ...
 ```
 ## init
 Initialize module. Automatically called with a new instance of the editor
 ### Parameters
 -   `config` **[Object][1]** Configurations
 ## addSector
 Add new sector to the collection. If the sector with the same id already exists,
 that one will be returned
 ### Parameters
 -   `id` **[string][3]** Sector id
 -   `sector` **[Object][1]** Object representing sector
    -   `sector.name` **[string][3]** Sector's label (optional, default `''`)
    -   `sector.open` **[Boolean][4]** Indicates if the sector should be opened (optional, default `true`)
    -   `sector.properties` **[Array][2]&lt;[Object][1]>** Array of properties (optional, default `[]`)
 ### Examples
 ```javascript
 var sector = styleManager.addSector('mySector',{
  name: 'My sector',
  open: true,
  properties: [{ name: 'My property'}]
 });
 ```
 Returns **Sector** Added Sector
 ## getSector
 Get sector by id
 ### Parameters
 -   `id` **[string][3]** Sector id
 ### Examples
 ```javascript
 var sector = styleManager.getSector('mySector');
 ```
 Returns **(Sector | null)** 
 ## removeSector
 Remove a sector by id
 ### Parameters
 -   `id` **[string][3]** Sector id
 ### Examples
 ```javascript
 const removed = styleManager.removeSector('mySector');
 ```
 Returns **Sector** Removed sector
 ## getSectors
 Get all sectors
 Returns **Sectors** Collection of sectors
 ## addProperty
 Add property to the sector identified by id
 ### Parameters
 -   `sectorId` **[string][3]** Sector id
 -   `property` **[Object][1]** Property object
    -   `property.name` **[string][3]** Name of the property (optional, default `''`)
    -   `property.property` **[string][3]** CSS property, eg. `min-height` (optional, default `''`)
    -   `property.type` **[string][3]** Type of the property: integer | radio | select | color | file | composite | stack (optional, default `''`)
    -   `property.units` **[Array][2]&lt;[string][3]>** Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default `[]`)
    -   `property.unit` **[string][3]** Default selected unit from `units`. Only for integer type (optional, default `''`)
    -   `property.min` **[number][5]** Min possible value. Only for integer type (optional, default `null`)
    -   `property.max` **[number][5]** Max possible value. Only for integer type (optional, default `null`)
    -   `property.defaults` **[string][3]** Default value (optional, default `''`)
    -   `property.info` **[string][3]** Some description (optional, default `''`)
    -   `property.icon` **[string][3]** Class name. If exists no text will be displayed (optional, default `''`)
    -   `property.preview` **[Boolean][4]** Show layers preview. Only for stack type (optional, default `false`)
    -   `property.functionName` **[string][3]** Indicates if value need to be wrapped in some function, for istance `transform: rotate(90deg)` (optional, default `''`)
    -   `property.properties` **[Array][2]&lt;[Object][1]>** Nested properties for composite and stack type (optional, default `[]`)
    -   `property.layers` **[Array][2]&lt;[Object][1]>** Layers for stack properties (optional, default `[]`)
    -   `property.list` **[Array][2]&lt;[Object][1]>** List of possible options for radio and select types (optional, default `[]`)
 ### Examples
 ```javascript
 var property = styleManager.addProperty('mySector',{
  name: 'Minimum height',
  property: 'min-height',
  type: 'select',
  defaults: '100px',
  list: [{
    value: '100px',
    name: '100',
   },{
     value: '200px',
     name: '200',
   }],
 });
 ```
 Returns **(Property | null)** Added Property or `null` in case sector doesn't exist
 ## getProperty
 Get property by its CSS name and sector id
 ### Parameters
 -   `sectorId` **[string][3]** Sector id
 -   `name` **[string][3]** CSS property name, eg. 'min-height'
 ### Examples
 ```javascript
 var property = styleManager.getProperty('mySector','min-height');
 ```
 Returns **(Property | null)** 
 ## removeProperty
 Remove a property from the sector
 ### Parameters
 -   `sectorId` **[string][3]** Sector id
 -   `name` **[string][3]** CSS property name, eg. 'min-height'
 ### Examples
 ```javascript
 const property = styleManager.removeProperty('mySector', 'min-height');
 ```
 Returns **Property** Removed property
 ## getProperties
 Get properties of the sector
 ### Parameters
 -   `sectorId` **[string][3]** Sector id
 ### Examples
 ```javascript
 var properties = styleManager.getProperties('mySector');
 ```
 Returns **Properties** Collection of properties
 ## getModelToStyle
 Get what to style inside Style Manager. If you select the component
 without classes the entity is the Component itself and all changes will
 go inside its 'style' property. Otherwise, if the selected component has
 one or more classes, the function will return the corresponding CSS Rule
 ### Parameters
 -   `model` **Model** 
 Returns **Model** 
 ## addType
 Add new property type
 ### Parameters
 -   `id` **[string][3]** Type ID
 -   `definition` **[Object][1]** 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) => {
       if (value && value.type == 'my-type') {
         return value;
       }
     },
    })
 ## getType
 Get type
 ### Parameters
 -   `id` **[string][3]** Type ID
 Returns **[Object][1]** Type definition
 ## getTypes
 Get all types
 Returns **[Array][2]** 
 ## createType
 Create new property from type
 ### Parameters
 -   `id` **[string][3]** Type ID
 -   `options` **[Object][1]** Options (optional, default `{}`)
    -   `options.model` **[Object][1]** Custom model object (optional, default `{}`)
    -   `options.view` **[Object][1]** Custom view object (optional, default `{}`)
 ### Examples
 ```javascript
 const propView = styleManager.createType('integer', {
 model: {units: ['px', 'rem']}
 });
 propView.render();
 propView.model.on('change:value', ...);
 someContainer.appendChild(propView.el);
 ```
 Returns **PropertyView** 
 ## render
 Render sectors and properties
 Returns **[HTMLElement][6]** 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 [4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 [5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 [6]: https://developer.mozilla.org/docs/Web/HTML/Element
--- a/docs/api/undo_manager.md
+++ b/docs/api/undo_manager.md
@ -0,0 +1,194 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 ## UndoManager
 This module allows to manage the stack of changes applied in canvas
 You can access the module in this way
 ```js
 const um = editor.UndoManager;
 ```
 ## getConfig
 Get module configurations
 ### Examples
 ```javascript
 const config = um.getConfig();
 // { ... }
 ```
 Returns **[Object][1]** Configuration object
 ## add
 Add an entity (Model/Collection) to track
 Note: New Components and CSSRules will be added automatically
 ### Parameters
 -   `entity` **(Model | Collection)** Entity to track
 ### Examples
 ```javascript
 um.add(someModelOrCollection);
 ```
 Returns **this** 
 ## remove
 Remove and stop tracking the entity (Model/Collection)
 ### Parameters
 -   `entity` **(Model | Collection)** Entity to remove
 ### Examples
 ```javascript
 um.remove(someModelOrCollection);
 ```
 Returns **this** 
 ## removeAll
 Remove all entities
 ### Examples
 ```javascript
 um.removeAll();
 ```
 Returns **this** 
 ## start
 Start/resume tracking changes
 ### Examples
 ```javascript
 um.start();
 ```
 Returns **this** 
 ## stop
 Stop tracking changes
 ### Examples
 ```javascript
 um.stop();
 ```
 Returns **this** 
 ## undo
 Undo last change
 ### Examples
 ```javascript
 um.undo();
 ```
 Returns **this** 
 ## undoAll
 Undo all changes
 ### Examples
 ```javascript
 um.undoAll();
 ```
 Returns **this** 
 ## redo
 Redo last change
 ### Examples
 ```javascript
 um.redo();
 ```
 Returns **this** 
 ## redoAll
 Redo all changes
 ### Examples
 ```javascript
 um.redoAll();
 ```
 Returns **this** 
 ## hasUndo
 Checks if exists an available undo
 ### Examples
 ```javascript
 um.hasUndo();
 ```
 Returns **[Boolean][2]** 
 ## hasRedo
 Checks if exists an available redo
 ### Examples
 ```javascript
 um.hasRedo();
 ```
 Returns **[Boolean][2]** 
 ## getStack
 Get stack of changes
 ### Examples
 ```javascript
 const stack = um.getStack();
 stack.each(item => ...);
 ```
 Returns **Collection** 
 ## clear
 Clear the stack
 ### Examples
 ```javascript
 um.clear();
 ```
 Returns **this** 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
--- a/package.json
+++ b/package.json
@ -90,6 +90,7 @@
    }
  },
  "scripts": {
    "docs:api": "node docs/api.js",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "lint": "eslint src",