From e48054725ce1d482b25114fa43f41be43b57a111 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 13 Aug 2019 18:07:06 +0200 Subject: [PATCH] deploy docs --- docs/404.html | 8 +- docs/Home.html | 22 +- docs/api/assets.html | 14 +- docs/api/block_manager.html | 12 +- docs/api/canvas.html | 12 +- docs/api/commands.html | 18 +- docs/api/component.html | 78 ++-- docs/api/components.html | 18 +- docs/api/css_composer.html | 14 +- docs/api/device_manager.html | 10 +- docs/api/editor.html | 29 +- docs/api/index.html | 8 +- docs/api/keymaps.html | 14 +- docs/api/modal_dialog.html | 10 +- docs/api/panels.html | 14 +- docs/api/rich_text_editor.html | 20 +- docs/api/selector_manager.html | 16 +- docs/api/storage_manager.html | 16 +- docs/api/style_manager.html | 17 +- docs/api/undo_manager.html | 10 +- docs/assets/css/0.styles.82db7b1e.css | 1 - docs/assets/css/styles.841d52ad.css | 1 + .../js/{6.9af8fc3b.js => 1.d88ab8c2.js} | 2 +- docs/assets/js/10.6d1da19c.js | 1 + docs/assets/js/10.a106a5cd.js | 1 - docs/assets/js/11.e1024e3c.js | 1 + docs/assets/js/11.e1d01d7f.js | 1 - .../js/{12.7b5df652.js => 12.ea2d0633.js} | 2 +- .../js/{13.2c86d6bb.js => 13.0aca6e95.js} | 2 +- docs/assets/js/14.3a556795.js | 1 + docs/assets/js/14.47aa7392.js | 1 - docs/assets/js/15.b8e65128.js | 1 + docs/assets/js/15.e5ae77bc.js | 1 - docs/assets/js/16.07b42741.js | 1 - docs/assets/js/16.9e8d0ee3.js | 1 + docs/assets/js/17.2a67de0b.js | 1 - docs/assets/js/17.fea2549e.js | 1 + docs/assets/js/18.112c9d7a.js | 1 + docs/assets/js/18.11c93f1e.js | 1 - docs/assets/js/19.7a13abf6.js | 1 - docs/assets/js/19.da3eb438.js | 1 + .../js/{3.651320c9.js => 2.3f947d80.js} | 2 +- docs/assets/js/20.abef129a.js | 1 + docs/assets/js/20.d98c3b22.js | 1 - docs/assets/js/21.3e3438bd.js | 1 - docs/assets/js/21.45665626.js | 1 + docs/assets/js/22.917f34a1.js | 1 - docs/assets/js/22.f3f10b93.js | 1 + docs/assets/js/23.85818d14.js | 1 + docs/assets/js/23.a1fe2201.js | 1 - docs/assets/js/24.6618a793.js | 1 + docs/assets/js/24.fefe1628.js | 1 - docs/assets/js/25.32714364.js | 1 - docs/assets/js/25.3fa3e444.js | 1 + docs/assets/js/26.0ba924f8.js | 1 - docs/assets/js/26.19837d20.js | 1 + docs/assets/js/27.442eb105.js | 1 - docs/assets/js/27.49115d17.js | 1 + docs/assets/js/28.0cb791cd.js | 1 + docs/assets/js/28.3d0efde8.js | 1 - docs/assets/js/29.60349f33.js | 1 + docs/assets/js/29.81c2faa9.js | 1 - .../js/{4.ccc41891.js => 3.58555975.js} | 2 +- docs/assets/js/30.331e996f.js | 1 - docs/assets/js/30.4f7b4a19.js | 1 + docs/assets/js/31.3f9b4c2f.js | 1 + docs/assets/js/31.456da170.js | 1 - docs/assets/js/32.2f2eecfd.js | 1 - docs/assets/js/32.2fb15c2c.js | 1 + docs/assets/js/33.10f2e2c4.js | 1 + docs/assets/js/33.5a21eeb2.js | 1 - docs/assets/js/34.b00a201b.js | 1 + docs/assets/js/34.e495786f.js | 1 - docs/assets/js/35.842b3faa.js | 1 + docs/assets/js/35.e59a311f.js | 1 - docs/assets/js/36.8c67e6e8.js | 1 - docs/assets/js/36.cf215dd2.js | 1 + docs/assets/js/37.1f4e9422.js | 1 + docs/assets/js/37.ea48a200.js | 1 - docs/assets/js/38.41db2434.js | 1 + docs/assets/js/38.49bb9e38.js | 1 - docs/assets/js/39.2eeb020a.js | 1 - docs/assets/js/39.ff6ba2ff.js | 1 + .../js/{7.224c3fec.js => 4.c61ce6cc.js} | 2 +- docs/assets/js/40.2afed73e.js | 1 + docs/assets/js/40.5c633dc6.js | 1 - docs/assets/js/41.17bf3b3b.js | 1 - docs/assets/js/41.8a6c4d0c.js | 1 + docs/assets/js/42.ac8b349a.js | 1 + docs/assets/js/42.b82b73fe.js | 1 - docs/assets/js/43.24b80d23.js | 1 - docs/assets/js/43.53781928.js | 1 + docs/assets/js/44.ee1dfbc2.js | 1 + .../js/{2.434af1ad.js => 5.763a4c86.js} | 2 +- docs/assets/js/6.06855135.js | 1 + .../js/{5.20d1ecdf.js => 7.de412c56.js} | 2 +- docs/assets/js/8.2eb536bf.js | 1 + docs/assets/js/8.e9d59c3e.js | 1 - docs/assets/js/9.7883b5a7.js | 1 + docs/assets/js/9.9f34d8b5.js | 1 - docs/assets/js/app.841d52ad.js | 8 + docs/assets/js/app.a18f26bb.js | 8 - docs/default-link-comp.jpg | Bin 0 -> 7246 bytes docs/docs-init-link-trait.jpg | Bin 0 -> 5621 bytes docs/docs-link-trait-raw.jpg | Bin 0 -> 8865 bytes docs/faq.html | 8 +- docs/getting-started.html | 48 +-- docs/guides/Custom-CSS-parser.html | 24 +- docs/guides/Replace-Rich-Text-Editor.html | 16 +- docs/index.html | 8 +- docs/modules/Assets.html | 40 +- docs/modules/Blocks.html | 16 +- docs/modules/Commands.html | 38 +- docs/modules/Components-js.html | 34 +- docs/modules/Components-new.html | 361 ++++++++++++++++ docs/modules/Components.html | 64 +-- docs/modules/Plugins.html | 24 +- docs/modules/Storage.html | 34 +- docs/modules/Style-manager.html | 8 +- docs/modules/Traits.html | 391 ++++++++++++++---- 120 files changed, 1094 insertions(+), 484 deletions(-) delete mode 100644 docs/assets/css/0.styles.82db7b1e.css create mode 100644 docs/assets/css/styles.841d52ad.css rename docs/assets/js/{6.9af8fc3b.js => 1.d88ab8c2.js} (70%) create mode 100644 docs/assets/js/10.6d1da19c.js delete mode 100644 docs/assets/js/10.a106a5cd.js create mode 100644 docs/assets/js/11.e1024e3c.js delete mode 100644 docs/assets/js/11.e1d01d7f.js rename docs/assets/js/{12.7b5df652.js => 12.ea2d0633.js} (97%) rename docs/assets/js/{13.2c86d6bb.js => 13.0aca6e95.js} (86%) create mode 100644 docs/assets/js/14.3a556795.js delete mode 100644 docs/assets/js/14.47aa7392.js create mode 100644 docs/assets/js/15.b8e65128.js delete mode 100644 docs/assets/js/15.e5ae77bc.js delete mode 100644 docs/assets/js/16.07b42741.js create mode 100644 docs/assets/js/16.9e8d0ee3.js delete mode 100644 docs/assets/js/17.2a67de0b.js create mode 100644 docs/assets/js/17.fea2549e.js create mode 100644 docs/assets/js/18.112c9d7a.js delete mode 100644 docs/assets/js/18.11c93f1e.js delete mode 100644 docs/assets/js/19.7a13abf6.js create mode 100644 docs/assets/js/19.da3eb438.js rename docs/assets/js/{3.651320c9.js => 2.3f947d80.js} (71%) create mode 100644 docs/assets/js/20.abef129a.js delete mode 100644 docs/assets/js/20.d98c3b22.js delete mode 100644 docs/assets/js/21.3e3438bd.js create mode 100644 docs/assets/js/21.45665626.js delete mode 100644 docs/assets/js/22.917f34a1.js create mode 100644 docs/assets/js/22.f3f10b93.js create mode 100644 docs/assets/js/23.85818d14.js delete mode 100644 docs/assets/js/23.a1fe2201.js create mode 100644 docs/assets/js/24.6618a793.js delete mode 100644 docs/assets/js/24.fefe1628.js delete mode 100644 docs/assets/js/25.32714364.js create mode 100644 docs/assets/js/25.3fa3e444.js delete mode 100644 docs/assets/js/26.0ba924f8.js create mode 100644 docs/assets/js/26.19837d20.js delete mode 100644 docs/assets/js/27.442eb105.js create mode 100644 docs/assets/js/27.49115d17.js create mode 100644 docs/assets/js/28.0cb791cd.js delete mode 100644 docs/assets/js/28.3d0efde8.js create mode 100644 docs/assets/js/29.60349f33.js delete mode 100644 docs/assets/js/29.81c2faa9.js rename docs/assets/js/{4.ccc41891.js => 3.58555975.js} (67%) delete mode 100644 docs/assets/js/30.331e996f.js create mode 100644 docs/assets/js/30.4f7b4a19.js create mode 100644 docs/assets/js/31.3f9b4c2f.js delete mode 100644 docs/assets/js/31.456da170.js delete mode 100644 docs/assets/js/32.2f2eecfd.js create mode 100644 docs/assets/js/32.2fb15c2c.js create mode 100644 docs/assets/js/33.10f2e2c4.js delete mode 100644 docs/assets/js/33.5a21eeb2.js create mode 100644 docs/assets/js/34.b00a201b.js delete mode 100644 docs/assets/js/34.e495786f.js create mode 100644 docs/assets/js/35.842b3faa.js delete mode 100644 docs/assets/js/35.e59a311f.js delete mode 100644 docs/assets/js/36.8c67e6e8.js create mode 100644 docs/assets/js/36.cf215dd2.js create mode 100644 docs/assets/js/37.1f4e9422.js delete mode 100644 docs/assets/js/37.ea48a200.js create mode 100644 docs/assets/js/38.41db2434.js delete mode 100644 docs/assets/js/38.49bb9e38.js delete mode 100644 docs/assets/js/39.2eeb020a.js create mode 100644 docs/assets/js/39.ff6ba2ff.js rename docs/assets/js/{7.224c3fec.js => 4.c61ce6cc.js} (71%) create mode 100644 docs/assets/js/40.2afed73e.js delete mode 100644 docs/assets/js/40.5c633dc6.js delete mode 100644 docs/assets/js/41.17bf3b3b.js create mode 100644 docs/assets/js/41.8a6c4d0c.js create mode 100644 docs/assets/js/42.ac8b349a.js delete mode 100644 docs/assets/js/42.b82b73fe.js delete mode 100644 docs/assets/js/43.24b80d23.js create mode 100644 docs/assets/js/43.53781928.js create mode 100644 docs/assets/js/44.ee1dfbc2.js rename docs/assets/js/{2.434af1ad.js => 5.763a4c86.js} (72%) create mode 100644 docs/assets/js/6.06855135.js rename docs/assets/js/{5.20d1ecdf.js => 7.de412c56.js} (68%) create mode 100644 docs/assets/js/8.2eb536bf.js delete mode 100644 docs/assets/js/8.e9d59c3e.js create mode 100644 docs/assets/js/9.7883b5a7.js delete mode 100644 docs/assets/js/9.9f34d8b5.js create mode 100644 docs/assets/js/app.841d52ad.js delete mode 100644 docs/assets/js/app.a18f26bb.js create mode 100644 docs/default-link-comp.jpg create mode 100644 docs/docs-init-link-trait.jpg create mode 100644 docs/docs-link-trait-raw.jpg create mode 100644 docs/modules/Components-new.html diff --git a/docs/404.html b/docs/404.html index e74fe88ea..58c3ab67f 100644 --- a/docs/404.html +++ b/docs/404.html @@ -8,12 +8,12 @@ - - - + + +

404

There's nothing here.
Take me home.
- + diff --git a/docs/Home.html b/docs/Home.html index 3aac5e9ae..46abce83f 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -8,9 +8,9 @@ - - - + + +
@@ -28,17 +28,17 @@
GitHub

Getting started

This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.

The pretty minimalistic way to instantiate the editor could be like this:

<link rel="stylesheet" href="path/to/grapes.min.css">
-<script src="path/to/grapes.min.js"></script>
+<script src="path/to/grapes.min.js"></script>
 
 <div id="gjs"></div>
 
-<script type="text/javascript">
+<script type="text/javascript">
   var editor = grapesjs.init({
       container : '#gjs',
       components: '<div class="txt-red">Hello world!</div>',
       style: '.txt-red{color: red}',
   });
-</script>
+</script>

In just few lines, with the default configurations, you're already able to see something with which play around.

[[img/default-gjs.jpg]]

You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.

Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)

[[img/canvas-panels.jpg]]

If you'd like to extend the already instantiated editor you have to check API Reference. Check also how to create plugins using the same API. In this guide we'll focus on how to initialize the editor with all custom UI from scratch.

Let's start the editor with some basic toolbar panel

...
 var editor = grapesjs.init({
@@ -80,13 +80,13 @@ In this guide we'll focus on how to initialize the editor with all custom UI fro
     defaults: [{
         id: 'helloWorld',
 
-        run:  function(editor, senderBtn){
+        run:  function(editor, senderBtn){
           alert('Hello world!');
           // Deactivate button
-          senderBtn.set('active', false);
+          senderBtn.set('active', false);
         },
 
-        stop:  function(editor, senderBtn){
+        stop:  function(editor, senderBtn){
         },
     }]
   }
@@ -323,13 +323,13 @@ The default one is the localStorage which is pretty simple and all the data are
   commands: {
     defaults: [{
         id: 'storeData',
-        run:  function(editor, senderBtn){
+        run:  function(editor, senderBtn){
           editor.store();
         },
     }]
   }
 ...

Check Storage Manager API Reference

Edit this page on GitHub
Last Updated: 7/13/2018, 12:12:35 AM
- + diff --git a/docs/api/assets.html b/docs/api/assets.html index c6843a284..9b7fac77a 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -8,9 +8,9 @@ - - - + + +
@@ -49,7 +49,7 @@ assetManager.},{ src: './path/to/img.png', }]); -

Returns Model

get

Returns the asset by URL

Parameters

Examples

var asset = assetManager.get('http://img.jpg');
+

Returns Model

get

Returns the asset by URL

Parameters

Examples

var asset = assetManager.get('http://img.jpg');

Returns Object 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

Examples

assetManager.remove('http://img.jpg');

Returns this

store

Store assets data to the selected storage

Parameters

Examples

var assets = assetManager.store();

Returns Object Data to store

load

Load data from the passed object. @@ -63,7 +63,7 @@ assetManager.// Render some of the assets const assets = assetManager.getAll(); assetManager.render(assets.filter( - asset => asset.get('category') == 'cats' + asset => asset.get('category') == 'cats' ));

Returns HTMLElement

addType

Add new type. If you want to get more about type definition we suggest to read the module's page

Parameters

Examples

assetManager.addType('my-type', {
  model: {},
  view: {},
- isType: (value) => {},
+ isType: (value) => {},
 })

getType

Get type

Parameters

Returns Object Type definition

getTypes

Get types

Returns Array

Edit this page on GitHub
Last Updated: 7/8/2018, 1:46:22 PM

←

+ diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index f662b3b6e..3a56835be 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -8,9 +8,9 @@ - - - + + +
@@ -46,7 +46,7 @@ The string will be converted in: title: 'Insert h1 block' } }); -

Returns Block Added block

get

Return the block by id

Parameters

Examples

const block = blockManager.get('h1-block');
+

Returns Block Added block

get

Return the block by id

Parameters

Examples

const block = blockManager.get('h1-block');
 console.log(JSON.stringify(block));
 // {label: 'Heading', content: '<h1>Put your ...', ...}

getAll

Return all blocks

Examples

const blocks = blockManager.getAll();
@@ -59,7 +59,7 @@ blockManager.// Render new set of blocks
 const blocks = blockManager.getAll();
-const filtered = blocks.filter(block => block.get('category') == 'sections')
+const filtered = blocks.filter(block => block.get('category') == 'sections')
 
 blockManager.render(filtered);
 // Or a new set from an array
@@ -80,6 +80,6 @@ document.get
           Commands
          →

- + diff --git a/docs/api/canvas.html b/docs/api/canvas.html index a4f6b969b..15a9c11b8 100644 --- a/docs/api/canvas.html +++ b/docs/api/canvas.html @@ -8,9 +8,9 @@ - - - + + +
@@ -33,7 +33,7 @@ } })

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const canvas = editor.Canvas;
-

getConfig

Get the configuration object

Returns Object

getElement

Get the canvas element

Returns HTMLElement

getFrameEl

Get the iframe element of the canvas

Returns HTMLIFrameElement

getWindow

Get the window instance of the iframe element

Returns Window

getDocument

Get the document of the iframe element

Returns HTMLDocument

getBody

Get the body of the iframe element

Returns HTMLBodyElement

getWrapperEl

Get the wrapper element containing all the components

Returns HTMLElement

setCustomBadgeLabel

Set custom badge naming strategy

Parameters

Examples

canvas.setCustomBadgeLabel(function(component){
+

getConfig

Get the configuration object

Returns Object

getElement

Get the canvas element

Returns HTMLElement

getFrameEl

Get the iframe element of the canvas

Returns HTMLIFrameElement

getWindow

Get the window instance of the iframe element

Returns Window

getDocument

Get the document of the iframe element

Returns HTMLDocument

getBody

Get the body of the iframe element

Returns HTMLBodyElement

getWrapperEl

Get the wrapper element containing all the components

Returns HTMLElement

setCustomBadgeLabel

Set custom badge naming strategy

Parameters

Examples

canvas.setCustomBadgeLabel(function(component){
  return component.getName();
 });

getRect

Get canvas rectangular data

Returns Object

hasFocus

Check if the canvas is focused

Returns Boolean

scrollTo

Scroll canvas to the element if it's not visible. The scrolling is @@ -45,13 +45,13 @@ passed to it. For instance, you can scroll smoothly by using canvas.scrollTo(selected, { behavior: 'smooth' }); // Force the scroll, even if the element is alredy visible canvas.scrollTo(selected, { force: true }); -

setZoom

Set zoom value

Parameters

Returns this

getZoom

Get zoom value

Returns Number

Edit this page on GitHub
Last Updated: 3/11/2019, 6:17:19 PM

+

setZoom

Set zoom value

Parameters

Returns this

getZoom

Get zoom value

Returns Number

Edit this page on GitHub
Last Updated: 5/2/2019, 1:28:33 AM

← Asset Manager →

- + diff --git a/docs/api/commands.html b/docs/api/commands.html index fe10a07d2..603cc9ab6 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -8,9 +8,9 @@ - - - + + +
@@ -36,15 +36,15 @@

add

Add new command to the collection

Parameters

Examples

commands.add('myCommand', {
-	run(editor, sender) {
+	run(editor, sender) {
 		alert('Hello world!');
 	},
-	stop(editor, sender) {
+	stop(editor, sender) {
 	},
 });
 // As a function
-commands.add('myCommand2', editor => { ... });
-

Returns this

get

Get command by ID

Parameters

Examples

var myCommand = commands.get('myCommand');
+commands.add('myCommand2', editor => { ... });
+

Returns this

get

Get command by ID

Parameters

Examples

var myCommand = commands.get('myCommand');
 myCommand.run();

Returns Object Object representing the command

extend

Extend the command. The command to extend should be defined as an object

Parameters

Examples

commands.extend('old-command', {
  someInnerFunction() {
@@ -64,13 +64,13 @@ commands.isA
 // -> false

Returns Boolean

getActive

Get all active commands

Examples

console.log(commands.getActive());
 // -> { someCommand: itsLastReturn, anotherOne: ... };
-

Returns Object

Edit this page on GitHub
Last Updated: 8/26/2018, 2:24:48 PM

+

Returns Object

Edit this page on GitHub
Last Updated: 5/2/2019, 1:28:33 AM

← DOM Components →

- + diff --git a/docs/api/component.html b/docs/api/component.html index fc42bcefb..ed7fc577f 100644 --- a/docs/api/component.html +++ b/docs/api/component.html @@ -8,9 +8,9 @@ - - - + + +
@@ -27,15 +27,15 @@ Twitter
GitHub -

Component

The Component object represents a single node of our template structure, so when you update its properties the changes are +

Component

The Component object represents a single node of our template structure, so when you update its properties the changes are immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all the tree of nodes). -An example on how to update properties:

component.set({
+An example on how to update properties:
component.set({
  tagName: 'span',
  attributes: { ... },
  removable: false,
 });
-component.get('tagName');
+component.get('tagName');
 // -> 'span'
 
 Properties
  • typeString? Component type, eg. text, image, video, etc.
  • tagNameString? HTML tag of the component, eg. span. Default: div
  • attributesObject? Key-value object of the component's attributes, eg. { title: 'Hello' } Default: {}
  • nameString? Name of the component. Will be used, for example, in Layers and badges
  • removableBoolean? When true the component is removable from the canvas, default: true
  • draggable(Boolean | String)? Indicates if it's possible to drag the component inside others.
 You can also specify a query string to indentify elements,
@@ -43,48 +43,50 @@ eg. '.some-class[title=Hello], [data-gjs-type=column]' means you ca
 containing some-class class and Hello title, and column components. Default: true
  • droppable(Boolean | String)? Indicates if it's possible to drop other components inside. You can use
 a query string as with draggable. Default: true
  • badgableBoolean? Set to false if you don't want to see the badge (with the name) over the component. Default: true
  • stylable(Boolean | Array<String>)? True if it's possible to style the component.
 You can also indicate an array of CSS properties which is possible to style, eg. ['color', 'width'], all other properties
-will be hidden from the style manager. Default: true
  • stylable-requireArray<String>? Indicate an array of style properties to show up which has been marked as toRequire. Default: []
  • unstylableArray<String>? Indicate an array of style properties which should be hidden from the style manager. Default: []
  • style-signatureArray<String>? This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: ''
  • highlightableBoolean? It can be highlighted with 'dotted' borders if true. Default: true
  • copyableBoolean? True if it's possible to clone the component. Default: true
  • resizableBoolean? Indicates if it's possible to resize the component. It's also possible to pass an object as options for the Resizer. Default: false
  • editableBoolean? Allow to edit the content of the component (used on Text components). Default: false
  • layerableBoolean? Set to false if you need to hide the component inside Layers. Default: true
  • selectableBoolean? Allow component to be selected when clicked. Default: true
  • hoverableBoolean? Shows a highlight outline when hovering on the element if true. Default: true
  • voidBoolean? This property is used by the HTML exporter as void elements don't have closing tags, eg. <br/>, <hr/>, etc. Default: false
  • contentString? Content of the component (not escaped) which will be appended before children rendering. Default: ''
  • iconString? Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ''. Default: ''
  • script(String | Function)? Component's javascript. More about it here. Default: ''
  • traitsArray<(Object | String)>? Component's traits. More about it here. Default: ['id', 'title']
  • propagateArray<String>? Indicates an array of properties which will be inhereted by all NEW appended children.
+will be hidden from the style manager. Default: true
  • stylable-requireArray<String>? Indicate an array of style properties to show up which has been marked as toRequire. Default: []
  • unstylableArray<String>? Indicate an array of style properties which should be hidden from the style manager. Default: []
  • style-signatureArray<String>? This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: ''
  • highlightableBoolean? It can be highlighted with 'dotted' borders if true. Default: true
  • copyableBoolean? True if it's possible to clone the component. Default: true
  • resizableBoolean? Indicates if it's possible to resize the component. It's also possible to pass an object as options for the Resizer. Default: false
  • editableBoolean? Allow to edit the content of the component (used on Text components). Default: false
  • layerableBoolean? Set to false if you need to hide the component inside Layers. Default: true
  • selectableBoolean? Allow component to be selected when clicked. Default: true
  • hoverableBoolean? Shows a highlight outline when hovering on the element if true. Default: true
  • voidBoolean? This property is used by the HTML exporter as void elements don't have closing tags, eg. <br/>, <hr/>, etc. Default: false
  • contentString? Content of the component (not escaped) which will be appended before children rendering. Default: ''
  • iconString? Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string ''. Default: ''
  • script(String | Function)? Component's javascript. More about it here. Default: ''
  • script-export(String | Function)? You can specify javascript available only in export functions (eg. when you get the HTML).
+If this property is defined it will overwrite the script one (in export functions). Default: ''
  • traitsArray<(Object | String)>? Component's traits. More about it here. Default: ['id', 'title']
  • propagateArray<String>? Indicates an array of properties which will be inhereted by all NEW appended children.
 For example if you create a component likes this: { removable: false, draggable: false, propagate: ['removable', 'draggable'] }
 and append some new component inside, the new added component will get the exact same properties indicated in the propagate array (and the propagate property itself). Default: []
  • toolbarArray<Object>? Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
 Eg. toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ].
 By default, when toolbar property is falsy the editor will add automatically commands like move, delete, etc. based on its properties.
  • componentsCollection<Component>? Children components. Default: null
 init
Hook method, called once the model is created
 updated
Hook method, called when the model has been updated (eg. updated some model's property)
 Parameters
  • propertyString Property name, if triggered after some property update
  • valueany Property value, if triggered after some property update
  • previousany Property previous value, if triggered after some property update
 removed
Hook method, called once the model has been removed
 is
Check component's type
 Parameters
 Examples
component.is('image')
 // -> false
-
Returns Boolean
 index
Get the index of the component in the parent collection.
Returns Number
 find
Find inner components by query string.
-ATTENTION: this method works only with already rendered component
 Parameters
 Examples
component.find('div > .class');
+
Returns Boolean
 props
Return all the propeties
Returns Object
 index
Get the index of the component in the parent collection.
Returns Number
 setDragMode
Change the drag mode of the component.
+To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
 Parameters
  • valueString Drag mode, options: 'absolute' | 'translate'
Returns this
 find
Find inner components by query string.
+ATTENTION: this method works only with already rendered component
 Parameters
 Examples
component.find('div > .class');
 // -> [Component, Component, ...]
 
Returns Array Array of components
 findType
Find all inner components by component id.
 The advantage of this method over find is that you can use it
-also before rendering the component
 Parameters
 Examples
const allImages = component.findType('image');
+also before rendering the component
 Parameters
 Examples
const allImages = component.findType('image');
 console.log(allImages[0]) // prints the first found component
 
Returns Array<Component>
 closest
Find the closest parent component by query string.
-ATTENTION: this method works only with already rendered component
 Parameters
 Examples
component.closest('div.some-class');
+ATTENTION: this method works only with already rendered component
 Parameters
 Examples
component.closest('div.some-class');
 // -> Component
-
Returns Component
 replaceWith
Replace a component with another one
 Parameters
 Examples
component.replaceWith('<div>Some new content</div>');
+
Returns Component
 replaceWith
Replace a component with another one
 Parameters
 Examples
component.replaceWith('<div>Some new content</div>');
 // -> Component
-
Returns (Component | Array<Component>) New added component/s
 setAttributes
Update attributes of the component
 Parameters
  • attrsObject Key value attributes
  • opts   (optional, default {})
 Examples
component.setAttributes({ id: 'test', 'data-key': 'value' });
-
Returns this
 addAttributes
Add attributes to the component
 Parameters
  • attrsObject Key value attributes
 Examples
component.addAttributes({ 'data-key': 'value' });
-
Returns this
 getStyle
Get the style of the component
Returns Object
 setStyle
Set the style on the component
 Parameters
  • propObject Key value style object (optional, default {})
  • opts   (optional, default {})
 Examples
component.setStyle({ color: 'red' });
-
Returns Object
 getAttributes
Return all component's attributes
Returns Object
 addClass
Add classes
 Parameters
 Examples
model.addClass('class1');
+
Returns (Component | Array<Component>) New added component/s
 setAttributes
Update attributes of the component
 Parameters
  • attrsObject Key value attributes
  • opts   (optional, default {})
 Examples
component.setAttributes({ id: 'test', 'data-key': 'value' });
+
Returns this
 addAttributes
Add attributes to the component
 Parameters
  • attrsObject Key value attributes
 Examples
component.addAttributes({ 'data-key': 'value' });
+
Returns this
 getStyle
Get the style of the component
Returns Object
 setStyle
Set the style on the component
 Parameters
  • propObject Key value style object (optional, default {})
  • opts   (optional, default {})
 Examples
component.setStyle({ color: 'red' });
+
Returns Object
 getAttributes
Return all component's attributes
Returns Object
 addClass
Add classes
 Parameters
 Examples
model.addClass('class1');
 model.addClass('class1 class2');
 model.addClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
Returns Array Array of added selectors
 setClass
Set classes (resets current collection)
 Parameters
 Examples
model.setClass('class1');
+
Returns Array Array of added selectors
 setClass
Set classes (resets current collection)
 Parameters
 Examples
model.setClass('class1');
 model.setClass('class1 class2');
 model.setClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
Returns Array Array of added selectors
 removeClass
Remove classes
 Parameters
 Examples
model.removeClass('class1');
+
Returns Array Array of added selectors
 removeClass
Remove classes
 Parameters
 Examples
model.removeClass('class1');
 model.removeClass('class1 class2');
 model.removeClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
Returns Array Array of removed selectors
 getClasses
Returns component's classes as an array of strings
Returns Array
 append
Add new component children
 Parameters
  • components(Component | String) Component to add
  • optsObject Options, same as in model.add()(from backbone) (optional, default {})
 Examples
someComponent.get('components').length // -> 0
+
Returns Array Array of removed selectors
 getClasses
Returns component's classes as an array of strings
Returns Array
 append
Add new component children
 Parameters
  • components(Component | String) Component to add
  • optsObject Options, same as in model.add()(from backbone) (optional, default {})
 Examples
someComponent.get('components').length // -> 0
 const videoComponent = someComponent.append('<video></video><div></div>')[0];
 // This will add 2 components (`video` and `div`) to your `someComponent`
-someComponent.get('components').length // -> 2
+someComponent.get('components').length // -> 2
 // You can pass components directly
 otherComponent.append(otherComponent2);
 otherComponent.append([otherComponent3, otherComponent4]);
 
Returns Array Array of appended components
 components
Set new collection if components are provided, otherwise the
-current collection is returned
 Parameters
 Examples
// Set new collection
+current collection is returned
 Parameters
 Examples
// Set new collection
 component.components('<span></span><div></div>');
 // Get current collection
 const collection = component.components();
@@ -92,27 +94,27 @@ console.log<
 // -> 2
 
Returns (Collection | Array<Component>)
 parent
Get the parent component, if exists
 Examples
component.parent();
 // -> Component
-
Returns Component
 getTrait
Get the trait by id/name
 Parameters
  • idString The id or name of the trait
 Examples
const traitTitle = component.getTrait('title');
-traitTitle && traitTitle.set('label', 'New label');
-
Returns Trait Trait model
 updateTrait
Update a trait
 Parameters
  • idString The id or name of the trait
  • propsObject Object with the props to update
 Examples
component.updateTrait('title', {
+
Returns Component
 getTrait
Get the trait by id/name
 Parameters
  • idString The id or name of the trait
 Examples
const traitTitle = component.getTrait('title');
+traitTitle && traitTitle.set('label', 'New label');
+
Returns Trait Trait model
 updateTrait
Update a trait
 Parameters
  • idString The id or name of the trait
  • propsObject Object with the props to update
 Examples
component.updateTrait('title', {
  type: 'select',
  options: [ 'Option 1', 'Option 2' ],
 });
 
Returns this
 getTraitIndex
Get the trait position index by id/name. Useful in case you want to
-replace some trait, at runtime, with something else.
 Parameters
  • idString The id or name of the trait
 Examples
const traitTitle = component.getTraitIndex('title');
+replace some trait, at runtime, with something else.
 Parameters
  • idString The id or name of the trait
 Examples
const traitTitle = component.getTraitIndex('title');
 console.log(traitTitle); // 1
-
Returns Number Index position of the current trait
 removeTrait
Remove trait/s by id/s.
 Parameters
 Examples
component.removeTrait('title');
+
Returns Number Index position of the current trait
 removeTrait
Remove trait/s by id/s.
 Parameters
 Examples
component.removeTrait('title');
 component.removeTrait(['title', 'id']);
-
Returns Array Array of removed traits
 addTrait
Add trait/s by id/s.
 Parameters
 Examples
component.addTrat('title', { at: 1 }); // Add title trait (`at` option is the position index)
-component.addTrat({
+
Returns Array Array of removed traits
 addTrait
Add trait/s by id/s.
 Parameters
 Examples
component.addTrait('title', { at: 1 }); // Add title trait (`at` option is the position index)
+component.addTrait({
  type: 'checkbox',
  name: 'disabled',
 });
-component.addTrat(['title', {...}, ...]);
-
Returns Array Array of added traits
 getName
Get the name of the component
Returns String
 getIcon
Get the icon string
Returns String
 toHTML
Return HTML string of the component
 Parameters
  • optsObject Options (optional, default {})
+component.addTrait(['title', {...}, ...]);
+
Returns Array Array of added traits
 getName
Get the name of the component
Returns String
 getIcon
Get the icon string
Returns String
 toHTML
Return HTML string of the component
 Parameters
  • optsObject Options (optional, default {})
 
    • opts.attributes(Object | Function) You can pass an object of custom attributes to replace
 with the current one or you can even pass a function to generate attributes dynamically (optional, default null)
 Examples
// Simple HTML return
-component.set({ tagName: 'span' });
+component.set({ tagName: 'span' });
 component.setAttributes({ title: 'Hello' });
 component.toHTML();
 // -> <span title="Hello"></span>
@@ -123,30 +125,30 @@ component.to
 
 // Custom dynamic attributes
 component.toHTML({
- attributes(component, attributes) {
-   if (component.get('tagName') == 'span') {
+ attributes(component, attributes) {
+   if (component.get('tagName') == 'span') {
      attributes.title = 'Custom attribute';
    }
    return attributes;
  },
 });
 // -> <span title="Custom attribute"></span>
-
Returns String HTML string
 getId
Return the component id
Returns String
 setId
Set new id on the component
 Parameters
Returns this
 getEl
Get the DOM element of the component.
+
Returns String HTML string
 getId
Return the component id
Returns String
 setId
Set new id on the component
 Parameters
Returns this
 getEl
Get the DOM element of the component.
 This works only if the component is already rendered
Returns HTMLElement
 getView
Get the View of the component.
-This works only if the component is already rendered
Returns ComponentView
 onAll
Execute callback function on itself and all inner components
 Parameters
  • clbFunction Callback function, the model is passed as an argument
 Examples
component.onAll(component => {
+This works only if the component is already rendered
Returns ComponentView
 onAll
Execute callback function on itself and all inner components
 Parameters
  • clbFunction Callback function, the model is passed as an argument
 Examples
component.onAll(component => {
  // do something with component
 })
 
Returns this
 remove
Remove the component
Returns this
 getList
The list of components is taken from the Components module.
 Initially, the list, was set statically on the Component object but it was
-not ok, as it was shared between multiple editor instances
 Parameters
  • model
 checkId
This method checks, for each parsed component and style object
+not ok, as it was shared between multiple editor instances
 Parameters
  • model
 checkId
This method checks, for each parsed component and style object
 (are not Components/CSSRules yet), for duplicated id and fixes them
-This method is used in Components.js just after the parsing
 Parameters
  • components
  • styles   (optional, default [])
  • list   (optional, default {})
Edit this page on GitHub
Last Updated: 3/11/2019, 6:17:19 PM

+This method is used in Components.js just after the parsing
 Parameters
  • components
  • styles   (optional, default [])
  • list   (optional, default {})
Edit this page on GitHub
Last Updated: 5/2/2019, 1:28:33 AM

         ← 
           Panels
          →
- + diff --git a/docs/api/components.html b/docs/api/components.html index 26ae9499f..e30339fc6 100644 --- a/docs/api/components.html +++ b/docs/api/components.html @@ -8,9 +8,9 @@ - - - + + +

DomComponents

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

const editor = grapesjs.init({
+

DomComponents

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

const editor = grapesjs.init({
  domComponents: {
    // options
  }
@@ -38,8 +38,8 @@ autonomously from the selected storage
 The fetched data will be added to the collection
 Parameters
  • dataObject Object of data to load (optional, default '')
Returns Object Loaded data
 store
Store components on the selected storage
 Parameters
  • noStoreBoolean If true, won't store
Returns Object 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
// Change background of the wrapper and set some attribute
 var wrapper = domComponents.getWrapper();
-wrapper.set('style', {'background-color': 'red'});
-wrapper.set('attributes', {'title': 'Hello!'});
+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
// Let's add some component
@@ -54,7 +54,7 @@ components inside and you can nest them as more as you wish.
// 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');
+var comp1Children = comp1.get('components');
 // Procede as before. You could also add multiple objects
 comp1Children.add([
   { style: { 'background-color': 'blue'}},
@@ -79,13 +79,13 @@ 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
 clear
Remove all components
Returns this
 addType
Add new component type.
 Read more about this in Define New Component
 Parameters
Returns this
 getType
Get component type.
-Read more about this in Define New Component
 Parameters
Returns Object Component type defintion, eg. { model: ..., view: ... }
 getTypes
Return the array of all types
Returns Array
Edit this page on GitHub
Last Updated: 1/5/2019, 1:17:11 AM

+Read more about this in Define New Component
 Parameters
Returns Object Component type defintion, eg. { model: ..., view: ... }
 removeType
Remove component type
 Parameters
Returns (Object | undefined) Removed component type, undefined otherwise
 getTypes
Return the array of all types
Returns Array
Edit this page on GitHub
Last Updated: 1/5/2019, 1:17:11 AM

         ← 
            - Component
          →
- + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index c451b8a5a..70f774274 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -8,9 +8,9 @@ - - - + + +
@@ -40,16 +40,16 @@ The fetched data will be added to the collection

var sel1 = sm.add('myClass1'); var sel2 = sm.add('myClass2'); var rule = cssComposer.add([sel1, sel2], 'hover'); -rule.set('style', { +rule.set('style', { width: '100px', color: '#fff', });

Returns Model

get

Get the rule

Parameters

  • selectorsArray<Selector> Array of selectors
  • stateString Css rule state
  • widthString For which device this style is oriented
  • rulePropsObject Other rule props

Examples

var sm = editor.SelectorManager;
 var sel1 = sm.add('myClass1');
 var sel2 = sm.add('myClass2');
-var rule = cssComposer.get([sel1, sel2], 'hover');
+var rule = cssComposer.get([sel1, sel2], 'hover');
 // Update the style
-rule.set('style', {
+rule.set('style', {
   width: '300px',
   color: '#000',
 });
@@ -79,6 +79,6 @@ console.log<
           Modal
          →
- + diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html index 3b2b7eb7d..1e5b32c84 100644 --- a/docs/api/device_manager.html +++ b/docs/api/device_manager.html @@ -8,9 +8,9 @@ - - - + + +
@@ -38,7 +38,7 @@ deviceManager.: '300px', widthMedia: '810px', // the width that will be used for the CSS media }); -

Returns Device Added device

get

Return device by name

Parameters

Examples

var device = deviceManager.get('Tablet');
+

Returns Device Added device

get

Return device by name

Parameters

Examples

var device = deviceManager.get('Tablet');
 console.log(JSON.stringify(device));
 // {name: 'Tablet', width: '900px'}

getAll

Return all devices

Examples

var devices = deviceManager.getAll();
@@ -51,6 +51,6 @@ console.log<
           Selector Manager
          →
- + diff --git a/docs/api/editor.html b/docs/api/editor.html index f203b3769..3e387a41d 100644 --- a/docs/api/editor.html +++ b/docs/api/editor.html @@ -8,9 +8,9 @@ - - - + + +

Editor

Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins. +

Editor

Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins. You get the Editor instance on init method and you can pass options via its Configuration Object

const editor = grapesjs.init({
    // options
 });
-

Available Events

You can make use of available events in this way

editor.on('EVENT-NAME', (some, argument) => {
+

Available Events

You can make use of available events in this way

editor.on('EVENT-NAME', (some, argument) => {
    // do something
 })

Components

  • component:create - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
  • component:mount - Component is mounted to an element and rendered in canvas
  • 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 component is cloned, the new 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
  • component:type:add - New component type added, the new type is passed as an argument to the callback
  • component:type:update - Component type updated, the updated type 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:update:target - The target (Component or CSSRule) is changed
  • 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. @@ -53,7 +53,7 @@ editor.addCo classes:['cls'], content: 'New component' }); -

Returns (Model | Array<Model>)

getStyle

Returns style in JSON format object

Returns Object

setStyle

Set style inside editor's canvas. This method overrides actual style

Parameters

Examples

editor.setStyle('.cls{color: red}');
+

Returns Array<Component>

getStyle

Returns style in JSON format object

Returns Object

setStyle

Set style inside editor's canvas. This method overrides actual style

Parameters

Examples

editor.setStyle('.cls{color: red}');
 //or
 editor.setStyle({
   selectors: ['cls']
@@ -65,7 +65,7 @@ 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) Component to select
  • optsObject? Options
 
    • opts.scrollBoolean? Scroll canvas to the selected element
 Examples
// Select dropped block
-editor.on('block:drag:stop', function(model) {
+editor.on('block:drag:stop', function(model) {
  editor.select(model);
 });
 
Returns this
 selectAdd
Add component to selection
 Parameters
 Examples
editor.selectAdd(model);
@@ -86,28 +86,28 @@ This count resets at any store()
Returns // 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) {
+  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) {
+ 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) {
+ focus: function (el, rte) {
   rte.focus(); // this depends on the Custom RTE API
  }
 });
 
 setCustomParserCss
Replace the default CSS parser with a custom one.
 The parser function receives a CSS string as a parameter and expects
 an array of CSSRule objects as a result. If you need to remove the
-custom parser, pass null as the argument
 Parameters
 Examples
editor.setCustomParserCss(css => {
+custom parser, pass null as the argument
 Parameters
 Examples
editor.setCustomParserCss(css => {
  const result = [];
  // ... parse the CSS string
  result.push({
@@ -117,20 +117,21 @@ custom parser, pass null as the argument

  // ...
  return result;
 });
-
Returns this
 log
Trigger event log message
 Parameters
  • msgany Message to log
  • optsObject Custom options (optional, default {})
+
Returns this
 setDragMode
Change the global drag mode of components.
+To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
 Parameters
  • valueString Drag mode, options: 'absolute' | 'translate'
Returns this
 log
Trigger event log message
 Parameters
  • msgany Message to log
  • optsObject Custom options (optional, default {})
 
    • opts.nsString Namespace of the log (eg. to use in plugins) (optional, default '')
    • opts.levelString Level of the log, debug, info, warning, error (optional, default 'debug')
 Examples
editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
 // This will trigger following events
 // `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`
 // Callbacks of those events will always receive the message and
 // options, as arguments, eg:
 // editor.on('log:info', (msg, opts) => console.info(msg, opts))
-
Returns this
 on
Attach event
 Parameters
Returns this
 once
Attach event and detach it after the first run
 Parameters
Returns this
 off
Detach event
 Parameters
Returns this
 trigger
Trigger event
 Parameters
Returns this
 destroy
Destroy the editor
 render
Render editor
Returns HTMLElement
Edit this page on GitHub
Last Updated: 3/11/2019, 6:17:19 PM

+

Returns this

on

Attach event

Parameters

Returns this

once

Attach event and detach it after the first run

Parameters

Returns this

off

Detach event

Parameters

Returns this

trigger

Trigger event

Parameters

Returns this

destroy

Destroy the editor

render

Render editor

Returns HTMLElement

Edit this page on GitHub
Last Updated: 5/2/2019, 1:28:33 AM

← Canvas →

- + diff --git a/docs/api/index.html b/docs/api/index.html index 47dea66af..a6a17f7c0 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -8,9 +8,9 @@ - - - + + + - + diff --git a/docs/api/keymaps.html b/docs/api/keymaps.html index e125b54c9..cc0810818 100644 --- a/docs/api/keymaps.html +++ b/docs/api/keymaps.html @@ -8,9 +8,9 @@ - - - + + +
@@ -41,18 +41,18 @@ })

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const keymaps = editor.Keymaps;

getConfig

Get module configurations

Returns Object Configuration object

add

Add new keymap

Parameters

  • idstring Keymap id
  • keysstring Keymap keys, eg. ctrl+a, ⌘+z, ctrl+z
  • handler(Function | string) Keymap handler, might be a function
  • optsObject Options (optional, default {})

Examples

// 'ns' is just a custom namespace
-keymaps.add('ns:my-keymap', '⌘+j, ⌘+u, ctrl+j, alt+u', editor => {
+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) => {
+editor.on('keymap:emit', (id, shortcut, e) => {
  // ...
 })

Returns Object Added keymap -or just a command id as a string

get

Get the keymap by id

Parameters

Examples

keymaps.get('ns:my-keymap');
+or just a command id as a string
 get
Get the keymap by id
 Parameters
 Examples
keymaps.get('ns:my-keymap');
 // -> {keys, handler};
 
Returns Object Keymap object
 getAll
Get all keymaps
 Examples
keymaps.getAll();
 // -> {id1: {}, id2: {}};
@@ -65,6 +65,6 @@ or just a command id as a string

+    
   
 
diff --git a/docs/api/modal_dialog.html b/docs/api/modal_dialog.html
index b6829d790..d1ad065a0 100644
--- a/docs/api/modal_dialog.html
+++ b/docs/api/modal_dialog.html
@@ -8,9 +8,9 @@
     
   
   
-
-    
-    
+    
+    
+    
   
   
     

@@ -38,13 +38,13 @@
 The callback will be called one only time
 Parameters
Returns this
 onceOpen
Execute callback when the modal will be opened.
 The callback will be called one only time
 Parameters
Returns this
 isOpen
Checks if the modal window is open
Returns Boolean
 setTitle
Set the title to the modal window
 Parameters
 Examples
modal.setTitle('New title');
 
Returns this
 getTitle
Returns the title of the modal window
Returns string
 setContent
Set the content of the modal window
 Parameters
 Examples
modal.setContent('<div>Some HTML content</div>');
-
Returns this
 getContent
Get the content of the modal window
Returns string
Edit this page on GitHub
Last Updated: 8/10/2018, 12:36:09 AM

+
Returns this
 getContent
Get the content of the modal window
Returns string
Edit this page on GitHub
Last Updated: 5/2/2019, 1:28:33 AM

← Rich Text Editor →

- + diff --git a/docs/api/panels.html b/docs/api/panels.html index 3bcc92b09..c9ff4b6b2 100644 --- a/docs/api/panels.html +++ b/docs/api/panels.html @@ -8,9 +8,9 @@ - - - + + + - + diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html index f18bc2102..b4b9afd18 100644 --- a/docs/api/rich_text_editor.html +++ b/docs/api/rich_text_editor.html @@ -8,9 +8,9 @@ - - - + + +
@@ -36,14 +36,14 @@ It's highly recommended to keep this toolbar as small as possible, especially fr

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const rte = editor.RichTextEditor;

add

Add a new action to the built-in RTE toolbar

Parameters

  • namestring Action name
  • actionObject Action options (optional, default {})

Examples

rte.add('bold', {
   icon: '<b>B</b>',
-  attributes: {title: 'Bold',}
-  result: rte => rte.exec('bold')
+  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>`)
+  result: rte => rte.insertHTML(`<a href="#">${rte.selection()}</a>`)
 });
 // An example with fontSize
 rte.add('fontSize', {
@@ -54,16 +54,16 @@ rte.add,
     // Bind the 'result' on 'change' listener
   event: 'change',
-  result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
+  result: (rte, action) => rte.exec('fontSize', action.btn.firstChild.value),
   // Callback on any input change (mousedown, keydown, etc..)
-  update: (rte, action) => {
+  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

Examples

const action = rte.get('bold');
+

get

Get the action by its name

Parameters

Examples

const action = rte.get('bold');
 // {name: 'bold', ...}

Returns Object

getAll

Get all actions

Returns Array

remove

Remove the action from the toolbar

Parameters

Examples

const action = rte.remove('bold');
 // {name: 'bold', ...}
@@ -74,6 +74,6 @@ rte.add →
- + diff --git a/docs/api/selector_manager.html b/docs/api/selector_manager.html index 36acba67d..5700187d4 100644 --- a/docs/api/selector_manager.html +++ b/docs/api/selector_manager.html @@ -8,9 +8,9 @@ - - - + + +

SelectorManager

Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take +

SelectorManager

Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take a look at this code:

span > #send-btn.btn{
  ...
 }
@@ -53,16 +53,16 @@ a look at this code:
.addClass('class1 class2');
 sm.addClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
Returns Array Array of added selectors
 get
Get the selector by its name
 Parameters
 Examples
const selector = selectorManager.get('selectorName');
+
Returns Array Array of added selectors
 get
Get the selector by its name
 Parameters
 Examples
const selector = selectorManager.get('selectorName');
 // or get an array
-const selectors = selectorManager.get(['class1', 'class2']);
-
Returns (Model | Array)
 getAll
Get all selectors
Returns Collection
Edit this page on GitHub
Last Updated: 4/9/2019, 10:02:45 PM

+const selectors = selectorManager.get(['class1', 'class2']); +

Returns (Model | Array)

getAll

Get all selectors

Returns Collection

escapeName

Return escaped selector name

Parameters

  • nameString Selector name to escape

Returns String Escaped name

Edit this page on GitHub
Last Updated: 4/9/2019, 10:02:45 PM

← CSS Composer →

- + diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html index 06948446f..6cf725e90 100644 --- a/docs/api/storage_manager.html +++ b/docs/api/storage_manager.html @@ -8,9 +8,9 @@ - - - + + +
@@ -35,7 +35,7 @@

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const storageManager = editor.StorageManager;

getConfig

Get configuration object

Returns Object

isAutosave

Checks if autosave is enabled

Returns Boolean

setAutosave

Set autosave value

Parameters

Returns this

getStepsBeforeSave

Returns number of steps required before trigger autosave

Returns number

setStepsBeforeSave

Set steps required before trigger autosave

Parameters

Returns this

add

Add new storage

Parameters

Examples

storageManager.add('local2', {
-  load: function(keys, clb, clbErr) {
+  load: function(keys, clb, clbErr) {
     var res = {};
     for (var i = 0, len = keys.length; i < len; i++){
       var v = localStorage.getItem(keys[i]);
@@ -45,17 +45,17 @@
     // In case of errors...
     // clbErr('Went something wrong');
   },
-  store: function(data, clb, clbErr) {
+  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

Returns (Object | null)

getStorages

Returns all storages

Returns Array

getCurrent

Returns current storage type

Returns string

setCurrent

Set current storage type

Parameters

Returns this

store

Store key-value resources in the current storage

Parameters

  • dataObject Data in key-value format, eg. {item1: value1, item2: value2}
  • clbFunction Callback function

Examples

storageManager.store({item1: value1, item2: value2});
-

Returns (Object | null)

load

Load resource from the current storage by keys

Parameters

Examples

storageManager.load(['item1', 'item2'], res => {
+

Returns (Object | null)

load

Load resource from the current storage by keys

Parameters

Examples

storageManager.load(['item1', 'item2'], res => {
  // res -> {item1: value1, item2: value2}
 });
-storageManager.load('item1', res => {
+storageManager.load('item1', res => {
 // res -> {item1: value1}
 });

getCurrentStorage

Get current storage

Returns Storage

Edit this page on GitHub
Last Updated: 7/8/2018, 11:25:18 PM

@@ -65,6 +65,6 @@ storageManager. + diff --git a/docs/api/style_manager.html b/docs/api/style_manager.html index 5e8453fde..0ce086458 100644 --- a/docs/api/style_manager.html +++ b/docs/api/style_manager.html @@ -8,9 +8,9 @@ - - - + + +

@@ -36,12 +36,13 @@ You can customize the initial state of the module from the editor initialization

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const styleManager = editor.StyleManager;

getConfig

Get configuration object

Returns Object

addSector

Add new sector to the collection. If the sector with the same id already exists, that one will be returned

Parameters

  • idstring Sector id
  • sectorObject Object representing sector -
    • sector.namestring Sector's label (optional, default '')
    • sector.openBoolean Indicates if the sector should be opened (optional, default true)
    • sector.propertiesArray<Object> Array of properties (optional, default [])

Examples

var sector = styleManager.addSector('mySector',{
+
  • sector.namestring Sector's label (optional, default '')
  • sector.openBoolean Indicates if the sector should be opened (optional, default true)
  • sector.propertiesArray<Object> Array of properties (optional, default [])
  • opts   (optional, default {})
  • optionsObject Options (optional, default {})
    •  Examples
    var sector = styleManager.addSector('mySector',{
   name: 'My sector',
   open: true,
   properties: [{ name: 'My property'}]
-});
-
    Returns Sector Added Sector
     getSector
    Get sector by id
     Parameters
     Examples
    var sector = styleManager.getSector('mySector');
+}, { at: 0 });
+// With `at: 0` we place the new sector at the beginning of the collection
+
    Returns Sector Added Sector
     getSector
    Get sector by id
     Parameters
    • idstring Sector id
    • opts   (optional, default {})
     Examples
    var sector = styleManager.getSector('mySector');
 
    Returns (Sector | null)
     removeSector
    Remove a sector by id
     Parameters
     Examples
    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
    • sectorIdstring Sector id
    • propertyObject Property object
 
      • property.namestring Name of the property (optional, default '')
      • property.propertystring CSS property, eg. min-height (optional, default '')
      • property.typestring Type of the property: integer | radio | select | color | file | composite | stack (optional, default '')
      • property.unitsArray<string> Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default [])
      • property.unitstring Default selected unit from units. Only for integer type (optional, default '')
      • property.minnumber Min possible value. Only for integer type (optional, default null)
      • property.maxnumber Max possible value. Only for integer type (optional, default null)
      • property.defaultsstring Default value (optional, default '')
      • property.infostring Some description (optional, default '')
      • property.iconstring Class name. If exists no text will be displayed (optional, default '')
      • property.previewBoolean Show layers preview. Only for stack type (optional, default false)
      • property.functionNamestring Indicates if value need to be wrapped in some function, for istance transform: rotate(90deg) (optional, default '')
      • property.propertiesArray<Object> Nested properties for composite and stack type (optional, default [])
      • property.layersArray<Object> Layers for stack properties (optional, default [])
      • property.listArray<Object> List of possible options for radio and select types (optional, default [])
     Examples
    var property = styleManager.addProperty('mySector',{
@@ -69,7 +70,7 @@ and isType function which recognize the type of the
 passed entity
     Examples
    styleManager.addType('my-type', {
  model: {},
  view: {},
- isType: (value) => {
+ isType: (value) => {
    if (value && value.type == 'my-type') {
      return value;
    }
@@ -90,6 +91,6 @@ It could be a Component, CSSRule, or a string of any CSS selector
    
+    
   
 
diff --git a/docs/api/undo_manager.html b/docs/api/undo_manager.html
index 843f44d9c..7b3eb91fa 100644
--- a/docs/api/undo_manager.html
+++ b/docs/api/undo_manager.html
@@ -8,9 +8,9 @@
     
   
   
-
-    
-    
+    
+    
+    
   
   
     
    
@@ -44,12 +44,12 @@ Note: New Components and CSSRules will be added automatically
     hasUndo
    Checks if exists an available undo
     Examples
    um.hasUndo();
 
    Returns Boolean
     hasRedo
    Checks if exists an available redo
     Examples
    um.hasRedo();
 
    Returns Boolean
     getStack
    Get stack of changes
     Examples
    const stack = um.getStack();
-stack.each(item => ...);
+stack.each(item => ...);
 
    Returns Collection
     clear
    Clear the stack
     Examples
    um.clear();
 
    Returns this
    Edit this page on GitHub
    Last Updated: 7/9/2018, 12:11:12 AM
    
         ← 
    
-    
+    
   
 
diff --git a/docs/assets/css/0.styles.82db7b1e.css b/docs/assets/css/0.styles.82db7b1e.css
deleted file mode 100644
index 64b2944a5..000000000
--- a/docs/assets/css/0.styles.82db7b1e.css
+++ /dev/null
@@ -1 +0,0 @@
-.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto}.home .hero{text-align:center}.home .hero img{max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#e67891;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #e15a79}.home .hero .action-button:hover{background-color:#e9859c}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:.5rem}.search-box input{cursor:text;width:10rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/docs/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#e67891}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:1.5rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#e67891}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative;left:1rem}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper .dropdown-title{display:block}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#e67891}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #e67891;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .dropdown-title .arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ccc;border-bottom:0}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#e67891}.nav-links .nav-item{cursor:pointer;position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #e8839a}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem;position:relative}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{font-size:.9rem;position:absolute;right:1.5rem;top:.7rem}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}}.page-edit,.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit,.page-nav{padding:2rem}}@media (max-width:419px){.page-edit,.page-nav{padding:1.5rem}}.page{padding-bottom:2rem}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#aaa}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#e67891}a.sidebar-link.active{font-weight:600;color:#e67891;border-left-color:#e67891}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar-group:not(.first){margin-top:1em}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading{cursor:auto;color:inherit}.sidebar-heading{color:#999;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:0 1.5rem;margin-top:0;margin-bottom:.5rem}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading:.open .arrow{top:-.18em}.sidebar-group-items{transition:height .1s ease-out;overflow:hidden}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem 0}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar .sidebar-links{padding:1.5rem 0}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar .sidebar-links{padding:1rem 0}}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;tab-size:4;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.sidebar-button{display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.carbon-ads{min-height:102px;padding:1.5rem 1.5rem 0;margin-bottom:-.5rem;font-size:.75rem}.carbon-ads a{color:#444;font-weight:400;display:inline}.carbon-ads .carbon-img{float:left;margin-right:1rem;border:1px solid #eaecef}.carbon-ads .carbon-img img{display:block}.carbon-ads .carbon-poweredby{color:#999;display:block;margin-top:.5em}@media (max-width:719px){.carbon-ads .carbon-img img{width:100px;height:77px}}.icon.outbound{color:#aaa;display:inline-block}.badge{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff;margin-right:5px;background-color:#42b983}.badge.middle{vertical-align:middle}.badge.top{vertical-align:top}.badge.green,.badge.tip{background-color:#42b983}.badge.error{background-color:#da5961}.badge.warn,.badge.warning,.badge.yellow{background-color:#e7c000}.demo-container[data-v-b3715568]{min-height:20px;border:1px solid #eee;border-radius:2px;padding:25px 35px}.gjs{border:3px solid #444}.gjs-block{width:auto;height:auto;min-height:auto}#gjs{border:3px solid #444}.gjs-cv-canvas{top:0;width:100%;height:100%}.panel__top{padding:0;width:100%;display:flex;justify-content:center;justify-content:space-between}.panel__basic-actions,.panel__top{position:static}.content pre{padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}.panel__devices{position:static}.editor-row{display:flex;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;height:300px}.editor-canvas{flex-grow:1}.panel__right{flex-basis:230px;position:relative;overflow-y:auto}.panel__switcher{position:static}.gjs__themed .gjs-one-bg{background-color:#78366a}.gjs__themed .gjs-two-color{color:hsla(0,0%,100%,.7)}.gjs__themed .gjs-three-bg{background-color:#ec5896;color:#fff}.gjs__themed .gjs-four-color,.gjs__themed .gjs-four-color-h:hover{color:#ec5896}.gjs__themed .gjs,.navbar{border:none}.navbar{background-color:#6f2943;background-image:linear-gradient(120deg,#d983a6,#4d114f);color:#fff}.navbar .logo{min-width:auto}.navbar .site-name{color:#fff}.token.string{color:#e67891}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#ffeff2}}.search-box input{border:1px solid transparent;transition:border .25s}.content:not(.custom),.page-edit,.page-nav{max-width:900px}.page__getting-started .language-js .language-js{max-height:300px}* ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}* ::-webkit-scrollbar{width:8px}.language-js ::-webkit-scrollbar{height:8px}.language-js ::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.3)}#nprogress{pointer-events:none}#nprogress .bar{background:#e67891;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #e67891,0 0 5px #e67891;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#e67891;border-left-color:#e67891;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.content pre,.content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background:transparent;overflow:auto}.content pre[class*=language-] code,.content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre{position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number,div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.content:not(.custom){padding:2rem}}@media (max-width:419px){.content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:15px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.content:not(.custom)>:first-child{margin-top:3.6rem}.content:not(.custom) a:hover{text-decoration:underline}.content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.content:not(.custom) img{max-width:100%}.content.custom{padding:0;margin:0}.content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#e67891}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1.2rem;color:#999;border-left:.25rem solid #dfe2e5;margin-left:0;padding-left:1rem}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.content:not(.custom)>h1,.content:not(.custom)>h2,.content:not(.custom)>h3,.content:not(.custom)>h4,.content:not(.custom)>h5,.content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.content:not(.custom)>h1:first-child,.content:not(.custom)>h2:first-child,.content:not(.custom)>h3:first-child,.content:not(.custom)>h4:first-child,.content:not(.custom)>h5:first-child,.content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.content:not(.custom)>h1:first-child+.custom-block,.content:not(.custom)>h1:first-child+p,.content:not(.custom)>h1:first-child+pre,.content:not(.custom)>h2:first-child+.custom-block,.content:not(.custom)>h2:first-child+p,.content:not(.custom)>h2:first-child+pre,.content:not(.custom)>h3:first-child+.custom-block,.content:not(.custom)>h3:first-child+p,.content:not(.custom)>h3:first-child+pre,.content:not(.custom)>h4:first-child+.custom-block,.content:not(.custom)>h4:first-child+p,.content:not(.custom)>h4:first-child+pre,.content:not(.custom)>h5:first-child+.custom-block,.content:not(.custom)>h5:first-child+p,.content:not(.custom)>h5:first-child+pre,.content:not(.custom)>h6:first-child+.custom-block,.content:not(.custom)>h6:first-child+p,.content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.custom-layout{padding-top:3.6rem}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}.theme-container.no-navbar .custom-layout{padding-top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}
\ No newline at end of file
diff --git a/docs/assets/css/styles.841d52ad.css b/docs/assets/css/styles.841d52ad.css
new file mode 100644
index 000000000..29a4b6e07
--- /dev/null
+++ b/docs/assets/css/styles.841d52ad.css
@@ -0,0 +1 @@
+.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto}.home .hero{text-align:center}.home .hero img{max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#e67891;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #e15a79}.home .hero .action-button:hover{background-color:#e9859c}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.sidebar-button{display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.search-box{display:inline-block;position:relative;margin-right:.5rem}.search-box input{cursor:text;width:10rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/docs/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#e67891}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:1.5rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#e67891}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative;left:1rem}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper .dropdown-title{display:block}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#e67891}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #e67891;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .dropdown-title .arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ccc;border-bottom:0}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#e67891}.nav-links .nav-item{cursor:pointer;position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #e8839a}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem;position:relative}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{font-size:.9rem;position:absolute;right:1.5rem;top:.7rem}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}}.page-edit,.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit,.page-nav{padding:2rem}}@media (max-width:419px){.page-edit,.page-nav{padding:1.5rem}}.page{padding-bottom:2rem}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#aaa}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#e67891}a.sidebar-link.active{font-weight:600;color:#e67891;border-left-color:#e67891}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar-group:not(.first){margin-top:1em}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading{cursor:auto;color:inherit}.sidebar-heading{color:#999;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:0 1.5rem;margin-top:0;margin-bottom:.5rem}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading:.open .arrow{top:-.18em}.sidebar-group-items{transition:height .1s ease-out;overflow:hidden}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem 0}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar .sidebar-links{padding:1.5rem 0}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar .sidebar-links{padding:1rem 0}}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}#nprogress{pointer-events:none}#nprogress .bar{background:#e67891;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #e67891,0 0 5px #e67891;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#e67891;border-left-color:#e67891;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.content pre,.content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background:transparent;overflow:auto}.content pre[class*=language-] code,.content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre{position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number,div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.content:not(.custom){padding:2rem}}@media (max-width:419px){.content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:15px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.content:not(.custom)>:first-child{margin-top:3.6rem}.content:not(.custom) a:hover{text-decoration:underline}.content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.content:not(.custom) img{max-width:100%}.content.custom{padding:0;margin:0}.content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#e67891}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1.2rem;color:#999;border-left:.25rem solid #dfe2e5;margin-left:0;padding-left:1rem}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.content:not(.custom)>h1,.content:not(.custom)>h2,.content:not(.custom)>h3,.content:not(.custom)>h4,.content:not(.custom)>h5,.content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.content:not(.custom)>h1:first-child,.content:not(.custom)>h2:first-child,.content:not(.custom)>h3:first-child,.content:not(.custom)>h4:first-child,.content:not(.custom)>h5:first-child,.content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.content:not(.custom)>h1:first-child+.custom-block,.content:not(.custom)>h1:first-child+p,.content:not(.custom)>h1:first-child+pre,.content:not(.custom)>h2:first-child+.custom-block,.content:not(.custom)>h2:first-child+p,.content:not(.custom)>h2:first-child+pre,.content:not(.custom)>h3:first-child+.custom-block,.content:not(.custom)>h3:first-child+p,.content:not(.custom)>h3:first-child+pre,.content:not(.custom)>h4:first-child+.custom-block,.content:not(.custom)>h4:first-child+p,.content:not(.custom)>h4:first-child+pre,.content:not(.custom)>h5:first-child+.custom-block,.content:not(.custom)>h5:first-child+p,.content:not(.custom)>h5:first-child+pre,.content:not(.custom)>h6:first-child+.custom-block,.content:not(.custom)>h6:first-child+p,.content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.custom-layout{padding-top:3.6rem}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}.theme-container.no-navbar .custom-layout{padding-top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.icon.outbound{color:#aaa;display:inline-block}.navbar{background-color:#6f2943;background-image:linear-gradient(120deg,#d983a6,#4d114f);color:#fff;border:none}.navbar .logo{min-width:auto}.navbar .site-name{color:#fff}.token.string{color:#e67891}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#ffeff2}}.search-box input{border:1px solid transparent;transition:border .25s}.content:not(.custom),.page-edit,.page-nav{max-width:900px}.page__getting-started .language-js .language-js{max-height:300px}* ::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}* ::-webkit-scrollbar{width:8px}.language-js ::-webkit-scrollbar{height:8px}.language-js ::-webkit-scrollbar-thumb{background-color:hsla(0,0%,100%,.3)}.badge{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff;margin-right:5px;background-color:#42b983}.badge.middle{vertical-align:middle}.badge.top{vertical-align:top}.badge.green,.badge.tip{background-color:#42b983}.badge.error{background-color:#da5961}.badge.warn,.badge.warning,.badge.yellow{background-color:#e7c000}
\ No newline at end of file
diff --git a/docs/assets/js/6.9af8fc3b.js b/docs/assets/js/1.d88ab8c2.js
similarity index 70%
rename from docs/assets/js/6.9af8fc3b.js
rename to docs/assets/js/1.d88ab8c2.js
index 59b1dbfd9..dbffebaab 100644
--- a/docs/assets/js/6.9af8fc3b.js
+++ b/docs/assets/js/1.d88ab8c2.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{174:function(e,t,s){"use strict";s(24);var a={appendTo:"#blocks2",blocks:[{id:"section",label:"Section",attributes:{class:"gjs-block-section"},content:"
    \n        
    This is a simple title
    \n        
    This is just a Lorem text: Lorem ipsum dolor sit amet, consectetur adipiscing elit
    \n      
    "},{id:"text",label:"Text",content:'
    Insert your text here
    '},{id:"image",label:"Image",select:!0,content:{type:"image"},activate:!0}]},n=Object.assign({},a,{blocks:[Object.assign({},a.blocks[0],{label:''}),Object.assign({},a.blocks[1],{label:''}),Object.assign({},a.blocks[2],{label:''})]}),i={sectors:[{name:"Dimension",open:!1,buildProps:["width","min-height","padding"],properties:[{type:"integer",name:"The width",property:"width",units:["px","%"],defaults:"auto",min:0}]},{name:"Extra",open:!1,buildProps:["background-color","box-shadow","custom-prop"],properties:[{id:"custom-prop",name:"Custom Label",property:"font-size",type:"select",defaults:"32px",options:[{value:"12px",name:"Tiny"},{value:"18px",name:"Medium"},{value:"32px",name:"Big"}]}]}]},o={scrollLayers:0},l={},c={},r={devices:[{name:"Desktop",width:""},{name:"Mobile",width:"320px",widthMedia:"480px"}]},g={id:"panel-basic",buttons:[{id:"visibility",active:!0,className:"btn-toggle-borders",label:"B",command:"sw-visibility"},{id:"export",className:"btn-open-export",label:"Exp",command:"export-template",context:"export-template"},{id:"show-json",className:"btn-show-json",label:"JSON",context:"show-json",command:function(e){e.Modal.setTitle("Components JSON").setContent('")).open()}}]},p=Object.assign({},g,{buttons:[Object.assign({},g.buttons[0],{label:''}),Object.assign({},g.buttons[1],{label:''}),Object.assign({},g.buttons[2],{label:''})]}),d={el:"#panel__right4",id:"layers",resizable:{maxDim:350,minDim:200,tc:0,cl:1,cr:0,bc:0,keyWidth:"flex-basis"}},h={id:"show-layers",active:!0,togglable:!1,label:"Layers",command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display="none"}}},b={id:"show-style",label:"Styles",togglable:!1,active:!0,command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display="none"}}},v={id:"show-traits",label:"Traits",togglable:!1,active:!0,command:{getTraitsEl:function(e){return e.getContainer().closest(".editor-row").querySelector(".traits-container")},run:function(e,t){this.getTraitsEl(e).style.display=""},stop:function(e,t){this.getTraitsEl(e).style.display="none"}}},u={id:"panel-switcher",buttons:[h,b]},m={id:"panel-switcher",buttons:[h,b,v]},w={id:"panel-switcher",buttons:[Object.assign({},h,{label:''}),Object.assign({},b,{label:''}),Object.assign({},v,{label:''})]},y={id:"panel-devices",buttons:[{id:"device-desktop",label:"D",command:{run:function(e){return e.setDevice("Desktop")}},active:!0,togglable:!1},{id:"device-mobile",label:"M",command:{run:function(e){return e.setDevice("Mobile")}},togglable:!1}]},j=Object.assign({},y,{buttons:[Object.assign({},y.buttons[0],{label:''}),Object.assign({},y.buttons[1],{label:''})]}),f={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},x=Object.assign({},f,{container:"#gjs2",blockManager:a}),M=Object.assign({},x,{container:"#gjs3",blockManager:Object.assign({},a,{appendTo:"#blocks3"})}),O=Object.assign({},x,{container:"#gjs4",blockManager:Object.assign({},a,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[d]}}),T=Object.assign({},x,{container:"#gjs5",blockManager:Object.assign({},a,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container5"})}),k=Object.assign({},x,{container:"#gjs6",blockManager:Object.assign({},a,{appendTo:"#blocks6"}),layerManager:Object.assign({},o,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container6"})}),S=Object.assign({},x,{container:"#gjs7",blockManager:Object.assign({},a,{appendTo:"#blocks7"}),layerManager:Object.assign({},o,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container7"}),deviceManager:r}),_=Object.assign({},x,{container:"#gjs8",blockManager:Object.assign({},n,{appendTo:"#blocks8"}),layerManager:Object.assign({},o,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container8"}),deviceManager:r});e.exports={gjsConfigStart:f,gjsConfigBlocks:x,gjsConfigPanels:M,gjsConfigLayers:O,gjsConfigStyle:T,gjsConfigTraits:k,gjsConfigDevices:S,gjsConfigTheme:_,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:d,panelSwitcher:u,panelSwitcherTraits:m,panelSwitcherTraitsIcons:w,panelDevices:y,panelDevicesIcons:j}},188:function(e,t,s){"use strict";s.r(t);var a=s(189),n=s.n(a);for(var i in a)"default"!==i&&function(e){s.d(t,e,function(){return a[e]})}(i);t.default=n.a},189:function(e,t,s){"use strict";s(24),e.exports={mounted:function(){var e=s(174),t=grapesjs.init(e.gjsConfigLayers);t.Panels.addPanel(Object.assign({},e.panelTop,{el:"#panel__top4"})),t.Panels.addPanel(Object.assign({},e.panelBasicActions,{el:"#panel__basic-actions4"})),window.editor4=t}}},190:function(e,t,s){},205:function(e,t,s){"use strict";var a=s(190);s.n(a).a},213:function(e,t,s){"use strict";var a=function(){var e=this.$createElement;this._self._c;return this._m(0)},n=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"panel__top",attrs:{id:"panel__top4"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions4"}})]),t("div",{staticClass:"editor-row"},[t("div",{staticClass:"editor-canvas"},[t("div",{staticClass:"gjs",attrs:{id:"gjs4"}},[t("h1",[this._v("Hello World Component!")])])]),t("div",{staticClass:"panel__right",attrs:{id:"panel__right4"}},[t("div",{attrs:{id:"layers-container"}})])]),t("div",{attrs:{id:"blocks4"}})])}];s.d(t,"a",function(){return a}),s.d(t,"b",function(){return n})},221:function(e,t,s){"use strict";s.r(t);var a=s(213),n=s(188);for(var i in n)"default"!==i&&function(e){s.d(t,e,function(){return n[e]})}(i);s(205);var o=s(1),l=Object(o.a)(n.default,a.a,a.b,!1,null,null,null);l.options.__file="DemoLayers.vue",t.default=l.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{149:function(e,t,s){"use strict";s(25);var a={appendTo:"#blocks2",blocks:[{id:"section",label:"Section",attributes:{class:"gjs-block-section"},content:"
    \n        
    This is a simple title
    \n        
    This is just a Lorem text: Lorem ipsum dolor sit amet, consectetur adipiscing elit
    \n      
    "},{id:"text",label:"Text",content:'
    Insert your text here
    '},{id:"image",label:"Image",select:!0,content:{type:"image"},activate:!0}]},n=Object.assign({},a,{blocks:[Object.assign({},a.blocks[0],{label:''}),Object.assign({},a.blocks[1],{label:''}),Object.assign({},a.blocks[2],{label:''})]}),i={sectors:[{name:"Dimension",open:!1,buildProps:["width","min-height","padding"],properties:[{type:"integer",name:"The width",property:"width",units:["px","%"],defaults:"auto",min:0}]},{name:"Extra",open:!1,buildProps:["background-color","box-shadow","custom-prop"],properties:[{id:"custom-prop",name:"Custom Label",property:"font-size",type:"select",defaults:"32px",options:[{value:"12px",name:"Tiny"},{value:"18px",name:"Medium"},{value:"32px",name:"Big"}]}]}]},o={scrollLayers:0},l={},c={},r={devices:[{name:"Desktop",width:""},{name:"Mobile",width:"320px",widthMedia:"480px"}]},g={id:"panel-basic",buttons:[{id:"visibility",active:!0,className:"btn-toggle-borders",label:"B",command:"sw-visibility"},{id:"export",className:"btn-open-export",label:"Exp",command:"export-template",context:"export-template"},{id:"show-json",className:"btn-show-json",label:"JSON",context:"show-json",command:function(e){e.Modal.setTitle("Components JSON").setContent('")).open()}}]},p=Object.assign({},g,{buttons:[Object.assign({},g.buttons[0],{label:''}),Object.assign({},g.buttons[1],{label:''}),Object.assign({},g.buttons[2],{label:''})]}),h={el:"#panel__right4",id:"layers",resizable:{maxDim:350,minDim:200,tc:0,cl:1,cr:0,bc:0,keyWidth:"flex-basis"}},b={id:"show-layers",active:!0,togglable:!1,label:"Layers",command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display="none"}}},d={id:"show-style",label:"Styles",togglable:!1,active:!0,command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display="none"}}},v={id:"show-traits",label:"Traits",togglable:!1,active:!0,command:{getTraitsEl:function(e){return e.getContainer().closest(".editor-row").querySelector(".traits-container")},run:function(e,t){this.getTraitsEl(e).style.display=""},stop:function(e,t){this.getTraitsEl(e).style.display="none"}}},m={id:"panel-switcher",buttons:[b,d]},w={id:"panel-switcher",buttons:[b,d,v]},u={id:"panel-switcher",buttons:[Object.assign({},b,{label:''}),Object.assign({},d,{label:''}),Object.assign({},v,{label:''})]},y={id:"panel-devices",buttons:[{id:"device-desktop",label:"D",command:{run:function(e){return e.setDevice("Desktop")}},active:!0,togglable:!1},{id:"device-mobile",label:"M",command:{run:function(e){return e.setDevice("Mobile")}},togglable:!1}]},j=Object.assign({},y,{buttons:[Object.assign({},y.buttons[0],{label:''}),Object.assign({},y.buttons[1],{label:''})]}),x={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},M=Object.assign({},x,{container:"#gjs2",blockManager:a}),O=Object.assign({},M,{container:"#gjs3",blockManager:Object.assign({},a,{appendTo:"#blocks3"})}),f=Object.assign({},M,{container:"#gjs4",blockManager:Object.assign({},a,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},M,{container:"#gjs5",blockManager:Object.assign({},a,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container5"})}),k=Object.assign({},M,{container:"#gjs6",blockManager:Object.assign({},a,{appendTo:"#blocks6"}),layerManager:Object.assign({},o,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container6"})}),S=Object.assign({},M,{container:"#gjs7",blockManager:Object.assign({},a,{appendTo:"#blocks7"}),layerManager:Object.assign({},o,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container7"}),deviceManager:r}),H=Object.assign({},M,{container:"#gjs8",blockManager:Object.assign({},n,{appendTo:"#blocks8"}),layerManager:Object.assign({},o,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container8"}),deviceManager:r});t.a={gjsConfigStart:x,gjsConfigBlocks:M,gjsConfigPanels:O,gjsConfigLayers:f,gjsConfigStyle:T,gjsConfigTraits:k,gjsConfigDevices:S,gjsConfigTheme:H,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:m,panelSwitcherTraits:w,panelSwitcherTraitsIcons:u,panelDevices:y,panelDevicesIcons:j}},210:function(e,t,s){"use strict";s.r(t);var a=s(149),n={mounted:function(){window.editor2=grapesjs.init(a.a.gjsConfigBlocks)}},i=s(1),o=Object(i.a)(n,function(){var e=this.$createElement;this._self._c;return this._m(0)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"gjs",attrs:{id:"gjs2"}},[t("h1",[this._v("Hello World Component!")])]),t("div",{attrs:{id:"blocks2"}})])}],!1,null,null,null);t.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/10.6d1da19c.js b/docs/assets/js/10.6d1da19c.js
new file mode 100644
index 000000000..e9f365ae1
--- /dev/null
+++ b/docs/assets/js/10.6d1da19c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{211:function(e,t,r){"use strict";r.r(t);var s={name:"DemoViewer",props:{value:{type:String,default:""},user:{type:String,default:"artur_arseniev"},width:{type:String,default:"100%"},height:{type:String,default:"300"}},computed:{src:function(){var e=this.value,t=this.user;return"//jsfiddle.net/".concat(t,"/").concat(e,"/embedded/js,html,css,result")}}},i=r(1),n=Object(i.a)(s,function(){var e=this.$createElement;return(this._self._c||e)("iframe",{attrs:{width:this.width,height:this.height,src:this.src,allowfullscreen:"allowfullscreen",frameborder:"0"}})},[],!1,null,null,null);t.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/10.a106a5cd.js b/docs/assets/js/10.a106a5cd.js
deleted file mode 100644
index 5942d6dcf..000000000
--- a/docs/assets/js/10.a106a5cd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{175:function(t,n,e){},200:function(t,n,e){"use strict";var i=e(175);e.n(i).a},240:function(t,n,e){"use strict";e.r(n);e(200);var i=e(1),s=Object(i.a)({},function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"demo-container"},[this._t("default")],2)},[],!1,null,"b3715568",null);s.options.__file="Demo.vue";n.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/11.e1024e3c.js b/docs/assets/js/11.e1024e3c.js
new file mode 100644
index 000000000..08779122b
--- /dev/null
+++ b/docs/assets/js/11.e1024e3c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{233:function(t,s,a){"use strict";a.r(s);var n=a(1),e=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.")]),a("p",[t._v("The pretty minimalistic way to instantiate the editor could be like this:")]),t._m(1),a("p",[t._v("In just few lines, with the default configurations, you're already able to see something with which play around.")]),a("p",[t._v("[[img/default-gjs.jpg]]")]),a("p",[t._v("You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.")]),a("p",[t._v("Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)")]),a("p",[t._v("[[img/canvas-panels.jpg]]")]),t._m(2),a("p",[t._v("Let's start the editor with some basic toolbar panel")]),t._m(3),a("p",[t._v("In this example we set a panel with 'commands' as an id and after the render we'll see nothing more than an empty div added to our panels. The new panel is already styled as the id 'commands' is one of the default but you can use whatever you like and place it wherever you want with CSS. With refresh we might see something like shown in the image below, with the new panel on the left:")]),a("p",[t._v("[[img/new-panel.png]]")]),t._m(4),a("p",[t._v("Now let's put some button inside")]),t._m(5),a("p",[t._v("On refresh the page might present some changes ('fa fa-smile-o' are from FontAwesome set, so be sure to have placed correctly the font directory)")]),a("p",[t._v("[[img/new-btn.png]]")]),a("p",[t._v("Yeah, the button is pretty nice and happy, but useless without any command assigned, if you click on it nothing gonna happen.")]),t._m(6),t._m(7),t._m(8),t._m(9),a("p",[t._v("[[img/btn-clicked.png]]")]),t._m(10),a("p",[t._v("Check the "),a("a",{attrs:{href:"http://grapesjs.com/demo.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("demo"),a("OutboundLink")],1),t._v(" for more complete usage of panels, buttons and built-in commands.")]),t._m(11),a("p",[t._v("Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string")]),t._m(12),a("p",[t._v("We added 3 simple components with some basic style. If you refresh probably you'll see the same empty page but are actually there, you only need to highlight them.\nFor this purpose already exists a command, so add it to your panel in this way")]),t._m(13),t._m(14),a("p",[t._v("[[img/blocks3.jpg]]")]),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),a("p",[t._v("After this you'll be able to see something like in the image below")]),a("p",[t._v("[[img/enabled-sm.jpg]]")]),t._m(21),t._m(22),a("p",[t._v("Selecting one of the component will show up the Style Manager with default sectors, properties and an input where you can manage classes. The default class you see (cXX) was generated by extracting style from the component")]),a("p",[t._v("[[img/default-sm.jpg]]")]),a("p",[t._v("As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one")]),t._m(23),t._m(24),a("p",[t._v("Now you should be able to style components")]),a("p",[t._v("[[img/style-comp.jpg]]")]),t._m(25),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30),a("p",[t._v("In this last part we're gonna see how to store and load template data inside GrapesJS. You may already noticed that even if you refresh the page after changes on canvas your data are not lost and this because GrapesJS comes with some built-in storage implementation.\nThe default one is the localStorage which is pretty simple and all the data are stored locally on your computer. Let's see the options available for this storage")]),t._m(31),t._m(32),a("p",[t._v("Storing data locally it's easy and fast but useless in some common cases. In the next example we'll see how to setup a remote storage, which is not far from the previous one")]),t._m(33),a("p",[t._v("As you can see we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.")]),a("p",[t._v("If you prefer you could also disable autosaving and do it by yourself using some custom command in this way:")]),t._m(34),t._m(35)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"getting-started"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting started")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path/to/grapes.min.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path/to/grapes.min.js"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}}),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("gjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      container "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      components"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Hello world!
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.txt-red{color: red}'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("If you'd like to extend the already instantiated editor you have to check "),s("a",{attrs:{href:"API-Reference"}},[this._v("API Reference")]),this._v(". Check also "),s("a",{attrs:{href:"./Creating-plugins"}},[this._v("how to create plugins")]),this._v(" using the same API.\nIn this guide we'll focus on how to initialize the editor with all custom UI from scratch.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    panels"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      defaults"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Editor"}},[this._v("Editor API Reference")]),this._v(" for more details about editor configurations")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-smile-o'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smile'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Panels"}},[this._v("Panels API Reference")]),this._v(" for more details about Panels and Buttons")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Assigning commands is pretty easy, but before you should define one or use one of defaults ("),s("a",{attrs:{href:"./Built-in-commands"}},[this._v("Built-in commands")]),this._v("). So in this case we gonna create a new one.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-smile-o'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smile'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command     "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'helloWorld'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'helloWorld'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello world!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Deactivate button")]),t._v("\n          senderBtn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'active'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("stop")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("As you see we added a new command "),a("code",[t._v("helloWorld")]),t._v(" and used its "),a("code",[t._v("id")]),t._v(" as an identifier inside "),a("code",[t._v("button.command")]),t._v(". In addition to this we've also implemented two required methods, "),a("code",[t._v("run")]),t._v(" and "),a("code",[t._v("stop")]),t._v(", to make button execute commands.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Commands"}},[this._v("Commands API Reference")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" Components")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Disable default local storage in case you've already used GrapesJS")]),t._v("\n  storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  components"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("\n              "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("\n              "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vis'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-eye'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sw-visibility'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            context   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-random-context'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// For grouping context of buttons in the same panel")]),t._v("\n            active    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Worth noting the use of "),s("code",[this._v("context")]),this._v(" option (try to click 'smile' command without it) and "),s("code",[this._v("active")]),this._v(" to enable it after the render.\nNow you should be able to see blocks inside canvas.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("You could add other commands to enable interactions with blocks. Check "),s("a",{attrs:{href:"./Built-in-commands"}},[this._v("Built-in commands")]),this._v(" to get more information")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Components"}},[this._v("Components API Reference")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"style-manager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Style Manager")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a "),a("code",[t._v("Dimension")]),t._v(" sector for "),a("code",[t._v("width")]),t._v(" and "),a("code",[t._v("height")]),t._v(", and another one as "),a("code",[t._v("Typography")]),t._v(" for "),a("code",[t._v("font-size")]),t._v(" and "),a("code",[t._v("color")]),t._v(". So it's up to you decide how organize sectors.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("To enable this module we rely on a built-in command "),s("code",[this._v("open-sm")]),this._v(", which shows up the Style Manager, which we gonna bind to another button in a separate panel")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\npanels"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If you use this id the default CSS will place this panel on top right corner for you")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'views'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'open-style-manager'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-paint-brush'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'open-sm'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            active    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("As you can see Style Manager is enabled but before using it you have to select an element in the canvas, for this purpose we can add another button with a built-in command "),s("code",[this._v("select-comp")]),this._v(" in this way")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id         "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-mouse-pointer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select-comp'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Let's put a few sectors with use of "),s("code",[this._v("buildProps")]),this._v(" which helps us building common properties")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("You can check the list of usable properties inside "),s("code",[this._v("buildProps")]),this._v(" here: "),s("a",{attrs:{href:"./Built-in-properties"}},[this._v("Built-in properties")]),this._v("\notherwise is possible to build them on your own, let's see how we'd have done the previous configuration without the "),s("code",[this._v("buildProps")]),this._v(" helper")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\nstyleManager "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  sectors"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Just the name")]),t._v("\n            name      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CSS property")]),t._v("\n            property  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Type of the input, options: integer | radio | select | color | file | composite | stack")]),t._v("\n            type      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Units, available only for 'integer' types")]),t._v("\n            units     "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Default value")]),t._v("\n            defaults  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auto'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Min value, available only for 'integer' types")]),t._v("\n            min       "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Here I'm going to be more original")]),t._v("\n            name      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Minimum height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            property  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            type      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            defaults  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// List of options, available only for 'select' and 'radio'  types")]),t._v("\n            list    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Sectors are expanded by default so put this one closed")]),t._v("\n      open"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Background'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          property  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          type      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          defaults"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Box shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          property  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          type    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stack'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          preview   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// List of nested properties, available only for 'stack' and 'composite'  types")]),t._v("\n          properties  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Shadow type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Nested properties with stack/composite type don't require proper 'property' name")]),t._v("\n                  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as all of them will be merged to parent property, eg. box-shadow: X Y ...;")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  list"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Outside'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                              "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'inset'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Inside'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'X position'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-x'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Y position'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-y'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Blur'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-blur'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  min"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Spread'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-spread'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'black'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("As you can see using "),s("code",[this._v("buildProps")]),this._v(" actually will save you a lot of work. You could also mix this techniques to obtain custom properties in less time. For example, let's see how can we setup the same width but with a different value of "),s("code",[this._v("min")]),this._v(":")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        property"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Use 'property' as id")]),t._v("\n        min"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Style-Manager"}},[this._v("Style Manager API Reference")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"store-load-data"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-load-data","aria-hidden":"true"}},[this._v("#")]),this._v(" Store/load data")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Default configuration")]),t._v("\n    storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'gjs-'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("             "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prefix identifier that will be used inside storing and loading")]),t._v("\n      type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'local'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Type of the storage")]),t._v("\n      autosave"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Store data automatically")]),t._v("\n      autoload"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Autoload stored data on init")]),t._v("\n      stepsBeforeSave"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If autosave enabled, indicates how many changes are necessary before store method is triggered")]),t._v("\n      storeComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of components in JSON format")]),t._v("\n      storeStyles"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of rules/style in JSON format")]),t._v("\n      storeHtml"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of components as HTML string")]),t._v("\n      storeCss"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of rules/style as CSS string")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Worth noting the defaut "),s("code",[this._v("id")]),this._v(" parameter which adds a prefix for all keys to store. If you check the localStorage inside your DOM panel you'll see something like "),s("code",[this._v("{ 'gjs-components': '
    ....' ...}")]),this._v(" in this way it prevents the risk of collisions, quite common with localStorage use in large applications.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      stepsBeforeSave"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      urlStore"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://store/endpoint'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      urlLoad"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://load/endpoint'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      params"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// For custom values on requests")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    autosave"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeData'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Storage-Manager"}},[this._v("Storage Manager API Reference")])])])}],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/11.e1d01d7f.js b/docs/assets/js/11.e1d01d7f.js
deleted file mode 100644
index a5b679e14..000000000
--- a/docs/assets/js/11.e1d01d7f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{236:function(t,s,a){"use strict";a.r(s);var n=a(1),e=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("This page will introduce you to the main options of GrapesJS and how it works, in the way to be able to create your custom editor.")]),a("p",[t._v("The pretty minimalistic way to instantiate the editor could be like this:")]),t._m(1),a("p",[t._v("In just few lines, with the default configurations, you're already able to see something with which play around.")]),a("p",[t._v("[[img/default-gjs.jpg]]")]),a("p",[t._v("You'll see components commands on top left position that come handy to create and manage your blocks, below there are options which need to highlight and export them. When you select components ('mouse pointer' icon), on the right side, you should see pop up Class Manager and Style Manager options which allow to customize the style of the components. There is also a Layer Manager/Navigator ('hamburger' icon) which helps to manage easily the structure.")]),a("p",[t._v("Of course all those stuff (panels, buttons, commands, etc.) are set just as default so you can overwrite them and add more other. Before you start to create things you should know that GrapesJS UI is composed basically by a canvas (where you will 'draw') and panels (which will contain buttons)")]),a("p",[t._v("[[img/canvas-panels.jpg]]")]),t._m(2),a("p",[t._v("Let's start the editor with some basic toolbar panel")]),t._m(3),a("p",[t._v("In this example we set a panel with 'commands' as an id and after the render we'll see nothing more than an empty div added to our panels. The new panel is already styled as the id 'commands' is one of the default but you can use whatever you like and place it wherever you want with CSS. With refresh we might see something like shown in the image below, with the new panel on the left:")]),a("p",[t._v("[[img/new-panel.png]]")]),t._m(4),a("p",[t._v("Now let's put some button inside")]),t._m(5),a("p",[t._v("On refresh the page might present some changes ('fa fa-smile-o' are from FontAwesome set, so be sure to have placed correctly the font directory)")]),a("p",[t._v("[[img/new-btn.png]]")]),a("p",[t._v("Yeah, the button is pretty nice and happy, but useless without any command assigned, if you click on it nothing gonna happen.")]),t._m(6),t._m(7),t._m(8),t._m(9),a("p",[t._v("[[img/btn-clicked.png]]")]),t._m(10),a("p",[t._v("Check the "),a("a",{attrs:{href:"http://grapesjs.com/demo.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("demo"),a("OutboundLink")],1),t._v(" for more complete usage of panels, buttons and built-in commands.")]),t._m(11),a("p",[t._v("Components are elements inside the canvas, which can be drawn by commands or injected directly via configurations. In simple terms components represent the structure of our HTML document. You can init the editor with passing components as an HTML string")]),t._m(12),a("p",[t._v("We added 3 simple components with some basic style. If you refresh probably you'll see the same empty page but are actually there, you only need to highlight them.\nFor this purpose already exists a command, so add it to your panel in this way")]),t._m(13),t._m(14),a("p",[t._v("[[img/blocks3.jpg]]")]),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),a("p",[t._v("After this you'll be able to see something like in the image below")]),a("p",[t._v("[[img/enabled-sm.jpg]]")]),t._m(21),t._m(22),a("p",[t._v("Selecting one of the component will show up the Style Manager with default sectors, properties and an input where you can manage classes. The default class you see (cXX) was generated by extracting style from the component")]),a("p",[t._v("[[img/default-sm.jpg]]")]),a("p",[t._v("As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one")]),t._m(23),t._m(24),a("p",[t._v("Now you should be able to style components")]),a("p",[t._v("[[img/style-comp.jpg]]")]),t._m(25),t._m(26),t._m(27),t._m(28),t._m(29),t._m(30),a("p",[t._v("In this last part we're gonna see how to store and load template data inside GrapesJS. You may already noticed that even if you refresh the page after changes on canvas your data are not lost and this because GrapesJS comes with some built-in storage implementation.\nThe default one is the localStorage which is pretty simple and all the data are stored locally on your computer. Let's see the options available for this storage")]),t._m(31),t._m(32),a("p",[t._v("Storing data locally it's easy and fast but useless in some common cases. In the next example we'll see how to setup a remote storage, which is not far from the previous one")]),t._m(33),a("p",[t._v("As you can see we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.")]),a("p",[t._v("If you prefer you could also disable autosaving and do it by yourself using some custom command in this way:")]),t._m(34),t._m(35)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"getting-started"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting started")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path/to/grapes.min.css"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path/to/grapes.min.js"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token script language-javascript"}}),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("gjs"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token script language-javascript"}},[t._v("\n  "),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      container "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      components"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'
    Hello world!
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'.txt-red{color: red}'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")]),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("If you'd like to extend the already instantiated editor you have to check "),s("a",{attrs:{href:"API-Reference"}},[this._v("API Reference")]),this._v(". Check also "),s("a",{attrs:{href:"./Creating-plugins"}},[this._v("how to create plugins")]),this._v(" using the same API.\nIn this guide we'll focus on how to initialize the editor with all custom UI from scratch.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    height"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100%'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    panels"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Editor"}},[this._v("Editor API Reference")]),this._v(" for more details about editor configurations")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id          "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'fa fa-smile-o'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Smile'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Panels"}},[this._v("Panels API Reference")]),this._v(" for more details about Panels and Buttons")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Assigning commands is pretty easy, but before you should define one or use one of defaults ("),s("a",{attrs:{href:"./Built-in-commands"}},[this._v("Built-in commands")]),this._v("). So in this case we gonna create a new one.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id          "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'fa fa-smile-o'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Smile'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command     "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'helloWorld'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  commands"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'helloWorld'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n        run"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{attrs:{class:"token function"}},[t._v("alert")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Hello world!'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n          "),a("span",{attrs:{class:"token comment"}},[t._v("// Deactivate button")]),t._v("\n          senderBtn"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'active'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("false")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n        stop"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("As you see we added a new command "),a("code",[t._v("helloWorld")]),t._v(" and used its "),a("code",[t._v("id")]),t._v(" as an identifier inside "),a("code",[t._v("button.command")]),t._v(". In addition to this we've also implemented two required methods, "),a("code",[t._v("run")]),t._v(" and "),a("code",[t._v("stop")]),t._v(", to make button execute commands.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Commands"}},[this._v("Commands API Reference")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" Components")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// Disable default local storage in case you've already used GrapesJS")]),t._v("\n  storageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'none'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  components"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("+")]),t._v("\n              "),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("+")]),t._v("\n              "),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id        "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'vis'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'fa fa-eye'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'sw-visibility'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            context   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'some-random-context'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// For grouping context of buttons in the same panel")]),t._v("\n            active    "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Worth noting the use of "),s("code",[this._v("context")]),this._v(" option (try to click 'smile' command without it) and "),s("code",[this._v("active")]),this._v(" to enable it after the render.\nNow you should be able to see blocks inside canvas.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("You could add other commands to enable interactions with blocks. Check "),s("a",{attrs:{href:"./Built-in-commands"}},[this._v("Built-in commands")]),this._v(" to get more information")])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Components"}},[this._v("Components API Reference")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"style-manager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Style Manager")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("Any HTML structure requires, at some point, a proper style, so to meet this need the Style Manager was added as a built-in feature in GrapesJS. Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a "),a("code",[t._v("Dimension")]),t._v(" sector for "),a("code",[t._v("width")]),t._v(" and "),a("code",[t._v("height")]),t._v(", and another one as "),a("code",[t._v("Typography")]),t._v(" for "),a("code",[t._v("font-size")]),t._v(" and "),a("code",[t._v("color")]),t._v(". So it's up to you decide how organize sectors.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("To enable this module we rely on a built-in command "),s("code",[this._v("open-sm")]),this._v(", which shows up the Style Manager, which we gonna bind to another button in a separate panel")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\npanels"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n      "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{attrs:{class:"token comment"}},[t._v("// If you use this id the default CSS will place this panel on top right corner for you")]),t._v("\n        id      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'views'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id        "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'open-style-manager'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'fa fa-paint-brush'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'open-sm'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            active    "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("As you can see Style Manager is enabled but before using it you have to select an element in the canvas, for this purpose we can add another button with a built-in command "),s("code",[this._v("select-comp")]),this._v(" in this way")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id         "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'select'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'fa fa-mouse-pointer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'select-comp'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Let's put a few sectors with use of "),s("code",[this._v("buildProps")]),this._v(" which helps us building common properties")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'width'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("You can check the list of usable properties inside "),s("code",[this._v("buildProps")]),this._v(" here: "),s("a",{attrs:{href:"./Built-in-properties"}},[this._v("Built-in properties")]),this._v("\notherwise is possible to build them on your own, let's see how we'd have done the previous configuration without the "),s("code",[this._v("buildProps")]),this._v(" helper")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\nstyleManager "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  sectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{attrs:{class:"token comment"}},[t._v("// Just the name")]),t._v("\n            name      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Width'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{attrs:{class:"token comment"}},[t._v("// CSS property")]),t._v("\n            property  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'width'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{attrs:{class:"token comment"}},[t._v("// Type of the input, options: integer | radio | select | color | file | composite | stack")]),t._v("\n            type      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{attrs:{class:"token comment"}},[t._v("// Units, available only for 'integer' types")]),t._v("\n            units     "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'%'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{attrs:{class:"token comment"}},[t._v("// Default value")]),t._v("\n            defaults  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'auto'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{attrs:{class:"token comment"}},[t._v("// Min value, available only for 'integer' types")]),t._v("\n            min       "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{attrs:{class:"token comment"}},[t._v("// Here I'm going to be more original")]),t._v("\n            name      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Minimum height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            property  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            type      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'select'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            defaults  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{attrs:{class:"token comment"}},[t._v("// List of options, available only for 'select' and 'radio'  types")]),t._v("\n            list    "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'200px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'200'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'300'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{attrs:{class:"token comment"}},[t._v("// Sectors are expanded by default so put this one closed")]),t._v("\n      open"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("false")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Background'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          property  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          type      "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token string"}},[t._v("'none'")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name    "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Box shadow'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          property  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          type    "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'stack'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          preview   "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{attrs:{class:"token comment"}},[t._v("// List of nested properties, available only for 'stack' and 'composite'  types")]),t._v("\n          properties  "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'Shadow type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),a("span",{attrs:{class:"token comment"}},[t._v("// Nested properties with stack/composite type don't require proper 'property' name")]),t._v("\n                  "),a("span",{attrs:{class:"token comment"}},[t._v("// as all of them will be merged to parent property, eg. box-shadow: X Y ...;")]),t._v("\n                  property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token string"}},[t._v("'shadow-type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'select'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token string"}},[t._v("''")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  list"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("''")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Outside'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                              "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'inset'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Inside'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'X position'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token string"}},[t._v("'shadow-x'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token string"}},[t._v("'%'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'Y position'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token string"}},[t._v("'shadow-y'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token string"}},[t._v("'%'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'Blur'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'shadow-blur'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  min"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'Spread'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token string"}},[t._v("'shadow-spread'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("    "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'Color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token string"}},[t._v("'shadow-color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("     "),a("span",{attrs:{class:"token string"}},[t._v("'color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("   "),a("span",{attrs:{class:"token string"}},[t._v("'black'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("As you can see using "),s("code",[this._v("buildProps")]),this._v(" actually will save you a lot of work. You could also mix this techniques to obtain custom properties in less time. For example, let's see how can we setup the same width but with a different value of "),s("code",[this._v("min")]),this._v(":")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'width'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'width'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// Use 'property' as id")]),t._v("\n        min"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("30")]),t._v("\n      "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Style-Manager"}},[this._v("Style Manager API Reference")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"store-load-data"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-load-data","aria-hidden":"true"}},[this._v("#")]),this._v(" Store/load data")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),a("span",{attrs:{class:"token comment"}},[t._v("// Default configuration")]),t._v("\n    storageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'gjs-'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("             "),a("span",{attrs:{class:"token comment"}},[t._v("// Prefix identifier that will be used inside storing and loading")]),t._v("\n      type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'local'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("          "),a("span",{attrs:{class:"token comment"}},[t._v("// Type of the storage")]),t._v("\n      autosave"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{attrs:{class:"token comment"}},[t._v("// Store data automatically")]),t._v("\n      autoload"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{attrs:{class:"token comment"}},[t._v("// Autoload stored data on init")]),t._v("\n      stepsBeforeSave"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),a("span",{attrs:{class:"token comment"}},[t._v("// If autosave enabled, indicates how many changes are necessary before store method is triggered")]),t._v("\n      storeComponents"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("false")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of components in JSON format")]),t._v("\n      storeStyles"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("false")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),a("span",{attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of rules/style in JSON format")]),t._v("\n      storeHtml"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("        "),a("span",{attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of components as HTML string")]),t._v("\n      storeCss"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of rules/style as CSS string")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Worth noting the defaut "),s("code",[this._v("id")]),this._v(" parameter which adds a prefix for all keys to store. If you check the localStorage inside your DOM panel you'll see something like "),s("code",[this._v("{ 'gjs-components': '
    ....' ...}")]),this._v(" in this way it prevents the risk of collisions, quite common with localStorage use in large applications.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    storageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      stepsBeforeSave"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("10")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      urlStore"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'http://store/endpoint'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      urlLoad"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'http://load/endpoint'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      params"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("   "),a("span",{attrs:{class:"token comment"}},[t._v("// For custom values on requests")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  storageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    autosave"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("false")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  commands"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'storeData'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        run"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v("  "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("store")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("blockquote",[s("p",[this._v("Check "),s("a",{attrs:{href:"API-Storage-Manager"}},[this._v("Storage Manager API Reference")])])])}],!1,null,null,null);e.options.__file="Home.md";s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/12.7b5df652.js b/docs/assets/js/12.ea2d0633.js
similarity index 97%
rename from docs/assets/js/12.7b5df652.js
rename to docs/assets/js/12.ea2d0633.js
index b50dcdf9e..cbed19551 100644
--- a/docs/assets/js/12.7b5df652.js
+++ b/docs/assets/js/12.ea2d0633.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{234:function(e,t,r){"use strict";r.r(t);var a=r(1),s=Object(a.a)({},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"content"},[e._m(0),r("p"),e._m(1),r("p"),e._m(2),r("p",[e._v('At first glance might think this is just another page/HTML builder, but it\'s something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things".  By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. '),r("a",{attrs:{href:"https://mjml.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("MJML"),r("OutboundLink")],1),e._v("), Native Mobile Applications (eg. "),r("a",{attrs:{href:"https://github.com/facebook/react-native",target:"_blank",rel:"noopener noreferrer"}},[e._v("React Native"),r("OutboundLink")],1),e._v("), Native Desktop Applications (eg. "),r("a",{attrs:{href:"https://vuido.mimec.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuido"),r("OutboundLink")],1),e._v("), PDFs (eg. "),r("a",{attrs:{href:"https://github.com/diegomura/react-pdf",target:"_blank",rel:"noopener noreferrer"}},[e._v("React PDF"),r("OutboundLink")],1),e._v("), etc. So, for everything you can imagine as a set of elements like "),r("code",[e._v('... other nested elements ...')]),e._v(" you can create easily a GrapesJS builder around it and then use it independently your applications.\nGrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.")]),e._m(3),r("p",[e._v("GrapesJS was designed  primarily to for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors. Which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.")]),e._m(4),r("p",[e._v("To showcase the power of GrapesJS we have created some presets.")]),r("ul",[r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-preset-webpage",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-webpage"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Webpage Builder"),r("OutboundLink")],1)]),r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-preset-newsletter",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-newsletter"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo-newsletter-editor.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder"),r("OutboundLink")],1)]),r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-mjml",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-mjml"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo-mjml.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder with MJML"),r("OutboundLink")],1)])]),r("p",[e._v("You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.")]),e._m(5),r("p",[e._v("Latest version: "),r("a",{attrs:{href:"https://www.npmjs.com/package/grapesjs",target:"_blank",rel:"noopener noreferrer"}},[r("img",{attrs:{src:"https://img.shields.io/npm/v/grapesjs.svg?colorB=e67891",alt:"npm"}}),r("OutboundLink")],1)]),r("p",[e._v("You can download GrapesJS from one of these sources")]),e._m(6),e._m(7),r("p",[e._v("To track changes made in the library we rely on "),r("a",{attrs:{href:"https://github.com/artf/grapesjs/releases",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Releases"),r("OutboundLink")],1)])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"introduction"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#introduction","aria-hidden":"true"}},[this._v("#")]),this._v(" Introduction")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"table-of-contents"},[t("ul",[t("li",[t("a",{attrs:{href:"#what-is-grapesjs"}},[this._v("What is GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#why-grapesjs"}},[this._v("Why GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#quick-start"}},[this._v("Quick Start")])]),t("li",[t("a",{attrs:{href:"#download"}},[this._v("Download")])]),t("li",[t("a",{attrs:{href:"#changelog"}},[this._v("Changelog")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"what-is-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-grapesjs","aria-hidden":"true"}},[this._v("#")]),this._v(" What is GrapesJS?")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"why-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#why-grapesjs","aria-hidden":"true"}},[this._v("#")]),this._v(" Why GrapesJS?")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[this._v("#")]),this._v(" Quick Start")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"download"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#download","aria-hidden":"true"}},[this._v("#")]),this._v(" Download")])},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("ul",[r("li",[e._v("CDNs\n"),r("ul",[r("li",[e._v("unpkg\n"),r("ul",[r("li",[r("code",[e._v("https://unpkg.com/grapesjs")])]),r("li",[r("code",[e._v("https://unpkg.com/grapesjs/dist/css/grapes.min.css")])])])]),r("li",[e._v("cdnjs\n"),r("ul",[r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js")])]),r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css")])])])])])]),r("li",[e._v("npm\n"),r("ul",[r("li",[r("code",[e._v("npm i grapesjs")])])])]),r("li",[e._v("git\n"),r("ul",[r("li",[r("code",[e._v("git clone https://github.com/artf/grapesjs.git")])])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[this._v("#")]),this._v(" Changelog")])}],!1,null,null,null);s.options.__file="README.md";t.default=s.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{224:function(e,t,r){"use strict";r.r(t);var a=r(1),s=Object(a.a)({},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("div",{staticClass:"content"},[e._m(0),r("p"),e._m(1),r("p"),e._m(2),r("p",[e._v('At first glance might think this is just another page/HTML builder, but it\'s something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things".  By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. '),r("a",{attrs:{href:"https://mjml.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("MJML"),r("OutboundLink")],1),e._v("), Native Mobile Applications (eg. "),r("a",{attrs:{href:"https://github.com/facebook/react-native",target:"_blank",rel:"noopener noreferrer"}},[e._v("React Native"),r("OutboundLink")],1),e._v("), Native Desktop Applications (eg. "),r("a",{attrs:{href:"https://vuido.mimec.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuido"),r("OutboundLink")],1),e._v("), PDFs (eg. "),r("a",{attrs:{href:"https://github.com/diegomura/react-pdf",target:"_blank",rel:"noopener noreferrer"}},[e._v("React PDF"),r("OutboundLink")],1),e._v("), etc. So, for everything you can imagine as a set of elements like "),r("code",[e._v('... other nested elements ...')]),e._v(" you can create easily a GrapesJS builder around it and then use it independently your applications.\nGrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.")]),e._m(3),r("p",[e._v("GrapesJS was designed  primarily to for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors. Which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.")]),e._m(4),r("p",[e._v("To showcase the power of GrapesJS we have created some presets.")]),r("ul",[r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-preset-webpage",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-webpage"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Webpage Builder"),r("OutboundLink")],1)]),r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-preset-newsletter",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-preset-newsletter"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo-newsletter-editor.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder"),r("OutboundLink")],1)]),r("li",[r("a",{attrs:{href:"https://github.com/artf/grapesjs-mjml",target:"_blank",rel:"noopener noreferrer"}},[e._v("grapesjs-mjml"),r("OutboundLink")],1),e._v(" - "),r("a",{attrs:{href:"http://artf.github.io/grapesjs/demo-mjml.html",target:"_blank",rel:"noopener noreferrer"}},[e._v("Newsletter Builder with MJML"),r("OutboundLink")],1)])]),r("p",[e._v("You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.")]),e._m(5),r("p",[e._v("Latest version: "),r("a",{attrs:{href:"https://www.npmjs.com/package/grapesjs",target:"_blank",rel:"noopener noreferrer"}},[r("img",{attrs:{src:"https://img.shields.io/npm/v/grapesjs.svg?colorB=e67891",alt:"npm"}}),r("OutboundLink")],1)]),r("p",[e._v("You can download GrapesJS from one of these sources")]),e._m(6),e._m(7),r("p",[e._v("To track changes made in the library we rely on "),r("a",{attrs:{href:"https://github.com/artf/grapesjs/releases",target:"_blank",rel:"noopener noreferrer"}},[e._v("Github Releases"),r("OutboundLink")],1)])])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"introduction"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#introduction","aria-hidden":"true"}},[this._v("#")]),this._v(" Introduction")])},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"table-of-contents"},[t("ul",[t("li",[t("a",{attrs:{href:"#what-is-grapesjs"}},[this._v("What is GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#why-grapesjs"}},[this._v("Why GrapesJS?")])]),t("li",[t("a",{attrs:{href:"#quick-start"}},[this._v("Quick Start")])]),t("li",[t("a",{attrs:{href:"#download"}},[this._v("Download")])]),t("li",[t("a",{attrs:{href:"#changelog"}},[this._v("Changelog")])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"what-is-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#what-is-grapesjs","aria-hidden":"true"}},[this._v("#")]),this._v(" What is GrapesJS?")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"why-grapesjs"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#why-grapesjs","aria-hidden":"true"}},[this._v("#")]),this._v(" Why GrapesJS?")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"quick-start"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[this._v("#")]),this._v(" Quick Start")])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"download"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#download","aria-hidden":"true"}},[this._v("#")]),this._v(" Download")])},function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("ul",[r("li",[e._v("CDNs\n"),r("ul",[r("li",[e._v("unpkg\n"),r("ul",[r("li",[r("code",[e._v("https://unpkg.com/grapesjs")])]),r("li",[r("code",[e._v("https://unpkg.com/grapesjs/dist/css/grapes.min.css")])])])]),r("li",[e._v("cdnjs\n"),r("ul",[r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js")])]),r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css")])])])])])]),r("li",[e._v("npm\n"),r("ul",[r("li",[r("code",[e._v("npm i grapesjs")])])])]),r("li",[e._v("git\n"),r("ul",[r("li",[r("code",[e._v("git clone https://github.com/artf/grapesjs.git")])])])])])},function(){var e=this.$createElement,t=this._self._c||e;return t("h2",{attrs:{id:"changelog"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[this._v("#")]),this._v(" Changelog")])}],!1,null,null,null);t.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/13.2c86d6bb.js b/docs/assets/js/13.0aca6e95.js
similarity index 86%
rename from docs/assets/js/13.2c86d6bb.js
rename to docs/assets/js/13.0aca6e95.js
index e2b7b96fe..a5b2a7ee4 100644
--- a/docs/assets/js/13.2c86d6bb.js
+++ b/docs/assets/js/13.0aca6e95.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{232:function(e,t,a){"use strict";a.r(t);var n=a(1),s=Object(n.a)({},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[this._m(0),t("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);s.options.__file="README.md";t.default=s.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{229:function(e,t,a){"use strict";a.r(t);var n=a(1),s=Object(n.a)({},function(){var e=this.$createElement,t=this._self._c||e;return t("div",{staticClass:"content"},[this._m(0),t("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),t("router-link",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])},[function(){var e=this.$createElement,t=this._self._c||e;return t("h1",{attrs:{id:"api-reference"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#api-reference","aria-hidden":"true"}},[this._v("#")]),this._v(" API Reference")])}],!1,null,null,null);t.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/14.3a556795.js b/docs/assets/js/14.3a556795.js
new file mode 100644
index 000000000..0aa535d57
--- /dev/null
+++ b/docs/assets/js/14.3a556795.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{230:function(t,e,a){"use strict";a.r(e);var s=a(1),r=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Add new asset/s to the collection. URLs are supposed to be unique")]),t._m(5),a("ul",[a("li",[a("code",[t._v("asset")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">)")]),t._v(" URL strings or an objects representing the resource.")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("?")]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(6),t._m(7),t._m(8),t._m(9),a("p",[t._v("Returns the asset by URL")]),t._m(10),a("ul",[a("li",[a("code",[t._v("src")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" URL of the asset")])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object representing the asset")]),t._m(13),a("p",[t._v("Return the global collection, containing all the assets")]),t._m(14),t._m(15),a("p",[t._v("Return the visible collection, which containes assets actually rendered")]),t._m(16),t._m(17),a("p",[t._v("Remove the asset by its URL")]),t._m(18),a("ul",[a("li",[a("code",[t._v("src")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" URL of the asset")])]),t._m(19),t._m(20),t._m(21),t._m(22),a("p",[t._v("Store assets data to the selected storage")]),t._m(23),a("ul",[a("li",[a("code",[t._v("noStore")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If true, won't store")])]),t._m(24),t._m(25),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data to store")]),t._m(26),a("p",[t._v("Load data from the passed object.\nThe fetched data will be added to the collection.")]),t._m(27),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object of data to load (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(28),t._m(29),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Loaded assets")]),t._m(30),a("p",[t._v("Return the Asset Manager Container")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(31),a("p",[t._v("Get assets element container")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(32),a("p",[t._v("Render assets")]),t._m(33),a("ul",[a("li",[a("code",[t._v("assets")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("array"),a("OutboundLink")],1)]),t._v(" Assets to render, without the argument will render\nall global assets")])]),t._m(34),t._m(35),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(36),a("p",[t._v("Add new type. If you want to get more about type definition we suggest to read the "),a("router-link",{attrs:{to:"/modules/Assets.html"}},[t._v("module's page")])],1),t._m(37),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")]),a("li",[a("code",[t._v("definition")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Definition of the type. Each definition contains\n"),a("code",[t._v("model")]),t._v(" (business logic), "),a("code",[t._v("view")]),t._v(" (presentation logic)\nand "),a("code",[t._v("isType")]),t._v(" function which recognize the type of the\npassed entity")])]),t._m(38),t._m(39),t._m(40),a("p",[t._v("Get type")]),t._m(41),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Type definition")]),t._m(42),a("p",[t._v("Get types")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"assetmanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assetmanager","aria-hidden":"true"}},[this._v("#")]),this._v(" AssetManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n assetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assetManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("AssetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),a("li",[a("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),a("li",[a("a",{attrs:{href:"#remove"}},[t._v("remove")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),a("li",[a("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),a("li",[a("a",{attrs:{href:"#getassetsel"}},[t._v("getAssetsEl")])]),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In case of strings, would be interpreted as images")]),t._v("\nassetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Using objects you could indicate the type and other meta informations")]),t._v("\nassetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//type: 'image',\t//image is default")]),t._v("\n\theight"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nwidth"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" asset "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getallvisible"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible","aria-hidden":"true"}},[this._v("#")]),this._v(" getAllVisible")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("assetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tassets"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getassetsel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getassetsel","aria-hidden":"true"}},[this._v("#")]),this._v(" getAssetsEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render all assets")]),t._v("\nassetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render some of the assets")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assets "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("assets"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("asset")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" asset"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'category'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cats'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("assetManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("isType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])}],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/14.47aa7392.js b/docs/assets/js/14.47aa7392.js
deleted file mode 100644
index e9a47a5a8..000000000
--- a/docs/assets/js/14.47aa7392.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{230:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/asset_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Add new asset/s to the collection. URLs are supposed to be unique")]),t._m(5),a("ul",[a("li",[a("code",[t._v("asset")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">)")]),t._v(" URL strings or an objects representing the resource.")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("?")]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(6),t._m(7),t._m(8),t._m(9),a("p",[t._v("Returns the asset by URL")]),t._m(10),a("ul",[a("li",[a("code",[t._v("src")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" URL of the asset")])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object representing the asset")]),t._m(13),a("p",[t._v("Return the global collection, containing all the assets")]),t._m(14),t._m(15),a("p",[t._v("Return the visible collection, which containes assets actually rendered")]),t._m(16),t._m(17),a("p",[t._v("Remove the asset by its URL")]),t._m(18),a("ul",[a("li",[a("code",[t._v("src")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" URL of the asset")])]),t._m(19),t._m(20),t._m(21),t._m(22),a("p",[t._v("Store assets data to the selected storage")]),t._m(23),a("ul",[a("li",[a("code",[t._v("noStore")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If true, won't store")])]),t._m(24),t._m(25),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data to store")]),t._m(26),a("p",[t._v("Load data from the passed object.\nThe fetched data will be added to the collection.")]),t._m(27),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object of data to load (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(28),t._m(29),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Loaded assets")]),t._m(30),a("p",[t._v("Return the Asset Manager Container")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(31),a("p",[t._v("Get assets element container")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(32),a("p",[t._v("Render assets")]),t._m(33),a("ul",[a("li",[a("code",[t._v("assets")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("array"),a("OutboundLink")],1)]),t._v(" Assets to render, without the argument will render\nall global assets")])]),t._m(34),t._m(35),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(36),a("p",[t._v("Add new type. If you want to get more about type definition we suggest to read the "),a("router-link",{attrs:{to:"/modules/Assets.html"}},[t._v("module's page")])],1),t._m(37),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")]),a("li",[a("code",[t._v("definition")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Definition of the type. Each definition contains\n"),a("code",[t._v("model")]),t._v(" (business logic), "),a("code",[t._v("view")]),t._v(" (presentation logic)\nand "),a("code",[t._v("isType")]),t._v(" function which recognize the type of the\npassed entity")])]),t._m(38),t._m(39),t._m(40),a("p",[t._v("Get type")]),t._m(41),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Type definition")]),t._m(42),a("p",[t._v("Get types")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"assetmanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assetmanager","aria-hidden":"true"}},[this._v("#")]),this._v(" AssetManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n assetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assetManager "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("AssetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),a("li",[a("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),a("li",[a("a",{attrs:{href:"#remove"}},[t._v("remove")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),a("li",[a("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),a("li",[a("a",{attrs:{href:"#getassetsel"}},[t._v("getAssetsEl")])]),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// In case of strings, would be interpreted as images")]),t._v("\nassetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Using objects you could indicate the type and other meta informations")]),t._v("\nassetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),a("span",{attrs:{class:"token comment"}},[t._v("//type: 'image',\t//image is default")]),t._v("\n\theight"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("300")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nwidth"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("200")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" asset "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getallvisible"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible","aria-hidden":"true"}},[this._v("#")]),this._v(" getAllVisible")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("assetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("remove")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("store")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("load")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tassets"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token operator"}},[t._v("...")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getassetsel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getassetsel","aria-hidden":"true"}},[this._v("#")]),this._v(" getAssetsEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Render all assets")]),t._v("\nassetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("render")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Render some of the assets")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assets "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getAll")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("render")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("assets"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("filter")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n asset "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" asset"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'category'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'cats'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("assetManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addType")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'my-type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n isType"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])}],!1,null,null,null);n.options.__file="assets.md";e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/15.b8e65128.js b/docs/assets/js/15.b8e65128.js
new file mode 100644
index 000000000..80ddcdd82
--- /dev/null
+++ b/docs/assets/js/15.b8e65128.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{234:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(5),a("p",[t._v("Load default blocks if the collection is empty")]),t._m(6),a("p",[t._v("Add new block to the collection.")]),t._m(7),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.label")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the block")]),a("li",[a("code",[t._v("opts.content")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML content")]),a("li",[a("code",[t._v("opts.category")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(")")]),t._v(" Group the block inside a catgegory.\nYou should pass objects with id property, eg:\n{id: 'some-uid', label: 'My category'}\nThe string will be converted in:\n'someid' => {id: 'someid', label: 'someid'}")]),a("li",[a("code",[t._v("opts.attributes")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Block attributes (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])]),t._m(8),t._m(9),t._m(10),t._m(11),a("p",[t._v("Return the block by id")]),t._m(12),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")])]),t._m(13),t._m(14),t._m(15),a("p",[t._v("Return all blocks")]),t._m(16),t._m(17),t._m(18),t._m(19),a("p",[t._v("Return the visible collection, which containes blocks actually rendered")]),t._m(20),t._m(21),a("p",[t._v("Remove a block by id")]),t._m(22),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")])]),t._m(23),t._m(24),a("p",[t._v("Get all available categories.\nIt's possible to add categories only within blocks via 'add()' method")]),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(" | Collection)")])]),t._m(25),a("p",[t._v("Return the Blocks container element")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(26),a("p",[t._v("Render blocks")]),t._m(27),a("ul",[a("li",[a("code",[t._v("blocks")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Blocks to render, without the argument will render all global blocks")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.external")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Render blocks in a new container (HTMLElement will be returned)")]),a("li",[a("code",[t._v("opts.ignoreCategories")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Render blocks without categories")])])])]),t._m(28),t._m(29),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)]),t._v(" Rendered element")])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"blockmanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blockmanager","aria-hidden":"true"}},[this._v("#")]),this._v(" BlockManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blockManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("BlockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),a("li",[a("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),a("li",[a("a",{attrs:{href:"#remove"}},[t._v("remove")])]),a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#getcategories"}},[t._v("getCategories")])]),a("li",[a("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),a("li",[a("a",{attrs:{href:"#render"}},[t._v("render")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onload"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onload","aria-hidden":"true"}},[this._v("#")]),this._v(" onLoad")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'h1-block'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Heading'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Put your title here
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  category"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Basic'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    title"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Insert h1 block'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Block")]),this._v(" Added block")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" block "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'h1-block'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {label: 'Heading', content: '
    Put your ...', ...}")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [{label: 'Heading', content: '
    Put your ...'}, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getallvisible"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible","aria-hidden":"true"}},[this._v("#")]),this._v(" getAllVisible")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Block")]),this._v(" Removed block")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcategories"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcategories","aria-hidden":"true"}},[this._v("#")]),this._v(" getCategories")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render all blocks (inside the global collection)")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render new set of blocks")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" filtered "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blocks"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("block")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'category'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sections'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Or a new set from an array")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Label text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Content
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Back to blocks from the global collection")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// You can also render your blocks outside of the main block container")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newBlocksEl "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" external"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndocument"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-id'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendChild")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newBlocksEl"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])}],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/15.e5ae77bc.js b/docs/assets/js/15.e5ae77bc.js
deleted file mode 100644
index 85014d223..000000000
--- a/docs/assets/js/15.e5ae77bc.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{228:function(t,a,e){"use strict";e.r(a);var s=e(1),n=Object(s.a)({},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"content"},[t._m(0),e("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),e("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),e("OutboundLink")],1)]),t._m(1),e("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),e("p",[t._v("Get configuration object")]),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)])]),t._m(5),e("p",[t._v("Load default blocks if the collection is empty")]),t._m(6),e("p",[t._v("Add new block to the collection.")]),t._m(7),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")]),e("li",[e("code",[t._v("opts")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Options\n"),e("ul",[e("li",[e("code",[t._v("opts.label")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Name of the block")]),e("li",[e("code",[t._v("opts.content")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" HTML content")]),e("li",[e("code",[t._v("opts.category")]),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1),t._v(" | "),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1),t._v(")")]),t._v(" Group the block inside a catgegory.\nYou should pass objects with id property, eg:\n{id: 'some-uid', label: 'My category'}\nThe string will be converted in:\n'someid' => {id: 'someid', label: 'someid'}")]),e("li",[e("code",[t._v("opts.attributes")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Block attributes (optional, default "),e("code",[t._v("{}")]),t._v(")")])])])]),t._m(8),t._m(9),t._m(10),t._m(11),e("p",[t._v("Return the block by id")]),t._m(12),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")])]),t._m(13),t._m(14),t._m(15),e("p",[t._v("Return all blocks")]),t._m(16),t._m(17),t._m(18),t._m(19),e("p",[t._v("Return the visible collection, which containes blocks actually rendered")]),t._m(20),t._m(21),e("p",[t._v("Remove a block by id")]),t._m(22),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")])]),t._m(23),t._m(24),e("p",[t._v("Get all available categories.\nIt's possible to add categories only within blocks via 'add()' method")]),e("p",[t._v("Returns "),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(" | Collection)")])]),t._m(25),e("p",[t._v("Return the Blocks container element")]),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),e("OutboundLink")],1)])]),t._m(26),e("p",[t._v("Render blocks")]),t._m(27),e("ul",[e("li",[e("code",[t._v("blocks")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1)]),t._v(" Blocks to render, without the argument will render all global blocks")]),e("li",[e("code",[t._v("opts")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Options (optional, default "),e("code",[t._v("{}")]),t._v(")\n"),e("ul",[e("li",[e("code",[t._v("opts.external")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),e("OutboundLink")],1),t._v("?")]),t._v(" Render blocks in a new container (HTMLElement will be returned)")]),e("li",[e("code",[t._v("opts.ignoreCategories")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),e("OutboundLink")],1),t._v("?")]),t._v(" Render blocks without categories")])])])]),t._m(28),t._m(29),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),e("OutboundLink")],1)]),t._v(" Rendered element")])])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"blockmanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#blockmanager","aria-hidden":"true"}},[this._v("#")]),this._v(" BlockManager")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("init")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),e("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blockManager "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("BlockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ul",[e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),e("li",[e("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),e("li",[e("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),e("li",[e("a",{attrs:{href:"#remove"}},[t._v("remove")])]),e("li",[e("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),e("li",[e("a",{attrs:{href:"#getcategories"}},[t._v("getCategories")])]),e("li",[e("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),e("li",[e("a",{attrs:{href:"#render"}},[t._v("render")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"onload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onload","aria-hidden":"true"}},[this._v("#")]),this._v(" onLoad")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("add")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'h1-block'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  label"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Heading'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  content"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'
    Put your title here
    '")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  category"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Basic'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    title"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Insert h1 block'")]),t._v("\n  "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Block")]),this._v(" Added block")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" block "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token keyword"}},[t._v("get")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'h1-block'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("log")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token constant"}},[t._v("JSON")]),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("stringify")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// {label: 'Heading', content: '
    Put your ...', ...}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("getAll")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("log")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token constant"}},[t._v("JSON")]),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("stringify")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// [{label: 'Heading', content: '
    Put your ...'}, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getallvisible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible","aria-hidden":"true"}},[this._v("#")]),this._v(" getAllVisible")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Block")]),this._v(" Removed block")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getcategories"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcategories","aria-hidden":"true"}},[this._v("#")]),this._v(" getCategories")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getcontainer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token comment"}},[t._v("// Render all blocks (inside the global collection)")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Render new set of blocks")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("getAll")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" filtered "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blocks"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("filter")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block "),e("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" block"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token keyword"}},[t._v("get")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'category'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'sections'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Or a new set from an array")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("label"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Label text'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'
    Content
    '")]),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Back to blocks from the global collection")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("// You can also render your blocks outside of the main block container")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newBlocksEl "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" external"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndocument"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("getElementById")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'some-id'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("appendChild")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newBlocksEl"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])}],!1,null,null,null);n.options.__file="block_manager.md";a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/16.07b42741.js b/docs/assets/js/16.07b42741.js
deleted file mode 100644
index fd92c17cf..000000000
--- a/docs/assets/js/16.07b42741.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{226:function(t,e,a){"use strict";a.r(e);var s=a(1),r=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get the configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(5),a("p",[t._v("Get the canvas element")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(6),a("p",[t._v("Get the iframe element of the canvas")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLIFrameElement"),a("OutboundLink")],1)])]),t._m(7),a("p",[t._v("Get the window instance of the iframe element")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/API/Window",target:"_blank",rel:"noopener noreferrer"}},[t._v("Window"),a("OutboundLink")],1)])]),t._m(8),a("p",[t._v("Get the document of the iframe element")]),t._m(9),t._m(10),a("p",[t._v("Get the body of the iframe element")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element/body",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLBodyElement"),a("OutboundLink")],1)])]),t._m(11),a("p",[t._v("Get the wrapper element containing all the components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(12),a("p",[t._v("Set custom badge naming strategy")]),t._m(13),a("ul",[a("li",[a("code",[t._v("f")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)])])]),t._m(14),t._m(15),t._m(16),a("p",[t._v("Get canvas rectangular data")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(17),a("p",[t._v("Check if the canvas is focused")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(18),t._m(19),t._m(20),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | Component)")])]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options, same as options for "),a("code",[t._v("scrollIntoView")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.force")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" Force the scroll, even if the element is already visible (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._m(21),t._m(22),t._m(23),a("p",[t._v("Set zoom value")]),t._m(24),a("ul",[a("li",[a("code",[t._v("value")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)]),t._v(" The zoom value, from 0 to 100")])]),t._m(25),t._m(26),a("p",[t._v("Get zoom value")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"canvas"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n canvas"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" canvas "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Canvas"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#getelement"}},[t._v("getElement")])]),a("li",[a("a",{attrs:{href:"#getframeel"}},[t._v("getFrameEl")])]),a("li",[a("a",{attrs:{href:"#getwindow"}},[t._v("getWindow")])]),a("li",[a("a",{attrs:{href:"#getdocument"}},[t._v("getDocument")])]),a("li",[a("a",{attrs:{href:"#getbody"}},[t._v("getBody")])]),a("li",[a("a",{attrs:{href:"#getwrapperel"}},[t._v("getWrapperEl")])]),a("li",[a("a",{attrs:{href:"#setcustombadgelabel"}},[t._v("setCustomBadgeLabel")])]),a("li",[a("a",{attrs:{href:"#hasfocus"}},[t._v("hasFocus")])]),a("li",[a("a",{attrs:{href:"#scrollto"}},[t._v("scrollTo")])]),a("li",[a("a",{attrs:{href:"#setzoom"}},[t._v("setZoom")])]),a("li",[a("a",{attrs:{href:"#getzoom"}},[t._v("getZoom")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getelement"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getelement","aria-hidden":"true"}},[this._v("#")]),this._v(" getElement")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getframeel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getframeel","aria-hidden":"true"}},[this._v("#")]),this._v(" getFrameEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwindow"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwindow","aria-hidden":"true"}},[this._v("#")]),this._v(" getWindow")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdocument"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdocument","aria-hidden":"true"}},[this._v("#")]),this._v(" getDocument")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("HTMLDocument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getbody"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getbody","aria-hidden":"true"}},[this._v("#")]),this._v(" getBody")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapperel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapperel","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapperEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustombadgelabel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustombadgelabel","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomBadgeLabel")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("canvas"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomBadgeLabel")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getName")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getrect"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getrect","aria-hidden":"true"}},[this._v("#")]),this._v(" getRect")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"hasfocus"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#hasfocus","aria-hidden":"true"}},[this._v("#")]),this._v(" hasFocus")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"scrollto"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#scrollto","aria-hidden":"true"}},[this._v("#")]),this._v(" scrollTo")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Scroll canvas to the element if it's not visible. The scrolling is\nexecuted via "),e("code",[this._v("scrollIntoView")]),this._v(" API and options of this method are\npassed to it. For instance, you can scroll smoothly by using\n"),e("code",[this._v("{ behavior: 'smooth' }")]),this._v(".")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selected "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getSelected")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Scroll smoothly (this behavior can be polyfilled)")]),t._v("\ncanvas"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("scrollTo")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selected"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" behavior"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'smooth'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Force the scroll, even if the element is alredy visible")]),t._v("\ncanvas"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("scrollTo")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selected"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" force"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setzoom"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setzoom","aria-hidden":"true"}},[this._v("#")]),this._v(" setZoom")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getzoom"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getzoom","aria-hidden":"true"}},[this._v("#")]),this._v(" getZoom")])}],!1,null,null,null);r.options.__file="canvas.md";e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/16.9e8d0ee3.js b/docs/assets/js/16.9e8d0ee3.js
new file mode 100644
index 000000000..c4408ba24
--- /dev/null
+++ b/docs/assets/js/16.9e8d0ee3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{244:function(t,e,a){"use strict";a.r(e);var s=a(1),r=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/canvas/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get the configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(5),a("p",[t._v("Get the canvas element")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(6),a("p",[t._v("Get the iframe element of the canvas")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/API/HTMLIFrameElement",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLIFrameElement"),a("OutboundLink")],1)])]),t._m(7),a("p",[t._v("Get the window instance of the iframe element")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/API/Window",target:"_blank",rel:"noopener noreferrer"}},[t._v("Window"),a("OutboundLink")],1)])]),t._m(8),a("p",[t._v("Get the document of the iframe element")]),t._m(9),t._m(10),a("p",[t._v("Get the body of the iframe element")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element/body",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLBodyElement"),a("OutboundLink")],1)])]),t._m(11),a("p",[t._v("Get the wrapper element containing all the components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(12),a("p",[t._v("Set custom badge naming strategy")]),t._m(13),a("ul",[a("li",[a("code",[t._v("f")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)])])]),t._m(14),t._m(15),t._m(16),a("p",[t._v("Get canvas rectangular data")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(17),a("p",[t._v("Check if the canvas is focused")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(18),t._m(19),t._m(20),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | Component)")])]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options, same as options for "),a("code",[t._v("scrollIntoView")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.force")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" Force the scroll, even if the element is already visible (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._m(21),t._m(22),t._m(23),a("p",[t._v("Set zoom value")]),t._m(24),a("ul",[a("li",[a("code",[t._v("value")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)]),t._v(" The zoom value, from 0 to 100")])]),t._m(25),t._m(26),a("p",[t._v("Get zoom value")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"canvas"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" canvas "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#getelement"}},[t._v("getElement")])]),a("li",[a("a",{attrs:{href:"#getframeel"}},[t._v("getFrameEl")])]),a("li",[a("a",{attrs:{href:"#getwindow"}},[t._v("getWindow")])]),a("li",[a("a",{attrs:{href:"#getdocument"}},[t._v("getDocument")])]),a("li",[a("a",{attrs:{href:"#getbody"}},[t._v("getBody")])]),a("li",[a("a",{attrs:{href:"#getwrapperel"}},[t._v("getWrapperEl")])]),a("li",[a("a",{attrs:{href:"#setcustombadgelabel"}},[t._v("setCustomBadgeLabel")])]),a("li",[a("a",{attrs:{href:"#hasfocus"}},[t._v("hasFocus")])]),a("li",[a("a",{attrs:{href:"#scrollto"}},[t._v("scrollTo")])]),a("li",[a("a",{attrs:{href:"#setzoom"}},[t._v("setZoom")])]),a("li",[a("a",{attrs:{href:"#getzoom"}},[t._v("getZoom")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getelement"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getelement","aria-hidden":"true"}},[this._v("#")]),this._v(" getElement")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getframeel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getframeel","aria-hidden":"true"}},[this._v("#")]),this._v(" getFrameEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwindow"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwindow","aria-hidden":"true"}},[this._v("#")]),this._v(" getWindow")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdocument"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdocument","aria-hidden":"true"}},[this._v("#")]),this._v(" getDocument")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("HTMLDocument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getbody"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getbody","aria-hidden":"true"}},[this._v("#")]),this._v(" getBody")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapperel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapperel","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapperEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustombadgelabel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustombadgelabel","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomBadgeLabel")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setCustomBadgeLabel")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getName")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getrect"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getrect","aria-hidden":"true"}},[this._v("#")]),this._v(" getRect")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"hasfocus"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#hasfocus","aria-hidden":"true"}},[this._v("#")]),this._v(" hasFocus")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"scrollto"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#scrollto","aria-hidden":"true"}},[this._v("#")]),this._v(" scrollTo")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Scroll canvas to the element if it's not visible. The scrolling is\nexecuted via "),e("code",[this._v("scrollIntoView")]),this._v(" API and options of this method are\npassed to it. For instance, you can scroll smoothly by using\n"),e("code",[this._v("{ behavior: 'smooth' }")]),this._v(".")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selected "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getSelected")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Scroll smoothly (this behavior can be polyfilled)")]),t._v("\ncanvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scrollTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selected"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" behavior"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smooth'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Force the scroll, even if the element is alredy visible")]),t._v("\ncanvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scrollTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selected"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" force"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setzoom"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setzoom","aria-hidden":"true"}},[this._v("#")]),this._v(" setZoom")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getzoom"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getzoom","aria-hidden":"true"}},[this._v("#")]),this._v(" getZoom")])}],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/17.2a67de0b.js b/docs/assets/js/17.2a67de0b.js
deleted file mode 100644
index 0e4891302..000000000
--- a/docs/assets/js/17.2a67de0b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{257:function(t,a,s){"use strict";s.r(a);var e=s(1),n=Object(e.a)({},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"content"},[t._m(0),s("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),s("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),s("OutboundLink")],1)]),t._m(1),s("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),s("p",[t._v("Add new command to the collection")]),t._m(5),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Command's ID")]),s("li",[s("code",[t._v("command")]),s("strong",[t._v("("),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1),t._v(" | "),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),s("OutboundLink")],1),t._v(")")]),t._v(" Object representing your command,\nBy passing just a function it's intended as a stateless command\n(just like passing an object with only "),s("code",[t._v("run")]),t._v(" method).")])]),t._m(6),t._m(7),t._m(8),t._m(9),s("p",[t._v("Get command by ID")]),t._m(10),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Command's ID")])]),t._m(11),t._m(12),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Object representing the command")]),t._m(13),s("p",[t._v("Extend the command. The command to extend should be defined as an object")]),t._m(14),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Command's ID")]),t._m(15),s("li",[s("code",[t._v("Object")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" with the new command functions")])]),t._m(16),t._m(17),t._m(18),t._m(19),s("p",[t._v("Check if command exists")]),t._m(20),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Command's ID")])]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),s("OutboundLink")],1)])]),t._m(21),s("p",[t._v("Get an object containing all the commands")]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)])]),t._m(22),s("p",[t._v("Execute the command")]),t._m(23),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Command ID")]),s("li",[s("code",[t._v("options")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Options (optional, default "),s("code",[t._v("{}")]),t._v(")")])]),t._m(24),t._m(25),t._m(26),t._m(27),s("p",[t._v("Stop the command")]),t._m(28),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Command ID")]),s("li",[s("code",[t._v("options")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Options (optional, default "),s("code",[t._v("{}")]),t._v(")")])]),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Command id")])]),t._m(35),t._m(36),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),s("OutboundLink")],1)])]),t._m(37),s("p",[t._v("Get all active commands")]),t._m(38),t._m(39),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)])])])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"commands"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#commands","aria-hidden":"true"}},[this._v("#")]),this._v(" Commands")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("init")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n commands"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" commands "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Commands"),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ul",[s("li",[s("a",{attrs:{href:"#add"}},[t._v("add")])]),s("li",[s("a",{attrs:{href:"#get"}},[t._v("get")])]),s("li",[s("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),s("li",[s("a",{attrs:{href:"#extend"}},[t._v("extend")])]),s("li",[s("a",{attrs:{href:"#has"}},[t._v("has")])]),s("li",[s("a",{attrs:{href:"#run"}},[t._v("run")])]),s("li",[s("a",{attrs:{href:"#stop"}},[t._v("stop")])]),s("li",[s("a",{attrs:{href:"#isactive"}},[t._v("isActive")])]),s("li",[s("a",{attrs:{href:"#getactive"}},[t._v("getActive")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{attrs:{class:"token function"}},[t._v("run")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sender"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{attrs:{class:"token function"}},[t._v("alert")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'Hello world!'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{attrs:{class:"token function"}},[t._v("stop")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sender"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// As a function")]),t._v("\ncommands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myCommand2'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" editor "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("this")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myCommand "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" commands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token keyword"}},[t._v("get")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmyCommand"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("run")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"extend"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extend","aria-hidden":"true"}},[this._v("#")]),this._v(" extend")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("li",[a("code",[this._v("cmd")]),this._v("   (optional, default "),a("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("extend")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'old-command'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token function"}},[t._v("someInnerFunction")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("this")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"has"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#has","aria-hidden":"true"}},[this._v("#")]),this._v(" has")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"run"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#run","aria-hidden":"true"}},[this._v("#")]),this._v(" run")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("run")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" someOption"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"stop"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#stop","aria-hidden":"true"}},[this._v("#")]),this._v(" stop")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("stop")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" someOption"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"isactive"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#isactive","aria-hidden":"true"}},[this._v("#")]),this._v(" isActive")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Check if the command is active. You activate commands with "),a("code",[this._v("run")]),this._v("\nand disable them with "),a("code",[this._v("stop")]),this._v(". If the command was created without "),a("code",[this._v("stop")]),this._v("\nmethod it can't be registered as active")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cId "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'some-command'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("run")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("isActive")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\ncommands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("stop")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("isActive")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getactive"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getactive","aria-hidden":"true"}},[this._v("#")]),this._v(" getActive")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("console"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("log")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("commands"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("getActive")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// -> { someCommand: itsLastReturn, anotherOne: ... };")]),t._v("\n")])])])}],!1,null,null,null);n.options.__file="commands.md";a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/17.fea2549e.js b/docs/assets/js/17.fea2549e.js
new file mode 100644
index 000000000..48070b533
--- /dev/null
+++ b/docs/assets/js/17.fea2549e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{245:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/commands/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Add new command to the collection")]),t._m(5),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command's ID")]),a("li",[a("code",[t._v("command")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")")]),t._v(" Object representing your command,\nBy passing just a function it's intended as a stateless command\n(just like passing an object with only "),a("code",[t._v("run")]),t._v(" method).")])]),t._m(6),t._m(7),t._m(8),t._m(9),a("p",[t._v("Get command by ID")]),t._m(10),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command's ID")])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object representing the command")]),t._m(13),a("p",[t._v("Extend the command. The command to extend should be defined as an object")]),t._m(14),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command's ID")]),t._m(15),a("li",[a("code",[t._v("Object")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" with the new command functions")])]),t._m(16),t._m(17),t._m(18),t._m(19),a("p",[t._v("Check if command exists")]),t._m(20),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command's ID")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(21),a("p",[t._v("Get an object containing all the commands")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(22),a("p",[t._v("Execute the command")]),t._m(23),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(24),t._m(25),t._m(26),t._m(27),a("p",[t._v("Stop the command")]),t._m(28),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),t._m(34),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Command id")])]),t._m(35),t._m(36),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(37),a("p",[t._v("Get all active commands")]),t._m(38),t._m(39),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"commands"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#commands","aria-hidden":"true"}},[this._v("#")]),this._v(" Commands")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" commands "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),a("li",[a("a",{attrs:{href:"#extend"}},[t._v("extend")])]),a("li",[a("a",{attrs:{href:"#has"}},[t._v("has")])]),a("li",[a("a",{attrs:{href:"#run"}},[t._v("run")])]),a("li",[a("a",{attrs:{href:"#stop"}},[t._v("stop")])]),a("li",[a("a",{attrs:{href:"#isactive"}},[t._v("isActive")])]),a("li",[a("a",{attrs:{href:"#getactive"}},[t._v("getActive")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sender")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello world!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sender")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// As a function")]),t._v("\ncommands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myCommand "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmyCommand"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"extend"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#extend","aria-hidden":"true"}},[this._v("#")]),this._v(" extend")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("cmd")]),this._v("   (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'old-command'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("someInnerFunction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"has"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#has","aria-hidden":"true"}},[this._v("#")]),this._v(" has")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"run"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#run","aria-hidden":"true"}},[this._v("#")]),this._v(" run")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" someOption"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stop"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stop","aria-hidden":"true"}},[this._v("#")]),this._v(" stop")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" someOption"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"isactive"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#isactive","aria-hidden":"true"}},[this._v("#")]),this._v(" isActive")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Check if the command is active. You activate commands with "),e("code",[this._v("run")]),this._v("\nand disable them with "),e("code",[this._v("stop")]),this._v(". If the command was created without "),e("code",[this._v("stop")]),this._v("\nmethod it can't be registered as active")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cId "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-command'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("isActive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\ncommands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("isActive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getactive"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getactive","aria-hidden":"true"}},[this._v("#")]),this._v(" getActive")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("commands"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getActive")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { someCommand: itsLastReturn, anotherOne: ... };")]),t._v("\n")])])])}],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/18.112c9d7a.js b/docs/assets/js/18.112c9d7a.js
new file mode 100644
index 000000000..2aaff3d49
--- /dev/null
+++ b/docs/assets/js/18.112c9d7a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{212:function(t,e,a){"use strict";a.r(e);var r=a(1),s=Object(r.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("The Component object represents a single node of our template structure, so when you update its properties the changes are\nimmediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all\nthe tree of nodes).\nAn example on how to update properties:")]),t._m(1),t._m(2),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Component type, eg. "),a("code",[t._v("text")]),t._v(", "),a("code",[t._v("image")]),t._v(", "),a("code",[t._v("video")]),t._v(", etc.")]),a("li",[a("code",[t._v("tagName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" HTML tag of the component, eg. "),a("code",[t._v("span")]),t._v(". Default: "),a("code",[t._v("div")])]),a("li",[a("code",[t._v("attributes")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("?")]),t._v(" Key-value object of the component's attributes, eg. "),a("code",[t._v("{ title: 'Hello' }")]),t._v(" Default: "),a("code",[t._v("{}")])]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Name of the component. Will be used, for example, in Layers and badges")]),a("li",[a("code",[t._v("removable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" When "),a("code",[t._v("true")]),t._v(" the component is removable from the canvas, default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("draggable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Indicates if it's possible to drag the component inside others.\nYou can also specify a query string to indentify elements,\neg. "),a("code",[t._v("'.some-class[title=Hello], [data-gjs-type=column]'")]),t._v(" means you can drag the component only inside elements\ncontaining "),a("code",[t._v("some-class")]),t._v(" class and "),a("code",[t._v("Hello")]),t._v(" title, and "),a("code",[t._v("column")]),t._v(" components. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("droppable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Indicates if it's possible to drop other components inside. You can use\na query string as with "),a("code",[t._v("draggable")]),t._v(". Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("badgable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Set to false if you don't want to see the badge (with the name) over the component. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("stylable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">)?")]),t._v(" True if it's possible to style the component.\nYou can also indicate an array of CSS properties which is possible to style, eg. "),a("code",[t._v("['color', 'width']")]),t._v(", all other properties\nwill be hidden from the style manager. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("stylable-require")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicate an array of style properties to show up which has been marked as "),a("code",[t._v("toRequire")]),t._v(". Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("unstylable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicate an array of style properties which should be hidden from the style manager. Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("style-signature")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("highlightable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" It can be highlighted with 'dotted' borders if true. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("copyable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" True if it's possible to clone the component. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("resizable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Indicates if it's possible to resize the component. It's also possible to pass an object as "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("options for the Resizer"),a("OutboundLink")],1),t._v(". Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("editable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Allow to edit the content of the component (used on Text components). Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("layerable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Set to "),a("code",[t._v("false")]),t._v(" if you need to hide the component inside Layers. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("selectable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Allow component to be selected when clicked. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("hoverable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Shows a highlight outline when hovering on the element if "),a("code",[t._v("true")]),t._v(". Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("void")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" This property is used by the HTML exporter as void elements don't have closing tags, eg. "),a("code",[t._v("
    ")]),t._v(", "),a("code",[t._v("
    ")]),t._v(", etc. Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("content")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Content of the component (not escaped) which will be appended before children rendering. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("icon")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '"),a("i",{staticClass:"fa fa-square-o"}),t._v("'. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("script")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")?")]),t._v(" Component's javascript. More about it "),a("router-link",{attrs:{to:"/modules/Components-js.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("''")])],1),a("li",[a("code",[t._v("script-export")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")?")]),t._v(" You can specify javascript available only in export functions (eg. when you get the HTML).\nIf this property is defined it will overwrite the "),a("code",[t._v("script")]),t._v(" one (in export functions). Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("traits")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")>?")]),t._v(" Component's traits. More about it "),a("router-link",{attrs:{to:"/modules/Traits.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("['id', 'title']")])],1),a("li",[a("code",[t._v("propagate")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicates an array of properties which will be inhereted by all NEW appended children.\nFor example if you create a component likes this: "),a("code",[t._v("{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }")]),t._v("\nand append some new component inside, the new added component will get the exact same properties indicated in the "),a("code",[t._v("propagate")]),t._v(" array (and the "),a("code",[t._v("propagate")]),t._v(" property itself). Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("toolbar")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">?")]),t._v(" Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).\nEg. "),a("code",[t._v("toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]")]),t._v(".\nBy default, when "),a("code",[t._v("toolbar")]),t._v(" property is falsy the editor will add automatically commands like "),a("code",[t._v("move")]),t._v(", "),a("code",[t._v("delete")]),t._v(", etc. based on its properties.")]),t._m(3)]),t._m(4),a("p",[t._v("Hook method, called once the model is created")]),t._m(5),a("p",[t._v("Hook method, called when the model has been updated (eg. updated some model's property)")]),t._m(6),a("ul",[a("li",[a("code",[t._v("property")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Property name, if triggered after some property update")]),t._m(7),t._m(8)]),t._m(9),a("p",[t._v("Hook method, called once the model has been removed")]),t._m(10),a("p",[t._v("Check component's type")]),t._m(11),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component type")])]),t._m(12),t._m(13),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(14),a("p",[t._v("Return all the propeties")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(15),a("p",[t._v("Get the index of the component in the parent collection.")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)])]),t._m(16),a("p",[t._v("Change the drag mode of the component.\nTo get more about this feature read: "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/issues/1936",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/artf/grapesjs/issues/1936"),a("OutboundLink")],1)]),t._m(17),a("ul",[a("li",[a("code",[t._v("value")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Drag mode, options: 'absolute' | 'translate'")])]),t._m(18),t._m(19),t._m(20),t._m(21),a("ul",[a("li",[a("code",[t._v("query")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Query string")])]),t._m(22),t._m(23),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of components")]),t._m(24),t._m(25),t._m(26),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Component id")])]),t._m(27),t._m(28),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">")])]),t._m(29),t._m(30),t._m(31),a("ul",[a("li",[a("code",[t._v("query")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Query string")])]),t._m(32),t._m(33),t._m(34),t._m(35),a("p",[t._v("Replace a component with another one")]),t._m(36),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(")")]),t._v(" Component or HTML string")])]),t._m(37),t._m(38),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">)")]),t._v(" New added component/s")]),t._m(39),a("p",[t._v("Update attributes of the component")]),t._m(40),a("ul",[a("li",[a("code",[t._v("attrs")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value attributes")]),t._m(41)]),t._m(42),t._m(43),t._m(44),t._m(45),a("p",[t._v("Add attributes to the component")]),t._m(46),a("ul",[a("li",[a("code",[t._v("attrs")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value attributes")])]),t._m(47),t._m(48),t._m(49),t._m(50),a("p",[t._v("Get the style of the component")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(51),a("p",[t._v("Set the style on the component")]),t._m(52),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value style object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._m(53)]),t._m(54),t._m(55),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(56),a("p",[t._v("Return all component's attributes")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(57),a("p",[t._v("Add classes")]),t._m(58),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(59),t._m(60),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(61),a("p",[t._v("Set classes (resets current collection)")]),t._m(62),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(63),t._m(64),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(65),a("p",[t._v("Remove classes")]),t._m(66),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(67),t._m(68),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed selectors")]),t._m(69),a("p",[t._v("Returns component's classes as an array of strings")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(70),a("p",[t._v("Add new component children")]),t._m(71),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to add")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options, same as in "),a("code",[t._v("model.add()")]),t._v("(from backbone) (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(72),t._m(73),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of appended components")]),t._m(74),t._m(75),t._m(76),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Components to set")])]),t._m(77),t._m(78),a("p",[t._v("Returns "),a("strong",[t._v("(Collection | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">)")])]),t._m(79),a("p",[t._v("Get the parent component, if exists")]),t._m(80),t._m(81),t._m(82),t._m(83),a("p",[t._v("Get the trait by id/name")]),t._m(84),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._m(85),t._m(86),t._m(87),t._m(88),a("p",[t._v("Update a trait")]),t._m(89),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")]),a("li",[a("code",[t._v("props")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object with the props to update")])]),t._m(90),t._m(91),t._m(92),t._m(93),a("p",[t._v("Get the trait position index by id/name. Useful in case you want to\nreplace some trait, at runtime, with something else.")]),t._m(94),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._m(95),t._m(96),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)]),t._v(" Index position of the current trait")]),t._m(97),a("p",[t._v("Remove trait/s by id/s.")]),t._m(98),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">)")]),t._v(" The "),a("code",[t._v("id")]),t._v("/"),a("code",[t._v("name")]),t._v(" of the trait (or an array)")])]),t._m(99),t._m(100),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed traits")]),t._m(101),a("p",[t._v("Add trait/s by id/s.")]),t._m(102),a("ul",[a("li",[a("code",[t._v("trait")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(")>)")]),t._v(" Trait to add (or an array of traits)")]),t._m(103)]),t._m(104),t._m(105),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added traits")]),t._m(106),a("p",[t._v("Get the name of the component")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(107),a("p",[t._v("Get the icon string")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(108),a("p",[t._v("Return HTML string of the component")]),t._m(109),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.attributes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")")]),t._v(" You can pass an object of custom attributes to replace\nwith the current one or you can even pass a function to generate attributes dynamically (optional, default "),a("code",[t._v("null")]),t._v(")")])])])]),t._m(110),t._m(111),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(112),a("p",[t._v("Return the component id")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(113),a("p",[t._v("Set new id on the component")]),t._m(114),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])])]),t._m(115),t._m(116),a("p",[t._v("Get the DOM element of the component.\nThis works only if the component is already rendered")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(117),a("p",[t._v("Get the View of the component.\nThis works only if the component is already rendered")]),t._m(118),t._m(119),a("p",[t._v("Execute callback function on itself and all inner components")]),t._m(120),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function, the model is passed as an argument")])]),t._m(121),t._m(122),t._m(123),t._m(124),a("p",[t._v("Remove the component")]),t._m(125),t._m(126),a("p",[t._v("The list of components is taken from the Components module.\nInitially, the list, was set statically on the Component object but it was\nnot ok, as it was shared between multiple editor instances")]),t._m(127),t._m(128),t._m(129),a("p",[t._v("This method checks, for each parsed component and style object\n(are not Components/CSSRules yet), for duplicated id and fixes them\nThis method is used in Components.js just after the parsing")]),t._m(130),t._m(131)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"component"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#component","aria-hidden":"true"}},[this._v("#")]),this._v(" Component")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tagName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n removable"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 'span'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"properties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#properties","aria-hidden":"true"}},[this._v("#")]),this._v(" Properties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("components")]),e("strong",[this._v("Collection<"),e("a",{attrs:{href:"#component"}},[this._v("Component")]),this._v(">?")]),this._v(" Children components. Default: "),e("code",[this._v("null")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"init"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#init","aria-hidden":"true"}},[this._v("#")]),this._v(" init")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"updated"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updated","aria-hidden":"true"}},[this._v("#")]),this._v(" updated")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("value")]),e("strong",[this._v("any")]),this._v(" Property value, if triggered after some property update")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("previous")]),e("strong",[this._v("any")]),this._v(" Property previous value, if triggered after some property update")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removed"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removed","aria-hidden":"true"}},[this._v("#")]),this._v(" removed")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"is"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#is","aria-hidden":"true"}},[this._v("#")]),this._v(" is")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("is")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'image'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"props"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[this._v("#")]),this._v(" props")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"index"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#index","aria-hidden":"true"}},[this._v("#")]),this._v(" index")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setdragmode"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setdragmode","aria-hidden":"true"}},[this._v("#")]),this._v(" setDragMode")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"find"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#find","aria-hidden":"true"}},[this._v("#")]),this._v(" find")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find inner components by query string.\n"),e("strong",[this._v("ATTENTION")]),this._v(": this method works only with already rendered component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div > .class'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [Component, Component, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"findtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#findtype","aria-hidden":"true"}},[this._v("#")]),this._v(" findType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find all inner components by component id.\nThe advantage of this method over "),e("code",[this._v("find")]),this._v(" is that you can use it\nalso before rendering the component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" allImages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("findType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'image'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("allImages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// prints the first found component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"closest"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#closest","aria-hidden":"true"}},[this._v("#")]),this._v(" closest")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find the closest parent component by query string.\n"),e("strong",[this._v("ATTENTION")]),this._v(": this method works only with already rendered component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("closest")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div.some-class'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[e("a",{attrs:{href:"#component"}},[this._v("Component")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"replacewith"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#replacewith","aria-hidden":"true"}},[this._v("#")]),this._v(" replaceWith")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("replaceWith")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Some new content
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" setAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v("   (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" addAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v("   (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" getAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addclass","aria-hidden":"true"}},[this._v("#")]),this._v(" addClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setclass","aria-hidden":"true"}},[this._v("#")]),this._v(" setClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeclass","aria-hidden":"true"}},[this._v("#")]),this._v(" removeClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getclasses"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getclasses","aria-hidden":"true"}},[this._v("#")]),this._v(" getClasses")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"append"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#append","aria-hidden":"true"}},[this._v("#")]),this._v(" append")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("someComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 0")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" videoComponent "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" someComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This will add 2 components (`video` and `div`) to your `someComponent`")]),t._v("\nsomeComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// You can pass components directly")]),t._v("\notherComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("otherComponent2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\notherComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("otherComponent3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" otherComponent4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" components")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Set new collection if "),e("code",[this._v("components")]),this._v(" are provided, otherwise the\ncurrent collection is returned")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set new collection")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("components")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Get current collection")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" collection "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("components")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("collection"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"parent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parent","aria-hidden":"true"}},[this._v("#")]),this._v(" parent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("parent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[e("a",{attrs:{href:"#component"}},[this._v("Component")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettrait","aria-hidden":"true"}},[this._v("#")]),this._v(" getTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ntraitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" traitTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'label'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New label'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Trait")]),this._v(" Trait model")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"updatetrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updatetrait","aria-hidden":"true"}},[this._v("#")]),this._v(" updateTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("updateTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Option 1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Option 2'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettraitindex"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettraitindex","aria-hidden":"true"}},[this._v("#")]),this._v(" getTraitIndex")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getTraitIndex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("traitTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removetrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removetrait","aria-hidden":"true"}},[this._v("#")]),this._v(" removeTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'id'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtrait","aria-hidden":"true"}},[this._v("#")]),this._v(" addTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),e("strong",[this._v("Options")]),this._v(" Options for the add (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Add title trait (`at` option is the position index)")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'checkbox'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'disabled'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getname"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getname","aria-hidden":"true"}},[this._v("#")]),this._v(" getName")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"geticon"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#geticon","aria-hidden":"true"}},[this._v("#")]),this._v(" getIcon")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"tohtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#tohtml","aria-hidden":"true"}},[this._v("#")]),this._v(" toHTML")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Simple HTML return")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" tagName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Custom attributes")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-test'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Custom dynamic attributes")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("attributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" attributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Custom attribute'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getid","aria-hidden":"true"}},[this._v("#")]),this._v(" getId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setid","aria-hidden":"true"}},[this._v("#")]),this._v(" setId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-22"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getel","aria-hidden":"true"}},[this._v("#")]),this._v(" getEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getview","aria-hidden":"true"}},[this._v("#")]),this._v(" getView")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("ComponentView")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onall","aria-hidden":"true"}},[this._v("#")]),this._v(" onAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-23"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-23","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something with component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getlist"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getlist","aria-hidden":"true"}},[this._v("#")]),this._v(" getList")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-24"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-24","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("model")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"checkid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#checkid","aria-hidden":"true"}},[this._v("#")]),this._v(" checkId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-25"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-25","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("components")])]),a("li",[a("code",[t._v("styles")]),t._v("   (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("list")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])])}],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/18.11c93f1e.js b/docs/assets/js/18.11c93f1e.js
deleted file mode 100644
index f7f5c33fc..000000000
--- a/docs/assets/js/18.11c93f1e.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{256:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("The Component object represents a single node of our template structure, so when you update its properties the changes are\nimmediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all\nthe tree of nodes).\nAn example on how to update properties:")]),t._m(1),t._m(2),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Component type, eg. "),a("code",[t._v("text")]),t._v(", "),a("code",[t._v("image")]),t._v(", "),a("code",[t._v("video")]),t._v(", etc.")]),a("li",[a("code",[t._v("tagName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" HTML tag of the component, eg. "),a("code",[t._v("span")]),t._v(". Default: "),a("code",[t._v("div")])]),a("li",[a("code",[t._v("attributes")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("?")]),t._v(" Key-value object of the component's attributes, eg. "),a("code",[t._v("{ title: 'Hello' }")]),t._v(" Default: "),a("code",[t._v("{}")])]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Name of the component. Will be used, for example, in Layers and badges")]),a("li",[a("code",[t._v("removable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" When "),a("code",[t._v("true")]),t._v(" the component is removable from the canvas, default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("draggable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Indicates if it's possible to drag the component inside others.\nYou can also specify a query string to indentify elements,\neg. "),a("code",[t._v("'.some-class[title=Hello], [data-gjs-type=column]'")]),t._v(" means you can drag the component only inside elements\ncontaining "),a("code",[t._v("some-class")]),t._v(" class and "),a("code",[t._v("Hello")]),t._v(" title, and "),a("code",[t._v("column")]),t._v(" components. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("droppable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Indicates if it's possible to drop other components inside. You can use\na query string as with "),a("code",[t._v("draggable")]),t._v(". Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("badgable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Set to false if you don't want to see the badge (with the name) over the component. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("stylable")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">)?")]),t._v(" True if it's possible to style the component.\nYou can also indicate an array of CSS properties which is possible to style, eg. "),a("code",[t._v("['color', 'width']")]),t._v(", all other properties\nwill be hidden from the style manager. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("stylable-require")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicate an array of style properties to show up which has been marked as "),a("code",[t._v("toRequire")]),t._v(". Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("unstylable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicate an array of style properties which should be hidden from the style manager. Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("style-signature")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("highlightable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" It can be highlighted with 'dotted' borders if true. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("copyable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" True if it's possible to clone the component. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("resizable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Indicates if it's possible to resize the component. It's also possible to pass an object as "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/utils/Resizer.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("options for the Resizer"),a("OutboundLink")],1),t._v(". Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("editable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Allow to edit the content of the component (used on Text components). Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("layerable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Set to "),a("code",[t._v("false")]),t._v(" if you need to hide the component inside Layers. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("selectable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Allow component to be selected when clicked. Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("hoverable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Shows a highlight outline when hovering on the element if "),a("code",[t._v("true")]),t._v(". Default: "),a("code",[t._v("true")])]),a("li",[a("code",[t._v("void")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" This property is used by the HTML exporter as void elements don't have closing tags, eg. "),a("code",[t._v("
    ")]),t._v(", "),a("code",[t._v("
    ")]),t._v(", etc. Default: "),a("code",[t._v("false")])]),a("li",[a("code",[t._v("content")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Content of the component (not escaped) which will be appended before children rendering. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("icon")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("?")]),t._v(" Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '"),a("i",{staticClass:"fa fa-square-o"}),t._v("'. Default: "),a("code",[t._v("''")])]),a("li",[a("code",[t._v("script")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")?")]),t._v(" Component's javascript. More about it "),a("router-link",{attrs:{to:"/modules/Components-js.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("''")])],1),a("li",[a("code",[t._v("traits")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")>?")]),t._v(" Component's traits. More about it "),a("router-link",{attrs:{to:"/modules/Traits.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("['id', 'title']")])],1),a("li",[a("code",[t._v("propagate")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" Indicates an array of properties which will be inhereted by all NEW appended children.\nFor example if you create a component likes this: "),a("code",[t._v("{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }")]),t._v("\nand append some new component inside, the new added component will get the exact same properties indicated in the "),a("code",[t._v("propagate")]),t._v(" array (and the "),a("code",[t._v("propagate")]),t._v(" property itself). Default: "),a("code",[t._v("[]")])]),a("li",[a("code",[t._v("toolbar")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">?")]),t._v(" Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).\nEg. "),a("code",[t._v("toolbar: [ { attributes: {class: 'fa fa-arrows'}, command: 'tlb-move' }, ... ]")]),t._v(".\nBy default, when "),a("code",[t._v("toolbar")]),t._v(" property is falsy the editor will add automatically commands like "),a("code",[t._v("move")]),t._v(", "),a("code",[t._v("delete")]),t._v(", etc. based on its properties.")]),t._m(3)]),t._m(4),a("p",[t._v("Hook method, called once the model is created")]),t._m(5),a("p",[t._v("Hook method, called when the model has been updated (eg. updated some model's property)")]),t._m(6),a("ul",[a("li",[a("code",[t._v("property")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Property name, if triggered after some property update")]),t._m(7),t._m(8)]),t._m(9),a("p",[t._v("Hook method, called once the model has been removed")]),t._m(10),a("p",[t._v("Check component's type")]),t._m(11),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component type")])]),t._m(12),t._m(13),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(14),a("p",[t._v("Get the index of the component in the parent collection.")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)])]),t._m(15),t._m(16),t._m(17),a("ul",[a("li",[a("code",[t._v("query")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Query string")])]),t._m(18),t._m(19),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of components")]),t._m(20),t._m(21),t._m(22),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Component id")])]),t._m(23),t._m(24),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">")])]),t._m(25),t._m(26),t._m(27),a("ul",[a("li",[a("code",[t._v("query")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Query string")])]),t._m(28),t._m(29),t._m(30),t._m(31),a("p",[t._v("Replace a component with another one")]),t._m(32),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(")")]),t._v(" Component or HTML string")])]),t._m(33),t._m(34),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">)")]),t._v(" New added component/s")]),t._m(35),a("p",[t._v("Update attributes of the component")]),t._m(36),a("ul",[a("li",[a("code",[t._v("attrs")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value attributes")]),t._m(37)]),t._m(38),t._m(39),t._m(40),t._m(41),a("p",[t._v("Add attributes to the component")]),t._m(42),a("ul",[a("li",[a("code",[t._v("attrs")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value attributes")])]),t._m(43),t._m(44),t._m(45),t._m(46),a("p",[t._v("Get the style of the component")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(47),a("p",[t._v("Set the style on the component")]),t._m(48),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Key value style object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._m(49)]),t._m(50),t._m(51),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(52),a("p",[t._v("Return all component's attributes")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(53),a("p",[t._v("Add classes")]),t._m(54),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(55),t._m(56),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(57),a("p",[t._v("Set classes (resets current collection)")]),t._m(58),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(59),t._m(60),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(61),a("p",[t._v("Remove classes")]),t._m(62),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(63),t._m(64),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed selectors")]),t._m(65),a("p",[t._v("Returns component's classes as an array of strings")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(66),a("p",[t._v("Add new component children")]),t._m(67),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to add")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options, same as in "),a("code",[t._v("model.add()")]),t._v("(from backbone) (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(68),t._m(69),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of appended components")]),t._m(70),t._m(71),t._m(72),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")?")]),t._v(" Components to set")])]),t._m(73),t._m(74),a("p",[t._v("Returns "),a("strong",[t._v("(Collection | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">)")])]),t._m(75),a("p",[t._v("Get the parent component, if exists")]),t._m(76),t._m(77),t._m(78),t._m(79),a("p",[t._v("Get the trait by id/name")]),t._m(80),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._m(81),t._m(82),t._m(83),t._m(84),a("p",[t._v("Update a trait")]),t._m(85),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")]),a("li",[a("code",[t._v("props")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object with the props to update")])]),t._m(86),t._m(87),t._m(88),t._m(89),a("p",[t._v("Get the trait position index by id/name. Useful in case you want to\nreplace some trait, at runtime, with something else.")]),t._m(90),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._m(91),t._m(92),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)]),t._v(" Index position of the current trait")]),t._m(93),a("p",[t._v("Remove trait/s by id/s.")]),t._m(94),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">)")]),t._v(" The "),a("code",[t._v("id")]),t._v("/"),a("code",[t._v("name")]),t._v(" of the trait (or an array)")])]),t._m(95),t._m(96),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed traits")]),t._m(97),a("p",[t._v("Add trait/s by id/s.")]),t._m(98),a("ul",[a("li",[a("code",[t._v("trait")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(")>)")]),t._v(" Trait to add (or an array of traits)")]),t._m(99)]),t._m(100),t._m(101),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added traits")]),t._m(102),a("p",[t._v("Get the name of the component")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(103),a("p",[t._v("Get the icon string")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(104),a("p",[t._v("Return HTML string of the component")]),t._m(105),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.attributes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")")]),t._v(" You can pass an object of custom attributes to replace\nwith the current one or you can even pass a function to generate attributes dynamically (optional, default "),a("code",[t._v("null")]),t._v(")")])])])]),t._m(106),t._m(107),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(108),a("p",[t._v("Return the component id")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])]),t._m(109),a("p",[t._v("Set new id on the component")]),t._m(110),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)])])]),t._m(111),t._m(112),a("p",[t._v("Get the DOM element of the component.\nThis works only if the component is already rendered")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(113),a("p",[t._v("Get the View of the component.\nThis works only if the component is already rendered")]),t._m(114),t._m(115),a("p",[t._v("Execute callback function on itself and all inner components")]),t._m(116),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function, the model is passed as an argument")])]),t._m(117),t._m(118),t._m(119),t._m(120),a("p",[t._v("Remove the component")]),t._m(121),t._m(122),a("p",[t._v("The list of components is taken from the Components module.\nInitially, the list, was set statically on the Component object but it was\nnot ok, as it was shared between multiple editor instances")]),t._m(123),t._m(124),t._m(125),a("p",[t._v("This method checks, for each parsed component and style object\n(are not Components/CSSRules yet), for duplicated id and fixes them\nThis method is used in Components.js just after the parsing")]),t._m(126),t._m(127)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"component"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#component","aria-hidden":"true"}},[this._v("#")]),this._v(" Component")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tagName"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n removable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("false")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> 'span'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"properties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#properties","aria-hidden":"true"}},[this._v("#")]),this._v(" Properties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("components")]),e("strong",[this._v("Collection<"),e("a",{attrs:{href:"#component"}},[this._v("Component")]),this._v(">?")]),this._v(" Children components. Default: "),e("code",[this._v("null")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"init"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#init","aria-hidden":"true"}},[this._v("#")]),this._v(" init")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"updated"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updated","aria-hidden":"true"}},[this._v("#")]),this._v(" updated")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("value")]),e("strong",[this._v("any")]),this._v(" Property value, if triggered after some property update")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("previous")]),e("strong",[this._v("any")]),this._v(" Property previous value, if triggered after some property update")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removed"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removed","aria-hidden":"true"}},[this._v("#")]),this._v(" removed")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"is"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#is","aria-hidden":"true"}},[this._v("#")]),this._v(" is")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("is")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'image'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"index"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#index","aria-hidden":"true"}},[this._v("#")]),this._v(" index")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"find"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#find","aria-hidden":"true"}},[this._v("#")]),this._v(" find")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find inner components by query string.\n"),e("strong",[this._v("ATTENTION")]),this._v(": this method works only with already rendered component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("find")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'div > .class'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [Component, Component, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"findtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#findtype","aria-hidden":"true"}},[this._v("#")]),this._v(" findType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find all inner components by component id.\nThe advantage of this method over "),e("code",[this._v("find")]),this._v(" is that you can use it\nalso before rendering the component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" allImages "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("findType")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'image'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("allImages"),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// prints the first found component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"closest"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#closest","aria-hidden":"true"}},[this._v("#")]),this._v(" closest")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Find the closest parent component by query string.\n"),e("strong",[this._v("ATTENTION")]),this._v(": this method works only with already rendered component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("closest")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'div.some-class'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[e("a",{attrs:{href:"#component"}},[this._v("Component")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"replacewith"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#replacewith","aria-hidden":"true"}},[this._v("#")]),this._v(" replaceWith")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("replaceWith")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    Some new content
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" setAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v("   (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" id"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'test'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" addAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v("   (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getattributes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getattributes","aria-hidden":"true"}},[this._v("#")]),this._v(" getAttributes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addclass","aria-hidden":"true"}},[this._v("#")]),this._v(" addClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setclass","aria-hidden":"true"}},[this._v("#")]),this._v(" setClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeclass","aria-hidden":"true"}},[this._v("#")]),this._v(" removeClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getclasses"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getclasses","aria-hidden":"true"}},[this._v("#")]),this._v(" getClasses")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"append"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#append","aria-hidden":"true"}},[this._v("#")]),this._v(" append")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("someComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'components'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{attrs:{class:"token comment"}},[t._v("// -> 0")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" videoComponent "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" someComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will add 2 components (`video` and `div`) to your `someComponent`")]),t._v("\nsomeComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'components'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// You can pass components directly")]),t._v("\notherComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("otherComponent2"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\notherComponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("append")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("otherComponent3"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" otherComponent4"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" components")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Set new collection if "),e("code",[this._v("components")]),this._v(" are provided, otherwise the\ncurrent collection is returned")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Set new collection")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("components")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Get current collection")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" collection "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("components")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("collection"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"parent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parent","aria-hidden":"true"}},[this._v("#")]),this._v(" parent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("parent")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[e("a",{attrs:{href:"#component"}},[this._v("Component")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettrait","aria-hidden":"true"}},[this._v("#")]),this._v(" getTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getTrait")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ntraitTitle "),a("span",{attrs:{class:"token operator"}},[t._v("&&")]),t._v(" traitTitle"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'label'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New label'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Trait")]),this._v(" Trait model")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"updatetrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#updatetrait","aria-hidden":"true"}},[this._v("#")]),this._v(" updateTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("updateTrait")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'select'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n options"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Option 1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Option 2'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettraitindex"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettraitindex","aria-hidden":"true"}},[this._v("#")]),this._v(" getTraitIndex")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getTraitIndex")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("traitTitle"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removetrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removetrait","aria-hidden":"true"}},[this._v("#")]),this._v(" removeTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeTrait")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeTrait")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'id'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtrait"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtrait","aria-hidden":"true"}},[this._v("#")]),this._v(" addTrait")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),e("strong",[this._v("Options")]),this._v(" Options for the add (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addTrat")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// Add title trait (`at` option is the position index)")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addTrat")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'checkbox'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'disabled'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addTrat")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token operator"}},[t._v("...")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getname"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getname","aria-hidden":"true"}},[this._v("#")]),this._v(" getName")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"geticon"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#geticon","aria-hidden":"true"}},[this._v("#")]),this._v(" getIcon")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"tohtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#tohtml","aria-hidden":"true"}},[this._v("#")]),this._v(" toHTML")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Simple HTML return")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" tagName"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Custom attributes")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'data-test'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Custom dynamic attributes")]),t._v("\ncomponent"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token function"}},[t._v("attributes")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Custom attribute'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n   "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getid","aria-hidden":"true"}},[this._v("#")]),this._v(" getId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setid","aria-hidden":"true"}},[this._v("#")]),this._v(" setId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getel","aria-hidden":"true"}},[this._v("#")]),this._v(" getEl")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getview"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getview","aria-hidden":"true"}},[this._v("#")]),this._v(" getView")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("ComponentView")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onall","aria-hidden":"true"}},[this._v("#")]),this._v(" onAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-22"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("onAll")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// do something with component")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getlist"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getlist","aria-hidden":"true"}},[this._v("#")]),this._v(" getList")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-23"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-23","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("model")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"checkid"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#checkid","aria-hidden":"true"}},[this._v("#")]),this._v(" checkId")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-24"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-24","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("components")])]),a("li",[a("code",[t._v("styles")]),t._v("   (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("list")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])])}],!1,null,null,null);n.options.__file="component.md";e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/19.7a13abf6.js b/docs/assets/js/19.7a13abf6.js
deleted file mode 100644
index 5ce6f6891..000000000
--- a/docs/assets/js/19.7a13abf6.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{253:function(t,e,a){"use strict";a.r(e);var n=a(1),s=Object(n.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("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 "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Load components from the passed object, if the object is empty will try to fetch them\nautonomously from the selected storage\nThe fetched data will be added to the collection")]),t._m(5),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object of data to load (optional, default "),a("code",[t._v("''")]),t._v(")")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Loaded data")]),t._m(6),a("p",[t._v("Store components on the selected storage")]),t._m(7),a("ul",[a("li",[a("code",[t._v("noStore")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If true, won't store")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data to store")]),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),a("p",[t._v("Returns wrapper's children collection. Once you have the collection you can\nadd other Components(Models) inside. Each component can have several nested\ncomponents inside and you can nest them as more as you wish.")]),t._m(14),t._m(15),t._m(16),t._m(17),a("p",[t._v("Add new components to the wrapper's children. It's the same\nas 'domComponents.getComponents().add(...)'")]),t._m(18),a("ul",[a("li",[a("code",[t._v("component")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">)")]),t._v(" Component/s to add\n"),a("ul",[a("li",[a("code",[t._v("component.tagName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Tag name (optional, default "),a("code",[t._v("'div'")]),t._v(")")]),a("li",[a("code",[t._v("component.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type of the component. Available: ''(default), 'text', 'image' (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("component.removable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If component is removable (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.draggable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If is possible to move the component around the structure (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.droppable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If is possible to drop inside other components (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.badgable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If the badge is visible when the component is selected (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.stylable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If is possible to style component (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.copyable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If is possible to copy&paste the component (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.content")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" String inside component (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("component.style")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Style object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),a("li",[a("code",[t._v("component.attributes")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Attribute object (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])]),t._m(19),t._m(20),a("p",[t._v("Returns "),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component/s added")]),t._m(21),a("p",[t._v("Render and returns wrapper element with all components inside.\nOnce the wrapper is rendered, and it's what happens when you init the editor,\nthe all new components will be added automatically and property changes are all\nupdated immediately")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(22),a("p",[t._v("Remove all components")]),t._m(23),t._m(24),a("p",[t._v("Add new component type.\nRead more about this in "),a("a",{attrs:{href:"https://grapesjs.com/docs/modules/Components.html#define-new-component",target:"_blank",rel:"noopener noreferrer"}},[t._v("Define New Component"),a("OutboundLink")],1)]),t._m(25),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")]),a("li",[a("code",[t._v("methods")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Component methods")])]),t._m(26),t._m(27),a("p",[t._v("Get component type.\nRead more about this in "),a("a",{attrs:{href:"https://grapesjs.com/docs/modules/Components.html#define-new-component",target:"_blank",rel:"noopener noreferrer"}},[t._v("Define New Component"),a("OutboundLink")],1)]),t._m(28),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Component type defintion, eg. "),a("code",[t._v("{ model: ..., view: ... }")])]),t._m(29),a("p",[t._v("Return the array of all types")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"domcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#domcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" DomComponents")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n domComponents"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" domComponents "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getwrapper"}},[t._v("getWrapper")])]),a("li",[a("a",{attrs:{href:"#getcomponents"}},[t._v("getComponents")])]),a("li",[a("a",{attrs:{href:"#addcomponent"}},[t._v("addComponent")])]),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),a("li",[a("a",{attrs:{href:"#render"}},[t._v("render")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapper"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns root component inside the canvas. Something like "),e("code",[this._v("")]),this._v(" inside HTML page\nThe wrapper doesn't differ from the original Component Model")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Change background of the wrapper and set some attribute")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrapper "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getWrapper")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwrapper"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'style'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwrapper"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'attributes'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token string"}},[t._v("'title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello!'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Component")]),this._v(" Root Component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" getComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Let's add some component")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrapperChildren "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapperChildren"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapperChildren"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tagName"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'span'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Hello!'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Now let's add an other one inside first component")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// First we have to get the collection inside. Each")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// component has 'components' property")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1Children "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp1"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'components'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Procede as before. You could also add multiple objects")]),t._v("\ncomp1Children"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" height"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Remove comp2")]),t._v("\nwrapperChildren"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("remove")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp2"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Components")]),this._v(" Collection of components")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addcomponent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addcomponent","aria-hidden":"true"}},[this._v("#")]),this._v(" addComponent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Example of a new component with some extra property")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponent")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tagName"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'div'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  removable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// Can't remove it")]),t._v("\n  draggable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// Can't move it")]),t._v("\n  copyable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// Disable copy/past")]),t._v("\n  content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Content text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// Text inside component")]),t._v("\n  style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'here'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"clear"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#clear","aria-hidden":"true"}},[this._v("#")]),this._v(" clear")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])}],!1,null,null,null);s.options.__file="components.md";e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/19.da3eb438.js b/docs/assets/js/19.da3eb438.js
new file mode 100644
index 000000000..e07ebf022
--- /dev/null
+++ b/docs/assets/js/19.da3eb438.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{213:function(t,e,a){"use strict";a.r(e);var n=a(1),s=Object(n.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("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 "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Load components from the passed object, if the object is empty will try to fetch them\nautonomously from the selected storage\nThe fetched data will be added to the collection")]),t._m(5),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object of data to load (optional, default "),a("code",[t._v("''")]),t._v(")")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Loaded data")]),t._m(6),a("p",[t._v("Store components on the selected storage")]),t._m(7),a("ul",[a("li",[a("code",[t._v("noStore")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If true, won't store")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data to store")]),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),a("p",[t._v("Returns wrapper's children collection. Once you have the collection you can\nadd other Components(Models) inside. Each component can have several nested\ncomponents inside and you can nest them as more as you wish.")]),t._m(14),t._m(15),t._m(16),t._m(17),a("p",[t._v("Add new components to the wrapper's children. It's the same\nas 'domComponents.getComponents().add(...)'")]),t._m(18),a("ul",[a("li",[a("code",[t._v("component")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">)")]),t._v(" Component/s to add\n"),a("ul",[a("li",[a("code",[t._v("component.tagName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Tag name (optional, default "),a("code",[t._v("'div'")]),t._v(")")]),a("li",[a("code",[t._v("component.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type of the component. Available: ''(default), 'text', 'image' (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("component.removable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If component is removable (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.draggable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If is possible to move the component around the structure (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.droppable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If is possible to drop inside other components (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.badgable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If the badge is visible when the component is selected (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.stylable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If is possible to style component (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.copyable")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("boolean"),a("OutboundLink")],1)]),t._v(" If is possible to copy&paste the component (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("component.content")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" String inside component (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("component.style")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Style object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),a("li",[a("code",[t._v("component.attributes")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Attribute object (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])]),t._m(19),t._m(20),a("p",[t._v("Returns "),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component/s added")]),t._m(21),a("p",[t._v("Render and returns wrapper element with all components inside.\nOnce the wrapper is rendered, and it's what happens when you init the editor,\nthe all new components will be added automatically and property changes are all\nupdated immediately")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(22),a("p",[t._v("Remove all components")]),t._m(23),t._m(24),a("p",[t._v("Add new component type.\nRead more about this in "),a("a",{attrs:{href:"https://grapesjs.com/docs/modules/Components.html#define-new-component",target:"_blank",rel:"noopener noreferrer"}},[t._v("Define New Component"),a("OutboundLink")],1)]),t._m(25),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")]),a("li",[a("code",[t._v("methods")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Component methods")])]),t._m(26),t._m(27),a("p",[t._v("Get component type.\nRead more about this in "),a("a",{attrs:{href:"https://grapesjs.com/docs/modules/Components.html#define-new-component",target:"_blank",rel:"noopener noreferrer"}},[t._v("Define New Component"),a("OutboundLink")],1)]),t._m(28),a("ul",[a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Component type defintion, eg. "),a("code",[t._v("{ model: ..., view: ... }")])]),t._m(29),a("p",[t._v("Remove component type")]),t._m(30),a("ul",[t._m(31),a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")])]),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined",target:"_blank",rel:"noopener noreferrer"}},[t._v("undefined"),a("OutboundLink")],1),t._v(")")]),t._v(" Removed component type, undefined otherwise")]),t._m(32),a("p",[t._v("Return the array of all types")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"domcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#domcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" DomComponents")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" domComponents "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getwrapper"}},[t._v("getWrapper")])]),a("li",[a("a",{attrs:{href:"#getcomponents"}},[t._v("getComponents")])]),a("li",[a("a",{attrs:{href:"#addcomponent"}},[t._v("addComponent")])]),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),a("li",[a("a",{attrs:{href:"#render"}},[t._v("render")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapper"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns root component inside the canvas. Something like "),e("code",[this._v("")]),this._v(" inside HTML page\nThe wrapper doesn't differ from the original Component Model")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Change background of the wrapper and set some attribute")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrapper "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getWrapper")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'attributes'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Component")]),this._v(" Root Component")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" getComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Let's add some component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrapperChildren "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tagName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Now let's add an other one inside first component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// First we have to get the collection inside. Each")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// component has 'components' property")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1Children "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Procede as before. You could also add multiple objects")]),t._v("\ncomp1Children"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Remove comp2")]),t._v("\nwrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Components")]),this._v(" Collection of components")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addcomponent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addcomponent","aria-hidden":"true"}},[this._v("#")]),this._v(" addComponent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Example of a new component with some extra property")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tagName"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  removable"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Can't remove it")]),t._v("\n  draggable"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Can't move it")]),t._v("\n  copyable"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Disable copy/past")]),t._v("\n  content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Content text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Text inside component")]),t._v("\n  style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'here'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"clear"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#clear","aria-hidden":"true"}},[this._v("#")]),this._v(" clear")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removetype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removetype","aria-hidden":"true"}},[this._v("#")]),this._v(" removeType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("id")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])}],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/3.651320c9.js b/docs/assets/js/2.3f947d80.js
similarity index 71%
rename from docs/assets/js/3.651320c9.js
rename to docs/assets/js/2.3f947d80.js
index 972409719..969ed2b53 100644
--- a/docs/assets/js/3.651320c9.js
+++ b/docs/assets/js/2.3f947d80.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{174:function(e,t,n){"use strict";n(24);var s={appendTo:"#blocks2",blocks:[{id:"section",label:"Section",attributes:{class:"gjs-block-section"},content:"
    \n        
    This is a simple title
    \n        
    This is just a Lorem text: Lorem ipsum dolor sit amet, consectetur adipiscing elit
    \n      
    "},{id:"text",label:"Text",content:'
    Insert your text here
    '},{id:"image",label:"Image",select:!0,content:{type:"image"},activate:!0}]},a=Object.assign({},s,{blocks:[Object.assign({},s.blocks[0],{label:''}),Object.assign({},s.blocks[1],{label:''}),Object.assign({},s.blocks[2],{label:''})]}),i={sectors:[{name:"Dimension",open:!1,buildProps:["width","min-height","padding"],properties:[{type:"integer",name:"The width",property:"width",units:["px","%"],defaults:"auto",min:0}]},{name:"Extra",open:!1,buildProps:["background-color","box-shadow","custom-prop"],properties:[{id:"custom-prop",name:"Custom Label",property:"font-size",type:"select",defaults:"32px",options:[{value:"12px",name:"Tiny"},{value:"18px",name:"Medium"},{value:"32px",name:"Big"}]}]}]},o={scrollLayers:0},l={},c={},r={devices:[{name:"Desktop",width:""},{name:"Mobile",width:"320px",widthMedia:"480px"}]},g={id:"panel-basic",buttons:[{id:"visibility",active:!0,className:"btn-toggle-borders",label:"B",command:"sw-visibility"},{id:"export",className:"btn-open-export",label:"Exp",command:"export-template",context:"export-template"},{id:"show-json",className:"btn-show-json",label:"JSON",context:"show-json",command:function(e){e.Modal.setTitle("Components JSON").setContent('")).open()}}]},p=Object.assign({},g,{buttons:[Object.assign({},g.buttons[0],{label:''}),Object.assign({},g.buttons[1],{label:''}),Object.assign({},g.buttons[2],{label:''})]}),h={el:"#panel__right4",id:"layers",resizable:{maxDim:350,minDim:200,tc:0,cl:1,cr:0,bc:0,keyWidth:"flex-basis"}},b={id:"show-layers",active:!0,togglable:!1,label:"Layers",command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var n=this.getRowEl(e);this.getLayersEl(n).style.display=""},stop:function(e,t){var n=this.getRowEl(e);this.getLayersEl(n).style.display="none"}}},d={id:"show-style",label:"Styles",togglable:!1,active:!0,command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var n=this.getRowEl(e);this.getStyleEl(n).style.display=""},stop:function(e,t){var n=this.getRowEl(e);this.getStyleEl(n).style.display="none"}}},v={id:"show-traits",label:"Traits",togglable:!1,active:!0,command:{getTraitsEl:function(e){return e.getContainer().closest(".editor-row").querySelector(".traits-container")},run:function(e,t){this.getTraitsEl(e).style.display=""},stop:function(e,t){this.getTraitsEl(e).style.display="none"}}},u={id:"panel-switcher",buttons:[b,d]},m={id:"panel-switcher",buttons:[b,d,v]},w={id:"panel-switcher",buttons:[Object.assign({},b,{label:''}),Object.assign({},d,{label:''}),Object.assign({},v,{label:''})]},y={id:"panel-devices",buttons:[{id:"device-desktop",label:"D",command:{run:function(e){return e.setDevice("Desktop")}},active:!0,togglable:!1},{id:"device-mobile",label:"M",command:{run:function(e){return e.setDevice("Mobile")}},togglable:!1}]},j=Object.assign({},y,{buttons:[Object.assign({},y.buttons[0],{label:''}),Object.assign({},y.buttons[1],{label:''})]}),f={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},x=Object.assign({},f,{container:"#gjs2",blockManager:s}),M=Object.assign({},x,{container:"#gjs3",blockManager:Object.assign({},s,{appendTo:"#blocks3"})}),O=Object.assign({},x,{container:"#gjs4",blockManager:Object.assign({},s,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},x,{container:"#gjs5",blockManager:Object.assign({},s,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container5"})}),k=Object.assign({},x,{container:"#gjs6",blockManager:Object.assign({},s,{appendTo:"#blocks6"}),layerManager:Object.assign({},o,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container6"})}),S=Object.assign({},x,{container:"#gjs7",blockManager:Object.assign({},s,{appendTo:"#blocks7"}),layerManager:Object.assign({},o,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container7"}),deviceManager:r}),H=Object.assign({},x,{container:"#gjs8",blockManager:Object.assign({},a,{appendTo:"#blocks8"}),layerManager:Object.assign({},o,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container8"}),deviceManager:r});e.exports={gjsConfigStart:f,gjsConfigBlocks:x,gjsConfigPanels:M,gjsConfigLayers:O,gjsConfigStyle:T,gjsConfigTraits:k,gjsConfigDevices:S,gjsConfigTheme:H,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:u,panelSwitcherTraits:m,panelSwitcherTraitsIcons:w,panelDevices:y,panelDevicesIcons:j}},179:function(e,t,n){"use strict";n.r(t);var s=n(180),a=n.n(s);for(var i in s)"default"!==i&&function(e){n.d(t,e,function(){return s[e]})}(i);t.default=a.a},180:function(e,t,n){"use strict";e.exports={mounted:function(){var e=n(174);grapesjs.init(e.gjsConfigStart)}}},181:function(e,t,n){},202:function(e,t,n){"use strict";var s=n(181);n.n(s).a},210:function(e,t,n){"use strict";var s=function(){var e=this.$createElement;this._self._c;return this._m(0)},a=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{attrs:{id:"gjs"}},[t("h1",[this._v("Hello World Component!")])])}];n.d(t,"a",function(){return s}),n.d(t,"b",function(){return a})},218:function(e,t,n){"use strict";n.r(t);var s=n(210),a=n(179);for(var i in a)"default"!==i&&function(e){n.d(t,e,function(){return a[e]})}(i);n(202);var o=n(1),l=Object(o.a)(a.default,s.a,s.b,!1,null,null,null);l.options.__file="DemoCanvasOnly.vue",t.default=l.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{149:function(e,t,s){"use strict";s(25);var a={appendTo:"#blocks2",blocks:[{id:"section",label:"Section",attributes:{class:"gjs-block-section"},content:"
    \n        
    This is a simple title
    \n        
    This is just a Lorem text: Lorem ipsum dolor sit amet, consectetur adipiscing elit
    \n      
    "},{id:"text",label:"Text",content:'
    Insert your text here
    '},{id:"image",label:"Image",select:!0,content:{type:"image"},activate:!0}]},n=Object.assign({},a,{blocks:[Object.assign({},a.blocks[0],{label:''}),Object.assign({},a.blocks[1],{label:''}),Object.assign({},a.blocks[2],{label:''})]}),i={sectors:[{name:"Dimension",open:!1,buildProps:["width","min-height","padding"],properties:[{type:"integer",name:"The width",property:"width",units:["px","%"],defaults:"auto",min:0}]},{name:"Extra",open:!1,buildProps:["background-color","box-shadow","custom-prop"],properties:[{id:"custom-prop",name:"Custom Label",property:"font-size",type:"select",defaults:"32px",options:[{value:"12px",name:"Tiny"},{value:"18px",name:"Medium"},{value:"32px",name:"Big"}]}]}]},o={scrollLayers:0},l={},c={},r={devices:[{name:"Desktop",width:""},{name:"Mobile",width:"320px",widthMedia:"480px"}]},g={id:"panel-basic",buttons:[{id:"visibility",active:!0,className:"btn-toggle-borders",label:"B",command:"sw-visibility"},{id:"export",className:"btn-open-export",label:"Exp",command:"export-template",context:"export-template"},{id:"show-json",className:"btn-show-json",label:"JSON",context:"show-json",command:function(e){e.Modal.setTitle("Components JSON").setContent('")).open()}}]},p=Object.assign({},g,{buttons:[Object.assign({},g.buttons[0],{label:''}),Object.assign({},g.buttons[1],{label:''}),Object.assign({},g.buttons[2],{label:''})]}),h={el:"#panel__right4",id:"layers",resizable:{maxDim:350,minDim:200,tc:0,cl:1,cr:0,bc:0,keyWidth:"flex-basis"}},b={id:"show-layers",active:!0,togglable:!1,label:"Layers",command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display="none"}}},d={id:"show-style",label:"Styles",togglable:!1,active:!0,command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display="none"}}},v={id:"show-traits",label:"Traits",togglable:!1,active:!0,command:{getTraitsEl:function(e){return e.getContainer().closest(".editor-row").querySelector(".traits-container")},run:function(e,t){this.getTraitsEl(e).style.display=""},stop:function(e,t){this.getTraitsEl(e).style.display="none"}}},m={id:"panel-switcher",buttons:[b,d]},w={id:"panel-switcher",buttons:[b,d,v]},u={id:"panel-switcher",buttons:[Object.assign({},b,{label:''}),Object.assign({},d,{label:''}),Object.assign({},v,{label:''})]},y={id:"panel-devices",buttons:[{id:"device-desktop",label:"D",command:{run:function(e){return e.setDevice("Desktop")}},active:!0,togglable:!1},{id:"device-mobile",label:"M",command:{run:function(e){return e.setDevice("Mobile")}},togglable:!1}]},j=Object.assign({},y,{buttons:[Object.assign({},y.buttons[0],{label:''}),Object.assign({},y.buttons[1],{label:''})]}),x={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},M=Object.assign({},x,{container:"#gjs2",blockManager:a}),O=Object.assign({},M,{container:"#gjs3",blockManager:Object.assign({},a,{appendTo:"#blocks3"})}),f=Object.assign({},M,{container:"#gjs4",blockManager:Object.assign({},a,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},M,{container:"#gjs5",blockManager:Object.assign({},a,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container5"})}),k=Object.assign({},M,{container:"#gjs6",blockManager:Object.assign({},a,{appendTo:"#blocks6"}),layerManager:Object.assign({},o,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container6"})}),S=Object.assign({},M,{container:"#gjs7",blockManager:Object.assign({},a,{appendTo:"#blocks7"}),layerManager:Object.assign({},o,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container7"}),deviceManager:r}),H=Object.assign({},M,{container:"#gjs8",blockManager:Object.assign({},n,{appendTo:"#blocks8"}),layerManager:Object.assign({},o,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container8"}),deviceManager:r});t.a={gjsConfigStart:x,gjsConfigBlocks:M,gjsConfigPanels:O,gjsConfigLayers:f,gjsConfigStyle:T,gjsConfigTraits:k,gjsConfigDevices:S,gjsConfigTheme:H,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:m,panelSwitcherTraits:w,panelSwitcherTraitsIcons:u,panelDevices:y,panelDevicesIcons:j}},209:function(e,t,s){"use strict";s.r(t);var a=s(149),n={mounted:function(){grapesjs.init(a.a.gjsConfigStart)}},i=s(1),o=Object(i.a)(n,function(){var e=this.$createElement;this._self._c;return this._m(0)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",{attrs:{id:"gjs"}},[t("h1",[this._v("Hello World Component!")])])}],!1,null,null,null);t.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/20.abef129a.js b/docs/assets/js/20.abef129a.js
new file mode 100644
index 000000000..8ea0cd240
--- /dev/null
+++ b/docs/assets/js/20.abef129a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{214:function(t,e,s){"use strict";s.r(e);var a=s(1),r=Object(a.a)({},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"content"},[t._m(0),s("p",[t._v("This module contains and manage CSS rules for the template inside the canvas.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),s("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),s("OutboundLink")],1)]),t._m(1),s("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),s("p",[t._v("Load data from the passed object, if the object is empty will try to fetch them\nautonomously from the storage manager.\nThe fetched data will be added to the collection")]),t._m(5),s("ul",[s("li",[s("code",[t._v("data")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Object of data to load")])]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Loaded rules")]),t._m(6),s("p",[t._v("Store data to the selected storage")]),t._m(7),s("ul",[s("li",[s("code",[t._v("noStore")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),s("OutboundLink")],1)]),t._v(" If true, won't store")])]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Data to store")]),t._m(8),s("p",[t._v("Add new rule to the collection, if not yet exists with the same selectors")]),t._m(9),s("ul",[s("li",[s("code",[t._v("selectors")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),s("OutboundLink")],1),t._v("")]),t._v(" Array of selectors")]),s("li",[s("code",[t._v("state")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Css rule state")]),s("li",[s("code",[t._v("width")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" For which device this style is oriented")]),s("li",[s("code",[t._v("opts")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Other options for the rule (optional, default "),s("code",[t._v("{}")]),t._v(")")])]),t._m(10),t._m(11),t._m(12),t._m(13),s("p",[t._v("Get the rule")]),t._m(14),s("ul",[s("li",[s("code",[t._v("selectors")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),s("OutboundLink")],1),t._v("")]),t._v(" Array of selectors")]),s("li",[s("code",[t._v("state")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Css rule state")]),s("li",[s("code",[t._v("width")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" For which device this style is oriented")]),s("li",[s("code",[t._v("ruleProps")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Other rule props")])]),t._m(15),t._m(16),t._m(17),t._m(18),s("p",[t._v("Get the collection of rules")]),t._m(19),t._m(20),s("p",[t._v("Remove all rules")]),t._m(21),t._m(22),s("p",[t._v("Add/update the CSS rule with a generic selector")]),t._m(23),s("ul",[s("li",[s("code",[t._v("selectors")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass'")]),s("li",[s("code",[t._v("style")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Style properties and values")]),s("li",[s("code",[t._v("opts")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Additional properties (optional, default "),s("code",[t._v("{}")]),t._v(")\n"),s("ul",[s("li",[s("code",[t._v("opts.atRuleType")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" At-rule type, eg. 'media' (optional, default "),s("code",[t._v("''")]),t._v(")")]),s("li",[s("code",[t._v("opts.atRuleParams")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" At-rule parameters, eg. '(min-width: 500px)' (optional, default "),s("code",[t._v("''")]),t._v(")")])])])]),t._m(24),t._m(25),t._m(26),t._m(27),s("p",[t._v("Get the CSS rule by a generic selector")]),t._m(28),s("ul",[s("li",[s("code",[t._v("selectors")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass:hover'")]),t._m(29)]),t._m(30),t._m(31),t._m(32)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"csscomposer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#csscomposer","aria-hidden":"true"}},[this._v("#")]),this._v(" CssComposer")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n cssComposer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cssComposer "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CssComposer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ul",[s("li",[s("a",{attrs:{href:"#load"}},[t._v("load")])]),s("li",[s("a",{attrs:{href:"#store"}},[t._v("store")])]),s("li",[s("a",{attrs:{href:"#add"}},[t._v("add")])]),s("li",[s("a",{attrs:{href:"#get"}},[t._v("get")])]),s("li",[s("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),s("li",[s("a",{attrs:{href:"#clear"}},[t._v("clear")])]),s("li",[s("a",{attrs:{href:"#setrule"}},[t._v("setRule")])]),s("li",[s("a",{attrs:{href:"#getrule"}},[t._v("getRule")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hover'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#fff'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hover'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Update the style")]),t._v("\nrule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  width"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#000'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Model | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"clear"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#clear","aria-hidden":"true"}},[this._v("#")]),this._v(" clear")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setrule"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setRule")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Simple class-based rule")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1.class2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rule"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("toCSS")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: .class1.class2 { color: red }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With state and other mixed selector")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1.class2:hover, div#myid'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: .class1.class2:hover, div#myid { color: red }")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With media")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1:hover'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'media'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: @media (min-width: 500px) { .class1:hover { color: red } }")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("CssRule")]),this._v(" The new/updated rule")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getrule"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getRule")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v("   (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1:hover'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule2 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1:hover, div#myid'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule3 "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'media'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("CssRule")])])}],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/20.d98c3b22.js b/docs/assets/js/20.d98c3b22.js
deleted file mode 100644
index 6f02526d4..000000000
--- a/docs/assets/js/20.d98c3b22.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{249:function(t,s,a){"use strict";a.r(s);var e=a(1),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("This module contains and manage CSS rules for the template inside the canvas.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Load data from the passed object, if the object is empty will try to fetch them\nautonomously from the storage manager.\nThe fetched data will be added to the collection")]),t._m(5),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object of data to load")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Loaded rules")]),t._m(6),a("p",[t._v("Store data to the selected storage")]),t._m(7),a("ul",[a("li",[a("code",[t._v("noStore")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If true, won't store")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data to store")]),t._m(8),a("p",[t._v("Add new rule to the collection, if not yet exists with the same selectors")]),t._m(9),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("")]),t._v(" Array of selectors")]),a("li",[a("code",[t._v("state")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Css rule state")]),a("li",[a("code",[t._v("width")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" For which device this style is oriented")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Other options for the rule (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(10),t._m(11),t._m(12),t._m(13),a("p",[t._v("Get the rule")]),t._m(14),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("")]),t._v(" Array of selectors")]),a("li",[a("code",[t._v("state")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Css rule state")]),a("li",[a("code",[t._v("width")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" For which device this style is oriented")]),a("li",[a("code",[t._v("ruleProps")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Other rule props")])]),t._m(15),t._m(16),t._m(17),t._m(18),a("p",[t._v("Get the collection of rules")]),t._m(19),t._m(20),a("p",[t._v("Remove all rules")]),t._m(21),t._m(22),a("p",[t._v("Add/update the CSS rule with a generic selector")]),t._m(23),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass'")]),a("li",[a("code",[t._v("style")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Style properties and values")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Additional properties (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.atRuleType")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" At-rule type, eg. 'media' (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.atRuleParams")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" At-rule parameters, eg. '(min-width: 500px)' (optional, default "),a("code",[t._v("''")]),t._v(")")])])])]),t._m(24),t._m(25),t._m(26),t._m(27),a("p",[t._v("Get the CSS rule by a generic selector")]),t._m(28),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass:hover'")]),t._m(29)]),t._m(30),t._m(31),t._m(32)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"csscomposer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#csscomposer","aria-hidden":"true"}},[this._v("#")]),this._v(" CssComposer")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cssComposer "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),a("li",[a("a",{attrs:{href:"#setrule"}},[t._v("setRule")])]),a("li",[a("a",{attrs:{href:"#getrule"}},[t._v("getRule")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"load"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrule"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'style'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  width"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#fff'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Model")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Update the style")]),t._v("\nrule"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'style'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  width"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#000'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("(Model | null)")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Collection")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"clear"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#clear","aria-hidden":"true"}},[this._v("#")]),this._v(" clear")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"setrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Simple class-based rule")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.class1.class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rule"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toCSS")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// output: .class1.class2 { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// With state and other mixed selector")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.class1.class2:hover, div#myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// output: .class1.class2:hover, div#myid { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// With media")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.class1:hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'media'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// output: @media (min-width: 500px) { .class1:hover { color: red } }")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")]),this._v(" The new/updated rule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("code",[this._v("opts")]),this._v("   (optional, default "),s("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.myclass1:hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.myclass1:hover, div#myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule3 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.myclass1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'media'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")])])}],!1,null,null,null);n.options.__file="css_composer.md";s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/21.3e3438bd.js b/docs/assets/js/21.3e3438bd.js
deleted file mode 100644
index 987731644..000000000
--- a/docs/assets/js/21.3e3438bd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{247:function(t,a,s){"use strict";s.r(a);var e=s(1),n=Object(e.a)({},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"content"},[t._m(0),s("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),s("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),s("OutboundLink")],1)]),t._m(1),s("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),s("p",[t._v("Add new device to the collection. URLs are supposed to be unique")]),t._m(5),s("ul",[s("li",[s("code",[t._v("name")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Device name")]),s("li",[s("code",[t._v("width")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Width of the device")]),s("li",[s("code",[t._v("opts")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Custom options")])]),t._m(6),t._m(7),t._m(8),t._m(9),s("p",[t._v("Return device by name")]),t._m(10),s("ul",[s("li",[s("code",[t._v("name")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Name of the device")])]),t._m(11),t._m(12),t._m(13),s("p",[t._v("Return all devices")]),t._m(14),t._m(15),t._m(16)])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"devicemanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#devicemanager","aria-hidden":"true"}},[this._v("#")]),this._v(" DeviceManager")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("init")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n deviceManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" deviceManager "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DeviceManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[this._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[this._v("get")])]),a("li",[a("a",{attrs:{href:"#getAll"}},[this._v("getAll")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("deviceManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'Tablet'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'900px'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndeviceManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'Tablet2'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'900px'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n height"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'300px'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n widthMedia"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'810px'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token comment"}},[t._v("// the width that will be used for the CSS media")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Device")]),this._v(" Added device")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" deviceManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token keyword"}},[t._v("get")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'Tablet'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("log")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("stringify")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// {name: 'Tablet', width: '900px'}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" devices "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" deviceManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("getAll")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("log")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("stringify")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("devices"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// [{name: 'Desktop', width: ''}, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")])])}],!1,null,null,null);n.options.__file="device_manager.md";a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/21.45665626.js b/docs/assets/js/21.45665626.js
new file mode 100644
index 000000000..bead432f3
--- /dev/null
+++ b/docs/assets/js/21.45665626.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{215:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Add new device to the collection. URLs are supposed to be unique")]),t._m(5),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Device name")]),a("li",[a("code",[t._v("width")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Width of the device")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options")])]),t._m(6),t._m(7),t._m(8),t._m(9),a("p",[t._v("Return device by name")]),t._m(10),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the device")])]),t._m(11),t._m(12),t._m(13),a("p",[t._v("Return all devices")]),t._m(14),t._m(15),t._m(16)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"devicemanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#devicemanager","aria-hidden":"true"}},[this._v("#")]),this._v(" DeviceManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n deviceManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" deviceManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DeviceManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("a",{attrs:{href:"#add"}},[this._v("add")])]),e("li",[e("a",{attrs:{href:"#get"}},[this._v("get")])]),e("li",[e("a",{attrs:{href:"#getAll"}},[this._v("getAll")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("deviceManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tablet'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'900px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndeviceManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tablet2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'900px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n height"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n widthMedia"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'810px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the width that will be used for the CSS media")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Device")]),this._v(" Added device")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" deviceManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tablet'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'Tablet', width: '900px'}")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" devices "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" deviceManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("devices"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [{name: 'Desktop', width: ''}, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])}],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/22.917f34a1.js b/docs/assets/js/22.917f34a1.js
deleted file mode 100644
index a558343fe..000000000
--- a/docs/assets/js/22.917f34a1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{238:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.\nYou get the Editor instance on init method and you can pass options via its "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),t._m(2),a("p",[t._v("You can make use of available events in this way")]),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),a("p",[t._v("Returns configuration object")]),t._m(29),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v("?")]),t._v(" Property name")])]),t._m(30),t._m(31),a("p",[t._v("Returns HTML built inside canvas")]),t._m(32),t._m(33),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(34),a("p",[t._v("Returns CSS built inside canvas")]),t._m(35),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS string")]),t._m(36),a("p",[t._v("Returns JS of all components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" JS string")]),t._m(37),t._m(38),t._m(39),t._m(40),a("p",[t._v("Return the wrapper and its all components")]),t._m(41),t._m(42),a("p",[t._v("Set components inside editor's canvas. This method overrides actual components")]),t._m(43),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")])]),t._m(44),t._m(45),t._m(46),t._m(47),a("p",[t._v("Add components")]),t._m(48),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.avoidUpdateStyle")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If the HTML string contains styles,\nby default, they will be created and, if already exist, updated. When this option\nis true, styles already created will not be updated. (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._m(49),t._m(50),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(51),a("p",[t._v("Returns style in JSON format object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(52),a("p",[t._v("Set style inside editor's canvas. This method overrides actual style")]),t._m(53),a("ul",[a("li",[a("code",[t._v("style")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" CSS string or style model")])]),t._m(54),t._m(55),t._m(56),t._m(57),a("p",[t._v("Returns the last selected component, if there is one")]),t._m(58),t._m(59),a("p",[t._v("Returns an array of all selected components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(60),a("p",[t._v("Get a stylable entity from the selected component.\nIf you select a component without classes the entity is the Component\nitself and all changes will go inside its 'style' attribute. Otherwise,\nif the selected component has one or more classes, the function will\nreturn the corresponding CSS Rule")]),t._m(61),t._m(62),a("p",[t._v("Select a component")]),t._m(63),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("?")]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.scroll")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Scroll canvas to the selected element")])])])]),t._m(64),t._m(65),t._m(66),t._m(67),a("p",[t._v("Add component to selection")]),t._m(68),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(69),t._m(70),t._m(71),t._m(72),a("p",[t._v("Remove component from selection")]),t._m(73),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(74),t._m(75),t._m(76),t._m(77),a("p",[t._v("Toggle component selection")]),t._m(78),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(79),t._m(80),t._m(81),t._m(82),a("p",[t._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),t._m(83),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the device")])]),t._m(84),t._m(85),t._m(86),t._m(87),a("p",[t._v("Return the actual active device")]),t._m(88),t._m(89),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Device name")]),t._m(90),a("p",[t._v("Execute command")]),t._m(91),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(92),t._m(93),t._m(94),t._m(95),a("p",[t._v("Stop the command if stop method was provided")]),t._m(96),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(97),t._m(98),t._m(99),t._m(100),a("p",[t._v("Store data to the current storage")]),t._m(101),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(102),a("p",[t._v("Load data from the current storage")]),t._m(103),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(104),a("p",[t._v("Returns container element. The one which was indicated as 'container'\non init method")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(105),t._m(106),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(107),a("p",[t._v("Replace the built-in Rich Text Editor with a custom one.")]),t._m(108),a("ul",[a("li",[a("code",[t._v("obj")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom RTE Interface")])]),t._m(109),t._m(110),t._m(111),t._m(112),t._m(113),a("ul",[a("li",[a("code",[t._v("parser")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(" | null)")]),t._v(" Parser function")])]),t._m(114),t._m(115),t._m(116),t._m(117),a("p",[t._v("Trigger event log message")]),t._m(118),a("ul",[t._m(119),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.ns")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Namespace of the log (eg. to use in plugins) (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.level")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Level of the log, "),a("code",[t._v("debug")]),t._v(", "),a("code",[t._v("info")]),t._v(", "),a("code",[t._v("warning")]),t._v(", "),a("code",[t._v("error")]),t._v(" (optional, default "),a("code",[t._v("'debug'")]),t._v(")")])])])]),t._m(120),t._m(121),t._m(122),t._m(123),a("p",[t._v("Attach event")]),t._m(124),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(125),t._m(126),a("p",[t._v("Attach event and detach it after the first run")]),t._m(127),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(128),t._m(129),a("p",[t._v("Detach event")]),t._m(130),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(131),t._m(132),a("p",[t._v("Trigger event")]),t._m(133),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event to trigger")])]),t._m(134),t._m(135),a("p",[t._v("Destroy the editor")]),t._m(136),a("p",[t._v("Render editor")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"editor"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#editor","aria-hidden":"true"}},[this._v("#")]),this._v(" Editor")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"available-events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#available-events","aria-hidden":"true"}},[this._v("#")]),this._v(" Available Events")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'EVENT-NAME'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("some"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" argument"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" Components")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("component:create")]),t._v(" - Component is created (only the model, is not yet mounted in the canvas), called after the init() method")]),a("li",[a("code",[t._v("component:mount")]),t._v(" - Component is mounted to an element and rendered in canvas")]),a("li",[a("code",[t._v("component:add")]),t._v(" - Triggered when a new component is added to the editor, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:remove")]),t._v(" - Triggered when a component is removed, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:clone")]),t._v(" - Triggered when a component is cloned, the new model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update")]),t._v(" - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update:{propertyName}")]),t._v(" - Listen any property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate")]),t._v(" - Triggered when the style of the component is updated, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate:{propertyName}")]),t._v(" - Listen for a specific style property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:selected")]),t._v(" - New component selected, the selected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:deselected")]),t._v(" - Component deselected, the deselected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:toggled")]),t._v(" - Component selection changed, toggled model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:type:add")]),t._v(" - New component type added, the new type is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:type:update")]),t._v(" - Component type updated, the updated type is passed as an argument to the callback")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"blocks"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blocks","aria-hidden":"true"}},[this._v("#")]),this._v(" Blocks")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("block:add")]),t._v(" - New block added")]),a("li",[a("code",[t._v("block:remove")]),t._v(" - Block removed")]),a("li",[a("code",[t._v("block:drag:start")]),t._v(" - Started dragging block, model of the block is passed as an argument")]),a("li",[a("code",[t._v("block:drag")]),t._v(" - Dragging block, the block's model and the drag event are passed as arguments")]),a("li",[a("code",[t._v("block:drag:stop")]),t._v(" - 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")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"assets"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assets","aria-hidden":"true"}},[this._v("#")]),this._v(" Assets")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("asset:add")]),t._v(" - New asset added")]),a("li",[a("code",[t._v("asset:remove")]),t._v(" - Asset removed")]),a("li",[a("code",[t._v("asset:upload:start")]),t._v(" - Before the upload is started")]),a("li",[a("code",[t._v("asset:upload:end")]),t._v(" - After the upload is ended")]),a("li",[a("code",[t._v("asset:upload:error")]),t._v(" - On any error in upload, passes the error as an argument")]),a("li",[a("code",[t._v("asset:upload:response")]),t._v(" - On upload response, passes the result as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps","aria-hidden":"true"}},[this._v("#")]),this._v(" Keymaps")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("keymap:add")]),t._v(" - New keymap added. The new keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:remove")]),t._v(" - Keymap removed. The removed keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:emit")]),t._v(" - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event")]),a("li",[a("code",[t._v("keymap:emit:{keymapId}")]),t._v(" - "),a("code",[t._v("keymapId")]),t._v(" emitted, in arguments you get keymapId, shortcutUsed, Event")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"style-manager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Style Manager")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("styleManager:update:target")]),this._v(" - The target (Component or CSSRule) is changed")]),e("li",[e("code",[this._v("styleManager:change")]),this._v(" - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback")]),e("li",[e("code",[this._v("styleManager:change:{propertyName}")]),this._v(" - As above but for a specific style property")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"storages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#storages","aria-hidden":"true"}},[this._v("#")]),this._v(" Storages")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("storage:start")]),t._v(" - Before the storage request is started")]),a("li",[a("code",[t._v("storage:start:store")]),t._v(" - Before the store request. The object to store is passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:start:load")]),t._v(" - Before the load request. Items to load are passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:load")]),t._v(" - Triggered when something was loaded from the storage, loaded object passed as an argumnet")]),a("li",[a("code",[t._v("storage:store")]),t._v(" - Triggered when something is stored to the storage, stored object passed as an argumnet")]),a("li",[a("code",[t._v("storage:end")]),t._v(" - After the storage request is ended")]),a("li",[a("code",[t._v("storage:end:store")]),t._v(" - After the store request")]),a("li",[a("code",[t._v("storage:end:load")]),t._v(" - After the load request")]),a("li",[a("code",[t._v("storage:error")]),t._v(" - On any error on storage request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:store")]),t._v(" - Error on store request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:load")]),t._v(" - Error on load request, passes the error as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"canvas"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvas:dragenter")]),t._v(" - When something is dragged inside the canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragover")]),t._v(" - When something is dragging on canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:drop")]),t._v(" - Something is dropped in canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the dropped model are passed as arguments")]),a("li",[a("code",[t._v("canvas:dragend")]),t._v(" - When a drag operation is ended, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragdata")]),t._v(" - On any dataTransfer parse, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the "),a("code",[t._v("result")]),t._v(" are passed as arguments.\nBy changing "),a("code",[t._v("result.content")]),t._v(" you're able to customize what is dropped")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"selectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectors","aria-hidden":"true"}},[this._v("#")]),this._v(" Selectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("selector:add")]),this._v(" - Triggers when a new selector/class is created")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"rte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#rte","aria-hidden":"true"}},[this._v("#")]),this._v(" RTE")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("rte:enable")]),this._v(" - RTE enabled. The view, on which RTE is enabled, is passed as an argument")]),e("li",[e("code",[this._v("rte:disable")]),this._v(" - RTE disabled. The view, on which RTE is disabled, is passed as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"modal"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#modal","aria-hidden":"true"}},[this._v("#")]),this._v(" Modal")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("modal:open")]),this._v(" - Modal is opened")]),e("li",[e("code",[this._v("modal:close")]),this._v(" - Modal is closed")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"commands"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#commands","aria-hidden":"true"}},[this._v("#")]),this._v(" Commands")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("run:{commandName}")]),t._v(" - Triggered when some command is called to run (eg. editor.runCommand('preview'))")]),a("li",[a("code",[t._v("stop:{commandName}")]),t._v(" - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))")]),a("li",[a("code",[t._v("run:{commandName}:before")]),t._v(" - Triggered before the command is called")]),a("li",[a("code",[t._v("stop:{commandName}:before")]),t._v(" - Triggered before the command is called to stop")]),a("li",[a("code",[t._v("abort:{commandName}")]),t._v(" - Triggered when the command execution is aborted ("),a("code",[t._v("editor.on(")]),t._v("run:preview:before"),a("code",[t._v(", opts => opts.abort = 1);")]),t._v(")")]),a("li",[a("code",[t._v("run")]),t._v(" - Triggered on run of any command. The id and the result are passed as arguments to the callback")]),a("li",[a("code",[t._v("stop")]),t._v(" - Triggered on stop of any command. The id and the result are passed as arguments to the callback")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"general"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#general","aria-hidden":"true"}},[this._v("#")]),this._v(" General")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvasScroll")]),t._v(" - Canvas is scrolled")]),a("li",[a("code",[t._v("update")]),t._v(" - The structure of the template is updated (its HTML/CSS)")]),a("li",[a("code",[t._v("undo")]),t._v(" - Undo executed")]),a("li",[a("code",[t._v("redo")]),t._v(" - Redo executed")]),a("li",[a("code",[t._v("load")]),t._v(" - Editor is loaded")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" Returns the configuration object or\nthe value of the specified property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gethtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gethtml","aria-hidden":"true"}},[this._v("#")]),this._v(" getHtml")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("opts")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcss","aria-hidden":"true"}},[this._v("#")]),this._v(" getCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getjs"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getjs","aria-hidden":"true"}},[this._v("#")]),this._v(" getJs")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" getComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the complete tree of components. Use "),e("code",[this._v("getWrapper")]),this._v(" to include also the wrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Components")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapper"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Component")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" setComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    New component
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" addComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    New component
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.cls{color: red}'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("//or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselected"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselected","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelected")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedall","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedtostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedtostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"select"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("#")]),this._v(" select")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Select dropped block")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'block:drag:stop'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("select")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectadd"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectadd","aria-hidden":"true"}},[this._v("#")]),this._v(" selectAdd")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectAdd")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectremove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectremove","aria-hidden":"true"}},[this._v("#")]),this._v(" selectRemove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectRemove")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selecttoggle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selecttoggle","aria-hidden":"true"}},[this._v("#")]),this._v(" selectToggle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectToggle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" setDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Tablet'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" getDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// 'Tablet'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"runcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#runcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" runCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("runCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stopcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stopcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" stopCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("stopCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdirtycount"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdirtycount","aria-hidden":"true"}},[this._v("#")]),this._v(" getDirtyCount")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the count of changes made to the content and not yet stored.\nThis count resets at any "),e("code",[this._v("store()")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomrte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomrte","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomRte")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// Function for enabling custom RTE")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// el is the HTMLElement of the double clicked Text Component")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// rte is the same instance you have returned the first time you call")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// enable(). This is useful if need to check if the RTE is already enabled so")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// ion this case you'll need to return the RTE and the end of the function")]),t._v("\n  enable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    rte "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("MyCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n    "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// return the RTE instance")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// Disable the editor, called for example when you unfocus the Text Component")]),t._v("\n disable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("blur")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Called when the Text Component is focused again. If you returned the RTE instance")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// from the enable function, the enable won't be called again instead will call focus,")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// in this case to avoid double binding of the editor")]),t._v("\n focus"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("focus")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomparsercss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomparsercss","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomParserCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Replace the default CSS parser with a custom one.\nThe parser function receives a CSS string as a parameter and expects\nan array of CSSRule objects as a result. If you need to remove the\ncustom parser, pass "),e("code",[this._v("null")]),this._v(" as the argument")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomParserCss")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("css "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" result "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ... parse the CSS string")]),t._v("\n result"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("push")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'.someclass, div .otherclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"log"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#log","aria-hidden":"true"}},[this._v("#")]),this._v(" log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("msg")]),e("strong",[this._v("any")]),this._v(" Message to log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Something done!'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ns"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'from-plugin-x'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" level"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'info'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will trigger following events")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Callbacks of those events will always receive the message and")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// options, as arguments, eg:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// editor.on('log:info', (msg, opts) => console.info(msg, opts))")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"on"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#on","aria-hidden":"true"}},[this._v("#")]),this._v(" on")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"once"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#once","aria-hidden":"true"}},[this._v("#")]),this._v(" once")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"off"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#off","aria-hidden":"true"}},[this._v("#")]),this._v(" off")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"trigger"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#trigger","aria-hidden":"true"}},[this._v("#")]),this._v(" trigger")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-22"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"destroy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#destroy","aria-hidden":"true"}},[this._v("#")]),this._v(" destroy")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])}],!1,null,null,null);n.options.__file="editor.md";e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/22.f3f10b93.js b/docs/assets/js/22.f3f10b93.js
new file mode 100644
index 000000000..433b37184
--- /dev/null
+++ b/docs/assets/js/22.f3f10b93.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{216:function(t,e,a){"use strict";a.r(e);var s=a(1),r=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.\nYou get the Editor instance on init method and you can pass options via its "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),t._m(2),a("p",[t._v("You can make use of available events in this way")]),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),a("p",[t._v("Returns configuration object")]),t._m(29),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v("?")]),t._v(" Property name")])]),t._m(30),t._m(31),a("p",[t._v("Returns HTML built inside canvas")]),t._m(32),t._m(33),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(34),a("p",[t._v("Returns CSS built inside canvas")]),t._m(35),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS string")]),t._m(36),a("p",[t._v("Returns JS of all components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" JS string")]),t._m(37),t._m(38),t._m(39),t._m(40),a("p",[t._v("Return the wrapper and its all components")]),t._m(41),t._m(42),a("p",[t._v("Set components inside editor's canvas. This method overrides actual components")]),t._m(43),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")])]),t._m(44),t._m(45),t._m(46),t._m(47),a("p",[t._v("Add components")]),t._m(48),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.avoidUpdateStyle")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If the HTML string contains styles,\nby default, they will be created and, if already exist, updated. When this option\nis true, styles already created will not be updated. (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._m(49),t._m(50),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("")])]),t._m(51),a("p",[t._v("Returns style in JSON format object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(52),a("p",[t._v("Set style inside editor's canvas. This method overrides actual style")]),t._m(53),a("ul",[a("li",[a("code",[t._v("style")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" CSS string or style model")])]),t._m(54),t._m(55),t._m(56),t._m(57),a("p",[t._v("Returns the last selected component, if there is one")]),t._m(58),t._m(59),a("p",[t._v("Returns an array of all selected components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(60),a("p",[t._v("Get a stylable entity from the selected component.\nIf you select a component without classes the entity is the Component\nitself and all changes will go inside its 'style' attribute. Otherwise,\nif the selected component has one or more classes, the function will\nreturn the corresponding CSS Rule")]),t._m(61),t._m(62),a("p",[t._v("Select a component")]),t._m(63),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("?")]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.scroll")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1),t._v("?")]),t._v(" Scroll canvas to the selected element")])])])]),t._m(64),t._m(65),t._m(66),t._m(67),a("p",[t._v("Add component to selection")]),t._m(68),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(69),t._m(70),t._m(71),t._m(72),a("p",[t._v("Remove component from selection")]),t._m(73),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(74),t._m(75),t._m(76),t._m(77),a("p",[t._v("Toggle component selection")]),t._m(78),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(79),t._m(80),t._m(81),t._m(82),a("p",[t._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),t._m(83),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the device")])]),t._m(84),t._m(85),t._m(86),t._m(87),a("p",[t._v("Return the actual active device")]),t._m(88),t._m(89),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Device name")]),t._m(90),a("p",[t._v("Execute command")]),t._m(91),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(92),t._m(93),t._m(94),t._m(95),a("p",[t._v("Stop the command if stop method was provided")]),t._m(96),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(97),t._m(98),t._m(99),t._m(100),a("p",[t._v("Store data to the current storage")]),t._m(101),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(102),a("p",[t._v("Load data from the current storage")]),t._m(103),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(104),a("p",[t._v("Returns container element. The one which was indicated as 'container'\non init method")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(105),t._m(106),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(107),a("p",[t._v("Replace the built-in Rich Text Editor with a custom one.")]),t._m(108),a("ul",[a("li",[a("code",[t._v("obj")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom RTE Interface")])]),t._m(109),t._m(110),t._m(111),t._m(112),t._m(113),a("ul",[a("li",[a("code",[t._v("parser")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(" | null)")]),t._v(" Parser function")])]),t._m(114),t._m(115),t._m(116),t._m(117),a("p",[t._v("Change the global drag mode of components.\nTo get more about this feature read: "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/issues/1936",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/artf/grapesjs/issues/1936"),a("OutboundLink")],1)]),t._m(118),a("ul",[a("li",[a("code",[t._v("value")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Drag mode, options: 'absolute' | 'translate'")])]),t._m(119),t._m(120),a("p",[t._v("Trigger event log message")]),t._m(121),a("ul",[t._m(122),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.ns")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Namespace of the log (eg. to use in plugins) (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.level")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Level of the log, "),a("code",[t._v("debug")]),t._v(", "),a("code",[t._v("info")]),t._v(", "),a("code",[t._v("warning")]),t._v(", "),a("code",[t._v("error")]),t._v(" (optional, default "),a("code",[t._v("'debug'")]),t._v(")")])])])]),t._m(123),t._m(124),t._m(125),t._m(126),a("p",[t._v("Attach event")]),t._m(127),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(128),t._m(129),a("p",[t._v("Attach event and detach it after the first run")]),t._m(130),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(131),t._m(132),a("p",[t._v("Detach event")]),t._m(133),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(134),t._m(135),a("p",[t._v("Trigger event")]),t._m(136),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event to trigger")])]),t._m(137),t._m(138),a("p",[t._v("Destroy the editor")]),t._m(139),a("p",[t._v("Render editor")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"editor"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#editor","aria-hidden":"true"}},[this._v("#")]),this._v(" Editor")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"available-events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#available-events","aria-hidden":"true"}},[this._v("#")]),this._v(" Available Events")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'EVENT-NAME'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("some"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" argument")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" Components")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("component:create")]),t._v(" - Component is created (only the model, is not yet mounted in the canvas), called after the init() method")]),a("li",[a("code",[t._v("component:mount")]),t._v(" - Component is mounted to an element and rendered in canvas")]),a("li",[a("code",[t._v("component:add")]),t._v(" - Triggered when a new component is added to the editor, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:remove")]),t._v(" - Triggered when a component is removed, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:clone")]),t._v(" - Triggered when a component is cloned, the new model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update")]),t._v(" - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update:{propertyName}")]),t._v(" - Listen any property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate")]),t._v(" - Triggered when the style of the component is updated, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate:{propertyName}")]),t._v(" - Listen for a specific style property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:selected")]),t._v(" - New component selected, the selected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:deselected")]),t._v(" - Component deselected, the deselected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:toggled")]),t._v(" - Component selection changed, toggled model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:type:add")]),t._v(" - New component type added, the new type is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:type:update")]),t._v(" - Component type updated, the updated type is passed as an argument to the callback")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"blocks"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blocks","aria-hidden":"true"}},[this._v("#")]),this._v(" Blocks")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("block:add")]),t._v(" - New block added")]),a("li",[a("code",[t._v("block:remove")]),t._v(" - Block removed")]),a("li",[a("code",[t._v("block:drag:start")]),t._v(" - Started dragging block, model of the block is passed as an argument")]),a("li",[a("code",[t._v("block:drag")]),t._v(" - Dragging block, the block's model and the drag event are passed as arguments")]),a("li",[a("code",[t._v("block:drag:stop")]),t._v(" - 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")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"assets"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assets","aria-hidden":"true"}},[this._v("#")]),this._v(" Assets")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("asset:add")]),t._v(" - New asset added")]),a("li",[a("code",[t._v("asset:remove")]),t._v(" - Asset removed")]),a("li",[a("code",[t._v("asset:upload:start")]),t._v(" - Before the upload is started")]),a("li",[a("code",[t._v("asset:upload:end")]),t._v(" - After the upload is ended")]),a("li",[a("code",[t._v("asset:upload:error")]),t._v(" - On any error in upload, passes the error as an argument")]),a("li",[a("code",[t._v("asset:upload:response")]),t._v(" - On upload response, passes the result as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps","aria-hidden":"true"}},[this._v("#")]),this._v(" Keymaps")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("keymap:add")]),t._v(" - New keymap added. The new keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:remove")]),t._v(" - Keymap removed. The removed keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:emit")]),t._v(" - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event")]),a("li",[a("code",[t._v("keymap:emit:{keymapId}")]),t._v(" - "),a("code",[t._v("keymapId")]),t._v(" emitted, in arguments you get keymapId, shortcutUsed, Event")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"style-manager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Style Manager")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("styleManager:update:target")]),this._v(" - The target (Component or CSSRule) is changed")]),e("li",[e("code",[this._v("styleManager:change")]),this._v(" - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback")]),e("li",[e("code",[this._v("styleManager:change:{propertyName}")]),this._v(" - As above but for a specific style property")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"storages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#storages","aria-hidden":"true"}},[this._v("#")]),this._v(" Storages")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("storage:start")]),t._v(" - Before the storage request is started")]),a("li",[a("code",[t._v("storage:start:store")]),t._v(" - Before the store request. The object to store is passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:start:load")]),t._v(" - Before the load request. Items to load are passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:load")]),t._v(" - Triggered when something was loaded from the storage, loaded object passed as an argumnet")]),a("li",[a("code",[t._v("storage:store")]),t._v(" - Triggered when something is stored to the storage, stored object passed as an argumnet")]),a("li",[a("code",[t._v("storage:end")]),t._v(" - After the storage request is ended")]),a("li",[a("code",[t._v("storage:end:store")]),t._v(" - After the store request")]),a("li",[a("code",[t._v("storage:end:load")]),t._v(" - After the load request")]),a("li",[a("code",[t._v("storage:error")]),t._v(" - On any error on storage request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:store")]),t._v(" - Error on store request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:load")]),t._v(" - Error on load request, passes the error as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"canvas"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvas:dragenter")]),t._v(" - When something is dragged inside the canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragover")]),t._v(" - When something is dragging on canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:drop")]),t._v(" - Something is dropped in canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the dropped model are passed as arguments")]),a("li",[a("code",[t._v("canvas:dragend")]),t._v(" - When a drag operation is ended, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragdata")]),t._v(" - On any dataTransfer parse, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the "),a("code",[t._v("result")]),t._v(" are passed as arguments.\nBy changing "),a("code",[t._v("result.content")]),t._v(" you're able to customize what is dropped")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"selectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectors","aria-hidden":"true"}},[this._v("#")]),this._v(" Selectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("selector:add")]),this._v(" - Triggers when a new selector/class is created")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"rte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#rte","aria-hidden":"true"}},[this._v("#")]),this._v(" RTE")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("rte:enable")]),this._v(" - RTE enabled. The view, on which RTE is enabled, is passed as an argument")]),e("li",[e("code",[this._v("rte:disable")]),this._v(" - RTE disabled. The view, on which RTE is disabled, is passed as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"modal"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#modal","aria-hidden":"true"}},[this._v("#")]),this._v(" Modal")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("modal:open")]),this._v(" - Modal is opened")]),e("li",[e("code",[this._v("modal:close")]),this._v(" - Modal is closed")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"commands"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#commands","aria-hidden":"true"}},[this._v("#")]),this._v(" Commands")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("run:{commandName}")]),t._v(" - Triggered when some command is called to run (eg. editor.runCommand('preview'))")]),a("li",[a("code",[t._v("stop:{commandName}")]),t._v(" - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))")]),a("li",[a("code",[t._v("run:{commandName}:before")]),t._v(" - Triggered before the command is called")]),a("li",[a("code",[t._v("stop:{commandName}:before")]),t._v(" - Triggered before the command is called to stop")]),a("li",[a("code",[t._v("abort:{commandName}")]),t._v(" - Triggered when the command execution is aborted ("),a("code",[t._v("editor.on(")]),t._v("run:preview:before"),a("code",[t._v(", opts => opts.abort = 1);")]),t._v(")")]),a("li",[a("code",[t._v("run")]),t._v(" - Triggered on run of any command. The id and the result are passed as arguments to the callback")]),a("li",[a("code",[t._v("stop")]),t._v(" - Triggered on stop of any command. The id and the result are passed as arguments to the callback")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"general"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#general","aria-hidden":"true"}},[this._v("#")]),this._v(" General")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvasScroll")]),t._v(" - Canvas is scrolled")]),a("li",[a("code",[t._v("update")]),t._v(" - The structure of the template is updated (its HTML/CSS)")]),a("li",[a("code",[t._v("undo")]),t._v(" - Undo executed")]),a("li",[a("code",[t._v("redo")]),t._v(" - Redo executed")]),a("li",[a("code",[t._v("load")]),t._v(" - Editor is loaded")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" Returns the configuration object or\nthe value of the specified property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gethtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gethtml","aria-hidden":"true"}},[this._v("#")]),this._v(" getHtml")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("opts")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcss","aria-hidden":"true"}},[this._v("#")]),this._v(" getCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getjs"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getjs","aria-hidden":"true"}},[this._v("#")]),this._v(" getJs")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" getComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the complete tree of components. Use "),e("code",[this._v("getWrapper")]),this._v(" to include also the wrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Components")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapper"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Component")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" setComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    New component
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" addComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    New component
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  classes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  content"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.cls{color: red}'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//or")]),t._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  selectors"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselected"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselected","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelected")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedall","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedtostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedtostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"select"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("#")]),this._v(" select")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Select dropped block")]),t._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'block:drag:stop'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("model")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("select")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectadd"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectadd","aria-hidden":"true"}},[this._v("#")]),this._v(" selectAdd")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("selectAdd")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectremove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectremove","aria-hidden":"true"}},[this._v("#")]),this._v(" selectRemove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("selectRemove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selecttoggle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selecttoggle","aria-hidden":"true"}},[this._v("#")]),this._v(" selectToggle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("selectToggle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" setDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setDevice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tablet'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" getDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getDevice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'Tablet'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"runcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#runcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" runCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("runCommand")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stopcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stopcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" stopCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stopCommand")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdirtycount"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdirtycount","aria-hidden":"true"}},[this._v("#")]),this._v(" getDirtyCount")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the count of changes made to the content and not yet stored.\nThis count resets at any "),e("code",[this._v("store()")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomrte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomrte","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomRte")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setCustomRte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Function for enabling custom RTE")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// el is the HTMLElement of the double clicked Text Component")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// rte is the same instance you have returned the first time you call")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// enable(). This is useful if need to check if the RTE is already enabled so")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ion this case you'll need to return the RTE and the end of the function")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("enable")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    rte "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyCustomRte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the RTE instance")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Disable the editor, called for example when you unfocus the Text Component")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("disable")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("blur")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Called when the Text Component is focused again. If you returned the RTE instance")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// from the enable function, the enable won't be called again instead will call focus,")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// in this case to avoid double binding of the editor")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("focus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("focus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomparsercss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomparsercss","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomParserCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Replace the default CSS parser with a custom one.\nThe parser function receives a CSS string as a parameter and expects\nan array of CSSRule objects as a result. If you need to remove the\ncustom parser, pass "),e("code",[this._v("null")]),this._v(" as the argument")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setCustomParserCss")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("css")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" result "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ... parse the CSS string")]),t._v("\n result"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   selectors"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.someclass, div .otherclass'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   style"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setdragmode"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setdragmode","aria-hidden":"true"}},[this._v("#")]),this._v(" setDragMode")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"log"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#log","aria-hidden":"true"}},[this._v("#")]),this._v(" log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("msg")]),e("strong",[this._v("any")]),this._v(" Message to log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Something done!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ns"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'from-plugin-x'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" level"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'info'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This will trigger following events")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Callbacks of those events will always receive the message and")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options, as arguments, eg:")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// editor.on('log:info', (msg, opts) => console.info(msg, opts))")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"on"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#on","aria-hidden":"true"}},[this._v("#")]),this._v(" on")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"once"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#once","aria-hidden":"true"}},[this._v("#")]),this._v(" once")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"off"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#off","aria-hidden":"true"}},[this._v("#")]),this._v(" off")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-22"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"trigger"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#trigger","aria-hidden":"true"}},[this._v("#")]),this._v(" trigger")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-23"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-23","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"destroy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#destroy","aria-hidden":"true"}},[this._v("#")]),this._v(" destroy")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])}],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/23.85818d14.js b/docs/assets/js/23.85818d14.js
new file mode 100644
index 000000000..233a54e43
--- /dev/null
+++ b/docs/assets/js/23.85818d14.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{217:function(t,e,a){"use strict";a.r(e);var s=a(1),r=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization")]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get module configurations")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Configuration object")]),t._m(5),a("p",[t._v("Add new keymap")]),t._m(6),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Keymap id")]),a("li",[a("code",[t._v("keys")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Keymap keys, eg. "),a("code",[t._v("ctrl+a")]),t._v(", "),a("code",[t._v("⌘+z, ctrl+z")])]),a("li",[a("code",[t._v("handler")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" Keymap handler, might be a function")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(7),t._m(8),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Added keymap\nor just a command id as a string")]),t._m(9),a("p",[t._v("Get the keymap by id")]),t._m(10),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Keymap id")])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Keymap object")]),t._m(13),a("p",[t._v("Get all keymaps")]),t._m(14),t._m(15),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(16),a("p",[t._v("Remove the keymap by id")]),t._m(17),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Keymap id")])]),t._m(18),t._m(19),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Removed keymap")]),t._m(20),a("p",[t._v("Remove all binded keymaps")]),t._m(21)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps","aria-hidden":"true"}},[this._v("#")]),this._v(" Keymaps")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n keymaps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Object of keymaps")]),t._v("\n   defaults"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'your-namespace:keymap-name'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n       keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+z, ctrl+z'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n       handler"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-command-id'")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" keymaps "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Keymaps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("a",{attrs:{href:"#getconfig"}},[this._v("getConfig")])]),e("li",[e("a",{attrs:{href:"#add"}},[this._v("add")])]),e("li",[e("a",{attrs:{href:"#get"}},[this._v("get")])]),e("li",[e("a",{attrs:{href:"#getAll"}},[this._v("getAll")])]),e("li",[e("a",{attrs:{href:"#remove"}},[this._v("remove")])]),e("li",[e("a",{attrs:{href:"#removeall"}},[this._v("removeAll")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'ns' is just a custom namespace")]),t._v("\nkeymaps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+j, ⌘+u, ctrl+j, alt+u'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'do stuff'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// or")]),t._v("\nkeymaps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+s, ctrl+s'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-gjs-command'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// listen to events")]),t._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'keymap:emit'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" shortcut"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("keymaps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {keys, handler};")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("keymaps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {id1: {}, id2: {}};")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("keymaps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {keys, handler};")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeall","aria-hidden":"true"}},[this._v("#")]),this._v(" removeAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])}],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/23.a1fe2201.js b/docs/assets/js/23.a1fe2201.js
deleted file mode 100644
index 4551fc7fe..000000000
--- a/docs/assets/js/23.a1fe2201.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{242:function(t,a,s){"use strict";s.r(a);var e=s(1),n=Object(e.a)({},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"content"},[t._m(0),s("p",[t._v("You can customize the initial state of the module from the editor initialization")]),t._m(1),s("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),s("p",[t._v("Get module configurations")]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Configuration object")]),t._m(5),s("p",[t._v("Add new keymap")]),t._m(6),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Keymap id")]),s("li",[s("code",[t._v("keys")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Keymap keys, eg. "),s("code",[t._v("ctrl+a")]),t._v(", "),s("code",[t._v("⌘+z, ctrl+z")])]),s("li",[s("code",[t._v("handler")]),s("strong",[t._v("("),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),s("OutboundLink")],1),t._v(" | "),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1),t._v(")")]),t._v(" Keymap handler, might be a function")]),s("li",[s("code",[t._v("opts")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Options (optional, default "),s("code",[t._v("{}")]),t._v(")")])]),t._m(7),t._m(8),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Added keymap\nor just a command id as a string")]),t._m(9),s("p",[t._v("Get the keymap by id")]),t._m(10),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Keymap id")])]),t._m(11),t._m(12),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Keymap object")]),t._m(13),s("p",[t._v("Get all keymaps")]),t._m(14),t._m(15),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)])]),t._m(16),s("p",[t._v("Remove the keymap by id")]),t._m(17),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Keymap id")])]),t._m(18),t._m(19),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Removed keymap")]),t._m(20),s("p",[t._v("Remove all binded keymaps")]),t._m(21)])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"keymaps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#keymaps","aria-hidden":"true"}},[this._v("#")]),this._v(" Keymaps")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("init")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n keymaps"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{attrs:{class:"token comment"}},[t._v("// Object of keymaps")]),t._v("\n   defaults"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),s("span",{attrs:{class:"token string"}},[t._v("'your-namespace:keymap-name'")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n       keys"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'⌘+z, ctrl+z'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n       handler"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'some-command-id'")]),t._v("\n     "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     "),s("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n   "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" keymaps "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Keymaps"),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[this._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#add"}},[this._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[this._v("get")])]),a("li",[a("a",{attrs:{href:"#getAll"}},[this._v("getAll")])]),a("li",[a("a",{attrs:{href:"#remove"}},[this._v("remove")])]),a("li",[a("a",{attrs:{href:"#removeall"}},[this._v("removeAll")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token comment"}},[t._v("// 'ns' is just a custom namespace")]),t._v("\nkeymaps"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'⌘+j, ⌘+u, ctrl+j, alt+u'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" editor "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("log")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'do stuff'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\nkeymaps"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'⌘+s, ctrl+s'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'some-gjs-command'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{attrs:{class:"token comment"}},[t._v("// listen to events")]),t._v("\neditor"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("on")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'keymap:emit'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("id"),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" shortcut"),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("keymaps"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token keyword"}},[t._v("get")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// -> {keys, handler};")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("keymaps"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("getAll")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// -> {id1: {}, id2: {}};")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("keymaps"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("remove")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// -> {keys, handler};")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"removeall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removeall","aria-hidden":"true"}},[this._v("#")]),this._v(" removeAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("this")])])}],!1,null,null,null);n.options.__file="keymaps.md";a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/24.6618a793.js b/docs/assets/js/24.6618a793.js
new file mode 100644
index 000000000..4dc5956a5
--- /dev/null
+++ b/docs/assets/js/24.6618a793.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{218:function(t,e,r){"use strict";r.r(e);var a=r(1),s=Object(a.a)({},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"content"},[t._m(0),r("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),r("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),r("OutboundLink")],1)]),t._m(1),r("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),r("p",[t._v("Open the modal window")]),t._m(5),r("ul",[r("li",[r("code",[t._v("opts")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Options (optional, default "),r("code",[t._v("{}")]),t._v(")\n"),r("ul",[r("li",[r("code",[t._v("opts.title")]),r("strong",[t._v("("),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),r("OutboundLink")],1),t._v(" | "),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),r("OutboundLink")],1),t._v(")?")]),t._v(" Title to set for the modal")]),r("li",[r("code",[t._v("opts.content")]),r("strong",[t._v("("),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),r("OutboundLink")],1),t._v(" | "),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),r("OutboundLink")],1),t._v(")?")]),t._v(" Content to set for the modal")])])])]),t._m(6),t._m(7),r("p",[t._v("Close the modal window")]),t._m(8),t._m(9),r("p",[t._v("Execute callback when the modal will be closed.\nThe callback will be called one only time")]),t._m(10),r("ul",[r("li",[r("code",[t._v("clb")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),r("OutboundLink")],1)])])]),t._m(11),t._m(12),r("p",[t._v("Execute callback when the modal will be opened.\nThe callback will be called one only time")]),t._m(13),r("ul",[r("li",[r("code",[t._v("clb")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),r("OutboundLink")],1)])])]),t._m(14),t._m(15),r("p",[t._v("Checks if the modal window is open")]),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),r("OutboundLink")],1)])]),t._m(16),r("p",[t._v("Set the title to the modal window")]),t._m(17),r("ul",[r("li",[r("code",[t._v("title")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Title")])]),t._m(18),t._m(19),t._m(20),t._m(21),r("p",[t._v("Returns the title of the modal window")]),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)])]),t._m(22),r("p",[t._v("Set the content of the modal window")]),t._m(23),r("ul",[r("li",[r("code",[t._v("content")]),r("strong",[t._v("("),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1),t._v(" | "),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),r("OutboundLink")],1),t._v(")")]),t._v(" Content")])]),t._m(24),t._m(25),t._m(26),t._m(27),r("p",[t._v("Get the content of the modal window")]),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"modal"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#modal","aria-hidden":"true"}},[this._v("#")]),this._v(" Modal")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n modal"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" modal "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Modal"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",[r("li",[r("a",{attrs:{href:"#open"}},[t._v("open")])]),r("li",[r("a",{attrs:{href:"#close"}},[t._v("close")])]),r("li",[r("a",{attrs:{href:"#isopen"}},[t._v("isOpen")])]),r("li",[r("a",{attrs:{href:"#settitle"}},[t._v("setTitle")])]),r("li",[r("a",{attrs:{href:"#gettitle"}},[t._v("getTitle")])]),r("li",[r("a",{attrs:{href:"#setcontent"}},[t._v("setContent")])]),r("li",[r("a",{attrs:{href:"#getcontent"}},[t._v("getContent")])]),r("li",[r("a",{attrs:{href:"#onceclose"}},[t._v("onceClose")])]),r("li",[r("a",{attrs:{href:"#onceopen"}},[t._v("onceOpen")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"open"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#open","aria-hidden":"true"}},[this._v("#")]),this._v(" open")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"close"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#close","aria-hidden":"true"}},[this._v("#")]),this._v(" close")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onceclose"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onceclose","aria-hidden":"true"}},[this._v("#")]),this._v(" onceClose")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onceopen"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onceopen","aria-hidden":"true"}},[this._v("#")]),this._v(" onceOpen")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"isopen"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#isopen","aria-hidden":"true"}},[this._v("#")]),this._v(" isOpen")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"settitle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#settitle","aria-hidden":"true"}},[this._v("#")]),this._v(" setTitle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[t._v("modal"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTitle")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New title'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettitle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettitle","aria-hidden":"true"}},[this._v("#")]),this._v(" getTitle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcontent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcontent","aria-hidden":"true"}},[this._v("#")]),this._v(" setContent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[t._v("modal"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("setContent")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Some HTML content
    '")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontent","aria-hidden":"true"}},[this._v("#")]),this._v(" getContent")])}],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/24.fefe1628.js b/docs/assets/js/24.fefe1628.js
deleted file mode 100644
index e2c838918..000000000
--- a/docs/assets/js/24.fefe1628.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{254:function(t,e,a){"use strict";a.r(e);var r=a(1),s=Object(r.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Open the modal window")]),t._m(5),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.title")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")?")]),t._v(" Title to set for the modal")]),a("li",[a("code",[t._v("opts.content")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")?")]),t._v(" Content to set for the modal")])])])]),t._m(6),t._m(7),a("p",[t._v("Close the modal window")]),t._m(8),t._m(9),a("p",[t._v("Execute callback when the modal will be closed.\nThe callback will be called one only time")]),t._m(10),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)])])]),t._m(11),t._m(12),a("p",[t._v("Execute callback when the modal will be opened.\nThe callback will be called one only time")]),t._m(13),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)])])]),t._m(14),t._m(15),a("p",[t._v("Checks if the modal window is open")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(16),a("p",[t._v("Set the title to the modal window")]),t._m(17),a("ul",[a("li",[a("code",[t._v("title")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Title")])]),t._m(18),t._m(19),t._m(20),t._m(21),a("p",[t._v("Returns the title of the modal window")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)])]),t._m(22),a("p",[t._v("Set the content of the modal window")]),t._m(23),a("ul",[a("li",[a("code",[t._v("content")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")")]),t._v(" Content")])]),t._m(24),t._m(25),t._m(26),t._m(27),a("p",[t._v("Get the content of the modal window")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"modal"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#modal","aria-hidden":"true"}},[this._v("#")]),this._v(" Modal")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n modal"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" modal "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Modal"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#open"}},[t._v("open")])]),a("li",[a("a",{attrs:{href:"#close"}},[t._v("close")])]),a("li",[a("a",{attrs:{href:"#isopen"}},[t._v("isOpen")])]),a("li",[a("a",{attrs:{href:"#settitle"}},[t._v("setTitle")])]),a("li",[a("a",{attrs:{href:"#gettitle"}},[t._v("getTitle")])]),a("li",[a("a",{attrs:{href:"#setcontent"}},[t._v("setContent")])]),a("li",[a("a",{attrs:{href:"#getcontent"}},[t._v("getContent")])]),a("li",[a("a",{attrs:{href:"#onceclose"}},[t._v("onceClose")])]),a("li",[a("a",{attrs:{href:"#onceopen"}},[t._v("onceOpen")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"open"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#open","aria-hidden":"true"}},[this._v("#")]),this._v(" open")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"close"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#close","aria-hidden":"true"}},[this._v("#")]),this._v(" close")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onceclose"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onceclose","aria-hidden":"true"}},[this._v("#")]),this._v(" onceClose")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"onceopen"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onceopen","aria-hidden":"true"}},[this._v("#")]),this._v(" onceOpen")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"isopen"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#isopen","aria-hidden":"true"}},[this._v("#")]),this._v(" isOpen")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"settitle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#settitle","aria-hidden":"true"}},[this._v("#")]),this._v(" setTitle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("modal"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setTitle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'New title'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettitle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettitle","aria-hidden":"true"}},[this._v("#")]),this._v(" getTitle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcontent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcontent","aria-hidden":"true"}},[this._v("#")]),this._v(" setContent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("modal"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setContent")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
    Some HTML content
    '")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontent","aria-hidden":"true"}},[this._v("#")]),this._v(" getContent")])}],!1,null,null,null);s.options.__file="modal_dialog.md";e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/25.32714364.js b/docs/assets/js/25.32714364.js
deleted file mode 100644
index e33dce5d5..000000000
--- a/docs/assets/js/25.32714364.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{252:function(t,a,s){"use strict";s.r(a);var n=s(1),e=Object(n.a)({},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"content"},[t._m(0),s("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),s("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),s("OutboundLink")],1)]),t._m(1),s("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),s("p",[t._v("Returns the collection of panels")]),t._m(5),t._m(6),s("p",[t._v("Returns panels element")]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),s("OutboundLink")],1)])]),t._m(7),s("p",[t._v("Add new panel to the collection")]),t._m(8),s("ul",[s("li",[s("code",[t._v("panel")]),s("strong",[t._v("("),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1),t._v(" | Panel)")]),t._v(" Object with right properties or an instance of Panel")])]),t._m(9),t._m(10),t._m(11),t._m(12),s("p",[t._v("Remove a panel from the collection")]),t._m(13),s("ul",[s("li",[s("code",[t._v("panel")]),s("strong",[t._v("("),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1),t._v(" | Panel | "),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1),t._v(")")]),t._v(" Object with right properties or an instance of Panel or Painel id")])]),t._m(14),t._m(15),t._m(16),t._m(17),s("p",[t._v("Get panel by ID")]),t._m(18),s("ul",[s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Id string")])]),t._m(19),t._m(20),t._m(21),t._m(22),s("p",[t._v("Add button to the panel")]),t._m(23),s("ul",[s("li",[s("code",[t._v("panelId")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),s("li",[s("code",[t._v("button")]),s("strong",[t._v("("),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1),t._v(" | Button)")]),t._v(" Button object or instance of Button")])]),t._m(24),t._m(25),t._m(26),t._m(27),s("p",[t._v("Remove button from the panel")]),t._m(28),s("ul",[s("li",[s("code",[t._v("panelId")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),t._m(29),s("li",[s("code",[t._v("buttonId")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Button's ID")])]),t._m(30),t._m(31),t._m(32),t._m(33),s("p",[t._v("Get button from the panel")]),t._m(34),s("ul",[s("li",[s("code",[t._v("panelId")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),s("li",[s("code",[t._v("id")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Button's ID")])]),t._m(35),t._m(36),t._m(37)])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"panels"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#panels","aria-hidden":"true"}},[this._v("#")]),this._v(" Panels")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("init")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n panels"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" panelManager "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Panels"),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ul",[s("li",[s("a",{attrs:{href:"#addpanel"}},[t._v("addPanel")])]),s("li",[s("a",{attrs:{href:"#addbutton"}},[t._v("addButton")])]),s("li",[s("a",{attrs:{href:"#getbutton"}},[t._v("getButton")])]),s("li",[s("a",{attrs:{href:"#getpanel"}},[t._v("getPanel")])]),s("li",[s("a",{attrs:{href:"#getpanels"}},[t._v("getPanels")])]),s("li",[s("a",{attrs:{href:"#getpanelsel"}},[t._v("getPanelsEl")])]),s("li",[s("a",{attrs:{href:"#removepanel"}},[t._v("removePanel")])]),s("li",[s("a",{attrs:{href:"#removebutton"}},[t._v("removeButton")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getpanels"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getpanels","aria-hidden":"true"}},[this._v("#")]),this._v(" getPanels")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")]),this._v(" Collection of panel")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getpanelsel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getpanelsel","aria-hidden":"true"}},[this._v("#")]),this._v(" getPanelsEl")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"addpanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addpanel","aria-hidden":"true"}},[this._v("#")]),this._v(" addPanel")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" newPanel "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("addPanel")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visible  "),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token boolean"}},[t._v("true")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttons  "),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{attrs:{class:"token operator"}},[t._v("...")]),s("span",{attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Panel")]),this._v(" Added panel. Useful in case passed argument was an Object")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"removepanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removepanel","aria-hidden":"true"}},[this._v("#")]),this._v(" removePanel")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newPanel "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("removePanel")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visible  "),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token boolean"}},[t._v("true")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttons  "),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{attrs:{class:"token operator"}},[t._v("...")]),s("span",{attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newPanel "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("removePanel")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Panel")]),this._v(" Removed panel. Useful in case passed argument was an Object")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getpanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getpanel","aria-hidden":"true"}},[this._v("#")]),this._v(" getPanel")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myPanel "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("getPanel")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("(Panel | null)")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"addbutton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addbutton","aria-hidden":"true"}},[this._v("#")]),this._v(" addButton")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" newButton "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("addButton")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  className"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'someClass'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  command"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'someCommand'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'Some title'")]),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  active"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token boolean"}},[t._v("false")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// It's also possible to pass the command as an object")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// with .run and .stop methods")]),t._v("\n"),s("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\ncommand"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  run"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token keyword"}},[t._v("function")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  stop"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token keyword"}},[t._v("function")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// Or simply like a function which will be evaluated as a single .run command")]),t._v("\n"),s("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\ncommand"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token keyword"}},[t._v("function")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("(Button | null)")]),this._v(" Added button. Useful in case passed button was an Object")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"removebutton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removebutton","aria-hidden":"true"}},[this._v("#")]),this._v(" removeButton")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("li",[a("code",[this._v("button")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removedButton "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("addButton")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  className"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'someClass'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  command"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'someCommand'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'Some title'")]),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  active"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token boolean"}},[t._v("false")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removedButton "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("removeButton")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("(Button | null)")]),this._v(" Removed button.")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getbutton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getbutton","aria-hidden":"true"}},[this._v("#")]),this._v(" getButton")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" button "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("getButton")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'myPanel'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{attrs:{class:"token string"}},[t._v("'myButton'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("(Button | null)")])])}],!1,null,null,null);e.options.__file="panels.md";a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/25.3fa3e444.js b/docs/assets/js/25.3fa3e444.js
new file mode 100644
index 000000000..34e9add4d
--- /dev/null
+++ b/docs/assets/js/25.3fa3e444.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{219:function(t,a,e){"use strict";e.r(a);var s=e(1),n=Object(s.a)({},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"content"},[t._m(0),e("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),e("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),e("OutboundLink")],1)]),t._m(1),e("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),e("p",[t._v("Returns the collection of panels")]),t._m(5),t._m(6),e("p",[t._v("Returns panels element")]),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),e("OutboundLink")],1)])]),t._m(7),e("p",[t._v("Add new panel to the collection")]),t._m(8),e("ul",[e("li",[e("code",[t._v("panel")]),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1),t._v(" | Panel)")]),t._v(" Object with right properties or an instance of Panel")])]),t._m(9),t._m(10),t._m(11),t._m(12),e("p",[t._v("Remove a panel from the collection")]),t._m(13),e("ul",[e("li",[e("code",[t._v("panel")]),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1),t._v(" | Panel | "),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),e("OutboundLink")],1),t._v(")")]),t._v(" Object with right properties or an instance of Panel or Painel id")])]),t._m(14),t._m(15),t._m(16),t._m(17),e("p",[t._v("Get panel by ID")]),t._m(18),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Id string")])]),t._m(19),t._m(20),t._m(21),t._m(22),e("p",[t._v("Add button to the panel")]),t._m(23),e("ul",[e("li",[e("code",[t._v("panelId")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Panel's ID")]),e("li",[e("code",[t._v("button")]),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1),t._v(" | Button)")]),t._v(" Button object or instance of Button")])]),t._m(24),t._m(25),t._m(26),t._m(27),e("p",[t._v("Remove button from the panel")]),t._m(28),e("ul",[e("li",[e("code",[t._v("panelId")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),e("OutboundLink")],1)]),t._v(" Panel's ID")]),t._m(29),e("li",[e("code",[t._v("buttonId")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),e("OutboundLink")],1)]),t._v(" Button's ID")])]),t._m(30),t._m(31),t._m(32),t._m(33),e("p",[t._v("Get button from the panel")]),t._m(34),e("ul",[e("li",[e("code",[t._v("panelId")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Panel's ID")]),e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Button's ID")])]),t._m(35),t._m(36),t._m(37)])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"panels"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#panels","aria-hidden":"true"}},[this._v("#")]),this._v(" Panels")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n panels"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" panelManager "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Panels"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ul",[e("li",[e("a",{attrs:{href:"#addpanel"}},[t._v("addPanel")])]),e("li",[e("a",{attrs:{href:"#addbutton"}},[t._v("addButton")])]),e("li",[e("a",{attrs:{href:"#getbutton"}},[t._v("getButton")])]),e("li",[e("a",{attrs:{href:"#getpanel"}},[t._v("getPanel")])]),e("li",[e("a",{attrs:{href:"#getpanels"}},[t._v("getPanels")])]),e("li",[e("a",{attrs:{href:"#getpanelsel"}},[t._v("getPanelsEl")])]),e("li",[e("a",{attrs:{href:"#removepanel"}},[t._v("removePanel")])]),e("li",[e("a",{attrs:{href:"#removebutton"}},[t._v("removeButton")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getpanels"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getpanels","aria-hidden":"true"}},[this._v("#")]),this._v(" getPanels")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")]),this._v(" Collection of panel")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getpanelsel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getpanelsel","aria-hidden":"true"}},[this._v("#")]),this._v(" getPanelsEl")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"addpanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addpanel","aria-hidden":"true"}},[this._v("#")]),this._v(" addPanel")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" newPanel "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addPanel")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visible  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttons  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Panel")]),this._v(" Added panel. Useful in case passed argument was an Object")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"removepanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removepanel","aria-hidden":"true"}},[this._v("#")]),this._v(" removePanel")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newPanel "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removePanel")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visible  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttons  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newPanel "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removePanel")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Panel")]),this._v(" Removed panel. Useful in case passed argument was an Object")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getpanel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getpanel","aria-hidden":"true"}},[this._v("#")]),this._v(" getPanel")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myPanel "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPanel")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("(Panel | null)")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"addbutton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addbutton","aria-hidden":"true"}},[this._v("#")]),this._v(" addButton")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" newButton "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addButton")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  className"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someClass'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  command"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someCommand'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Some title'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  active"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// It's also possible to pass the command as an object")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// with .run and .stop methods")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\ncommand"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("stop")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Or simply like a function which will be evaluated as a single .run command")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("command")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("(Button | null)")]),this._v(" Added button. Useful in case passed button was an Object")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"removebutton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removebutton","aria-hidden":"true"}},[this._v("#")]),this._v(" removeButton")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("li",[a("code",[this._v("button")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removedButton "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addButton")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  className"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someClass'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  command"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someCommand'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Some title'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  active"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removedButton "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeButton")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("(Button | null)")]),this._v(" Removed button.")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getbutton"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getbutton","aria-hidden":"true"}},[this._v("#")]),this._v(" getButton")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" button "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getButton")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myPanel'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myButton'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("(Button | null)")])])}],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/26.0ba924f8.js b/docs/assets/js/26.0ba924f8.js
deleted file mode 100644
index 949ecd7b8..000000000
--- a/docs/assets/js/26.0ba924f8.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{250:function(t,a,s){"use strict";s.r(a);var n=s(1),e=Object(n.a)({},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"content"},[t._m(0),s("p",[t._v("This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML Editing APIs"),s("OutboundLink")],1),t._v(".\nIt'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")]),s("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),s("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),s("OutboundLink")],1)]),t._m(1),s("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),s("p",[t._v("Add a new action to the built-in RTE toolbar")]),t._m(5),s("ul",[s("li",[s("code",[t._v("name")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Action name")]),s("li",[s("code",[t._v("action")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Action options (optional, default "),s("code",[t._v("{}")]),t._v(")")])]),t._m(6),t._m(7),t._m(8),s("p",[t._v("Get the action by its name")]),t._m(9),s("ul",[s("li",[s("code",[t._v("name")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Action name")])]),t._m(10),t._m(11),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)])]),t._m(12),s("p",[t._v("Get all actions")]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),s("OutboundLink")],1)])]),t._m(13),s("p",[t._v("Remove the action from the toolbar")]),t._m(14),s("ul",[s("li",[s("code",[t._v("name")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)])])]),t._m(15),t._m(16),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Removed action")]),t._m(17),s("p",[t._v("Get the toolbar element")]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),s("OutboundLink")],1)])])])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"richtexteditor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#richtexteditor","aria-hidden":"true"}},[this._v("#")]),this._v(" RichTextEditor")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("init")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rte "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("RichTextEditor"),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[this._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[this._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[this._v("getAll")])]),a("li",[a("a",{attrs:{href:"#remove"}},[this._v("remove")])]),a("li",[a("a",{attrs:{href:"#gettoolbarel"}},[this._v("getToolbarEl")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'B'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'Bold'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  result"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" rte "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("exec")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'link'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" document"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("getElementById")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'t'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'Link'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{attrs:{class:"token comment"}},[t._v("// Example on it's easy to wrap a selected content")]),t._v("\n  result"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" rte "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("insertHTML")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token template-string"}},[s("span",{attrs:{class:"token string"}},[t._v('`')]),s("span",{attrs:{class:"token interpolation"}},[s("span",{attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("selection")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{attrs:{class:"token string"}},[t._v("`")])]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// An example with fontSize")]),t._v("\nrte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("add")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'fontSize'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token template-string"}},[s("span",{attrs:{class:"token string"}},[t._v('``')])]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{attrs:{class:"token comment"}},[t._v("// Bind the 'result' on 'change' listener")]),t._v("\n  event"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'change'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  result"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("exec")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'fontSize'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{attrs:{class:"token comment"}},[t._v("// Callback on any input change (mousedown, keydown, etc..)")]),t._v("\n  update"),s("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doc"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("queryCommandValue")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("action"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),s("span",{attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{attrs:{class:"token string"}},[t._v("'false'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{attrs:{class:"token comment"}},[t._v("// value is a string")]),t._v("\n      action"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" value"),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n   "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" action "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token keyword"}},[t._v("get")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// {name: 'bold', ...}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" action "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("remove")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{attrs:{class:"token comment"}},[t._v("// {name: 'bold', ...}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"gettoolbarel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettoolbarel","aria-hidden":"true"}},[this._v("#")]),this._v(" getToolbarEl")])}],!1,null,null,null);e.options.__file="rich_text_editor.md";a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/26.19837d20.js b/docs/assets/js/26.19837d20.js
new file mode 100644
index 000000000..d643ea347
--- /dev/null
+++ b/docs/assets/js/26.19837d20.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{220:function(t,a,s){"use strict";s.r(a);var e=s(1),n=Object(e.a)({},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"content"},[t._m(0),s("p",[t._v("This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTML Editing APIs"),s("OutboundLink")],1),t._v(".\nIt'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")]),s("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),s("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/rich_text_editor/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),s("OutboundLink")],1)]),t._m(1),s("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),s("p",[t._v("Add a new action to the built-in RTE toolbar")]),t._m(5),s("ul",[s("li",[s("code",[t._v("name")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Action name")]),s("li",[s("code",[t._v("action")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Action options (optional, default "),s("code",[t._v("{}")]),t._v(")")])]),t._m(6),t._m(7),t._m(8),s("p",[t._v("Get the action by its name")]),t._m(9),s("ul",[s("li",[s("code",[t._v("name")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Action name")])]),t._m(10),t._m(11),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)])]),t._m(12),s("p",[t._v("Get all actions")]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),s("OutboundLink")],1)])]),t._m(13),s("p",[t._v("Remove the action from the toolbar")]),t._m(14),s("ul",[s("li",[s("code",[t._v("name")]),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)])])]),t._m(15),t._m(16),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" Removed action")]),t._m(17),s("p",[t._v("Get the toolbar element")]),s("p",[t._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),s("OutboundLink")],1)])])])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"richtexteditor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#richtexteditor","aria-hidden":"true"}},[this._v("#")]),this._v(" RichTextEditor")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rte "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("RichTextEditor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[this._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[this._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[this._v("getAll")])]),a("li",[a("a",{attrs:{href:"#remove"}},[this._v("remove")])]),a("li",[a("a",{attrs:{href:"#gettoolbarel"}},[this._v("getToolbarEl")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'link'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'t'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Link'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Example on it's easy to wrap a selected content")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insertHTML")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('`')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// An example with fontSize")]),t._v("\nrte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fontSize'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token string"}},[t._v('``')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Bind the 'result' on 'change' listener")]),t._v("\n  event"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fontSize'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Callback on any input change (mousedown, keydown, etc..)")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queryCommandValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'false'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// value is a string")]),t._v("\n      action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" action "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'bold', ...}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" action "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'bold', ...}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"gettoolbarel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettoolbarel","aria-hidden":"true"}},[this._v("#")]),this._v(" getToolbarEl")])}],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/27.442eb105.js b/docs/assets/js/27.442eb105.js
deleted file mode 100644
index 3c395d70d..000000000
--- a/docs/assets/js/27.442eb105.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{248:function(t,s,a){"use strict";a.r(s);var e=a(1),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take\na look at this code:")]),t._m(1),t._m(2),a("p",[t._v("In this scenario we get:")]),t._m(3),t._m(4),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(5),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(6),t._m(7),t._m(8),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(9),a("p",[t._v("Add a new selector to collection if it's not already exists. Class type is a default one")]),t._m(10),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Selector/s name")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Selector options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.label")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Label for the selector, if it's not provided the label will be the same as the name (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Type of the selector. At the moment, only 'class' (1) is available (optional, default "),a("code",[t._v("1")]),t._v(")")])])])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(13),a("p",[t._v("Add class selectors")]),t._m(14),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(15),t._m(16),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(17),a("p",[t._v("Get the selector by its name")]),t._m(18),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Selector name")]),a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Selector type")])]),t._m(19),t._m(20),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(21),a("p",[t._v("Get all selectors")]),t._m(22)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"selectormanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#selectormanager","aria-hidden":"true"}},[this._v("#")]),this._v(" SelectorManager")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{attrs:{class:"token selector"}},[this._v("span > #send-btn.btn")]),s("span",{attrs:{class:"token punctuation"}},[this._v("{")]),this._v("\n ...\n"),s("span",{attrs:{class:"token punctuation"}},[this._v("}")]),this._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("send-btn"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("span     -> selector of type "),s("code",[this._v("tag")])]),s("li",[this._v("send-btn -> selector of type "),s("code",[this._v("id")])]),s("li",[this._v("btn      -> selector of type "),s("code",[this._v("class")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("So, for example, being "),s("code",[this._v("btn")]),this._v(" the same class entity it'll be easier to refactor and track things.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectorManager "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("a",{attrs:{href:"#getconfig"}},[this._v("getConfig")])]),s("li",[s("a",{attrs:{href:"#add"}},[this._v("add")])]),s("li",[s("a",{attrs:{href:"#addclass"}},[this._v("addClass")])]),s("li",[s("a",{attrs:{href:"#get"}},[this._v("get")])]),s("li",[s("a",{attrs:{href:"#getAll"}},[this._v("getAll")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Same as")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  label"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Multiple selectors")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'.class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'.class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#id1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"addclass"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#addclass","aria-hidden":"true"}},[this._v("#")]),this._v(" addClass")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or get an array")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Collection")])])}],!1,null,null,null);n.options.__file="selector_manager.md";s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/27.49115d17.js b/docs/assets/js/27.49115d17.js
new file mode 100644
index 000000000..d94073825
--- /dev/null
+++ b/docs/assets/js/27.49115d17.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{221:function(t,e,a){"use strict";a.r(e);var s=a(1),r=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take\na look at this code:")]),t._m(1),t._m(2),a("p",[t._v("In this scenario we get:")]),t._m(3),t._m(4),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(5),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(6),t._m(7),t._m(8),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(9),a("p",[t._v("Add a new selector to collection if it's not already exists. Class type is a default one")]),t._m(10),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Selector/s name")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Selector options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.label")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Label for the selector, if it's not provided the label will be the same as the name (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Type of the selector. At the moment, only 'class' (1) is available (optional, default "),a("code",[t._v("1")]),t._v(")")])])])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(13),a("p",[t._v("Add class selectors")]),t._m(14),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(15),t._m(16),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(17),a("p",[t._v("Get the selector by its name")]),t._m(18),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Selector name")]),a("li",[a("code",[t._v("type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Selector type")])]),t._m(19),t._m(20),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(21),a("p",[t._v("Get all selectors")]),t._m(22),t._m(23),a("p",[t._v("Return escaped selector name")]),t._m(24),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Selector name to escape")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Escaped name")])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectormanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectormanager","aria-hidden":"true"}},[this._v("#")]),this._v(" SelectorManager")])},function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"language-css extra-class"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[this._v("span > #send-btn.btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("{")]),this._v("\n ...\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("}")]),this._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("send-btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[this._v("span     -> selector of type "),e("code",[this._v("tag")])]),e("li",[this._v("send-btn -> selector of type "),e("code",[this._v("id")])]),e("li",[this._v("btn      -> selector of type "),e("code",[this._v("class")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("So, for example, being "),e("code",[this._v("btn")]),this._v(" the same class entity it'll be easier to refactor and track things.")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectorManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("a",{attrs:{href:"#getconfig"}},[this._v("getConfig")])]),e("li",[e("a",{attrs:{href:"#add"}},[this._v("add")])]),e("li",[e("a",{attrs:{href:"#addclass"}},[this._v("addClass")])]),e("li",[e("a",{attrs:{href:"#get"}},[this._v("get")])]),e("li",[e("a",{attrs:{href:"#getAll"}},[this._v("getAll")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Same as")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Multiple selectors")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#id1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addclass","aria-hidden":"true"}},[this._v("#")]),this._v(" addClass")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// or get an array")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Collection")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"escapename"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#escapename","aria-hidden":"true"}},[this._v("#")]),this._v(" escapeName")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])}],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/28.0cb791cd.js b/docs/assets/js/28.0cb791cd.js
new file mode 100644
index 000000000..955cad5fc
--- /dev/null
+++ b/docs/assets/js/28.0cb791cd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{222:function(t,e,a){"use strict";a.r(e);var r=a(1),s=Object(r.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/storage_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(5),a("p",[t._v("Checks if autosave is enabled")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(6),a("p",[t._v("Set autosave value")]),t._m(7),a("ul",[a("li",[a("code",[t._v("v")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])])]),t._m(8),t._m(9),a("p",[t._v("Returns number of steps required before trigger autosave")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(10),a("p",[t._v("Set steps required before trigger autosave")]),t._m(11),a("ul",[a("li",[a("code",[t._v("v")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])])]),t._m(12),t._m(13),a("p",[t._v("Add new storage")]),t._m(14),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Storage ID")]),a("li",[a("code",[t._v("storage")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Storage wrapper\n"),a("ul",[a("li",[a("code",[t._v("storage.load")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Load method")]),a("li",[a("code",[t._v("storage.store")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Store method")])])])]),t._m(15),t._m(16),t._m(17),t._m(18),a("p",[t._v("Returns storage by id")]),t._m(19),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Storage ID")])]),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | null)")])]),t._m(20),a("p",[t._v("Returns all storages")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(21),a("p",[t._v("Returns current storage type")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)])]),t._m(22),a("p",[t._v("Set current storage type")]),t._m(23),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Storage ID")])]),t._m(24),t._m(25),a("p",[t._v("Store key-value resources in the current storage")]),t._m(26),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data in key-value format, eg. {item1: value1, item2: value2}")]),a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(27),t._m(28),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | null)")])]),t._m(29),a("p",[t._v("Load resource from the current storage by keys")]),t._m(30),a("ul",[a("li",[a("code",[t._v("keys")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(">)")]),t._v(" Keys to load")]),a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(31),t._m(32),t._m(33),a("p",[t._v("Get current storage")]),t._m(34)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"storagemanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#storagemanager","aria-hidden":"true"}},[this._v("#")]),this._v(" StorageManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storageManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StorageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#isautosave"}},[t._v("isAutosave")])]),a("li",[a("a",{attrs:{href:"#setautosave"}},[t._v("setAutosave")])]),a("li",[a("a",{attrs:{href:"#getstepsbeforesave"}},[t._v("getStepsBeforeSave")])]),a("li",[a("a",{attrs:{href:"#setstepsbeforesave"}},[t._v("setStepsBeforeSave")])]),a("li",[a("a",{attrs:{href:"#setstepsbeforesave"}},[t._v("setStepsBeforeSave")])]),a("li",[a("a",{attrs:{href:"#getstorages"}},[t._v("getStorages")])]),a("li",[a("a",{attrs:{href:"#getcurrent"}},[t._v("getCurrent")])]),a("li",[a("a",{attrs:{href:"#getcurrentstorage"}},[t._v("getCurrentStorage")])]),a("li",[a("a",{attrs:{href:"#setcurrent"}},[t._v("setCurrent")])]),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"isautosave"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#isautosave","aria-hidden":"true"}},[this._v("#")]),this._v(" isAutosave")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setautosave"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setautosave","aria-hidden":"true"}},[this._v("#")]),this._v(" setAutosave")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstepsbeforesave"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstepsbeforesave","aria-hidden":"true"}},[this._v("#")]),this._v(" getStepsBeforeSave")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstepsbeforesave"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstepsbeforesave","aria-hidden":"true"}},[this._v("#")]),this._v(" setStepsBeforeSave")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'local2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbErr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" res "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" len "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" len"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" localStorage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clb")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// might be called inside some async method")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In case of errors...")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// clbErr('Went something wrong');")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbErr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" key "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      localStorage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clb")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// might be called inside some async method")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstorages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstorages","aria-hidden":"true"}},[this._v("#")]),this._v(" getStorages")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcurrent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcurrent","aria-hidden":"true"}},[this._v("#")]),this._v(" getCurrent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcurrent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcurrent","aria-hidden":"true"}},[this._v("#")]),this._v(" setCurrent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("item1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" item2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// res -> {item1: value1, item2: value2}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nstorageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// res -> {item1: value1}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcurrentstorage"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcurrentstorage","aria-hidden":"true"}},[this._v("#")]),this._v(" getCurrentStorage")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Storage")])])}],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/28.3d0efde8.js b/docs/assets/js/28.3d0efde8.js
deleted file mode 100644
index 82f10edc9..000000000
--- a/docs/assets/js/28.3d0efde8.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{225:function(t,e,a){"use strict";a.r(e);var s=a(1),r=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/storage_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(5),a("p",[t._v("Checks if autosave is enabled")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(6),a("p",[t._v("Set autosave value")]),t._m(7),a("ul",[a("li",[a("code",[t._v("v")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])])]),t._m(8),t._m(9),a("p",[t._v("Returns number of steps required before trigger autosave")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(10),a("p",[t._v("Set steps required before trigger autosave")]),t._m(11),a("ul",[a("li",[a("code",[t._v("v")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])])]),t._m(12),t._m(13),a("p",[t._v("Add new storage")]),t._m(14),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Storage ID")]),a("li",[a("code",[t._v("storage")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Storage wrapper\n"),a("ul",[a("li",[a("code",[t._v("storage.load")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Load method")]),a("li",[a("code",[t._v("storage.store")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Store method")])])])]),t._m(15),t._m(16),t._m(17),t._m(18),a("p",[t._v("Returns storage by id")]),t._m(19),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Storage ID")])]),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | null)")])]),t._m(20),a("p",[t._v("Returns all storages")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(21),a("p",[t._v("Returns current storage type")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)])]),t._m(22),a("p",[t._v("Set current storage type")]),t._m(23),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Storage ID")])]),t._m(24),t._m(25),a("p",[t._v("Store key-value resources in the current storage")]),t._m(26),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data in key-value format, eg. {item1: value1, item2: value2}")]),a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(27),t._m(28),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | null)")])]),t._m(29),a("p",[t._v("Load resource from the current storage by keys")]),t._m(30),a("ul",[a("li",[a("code",[t._v("keys")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(">)")]),t._v(" Keys to load")]),a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(31),t._m(32),t._m(33),a("p",[t._v("Get current storage")]),t._m(34)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"storagemanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#storagemanager","aria-hidden":"true"}},[this._v("#")]),this._v(" StorageManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n storageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storageManager "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StorageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#isautosave"}},[t._v("isAutosave")])]),a("li",[a("a",{attrs:{href:"#setautosave"}},[t._v("setAutosave")])]),a("li",[a("a",{attrs:{href:"#getstepsbeforesave"}},[t._v("getStepsBeforeSave")])]),a("li",[a("a",{attrs:{href:"#setstepsbeforesave"}},[t._v("setStepsBeforeSave")])]),a("li",[a("a",{attrs:{href:"#setstepsbeforesave"}},[t._v("setStepsBeforeSave")])]),a("li",[a("a",{attrs:{href:"#getstorages"}},[t._v("getStorages")])]),a("li",[a("a",{attrs:{href:"#getcurrent"}},[t._v("getCurrent")])]),a("li",[a("a",{attrs:{href:"#getcurrentstorage"}},[t._v("getCurrentStorage")])]),a("li",[a("a",{attrs:{href:"#setcurrent"}},[t._v("setCurrent")])]),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"isautosave"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#isautosave","aria-hidden":"true"}},[this._v("#")]),this._v(" isAutosave")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setautosave"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setautosave","aria-hidden":"true"}},[this._v("#")]),this._v(" setAutosave")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstepsbeforesave"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstepsbeforesave","aria-hidden":"true"}},[this._v("#")]),this._v(" getStepsBeforeSave")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstepsbeforesave"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstepsbeforesave","aria-hidden":"true"}},[this._v("#")]),this._v(" setStepsBeforeSave")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'local2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  load"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keys"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbErr"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" res "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("0")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" len "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" keys"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),a("span",{attrs:{class:"token operator"}},[t._v("<")]),t._v(" len"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{attrs:{class:"token operator"}},[t._v("++")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" v "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" localStorage"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getItem")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keys"),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),a("span",{attrs:{class:"token keyword"}},[t._v("if")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" res"),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("keys"),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" v"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{attrs:{class:"token function"}},[t._v("clb")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// might be called inside some async method")]),t._v("\n    "),a("span",{attrs:{class:"token comment"}},[t._v("// In case of errors...")]),t._v("\n    "),a("span",{attrs:{class:"token comment"}},[t._v("// clbErr('Went something wrong');")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  store"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("data"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbErr"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{attrs:{class:"token keyword"}},[t._v("for")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" key "),a("span",{attrs:{class:"token keyword"}},[t._v("in")]),t._v(" data"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      localStorage"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setItem")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{attrs:{class:"token function"}},[t._v("clb")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// might be called inside some async method")]),t._v("\n  "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstorages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstorages","aria-hidden":"true"}},[this._v("#")]),this._v(" getStorages")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcurrent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcurrent","aria-hidden":"true"}},[this._v("#")]),this._v(" getCurrent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcurrent"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcurrent","aria-hidden":"true"}},[this._v("#")]),this._v(" setCurrent")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("store")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("item1"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value1"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" item2"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" value2"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("load")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'item2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// res -> {item1: value1, item2: value2}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nstorageManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("load")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" res "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// res -> {item1: value1}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcurrentstorage"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcurrentstorage","aria-hidden":"true"}},[this._v("#")]),this._v(" getCurrentStorage")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Storage")])])}],!1,null,null,null);r.options.__file="storage_manager.md";e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/29.60349f33.js b/docs/assets/js/29.60349f33.js
new file mode 100644
index 000000000..833d7c02c
--- /dev/null
+++ b/docs/assets/js/29.60349f33.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{223:function(t,e,r){"use strict";r.r(e);var a=r(1),s=Object(a.a)({},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"content"},[t._m(0),r("p",[t._v("With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),r("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),r("OutboundLink")],1)]),t._m(1),r("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),r("p",[t._v("Get configuration object")]),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)])]),t._m(5),r("p",[t._v("Add new sector to the collection. If the sector with the same id already exists,\nthat one will be returned")]),t._m(6),r("ul",[r("li",[r("code",[t._v("id")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),r("li",[r("code",[t._v("sector")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Object representing sector\n"),r("ul",[r("li",[r("code",[t._v("sector.name")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector's label (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("sector.open")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),r("OutboundLink")],1)]),t._v(" Indicates if the sector should be opened (optional, default "),r("code",[t._v("true")]),t._v(")")]),r("li",[r("code",[t._v("sector.properties")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1),t._v(">")]),t._v(" Array of properties (optional, default "),r("code",[t._v("[]")]),t._v(")")])])]),t._m(7),r("li",[r("code",[t._v("options")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Options (optional, default "),r("code",[t._v("{}")]),t._v(")")])]),t._m(8),t._m(9),t._m(10),t._m(11),r("p",[t._v("Get sector by id")]),t._m(12),r("ul",[r("li",[r("code",[t._v("id")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),t._m(13)]),t._m(14),t._m(15),t._m(16),t._m(17),r("p",[t._v("Remove a sector by id")]),t._m(18),r("ul",[r("li",[r("code",[t._v("id")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(19),t._m(20),t._m(21),t._m(22),r("p",[t._v("Get all sectors")]),t._m(23),t._m(24),r("p",[t._v("Add property to the sector identified by id")]),t._m(25),r("ul",[r("li",[r("code",[t._v("sectorId")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),r("li",[r("code",[t._v("property")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Property object\n"),r("ul",[r("li",[r("code",[t._v("property.name")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Name of the property (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("property.property")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" CSS property, eg. "),r("code",[t._v("min-height")]),t._v(" (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("property.type")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Type of the property: integer | radio | select | color | file | composite | stack (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("property.units")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1),t._v(">")]),t._v(" Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default "),r("code",[t._v("[]")]),t._v(")")]),r("li",[r("code",[t._v("property.unit")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Default selected unit from "),r("code",[t._v("units")]),t._v(". Only for integer type (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("property.min")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),r("OutboundLink")],1)]),t._v(" Min possible value. Only for integer type (optional, default "),r("code",[t._v("null")]),t._v(")")]),r("li",[r("code",[t._v("property.max")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),r("OutboundLink")],1)]),t._v(" Max possible value. Only for integer type (optional, default "),r("code",[t._v("null")]),t._v(")")]),r("li",[r("code",[t._v("property.defaults")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Default value (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("property.info")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Some description (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("property.icon")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Class name. If exists no text will be displayed (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("property.preview")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),r("OutboundLink")],1)]),t._v(" Show layers preview. Only for stack type (optional, default "),r("code",[t._v("false")]),t._v(")")]),r("li",[r("code",[t._v("property.functionName")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Indicates if value need to be wrapped in some function, for istance "),r("code",[t._v("transform: rotate(90deg)")]),t._v(" (optional, default "),r("code",[t._v("''")]),t._v(")")]),r("li",[r("code",[t._v("property.properties")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1),t._v(">")]),t._v(" Nested properties for composite and stack type (optional, default "),r("code",[t._v("[]")]),t._v(")")]),r("li",[r("code",[t._v("property.layers")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1),t._v(">")]),t._v(" Layers for stack properties (optional, default "),r("code",[t._v("[]")]),t._v(")")]),r("li",[r("code",[t._v("property.list")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1),t._v(">")]),t._v(" List of possible options for radio and select types (optional, default "),r("code",[t._v("[]")]),t._v(")")])])])]),t._m(26),t._m(27),t._m(28),t._m(29),r("p",[t._v("Get property by its CSS name and sector id")]),t._m(30),r("ul",[r("li",[r("code",[t._v("sectorId")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),r("li",[r("code",[t._v("name")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._m(31),t._m(32),t._m(33),t._m(34),r("p",[t._v("Remove a property from the sector")]),t._m(35),r("ul",[r("li",[r("code",[t._v("sectorId")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),r("li",[r("code",[t._v("name")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._m(36),t._m(37),t._m(38),t._m(39),r("p",[t._v("Get properties of the sector")]),t._m(40),r("ul",[r("li",[r("code",[t._v("sectorId")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(41),t._m(42),t._m(43),t._m(44),r("p",[t._v("Get what to style inside Style Manager. If you select the component\nwithout classes the entity is the Component itself and all changes will\ngo inside its 'style' property. Otherwise, if the selected component has\none or more classes, the function will return the corresponding CSS Rule")]),t._m(45),t._m(46),t._m(47),t._m(48),r("p",[t._v("Add new property type")]),t._m(49),r("ul",[r("li",[r("code",[t._v("id")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Type ID")]),r("li",[r("code",[t._v("definition")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Definition of the type. Each definition contains\n"),r("code",[t._v("model")]),t._v(" (business logic), "),r("code",[t._v("view")]),t._v(" (presentation logic)\nand "),r("code",[t._v("isType")]),t._v(" function which recognize the type of the\npassed entity")])]),t._m(50),t._m(51),t._m(52),r("p",[t._v("Get type")]),t._m(53),r("ul",[r("li",[r("code",[t._v("id")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Type ID")])]),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Type definition")]),t._m(54),r("p",[t._v("Get all types")]),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1)])]),t._m(55),r("p",[t._v("Create new property from type")]),t._m(56),r("ul",[r("li",[r("code",[t._v("id")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Type ID")]),r("li",[r("code",[t._v("options")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Options (optional, default "),r("code",[t._v("{}")]),t._v(")\n"),r("ul",[r("li",[r("code",[t._v("options.model")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Custom model object (optional, default "),r("code",[t._v("{}")]),t._v(")")]),r("li",[r("code",[t._v("options.view")]),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Custom view object (optional, default "),r("code",[t._v("{}")]),t._v(")")])])])]),t._m(57),t._m(58),t._m(59),t._m(60),r("p",[t._v("Select different target for the Style Manager.\nIt could be a Component, CSSRule, or a string of any CSS selector")]),t._m(61),r("ul",[r("li",[r("code",[t._v("target")]),r("strong",[t._v("(Component | CSSRule | "),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),r("OutboundLink")],1),t._v(")")])]),t._m(62)]),t._m(63)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stylemanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stylemanager","aria-hidden":"true"}},[this._v("#")]),this._v(" StyleManager")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" styleManager "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StyleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",[r("li",[r("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),r("li",[r("a",{attrs:{href:"#addsector"}},[t._v("addSector")])]),r("li",[r("a",{attrs:{href:"#getsector"}},[t._v("getSector")])]),r("li",[r("a",{attrs:{href:"#removesector"}},[t._v("removeSector")])]),r("li",[r("a",{attrs:{href:"#getsectors"}},[t._v("getSectors")])]),r("li",[r("a",{attrs:{href:"#addproperty"}},[t._v("addProperty")])]),r("li",[r("a",{attrs:{href:"#getproperty"}},[t._v("getProperty")])]),r("li",[r("a",{attrs:{href:"#removeproperty"}},[t._v("removeProperty")])]),r("li",[r("a",{attrs:{href:"#getproperties"}},[t._v("getProperties")])]),r("li",[r("a",{attrs:{href:"#getmodeltostyle"}},[t._v("getModelToStyle")])]),r("li",[r("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),r("li",[r("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),r("li",[r("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),r("li",[r("a",{attrs:{href:"#createtype"}},[t._v("createType")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addsector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addsector","aria-hidden":"true"}},[this._v("#")]),this._v(" addSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v("   (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("addSector")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My sector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  open"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  properties"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My property'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With `at: 0` we place the new sector at the beginning of the collection")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sector")]),this._v(" Added Sector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getsector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getsector","aria-hidden":"true"}},[this._v("#")]),this._v(" getSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")]),this._v("   (optional, default "),e("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("getSector")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Sector | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removesector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removesector","aria-hidden":"true"}},[this._v("#")]),this._v(" removeSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removed "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeSector")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sector")]),this._v(" Removed sector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getsectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getsectors","aria-hidden":"true"}},[this._v("#")]),this._v(" getSectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sectors")]),this._v(" Collection of sectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" addProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("addProperty")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Minimum height'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  property"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  type"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  defaults"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  list"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    value"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    name"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     value"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200px'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     name"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Property | null)")]),this._v(" Added Property or "),e("code",[this._v("null")]),this._v(" in case sector doesn't exist")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" getProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProperty")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Property | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" removeProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" property "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeProperty")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Property")]),this._v(" Removed property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getproperties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproperties","aria-hidden":"true"}},[this._v("#")]),this._v(" getProperties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" properties "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProperties")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Properties")]),this._v(" Collection of properties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getmodeltostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getmodeltostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getModelToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("model")]),e("strong",[this._v("Model")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[t._v("styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("addType")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-type'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),r("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("isType")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" value"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-type'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"createtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#createtype","aria-hidden":"true"}},[this._v("#")]),this._v(" createType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" propView "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("createType")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("units"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'rem'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change:value'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsomeContainer"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendChild")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("propView"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("PropertyView")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"settarget"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#settarget","aria-hidden":"true"}},[this._v("#")]),this._v(" setTarget")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Styleable")]),this._v(" A Component or CSSRule")])}],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/29.81c2faa9.js b/docs/assets/js/29.81c2faa9.js
deleted file mode 100644
index 8111b8ce2..000000000
--- a/docs/assets/js/29.81c2faa9.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{258:function(t,e,a){"use strict";a.r(e);var r=a(1),s=Object(r.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(5),a("p",[t._v("Add new sector to the collection. If the sector with the same id already exists,\nthat one will be returned")]),t._m(6),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("sector")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object representing sector\n"),a("ul",[a("li",[a("code",[t._v("sector.name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector's label (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("sector.open")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" Indicates if the sector should be opened (optional, default "),a("code",[t._v("true")]),t._v(")")]),a("li",[a("code",[t._v("sector.properties")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Array of properties (optional, default "),a("code",[t._v("[]")]),t._v(")")])])])]),t._m(7),t._m(8),t._m(9),t._m(10),a("p",[t._v("Get sector by id")]),t._m(11),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(12),t._m(13),t._m(14),t._m(15),a("p",[t._v("Remove a sector by id")]),t._m(16),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(17),t._m(18),t._m(19),t._m(20),a("p",[t._v("Get all sectors")]),t._m(21),t._m(22),a("p",[t._v("Add property to the sector identified by id")]),t._m(23),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("property")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Property object\n"),a("ul",[a("li",[a("code",[t._v("property.name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the property (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.property")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property, eg. "),a("code",[t._v("min-height")]),t._v(" (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type of the property: integer | radio | select | color | file | composite | stack (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.units")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(">")]),t._v(" Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.unit")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Default selected unit from "),a("code",[t._v("units")]),t._v(". Only for integer type (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.min")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)]),t._v(" Min possible value. Only for integer type (optional, default "),a("code",[t._v("null")]),t._v(")")]),a("li",[a("code",[t._v("property.max")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)]),t._v(" Max possible value. Only for integer type (optional, default "),a("code",[t._v("null")]),t._v(")")]),a("li",[a("code",[t._v("property.defaults")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Default value (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.info")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Some description (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.icon")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Class name. If exists no text will be displayed (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.preview")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" Show layers preview. Only for stack type (optional, default "),a("code",[t._v("false")]),t._v(")")]),a("li",[a("code",[t._v("property.functionName")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Indicates if value need to be wrapped in some function, for istance "),a("code",[t._v("transform: rotate(90deg)")]),t._v(" (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("property.properties")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Nested properties for composite and stack type (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.layers")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" Layers for stack properties (optional, default "),a("code",[t._v("[]")]),t._v(")")]),a("li",[a("code",[t._v("property.list")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(">")]),t._v(" List of possible options for radio and select types (optional, default "),a("code",[t._v("[]")]),t._v(")")])])])]),t._m(24),t._m(25),t._m(26),t._m(27),a("p",[t._v("Get property by its CSS name and sector id")]),t._m(28),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._m(29),t._m(30),t._m(31),t._m(32),a("p",[t._v("Remove a property from the sector")]),t._m(33),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")]),a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._m(34),t._m(35),t._m(36),t._m(37),a("p",[t._v("Get properties of the sector")]),t._m(38),a("ul",[a("li",[a("code",[t._v("sectorId")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Sector id")])]),t._m(39),t._m(40),t._m(41),t._m(42),a("p",[t._v("Get what to style inside Style Manager. If you select the component\nwithout classes the entity is the Component itself and all changes will\ngo inside its 'style' property. Otherwise, if the selected component has\none or more classes, the function will return the corresponding CSS Rule")]),t._m(43),t._m(44),t._m(45),t._m(46),a("p",[t._v("Add new property type")]),t._m(47),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")]),a("li",[a("code",[t._v("definition")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Definition of the type. Each definition contains\n"),a("code",[t._v("model")]),t._v(" (business logic), "),a("code",[t._v("view")]),t._v(" (presentation logic)\nand "),a("code",[t._v("isType")]),t._v(" function which recognize the type of the\npassed entity")])]),t._m(48),t._m(49),t._m(50),a("p",[t._v("Get type")]),t._m(51),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Type definition")]),t._m(52),a("p",[t._v("Get all types")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(53),a("p",[t._v("Create new property from type")]),t._m(54),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Type ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("options.model")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom model object (optional, default "),a("code",[t._v("{}")]),t._v(")")]),a("li",[a("code",[t._v("options.view")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom view object (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])]),t._m(55),t._m(56),t._m(57),t._m(58),a("p",[t._v("Select different target for the Style Manager.\nIt could be a Component, CSSRule, or a string of any CSS selector")]),t._m(59),a("ul",[a("li",[a("code",[t._v("target")]),a("strong",[t._v("(Component | CSSRule | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")])]),t._m(60)]),t._m(61)])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stylemanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stylemanager","aria-hidden":"true"}},[this._v("#")]),this._v(" StyleManager")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" styleManager "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StyleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#addsector"}},[t._v("addSector")])]),a("li",[a("a",{attrs:{href:"#getsector"}},[t._v("getSector")])]),a("li",[a("a",{attrs:{href:"#removesector"}},[t._v("removeSector")])]),a("li",[a("a",{attrs:{href:"#getsectors"}},[t._v("getSectors")])]),a("li",[a("a",{attrs:{href:"#addproperty"}},[t._v("addProperty")])]),a("li",[a("a",{attrs:{href:"#getproperty"}},[t._v("getProperty")])]),a("li",[a("a",{attrs:{href:"#removeproperty"}},[t._v("removeProperty")])]),a("li",[a("a",{attrs:{href:"#getproperties"}},[t._v("getProperties")])]),a("li",[a("a",{attrs:{href:"#getmodeltostyle"}},[t._v("getModelToStyle")])]),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),a("li",[a("a",{attrs:{href:"#createtype"}},[t._v("createType")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addsector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addsector","aria-hidden":"true"}},[this._v("#")]),this._v(" addSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'My sector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  open"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token boolean"}},[t._v("true")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  properties"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'My property'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sector")]),this._v(" Added Sector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getsector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getsector","aria-hidden":"true"}},[this._v("#")]),this._v(" getSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Sector | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removesector"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removesector","aria-hidden":"true"}},[this._v("#")]),this._v(" removeSector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removed "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeSector")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sector")]),this._v(" Removed sector")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getsectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getsectors","aria-hidden":"true"}},[this._v("#")]),this._v(" getSectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Sectors")]),this._v(" Collection of sectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" addProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Minimum height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  property"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'select'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  defaults"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  list"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    value"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     value"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'200px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'200'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Property | null)")]),this._v(" Added Property or "),e("code",[this._v("null")]),this._v(" in case sector doesn't exist")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" getProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("(Property | null)")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"removeproperty"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeproperty","aria-hidden":"true"}},[this._v("#")]),this._v(" removeProperty")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" property "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("removeProperty")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Property")]),this._v(" Removed property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getproperties"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getproperties","aria-hidden":"true"}},[this._v("#")]),this._v(" getProperties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" properties "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getProperties")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Properties")]),this._v(" Collection of properties")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getmodeltostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getmodeltostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getModelToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("model")]),e("strong",[this._v("Model")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addType")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'my-type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n isType"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),a("span",{attrs:{class:"token operator"}},[t._v("&&")]),t._v(" value"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type "),a("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'my-type'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"createtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#createtype","aria-hidden":"true"}},[this._v("#")]),this._v(" createType")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" propView "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("createType")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("units"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'rem'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("render")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'change:value'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsomeContainer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("appendChild")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("propView"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("PropertyView")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"settarget"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#settarget","aria-hidden":"true"}},[this._v("#")]),this._v(" setTarget")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("opts")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Styleable")]),this._v(" A Component or CSSRule")])}],!1,null,null,null);s.options.__file="style_manager.md";e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/4.ccc41891.js b/docs/assets/js/3.58555975.js
similarity index 67%
rename from docs/assets/js/4.ccc41891.js
rename to docs/assets/js/3.58555975.js
index 52006b035..ddd908615 100644
--- a/docs/assets/js/4.ccc41891.js
+++ b/docs/assets/js/3.58555975.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{174:function(e,t,s){"use strict";s(24);var n={appendTo:"#blocks2",blocks:[{id:"section",label:"Section",attributes:{class:"gjs-block-section"},content:"
    \n        
    This is a simple title
    \n        
    This is just a Lorem text: Lorem ipsum dolor sit amet, consectetur adipiscing elit
    \n      
    "},{id:"text",label:"Text",content:'
    Insert your text here
    '},{id:"image",label:"Image",select:!0,content:{type:"image"},activate:!0}]},a=Object.assign({},n,{blocks:[Object.assign({},n.blocks[0],{label:''}),Object.assign({},n.blocks[1],{label:''}),Object.assign({},n.blocks[2],{label:''})]}),i={sectors:[{name:"Dimension",open:!1,buildProps:["width","min-height","padding"],properties:[{type:"integer",name:"The width",property:"width",units:["px","%"],defaults:"auto",min:0}]},{name:"Extra",open:!1,buildProps:["background-color","box-shadow","custom-prop"],properties:[{id:"custom-prop",name:"Custom Label",property:"font-size",type:"select",defaults:"32px",options:[{value:"12px",name:"Tiny"},{value:"18px",name:"Medium"},{value:"32px",name:"Big"}]}]}]},o={scrollLayers:0},l={},c={},r={devices:[{name:"Desktop",width:""},{name:"Mobile",width:"320px",widthMedia:"480px"}]},g={id:"panel-basic",buttons:[{id:"visibility",active:!0,className:"btn-toggle-borders",label:"B",command:"sw-visibility"},{id:"export",className:"btn-open-export",label:"Exp",command:"export-template",context:"export-template"},{id:"show-json",className:"btn-show-json",label:"JSON",context:"show-json",command:function(e){e.Modal.setTitle("Components JSON").setContent('")).open()}}]},p=Object.assign({},g,{buttons:[Object.assign({},g.buttons[0],{label:''}),Object.assign({},g.buttons[1],{label:''}),Object.assign({},g.buttons[2],{label:''})]}),d={el:"#panel__right4",id:"layers",resizable:{maxDim:350,minDim:200,tc:0,cl:1,cr:0,bc:0,keyWidth:"flex-basis"}},h={id:"show-layers",active:!0,togglable:!1,label:"Layers",command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display="none"}}},b={id:"show-style",label:"Styles",togglable:!1,active:!0,command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display="none"}}},v={id:"show-traits",label:"Traits",togglable:!1,active:!0,command:{getTraitsEl:function(e){return e.getContainer().closest(".editor-row").querySelector(".traits-container")},run:function(e,t){this.getTraitsEl(e).style.display=""},stop:function(e,t){this.getTraitsEl(e).style.display="none"}}},u={id:"panel-switcher",buttons:[h,b]},m={id:"panel-switcher",buttons:[h,b,v]},w={id:"panel-switcher",buttons:[Object.assign({},h,{label:''}),Object.assign({},b,{label:''}),Object.assign({},v,{label:''})]},y={id:"panel-devices",buttons:[{id:"device-desktop",label:"D",command:{run:function(e){return e.setDevice("Desktop")}},active:!0,togglable:!1},{id:"device-mobile",label:"M",command:{run:function(e){return e.setDevice("Mobile")}},togglable:!1}]},j=Object.assign({},y,{buttons:[Object.assign({},y.buttons[0],{label:''}),Object.assign({},y.buttons[1],{label:''})]}),f={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},x=Object.assign({},f,{container:"#gjs2",blockManager:n}),M=Object.assign({},x,{container:"#gjs3",blockManager:Object.assign({},n,{appendTo:"#blocks3"})}),O=Object.assign({},x,{container:"#gjs4",blockManager:Object.assign({},n,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[d]}}),T=Object.assign({},x,{container:"#gjs5",blockManager:Object.assign({},n,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container5"})}),k=Object.assign({},x,{container:"#gjs6",blockManager:Object.assign({},n,{appendTo:"#blocks6"}),layerManager:Object.assign({},o,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container6"})}),S=Object.assign({},x,{container:"#gjs7",blockManager:Object.assign({},n,{appendTo:"#blocks7"}),layerManager:Object.assign({},o,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container7"}),deviceManager:r}),C=Object.assign({},x,{container:"#gjs8",blockManager:Object.assign({},a,{appendTo:"#blocks8"}),layerManager:Object.assign({},o,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container8"}),deviceManager:r});e.exports={gjsConfigStart:f,gjsConfigBlocks:x,gjsConfigPanels:M,gjsConfigLayers:O,gjsConfigStyle:T,gjsConfigTraits:k,gjsConfigDevices:S,gjsConfigTheme:C,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:d,panelSwitcher:u,panelSwitcherTraits:m,panelSwitcherTraitsIcons:w,panelDevices:y,panelDevicesIcons:j}},182:function(e,t,s){"use strict";s.r(t);var n=s(183),a=s.n(n);for(var i in n)"default"!==i&&function(e){s.d(t,e,function(){return n[e]})}(i);t.default=a.a},183:function(e,t,s){"use strict";s(24),e.exports={mounted:function(){var e=s(174),t=grapesjs.init(e.gjsConfigPanels);t.Panels.addPanel(Object.assign({},e.panelTop,{el:"#panel__top3"})),t.Panels.addPanel(Object.assign({},e.panelBasicActions,{el:"#panel__basic-actions3"})),window.editor3=t}}},184:function(e,t,s){},203:function(e,t,s){"use strict";var n=s(184);s.n(n).a},211:function(e,t,s){"use strict";var n=function(){var e=this.$createElement;this._self._c;return this._m(0)},a=[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"panel__top",attrs:{id:"panel__top3"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions3"}})]),t("div",{staticClass:"gjs",attrs:{id:"gjs3"}},[t("h1",[this._v("Hello World Component!")])]),t("div",{attrs:{id:"blocks3"}})])}];s.d(t,"a",function(){return n}),s.d(t,"b",function(){return a})},219:function(e,t,s){"use strict";s.r(t);var n=s(211),a=s(182);for(var i in a)"default"!==i&&function(e){s.d(t,e,function(){return a[e]})}(i);s(203);var o=s(1),l=Object(o.a)(a.default,n.a,n.b,!1,null,null,null);l.options.__file="DemoCustomPanels.vue",t.default=l.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{149:function(e,t,s){"use strict";s(25);var a={appendTo:"#blocks2",blocks:[{id:"section",label:"Section",attributes:{class:"gjs-block-section"},content:"
    \n        
    This is a simple title
    \n        
    This is just a Lorem text: Lorem ipsum dolor sit amet, consectetur adipiscing elit
    \n      
    "},{id:"text",label:"Text",content:'
    Insert your text here
    '},{id:"image",label:"Image",select:!0,content:{type:"image"},activate:!0}]},n=Object.assign({},a,{blocks:[Object.assign({},a.blocks[0],{label:''}),Object.assign({},a.blocks[1],{label:''}),Object.assign({},a.blocks[2],{label:''})]}),i={sectors:[{name:"Dimension",open:!1,buildProps:["width","min-height","padding"],properties:[{type:"integer",name:"The width",property:"width",units:["px","%"],defaults:"auto",min:0}]},{name:"Extra",open:!1,buildProps:["background-color","box-shadow","custom-prop"],properties:[{id:"custom-prop",name:"Custom Label",property:"font-size",type:"select",defaults:"32px",options:[{value:"12px",name:"Tiny"},{value:"18px",name:"Medium"},{value:"32px",name:"Big"}]}]}]},o={scrollLayers:0},l={},c={},r={devices:[{name:"Desktop",width:""},{name:"Mobile",width:"320px",widthMedia:"480px"}]},g={id:"panel-basic",buttons:[{id:"visibility",active:!0,className:"btn-toggle-borders",label:"B",command:"sw-visibility"},{id:"export",className:"btn-open-export",label:"Exp",command:"export-template",context:"export-template"},{id:"show-json",className:"btn-show-json",label:"JSON",context:"show-json",command:function(e){e.Modal.setTitle("Components JSON").setContent('")).open()}}]},p=Object.assign({},g,{buttons:[Object.assign({},g.buttons[0],{label:''}),Object.assign({},g.buttons[1],{label:''}),Object.assign({},g.buttons[2],{label:''})]}),h={el:"#panel__right4",id:"layers",resizable:{maxDim:350,minDim:200,tc:0,cl:1,cr:0,bc:0,keyWidth:"flex-basis"}},b={id:"show-layers",active:!0,togglable:!1,label:"Layers",command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display="none"}}},d={id:"show-style",label:"Styles",togglable:!1,active:!0,command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display="none"}}},v={id:"show-traits",label:"Traits",togglable:!1,active:!0,command:{getTraitsEl:function(e){return e.getContainer().closest(".editor-row").querySelector(".traits-container")},run:function(e,t){this.getTraitsEl(e).style.display=""},stop:function(e,t){this.getTraitsEl(e).style.display="none"}}},m={id:"panel-switcher",buttons:[b,d]},w={id:"panel-switcher",buttons:[b,d,v]},u={id:"panel-switcher",buttons:[Object.assign({},b,{label:''}),Object.assign({},d,{label:''}),Object.assign({},v,{label:''})]},y={id:"panel-devices",buttons:[{id:"device-desktop",label:"D",command:{run:function(e){return e.setDevice("Desktop")}},active:!0,togglable:!1},{id:"device-mobile",label:"M",command:{run:function(e){return e.setDevice("Mobile")}},togglable:!1}]},j=Object.assign({},y,{buttons:[Object.assign({},y.buttons[0],{label:''}),Object.assign({},y.buttons[1],{label:''})]}),x={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},M=Object.assign({},x,{container:"#gjs2",blockManager:a}),O=Object.assign({},M,{container:"#gjs3",blockManager:Object.assign({},a,{appendTo:"#blocks3"})}),f=Object.assign({},M,{container:"#gjs4",blockManager:Object.assign({},a,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},M,{container:"#gjs5",blockManager:Object.assign({},a,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container5"})}),k=Object.assign({},M,{container:"#gjs6",blockManager:Object.assign({},a,{appendTo:"#blocks6"}),layerManager:Object.assign({},o,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container6"})}),S=Object.assign({},M,{container:"#gjs7",blockManager:Object.assign({},a,{appendTo:"#blocks7"}),layerManager:Object.assign({},o,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container7"}),deviceManager:r}),H=Object.assign({},M,{container:"#gjs8",blockManager:Object.assign({},n,{appendTo:"#blocks8"}),layerManager:Object.assign({},o,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},l,{appendTo:"#styles-container8"}),deviceManager:r});t.a={gjsConfigStart:x,gjsConfigBlocks:M,gjsConfigPanels:O,gjsConfigLayers:f,gjsConfigStyle:T,gjsConfigTraits:k,gjsConfigDevices:S,gjsConfigTheme:H,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:m,panelSwitcherTraits:w,panelSwitcherTraitsIcons:u,panelDevices:y,panelDevicesIcons:j}},206:function(e,t,s){"use strict";s.r(t);s(25);var a=s(149),n={mounted:function(){var e=grapesjs.init(a.a.gjsConfigPanels);e.Panels.addPanel(Object.assign({},a.a.panelTop,{el:"#panel__top3"})),e.Panels.addPanel(Object.assign({},a.a.panelBasicActions,{el:"#panel__basic-actions3"})),window.editor3=e}},i=s(1),o=Object(i.a)(n,function(){var e=this.$createElement;this._self._c;return this._m(0)},[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"panel__top",attrs:{id:"panel__top3"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions3"}})]),t("div",{staticClass:"gjs",attrs:{id:"gjs3"}},[t("h1",[this._v("Hello World Component!")])]),t("div",{attrs:{id:"blocks3"}})])}],!1,null,null,null);t.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/30.331e996f.js b/docs/assets/js/30.331e996f.js
deleted file mode 100644
index 23b667d16..000000000
--- a/docs/assets/js/30.331e996f.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{244:function(t,s,a){"use strict";a.r(s);var e=a(1),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("This module allows to manage the stack of changes applied in canvas.\nOnce the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(1),t._m(2),t._m(3),a("p",[t._v("Get module configurations")]),t._m(4),t._m(5),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Configuration object")]),t._m(6),a("p",[t._v("Add an entity (Model/Collection) to track\nNote: New Components and CSSRules will be added automatically")]),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),a("p",[t._v("Remove and stop tracking the entity (Model/Collection)")]),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),a("p",[t._v("Remove all entities")]),t._m(19),t._m(20),t._m(21),t._m(22),a("p",[t._v("Start/resume tracking changes")]),t._m(23),t._m(24),t._m(25),t._m(26),a("p",[t._v("Stop tracking changes")]),t._m(27),t._m(28),t._m(29),t._m(30),a("p",[t._v("Undo last change")]),t._m(31),t._m(32),t._m(33),t._m(34),a("p",[t._v("Undo all changes")]),t._m(35),t._m(36),t._m(37),t._m(38),a("p",[t._v("Redo last change")]),t._m(39),t._m(40),t._m(41),t._m(42),a("p",[t._v("Redo all changes")]),t._m(43),t._m(44),t._m(45),t._m(46),a("p",[t._v("Checks if exists an available undo")]),t._m(47),t._m(48),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(49),a("p",[t._v("Checks if exists an available redo")]),t._m(50),t._m(51),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(52),a("p",[t._v("Get stack of changes")]),t._m(53),t._m(54),t._m(55),t._m(56),a("p",[t._v("Clear the stack")]),t._m(57),t._m(58),t._m(59)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"undomanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undomanager","aria-hidden":"true"}},[this._v("#")]),this._v(" UndoManager")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" um "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UndoManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#remove"}},[t._v("remove")])]),a("li",[a("a",{attrs:{href:"#removeall"}},[t._v("removeAll")])]),a("li",[a("a",{attrs:{href:"#start"}},[t._v("start")])]),a("li",[a("a",{attrs:{href:"#stop"}},[t._v("stop")])]),a("li",[a("a",{attrs:{href:"#undo"}},[t._v("undo")])]),a("li",[a("a",{attrs:{href:"#undoall"}},[t._v("undoAll")])]),a("li",[a("a",{attrs:{href:"#redo"}},[t._v("redo")])]),a("li",[a("a",{attrs:{href:"#redoall"}},[t._v("redoAll")])]),a("li",[a("a",{attrs:{href:"#hasundo"}},[t._v("hasUndo")])]),a("li",[a("a",{attrs:{href:"#hasredo"}},[t._v("hasRedo")])]),a("li",[a("a",{attrs:{href:"#getstack"}},[t._v("getStack")])]),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" config "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" um"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getConfig")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// { ... }")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("code",[this._v("entity")]),s("strong",[this._v("(Model | Collection)")]),this._v(" Entity to track")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("um"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("someModelOrCollection"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"remove"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("code",[this._v("entity")]),s("strong",[this._v("(Model | Collection)")]),this._v(" Entity to remove")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("um"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("remove")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("someModelOrCollection"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"removeall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removeall","aria-hidden":"true"}},[this._v("#")]),this._v(" removeAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("removeAll")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"start"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#start","aria-hidden":"true"}},[this._v("#")]),this._v(" start")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("start")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"stop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stop","aria-hidden":"true"}},[this._v("#")]),this._v(" stop")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("stop")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"undo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undo","aria-hidden":"true"}},[this._v("#")]),this._v(" undo")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("undo")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"undoall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undoall","aria-hidden":"true"}},[this._v("#")]),this._v(" undoAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("undoAll")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"redo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#redo","aria-hidden":"true"}},[this._v("#")]),this._v(" redo")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-9"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("redo")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"redoall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#redoall","aria-hidden":"true"}},[this._v("#")]),this._v(" redoAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-10"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("redoAll")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"hasundo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hasundo","aria-hidden":"true"}},[this._v("#")]),this._v(" hasUndo")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-11"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("hasUndo")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"hasredo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hasredo","aria-hidden":"true"}},[this._v("#")]),this._v(" hasRedo")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-12"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("hasRedo")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getstack"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getstack","aria-hidden":"true"}},[this._v("#")]),this._v(" getStack")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-13"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stack "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" um"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getStack")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nstack"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("each")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("item "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Collection")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"clear"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#clear","aria-hidden":"true"}},[this._v("#")]),this._v(" clear")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-14"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{attrs:{class:"token function"}},[this._v("clear")]),s("span",{attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])}],!1,null,null,null);n.options.__file="undo_manager.md";s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/30.4f7b4a19.js b/docs/assets/js/30.4f7b4a19.js
new file mode 100644
index 000000000..057579567
--- /dev/null
+++ b/docs/assets/js/30.4f7b4a19.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{246:function(t,s,a){"use strict";a.r(s);var e=a(1),r=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("This module allows to manage the stack of changes applied in canvas.\nOnce the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(1),t._m(2),t._m(3),a("p",[t._v("Get module configurations")]),t._m(4),t._m(5),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Configuration object")]),t._m(6),a("p",[t._v("Add an entity (Model/Collection) to track\nNote: New Components and CSSRules will be added automatically")]),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),a("p",[t._v("Remove and stop tracking the entity (Model/Collection)")]),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),a("p",[t._v("Remove all entities")]),t._m(19),t._m(20),t._m(21),t._m(22),a("p",[t._v("Start/resume tracking changes")]),t._m(23),t._m(24),t._m(25),t._m(26),a("p",[t._v("Stop tracking changes")]),t._m(27),t._m(28),t._m(29),t._m(30),a("p",[t._v("Undo last change")]),t._m(31),t._m(32),t._m(33),t._m(34),a("p",[t._v("Undo all changes")]),t._m(35),t._m(36),t._m(37),t._m(38),a("p",[t._v("Redo last change")]),t._m(39),t._m(40),t._m(41),t._m(42),a("p",[t._v("Redo all changes")]),t._m(43),t._m(44),t._m(45),t._m(46),a("p",[t._v("Checks if exists an available undo")]),t._m(47),t._m(48),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(49),a("p",[t._v("Checks if exists an available redo")]),t._m(50),t._m(51),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)])]),t._m(52),a("p",[t._v("Get stack of changes")]),t._m(53),t._m(54),t._m(55),t._m(56),a("p",[t._v("Clear the stack")]),t._m(57),t._m(58),t._m(59)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"undomanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undomanager","aria-hidden":"true"}},[this._v("#")]),this._v(" UndoManager")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" um "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UndoManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#remove"}},[t._v("remove")])]),a("li",[a("a",{attrs:{href:"#removeall"}},[t._v("removeAll")])]),a("li",[a("a",{attrs:{href:"#start"}},[t._v("start")])]),a("li",[a("a",{attrs:{href:"#stop"}},[t._v("stop")])]),a("li",[a("a",{attrs:{href:"#undo"}},[t._v("undo")])]),a("li",[a("a",{attrs:{href:"#undoall"}},[t._v("undoAll")])]),a("li",[a("a",{attrs:{href:"#redo"}},[t._v("redo")])]),a("li",[a("a",{attrs:{href:"#redoall"}},[t._v("redoAll")])]),a("li",[a("a",{attrs:{href:"#hasundo"}},[t._v("hasUndo")])]),a("li",[a("a",{attrs:{href:"#hasredo"}},[t._v("hasRedo")])]),a("li",[a("a",{attrs:{href:"#getstack"}},[t._v("getStack")])]),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" config "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" um"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getConfig")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// { ... }")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("code",[this._v("entity")]),s("strong",[this._v("(Model | Collection)")]),this._v(" Entity to track")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("um"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("someModelOrCollection"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"remove"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("code",[this._v("entity")]),s("strong",[this._v("(Model | Collection)")]),this._v(" Entity to remove")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("um"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("someModelOrCollection"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"removeall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removeall","aria-hidden":"true"}},[this._v("#")]),this._v(" removeAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("removeAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"start"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#start","aria-hidden":"true"}},[this._v("#")]),this._v(" start")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("start")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"stop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stop","aria-hidden":"true"}},[this._v("#")]),this._v(" stop")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"undo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undo","aria-hidden":"true"}},[this._v("#")]),this._v(" undo")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("undo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"undoall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undoall","aria-hidden":"true"}},[this._v("#")]),this._v(" undoAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("undoAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"redo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#redo","aria-hidden":"true"}},[this._v("#")]),this._v(" redo")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-9"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("redo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"redoall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#redoall","aria-hidden":"true"}},[this._v("#")]),this._v(" redoAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-10"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("redoAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"hasundo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hasundo","aria-hidden":"true"}},[this._v("#")]),this._v(" hasUndo")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-11"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("hasUndo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"hasredo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hasredo","aria-hidden":"true"}},[this._v("#")]),this._v(" hasRedo")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-12"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("hasRedo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getstack"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getstack","aria-hidden":"true"}},[this._v("#")]),this._v(" getStack")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-13"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stack "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" um"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getStack")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nstack"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("each")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("item")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Collection")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"clear"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#clear","aria-hidden":"true"}},[this._v("#")]),this._v(" clear")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-14"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[this._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[this._v("clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[this._v(";")]),this._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])}],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/31.3f9b4c2f.js b/docs/assets/js/31.3f9b4c2f.js
new file mode 100644
index 000000000..de1c45a9c
--- /dev/null
+++ b/docs/assets/js/31.3f9b4c2f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{225:function(t,s,e){"use strict";e.r(s);var n=e(1),a=Object(n.a)({},function(){var t=this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"content"},[s("h1",{attrs:{id:"faq"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#faq","aria-hidden":"true"}},[this._v("#")]),this._v(" FAQ")]),s("p",[this._v("Coming soon")])])}],!1,null,null,null);s.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/31.456da170.js b/docs/assets/js/31.456da170.js
deleted file mode 100644
index 92699dd4d..000000000
--- a/docs/assets/js/31.456da170.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{243:function(t,s,e){"use strict";e.r(s);var n=e(1),i=Object(n.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"content"},[s("h1",{attrs:{id:"faq"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#faq","aria-hidden":"true"}},[this._v("#")]),this._v(" FAQ")]),s("p",[this._v("Coming soon")])])}],!1,null,null,null);i.options.__file="faq.md";s.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/32.2f2eecfd.js b/docs/assets/js/32.2f2eecfd.js
deleted file mode 100644
index b970c14a0..000000000
--- a/docs/assets/js/32.2f2eecfd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{241:function(t,s,a){"use strict";a.r(s);var n=a(1),o=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),t._m(1),t._m(2),a("p",[t._v("Before you start using GrapesJS, you'll have to import it. Let's import the latest version")]),t._m(3),a("p",[t._v("or if you're in a Node environment")]),t._m(4),t._m(5),a("p",[t._v("The first step is to define the interface of our editor. For this purpose we gonna start with basic HTML layouts. Finding a common structure for the UI of any project is not an easy task. That's why GrapesJS prefers to keep this process as simple as possible. We provide a few helpers, but let the user define the interface. This guarantees maximum flexibility.\nThe main part of the GrapesJS editor is the canvas, this is where you create the structure of your templates and you can't miss it. Let's try to initiate the editor with the canvas and no panels.")]),t._m(6),t._m(7),t._m(8),a("Demo",[a("DemoCanvasOnly")],1),a("p",[t._v("With just the canvas you're already able to move, copy and delete components from the structure. For now, we see the example template taken from the container. Next let's look at how to create and drag custom blocks into our canvas.")]),t._m(9),a("p",[t._v("The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start by creating another container and append a few basic blocks inside of it. Later we can use this technique to build more complex structures.")]),t._m(10),t._m(11),t._m(12),a("Demo",[a("DemoBasicBlocks")],1),a("p",[t._v("As you can see we add our blocks via the initial configuration. Obviously there might be a case in which you would like to add them dynamically, in this case you have to use the "),a("router-link",{attrs:{to:"./api/block_manager.html"}},[t._v("Block Manager API")])],1),t._m(13),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("If you want to learn more about blocks we suggest to read its dedicated article: "),a("router-link",{attrs:{to:"./modules/Blocks.html"}},[t._v("Block Manager Module")])],1)]),t._m(14),a("p",[t._v("Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes.\nThis isn't totally out of the ordinary, but the unique thing about Components that you can create a totally decoupled View. This means you can show the user whatever you desire regardless of what is in the Model. For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If you want to learn more about Custom Components, you should check out "),a("router-link",{attrs:{to:"./modules/Components.html"}},[t._v("Component Manager Module")]),t._v(".")],1),a("p",[t._v("GrapesJS comes with a few "),a("router-link",{attrs:{to:"./modules/Components.html#built-in-components"}},[t._v("built-in Components")]),t._v(" that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default "),a("router-link",{attrs:{to:"./modules/Assets.html"}},[t._v("Asset Manager")]),t._v(", which you can customize or integrate you own. By double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customization and "),a("router-link",{attrs:{to:"./guides/Replace-Rich-Text-Editor.html"}},[t._v("replaceable")]),t._v(".")],1),a("p",[t._v("As we have seen before you can create Blocks directly as Components")]),t._m(15),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("Check out the "),a("router-link",{attrs:{to:"./api/components.html"}},[t._v("Components API")]),t._v(" to learn how to interact with components dynamically")],1)]),a("p",[t._v("An example on how to select some inner component and replace its children with new contents")]),t._m(16),t._m(17),a("p",[t._v("Now that we have a canvas and custom blocks let's see how to create a new custom panel with some buttons inside (using "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Panels API")]),t._v(") which trigger commands (the core one or custom).")],1),t._m(18),t._m(19),t._m(20),a("Demo",[a("DemoCustomPanels")],1),a("p",[t._v("We have defined where to render the panel with "),a("code",[t._v("el: '#basic-panel'")]),t._v(" and then for each button we added a "),a("code",[t._v("command")]),t._v(" property. The command could be the id, an object with "),a("code",[t._v("run")]),t._v(" and "),a("code",[t._v("stop")]),t._v(" functions or simply a single function.\nTry to use "),a("router-link",{attrs:{to:"./api/commands.html"}},[t._v("Commands")]),t._v(" when possible, they allow you to track actions globally. Commands also execute callbacks before and after their execution (you can even interrupt them).")],1),t._m(21),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("Check out the "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Panels API")]),t._v(" to see all the available methods")],1)]),t._m(22),a("p",[t._v("Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it")]),t._m(23),t._m(24),t._m(25),a("Demo",[a("DemoLayers")],1),t._m(26),a("p",[t._v("Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.")]),t._m(27),t._m(28),t._m(29),t._m(30),a("Demo",[a("DemoStyle")],1),a("p",[t._v("Inside Style Manager definition we use "),a("code",[t._v("buildProps")]),t._v(" which helps us create common properties from "),a("router-link",{attrs:{to:"./modules/Style-manager.html#built-in-properties"}},[t._v("available built-in objects")]),t._v(" then in "),a("code",[t._v("properties")]),t._v(" we can override same objects (eg. passing another "),a("code",[t._v("name")]),t._v(" to change the label) identified by "),a("code",[t._v("property")]),t._v(" name. As you can see from "),a("code",[t._v("custom-prop")]),t._v(" example it's a matter of defining the CSS "),a("code",[t._v("property")]),t._v(" and the input "),a("code",[t._v("type")]),t._v(". We suggest to check a more complete example of Style Manager properties usage from the "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/gh-pages/demo.html#L1000",target:"_blank",rel:"noopener noreferrer"}},[t._v("webpage preset demo"),a("OutboundLink")],1)],1),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("Check the "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Style Manager API")]),t._v(" to see how to update sectors and properties dynamically")],1)]),t._m(31),a("p",[t._v("Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. "),a("code",[t._v("placeholder")]),t._v(" for inputs or "),a("code",[t._v("alt")]),t._v(" for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we going to show you how to render available traits, for more details on how to extend them we suggest you read the "),a("router-link",{attrs:{to:"./modules/Traits.html"}},[t._v("Trait Manager Module page")]),t._v(".")],1),a("p",[t._v("Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher")]),t._m(32),t._m(33),a("Demo",[a("DemoTraits")],1),a("p",[t._v("Now if you switch to the Trait panel and select one of the inner components you should see its default traits.")]),t._m(34),a("p",[t._v("GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching")]),t._m(35),t._m(36),t._m(37),a("Demo",[a("DemoDevices")],1),t._m(38),t._m(39),a("p",[t._v("What about the mobile-first approach? You can achieve it by changing your configurations in this way:")]),t._m(40),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("TIP")]),a("p",[t._v("Check out the "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Device Manager API")]),t._v(" to see all the available methods")],1)]),t._m(41),a("p",[t._v("Once you have finished with defining your builder interface the next step would be to setup the storing and loading process.\nGrapesJS implements 2 simple type of storages inside its Storage Manager: The local (by using "),a("code",[t._v("localStorage")]),t._v(", active by default) and the remote one. Those are enough to cover most of the cases, but it's also possible to add new implementations ("),a("a",{attrs:{href:"https://github.com/artf/grapesjs-indexeddb",target:"_blank",rel:"noopener noreferrer"}},[t._v("grapesjs-indexeddb"),a("OutboundLink")],1),t._v(" is a good example).\nLet's see how the default options work")]),t._m(42),t._m(43),a("p",[t._v("Let's look at the configuration required to setup the remote storage")]),t._m(44),a("p",[t._v("As you might noticed, we've left some default options unchanged: Increased changes necessary for autosave triggering and passed remote endpoints.\nIf you prefer you could also disable the autosaving and you can do so using a custom command")]),t._m(45),a("p",[t._v("To get a better overview of the Storage Manager and how you should store/load the template, or how to define new storages you should read the "),a("router-link",{attrs:{to:"./modules/Storage.html"}},[t._v("Storage Manager Module")]),t._v(" page")],1),t._m(46),a("p",[t._v("One last step that might actually improve a lot your editor personality is how it's look visually. To achieve an easy theming we have adapted an atomic design for this purpose. To customize the main palette of colors all you have to do is to change few CSS rules. Alternatively if you include GrapesJS styles via SCSS you can make use of its "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/dev/src/styles/scss/_gjs_variables.scss",target:"_blank",rel:"noopener noreferrer"}},[t._v("internal variables"),a("OutboundLink")],1),t._v(" and declare your variables before the import")]),t._m(47),a("p",[t._v("In case of a simple CSS you'll have to put your rules after the GrapesJS styles.\nTo complete our builder let's customize its color palette and to make it more visually \"readable\" we can replace all button labels with SVG icons")]),t._m(48),a("p",[t._v("and here is our final result")]),a("Demo",{attrs:{id:"final-result"}},[a("DemoTheme")],1)],1)},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"getting-started"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[this._v("#")]),this._v(" Getting Started")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the "),s("a",{attrs:{href:"#final-result"}},[this._v("final result")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"import-the-library"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#import-the-library","aria-hidden":"true"}},[this._v("#")]),this._v(" Import the library")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("//unpkg.com/grapesjs/dist/css/grapes.min.css"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("//unpkg.com/grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token script language-javascript"}}),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v('\x3c!--\nIf you need plugins, put them below the main grapesjs script\n
-
-    
-    
+    
+    
+    
   
   
     
     FAQ
    Coming soon
    Edit this page on GitHub
    Last Updated: 7/9/2018, 12:48:25 AM
    
-    
+    
   
 
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 4b50d6847..d00406861 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
     Getting Started
    This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the final result
     Import the library
    Before you start using GrapesJS, you'll have to import it. Let's import the latest version
    <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
-<script src="//unpkg.com/grapesjs"></script>
+<script src="//unpkg.com/grapesjs"></script>
 <!--
 If you need plugins, put them below the main grapesjs script
 <script src="/path/to/some/plugin.min.js"></script>
@@ -51,7 +51,7 @@ The main part of the GrapesJS editor is the canvas, this is where you create the
   height: '300px',
   width: 'auto',
   // Disable the storage manager for the moment
-  storageManager: { type: null },
+  storageManager: false,
   // Avoid any default panel
   panels: { defaults: [] },
 });
@@ -128,14 +128,14 @@ This isn't totally out of the ordinary, but the unique thing about Components th
         // use `content` for static strings, `components` string will be parsed
         // and transformed in Components
         components: '<span>HTML at some point</span>',
-      }
+      }      
     ]
   }
 })
 
    TIP
    Check out the Components API to learn how to interact with components dynamically
    An example on how to select some inner component and replace its children with new contents
    // The wrapper is the root Component
 const wrapper = editor.DomComponents.getWrapper();
 const myComponent = wrapper.find('div.my-component')[0];
-myComponent.components().forEach(component => /* ... do something ... */);
+myComponent.components().forEach(component => /* ... do something ... */);
 myComponent.components('<div>New content</div>');
 
     Panels & Buttons
    Now that we have a canvas and custom blocks let's see how to create a new custom panel with some buttons inside (using Panels API) which trigger commands (the core one or custom).
     
     
     





    <div class="panel__top">
     <div class="panel__basic-actions"></div>
@@ -180,7 +180,7 @@ editor.Panels: 'btn-show-json',
       label: 'JSON',
       context: 'show-json',
-      command(editor) {
+      command(editor) {
         editor.Modal.setTitle('Components JSON')
           .setContent(`<textarea style="width:100%; height: 250px;">
             ${JSON.stringify(editor.getComponents())}
@@ -191,7 +191,7 @@ editor.Panels],
 });
 
    Hello World Component!
    We have defined where to render the panel with el: '#basic-panel' and then for each button we added a command property. The command could be the id, an object with run and stop functions or simply a single function.
-Try to use Commands when possible, they allow you to track actions globally. Commands also execute callbacks before and after their execution (you can even interrupt them).
    editor.on('run:export-template:before', opts => {
+Try to use Commands when possible, they allow you to track actions globally. Commands also execute callbacks before and after their execution (you can even interrupt them).
    editor.on('run:export-template:before', opts => {
   console.log('Before the command run');
   if (0 /* some condition */) {
     opts.abort = 1;
@@ -343,27 +343,27 @@ editor.on// Define commands
 editor.Commands.add('show-layers', {
-  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
-  getLayersEl(row) { return row.querySelector('.layers-container') },
+  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
+  getLayersEl(row) { return row.querySelector('.layers-container') },
 
-  run(editor, sender) {
+  run(editor, sender) {
     const lmEl = this.getLayersEl(this.getRowEl(editor));
     lmEl.style.display = '';
   },
-  stop(editor, sender) {
+  stop(editor, sender) {
     const lmEl = this.getLayersEl(this.getRowEl(editor));
     lmEl.style.display = 'none';
   },
 });
 editor.Commands.add('show-styles', {
-  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
-  getStyleEl(row) { return row.querySelector('.styles-container') },
+  getRowEl(editor) { return editor.getContainer().closest('.editor-row'); },
+  getStyleEl(row) { return row.querySelector('.styles-container') },
 
-  run(editor, sender) {
+  run(editor, sender) {
     const smEl = this.getStyleEl(this.getRowEl(editor));
     smEl.style.display = '';
   },
-  stop(editor, sender) {
+  stop(editor, sender) {
     const smEl = this.getStyleEl(this.getRowEl(editor));
     smEl.style.display = 'none';
   },
@@ -403,14 +403,14 @@ editor.Commands// Define command
 // ...
 editor.Commands.add('show-traits', {
-  getTraitsEl(editor) {
+  getTraitsEl(editor) {
     const row = editor.getContainer().closest('.editor-row');
     return row.querySelector('.traits-container');
   },
-  run(editor, sender) {
+  run(editor, sender) {
     this.getTraitsEl(editor).style.display = '';
   },
-  stop(editor, sender) {
+  stop(editor, sender) {
     this.getTraitsEl(editor).style.display = 'none';
   },
 });
@@ -461,10 +461,10 @@ editor.Commands// Commands
 editor.Commands.add('set-device-desktop', {
-  run: editor => editor.setDevice('Desktop')
+  run: editor => editor.setDevice('Desktop')
 });
 editor.Commands.add('set-device-mobile', {
-  run: editor => editor.setDevice('Mobile')
+  run: editor => editor.setDevice('Mobile')
 });
 
    Hello World Component!
    As you can see from the commands definition we use the editor.setDevice method to change the size of the viewport. In case you need to trigger an action on device change you can setup a listener like this:
    editor.on('change:device', () => console.log('Current device: ', editor.getDevice()));
 
    What about the mobile-first approach? You can achieve it by changing your configurations in this way:
    const editor = grapesjs.init({
@@ -526,7 +526,7 @@ If you prefer you could also disable the autosaving and you can do so using a cu
       // ...
       {
         id: 'store-data',
-        run(editor) {
+        run(editor) {
           editor.store();
         },
       }
@@ -558,7 +558,7 @@ To complete our builder let's customize its color palette and to make it more vi
 
 /* Secondary color for the text color */
 .gjs-two-color {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.7);
 }
 
 /* Tertiary color for the background */
@@ -579,6 +579,6 @@ To complete our builder let's customize its color palette and to make it more vi
           Assets
          →
       
    
-    
+    
   
 
diff --git a/docs/guides/Custom-CSS-parser.html b/docs/guides/Custom-CSS-parser.html
index b160b0847..4f816afaa 100644
--- a/docs/guides/Custom-CSS-parser.html
+++ b/docs/guides/Custom-CSS-parser.html
@@ -8,9 +8,9 @@
     
   
   
-
-    
-    
+    
+    
+    
   
   
     
    
@@ -29,15 +29,15 @@
     GitHub
     
     Use Custom CSS Parser
    If you just use GrapesJS for building templates from scratch, so you start from an empty canvas and for editing you strictly rely  on the generated JSON (final HTML/CSS only for end-users) then, probably, you might skip this guide. On the other hand, if you import templates from already defined HTML/CSS or let the user embed custom codes (eg. using the grapesjs-custom-code plugin), then you have to know that you might face strange behaviors.
    WARNING
    This guide requires GrapesJS v0.14.33 or higher
     Import HTML/CSS
    Importing already defined HTML/CSS is a really good feature as it lets you start editing immediately any kind of template and obviously, GrapesJS itself promotes this kind of approach
    <div id="gjs">
   <div class="txt-red">Hello world!</div>
-  <style>.txt-red{color: red}</style>
+  <style>.txt-red{color: red}</style>
 </div>
 
-<script type="text/javascript">
+<script type="text/javascript">
   const editor = grapesjs.init({
       container : '#gjs',
       fromElement: true,
   });
-</script>
+</script>
 
    To work fast and easier GrapesJS needs to compile a simple string (HTML/CSS) into structured nodes (nested JS objects). Fortunately, most of the hard work (parsing) is already done by the browser itself which translates that string into its own objects (DOM/CSSOM) and so we just rely on those, by traversing them and creating our nodes (unfortunately browser's objects are not enough). The fact we're able to parse our strings just by using the browser itself it's very cool, we can enable the import feature without requiring any third-party library, so... where is the problem? Well, while the generated DOM is performing quite well, as we're able to extract what we need, unfortunately, it's not the same for the CSSOM, so let's see in the next paragraph what is wrong with it.
     CSSOM results are inconsistent
    Unfortunately, we have discovered that the CSSOM generated by browsers are highly inconsistent from what we ask to parse. To demonstrate it, we gonna create a simple example by using the built-in parser and we'll check its result.
 So, for our case we just take in account a simple rule, we'll parse it and print the CSSOM result on screen.
    <h1>To parse</h1>
 <pre id="css-to-parse">
@@ -55,10 +55,10 @@ So, for our case we just take in account a simple rule, we'll parse it and print
 <h1>Result</h1>
 <pre id="result"></pre>
 
-<script>
+<script>
   // We use ES5 just to make it more cross-browser, without the need of being compiled
 
-  function parse(str) {
+  function parse(str) {
     var result = [];
     // Create the element which will contain the style to parse
     var el = document.createElement('style');
@@ -72,7 +72,7 @@ So, for our case we just take in account a simple rule, we'll parse it and print
     return sheet;
   }
 
-  function CSSOMToString(root) {
+  function CSSOMToString(root) {
     // For the sake of brevity we just print what we need
     var styleStr = '';
     var rule = root.cssRules[0];
@@ -89,8 +89,8 @@ So, for our case we just take in account a simple rule, we'll parse it and print
 
   var css = document.getElementById('css-to-parse').innerText;
   CSSOMToString(parse(css));
-</script>
-
     Results
    Here some results (using latest versions + IE11)
    As you see, this is what we get for asking only 7 properties, who adds more or less, someone converts colors to rgba functions and someone else changes the order of our values (eg. box-shadow). Webkit-based browsers attach also properties they self don't understand
    So it's clear that we can't rely on CSSOM objects, that's why we added the possibility to set custom CSS parser via editor.setCustomParserCss method or config.Parser.parserCss option to use on initialization. Let's see in detail how it's expected to work
     Set CSS parser
    The custom parser you have to use it's just a function receiving 2 arguments: css, as the CSS string to parse, and editor, the instance of the current editor. As the result, you should return an array containing valid rule objects, the syntax of those objects are explained below. This is how you can set the custom parser
    const parserCss = (css, editor) => {
+</script>
+
     Results
    Here some results (using latest versions + IE11)
    As you see, this is what we get for asking only 7 properties, who adds more or less, someone converts colors to rgba functions and someone else changes the order of our values (eg. box-shadow). Webkit-based browsers attach also properties they self don't understand
    So it's clear that we can't rely on CSSOM objects, that's why we added the possibility to set custom CSS parser via editor.setCustomParserCss method or config.Parser.parserCss option to use on initialization. Let's see in detail how it's expected to work
     Set CSS parser
    The custom parser you have to use it's just a function receiving 2 arguments: css, as the CSS string to parse, and editor, the instance of the current editor. As the result, you should return an array containing valid rule objects, the syntax of those objects are explained below. This is how you can set the custom parser
    const parserCss = (css, editor) => {
   const result = [];
   // ... parse the CSS string
     result.push({
@@ -209,6 +209,6 @@ editor.setCu
         ← 
    
-    
+    
   
 
diff --git a/docs/guides/Replace-Rich-Text-Editor.html b/docs/guides/Replace-Rich-Text-Editor.html
index 7b0f1cb22..65d9b66ff 100644
--- a/docs/guides/Replace-Rich-Text-Editor.html
+++ b/docs/guides/Replace-Rich-Text-Editor.html
@@ -8,9 +8,9 @@
     
   
   
-
-    
-    
+    
+    
+

    Focus

    The focus() method is just a helper used inside enable() and not required by the interface

    editor.setCustomRte({
   // ...
-  focus: function (el, rte) {
+  focus: function (el, rte) {
     // Do nothing if already focused
     if (rte && rte.focusManager.hasFocus) {
       return;
@@ -87,7 +87,7 @@ editor.setCu
     rte && rte.focus();
   },
 });
-

    Toolbar position

    Sometimes the default top-left position of the toolbar is not always what you need. For example, when you scroll the canvas and the toolbar reaches the top, you'd like to move it down. For this purpose, you can add a listener which applies your logic in this way:

    editor.on('rteToolbarPosUpdate', (pos) => {
+

    Toolbar position

    Sometimes the default top-left position of the toolbar is not always what you need. For example, when you scroll the canvas and the toolbar reaches the top, you'd like to move it down. For this purpose, you can add a listener which applies your logic in this way:

    editor.on('rteToolbarPosUpdate', (pos) => {
   if (pos.top <= pos.canvasTop) {
     pos.top = pos.elementTop + pos.elementHeight;
   }
@@ -101,6 +101,6 @@ Obviously, each third-party library has its own APIs and can present some limita
           Use Custom CSS Parser
          →
    - + diff --git a/docs/index.html b/docs/index.html index 18e41fd5d..7aca4c5a3 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,9 +8,9 @@ - - - + + + - + diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html index 3f3b88998..abee11176 100644 --- a/docs/modules/Assets.html +++ b/docs/modules/Assets.html @@ -8,9 +8,9 @@ - - - + + +
    @@ -167,7 +167,7 @@ am.getAllVis

    Ok, now let's show only assets form the first category

    const assets = am.getAll();
 
 am.render(assets.filter(
-  asset => asset.get('category') == 'c1'
+  asset => asset.get('category') == 'c1'
 ));
 
 am.getAll().length // Still have 3 assets
@@ -185,7 +185,7 @@ am.add

    It's up to you tell the editor how to recognize your type and for this purpose you should to use isType() method. Let's see now an example of how we'd start to defining a type like svg-icon

    am.addType('svg-icon', {
   // `value` is for example the argument passed in `am.add(VALUE);`
-  isType(value) {
+  isType(value) {
     // The condition is intentionally simple
     if (value.substring(0, 5) == '<svg ') {
       return {
@@ -205,7 +205,7 @@ am.add);

    The default open-assets command shows only image assets, so to render svg-icon run this

    am.render(am.getAll().filter(
-  asset => asset.get('type') == 'svg-icon'
+  asset => asset.get('type') == 'svg-icon'
 ));

    You should see something like this

    The SVG asset is not rendered correctly and this is because we haven't yet configured its view

    am.addType('svg-icon', {
   view: {
@@ -214,7 +214,7 @@ am.add// Check the base `template()` here:
     // https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/AssetView.js
     getPreview() {
-      return `<div style="text-align: center">${this.model.get('svgContent')}</div>`;
+      return `<div style="text-align: center">${this.model.get('svgContent')}</div>`;
     },
     getInfo() {
       // You can use model's properties if you passed them:
@@ -228,27 +228,27 @@ am.addreturn '<div>SVG description</div>';
     },
   },
-  isType(value) {...}
+  isType(value) {...}
 })

    This is the result

    Now we have to deal with how to assign our svgContent to the selected element

    am.addType('svg-icon', {
   view: {
     // In our case the target is the selected component
-    updateTarget(target) {
-      const svg = this.model.get('svgContent');
+    updateTarget(target) {
+      const svg = this.model.get('svgContent');
 
       // Just to make things bit interesting, if it's an image type
       // I put the svg as a data uri, content otherwise
-      if (target.get('type') == 'image') {
+      if (target.get('type') == 'image') {
         // Tip: you can also use `data:image/svg+xml;utf8,<svg ...` but you
         // have to escape few chars
-        target.set('src', `data:mime/type;base64,${btoa(svg)}`);
+        target.set('src', `data:mime/type;base64,${btoa(svg)}`);
       } else {
-        target.set('content', svg);
+        target.set('content', svg);
       }
     },
     ...
   },
-  isType(value) {...}
+  isType(value) {...}
 })

    Our custom svg-icon asset is ready to use. You can also add a model to the addType definition to group the business logic of your asset, but usually it's optional.

    // Just an example of model use
 am.addType('svg-icon', {
@@ -263,11 +263,11 @@ am.addType// You can call model's methods inside views:
     // const name = this.model.getName();
     getName() {
-      return this.get('name');
+      return this.get('name');
     }
   },
   view: {...},
-  isType(value) {...}
+  isType(value) {...}
 })

    Extend Asset Types

    Extending asset types is basically the same as adding them, you can choose what type to extend and how.

    // svgIconType will contain the definition (model, view, isType)
 const svgIconType = am.getType('svg-icon');
@@ -294,7 +294,7 @@ am.addType: {
     // If you want to see more methods to extend check out
     // https://github.com/artf/grapesjs/blob/dev/src/asset_manager/view/AssetImageView.js
-    onRemove(e) {
+    onRemove(e) {
       e.stopPropagation();
       const model = this.model;
 
@@ -330,13 +330,13 @@ editor.on});
 
 // Error handling
-editor.on('asset:upload:error', (err) => {
+editor.on('asset:upload:error', (err) => {
   ...
   notifyError(err);
 });
 
 // Do something on response
-editor.on('asset:upload:response', (response) => {
+editor.on('asset:upload:response', (response) => {
   ...
 });

    Response

    When the uploading is over, by default (via config parameter autoAdd: 1), the editor expects to receive a JSON blob of uploaded assets in a data key as a response and tries to add them to the main collection. The JSON might look like this:

    {
@@ -367,6 +367,6 @@ editor.on →
    - + diff --git a/docs/modules/Blocks.html b/docs/modules/Blocks.html index 4172fecc2..96a863835 100644 --- a/docs/modules/Blocks.html +++ b/docs/modules/Blocks.html @@ -8,9 +8,9 @@ - - - + + + - + diff --git a/docs/modules/Commands.html b/docs/modules/Commands.html index beaa69bcf..23ac9b53b 100644 --- a/docs/modules/Commands.html +++ b/docs/modules/Commands.html @@ -8,9 +8,9 @@ - - - + + +
    @@ -45,37 +45,37 @@ } });

    For all other available options check directly the configuration source file.

    Most commonly commands are created dynamically post-initialization, in that case, you'll need to use the Commands API (eg. this is what you need if you create a plugin)

    const commands = editor.Commands;
-commands.add('my-command-id', editor => {
+commands.add('my-command-id', editor => {
   alert('This is my command');
 });
 
 // or it would be the same...
 commands.add('my-command-id', {
-  run(editor) {
+  run(editor) {
     alert('This is my command');
   },
 });

    As you see the definition is quite easy, you just add an ID and the callback function. The Editor instance is passed as the first argument to the callback so you can access any other module or API method.

    Now if you want to call that command you should just run this

    editor.runCommand('my-command-id');

    TIP

    The method editor.runCommand is an alias of editor.Commands.run

    You could also pass options if you need

    editor.runCommand('my-command-id', { some: 'option' });
-

    Then you can get the same object as a third argument of the callback.

    commands.add('my-command-id', (editor, sender, options = {}) => {
+

    Then you can get the same object as a third argument of the callback.

    commands.add('my-command-id', (editor, sender, options = {}) => {
   alert(`This is my command ${options.some}`);
 });

    The second argument, sender, just indicates who requested the command, in our case will be always the editor

    Until now there is nothing exciting except a common entry point for functions, but we'll see later its real advantages.

    Default commands

    GrapesJS comes along with some default set of commands and you can get a list of all currently available commands via editor.Commands.getAll(). This will give you an object of all available commands, so, also those added later, like via plugins. You can recognize default commands by their namespace core:*, we also recommend to use namespaces in your own custom commands, but let's get a look more in detail here:

    Stateful commands

    As we've already seen the command is just a function and once executed nothing is left behind, but in some cases, we'd like to keep a track of executed commands. GrapesJS can handle by default this case and to enable it you just need to declare a command as an object with the run and stop methods

    commands.add('my-command-state', {
-  run(editor) {
+  run(editor) {
     alert('This command is now active');
   },
-  stop(editor) {
+  stop(editor) {
     alert('This command is disabled');
   },
 });

    So if we now run editor.runCommand('my-command-state') the command will be registered as active. To check the state of the command you can use commands.isActive('my-command-state') or you can even get the list of all active commands via commands.getActive(), in our case the result would be something like this

    {
   ...
-  'my-command-state': undefined
+  'my-command-state': undefined
 }

    The key of the result object tells you the active command, the value is the last return of the run command, in our case is undefined because we didn't return anything, but it's up to your implementation decide what to return and if you actually need it.

    // Let's return something
 ...
-run(editor) {
+run(editor) {
     alert('This command is now active');
     return {
       activated: new Date(),
@@ -84,18 +84,18 @@ commands.add
 ...
 // Now instead of the `undefined` you'll see the object from the run method

    To disable the command use editor.stopCommand method, so in our case it'll be editor.stopCommand('my-command-state'). As for the runCommand you can pass an options object as a second argument and use them in your stop method.

    Once the command is active, if you try to run editor.runCommand('my-command-state') again you'll notice that that the run is not triggering. This behavior is useful to prevent executing multiple times the activation process which might lead to an inconsistent state (think about, for instance, having a counter, which should be increased on run and decreased on stop). If you need to run a command multiple times probably you're dealing with a not stateful command, so try to use it without the stop method, but in case you're aware of your application state you can actually force the execution with editor.runCommand('my-command-state', { force: true }). The same logic applies to the stopCommand method.


    WARNING

    If you deal with UI in your stateful commands, be careful to keep the state coherent with your logic. Let's take, for example, the use of a modal as an indicator of the command state.

    commands.add('my-command-modal', {
-  run(editor) {
+  run(editor) {
     editor.Modal.open({
       title: 'Modal example',
       content: 'My content',
     });
   },
-  stop(editor) {
+  stop(editor) {
     editor.Modal.close();
   },
 });

    If you run it, close the modal (eg. by clicking the 'x' on top) and then try to run it again you'll see that the modal is not opening anymore. This happens because the command is still active (you should see it in commands.getActive()) and to fix it you have to disable it once the modal is closed.

    ...
-  run(editor) {
+  run(editor) {
     editor.Modal.open({
       title: 'Modal example',
       content: 'My content',
@@ -103,10 +103,10 @@ commands.add
   },
 ...

    In the example above, we make use of few helper methods from the Modal module (onceClose) and the command itself (stopCommand) but obviously, the logic might be different due to your requirements and specific UI.

    Extending

    Another big advantage of commands is the possibility to easily extend or override them with another command. -Let's take a simple example

    commands.add('my-command-1', editor => {
+Let's take a simple example
    commands.add('my-command-1', editor => {
   alert('This is command 1');
 });
-
    If you need to overwrite this command with another one, just add it and keep the same id.
    commands.add('my-command-1', editor => {
+
    If you need to overwrite this command with another one, just add it and keep the same id.
    commands.add('my-command-1', editor => {
   alert('This is command 1 overwritten');
 });
 
    Let's see now instead how can we extend one
    commands.add('my-command-2', {
@@ -142,16 +142,16 @@ editor.on.on('stop:my-command-modal:before', () => {
   console.log('Before `my-command-modal` is stopped');
 });
-
    If you need, you can also listen to all commands
    editor.on('run', commandId => {
+
    If you need, you can also listen to all commands
    editor.on('run', commandId => {
   console.log('Run', commandId);
 });
 
-editor.on('stop', commandId => {
+editor.on('stop', commandId => {
   console.log('Stop', commandId);
 });
 
     Interrupt command flow
    Sometimes you might need to interrupt the execution of an existant command due to some condition. In that case, you have to use run:{COMMAND-ID}:before event and set to true the abort option
    const condition = 1;
 
-editor.on('run:my-command-modal:before', options => {
+editor.on('run:my-command-modal:before', options => {
   if (condition) {
     options.abort = true;
     console.log('Prevent `my-command-modal` from execution');
@@ -164,6 +164,6 @@ editor.on →
    - + diff --git a/docs/modules/Components-js.html b/docs/modules/Components-js.html index 27775f96a..66189bd9f 100644 --- a/docs/modules/Components-js.html +++ b/docs/modules/Components-js.html @@ -8,9 +8,9 @@ - - - + + +
    @@ -42,7 +42,7 @@ });

    Now if you drag the new block inside the canvas you'll see an alert and the message in console, as you might expect. One thing worth noting is that this context is bound to the component element, so if you wanted to change a property you'd do this.innerHTML = 'inner content'.

    One thing you should take in account is how the script is bound to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or editor.getHtml()), you might see something like this:

    <div id="c764"></div>
-<script>
+<script>
   var items = document.querySelectorAll('#c764');
   for (var i = 0, len = items.length; i < len; i++) {
     (function(){
@@ -52,10 +52,10 @@ One thing worth noting is that this context is bound to the compone
       // END component code
     }.bind(items[i]))();
   }
-</script>
+</script>

    As you see the editor attaches a unique ID to all components with scripts and retrieves them via querySelectorAll. Dragging another test-block will generate this:

    <div id="c764"></div>
 <div id="c765"></div>
-<script>
+<script>
   var items = document.querySelectorAll('#c764, #c765');
   for (var i = 0, len = items.length; i < len; i++) {
     (function(){
@@ -65,11 +65,11 @@ One thing worth noting is that this context is bound to the compone
       // END component code
     }.bind(items[i]))();
   }
-</script>
+</script>

    Keep in mind that all component scripts are executed only inside the iframe of the canvas (isolated, just like your final template), and therefore are NOT part of the current document. All your external libraries (eg. jQuery) are not there, but you'll see later how to manage scripted components with dependencies.

    One thing you might be concerned about is a string used for the script, definitely not the best way to deal with a code, for this reason GrapesJS is able also to handle functions for you, so the previous example might look like this:

    editor.BlockManager.add('test-block', {
   ...
   content: {
-    script: function () {
+    script: function () {
       alert('Hi');
       console.log('the element', this);
     },
@@ -80,14 +80,14 @@ One thing worth noting is that this context is bound to the compone
 
 editor.BlockManager.add('test-block', {
 ...
-  script: function () {
+  script: function () {
     alert('Hi ' + myVar);
     console.log('the element', this);
   },
 ...
 });

    Unfortunately, this won't work. You'll get an undefined myVar error. The final HTML, with script functions converted to string, will look like this:

    <div id="c764"></div>
-<script>
+<script>
   var items = document.querySelectorAll('#c764');
   for (var i = 0, len = items.length; i < len; i++) {
     (function(){
@@ -97,12 +97,12 @@ editor.BlockManager// END component code
     }.bind(items[i]))();
   }
-</script>
+</script>

    There is a solution to make your scripts behave dynamically. You can interpolate properties of the component model.

    editor.BlockManager.add('test-block', {
   ...
   content: {
     myModelPropName: 'John',
-    script: function () {
+    script: function () {
       alert('Hi {[ myModelPropName ]}');
       console.log('the element', this);
     },
@@ -110,7 +110,7 @@ editor.BlockManager}
 });

    The final HTML will be:

    <div id="c764"></div>
-<script>
+<script>
   var items = document.querySelectorAll('#c764');
   for (var i = 0, len = items.length; i < len; i++) {
     (function(){
@@ -118,7 +118,7 @@ editor.BlockManager.log('the element', this);
     }.bind(items[i]))();
   }
-</script>
+</script>

    You can even change the tags used for the interpolation

    var editor = grapesjs.init({
   ...
   // Default values
@@ -129,7 +129,7 @@ editor.BlockManagerproperty Traits to create custom components.
     Dependencies
    As we mentioned above, scripts are executed independently inside the iframe of the canvas, without any dependencies, so exactly as the final HTML generated by the editor.
 If you want to make use of external libraries you have two  approaches: component-related and template-related.
    If you're building a slider component based on some third-party library you probably would like to include the external file only when the component is actually dragged inside the canvas. In this case, the component-related approach is the perfect one as it's loading external libraries dynamically.
 All you have to do is to require the dependency when it is needed and then call your script.
    ...
-script: function () {
+script: function () {
   var el = this;
   var initMySLider = function() {
     CoolSliderJS.init(el);
@@ -151,7 +151,7 @@ script: funct
 });
 
 ...
-  script: function () {
+  script: function () {
     // Do stuff using jquery
     $('...');
   },
@@ -163,6 +163,6 @@ script: funct
           Traits
          →
    - + diff --git a/docs/modules/Components-new.html b/docs/modules/Components-new.html new file mode 100644 index 000000000..3f4b5622b --- /dev/null +++ b/docs/modules/Components-new.html @@ -0,0 +1,361 @@ + + + + + + Component Manager | GrapesJS + + + + + + + + + +
    + GrapesJS +

    Component Manager

    The Component is the base element for template composition. It is atomic, so elements like images, text boxes, maps, etc. fit the definition of a Component. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.

    WARNING

    This guide is referring to GrapesJS v0.14.67 or higher

    How Components work?

    Let's see in detail how components work by looking at all steps from adding an HTML string to the editor.

    This is how we can add new components to the canvas:

    // Append components directly to the canvas
+editor.addComponents(`<div>
+  <img src="https://path/image" />
+  <span title="foo">Hello world!!!</span>
+</div>`);
+
+// or into some, already defined, component.
+// For instance, appending to a selected component would be:
+editor.getSelected().append(`<div>...`);
+
+// Actually, editor.addComponents is an alias of...
+editor.getWrapper().append(`<div>...`);
+

    TIP

    If you need to append a component in a specific position, you can use at option. To add a component on top of all others (in the same collection) you would use

    component.append('<div>...', { at: 0 })
+

    or in the middle

    const { length } = component.components();
+component.append('<div>...', { at: parseInt(length / 2, 10) })
+

    Component Definition

    In the first step the HTML string is parsed and trasformed to what is called Component Definition, so the result of the input would be:

    {
+  tagName: 'div',
+  components: [
+    {
+      type: 'image',
+      attributes: { src: 'https://path/image' },
+    }, {
+      tagName: 'span',
+      type: 'text',
+      attributes: { title: 'foo' },
+      components: [{
+        type: 'textnode',
+        content: 'Hello wdsforld!!!'
+      }]
+    }
+  ]
+}
+

    The real Component Definition would be a little bit bigger so we reduced the JSON for the sake of simplicity.

    You can notice the result is similar to what is generally called a Virtual DOM, a lightweight rappresentation of the DOM element. This actually helps the editor to keep track of the state of our elements and make performance-friendly changes/updates. +The meaning of properties like tagName, attributes and components are quite obvious, but what about type?! This particular property specifies the actual Component of our Component Definition (you check the list of default components below) and if it's omitted, the default one will be used type: 'default'. +At this point, a good question would be, how the editor assignes those types by starting from a simple HTML string? This step is identified as Component Recognition and it's explained in detail in the next paragraph.

    Component Recognition and Component Type Stack

    As we said before, when you pass an HTML string as a component to the editor, that string is parsed and compiled to the Component Definition with a new type property. To understand what type should be assigned, for each parsed HTML Element, the editor iterates over all the defined components, called Component Type Stack, and checks via isComponent method (we will see it later) if that component type is appropriate for that element. The Component Type Stack is just a simple array of components but the important part is the order of those components. Any new added Custom Component (we'll see later how to create them) goes on top of the Component Type Stack and each element returned from the parser iterates the stack from top to bottom (the last element of the stack is the default one), the iteration stops once one of the component returns a truthy value from the isComponent method.

    SVG - ComponentTypeStack

    TIP

    If you're importing big chunks of HTML code you might want to improve the performances by skipping the parsing and the component recognition steps by passing directly Component Definiton objects or using the JSX syntax. Read more about it here...TODO

    Component Creation

    Once the Component Definition is ready and the type is assigned, the Component instance can be created (known also as the Model). Let's step back to our previous example with the HTML string, the result of the append method is an array of added components.

    const component = editor.addComponents(`<div>
+  <img src="https://path/image" />
+  <span title="foo">Hello world!!!</span>
+</div>`)[0];
+

    The Component instance contains properties and methods which allows you to obtain its data and change them. +You can read properties with the get method, like, for example, the type

    const componentType = component.get('type'); // eg. 'image'
+

    and to update properties you'd use set, which might change the way a component behavies in the canvas.

    // Make the component not draggable
+component.set('draggable', false);
+

    You can also use methods like getAttributes, setAttributes, components, etc.

    const innerComponents = component.components();
+// Update component content
+component.components(`<div>Component 1</div><div>Component 2</div>`);
+

    Each component can define its own properties and methods but all of them will always extend, at least, the default one (then you will see how to create new custom components and how to extend the already defined) so it's good to check the Component API to see all available properties and methods.

    The main purpose of the Component is to keep track of its data and to return them when necessary. One common thing you might need to ask from the component is to show its current HTML

    const componentHTML = component.toHTML();
+

    This will return a string containing the HTML of the component and all of its children. +The component implements also toJSON methods so you can get its JSON structure in this way

    JSON.stringify(component)
+

    TIP

    For storing/loading all the components you should rely on the Storage Manager

    The Component instance is responable for the final data (eg. HTML, JSON) of your templates, so if you need, for example, to update/add some attribute in the HTML you need to update its component (eg. component.addAttributes({ title: 'Title added' })), so the Component/Model is your Source of Truth.

    Component Rendering

    Another important thing of components is how they are rendered in the canvas, this aspect is handled by the View of the component. It has nothing to do with the final data, you can return a big <div>...</div> string as HTML of your component but render it as a simple image in the canvas (think about placeholders for complex/dynamic data).

    So, by default, the view of components is automatically synced with the data of its models (you can't have a View without a Model). If you update the attribute of the component or append a new one as a child, the view will render it in the canvas. +Unfotunatelly, sometimes, you might need some additional logic to handle better the component result. Think about allowing a user build its <table> element, for this specific case you might want to add custom buttons in the canvas, so it'd be easier adding/removing columns/rows. To handle those cases you can rely on the View, where you can add additional DOM component, attach events, etc. All of this will be completely unrelated with the final HTML of the <table> (the result the user would expect) as it handled by the Model. +Once the component is rendered (when you actually see it in the canvas) you can always access its View and the DOM element.

    const component = editor.getSelected();
+// Get the View
+const view = component.getView();
+// Get the DOM element
+const el =  component.getEl();
+

    So generally, the View is something you wouldn't need to change as the default one handles already the sync with the Model but in case you'd need more control over elements (eg. custom UI in canvas) you'll probably need to create a custom component and extend the default View with your logic. We'll see later how to create custom components.

    So far we have seen the core concept behind Components and how they work. The Model/Component is the source of truth for the final code of templates (eg. the HTML export relies on it) and the View/ComponentView is what is used by the editor to preview our components to users in the canvas.

    TODO +A more advanced use case of custom components is an implementation of a custom renderer inside of them

    Built-in Components

    Here below you can see the list of built-in components, ordered by their position in the Component Type Stack

    • cell - Component for handle <td> and <th> elements
    • row - Component for handle <tr> elements
    • table - Component for handle <table> elements
    • thead - Component for handle <thead> elements
    • tbody - Component for handle <tbody> elements
    • tfoot - Component for handle <tfoot> elements
    • map - Component for handle <a> elements
    • link - Component for handle <a> elements
    • label - Component for handle properly <label> elements
    • video - Component for videos
    • image - Component for images
    • script - Component for handle <script> elements
    • svg - Component for handle SVG elements
    • comment - Component for comments (might be useful for email editors)
    • textnode - Similar to the textnode in DOM definition, so a text element without a tag element.
    • text - A simple text component that can be edited inline
    • wrapper - The canvas need to contain a root component, a wrapper, this component was made to identify it
    • default - Default base component

    Define new Component

    Now that we know how components work, we can start exploring the process of creating new Custom Components.

    Let's say we want to make the editor understand and handle better <input> elements

    First of all, place your components inside a plugin

    --- OLD

    Component recognition

    But now, how does the editor recognize which Component to bind to the img element and what to do with the span one? +Each Component inherits, from the base one, a particular static method

    /**
+ * @param {HTMLElement} el
+ * @return {Object}
+ */
+isComponent: function(el) {
+  ...
+}
+

    This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each HTML string/element introduced inside the canvas will be processed by isComponent of all available types and if it matches, the object represented the type should be returned. The method isComponentis skipped if you add the component object ({ type: 'my-custom-type', tagName: 'div', attribute: {...}, ...}) or declare the type explicitly on the element (<div data-gjs-type="my-custom-type">...</div>)

    For example, with the image component this method looks like:

    // Image component
+isComponent: function(el) {
+  if(el.tagName == 'IMG')
+    return {type: 'image'};
+}
+

    Let's try with something that might look a little bit tricky. What about a Google Map?!? Google Maps are generally embedded as iframes, but the template can be composed by a lot of different iframes. How can I tell the editor that a particular iframe is actually a Google's Map? Well, you'll have to figure out the right pattern, you have the HTMLElement so you can make all the checks you want. In this particular case this pattern is used:

    // Map component
+isComponent: function(el) {
+	if(el.tagName == 'IFRAME' && /maps\.google\.com/.test(el.src)) {
+		return {type: 'map', src: el.src};
+	}
+},
+

    In addition to tagName check, we also used the src property, but you can actually override it with your own logic by extending the built-in component.

    Define new Component

    Let's see an example with another HTML element that is not handled by default Component types. What about input elements?

    With the default GrapesJS configuration inputs are treated like any other element; you can move it around, style it, etc. However, we'd like to handle this type of element more specifically. In this case, we have to create a new Component type.

    Let's define few specs for our new Input type:

    • Can be dropped only inside form elements
    • Can't drop other elements inside it
    • Can change the type of the input (text, password, email, etc.)
    • Can make it required for the form

    To define a new Component type you need to choose from which built-in Component inherit its properties, in our case we just gonna choose the default one. Let's see a complete example of the new type definition

    // Get DomComponents module
+var comps = editor.DomComponents;
+
+// Get the model and the view from the default Component type
+var defaultType = comps.getType('default');
+var defaultModel = defaultType.model;
+var defaultView = defaultType.view;
+
+var inputTypes = [
+  {value: 'text', name: 'Text'},
+  {value: 'email', name: 'Email'},
+  {value: 'password', name: 'Password'},
+  {value: 'number', name: 'Number'},
+];
+
+// The `input` will be the Component type ID
+comps.addType('input', {
+  // Define the Model
+  model: defaultModel.extend({
+    // Extend default properties
+    defaults: Object.assign({}, defaultModel.prototype.defaults, {
+      // Can be dropped only inside `form` elements
+      draggable: 'form, form *',
+      // Can't drop other elements inside it
+      droppable: false,
+      // Traits (Settings)
+      traits: ['name', 'placeholder', {
+          // Change the type of the input (text, password, email, etc.)
+          type: 'select',
+          label: 'Type',
+          name: 'type',
+          options: inputTypes,
+        },{
+          // Can make it required for the form
+          type: 'checkbox',
+          label: 'Required',
+          name: 'required',
+      }],
+    }),
+  },
+  // The second argument of .extend are static methods and we'll put inside our
+  // isComponent() method. As you're putting a new Component type on top of the stack,
+  // not declaring isComponent() might probably break stuff, especially if you extend
+  // the default one.
+  {
+    isComponent: function(el) {
+      if(el.tagName == 'INPUT'){
+        return {type: 'input'};
+      }
+    },
+  }),
+
+  // Define the View
+  view: defaultType.view,
+});
+

    The code above is pretty much self-explanatory and as you see a lot of work is basically done on top of the Model properties. +The View is just extending the default one, so to cover also this part let's add some random behavior.

    comps.addType('input', {
+  model: {...},
+  view: defaultType.view.extend({
+    // Bind events
+    events: {
+      // If you want to bind the event to children elements
+      // 'click .someChildrenClass': 'methodName',
+      click: 'handleClick',
+      dblclick: function(){
+        alert('Hi!');
+      }
+    },
+
+    // It doesn't make too much sense this method inside the component
+    // but it's ok as an example
+    randomHex: function() {
+      return '#' + Math.floor(Math.random()*16777216).toString(16);
+    },
+
+    handleClick: function(e) {
+      this.model.set('style', {color: this.randomHex()}); // <- Affects the final HTML code
+      this.el.style.backgroundColor = this.randomHex(); // <- Doesn't affect the final HTML code
+      // Tip: updating the model will reflect the changes to the view, so, in this case,
+      // if you put the model change after the DOM one this will override the backgroundColor
+      // change made before
+    },
+
+    // The render() should return 'this'
+    render: function () {
+      // Extend the original render method
+      defaultType.view.prototype.render.apply(this, arguments);
+      this.el.placeholder = 'Text here'; // <- Doesn't affect the final HTML code
+      return this;
+    },
+  }),
+});
+

    From the example above you can notice few interesting things: how to bind events, how to update directly the DOM and how to update the model. The difference between updating the DOM and the model is that the HTML code (the one you get with editor.getHtml()) is generated from the Model so updating directly the DOM will not affect it, it's just the change for the canvas.

    Update Component type

    Here an example of how easily you can update/override the component

    var originalMap = comps.getType('map');
+
+comps.addType('map', {
+  model: originalMap.model.extend({
+    // Override how the component is rendered to HTML
+    toHTML: function() {
+      return '<div>My Custom Map</div>';
+    },
+  }, {
+    isComponent: function(el) {
+      // ... new logic for isComponent
+		},
+  }),
+  view: originalMap.view
+});
+

    Improvement over addType 0.14.50+

    Now, with the 0.14.50 release, defining new components or extending them is a bit easier (without breaking the old process)

    • If you don't specify the type to extend, the default one will be used. In that case, you just +use objects for model and view
    • The defaults property, in the model, will be merged automatically with defaults of the parent component
    • If you use an object in model you can specify isComponent outside or omit it. In this case, +the isComponent is not mandatory but without it means the parser won't be able to identify the component +if not explicitly declared (eg. <div data-gjs-type="new-component">...</div>)

    Before

    const defaultType = comps.getType('default');
+
+comps.addType('new-component', {
+  model: defaultType.model.extend({
+    defaults: {
+      ...defaultType.model.prototype.defaults,
+      someprop: 'somevalue',
+    },
+    ...
+  }, {
+    // Even if it returns false, declaring isComponent is mandatory
+    isComponent(el) {
+      return false;
+    },
+  }),
+  view: defaultType.view.extend({ ... });
+});
+

    After

    comps.addType('new-component', {
+  // We can even omit isComponent here, as `false` return will be the default behavior
+  isComponent: el => false,
+  model: {
+    defaults: {
+      someprop: 'somevalue',
+    },
+    ...
+  },
+  view: { ... };
+});
+
    • If you need to extend some component, you can use extend and extendView property.
    • You can now omit view property if you don't need to change it

    Before

    const originalMap = comps.getType('map');
+
+comps.addType('map', {
+  model: originalMap.model.extend({
+    ...
+  }, {
+    isComponent(el) {
+      // ... usually, you'd reuse the same logic
+    },
+  }),
+  // Even if I do nothing in view, I have to specify it
+  view: originalMap.view
+});
+

    After

    The map type is already defined, so it will be used as a base for the model and view. +We can skip isComponent if the recognition logic is the same of the extended component.

    comps.addType('map', {
+  model: { ... },
+});
+

    Extend the model and view with some other, already defined, components.

    comps.addType('map', {
+  extend: 'other-defined-component',
+  model: { ... }, // Will extend 'other-defined-component'
+  view: { ... }, // Will extend 'other-defined-component'
+  // `isComponent` will be taken from `map`
+});
+
    comps.addType('map', {
+  extend: 'other-defined-component',
+  model: { ... }, // Will extend 'other-defined-component'
+  extendView: 'other-defined-component-2',
+  view: { ... }, // Will extend 'other-defined-component-2'
+  // `isComponent` will be taken from `map`
+});
+

    Extend parent functions 0.14.60+

    When you need to reuse functions, of the parent you're extending, you can avoid writing something like this in any function:

    domc.getType('parent-type').model.prototype.init.apply(this, arguments);
+

    by using extendFn and extendFnView arrays:

    domc.addType('new-type', {
+  extend: 'parent-type',
+  extendFn: ['init'], // array of model functions to extend
+  model: {
+    init() {
+      // do something;
+    },
+  }
+});
+

    The same would be for the view by using extendFnView

    Lifecycle Hooks

    Each component triggers different lifecycle hooks, which allows you to add custom actions at their specific stages. +We can distinguish 2 different types of hooks: global and local. +You define local hooks when you create/extend a component type (usually via some model/view method) and the reason is to react to an event of that +particular component type. Instead, the global one, will be called indistinctly on any component (you listen to them via editor.on) and you can make +use of them for a more generic use case or also listen to them inside other components.

    Let's see below the flow of all hooks:

    • Local hook: model.init() method, executed once the model of the component is initiliazed
    • Global hook: component:create event, called right after model.init(). The model is passed as an argument to the callback function. +Es. editor.on('component:create', model => console.log('created', model))
    • Local hook: view.init() method, executed once the view of the component is initiliazed
    • Local hook: view.onRender() method, executed once the component is rendered on the canvas
    • Global hook: component:mount event, called right after view.onRender(). The model is passed as an argument to the callback function.
    • Local hook: model.updated() method, executes when some property of the model is updated.
    • Global hook: component:update event, called after model.updated(). The model is passed as an argument to the callback function. +You can also listen to specific property change via component:update:{propertyName}
    • Local hook: model.removed() method, executed when the component is removed.
    • Global hook: component:remove event, called after model.removed(). The model is passed as an argument to the callback function.

    Below you can find an example usage of all the hooks

    editor.DomComponents.addType('test-component', {
+  model: {
+    defaults: {
+      testprop: 1,
+    },
+    init() {
+      console.log('Local hook: model.init');
+      this.listenTo(this, 'change:testprop', this.handlePropChange);
+      // Here we can listen global hooks with editor.on('...')
+    },
+    updated(property, value, prevValue) {
+      console.log('Local hook: model.updated',
+        'property', property, 'value', value, 'prevValue', prevValue);
+    },
+    removed() {
+      console.log('Local hook: model.removed');
+    },
+    handlePropChange() {
+      console.log('The value of testprop', this.get('testprop'));
+    }
+  },
+  view: {
+    init() {
+      console.log('Local hook: view.init');
+    },
+    onRender() {
+      console.log('Local hook: view.onRender');
+    },
+  },
+});
+
+// A block for the custom component
+editor.BlockManager.add('test-component', {
+  label: 'Test Component',
+  content: '<div data-gjs-type="test-component">Test Component</div>',
+});
+
+// Global hooks
+editor.on(`component:create`, model => console.log('Global hook: component:create', model.get('type')));
+editor.on(`component:mount`, model => console.log('Global hook: component:mount', model.get('type')));
+editor.on(`component:update:testprop`, model => console.log('Global hook: component:update:testprop', model.get('type')));
+editor.on(`component:remove`, model => console.log('Global hook: component:remove', model.get('type')));
+

    Components & JS

    If you want to know how to create Components with javascript attached (eg. counters, galleries, slideshows, etc.) check the dedicated page +Components & JS

    Hints

    <div id="gjs">
+ ...
+ <cutom-element></cutom-element>
+ ...
+</div>
+
+<script>
+ var editor = grapesjs.init({
+      container : '#gjs',
+      fromElement: true,
+  });
+
+  editor.DomComponents.addType('cutom-element-type', {...});
+</script>
+

    In the example above the editor will not get the new type from the HTML because the content is already parsed and appended, so it'll get it only with new components (eg. from Blocks)

    Solution 1: turn off autorender

    <script>
+ var editor = grapesjs.init({
+      autorender: 0,
+      container : '#gjs',
+      fromElement: true,
+  });
+
+  editor.DomComponents.addType('cutom-element-type', {...});
+
+  // after all new types
+  editor.render();
+</script>
+

    Solution 2: put all the stuff inside a plugin (Creating plugins)

    Edit this page on GitHub
    Last Updated: 8/13/2019, 5:17:26 PM
    + + + diff --git a/docs/modules/Components.html b/docs/modules/Components.html index ebfa5e72c..7077f8a71 100644 --- a/docs/modules/Components.html +++ b/docs/modules/Components.html @@ -8,9 +8,9 @@ - - - + + +

    For each DOM element (div, img, span, etc.) the editor will create and store an object representation. Every future change to the template will be made on top of this structure, which will then reflect on the canvas. So each object, usually called Model (or state/store), will be the source of truth for the template, but what exactly does that mean?

    In more practical example, once the template is rendered on the canvas, if you try to remove one of its elements (eg. by using the browser inspector) and ask the editor to print the HTML (using editor.getHtml()) you'll see that the element will still be there. This is because the editor relies on Models and not on the DOM elements inside the canvas. This approach allows us to be extremely flexible on how we generate the final code (from the Model) and how to render it inside the canvas (from the View).

    Manage Components

    Component recognition

    But now, how does the editor recognize which Component to bind to the img element and what to do with the span one? Each Component inherits, from the base one, a particular static method

    /**
  * @param {HTMLElement} el
  * @return {Object}
  */
-isComponent: function(el) {
+isComponent: function(el) {
   ...
 }

    This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each HTML string/element introduced inside the canvas will be processed by isComponent of all available types and if it matches, the object represented the type should be returned. The method isComponentis skipped if you add the component object ({ type: 'my-custom-type', tagName: 'div', attribute: {...}, ...}) or declare the type explicitly on the element (<div data-gjs-type="my-custom-type">...</div>)

    For example, with the image component this method looks like:

    // Image component
-isComponent: function(el) {
+isComponent: function(el) {
   if(el.tagName == 'IMG')
     return {type: 'image'};
 }

    Let's try with something that might look a little bit tricky. What about a Google Map?!? Google Maps are generally embedded as iframes, but the template can be composed by a lot of different iframes. How can I tell the editor that a particular iframe is actually a Google's Map? Well, you'll have to figure out the right pattern, you have the HTMLElement so you can make all the checks you want. In this particular case this pattern is used:

    // Map component
-isComponent: function(el) {
+isComponent: function(el) {
 	if(el.tagName == 'IFRAME' && /maps\.google\.com/.test(el.src)) {
 		return {type: 'map', src: el.src};
 	}
@@ -95,7 +95,7 @@ comps.addTyp
   // not declaring isComponent() might probably break stuff, especially if you extend
   // the default one.
   {
-    isComponent: function(el) {
+    isComponent: function(el) {
       if(el.tagName == 'INPUT'){
         return {type: 'input'};
       }
@@ -114,19 +114,19 @@ The View is just extending the default one, so to cover also this part
       // If you want to bind the event to children elements
       // 'click .someChildrenClass': 'methodName',
       click: 'handleClick',
-      dblclick: function(){
+      dblclick: function(){
         alert('Hi!');
       }
     },
 
     // It doesn't make too much sense this method inside the component
     // but it's ok as an example
-    randomHex: function() {
+    randomHex: function() {
       return '#' + Math.floor(Math.random()*16777216).toString(16);
     },
 
-    handleClick: function(e) {
-      this.model.set('style', {color: this.randomHex()}); // <- Affects the final HTML code
+    handleClick: function(e) {
+      this.model.set('style', {color: this.randomHex()}); // <- Affects the final HTML code
       this.el.style.backgroundColor = this.randomHex(); // <- Doesn't affect the final HTML code
       // Tip: updating the model will reflect the changes to the view, so, in this case,
       // if you put the model change after the DOM one this will override the backgroundColor
@@ -134,9 +134,9 @@ The View is just extending the default one, so to cover also this part
     },
 
     // The render() should return 'this'
-    render: function () {
+    render: function () {
       // Extend the original render method
-      defaultType.view.prototype.render.apply(this, arguments);
+      defaultType.view.prototype.render.apply(this, arguments);
       this.el.placeholder = 'Text here'; // <- Doesn't affect the final HTML code
       return this;
     },
@@ -147,11 +147,11 @@ The View is just extending the default one, so to cover also this part
 comps.addType('map', {
   model: originalMap.model.extend({
     // Override how the component is rendered to HTML
-    toHTML: function() {
+    toHTML: function() {
       return '<div>My Custom Map</div>';
     },
   }, {
-    isComponent: function(el) {
+    isComponent: function(el) {
       // ... new logic for isComponent
 		},
   }),
@@ -171,7 +171,7 @@ comps.addTyp
     ...
   }, {
     // Even if it returns false, declaring isComponent is mandatory
-    isComponent(el) {
+    isComponent(el) {
       return false;
     },
   }),
@@ -179,7 +179,7 @@ comps.addTyp
 });

    After

    comps.addType('new-component', {
   // We can even omit isComponent here, as `false` return will be the default behavior
-  isComponent: el => false,
+  isComponent: el => false,
   model: {
     defaults: {
       someprop: 'somevalue',
@@ -194,7 +194,7 @@ comps.addTyp
   model: originalMap.model.extend({
     ...
   }, {
-    isComponent(el) {
+    isComponent(el) {
       // ... usually, you'd reuse the same logic
     },
   }),
@@ -218,7 +218,7 @@ We can skip isComponent if the recognition logic is the same of the
   view: { ... }, // Will extend 'other-defined-component-2'
   // `isComponent` will be taken from `map`
 });
-

    Extend parent functions 0.14.60+

    When you need to reuse functions, of the parent you're extending, you can avoid writing something like this in any function:

    domc.getType('parent-type').model.prototype.init.apply(this, arguments);
+

    Extend parent functions 0.14.60+

    When you need to reuse functions, of the parent you're extending, you can avoid writing something like this in any function:

    domc.getType('parent-type').model.prototype.init.apply(this, arguments);

    by using extendFn and extendFnView arrays:

    domc.addType('new-type', {
   extend: 'parent-type',
   extendFn: ['init'], // array of model functions to extend
@@ -244,7 +244,7 @@ You can also listen to specific property change via component:update:{prop
       this.listenTo(this, 'change:testprop', this.handlePropChange);
       // Here we can listen global hooks with editor.on('...')
     },
-    updated(property, value, prevValue) {
+    updated(property, value, prevValue) {
       console.log('Local hook: model.updated',
         'property', property, 'value', value, 'prevValue', prevValue);
     },
@@ -252,7 +252,7 @@ You can also listen to specific property change via component:update:{prop
       console.log('Local hook: model.removed');
     },
     handlePropChange() {
-      console.log('The value of testprop', this.get('testprop'));
+      console.log('The value of testprop', this.get('testprop'));
     }
   },
   view: {
@@ -272,10 +272,10 @@ editor.BlockManager});
 
 // Global hooks
-editor.on(`component:create`, model => console.log('Global hook: component:create', model.get('type')));
-editor.on(`component:mount`, model => console.log('Global hook: component:mount', model.get('type')));
-editor.on(`component:update:testprop`, model => console.log('Global hook: component:update:testprop', model.get('type')));
-editor.on(`component:remove`, model => console.log('Global hook: component:remove', model.get('type')));
+editor.on(`component:create`, model => console.log('Global hook: component:create', model.get('type')));
+editor.on(`component:mount`, model => console.log('Global hook: component:mount', model.get('type')));
+editor.on(`component:update:testprop`, model => console.log('Global hook: component:update:testprop', model.get('type')));
+editor.on(`component:remove`, model => console.log('Global hook: component:remove', model.get('type')));

    Components & JS

    If you want to know how to create Components with javascript attached (eg. counters, galleries, slideshows, etc.) check the dedicated page Components & JS

    Hints

    <div id="gjs">
  ...
@@ -283,15 +283,15 @@ editor.on</div>
 
-<script>
+<script>
  var editor = grapesjs.init({
       container : '#gjs',
       fromElement: true,
   });
 
   editor.DomComponents.addType('cutom-element-type', {...});
-</script>
-

    In the example above the editor will not get the new type from the HTML because the content is already parsed and appended, so it'll get it only with new components (eg. from Blocks)

    Solution 1: turn off autorender

    <script>
+</script>
+

    In the example above the editor will not get the new type from the HTML because the content is already parsed and appended, so it'll get it only with new components (eg. from Blocks)

    Solution 1: turn off autorender

    <script>
  var editor = grapesjs.init({
       autorender: 0,
       container : '#gjs',
@@ -302,14 +302,14 @@ editor.on// after all new types
   editor.render();
-</script>
-

    Solution 2: put all the stuff inside a plugin (Creating plugins)

    Edit this page on GitHub
    Last Updated: 4/26/2019, 10:31:58 PM

    +</script> +

    Solution 2: put all the stuff inside a plugin (Creating plugins)

    Edit this page on GitHub
    Last Updated: 8/13/2019, 4:52:24 PM

    ← Components & JS →

    - + diff --git a/docs/modules/Plugins.html b/docs/modules/Plugins.html index 2820d9e70..7256acc2b 100644 --- a/docs/modules/Plugins.html +++ b/docs/modules/Plugins.html @@ -8,9 +8,9 @@ - - - + + +

    Plugins

    Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.

    Basic plugin

    The most simple plugins are just functions that are run when the editor is being built.

      function myPlugin(editor){
+

    Plugins

    Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.

    Basic plugin

    The most simple plugins are just functions that are run when the editor is being built.

      function myPlugin(editor){
       editor.BlockManager.add('my-first-block', {
         label: 'Simple block',
         content: '<div class="my-block">This is a simple block</div>',
@@ -47,7 +47,7 @@
   });

    Named plugin

    If you're distributing your plugin globally, you may want to make a named plugin. To keep thing cleaner, so you'll probably get a similar structure:

    /your/path/to/grapesjs.min.js
 /your/path/to/grapesjs-plugin.js
-

    Important: The order that you load files matters. GrapesJS has to be loaded before the plugin. This sets up the grapejs global variable.

    So, in your grapesjs-plugin.js file:

    export default grapesjs.plugins.add('my-plugin-name', (editor, options) => {
+

    Important: The order that you load files matters. GrapesJS has to be loaded before the plugin. This sets up the grapejs global variable.

    So, in your grapesjs-plugin.js file:

    export default grapesjs.plugins.add('my-plugin-name', (editor, options) => {
   /*
   * Here you should rely on GrapesJS APIs, so check 'API Reference' for more info
   * For example, you could do something like this to add some new command:
@@ -55,19 +55,19 @@
   * editor.Commands.add(...);
   */
 })
-

    The name my-plugin-name is an ID of your plugin and you'll use it to tell your editor to grab it.

    Here is a complete generic example:

    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
+

    The name my-plugin-name is an ID of your plugin and you'll use it to tell your editor to grab it.

    Here is a complete generic example:

    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
 <link rel="stylesheet" href="path/to/grapes.min.css">
-<script src="path/to/grapes.min.js"></script>
-<script src="path/to/grapesjs-plugin.js"></script>
+<script src="path/to/grapes.min.js"></script>
+<script src="path/to/grapesjs-plugin.js"></script>
 
 <div id="gjs"></div>
 
-<script type="text/javascript">
+<script type="text/javascript">
   var editor = grapesjs.init({
       container : '#gjs',
       plugins: ['my-plugin-name']
   });
-</script>
+</script>

    Plugins with options

    It's also possible to pass custom parameters to plugins in to make them more flexible.

      var editor = grapesjs.init({
       container : '#gjs',
       plugins: ['my-plugin-name'],
@@ -77,7 +77,7 @@
         }
       }
   });
-

    Inside you plugin you'll get those options via options argument

    export default grapesjs.plugins.add('my-plugin-name', (editor, options) => {
+

    Inside you plugin you'll get those options via options argument

    export default grapesjs.plugins.add('my-plugin-name', (editor, options) => {
   console.log(options);
   //{ customField: 'customValue' }
 })
@@ -100,6 +100,6 @@
           Replace Rich Text Editor
          →
    - + diff --git a/docs/modules/Storage.html b/docs/modules/Storage.html index dda2af259..7d7bbeca5 100644 --- a/docs/modules/Storage.html +++ b/docs/modules/Storage.html @@ -8,9 +8,9 @@ - - - + + +
    @@ -76,7 +76,7 @@ storageManager: : false, }, }); -

    If for any reason you need to get the data from the remote storage you can trigger the load, at any time, manually

    editor.load(res => console.log('Load callback'));
+

    If for any reason you need to get the data from the remote storage you can trigger the load, at any time, manually

    editor.load(res => console.log('Load callback'));

    Similarly, you have the same control over the storing. By default, the autosave is enabled and is triggered by how many changes are made to the template (change it via stepsBeforeSave option). As before, you can disable this behavior and trigger it manually when you need it

    ...
 const editor = grapesjs.init({
   ...
@@ -86,7 +86,7 @@ storageManager: },
 });
 // Call load somewhere
-editor.store(res => console.log('Store callback'));
+editor.store(res => console.log('Store callback'));

    If you need to check changes which yet need to be stored you can use editor.getDirtyCount(). At any, successful, store of the editor, it resets the count.

    Setup the server

    Server configuration might differ for any use case so generally, it's something up to you on how to make it work, but usually, the flow is pretty straightforward. Create two endpoints, one for storing (eg. mydomain.com/store-page/123) and the other one for loading (eg. mydomain.com/load-page/123), you can also create just one and distinguish them via HTTP methods (eg. mydomain.com/page/123, via GET you load the template, with POST you store it). When you store, the editor doesn't expect any particular result but only a valid response from the server (status code 200). When you load the template, return a JSON object with the data you have (don't forget to include the id prefix if it's used)

    {
@@ -115,10 +115,10 @@ editor.StorageManagerload(keys, clb, clbErr) {
+  load(keys, clb, clbErr) {
     const result = {};
 
-    keys.forEach(key => {
+    keys.forEach(key => {
       const value = SimpleStorage[key];
       if (value) {
         result[key] = value;
@@ -135,7 +135,7 @@ editor.StorageManagerstore(data, clb, clbErr) {
+  store(data, clb, clbErr) {
     for (let key in data) {
       SimpleStorage[key] = data[key];
     }
@@ -146,17 +146,17 @@ editor.StorageManager Extend storage
    Among other needs, you might need to use existing storages to create more complex uses. For example, let's say we would like to mix the local and remote storages inside another one. This is how it would look like:
    const sm = editor.StorageManager;
 
 sm.add('local-remote', {
-  store(data, clb, clbErr) {
-    const remote = sm.get('remote');
-    const local = sm.get('local');
+  store(data, clb, clbErr) {
+    const remote = sm.get('remote');
+    const local = sm.get('local');
     // ...
-    remote.store(data, clb, err => {
+    remote.store(data, clb, err => {
       // eg. some error on remote side, store it locally
       local.store(data, clb, clbError);
     });
   },
 
-  load(keys, clb, clbErr) {
+  load(keys, clb, clbErr) {
     // ...
   },
 });
@@ -172,15 +172,15 @@ sm.add});
 
     Examples
    Here you can find some of the plugins extending the Storage Manager
     Events
    Another way to extend storage capabilities is to make use of GrapesJS's event hooks, you can check here the list of all available events for the Storage module. Let's see some of the cases where you might want to use them:
    • Loading animation on storage requests
    editor.on('storage:start', startLoading);
 editor.on('storage:end', endLoading);
-
    • Error handling
    editor.on('storage:error', (err) => {
+
    • Error handling
    editor.on('storage:error', (err) => {
     alert(`Error: ${err}`);
 });
-
    • Extend parameters to store
    editor.on('storage:start:store', (objectToStore) => {
+
    • Extend parameters to store
    editor.on('storage:start:store', (objectToStore) => {
     if (needToAddExtraParam) {
       objectToStore.customHtml = `<div>...${editor.getHtml()}...</div>`;
     }
 });
-
    • Do stuff post load
    editor.on('storage:end:load', (resultObject) => {
+
    • Do stuff post load
    editor.on('storage:end:load', (resultObject) => {
     if (resultObject.hasSomeKey) {
       // do stuff
     }
@@ -192,6 +192,6 @@ editor.on →
    - + diff --git a/docs/modules/Style-manager.html b/docs/modules/Style-manager.html index 1c2810aa2..632a07095 100644 --- a/docs/modules/Style-manager.html +++ b/docs/modules/Style-manager.html @@ -8,9 +8,9 @@ - - - + + + - + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index 6ff7a7824..41cade69f 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -8,9 +8,9 @@ - - - + + +

    Trait Manager

    In GrapesJS, Traits can define different parameters and behaviors of a component. The user generally will see traits as the Settings of a component. A common use of traits is to customize element attributes (eg. placeholder for inputs) and in this case the editor comes already with some built-in, easy configurable, types.

    Built-in trait types

    • text
    • number
    • checkbox
    • select
    • color

    Add Traits to Components

    You can add traits to the component by extending them or while creating a new one. Let's see in this example how to make inputs more customizable by the editor. All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:

    In this example we are going to create a new Component. (Check here for more details about the creation of new components with a new set of traits

    var editor = grapesjs.init({...});
-var domComps = editor.DomComponents;
-var dType = domComps.getType('default');
-var dModel = dType.model;
-var dView = dType.view;
-
-domComps.addType('input', {
-    model: dModel.extend({
-      defaults: Object.assign({}, dModel.prototype.defaults, {
+

    Trait Manager

    In GrapesJS, Traits define different parameters and behaviors of a component. The user generally will see traits as the Settings of a component. A common use of traits is to customize element attributes (eg. placeholder for <input>) or you can also bind them to the properties of your components and react on their changes.

    WARNING

    This guide is referring to GrapesJS v0.15.3 or higher.

    +To get a better understanding of the content in this guide we recommend reading Components first

    Add Traits to Components

    Generally you define traits on the definition of your new custom components (or by extending another one). Let's see in this example how to make inputs more customizable by the editor.

    All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:

    We can start by creating a new custom input component in this way:

    editor.DomComponents.addType('input', {
+    isComponent: el => el.tagName == 'INPUT',
+    model: {
+      defaults: {
         traits: [
-          // strings are automatically converted to text types
-          'name',
+          // Strings are automatically converted to text types
+          'name', // Same as: { type: 'text', name: 'name' }
           'placeholder',
           {
-            type: 'select',
-            label: 'Type',
-            name: 'type',
+            type: 'select', // Type of the trait
+            label: 'Type', // The label you will see in Settings
+            name: 'type', // The name of the attribute/property to use on component
             options: [
-              {value: 'text', name: 'Text'},
-              {value: 'email', name: 'Email'},
-              {value: 'password', name: 'Password'},
-              {value: 'number', name: 'Number'},
+              { id: 'text', name: 'Text'},
+              { id: 'email', name: 'Email'},
+              { id: 'password', name: 'Password'},
+              { id: 'number', name: 'Number'},
             ]
           }, {
             type: 'checkbox',
-            label: 'Required',
             name: 'required',
         }],
-      }),
-    }, {
-      isComponent: function(el) {
-        if(el.tagName == 'INPUT'){
-          return {type: 'input'};
+        // As by default, traits are binded to attributes, so to define
+        // their initial value we can use attributes
+        attributes: { type: 'text', required: true },
+      },
+    },
+});
+

    Now the result will be

    If you want you can also define traits dynamically via functions, which will be created on component initialization. It might be useful if you need to create traits based on some other component characteristic.

    editor.DomComponents.addType('input', {
+    isComponent: el => el.tagName == 'INPUT',
+    model: {
+      defaults: {
+        traits(component) {
+          const result = [];
+
+          // Example of some logic
+          if (component.get('draggable')) {
+            result.push('name');
+          } else {
+            result.push({
+              type: 'select',
+              // ....
+            });
+          }
+
+          return result;
         }
       },
-    }),
+    },
+});
+

    If you need to react to some change of the trait you can subscribe to their attribute listeners

    editor.DomComponents.addType('input', {
+  model: {
+    defaults: {
+      // ...
+    },
+
+    init() {
+      this.on('change:attributes:type', this.handleTypeChange);
+    },
+
+    handleTypeChange() {
+      console.log('Input type changed to: ', this.getAttributes().type);
+    },
+  }
+})
+

    As already mentioned, by default, traits modify attributes of the model, but you can also bind them to the properties by using changeProp options.

    editor.DomComponents.addType('input', {
+  model: {
+    defaults: {
+      // ...
+      traits: [
+        {
+          name: 'placeholder',
+          changeProp: 1,
+        }
+        // ...
+      ],
+      // As we switched from attributes to properties the
+      // initial value should be set from the property
+      placeholder: 'Initial placeholder',
+    },
 
-    view: dView,
+    init() {
+      // Also the listener changes from `change:attributes:*` to `change:*`
+      this.on('change:placeholder', this.handlePlhChange);
+    },
+    // ...
+  }
+})
+

    Built-in trait types

    GrapesJS comes along with few built-in types that you can use to define your traits:

    Text

    Simple text input

    {
+  type: 'text', // If you don't specify the type, the `text` is the default one
+  name: 'my-trait', // Required and available for all traits
+  label: 'My trait', // The label you will see near the input
+  // label: false, // If you set label to `false`, the label column will be removed
+  placeholder: 'Insert text', // Placeholder to show inside the input
+}
+

    Number

    Input for numbers

    {
+  type: 'number',
+  // ...
+  placeholder: '0-100',
+  min: 0, // Minimum number value
+  max: 100, // Maximum number value
+  step: 5, // Number of steps
+}
+

    Checkbox

    Simple checkbox input

    {
+  type: 'checkbox',
+  // ...
+  valueTrue: 'YES', // Value to assign when is checked, default: `true`
+  valueFalse: 'NO', // Value to assign when is unchecked, default: `false`
+}
+

    Select

    Select input with options

    {
+  type: 'select',
+  // ...
+  options: [ // Array of options
+    { id: 'opt1', name: 'Option 1'},
+    { id: 'opt2', name: 'Option 2'},
+  ]
+}
+

    Color

    Color picker

    {
+  type: 'color',
+  // ...
+}
+

    Button

    Button with a command to assign

    {
+  type: 'button',
+  // ...
+  text: 'Click me',
+  full: true, // Full width button
+  command: editor => alert('Hello'),
+  // or you can just specify the Command ID
+  command: 'some-command',
+
+}
+

    Updating traits at run-time

    If you need to change some trait on your component you can update it wherever you want by using Component API

    The trait is a simple property of the component so to get the complete list of current traits you can use this:

    const component = editor.getSelected(); // Component selected in canvas
+const traits = component.get('traits');
+traits.forEach(trait => console.log(trait.props()))
+

    In case you need a single one:

    const component = editor.getSelected();
+console.log(component.getTrait('type').props()); // Finds by the `name` of the trait
+

    If you want, for example, updating some property of the trait, do this:

    // Let's update `options` of our `type` trait, defined in Input component
+const component = editor.getSelected();
+component.getTrait('type').set('options', [
+  { id: 'opt1', name: 'New option 1'},
+  { id: 'opt2', name: 'New option 2'},
+]);
+// or with multiple values
+component.getTrait('type').set({
+  label: 'My type',
+  options: [...],
 });
-

    Now the result will be

    Traits modify attributes of the model (which than reflected in canvas), but you can also have traits which change the property

    ...
-traits: [{
-    type: 'text',
-    label: 'Test',
-    name: 'model-prop-name',
-    changeProp: 1,
-}],
-...
-

    In this way you're able to listen for changes and react with your own logic

    editor.DomComponents.addType('input', {
-    model: dModel.extend({
-      init() {
-        this.listenTo(this, 'change:model-prop-name', this.doStuff);
-      },
+

    You can also easily add new traits or remove some other by using addTrait/removeTrait

    // Add new trait
+const component = editor.getSelected();
+component.addTrait({
+  name: 'type',
+  ...
+}, { at: 0 });
+// The `at` option indicates the index where to place the new trait,
+// without it, the trait will be appended at the end of the list
+
+// Remove trait
+component.removeTrait('type');
+

    Define new Trait type

    Generally, for most of the cases, default types are enough, but sometimes you might need something more. +In that case, you can define a totally new type of trait and bind any kind of element to it.

    Create element

    Let's update the default link Component with a new kind of trait. This is the default situation of traits for a simple link.

    Let's just replace all of its traits with a new one, href-next, which will allow the user to select the type of href (eg. 'url', 'email', etc.)

    // Update component
+editor.DomComponents.addType('link', {
+  model: {
+    defaults: {
+      traits: [
+        {
+          type: 'href-next',
+          name: 'href',
+          label: 'New href',
+        },
+      ]
+    }
+  }
+});
+

    Now you'll see a simple text input because we have not yet defined our new trait type, so let's do it:

    editor.TraitManager.addType('href-next', {
+  // Expects as return a simple HTML string or an HTML element
+  createInput({ trait }) {
+    // Here we can decide to use properties from the trait
+    const traitOpts = trait.get('options') || [];
+    const options = traitOpts.lenght ? traitOpts : [
+      { id: 'url', name: 'URL' },
+      { id: 'email', name: 'Email' },
+    ];
+
+    // Create a new element container and add some content
+    const el = document.createElement('div');
+    el.innerHTML = `
+      <select class="href-next__type">
+        ${options.map(opt => `<option value="${opt.id}">${opt.name}</option>`).join('')}
+      </select>
+      <div class="href-next__url-inputs">
+        <input class="href-next__url" placeholder="Insert URL"/>
+      </div>
+      <div class="href-next__email-inputs">
+        <input class="href-next__email" placeholder="Insert email"/>
+        <input class="href-next__email-subject" placeholder="Insert subject"/>
+      </div>
+    `;
 
-      doStuff() {}
-    }),
-    ...
+    // Let's make our content interactive
+    const inputsUrl = el.querySelector('.href-next__url-inputs');
+    const inputsEmail = el.querySelector('.href-next__email-inputs');
+    const inputType = el.querySelector('.href-next__type');
+    inputType.addEventListener('change', ev => {
+      switch (ev.target.value) {
+        case 'url':
+          inputsUrl.style.display = '';
+          inputsEmail.style.display = 'none';
+          break;
+        case 'email':
+          inputsUrl.style.display = 'none';
+          inputsEmail.style.display = '';
+          break;
+      }
+    });
+
+    return el;
+  },
 });
-

    Define new Trait type

    If built-in types are not enough (eg. something with more complex UI) you can define a new one. -Let's see this simple textarea element which updates contents of the component.

    // Each new type extends the default Trait
-editor.TraitManager.addType('content', {
-  events:{
-    'keyup': 'onChange',  // trigger parent onChange method on keyup
+

    From the example above we simply created our custom inputs (by giving also the possibility to use option trait property) and defined some input switch behavior on the type change. Now the result would be something like this

    Update layout

    Before going forward and making our trait work let's talk about the layout structure of a trait. You might have noticed that the trait is composed by the label and input columns, for this reason, GrapesJS allows you to customize both of them.

    For the label customization you might use createLabel

    editor.TraitManager.addType('href-next', {
+  // Expects as return a simple HTML string or an HTML element
+  createLabel({ label }) {
+    return `<div>
+      <div>Before</div>
+      ${label}
+      <div>After</div>
+    </div>`;
   },
+  // ...
+});
+

    You've probably seen already that in trait definition you can setup label: false to completely remove the label column, but in case you need to force this behavior in all instances of this trait type you can use noLabel property

    editor.TraitManager.addType('href-next', {
+  noLabel: true,
+  // ...
+});
+

    You might also notice that by default GrapesJS applies kind of a wrapper around your inputs, generally is ok for simple inputs but probably is not what you need where you're creating a complex custom trait. To remove the default wrapper you can use the templateInput option

    editor.TraitManager.addType('href-next', {
+  // Completely remove the wrapper
+  templateInput: '',
+  // Use a new one, by specifying with `data-input` attribute where to place the input container
+  templateInput: `<div class="custom-input-wrapper">
+    Before input
+    <div data-input></div>
+    After input
+  </div>`,
+  // It might also be a function, expects an HTML string as the result
+  templateInput({ trait }) {
+    return '<div ...';
+  },
+});
+

    In this case, the result will be quite raw and unstyled but the point of custom trait types is to allow you to reuse your own styled inputs, probably already designed and defined (or implemented in some UI framework). +For now, let's keep the default input wrapper and continue with the integration of our custom trait.

    Bind to component

    At the current state, our element created in createInput is not binded to the component so nothing happens when you update inputs, so let's do it now

    editor.TraitManager.addType('href-next', {
+  // ...
+
+  // Update the component based on element changes
+  // `elInput` is the result HTMLElement you get from `createInput`
+  onEvent({ elInput, component, event }) {
+    const inputType = elInput.querySelector('.href-next__type');
+    let href = '';
 
-  /**
-  * Returns the input element
-  * @return {HTMLElement}
-  */
-  getInputEl: function() {
-    if (!this.inputEl) {
-      var input = document.createElement('textarea');
-      input.value = this.target.get('content');
-      this.inputEl = input;
+    switch (inputType.value) {
+      case 'url':
+        const valUrl = elInput.querySelector('.href-next__url').value;
+        href = valUrl;
+        break;
+      case 'email':
+        const valEmail = elInput.querySelector('.href-next__email').value;
+        const valSubj = elInput.querySelector('.href-next__email-subject').value;
+        href = `mailto:${valEmail}${valSubj ? `?subject=${valSubj}` : ''}`;
+        break;
     }
-    return this.inputEl;
+
+    component.addAttributes({ href })
   },
+});
+

    Now, most of the stuff should already work (you can update the trait and check the HTML in code preview). You might wonder how the editor captures the input change and how is possible to control it. +By default, the base trait wrapper applies a listener on change event and calls onEvent on any captured event (to be captured the event should be able to bubble). If you want, for example, to update the component on input event you can change the eventCapture property

    editor.TraitManager.addType('href-next', {
+  eventCapture: ['input'], // you can use multiple events in the array
+  // ...
+});
+

    The last thing, you might have noticed the wrong initial render of our trait, where inputs are not populated in case of already defined href attribute. This step should be done in onUpdate method

    editor.TraitManager.addType('href-next', {
+  // ...
 
-  /**
-   * Triggered when the value of the model is changed
-   */
-  onValueChange: function () {
-    this.target.set('content', this.model.get('value'));
-  }
+  // Update elements on the component change
+  onUpdate({ elInput, component }) {
+    const href = component.getAttributes().href || '';
+    const inputType = elInput.querySelector('.href-next__type');
+    let type = 'url';
+
+    if (href.indexOf('mailto:') === 0) {
+      const inputEmail = elInput.querySelector('.href-next__email');
+      const inputSubject = elInput.querySelector('.href-next__email-subject');
+      const mailTo = href.replace('mailto:', '').split('?');
+      const email = mailTo[0];
+      const params = (mailTo[1] || '').split('&').reduce((acc, item) => {
+        const items = item.split('=');
+        acc[items[0]] = items[1];
+        return acc;
+      }, {});
+      type = 'email';
+
+      inputEmail.value = email || '';
+      inputSubject.value = params.subject || '';
+    } else {
+      elInput.querySelector('.href-next__url').value = href;
+    }
+
+    inputType.value = type;
+    inputType.dispatchEvent(new CustomEvent('change'));
+  },
 });
+

    Now the trait will update even on component change like:

    editor.getSelected().addAttributes({ href: 'mailto:new-email@test.com?subject=NewSubject' })
+

    To recap what we have done so far, to create a custom trait type all you will need are 3 methods:

    • createInput - Where we define our custom HTML element
    • onEvent - How to update the component on inputs changes
    • onUpdate - How to update inputs on component changes

    Result

    The final result of what we have done can be seen here +

    Integrate external UI components

    By looking at the example above might seems like a lot of code, but at the end, it's just about a little bit of logic and the native DOM API which is not super pretty. If you use a modern UI client framework (eg. Vue, React, etc.) you could see that the integration is even easier. There is how it would be integrating a custom Vue Slider Component as a trait

    editor.TraitManager.addType('slider', {
+  createInput({ trait }) {
+    const vueInst = new Vue({ render: h => h(VueSlider) }).$mount();
+    const sliderInst = vueInst.$children[0];
+    sliderInst.$on('change', ev => this.onChange(ev)); // Use onChange to trigger onEvent
+    this.sliderInst = sliderInst;
+    return vueInst.$el;
+  },
 
-// And then use it in your component
-...
-traits: [{
-    type: 'content',
-}],
-...
-
    Edit this page on GitHub
    Last Updated: 12/26/2018, 7:29:34 PM

    + onEvent({ component }) { + const value = this.sliderInst.getValue() || 0; + component.addAttributes({ value }); + }, + + onUpdate({ component }) { + const value = component.getAttributes().value || 0; + this.sliderInst.setValue(value); + }, +}); +

    The integration with external components is possible by following these simple core points:

    1. Component rendering: new Vue({ render: ...
      +Depends on the framework, for example, in React it should be ReactDOM.render(element, ...
    2. Change propogation: sliderInst.$on('change', ev => this.onChange(ev))
      +The framework should have a mechanism to subscribe to changes and the component should expose that change
      +We've also used onChange method which comes handy when you need to trigger manually the onEvent event (you should never call directly onEvent method, but only via onChange when you need)
    3. Property getters/setters: sliderInst.getValue()/ sliderInst.setValue(value)
      +The component should allow to read and write data from the instance
    Edit this page on GitHub
    Last Updated: 8/13/2019, 5:59:17 PM

    ← Style Manager →

    - +