From 65712f7f3b8906d409a9bf2ae7bcbe52b8a3e9b8 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sun, 26 Aug 2018 14:20:07 +0200 Subject: [PATCH] deploy docs --- docs/404.html | 8 +- docs/Home.html | 8 +- docs/api/assets.html | 12 +- docs/api/block_manager.html | 8 +- docs/api/canvas.html | 57 ++++++++ docs/api/commands.html | 25 +++- docs/api/component.html | 126 ++++++++++++++++++ docs/api/components.html | 12 +- docs/api/css_composer.html | 8 +- docs/api/device_manager.html | 8 +- docs/api/editor.html | 12 +- docs/api/index.html | 8 +- docs/api/keymaps.html | 8 +- docs/api/modal_dialog.html | 15 ++- docs/api/panels.html | 12 +- docs/api/rich_text_editor.html | 8 +- docs/api/selector_manager.html | 8 +- docs/api/storage_manager.html | 8 +- docs/api/style_manager.html | 8 +- docs/api/undo_manager.html | 8 +- docs/assets/css/0.styles.680773b3.css | 1 - docs/assets/css/0.styles.82db7b1e.css | 1 + docs/assets/js/1.4c1eabe5.js | 1 - docs/assets/js/10.d8cb5231.js | 1 + .../js/{29.38c333a6.js => 11.69c18b86.js} | 2 +- .../js/{28.14c2ddb7.js => 12.f79c3787.js} | 2 +- .../js/{27.8c514210.js => 13.3373dd40.js} | 2 +- docs/assets/js/14.8a2ce59f.js | 1 + .../js/{25.51945ea0.js => 15.483a1808.js} | 2 +- docs/assets/js/16.b70b4495.js | 1 + docs/assets/js/17.a1692f8c.js | 1 + docs/assets/js/18.b4dfc6ac.js | 1 - docs/assets/js/18.f2013e09.js | 1 + .../js/{23.95e202fd.js => 19.73ad3cbf.js} | 2 +- docs/assets/js/2.913089f8.js | 1 - docs/assets/js/2.e0710957.js | 1 + .../js/{22.fbaff709.js => 20.75ba97b9.js} | 2 +- .../js/{21.5afad075.js => 21.f8fdd45a.js} | 2 +- .../js/{20.0f79fdeb.js => 22.4baf2121.js} | 2 +- .../js/{19.91169ac8.js => 23.2c2b779d.js} | 2 +- docs/assets/js/24.4fed3e13.js | 1 - docs/assets/js/24.e9c83a5a.js | 1 + .../js/{17.322b5a49.js => 25.93c8f5c4.js} | 2 +- docs/assets/js/26.685b07a3.js | 1 - .../js/{16.89382312.js => 26.70b77d4d.js} | 2 +- .../js/{15.6ee7f49c.js => 27.93b9607a.js} | 2 +- .../js/{14.78680387.js => 28.ac3dfe4c.js} | 2 +- .../js/{13.f5710b12.js => 29.995a1085.js} | 2 +- docs/assets/js/3.ea5de9c2.js | 1 - docs/assets/js/3.f559383d.js | 1 + docs/assets/js/30.16f00928.js | 1 - .../js/{12.aff1f64d.js => 30.d85f40d0.js} | 2 +- docs/assets/js/31.6be64816.js | 1 - .../js/{11.1feb9616.js => 31.f51ca3b9.js} | 2 +- docs/assets/js/32.4ae7d1c2.js | 1 - .../js/{10.4e962f3e.js => 32.5594c9d1.js} | 2 +- docs/assets/js/33.859da3a2.js | 1 + docs/assets/js/33.de44a98d.js | 1 - docs/assets/js/34.7c6fa057.js | 1 - docs/assets/js/34.b904af9e.js | 1 + docs/assets/js/35.99bf53ef.js | 1 + docs/assets/js/35.a1820a66.js | 1 - docs/assets/js/36.22571463.js | 1 + docs/assets/js/36.850684b6.js | 1 - docs/assets/js/37.53626b6c.js | 1 + docs/assets/js/37.91f76ccf.js | 1 - docs/assets/js/38.8b6b5d30.js | 1 + docs/assets/js/38.9e9e0a77.js | 1 - docs/assets/js/39.5e641478.js | 1 + docs/assets/js/4.04400a55.js | 1 + docs/assets/js/4.beae289b.js | 1 - docs/assets/js/40.57ed0411.js | 1 + docs/assets/js/41.2630bc80.js | 1 + docs/assets/js/5.3707b160.js | 1 + docs/assets/js/5.8085c569.js | 1 - docs/assets/js/6.18d0c9cd.js | 1 + docs/assets/js/6.a2b96fcb.js | 1 - docs/assets/js/7.404a3812.js | 1 - docs/assets/js/7.c350e425.js | 1 + docs/assets/js/8.1b58d36f.js | 1 + docs/assets/js/8.bab4a56f.js | 1 - docs/assets/js/9.50c3291f.js | 1 - docs/assets/js/9.5d43eed5.js | 1 + docs/assets/js/app.6dd0a6a0.js | 8 ++ docs/assets/js/app.cb65ab74.js | 8 -- docs/faq.html | 8 +- docs/getting-started.html | 8 +- docs/guides/Replace-Rich-Text-Editor.html | 8 +- docs/index.html | 10 +- docs/modules/Assets.html | 8 +- docs/modules/Blocks.html | 8 +- docs/modules/Components-js.html | 8 +- docs/modules/Components.html | 8 +- docs/modules/Plugins.html | 48 +++++-- docs/modules/Storage.html | 8 +- docs/modules/Style-manager.html | 10 +- docs/modules/Traits.html | 8 +- 97 files changed, 415 insertions(+), 188 deletions(-) create mode 100644 docs/api/canvas.html create mode 100644 docs/api/component.html delete mode 100644 docs/assets/css/0.styles.680773b3.css create mode 100644 docs/assets/css/0.styles.82db7b1e.css delete mode 100644 docs/assets/js/1.4c1eabe5.js create mode 100644 docs/assets/js/10.d8cb5231.js rename docs/assets/js/{29.38c333a6.js => 11.69c18b86.js} (99%) rename docs/assets/js/{28.14c2ddb7.js => 12.f79c3787.js} (56%) rename docs/assets/js/{27.8c514210.js => 13.3373dd40.js} (86%) create mode 100644 docs/assets/js/14.8a2ce59f.js rename docs/assets/js/{25.51945ea0.js => 15.483a1808.js} (99%) create mode 100644 docs/assets/js/16.b70b4495.js create mode 100644 docs/assets/js/17.a1692f8c.js delete mode 100644 docs/assets/js/18.b4dfc6ac.js create mode 100644 docs/assets/js/18.f2013e09.js rename docs/assets/js/{23.95e202fd.js => 19.73ad3cbf.js} (99%) delete mode 100644 docs/assets/js/2.913089f8.js create mode 100644 docs/assets/js/2.e0710957.js rename docs/assets/js/{22.fbaff709.js => 20.75ba97b9.js} (99%) rename docs/assets/js/{21.5afad075.js => 21.f8fdd45a.js} (98%) rename docs/assets/js/{20.0f79fdeb.js => 22.4baf2121.js} (99%) rename docs/assets/js/{19.91169ac8.js => 23.2c2b779d.js} (98%) delete mode 100644 docs/assets/js/24.4fed3e13.js create mode 100644 docs/assets/js/24.e9c83a5a.js rename docs/assets/js/{17.322b5a49.js => 25.93c8f5c4.js} (99%) delete mode 100644 docs/assets/js/26.685b07a3.js rename docs/assets/js/{16.89382312.js => 26.70b77d4d.js} (99%) rename docs/assets/js/{15.6ee7f49c.js => 27.93b9607a.js} (99%) rename docs/assets/js/{14.78680387.js => 28.ac3dfe4c.js} (99%) rename docs/assets/js/{13.f5710b12.js => 29.995a1085.js} (99%) delete mode 100644 docs/assets/js/3.ea5de9c2.js create mode 100644 docs/assets/js/3.f559383d.js delete mode 100644 docs/assets/js/30.16f00928.js rename docs/assets/js/{12.aff1f64d.js => 30.d85f40d0.js} (99%) delete mode 100644 docs/assets/js/31.6be64816.js rename docs/assets/js/{11.1feb9616.js => 31.f51ca3b9.js} (60%) delete mode 100644 docs/assets/js/32.4ae7d1c2.js rename docs/assets/js/{10.4e962f3e.js => 32.5594c9d1.js} (99%) create mode 100644 docs/assets/js/33.859da3a2.js delete mode 100644 docs/assets/js/33.de44a98d.js delete mode 100644 docs/assets/js/34.7c6fa057.js create mode 100644 docs/assets/js/34.b904af9e.js create mode 100644 docs/assets/js/35.99bf53ef.js delete mode 100644 docs/assets/js/35.a1820a66.js create mode 100644 docs/assets/js/36.22571463.js delete mode 100644 docs/assets/js/36.850684b6.js create mode 100644 docs/assets/js/37.53626b6c.js delete mode 100644 docs/assets/js/37.91f76ccf.js create mode 100644 docs/assets/js/38.8b6b5d30.js delete mode 100644 docs/assets/js/38.9e9e0a77.js create mode 100644 docs/assets/js/39.5e641478.js create mode 100644 docs/assets/js/4.04400a55.js delete mode 100644 docs/assets/js/4.beae289b.js create mode 100644 docs/assets/js/40.57ed0411.js create mode 100644 docs/assets/js/41.2630bc80.js create mode 100644 docs/assets/js/5.3707b160.js delete mode 100644 docs/assets/js/5.8085c569.js create mode 100644 docs/assets/js/6.18d0c9cd.js delete mode 100644 docs/assets/js/6.a2b96fcb.js delete mode 100644 docs/assets/js/7.404a3812.js create mode 100644 docs/assets/js/7.c350e425.js create mode 100644 docs/assets/js/8.1b58d36f.js delete mode 100644 docs/assets/js/8.bab4a56f.js delete mode 100644 docs/assets/js/9.50c3291f.js create mode 100644 docs/assets/js/9.5d43eed5.js create mode 100644 docs/assets/js/app.6dd0a6a0.js delete mode 100644 docs/assets/js/app.cb65ab74.js diff --git a/docs/404.html b/docs/404.html index 7c0fd7d9e..0381a9749 100644 --- a/docs/404.html +++ b/docs/404.html @@ -9,11 +9,11 @@ - - + + -

404

How did we get here?
Take me home.
- +

404

That's a Four-Oh-Four.
Take me home.
+ diff --git a/docs/Home.html b/docs/Home.html index 05d386cb5..6159c05f2 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -9,8 +9,8 @@ - - + +
@@ -27,7 +27,7 @@ Twitter
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">
+

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>
 
 <div id="gjs"></div>
@@ -330,6 +330,6 @@ The default one is the localStorage which is pretty simple and all the data are
   }
 ...

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 1cf71c2c0..e1dec0d6a 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -9,8 +9,8 @@ - - + +

AssetManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
+

AssetManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
  assetManager: {
    // options
  }
@@ -74,12 +74,12 @@ passed entity
: (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

- ← Block Manager →

- + diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index bd32961b1..051f52086 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -9,8 +9,8 @@ - - + +

BlockManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
+

BlockManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
  blockManager: {
    // options
  }
@@ -76,6 +76,6 @@ blockManager. →
- + diff --git a/docs/api/canvas.html b/docs/api/canvas.html new file mode 100644 index 000000000..fb35c476d --- /dev/null +++ b/docs/api/canvas.html @@ -0,0 +1,57 @@ + + + + + + GrapesJS + + + + + + + + + +
+ GrapesJS +

Canvas

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
+ canvas: {
+   // options
+ }
+})
+

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){
+ return component.getName();
+});
+

hasFocus

Check if the canvas is focused

Returns Boolean

scrollTo

Scroll canvas to the element if it's not visible. The scrolling is +executed via scrollIntoView API and options of this method are +passed to it. For instance, you can scroll smoothly by using +{ behavior: 'smooth' }.

Parameters

  • el(HTMLElement | Component)
  • optsObject Options, same as options for scrollIntoView (optional, default {}) +
    • opts.forceBoolean Force the scroll, even if the element is already visible (optional, default false)

Examples

const selected = editor.getSelected();
+// Scroll smoothly (this behavior can be polyfilled)
+canvas.scrollTo(selected, { behavior: 'smooth' });
+// Force the scroll, even if the element is alredy visible
+canvas.scrollTo(selected, { force: true });
+
Edit this page on GitHub
Last Updated: 8/10/2018, 12:36:09 AM

+ ← + Asset Manager + → +

+ + + diff --git a/docs/api/commands.html b/docs/api/commands.html index 129e4ae13..3266c3bd4 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -9,8 +9,8 @@ - - + +

Commands

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
+

Commands

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
  commands: {
    // options
  }
 })

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

const commands = editor.Commands;
-

add

Add new command to the collection

Parameters

add

Add new command to the collection

Parameters

  • idstring Command's ID
  • command(Object | Function) Object representing your command, By passing just a function it's intended as a stateless command (just like passing an object with only run method).

Examples

commands.add('myCommand', {
 	run(editor, sender) {
@@ -46,13 +46,26 @@ By passing just a function it's intended as a stateless command
 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

has

Check if command exists

Parameters

Returns Boolean

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

+

Returns Object Object representing the command

has

Check if command exists

Parameters

Returns Boolean

getAll

Get an object containing all the commands

Returns Object

run

Execute the command

Parameters

  • idString Command ID
  • optionsObject Options (optional, default {})

Examples

commands.run('myCommand', { someOption: 1 });
+

Returns any The return is defined by the command

stop

Stop the command

Parameters

  • idString Command ID
  • optionsObject Options (optional, default {})

Examples

commands.stop('myCommand', { someOption: 1 });
+

Returns any The return is defined by the command

isActive

Check if the command is active. You activate commands with run +and disable them with stop. If the command was created without stop +method it can't be registered as active

Parameters

Examples

const cId = 'some-command';
+commands.run(cId);
+commands.isActive(cId);
+// -> true
+commands.stop(cId);
+commands.isActive(cId);
+// -> 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/10/2018, 12:36:09 AM

← DOM Components →

- + diff --git a/docs/api/component.html b/docs/api/component.html new file mode 100644 index 000000000..268ad6de1 --- /dev/null +++ b/docs/api/component.html @@ -0,0 +1,126 @@ + + + + + + GrapesJS + + + + + + + + + +
+ GrapesJS +

Component

The Component object represents a single node of our template structure, so when you update its properties the changes are +immediatly 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({
+ tagName: 'span',
+ attributes: { ... },
+ removable: false,
+});
+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, +eg. '.some-class[title=Hello], [data-gjs-type=column]' means you can drag the component only inside elements +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: []
  • 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. +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

is

Check component's type

Parameters

Examples

component.is('image')
+// -> false
+

Returns Boolean

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

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');
+// -> Component
+

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

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');
+model.setClass('class1 class2');
+model.setClass(['class1', 'class2']);
+// -> [SelectorObject, ...]
+

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

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
+// 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
+component.components('<span></span><div></div>');
+// Get current collection
+const collection = component.components();
+console.log(collection.length);
+// -> 2
+

Returns (Collection | Array<Component>)

parent

Get the parent component, if exists

Examples

component.parent();
+// -> Component
+

Returns Component

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.setAttributes({ title: 'Hello' });
+component.toHTML();
+// -> <span title="Hello"></span>
+
+// Custom attributes
+component.toHTML({ attributes: { 'data-test': 'Hello' } });
+// -> <span data-test="Hello"></span>
+
+// Custom dynamic attributes
+component.toHTML({
+ 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. This works only of the +component is already rendered

Returns HTMLElement

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

Edit this page on GitHub
Last Updated: 8/13/2018, 2:12:15 PM

+ ← + Panels + → +

+ + + diff --git a/docs/api/components.html b/docs/api/components.html index cbfd043fa..9199a5e24 100644 --- a/docs/api/components.html +++ b/docs/api/components.html @@ -9,8 +9,8 @@ - - + +

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
  }
@@ -80,10 +80,10 @@ the all new components will be added automatically and property changes are all
 updated immediately
Returns HTMLElement
 clear
Remove all components
Returns this
Edit this page on GitHub
Last Updated: 7/8/2018, 1:46:22 PM

← - Panels + + - Component →

- + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index 3f44cf824..614e39484 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -9,8 +9,8 @@ - - + +

CssComposer

This module contains and manage CSS rules for the template inside the canvas. +

CssComposer

This module contains and manage CSS rules for the template 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({
  cssComposer: {
    // options
@@ -74,6 +74,6 @@ rule.set →
- + diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html index c156e3877..021b66a6d 100644 --- a/docs/api/device_manager.html +++ b/docs/api/device_manager.html @@ -9,8 +9,8 @@ - - + +

DeviceManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
+

DeviceManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
  deviceManager: {
    // options
  }
@@ -51,6 +51,6 @@ console.log<
           Selector Manager
          →
- + diff --git a/docs/api/editor.html b/docs/api/editor.html index 4c9055e0e..64a5b92d0 100644 --- a/docs/api/editor.html +++ b/docs/api/editor.html @@ -9,8 +9,8 @@ - - + +

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
 });
@@ -106,10 +106,10 @@ This count resets at any store()
Returns  on
Attach event
 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: 7/9/2018, 12:48:25 AM

← - Asset Manager + + Canvas →

- + diff --git a/docs/api/index.html b/docs/api/index.html index 243d4fa32..3561efec3 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -9,8 +9,8 @@ - - + +

API Reference

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 create a plugin and make those extensions reusable and available to others.

Edit this page on GitHub
Last Updated: 7/9/2018, 1:03:59 AM

+

API Reference

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 create a plugin and make those extensions reusable and available to others.

Edit this page on GitHub
Last Updated: 7/9/2018, 1:03:59 AM

Editor →

- + diff --git a/docs/api/keymaps.html b/docs/api/keymaps.html index 12e33b893..fcd8167fe 100644 --- a/docs/api/keymaps.html +++ b/docs/api/keymaps.html @@ -9,8 +9,8 @@ - - + +

Keymaps

You can customize the initial state of the module from the editor initialization

const editor = grapesjs.init({
+

Keymaps

You can customize the initial state of the module from the editor initialization

const editor = grapesjs.init({
  keymaps: {
     // Object of keymaps
    defaults: {
@@ -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 36f51f21d..79551f9da 100644
--- a/docs/api/modal_dialog.html
+++ b/docs/api/modal_dialog.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
const editor = grapesjs.init({
+    
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
const editor = grapesjs.init({
  modal: {
    // options
  }
 })
 
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
const modal = editor.Modal;
-
 open
Open the modal window
Returns this
 close
Close the modal window
Returns this
 isOpen
Checks if the modal window is open
Returns Boolean
 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: 7/8/2018, 11:47:37 PM

+

open

Open the modal window

Parameters

Returns this

close

Close the modal window

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

← Rich Text Editor →

- + diff --git a/docs/api/panels.html b/docs/api/panels.html index 930eea51f..225042f6f 100644 --- a/docs/api/panels.html +++ b/docs/api/panels.html @@ -9,8 +9,8 @@ - - + +

Panels

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
+

Panels

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
  panels: {
    // options
  }
@@ -81,12 +81,12 @@ command: func
 const removedButton = panelManager.removeButton('myNewPanel','myNewButton');

Returns (Button | null) Removed button.

getButton

Get button from the panel

Parameters

Examples

var button = panelManager.getButton('myPanel','myButton');

Returns (Button | null)

Edit this page on GitHub
Last Updated: 7/14/2018, 3:19:12 AM

- ← Style Manager →

- + diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html index 3661369aa..2d69c8a79 100644 --- a/docs/api/rich_text_editor.html +++ b/docs/api/rich_text_editor.html @@ -9,8 +9,8 @@ - - + +

RichTextEditor

This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the HTML Editing APIs. +

RichTextEditor

This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the HTML Editing APIs. It's highly recommended to keep this toolbar as small as possible, especially from styling commands (eg. 'fontSize') and leave this task to the Style Manager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
  rte: {
    // options
@@ -74,6 +74,6 @@ rte.add →
- + diff --git a/docs/api/selector_manager.html b/docs/api/selector_manager.html index f7857b93a..daca22aee 100644 --- a/docs/api/selector_manager.html +++ b/docs/api/selector_manager.html @@ -9,8 +9,8 @@ - - + +

SelectorManager

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

SelectorManager

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

span > #send-btn.btn{
  ...
 }
@@ -59,6 +59,6 @@ sm.addClass<
           CSS Composer
          →
- + diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html index d15e8c97d..170e34d41 100644 --- a/docs/api/storage_manager.html +++ b/docs/api/storage_manager.html @@ -9,8 +9,8 @@ - - + +

StorageManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
+

StorageManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

const editor = grapesjs.init({
  storageManager: {
    // options
  }
@@ -65,6 +65,6 @@ storageManager.
+    
   
 
diff --git a/docs/api/style_manager.html b/docs/api/style_manager.html
index 24cdc764c..4219fcf18 100644
--- a/docs/api/style_manager.html
+++ b/docs/api/style_manager.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 StyleManager
With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
+    
 StyleManager
With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
 You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
const editor = grapesjs.init({
  styleManager: {
    // options
@@ -89,6 +89,6 @@ someContainer.
+    
   
 
diff --git a/docs/api/undo_manager.html b/docs/api/undo_manager.html
index 9025e46bd..08a8777f3 100644
--- a/docs/api/undo_manager.html
+++ b/docs/api/undo_manager.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 UndoManager
This module allows to manage the stack of changes applied in canvas.
+    
 UndoManager
This module allows to manage the stack of changes applied in canvas.
 Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
const um = editor.UndoManager;
 
 getConfig
Get module configurations
 Examples
const config = um.getConfig();
 // { ... }
@@ -50,6 +50,6 @@ stack.each
           Keymaps
         

-    
+    
   
 
diff --git a/docs/assets/css/0.styles.680773b3.css b/docs/assets/css/0.styles.680773b3.css
deleted file mode 100644
index e3f79a507..000000000
--- a/docs/assets/css/0.styles.680773b3.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}}.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;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}#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}}.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}.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}.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{border:none}.panel__switcher{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__devices,.panel__top{position:static}.panel__top{padding:0;width:100%;display:flex;justify-content:center;justify-content:space-between}.panel__basic-actions{position:static}.content pre{padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}#gjs{border:3px solid #444}.gjs-cv-canvas{top:0;width:100%;height:100%}.gjs{border:3px solid #444}.gjs-block{width:auto;height:auto;min-height:auto}.demo-container[data-v-b3715568]{min-height:20px;border:1px solid #eee;border-radius:2px;padding:25px 35px}
\ No newline at end of file
diff --git a/docs/assets/css/0.styles.82db7b1e.css b/docs/assets/css/0.styles.82db7b1e.css
new file mode 100644
index 000000000..64b2944a5
--- /dev/null
+++ b/docs/assets/css/0.styles.82db7b1e.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}}.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/js/1.4c1eabe5.js b/docs/assets/js/1.4c1eabe5.js
deleted file mode 100644
index 88ea4583d..000000000
--- a/docs/assets/js/1.4c1eabe5.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{172:function(t,s,n){"use strict";n.r(s);var a=n(1),e=Object(a.a)({},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"content"},[t._m(0),t._m(1),n("p"),t._m(2),n("p"),t._m(3),t._m(4),t._m(5),n("p",[t._v("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 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:")]),n("img",{attrs:{src:t.$withBase("/default-traits.png")}}),t._m(6),t._m(7),n("p",[t._v("Now the result will be")]),n("img",{attrs:{src:t.$withBase("/input-custom-traits.png")}}),n("p",[t._v("By default, traits modify attributes of the model (which than reflected in canvas) but you can also have traits which change the property")]),t._m(8),n("p",[t._v("In this way you're able to listen this changes and react with your own logic")]),t._m(9),t._m(10),t._m(11),t._m(12)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"trait-manager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#trait-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Trait Manager")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as "),s("em",[this._v("Settings")]),this._v(" of each component. A common use of traits is to customize element attributes (eg. "),s("code",[this._v("placeholder")]),this._v(" for inputs) and in this case the editor comes already with some built-in, easy configurable, types.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"table-of-contents"},[s("ul",[s("li",[s("a",{attrs:{href:"#built-in-trait-types"}},[this._v("Built-in trait types")])]),s("li",[s("a",{attrs:{href:"#add-traits-to-components"}},[this._v("Add Traits to Components")])]),s("li",[s("a",{attrs:{href:"#define-new-trait-type"}},[this._v("Define new Trait type")])])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"built-in-trait-types"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#built-in-trait-types","aria-hidden":"true"}},[this._v("#")]),this._v(" Built-in trait types")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("text")]),s("li",[this._v("number")]),s("li",[this._v("checkbox")]),s("li",[this._v("select")]),s("li",[this._v("color")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add-traits-to-components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add-traits-to-components","aria-hidden":"true"}},[this._v("#")]),this._v(" Add Traits to Components")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("In this case we gonna create a new Component ("),s("a",{attrs:{href:"Components"}},[this._v("check here")]),this._v(" for more details about the creation of new components) with a new set of traits")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token operator"}},[t._v("...")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" domComps "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" dType "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'default'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" dModel "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" dType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" dView "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" dType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ndomComps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dModel"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Object"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("assign")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" dModel"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        traits"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),n("span",{attrs:{class:"token comment"}},[t._v("// strings are automatically converted to text types")]),t._v("\n          "),n("span",{attrs:{class:"token string"}},[t._v("'name'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),n("span",{attrs:{class:"token string"}},[t._v("'placeholder'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'select'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            options"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n              "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'text'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Text'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'email'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Email'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'password'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Password'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n              "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'number'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Number'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n          "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'checkbox'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Required'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'required'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      isComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{attrs:{class:"token keyword"}},[t._v("if")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),n("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'INPUT'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dView"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\ntraits"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'text'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Test'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'model-prop-name'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    changeProp"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token number"}},[t._v("1")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" dModel"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("listenTo")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'change:model-prop-name'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doStuff"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n      "),n("span",{attrs:{class:"token function"}},[t._v("doStuff")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("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:"define-new-trait-type"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#define-new-trait-type","aria-hidden":"true"}},[this._v("#")]),this._v(" Define new Trait type")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("If built-in types are not enough (eg. something with more complex UI) you can define a new one.\nLet's see this simple "),s("code",[this._v("textarea")]),this._v(" element which updates contents of the component.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("// Each new type extends the default Trait")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("TraitManager"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'content'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  events"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{attrs:{class:"token string"}},[t._v("'keyup'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'onChange'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("  "),n("span",{attrs:{class:"token comment"}},[t._v("// trigger parent onChange method on keyup")]),t._v("\n  "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),n("span",{attrs:{class:"token comment"}},[t._v("/**\n  * Returns the input element\n  * @return {HTMLElement}\n  */")]),t._v("\n  getInputEl"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token operator"}},[t._v("!")]),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("inputEl"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" input "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("createElement")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'textarea'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      input"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'content'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("inputEl "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" input"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("inputEl"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),n("span",{attrs:{class:"token comment"}},[t._v("/**\n   * Triggered when the value of the model is changed\n   */")]),t._v("\n  onValueChange"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("set")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'content'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'value'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// And then use it in your component")]),t._v("\n"),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\ntraits"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'content'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])}],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/10.d8cb5231.js b/docs/assets/js/10.d8cb5231.js
new file mode 100644
index 000000000..539d6d757
--- /dev/null
+++ b/docs/assets/js/10.d8cb5231.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{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]},w={id:"panel-switcher",buttons:[h,b,v]},m={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"})}),_=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"})}),k=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}),C=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:_,gjsConfigDevices:k,gjsConfigTheme:C,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:d,panelSwitcher:u,panelSwitcherTraits:w,panelSwitcherTraitsIcons:m,panelDevices:y,panelDevicesIcons:j}},197:function(e,t,s){"use strict";s.r(t);var a=s(198),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},198:function(e,t,s){"use strict";s(24),e.exports={mounted:function(){var e=s(174),t=grapesjs.init(e.gjsConfigTraits);t.Panels.addPanel(Object.assign({},e.panelTop,{el:"#panel__top6"})),t.Panels.addPanel(Object.assign({},e.panelBasicActions,{el:"#panel__basic-actions6"})),t.Panels.addPanel(Object.assign({},e.panelSidebar,{el:"#panel__right6"})),t.Panels.addPanel(Object.assign({},e.panelSwitcherTraits,{el:"#panel__switcher6"})),window.editor6=t}}},199:function(e,t,s){},208:function(e,t,s){"use strict";var a=s(199);s.n(a).a},209: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__top6"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions6"}}),t("div",{staticClass:"panel__switcher",attrs:{id:"panel__switcher6"}})]),t("div",{staticClass:"editor-row"},[t("div",{staticClass:"editor-canvas"},[t("div",{staticClass:"gjs",attrs:{id:"gjs6"}},[t("h1",[this._v("Hello World Component!")])])]),t("div",{staticClass:"panel__right",attrs:{id:"panel__right6"}},[t("div",{staticClass:"layers-container",attrs:{id:"layers-container6"}}),t("div",{staticClass:"styles-container",attrs:{id:"styles-container6"}}),t("div",{staticClass:"traits-container",attrs:{id:"traits-container6"}})])]),t("div",{attrs:{id:"blocks6"}})])}];s.d(t,"a",function(){return a}),s.d(t,"b",function(){return n})},224:function(e,t,s){"use strict";s.r(t);var a=s(209),n=s(197);for(var i in n)"default"!==i&&function(e){s.d(t,e,function(){return n[e]})}(i);s(208);var o=s(1),l=Object(o.a)(n.default,a.a,a.b,!1,null,null,null);l.options.__file="DemoTraits.vue",t.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/29.38c333a6.js b/docs/assets/js/11.69c18b86.js
similarity index 99%
rename from docs/assets/js/29.38c333a6.js
rename to docs/assets/js/11.69c18b86.js
index fcc7e8a93..e8158e663 100644
--- a/docs/assets/js/29.38c333a6.js
+++ b/docs/assets/js/11.69c18b86.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{198: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);s.default=e.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{246: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/28.14c2ddb7.js b/docs/assets/js/12.f79c3787.js
similarity index 56%
rename from docs/assets/js/28.14c2ddb7.js
rename to docs/assets/js/12.f79c3787.js
index d612f8647..a25e971af 100644
--- a/docs/assets/js/28.14c2ddb7.js
+++ b/docs/assets/js/12.f79c3787.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{200: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 look you might probably think it\'s just another kind of page/HTML builder, but actually is something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don\'t just think about 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 in some of your applications.\nGrapesJS comes along with different features and tools which enable you to craft easy to use builders, which will allow your users to create complex HTML-like templates without any knowledge of coding.")]),e._m(3),r("p",[e._v("Mainly, GrapesJS was designed to be used inside some CMS 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. Then, with the same concept, instead of creating just an application we decided to create a framework that could be extended and used by everyone for any kind purpose.")]),e._m(4),r("p",[e._v("To show up of what GrapesJS is capable of 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 this sources")]),e._m(6)])},[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")])])])])},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")])])])])])}],!1,null,null,null);t.default=s.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{225: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 look you might probably think it\'s just another kind of page/HTML builder, but actually is something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don\'t just think about 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 in some of your applications.\nGrapesJS comes along with different features and tools which enable you to craft easy to use builders, which will allow your users to create complex HTML-like templates without any knowledge of coding.")]),e._m(3),r("p",[e._v("Mainly, GrapesJS was designed to be used inside some CMS 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. Then, with the same concept, instead of creating just an application we decided to create a framework that could be extended and used by everyone for any kind purpose.")]),e._m(4),r("p",[e._v("To show up of what GrapesJS is capable of 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 this 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
diff --git a/docs/assets/js/27.8c514210.js b/docs/assets/js/13.3373dd40.js
similarity index 86%
rename from docs/assets/js/27.8c514210.js
rename to docs/assets/js/13.3373dd40.js
index b038b0fbf..ab5853687 100644
--- a/docs/assets/js/27.8c514210.js
+++ b/docs/assets/js/13.3373dd40.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{173: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
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{256: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
diff --git a/docs/assets/js/14.8a2ce59f.js b/docs/assets/js/14.8a2ce59f.js
new file mode 100644
index 000000000..d21b40ee2
--- /dev/null
+++ b/docs/assets/js/14.8a2ce59f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{243: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/25.51945ea0.js b/docs/assets/js/15.483a1808.js
similarity index 99%
rename from docs/assets/js/25.51945ea0.js
rename to docs/assets/js/15.483a1808.js
index 24ba35534..ebb9a0b39 100644
--- a/docs/assets/js/25.51945ea0.js
+++ b/docs/assets/js/15.483a1808.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{181: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\nall global blocks")])]),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("\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("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("\n 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'")]),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"),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")])])])}],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{242: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\nall global blocks")])]),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("\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("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("\n 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'")]),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"),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")])])])}],!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.b70b4495.js b/docs/assets/js/16.b70b4495.js
new file mode 100644
index 000000000..3dddb4f4c
--- /dev/null
+++ b/docs/assets/js/16.b70b4495.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{241: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/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("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(17),t._m(18),t._m(19),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(20),t._m(21)])},[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")])])])},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:"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")])])])}],!1,null,null,null);n.options.__file="canvas.md";e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/17.a1692f8c.js b/docs/assets/js/17.a1692f8c.js
new file mode 100644
index 000000000..f73f03e4a
--- /dev/null
+++ b/docs/assets/js/17.a1692f8c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{240: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("Check if command exists")]),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")])]),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(15),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(16),s("p",[t._v("Execute the command")]),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(" 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(18),t._m(19),t._m(20),t._m(21),s("p",[t._v("Stop the command")]),t._m(22),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(23),t._m(24),t._m(25),t._m(26),t._m(27),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")])]),t._m(29),t._m(30),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(31),s("p",[t._v("Get all active commands")]),t._m(32),t._m(33),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:"#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:"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-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("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-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-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("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-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("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-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",[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-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",[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/18.b4dfc6ac.js b/docs/assets/js/18.b4dfc6ac.js
deleted file mode 100644
index 970a0e6d8..000000000
--- a/docs/assets/js/18.b4dfc6ac.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{177:function(t,e,s){"use strict";s.r(e);var a=s(1),n=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("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/modal_dialog/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("Open the modal window")]),t._m(5),t._m(6),s("p",[t._v("Close the modal window")]),t._m(7),t._m(8),s("p",[t._v("Checks if the modal window is open")]),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(9),s("p",[t._v("Set the title to the modal window")]),t._m(10),s("ul",[s("li",[s("code",[t._v("title")]),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(" Title")])]),t._m(11),t._m(12),t._m(13),t._m(14),s("p",[t._v("Returns the title of the modal window")]),s("p",[t._v("Returns "),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),s("p",[t._v("Set the content of the modal window")]),t._m(16),s("ul",[s("li",[s("code",[t._v("content")]),s("strong",[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(" | "),s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),s("OutboundLink")],1),t._v(")")]),t._v(" Content")])]),t._m(17),t._m(18),t._m(19),t._m(20),s("p",[t._v("Get the content of the modal window")]),s("p",[t._v("Returns "),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)])])])},[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,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",{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 modal"),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,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",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" modal "),s("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Modal"),s("span",{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:"#open"}},[this._v("open")])]),e("li",[e("a",{attrs:{href:"#close"}},[this._v("close")])]),e("li",[e("a",{attrs:{href:"#isopen"}},[this._v("isOpen")])]),e("li",[e("a",{attrs:{href:"#settitle"}},[this._v("setTitle")])]),e("li",[e("a",{attrs:{href:"#gettitle"}},[this._v("getTitle")])]),e("li",[e("a",{attrs:{href:"#setcontent"}},[this._v("setContent")])]),e("li",[e("a",{attrs:{href:"#getcontent"}},[this._v("getContent")])])])},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("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:"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"}},[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,s=t._self._c||e;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("modal"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("setTitle")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'New title'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("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-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,s=t._self._c||e;return s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("modal"),s("span",{attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{attrs:{class:"token function"}},[t._v("setContent")]),s("span",{attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{attrs:{class:"token string"}},[t._v("'
Some HTML content
'")]),s("span",{attrs:{class:"token punctuation"}},[t._v(")")]),s("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);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/18.f2013e09.js b/docs/assets/js/18.f2013e09.js
new file mode 100644
index 000000000..95e1895e0
--- /dev/null
+++ b/docs/assets/js/18.f2013e09.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{239: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\nimmediatly 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("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("Check component's type")]),t._m(5),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(6),t._m(7),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(8),t._m(9),t._m(10),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(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/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of components")]),t._m(13),t._m(14),t._m(15),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(16),t._m(17),t._m(18),t._m(19),a("p",[t._v("Replace a component with another one")]),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/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(21),t._m(22),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(23),a("p",[t._v("Update attributes of the component")]),t._m(24),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(25),t._m(26),t._m(27),t._m(28),a("p",[t._v("Add attributes to the component")]),t._m(29),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(30),t._m(31),t._m(32),t._m(33),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(34),a("p",[t._v("Set the style on the component")]),t._m(35),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(36)]),t._m(37),t._m(38),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(39),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(40),a("p",[t._v("Add classes")]),t._m(41),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(42),t._m(43),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(44),a("p",[t._v("Set classes (resets current collection)")]),t._m(45),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(46),t._m(47),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(48),a("p",[t._v("Remove classes")]),t._m(49),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(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/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed selectors")]),t._m(52),a("p",[t._v("Add new component children")]),t._m(53),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(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/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of appended components")]),t._m(56),t._m(57),t._m(58),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(59),t._m(60),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(61),a("p",[t._v("Get the parent component, if exists")]),t._m(62),t._m(63),t._m(64),t._m(65),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(66),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(67),a("p",[t._v("Return HTML string of the component")]),t._m(68),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(69),t._m(70),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(71),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(72),a("p",[t._v("Set new id on the component")]),t._m(73),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(74),t._m(75),a("p",[t._v("Get the DOM element of the component. This works only of the\ncomponent 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(76),a("p",[t._v("Execute callback function on itself and all inner components")]),t._m(77),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(78),t._m(79),t._m(80)])},[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:"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"}},[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("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:"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-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("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:"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-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("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-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",[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-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",[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-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",[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-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-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("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-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-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("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-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-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("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-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-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("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:"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-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-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("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-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-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",[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-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("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:"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-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-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",[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-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("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:"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-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",[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")])])}],!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/23.95e202fd.js b/docs/assets/js/19.73ad3cbf.js
similarity index 99%
rename from docs/assets/js/23.95e202fd.js
rename to docs/assets/js/19.73ad3cbf.js
index 894a341bf..bf15b74d8 100644
--- a/docs/assets/js/23.95e202fd.js
+++ b/docs/assets/js/19.73ad3cbf.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{187: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)])},[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.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("a",{attrs:{href:"#getwrapper"}},[this._v("getWrapper")])]),e("li",[e("a",{attrs:{href:"#getcomponents"}},[this._v("getComponents")])]),e("li",[e("a",{attrs:{href:"#addcomponent"}},[this._v("addComponent")])]),e("li",[e("a",{attrs:{href:"#clear"}},[this._v("clear")])]),e("li",[e("a",{attrs:{href:"#load"}},[this._v("load")])]),e("li",[e("a",{attrs:{href:"#store"}},[this._v("store")])]),e("li",[e("a",{attrs:{href:"#render"}},[this._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")])])}],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{238: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)])},[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.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("a",{attrs:{href:"#getwrapper"}},[this._v("getWrapper")])]),e("li",[e("a",{attrs:{href:"#getcomponents"}},[this._v("getComponents")])]),e("li",[e("a",{attrs:{href:"#addcomponent"}},[this._v("addComponent")])]),e("li",[e("a",{attrs:{href:"#clear"}},[this._v("clear")])]),e("li",[e("a",{attrs:{href:"#load"}},[this._v("load")])]),e("li",[e("a",{attrs:{href:"#store"}},[this._v("store")])]),e("li",[e("a",{attrs:{href:"#render"}},[this._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")])])}],!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/2.913089f8.js b/docs/assets/js/2.913089f8.js
deleted file mode 100644
index 0cf994ba3..000000000
--- a/docs/assets/js/2.913089f8.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{179:function(t,a,n){"use strict";n.r(a);var o=n(1),s=Object(o.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("div",{staticClass:"content"},[n("h1",{attrs:{id:"style-manager"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[t._v("#")]),t._v(" Style Manager")]),n("p",[t._v("Coming soon")]),n("p"),n("div",{staticClass:"table-of-contents"},[n("ul",[n("li",[n("a",{attrs:{href:"#built-in-properties"}},[t._v("Built-in properties")])])])]),n("p"),n("h2",{attrs:{id:"built-in-properties"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#built-in-properties","aria-hidden":"true"}},[t._v("#")]),t._v(" Built-in properties")]),n("p",[t._v("Here you can find all the available built-in properties that you can use inside Style Manager via "),n("code",[t._v("buildProps")]),t._v(":")]),n("p",[n("code",[t._v("float")]),t._v(", "),n("code",[t._v("position")]),t._v(", "),n("code",[t._v("text-align")]),t._v(", "),n("code",[t._v("display")]),t._v(", "),n("code",[t._v("font-family")]),t._v(", "),n("code",[t._v("font-weight")]),t._v(", "),n("code",[t._v("border")]),t._v(", "),n("code",[t._v("border-style")]),t._v(", "),n("code",[t._v("border-color")]),t._v(", "),n("code",[t._v("border-width")]),t._v(", "),n("code",[t._v("box-shadow")]),t._v(", "),n("code",[t._v("background-repeat")]),t._v(", "),n("code",[t._v("background-position")]),t._v(", "),n("code",[t._v("background-attachment")]),t._v(", "),n("code",[t._v("background-size")]),t._v(", "),n("code",[t._v("transition")]),t._v(", "),n("code",[t._v("transition-duration")]),t._v(", "),n("code",[t._v("transition-property")]),t._v(", "),n("code",[t._v("transition-timing-function")]),t._v(", "),n("code",[t._v("top")]),t._v(", "),n("code",[t._v("right")]),t._v(", "),n("code",[t._v("bottom")]),t._v(", "),n("code",[t._v("left")]),t._v(", "),n("code",[t._v("margin")]),t._v(", "),n("code",[t._v("margin-top")]),t._v(", "),n("code",[t._v("margin-right")]),t._v(", "),n("code",[t._v("margin-bottom")]),t._v(", "),n("code",[t._v("margin-left")]),t._v(", "),n("code",[t._v("padding")]),t._v(", "),n("code",[t._v("padding-top")]),t._v(", "),n("code",[t._v("padding-right")]),t._v(", "),n("code",[t._v("padding-bottom")]),t._v(", "),n("code",[t._v("padding-left")]),t._v(", "),n("code",[t._v("width")]),t._v(", "),n("code",[t._v("heigth")]),t._v(", "),n("code",[t._v("min-width")]),t._v(", "),n("code",[t._v("min-heigth")]),t._v(", "),n("code",[t._v("max-width")]),t._v(", "),n("code",[t._v("max-heigth")]),t._v(", "),n("code",[t._v("font-size")]),t._v(", "),n("code",[t._v("letter-spacing")]),t._v(", "),n("code",[t._v("line-height")]),t._v(", "),n("code",[t._v("text-shadow")]),t._v(", "),n("code",[t._v("border-radius")]),t._v(", "),n("code",[t._v("border-top-left-radius")]),t._v(", "),n("code",[t._v("border-top-right-radius")]),t._v(", "),n("code",[t._v("border-bottom-left-radius")]),t._v(", "),n("code",[t._v("border-bottom-right-radius")]),t._v(", "),n("code",[t._v("perspective")]),t._v(", "),n("code",[t._v("transform")]),t._v(", "),n("code",[t._v("transform-rotate-x")]),t._v(", "),n("code",[t._v("transform-rotate-y")]),t._v(", "),n("code",[t._v("transform-rotate-z")]),t._v(", "),n("code",[t._v("transform-scale-x")]),t._v(", "),n("code",[t._v("transform-scale-y")]),t._v(", "),n("code",[t._v("transform-scale-z")]),t._v(", "),n("code",[t._v("color")]),t._v(", "),n("code",[t._v("background-color")]),t._v(", "),n("code",[t._v("background")]),t._v(", "),n("code",[t._v("background-image")]),t._v(", "),n("code",[t._v("cursor")])]),n("p",[t._v("Example usage:")]),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Dimension'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token string"}},[t._v("'width'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Extra'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token string"}},[t._v("'background-color'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'box-shadow'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])])}],!1,null,null,null);a.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/2.e0710957.js b/docs/assets/js/2.e0710957.js
new file mode 100644
index 000000000..dc292d790
--- /dev/null
+++ b/docs/assets/js/2.e0710957.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{175:function(t,n,e){},200:function(t,n,e){"use strict";var i=e(175);e.n(i).a},247: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/22.fbaff709.js b/docs/assets/js/20.75ba97b9.js
similarity index 99%
rename from docs/assets/js/22.fbaff709.js
rename to docs/assets/js/20.75ba97b9.js
index c7133d051..a08b82572 100644
--- a/docs/assets/js/22.fbaff709.js
+++ b/docs/assets/js/20.75ba97b9.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{196: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 id selector")]),t._m(23),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(" Id selector name, eg. 'my-id'")]),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 (optional, default "),a("code",[t._v("{}")]),t._v(")")]),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, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (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 id selector")]),t._m(28),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(" Id selector name, eg. 'my-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(" Custom options, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(29),t._m(30),t._m(31),t._m(32),a("p",[t._v("Add/update the CSS rule with class selector")]),t._m(33),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(" Class selector name, eg. 'my-class'")]),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 (optional, default "),a("code",[t._v("{}")]),t._v(")")]),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, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(34),t._m(35),t._m(36),t._m(37),a("p",[t._v("Get the CSS rule by class selector")]),t._m(38),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(" Class selector name, eg. 'my-class'")]),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, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(39),t._m(40),t._m(41)])},[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:"#setidrule"}},[t._v("setIdRule")])]),a("li",[a("a",{attrs:{href:"#getidrule"}},[t._v("getIdRule")])]),a("li",[a("a",{attrs:{href:"#setclassrule"}},[t._v("setClassRule")])]),a("li",[a("a",{attrs:{href:"#getclassrule"}},[t._v("getClassRule")])])])},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:"setidrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setidrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setIdRule")])},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 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("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'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 keyword"}},[t._v("const")]),t._v(" ruleHover "),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("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'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("'blue'")]),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(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),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 add current CSS:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// #myid { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// #myid:hover { color: blue }")]),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:"getidrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getidrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getIdRule")])},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("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("getIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'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(" ruleHover "),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("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),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,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"setclassrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setclassrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setClassRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},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,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("setClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),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 keyword"}},[t._v("const")]),t._v(" ruleHover "),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("setClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),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("'blue'")]),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(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),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 add current CSS:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// .myclass { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// .myclass:hover { color: blue }")]),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:"getclassrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getclassrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getClassRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},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,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("getClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),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(" ruleHover "),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("getClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),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,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")])])}],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{237: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 id selector")]),t._m(23),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(" Id selector name, eg. 'my-id'")]),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 (optional, default "),a("code",[t._v("{}")]),t._v(")")]),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, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (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 id selector")]),t._m(28),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(" Id selector name, eg. 'my-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(" Custom options, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(29),t._m(30),t._m(31),t._m(32),a("p",[t._v("Add/update the CSS rule with class selector")]),t._m(33),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(" Class selector name, eg. 'my-class'")]),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 (optional, default "),a("code",[t._v("{}")]),t._v(")")]),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, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(34),t._m(35),t._m(36),t._m(37),a("p",[t._v("Get the CSS rule by class selector")]),t._m(38),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(" Class selector name, eg. 'my-class'")]),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, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(39),t._m(40),t._m(41)])},[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:"#setidrule"}},[t._v("setIdRule")])]),a("li",[a("a",{attrs:{href:"#getidrule"}},[t._v("getIdRule")])]),a("li",[a("a",{attrs:{href:"#setclassrule"}},[t._v("setClassRule")])]),a("li",[a("a",{attrs:{href:"#getclassrule"}},[t._v("getClassRule")])])])},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:"setidrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setidrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setIdRule")])},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 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("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'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 keyword"}},[t._v("const")]),t._v(" ruleHover "),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("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'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("'blue'")]),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(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),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 add current CSS:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// #myid { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// #myid:hover { color: blue }")]),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:"getidrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getidrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getIdRule")])},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("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("getIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'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(" ruleHover "),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("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),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,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"setclassrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setclassrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setClassRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},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,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("setClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),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 keyword"}},[t._v("const")]),t._v(" ruleHover "),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("setClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),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("'blue'")]),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(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),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 add current CSS:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// .myclass { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// .myclass:hover { color: blue }")]),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:"getclassrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getclassrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getClassRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},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,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("getClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),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(" ruleHover "),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("getClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),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,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.5afad075.js b/docs/assets/js/21.f8fdd45a.js
similarity index 98%
rename from docs/assets/js/21.5afad075.js
rename to docs/assets/js/21.f8fdd45a.js
index 799cc76ea..fced72a8e 100644
--- a/docs/assets/js/21.5afad075.js
+++ b/docs/assets/js/21.f8fdd45a.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{175: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);a.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{236: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/20.0f79fdeb.js b/docs/assets/js/22.4baf2121.js
similarity index 99%
rename from docs/assets/js/20.0f79fdeb.js
rename to docs/assets/js/22.4baf2121.js
index 6d8db7f77..82c2225d5 100644
--- a/docs/assets/js/20.0f79fdeb.js
+++ b/docs/assets/js/22.4baf2121.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{174: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),a("p",[t._v("Returns configuration object")]),t._m(27),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(28),t._m(29),a("p",[t._v("Returns HTML built inside canvas")]),t._m(30),t._m(31),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(32),a("p",[t._v("Returns CSS built inside canvas")]),t._m(33),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(34),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(35),a("p",[t._v("Returns components 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(36),a("p",[t._v("Set components inside editor's canvas. This method overrides actual components")]),t._m(37),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(38),t._m(39),t._m(40),t._m(41),a("p",[t._v("Add components")]),t._m(42),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(43),t._m(44),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(45),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(46),a("p",[t._v("Set style inside editor's canvas. This method overrides actual style")]),t._m(47),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(48),t._m(49),t._m(50),t._m(51),a("p",[t._v("Returns the last selected component, if there is one")]),t._m(52),t._m(53),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(54),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(55),t._m(56),a("p",[t._v("Select a component")]),t._m(57),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")])]),t._m(58),t._m(59),t._m(60),t._m(61),a("p",[t._v("Add component to selection")]),t._m(62),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(63),t._m(64),t._m(65),t._m(66),a("p",[t._v("Remove component from selection")]),t._m(67),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(68),t._m(69),t._m(70),t._m(71),a("p",[t._v("Toggle component selection")]),t._m(72),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(73),t._m(74),t._m(75),t._m(76),a("p",[t._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),t._m(77),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(78),t._m(79),t._m(80),t._m(81),a("p",[t._v("Return the actual active device")]),t._m(82),t._m(83),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(84),a("p",[t._v("Execute command")]),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(" 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(86),t._m(87),t._m(88),t._m(89),a("p",[t._v("Stop the command if stop method was provided")]),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(" 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(91),t._m(92),t._m(93),t._m(94),a("p",[t._v("Store data to the current storage")]),t._m(95),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(96),a("p",[t._v("Load data from the current storage")]),t._m(97),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(98),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(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/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(101),a("p",[t._v("Replace the built-in Rich Text Editor with a custom one.")]),t._m(102),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(103),t._m(104),t._m(105),a("p",[t._v("Attach event")]),t._m(106),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(107),t._m(108),a("p",[t._v("Detach event")]),t._m(109),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(110),t._m(111),a("p",[t._v("Trigger event")]),t._m(112),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(113),t._m(114),a("p",[t._v("Destroy the editor")]),t._m(115),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: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 new component is added by a clone command, the 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")])])},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: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:"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(")")])])},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(" - Triggered when the canvas is scrolle")]),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(" - When the 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("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:"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-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("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-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:"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-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:"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
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{235: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),a("p",[t._v("Returns configuration object")]),t._m(27),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(28),t._m(29),a("p",[t._v("Returns HTML built inside canvas")]),t._m(30),t._m(31),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(32),a("p",[t._v("Returns CSS built inside canvas")]),t._m(33),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(34),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(35),a("p",[t._v("Returns components 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(36),a("p",[t._v("Set components inside editor's canvas. This method overrides actual components")]),t._m(37),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(38),t._m(39),t._m(40),t._m(41),a("p",[t._v("Add components")]),t._m(42),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(43),t._m(44),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(45),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(46),a("p",[t._v("Set style inside editor's canvas. This method overrides actual style")]),t._m(47),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(48),t._m(49),t._m(50),t._m(51),a("p",[t._v("Returns the last selected component, if there is one")]),t._m(52),t._m(53),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(54),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(55),t._m(56),a("p",[t._v("Select a component")]),t._m(57),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")])]),t._m(58),t._m(59),t._m(60),t._m(61),a("p",[t._v("Add component to selection")]),t._m(62),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(63),t._m(64),t._m(65),t._m(66),a("p",[t._v("Remove component from selection")]),t._m(67),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(68),t._m(69),t._m(70),t._m(71),a("p",[t._v("Toggle component selection")]),t._m(72),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(73),t._m(74),t._m(75),t._m(76),a("p",[t._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),t._m(77),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(78),t._m(79),t._m(80),t._m(81),a("p",[t._v("Return the actual active device")]),t._m(82),t._m(83),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(84),a("p",[t._v("Execute command")]),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(" 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(86),t._m(87),t._m(88),t._m(89),a("p",[t._v("Stop the command if stop method was provided")]),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(" 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(91),t._m(92),t._m(93),t._m(94),a("p",[t._v("Store data to the current storage")]),t._m(95),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(96),a("p",[t._v("Load data from the current storage")]),t._m(97),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(98),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(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/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(101),a("p",[t._v("Replace the built-in Rich Text Editor with a custom one.")]),t._m(102),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(103),t._m(104),t._m(105),a("p",[t._v("Attach event")]),t._m(106),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(107),t._m(108),a("p",[t._v("Detach event")]),t._m(109),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(110),t._m(111),a("p",[t._v("Trigger event")]),t._m(112),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(113),t._m(114),a("p",[t._v("Destroy the editor")]),t._m(115),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: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 new component is added by a clone command, the 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")])])},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: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:"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(")")])])},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(" - Triggered when the canvas is scrolle")]),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(" - When the 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("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:"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-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("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-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:"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-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:"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);r.options.__file="editor.md";e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/19.91169ac8.js b/docs/assets/js/23.2c2b779d.js
similarity index 98%
rename from docs/assets/js/19.91169ac8.js
rename to docs/assets/js/23.2c2b779d.js
index b193ef184..162895e0b 100644
--- a/docs/assets/js/19.91169ac8.js
+++ b/docs/assets/js/23.2c2b779d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{192: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")])]),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")])])},[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")])])])},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")])])])}],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{234: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")])]),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")])])},[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")])])])},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")])])])}],!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.4fed3e13.js b/docs/assets/js/24.4fed3e13.js
deleted file mode 100644
index 660bae257..000000000
--- a/docs/assets/js/24.4fed3e13.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{185: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/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("Check if command exists")]),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")])]),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)])])])},[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.$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:"#has"}},[this._v("has")])])])},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:"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-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])}],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/24.e9c83a5a.js b/docs/assets/js/24.e9c83a5a.js
new file mode 100644
index 000000000..123ebcf0e
--- /dev/null
+++ b/docs/assets/js/24.e9c83a5a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{254: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/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("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(10),a("p",[t._v("Set the title to the modal window")]),t._m(11),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(12),t._m(13),t._m(14),t._m(15),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(16),a("p",[t._v("Set the content of the modal window")]),t._m(17),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(18),t._m(19),t._m(20),t._m(21),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.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("a",{attrs:{href:"#open"}},[this._v("open")])]),e("li",[e("a",{attrs:{href:"#close"}},[this._v("close")])]),e("li",[e("a",{attrs:{href:"#isopen"}},[this._v("isOpen")])]),e("li",[e("a",{attrs:{href:"#settitle"}},[this._v("setTitle")])]),e("li",[e("a",{attrs:{href:"#gettitle"}},[this._v("getTitle")])]),e("li",[e("a",{attrs:{href:"#setcontent"}},[this._v("setContent")])]),e("li",[e("a",{attrs:{href:"#getcontent"}},[this._v("getContent")])])])},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:"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-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("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-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("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);r.options.__file="modal_dialog.md";e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/17.322b5a49.js b/docs/assets/js/25.93c8f5c4.js
similarity index 99%
rename from docs/assets/js/17.322b5a49.js
rename to docs/assets/js/25.93c8f5c4.js
index 77ff439b4..3cc125400 100644
--- a/docs/assets/js/17.322b5a49.js
+++ b/docs/assets/js/25.93c8f5c4.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{178: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")]),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 | "),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(" Button object or instance of Button or button id")])]),t._m(29),t._m(30),t._m(31),t._m(32),s("p",[t._v("Get button from the panel")]),t._m(33),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(34),t._m(35),t._m(36)])},[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:"#removebutton"}},[t._v("removeButton")])]),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("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("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(",")]),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 comment"}},[t._v("// It's also possible to use the button id")]),t._v("\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(",")]),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);a.default=e.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{232: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")]),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 | "),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(" Button object or instance of Button or button id")])]),t._m(29),t._m(30),t._m(31),t._m(32),s("p",[t._v("Get button from the panel")]),t._m(33),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(34),t._m(35),t._m(36)])},[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:"#removebutton"}},[t._v("removeButton")])]),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("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("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(",")]),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 comment"}},[t._v("// It's also possible to use the button id")]),t._v("\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(",")]),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/26.685b07a3.js b/docs/assets/js/26.685b07a3.js
deleted file mode 100644
index e40221440..000000000
--- a/docs/assets/js/26.685b07a3.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{176: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/asset_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("Add new asset/s to the collection. URLs are supposed to be unique")]),t._m(5),e("ul",[e("li",[e("code",[t._v("asset")]),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(" | "),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("<"),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/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),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(" URL strings or an objects representing the resource.")]),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("?")]),t._v(" Options (optional, default "),e("code",[t._v("{}")]),t._v(")")])]),t._m(6),t._m(7),t._m(8),t._m(9),e("p",[t._v("Returns the asset by URL")]),t._m(10),e("ul",[e("li",[e("code",[t._v("src")]),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(" URL of the asset")])]),t._m(11),t._m(12),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._v(" Object representing the asset")]),t._m(13),e("p",[t._v("Return the global collection, containing all the assets")]),t._m(14),t._m(15),e("p",[t._v("Return the visible collection, which containes assets actually rendered")]),t._m(16),t._m(17),e("p",[t._v("Remove the asset by its URL")]),t._m(18),e("ul",[e("li",[e("code",[t._v("src")]),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(" URL of the asset")])]),t._m(19),t._m(20),t._m(21),t._m(22),e("p",[t._v("Store assets data to the selected storage")]),t._m(23),e("ul",[e("li",[e("code",[t._v("noStore")]),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(" If true, won't store")])]),t._m(24),t._m(25),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._v(" Data to store")]),t._m(26),e("p",[t._v("Load data from the passed object.\nThe fetched data will be added to the collection.")]),t._m(27),e("ul",[e("li",[e("code",[t._v("data")]),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(" Object of data to load (optional, default "),e("code",[t._v("{}")]),t._v(")")])]),t._m(28),t._m(29),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._v(" Loaded assets")]),t._m(30),e("p",[t._v("Return the Asset Manager Container")]),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(31),e("p",[t._v("Get assets element container")]),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(32),e("p",[t._v("Render assets")]),t._m(33),e("ul",[e("li",[e("code",[t._v("assets")]),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(" Assets to render, without the argument will render\nall global assets")])]),t._m(34),t._m(35),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(36),e("p",[t._v("Add new type. If you want to get more about type definition we suggest to read the "),e("router-link",{attrs:{to:"/modules/Assets.html"}},[t._v("module's page")])],1),t._m(37),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(" Type ID")]),e("li",[e("code",[t._v("definition")]),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(" Definition of the type. Each definition contains\n"),e("code",[t._v("model")]),t._v(" (business logic), "),e("code",[t._v("view")]),t._v(" (presentation logic)\nand "),e("code",[t._v("isType")]),t._v(" function which recognize the type of the\npassed entity")])]),t._m(38),t._m(39),t._m(40),e("p",[t._v("Get type")]),t._m(41),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(" Type ID")])]),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._v(" Type definition")]),t._m(42),e("p",[t._v("Get types")]),e("p",[t._v("Returns "),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)])])])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"assetmanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#assetmanager","aria-hidden":"true"}},[this._v("#")]),this._v(" AssetManager")])},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 assetManager"),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(" assetManager "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("AssetManager"),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:"#store"}},[t._v("store")])]),e("li",[e("a",{attrs:{href:"#load"}},[t._v("load")])]),e("li",[e("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),e("li",[e("a",{attrs:{href:"#getassetsel"}},[t._v("getAssetsEl")])]),e("li",[e("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),e("li",[e("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),e("li",[e("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])])])},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",[e("span",{attrs:{class:"token comment"}},[t._v("// In case of strings, would be interpreted as images")]),t._v("\nassetManager"),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("'http://img.jpg'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),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 punctuation"}},[t._v("[")]),e("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),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("// Using objects you could indicate the type and other meta informations")]),t._v("\nassetManager"),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 punctuation"}},[t._v("{")]),t._v("\n\tsrc"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{attrs:{class:"token comment"}},[t._v("//type: 'image',\t//image is default")]),t._v("\n\theight"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token number"}},[t._v("300")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nwidth"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token number"}},[t._v("200")]),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("\nassetManager"),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 punctuation"}},[t._v("[")]),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),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\tsrc"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),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(")")]),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("Model")])])},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("var")]),t._v(" asset "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),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("'http://img.jpg'")]),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("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("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("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",[t._v("assetManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("remove")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),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("this")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},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 keyword"}},[t._v("var")]),t._v(" assets "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("store")]),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("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},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-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",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("load")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tassets"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{attrs:{class:"token operator"}},[t._v("...")]),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.$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:"getassetsel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getassetsel","aria-hidden":"true"}},[this._v("#")]),this._v(" getAssetsEl")])},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-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",{attrs:{class:"token comment"}},[t._v("// Render all assets")]),t._v("\nassetManager"),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 some of the assets")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assets "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),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("\nassetManager"),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("assets"),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("\n asset "),e("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" asset"),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("'cats'")]),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("h2",{attrs:{id:"addtype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addtype","aria-hidden":"true"}},[this._v("#")]),this._v(" addType")])},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-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,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("assetManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("addType")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'my-type'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),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("\n view"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),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("\n isType"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),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 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 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("h2",{attrs:{id:"gettype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettype","aria-hidden":"true"}},[this._v("#")]),this._v(" getType")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"gettypes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettypes","aria-hidden":"true"}},[this._v("#")]),this._v(" getTypes")])}],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/16.89382312.js b/docs/assets/js/26.70b77d4d.js
similarity index 99%
rename from docs/assets/js/16.89382312.js
rename to docs/assets/js/26.70b77d4d.js
index 29e2511c7..c7b36c3b4 100644
--- a/docs/assets/js/16.89382312.js
+++ b/docs/assets/js/26.70b77d4d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{180: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);a.default=e.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{231: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/15.6ee7f49c.js b/docs/assets/js/27.93b9607a.js
similarity index 99%
rename from docs/assets/js/15.6ee7f49c.js
rename to docs/assets/js/27.93b9607a.js
index 4a0445e34..59c3961cb 100644
--- a/docs/assets/js/15.6ee7f49c.js
+++ b/docs/assets/js/27.93b9607a.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{201: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 get better 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",[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")]),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),t._m(13),t._m(14),a("p",[t._v("Add class selectors")]),t._m(15),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(16),t._m(17),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(18),a("p",[t._v("Get the selector by its name")]),t._m(19),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")]),t._m(20),a("li",[a("code",[t._v("tyoe")]),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(21),t._m(22),t._m(23),t._m(24),a("p",[t._v("Get all selectors")]),t._m(25)])},[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("var")]),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("var")]),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")])])])},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:"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("li",[s("code",[this._v("type")]),this._v("   (optional, default "),s("code",[this._v("Selector.TYPE_CLASS")]),this._v(")")])},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("var")]),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")])])])},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")])])}],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{230: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 get better 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",[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")]),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),t._m(13),t._m(14),a("p",[t._v("Add class selectors")]),t._m(15),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(16),t._m(17),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(18),a("p",[t._v("Get the selector by its name")]),t._m(19),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")]),t._m(20),a("li",[a("code",[t._v("tyoe")]),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(21),t._m(22),t._m(23),t._m(24),a("p",[t._v("Get all selectors")]),t._m(25)])},[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("var")]),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("var")]),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")])])])},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:"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("li",[s("code",[this._v("type")]),this._v("   (optional, default "),s("code",[this._v("Selector.TYPE_CLASS")]),this._v(")")])},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("var")]),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")])])])},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")])])}],!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/14.78680387.js b/docs/assets/js/28.ac3dfe4c.js
similarity index 99%
rename from docs/assets/js/14.78680387.js
rename to docs/assets/js/28.ac3dfe4c.js
index b879f638d..9a19dac2b 100644
--- a/docs/assets/js/14.78680387.js
+++ b/docs/assets/js/28.ac3dfe4c.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{184: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);e.default=r.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{229: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/13.f5710b12.js b/docs/assets/js/29.995a1085.js
similarity index 99%
rename from docs/assets/js/13.f5710b12.js
rename to docs/assets/js/29.995a1085.js
index 942ff0bab..f66efdab0 100644
--- a/docs/assets/js/13.f5710b12.js
+++ b/docs/assets/js/29.995a1085.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{186: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)])},[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:"#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")])])}],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{228: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)])},[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:"#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")])])}],!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/3.ea5de9c2.js b/docs/assets/js/3.ea5de9c2.js
deleted file mode 100644
index d8f0f357c..000000000
--- a/docs/assets/js/3.ea5de9c2.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{183: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("The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings")]),t._m(1),a("p"),t._m(2),a("p"),t._m(3),a("p",[t._v("The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in "),a("code",[t._v("LocalStorage")]),t._v(" which just leverages "),a("a",{attrs:{href:"https://developer.mozilla.org/it/docs/Web/API/Window/localStorage",target:"_blank",rel:"noopener noreferrer"}},[t._v("localStorage API"),a("OutboundLink")],1),t._v(".\nYou can initialize the editor with different storage configurations via "),a("code",[t._v("storageManager")]),t._v(" option:")]),t._m(4),t._m(5),t._m(6),t._m(7),a("p",[t._v("For all other available options check directly the "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/dev/src/storage_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("configuration source file"),a("OutboundLink")],1),t._v(".")]),t._m(8),a("p",[t._v("Switching up the remote storage is very simple, it's just a matter of specifying your endpoints for storing and loading, which generally might be also the same (if you rely on HTTP methods).")]),t._m(9),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.")]),t._m(10),t._m(11),t._m(12),a("p",[t._v("If for any reason you need to get the data from the remote storage you can trigger the load, at any time, manually")]),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),a("p",[t._v("The Storage module has also its own "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/wiki/API-Storage-Manager",target:"_blank",rel:"noopener noreferrer"}},[t._v("set of API"),a("OutboundLink")],1),t._v(" that allows you to extend and add new functionalities.")]),t._m(23),a("p",[t._v("One of the most useful methods of API is the possibility to add new storages. You might think, we have the "),a("code",[t._v("local")]),t._v(" and "),a("code",[t._v("remote")]),t._v(" storages, what else do we need, right? Well, let's take as an example the "),a("code",[t._v("local")]),t._v(" one. As you already know, it relies on "),a("a",{attrs:{href:"https://developer.mozilla.org/it/docs/Web/API/Window/localStorage",target:"_blank",rel:"noopener noreferrer"}},[t._v("localStorage API"),a("OutboundLink")],1),t._v(" which is really cool and easy to use but one of his specs might be a big limit, by default it has a limited amount of MB to use per site (something around 5MB-10MB, depends on the browser implementation). As an alternative, we can make use of "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API",target:"_blank",rel:"noopener noreferrer"}},[t._v("IndexedDB"),a("OutboundLink")],1),t._v(" which is also quite "),a("a",{attrs:{href:"https://caniuse.com/#search=indexedDB",target:"_blank",rel:"noopener noreferrer"}},[t._v("well supported"),a("OutboundLink")],1),t._v(" and allows more space usage (each browser implements its own rules, for a better understanding on how browser storage limits work, check "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),a("OutboundLink")],1),t._v(").\n"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB",target:"_blank",rel:"noopener noreferrer"}},[t._v("IndexedDB configuration"),a("OutboundLink")],1),t._v(" might be too much verbose for this guide so we decided to create the "),a("a",{attrs:{href:"https://github.com/artf/grapesjs-indexeddb",target:"_blank",rel:"noopener noreferrer"}},[t._v("grapesjs-indexeddb"),a("OutboundLink")],1),t._v(" plugin, so you can check its source and see how it's implemented. For this guide we gonna see something more simpler but with the same flow, it'll be just a simple javascript object which stores key-value data, not persistent at all but the concept is the same.")]),t._m(24),t._m(25),a("p",[t._v("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:")]),t._m(26),t._m(27),t._m(28),t._m(29),a("p",[t._v("Here you can find some of the plugins extending the Storage Manager")]),a("ul",[a("li",[a("a",{attrs:{href:"https://github.com/artf/grapesjs-indexeddb",target:"_blank",rel:"noopener noreferrer"}},[t._v("grapesjs-indexeddb"),a("OutboundLink")],1),t._v(" - Storage wrapper for IndexedDB")]),a("li",[a("a",{attrs:{href:"https://github.com/artf/grapesjs-firestore",target:"_blank",rel:"noopener noreferrer"}},[t._v("grapesjs-firestore"),a("OutboundLink")],1),t._v(" - Storage wrapper for "),a("a",{attrs:{href:"https://firebase.google.com/docs/firestore",target:"_blank",rel:"noopener noreferrer"}},[t._v("Cloud Firestore"),a("OutboundLink")],1)])]),t._m(30),a("p",[t._v("Another way to extend storage capabilities is to make use of GrapesJS's event hooks, you can check "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/wiki/API-Editor#storages",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),a("OutboundLink")],1),t._v(" the list of all available events for the Storage module. Let's see some of the cases where you might want to use them:")]),t._m(31),t._m(32),t._m(33),t._m(34),t._m(35),t._m(36),t._m(37),t._m(38)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"storage-manager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#storage-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Storage Manager")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"warning custom-block"},[s("p",{staticClass:"custom-block-title"},[this._v("WARNING")]),s("p",[this._v("This guide requires GrapesJS v0.14.15 or higher")])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"table-of-contents"},[a("ul",[a("li",[a("a",{attrs:{href:"#basic-configuration"}},[t._v("Basic configuration")])]),a("li",[a("a",{attrs:{href:"#setup-remote-storage"}},[t._v("Setup remote storage")])]),a("li",[a("a",{attrs:{href:"#store-and-load-templates"}},[t._v("Store and load templates")])]),a("li",[a("a",{attrs:{href:"#setup-the-server"}},[t._v("Setup the server")])]),a("li",[a("a",{attrs:{href:"#storage-api"}},[t._v("Storage API")]),a("ul",[a("li",[a("a",{attrs:{href:"#define-new-storage"}},[t._v("Define new storage")])]),a("li",[a("a",{attrs:{href:"#extend-storage"}},[t._v("Extend storage")])]),a("li",[a("a",{attrs:{href:"#examples"}},[t._v("Examples")])])])]),a("li",[a("a",{attrs:{href:"#events"}},[t._v("Events")])])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"basic-configuration"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-configuration","aria-hidden":"true"}},[this._v("#")]),this._v(" Basic configuration")])},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  "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// Default configurations")]),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 on parameters")]),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  "),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,s=this._self._c||t;return s("p",[this._v("The "),s("code",[this._v("id")]),this._v(" option is used to prevent collisions (quite common with localStorage) in case of multiple editors on the same page, therefore you will see parameters passed like "),s("code",[this._v("{ 'gjs-components': '...', 'gjs-style': '...', }")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("If you need to disable the storage manager you can pass any empty "),s("code",[this._v("type")]),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("\nstorageManager"),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 keyword"}},[t._v("null")]),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:"setup-remote-storage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup-remote-storage","aria-hidden":"true"}},[this._v("#")]),this._v(" Setup remote storage")])},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  "),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("3")]),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://endpoint/store-template/some-id-123'")]),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://endpoint/load-template/some-id-123'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{attrs:{class:"token comment"}},[t._v("// For custom parameters/headers on requests")]),t._v("\n    params"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" _some_token"),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 punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    headers"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" Authorization"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Basic ...'")]),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")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"store-and-load-templates"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store-and-load-templates","aria-hidden":"true"}},[this._v("#")]),this._v(" Store and load templates")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("Even without a fully working endpoint, you can see what is sent from the editor by triggering the store and looking in the network panel of the inspector. GrapesJS sends mainly 4 types of parameters and it prefixes them with the "),a("code",[t._v("gjs-")]),t._v(" key (you can disable it via "),a("code",[t._v("storageManager.id")]),t._v("). From the parameters, you will get the final result in 'gjs-html' and 'gjs-css' and this is what actually your end-users will gonna see on the final template/page. The other two, 'gjs-components' and 'gjs-style', are a JSON representation of your template and therefore those should be used for the template editing. "),a("strong",[t._v("So be careful")]),t._v(", GrapesJS is able to start from any HTML/CSS but use this approach only for importing already existent HTML templates, once the user starts editing, rely always on JSON objects because the HTML doesn't contain information about your components. You can achieve it in a pretty straightforward way and if you load your page by server-side you don't even need to load asynchronously your data (so you can turn off the "),a("code",[t._v("autoload")]),t._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 comment"}},[t._v("// Lets say, for instance, you start with your already defined HTML template and you'd like to")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// import it on fly for the user")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" LandingPage "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  html"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token template-string"}},[a("span",{attrs:{class:"token string"}},[t._v("`
...
`")])]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  css"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("null")]),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 keyword"}},[t._v("null")]),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 keyword"}},[t._v("null")]),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("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 operator"}},[t._v("...")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// The `components` accepts HTML string or a JSON of components")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// Here, at first, we check and use components if are already defined, otherwise")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// the HTML string gonna be used")]),t._v("\n  components"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" LandingPage"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("components "),a("span",{attrs:{class:"token operator"}},[t._v("||")]),t._v(" LandingPage"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("html"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// We might want to make the same check for styles")]),t._v("\n  style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" LandingPage"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style "),a("span",{attrs:{class:"token operator"}},[t._v("||")]),t._v(" LandingPage"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("css"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// As we already initialize the editor with the template we can skip the `autoload`")]),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 operator"}},[t._v("...")]),t._v("\n    autoload"),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 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,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",[t._v("editor"),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("(")]),t._v("res "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),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("'Load callback'")]),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("Similarly, you have the same control over the storing. By default, the "),s("code",[this._v("autosave")]),this._v(" is enabled and is triggered by how many changes are made to the template (change it via "),s("code",[this._v("stepsBeforeSave")]),this._v(" option). As before, you can disable this behavior and trigger it manually when you need it")])},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("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 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    "),a("span",{attrs:{class:"token operator"}},[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 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("// Call load somewhere")]),t._v("\neditor"),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("(")]),t._v("res "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),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("'Store callback'")]),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("If you need to check changes which yet need to be stored you can use "),s("code",[this._v("editor.getDirtyCount()")]),this._v(". At any, successful, store of the editor, it resets the count.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"setup-the-server"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup-the-server","aria-hidden":"true"}},[this._v("#")]),this._v(" Setup the server")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("p",[t._v("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. "),a("code",[t._v("mydomain.com/store-page/123")]),t._v(") and the other one for loading (eg. "),a("code",[t._v("mydomain.com/load-page/123")]),t._v("), you can also create just one and distinguish them via HTTP methods (eg. "),a("code",[t._v("mydomain.com/page/123")]),t._v(", via GET you load the template, with POST you store it).\nWhen you "),a("strong",[t._v("store")]),t._v(", the editor doesn't expect any particular result but only a valid response from the server (status code 200).\nWhen you "),a("strong",[t._v("load")]),t._v(" the template, return a JSON object with the data you have (don't forget to include the "),a("code",[t._v("id")]),t._v(" prefix if it's used)")])},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 punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{attrs:{class:"token comment"}},[t._v("// `gjs-` is the id prefix")]),t._v("\n  "),a("span",{attrs:{class:"token string"}},[t._v("'gjs-components'")]),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(" 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(" "),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(" "),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(",")]),t._v("\n  "),a("span",{attrs:{class:"token string"}},[t._v("'gjs-style'")]),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 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 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(",")]),t._v("\n"),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("Be sure to have a correct "),s("code",[this._v("Content-Type")]),this._v(" response header, eg. in PHP you would do something like this:")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-php extra-class"},[a("pre",{pre:!0,attrs:{class:"language-php"}},[a("code",[a("span",{attrs:{class:"token function"}},[t._v("header")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token single-quoted-string string"}},[t._v("'Content-Type: application/json'")]),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("echo")]),t._v(" "),a("span",{attrs:{class:"token function"}},[t._v("json_encode")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{attrs:{class:"token single-quoted-string string"}},[t._v("'gjs-components'")]),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(".")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{attrs:{class:"token single-quoted-string string"}},[t._v("'gjs-style'")]),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(".")]),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,s=this._self._c||t;return s("h2",{attrs:{id:"storage-api"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#storage-api","aria-hidden":"true"}},[this._v("#")]),this._v(" Storage API")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"define-new-storage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#define-new-storage","aria-hidden":"true"}},[this._v("#")]),this._v(" Define new storage")])},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  "),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(" type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'simple-storage'")]),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\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Here our `simple-storage` implementation")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" SimpleStorage "),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\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),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("'simple-storage'")]),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("/**\n   * Load the data\n   * @param  {Array} keys Array containing values to load, eg, ['gjs-components', 'gjs-style', ...]\n   * @param  {Function} clb Callback function to call when the load is ended\n   * @param  {Function} clbErr Callback function to call in case of errors\n   */")]),t._v("\n  "),a("span",{attrs:{class:"token function"}},[t._v("load")]),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("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\n    keys"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("forEach")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key "),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(" value "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" SimpleStorage"),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(";")]),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 punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        result"),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),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(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n    "),a("span",{attrs:{class:"token comment"}},[t._v("// Might be called inside some async method")]),t._v("\n    "),a("span",{attrs:{class:"token function"}},[t._v("clb")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("result"),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  "),a("span",{attrs:{class:"token comment"}},[t._v("/**\n   * Store the data\n   * @param  {Object} data Data object to store\n   * @param  {Function} clb Callback function to call when the load is ended\n   * @param  {Function} clbErr Callback function to call in case of errors\n   */")]),t._v("\n  "),a("span",{attrs:{class:"token function"}},[t._v("store")]),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")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token keyword"}},[t._v("let")]),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(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      SimpleStorage"),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[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(";")]),t._v("\n    "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{attrs:{class:"token comment"}},[t._v("// Might be called inside some async method")]),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("\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,s=this._self._c||t;return s("h3",{attrs:{id:"extend-storage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#extend-storage","aria-hidden":"true"}},[this._v("#")]),this._v(" Extend storage")])},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(" sm "),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\nsm"),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("'local-remote'")]),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 function"}},[t._v("store")]),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("const")]),t._v(" remote "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),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("'remote'")]),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(" local "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),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("'local'")]),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    remote"),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("(")]),t._v("data"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" err "),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("// eg. some error on remote side, store it locally")]),t._v("\n      local"),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("(")]),t._v("data"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbError"),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\n  "),a("span",{attrs:{class:"token function"}},[t._v("load")]),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 comment"}},[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")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("If you need to completely replace the storage, just use the same id in "),s("code",[this._v("add")]),this._v(" method")])},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",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),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("'local'")]),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("// New logic for the local storage")]),t._v("\n  "),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(" "),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 punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  "),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(" "),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 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,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.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[this._v("#")]),this._v(" Events")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("Loading animation on storage requests")])])},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",[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("'storage:start'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" startLoading"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),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("'storage:end'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" endLoading"),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("ul",[s("li",[this._v("Error handling")])])},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",[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("'storage:error'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("err"),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 function"}},[t._v("alert")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token template-string"}},[a("span",{attrs:{class:"token string"}},[t._v("`Error: ")]),a("span",{attrs:{class:"token interpolation"}},[a("span",{attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("err"),a("span",{attrs:{class:"token interpolation-punctuation 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 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("ul",[s("li",[this._v("Extend parameters to store")])])},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",[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("'storage:start:store'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("objectToStore"),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("needToAddExtraParam"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      objectToStore"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("customHtml "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token template-string"}},[a("span",{attrs:{class:"token string"}},[t._v("`
...")]),a("span",{attrs:{class:"token interpolation"}},[a("span",{attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getHtml")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{attrs:{class:"token string"}},[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")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("Do stuff post load")])])},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",[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("'storage:end:load'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("resultObject"),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("resultObject"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hasSomeKey"),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("// do stuff")]),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")])])])}],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/3.f559383d.js b/docs/assets/js/3.f559383d.js
new file mode 100644
index 000000000..be851815c
--- /dev/null
+++ b/docs/assets/js/3.f559383d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{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:''})]}),h={el:"#panel__right4",id:"layers",resizable:{maxDim:350,minDim:200,tc:0,cl:1,cr:0,bc:0,keyWidth:"flex-basis"}},d={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:[d,b]},m={id:"panel-switcher",buttons:[d,b,v]},w={id:"panel-switcher",buttons:[Object.assign({},d,{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:[h]}}),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}),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}},176:function(e,t,s){"use strict";s.r(t);var n=s(177),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},177:function(e,t,s){"use strict";e.exports={mounted:function(){var e=s(174);window.editor2=grapesjs.init(e.gjsConfigBlocks)}}},178:function(e,t,s){},201:function(e,t,s){"use strict";var n=s(178);s.n(n).a},216: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:"gjs",attrs:{id:"gjs2"}},[t("h1",[this._v("Hello World Component!")])]),t("div",{attrs:{id:"blocks2"}})])}];s.d(t,"a",function(){return n}),s.d(t,"b",function(){return a})},217:function(e,t,s){"use strict";s.r(t);var n=s(216),a=s(176);for(var i in a)"default"!==i&&function(e){s.d(t,e,function(){return a[e]})}(i);s(201);var o=s(1),l=Object(o.a)(a.default,n.a,n.b,!1,null,null,null);l.options.__file="DemoBasicBlocks.vue",t.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/30.16f00928.js b/docs/assets/js/30.16f00928.js
deleted file mode 100644
index 6965b6b30..000000000
--- a/docs/assets/js/30.16f00928.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{202:function(e,t,s){"use strict";s.r(t);var a=s(238),n=s(214);for(var i in n)"default"!==i&&function(e){s.d(t,e,function(){return n[e]})}(i);s(245);var l=s(1),o=Object(l.a)(n.default,a.a,a.b,!1,null,null,null);t.default=o.exports},211: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"}]}]}]},l={scrollLayers:0},o={},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]},w={id:"panel-switcher",buttons:[h,b,v]},m={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({},o,{appendTo:"#styles-container5"})}),_=Object.assign({},x,{container:"#gjs6",blockManager:Object.assign({},a,{appendTo:"#blocks6"}),layerManager:Object.assign({},l,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container6"})}),k=Object.assign({},x,{container:"#gjs7",blockManager:Object.assign({},a,{appendTo:"#blocks7"}),layerManager:Object.assign({},l,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container7"}),deviceManager:r}),C=Object.assign({},x,{container:"#gjs8",blockManager:Object.assign({},n,{appendTo:"#blocks8"}),layerManager:Object.assign({},l,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container8"}),deviceManager:r});e.exports={gjsConfigStart:f,gjsConfigBlocks:x,gjsConfigPanels:M,gjsConfigLayers:O,gjsConfigStyle:T,gjsConfigTraits:_,gjsConfigDevices:k,gjsConfigTheme:C,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:d,panelSwitcher:u,panelSwitcherTraits:w,panelSwitcherTraitsIcons:m,panelDevices:y,panelDevicesIcons:j}},212:function(e,t,s){},213:function(e,t,s){"use strict";s(24),e.exports={mounted:function(){var e=s(211),t=grapesjs.init(e.gjsConfigTraits);t.Panels.addPanel(Object.assign({},e.panelTop,{el:"#panel__top6"})),t.Panels.addPanel(Object.assign({},e.panelBasicActions,{el:"#panel__basic-actions6"})),t.Panels.addPanel(Object.assign({},e.panelSidebar,{el:"#panel__right6"})),t.Panels.addPanel(Object.assign({},e.panelSwitcherTraits,{el:"#panel__switcher6"})),window.editor6=t}}},214:function(e,t,s){"use strict";s.r(t);var a=s(213),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},238: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__top6"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions6"}}),t("div",{staticClass:"panel__switcher",attrs:{id:"panel__switcher6"}})]),t("div",{staticClass:"editor-row"},[t("div",{staticClass:"editor-canvas"},[t("div",{staticClass:"gjs",attrs:{id:"gjs6"}},[t("h1",[this._v("Hello World Component!")])])]),t("div",{staticClass:"panel__right",attrs:{id:"panel__right6"}},[t("div",{staticClass:"layers-container",attrs:{id:"layers-container6"}}),t("div",{staticClass:"styles-container",attrs:{id:"styles-container6"}}),t("div",{staticClass:"traits-container",attrs:{id:"traits-container6"}})])]),t("div",{attrs:{id:"blocks6"}})])}];s.d(t,"a",function(){return a}),s.d(t,"b",function(){return n})},245:function(e,t,s){"use strict";var a=s(212);s.n(a).a}}]);
\ No newline at end of file
diff --git a/docs/assets/js/12.aff1f64d.js b/docs/assets/js/30.d85f40d0.js
similarity index 99%
rename from docs/assets/js/12.aff1f64d.js
rename to docs/assets/js/30.d85f40d0.js
index 3521f3422..8dbef65fa 100644
--- a/docs/assets/js/12.aff1f64d.js
+++ b/docs/assets/js/30.d85f40d0.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{188: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);s.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{227: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/31.6be64816.js b/docs/assets/js/31.6be64816.js
deleted file mode 100644
index 729334d49..000000000
--- a/docs/assets/js/31.6be64816.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{203:function(e,t,s){"use strict";s.r(t);var a=s(239),n=s(217);for(var i in n)"default"!==i&&function(e){s.d(t,e,function(){return n[e]})}(i);s(246);var l=s(1),o=Object(l.a)(n.default,a.a,a.b,!1,null,null,null);t.default=o.exports},211: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"}]}]}]},l={scrollLayers:0},o={},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]},w={id:"panel-switcher",buttons:[h,b,v]},m={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}),O=Object.assign({},x,{container:"#gjs3",blockManager:Object.assign({},a,{appendTo:"#blocks3"})}),M=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({},o,{appendTo:"#styles-container5"})}),_=Object.assign({},x,{container:"#gjs6",blockManager:Object.assign({},a,{appendTo:"#blocks6"}),layerManager:Object.assign({},l,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container6"})}),C=Object.assign({},x,{container:"#gjs7",blockManager:Object.assign({},a,{appendTo:"#blocks7"}),layerManager:Object.assign({},l,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container7"}),deviceManager:r}),k=Object.assign({},x,{container:"#gjs8",blockManager:Object.assign({},n,{appendTo:"#blocks8"}),layerManager:Object.assign({},l,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container8"}),deviceManager:r});e.exports={gjsConfigStart:f,gjsConfigBlocks:x,gjsConfigPanels:O,gjsConfigLayers:M,gjsConfigStyle:T,gjsConfigTraits:_,gjsConfigDevices:C,gjsConfigTheme:k,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:d,panelSwitcher:u,panelSwitcherTraits:w,panelSwitcherTraitsIcons:m,panelDevices:y,panelDevicesIcons:j}},215:function(e,t,s){},216:function(e,t,s){"use strict";s(24),e.exports={mounted:function(){var e=s(211),t=grapesjs.init(e.gjsConfigTheme);t.Panels.addPanel(Object.assign({},e.panelTop,{el:"#panel__top8"})),t.Panels.addPanel(Object.assign({},e.panelBasicActionsIcons,{el:"#panel__basic-actions8"})),t.Panels.addPanel(Object.assign({},e.panelSidebar,{el:"#panel__right8"})),t.Panels.addPanel(Object.assign({},e.panelSwitcherTraitsIcons,{el:"#panel__switcher8"})),t.Panels.addPanel(Object.assign({},e.panelDevicesIcons,{el:"#panel__devices8"})),window.editor8=t}}},217:function(e,t,s){"use strict";s.r(t);var a=s(216),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},239: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",{staticClass:"gjs__themed"},[t("div",{staticClass:"panel__top",attrs:{id:"panel__top8"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions8"}}),t("div",{staticClass:"panel__devices",attrs:{id:"panel__devices8"}}),t("div",{staticClass:"panel__switcher",attrs:{id:"panel__switcher8"}})]),t("div",{staticClass:"editor-row"},[t("div",{staticClass:"editor-canvas"},[t("div",{staticClass:"gjs",attrs:{id:"gjs8"}},[t("h1",[this._v("Hello World Component!")])])]),t("div",{staticClass:"panel__right",attrs:{id:"panel__right8"}},[t("div",{staticClass:"layers-container",attrs:{id:"layers-container8"}}),t("div",{staticClass:"styles-container",attrs:{id:"styles-container8"}}),t("div",{staticClass:"traits-container",attrs:{id:"traits-container8"}})])]),t("div",{attrs:{id:"blocks8"}})])}];s.d(t,"a",function(){return a}),s.d(t,"b",function(){return n})},246:function(e,t,s){"use strict";var a=s(215);s.n(a).a}}]);
\ No newline at end of file
diff --git a/docs/assets/js/11.1feb9616.js b/docs/assets/js/31.f51ca3b9.js
similarity index 60%
rename from docs/assets/js/11.1feb9616.js
rename to docs/assets/js/31.f51ca3b9.js
index 9182244c6..c97693935 100644
--- a/docs/assets/js/11.1feb9616.js
+++ b/docs/assets/js/31.f51ca3b9.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{189:function(t,s,e){"use strict";e.r(s);var n=e(1),a=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);s.default=a.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{226: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.4ae7d1c2.js b/docs/assets/js/32.4ae7d1c2.js
deleted file mode 100644
index 0a0dd5718..000000000
--- a/docs/assets/js/32.4ae7d1c2.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{204:function(e,t,s){"use strict";s.r(t);var a=s(240),n=s(220);for(var i in n)"default"!==i&&function(e){s.d(t,e,function(){return n[e]})}(i);s(247);var l=s(1),o=Object(l.a)(n.default,a.a,a.b,!1,null,null,null);t.default=o.exports},211: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"}]}]}]},l={scrollLayers:0},o={},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]},w={id:"panel-switcher",buttons:[h,b,v]},m={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({},o,{appendTo:"#styles-container5"})}),_=Object.assign({},x,{container:"#gjs6",blockManager:Object.assign({},a,{appendTo:"#blocks6"}),layerManager:Object.assign({},l,{appendTo:"#layers-container6"}),styleManager:Object.assign({},i,{appendTo:"#styles-container6"}),traitManager:Object.assign({},c,{appendTo:"#traits-container6"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container6"})}),k=Object.assign({},x,{container:"#gjs7",blockManager:Object.assign({},a,{appendTo:"#blocks7"}),layerManager:Object.assign({},l,{appendTo:"#layers-container7"}),styleManager:Object.assign({},i,{appendTo:"#styles-container7"}),traitManager:Object.assign({},c,{appendTo:"#traits-container7"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container7"}),deviceManager:r}),S=Object.assign({},x,{container:"#gjs8",blockManager:Object.assign({},n,{appendTo:"#blocks8"}),layerManager:Object.assign({},l,{appendTo:"#layers-container8"}),styleManager:Object.assign({},i,{appendTo:"#styles-container8"}),traitManager:Object.assign({},c,{appendTo:"#traits-container8"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container8"}),deviceManager:r});e.exports={gjsConfigStart:f,gjsConfigBlocks:x,gjsConfigPanels:M,gjsConfigLayers:O,gjsConfigStyle:T,gjsConfigTraits:_,gjsConfigDevices:k,gjsConfigTheme:S,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:d,panelSwitcher:u,panelSwitcherTraits:w,panelSwitcherTraitsIcons:m,panelDevices:y,panelDevicesIcons:j}},218:function(e,t,s){},219:function(e,t,s){"use strict";s(24),e.exports={mounted:function(){var e=s(211),t=grapesjs.init(e.gjsConfigStyle);t.Panels.addPanel(Object.assign({},e.panelTop,{el:"#panel__top5"})),t.Panels.addPanel(Object.assign({},e.panelBasicActions,{el:"#panel__basic-actions5"})),t.Panels.addPanel(Object.assign({},e.panelSidebar,{el:"#panel__right5"})),t.Panels.addPanel(Object.assign({},e.panelSwitcher,{el:"#panel__switcher5"})),window.editor5=t}}},220:function(e,t,s){"use strict";s.r(t);var a=s(219),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},240: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__top5"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions5"}}),t("div",{staticClass:"panel__switcher",attrs:{id:"panel__switcher5"}})]),t("div",{staticClass:"editor-row"},[t("div",{staticClass:"editor-canvas"},[t("div",{staticClass:"gjs",attrs:{id:"gjs5"}},[t("h1",[this._v("Hello World Component!")])])]),t("div",{staticClass:"panel__right",attrs:{id:"panel__right5"}},[t("div",{staticClass:"layers-container",attrs:{id:"layers-container5"}}),t("div",{staticClass:"styles-container",attrs:{id:"styles-container5"}})])]),t("div",{attrs:{id:"blocks5"}})])}];s.d(t,"a",function(){return a}),s.d(t,"b",function(){return n})},247:function(e,t,s){"use strict";var a=s(218);s.n(a).a}}]);
\ No newline at end of file
diff --git a/docs/assets/js/10.4e962f3e.js b/docs/assets/js/32.5594c9d1.js
similarity index 99%
rename from docs/assets/js/10.4e962f3e.js
rename to docs/assets/js/32.5594c9d1.js
index 17f5de309..cb45546d7 100644
--- a/docs/assets/js/10.4e962f3e.js
+++ b/docs/assets/js/32.5594c9d1.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{190: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 start using GrapesJS you have to import it inside your project, so let's import its latest version")]),t._m(3),a("p",[t._v("or if you're in node environment")]),t._m(4),t._m(5),a("p",[t._v("The first step is to define the interface of our editor and for this purpose we gonna start from basic HTML layouts.\nFinding 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, by providing just few helpers but letting the user define the whole interface, this guarantees maximum flexibility.\nThe main part of the GrapesJS editor is the canvas, this is where you gonna create the whole structure of your templates and you definitely can't miss it. Let's try to initiate the editor with just 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 (when you select components in the canvas, the toolbar is shown). For now we just see the example template taken from the container. Let's see now how can we 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 from creating another container and append inside it few basic blocks which we can later use 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 see we add our blocks via the initial configuration, which is ok, but obviously there might be the case 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 get more about blocks we suggest to read its dedicated page: "),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 in GrapesJS Component, which is an object containing informations 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, so, for example, if you add a new attribute to the model, not only it will be available in the export code (will see later how to get it) but also the element you see in the canvas is updated with new attributes.\nWhile this is a common behavior what it's cool about Components that you can create a totally decoupled view and show to the user whatever you desire (so not necessary reflecting the model). For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If want to get more about Custom Components and how to create and extend them, we recommend to check out "),a("router-link",{attrs:{to:"./modules/Components.html"}},[t._v("Component Manager Module")]),t._v(".")],1),a("p",[t._v("GrapesJS comes along with few "),a("router-link",{attrs:{to:"./modules/Components.html#built-in-components"}},[t._v("built-in Components")]),t._v(" which enable different core features once rendered in canvas. Just to mention few of them, by double clicking on the image component you will see show up 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 customizable 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 the "),a("router-link",{attrs:{to:"./api/components.html"}},[t._v("Components API")]),t._v(" and see 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("So, 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 and execute also 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 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 a layer manger. It's just 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 probably 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. A common use of traits is the ability 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 just gonna show you how to render available traits, for more details on how to extend them we suggest to 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 some of the inner component you should see its default traits.")]),t._m(34),a("p",[t._v("GrapesJS implements also a module which allows you to work with responsive templates easily. Let's see how to define different devices and some 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 the "),a("router-link",{attrs:{to:"./api/panels.html"}},[t._v("Device Manager API")]),t._v(" to get all available methods")],1)]),t._m(41),a("p",[t._v("Once you finished with defining you 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 looks like")]),t._m(42),t._m(43),a("p",[t._v("Let's check also the configuration required to setup the remote storage")]),t._m(44),a("p",[t._v("As you might noticed, we've left some default option unchanged, increased changes necessary for autosave triggering and passed remote endpoints.\nIf you prefer you could also disable the autosaving and do it by yourself using some custom command")]),t._m(45),a("p",[t._v("To get a better overview of the Storage Manager, how correctly you should store/load the template and how to define new storages you have to 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 or 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 yours before the import")]),t._m(47),a("p",[t._v('In case of a simple CSS you just 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 gonna 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 guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.\nLet's see how to create a completely customized page builder from scratch. The last demo of this page represents 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

-    
+    
 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 5680acb64..fe83799c7 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 Getting Started
This guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.
+    
 Getting Started
This guide is a step-by-step introduction for everyone who wants to start creating its own builder with GrapesJS. This is not a complete guide of all functionalities but just a concise overview of most common modules.
 Let's see how to create a completely customized page builder from scratch. The last demo of this page represents the final result
 Import the library
Before start using GrapesJS you have to import it inside your project, so let's import its latest version
<link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
 <script src="//unpkg.com/grapesjs"></script>
 <!--
@@ -581,6 +581,6 @@ To complete our builder let's customize its color palette and to make it more vi
           Asset Manager
          →
       

-    
+    
   
 
diff --git a/docs/guides/Replace-Rich-Text-Editor.html b/docs/guides/Replace-Rich-Text-Editor.html
index ac1c041c9..400721993 100644
--- a/docs/guides/Replace-Rich-Text-Editor.html
+++ b/docs/guides/Replace-Rich-Text-Editor.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 Replace the built-in Rich Text Editor
As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.
In the following guide we'll integrate the CKEditor and to accomplish this task we just need to provide few functions to the GrapesJS API method setCustomRte as an interface.
 Interface
 Enable
The first step is to indicate how to enable the third-party library and so for we gonna start with the enable() function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the rte argument.
var editor = grapesjs.init({...});
+    
 Replace the built-in Rich Text Editor
As you might have noticed the default Rich Text Editor (RTE) is really tiny and so doesn't seem like a complete solution as a text editor. Instead of showing how to add new commands inside the default one we'll show how to completely replace it with another one.
In the following guide we'll integrate the CKEditor and to accomplish this task we just need to provide few functions to the GrapesJS API method setCustomRte as an interface.
 Interface
 Enable
The first step is to indicate how to enable the third-party library and so for we gonna start with the enable() function. This method should take care of the first initialization of our custom RTE but also for the next time is called on the same element, this is why there is the rte argument.
var editor = grapesjs.init({...});
 editor.setCustomRte({
   /**
    * Enabling the custom RTE
@@ -98,6 +98,6 @@ Obviously, each third-party library has its own APIs and can present some limita
         ← 

-    
+    
   
 
diff --git a/docs/index.html b/docs/index.html
index 97af25c05..8096539a9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 Introduction
 What is GrapesJS?
At first look you might probably think it's just another kind of page/HTML builder, but actually is something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don't just think about web pages, we use HTML-like structure basically everywhere: Newsletters (eg. MJML), Native Mobile Applications (eg. React Native), Native Desktop Applications (eg. Vuido), PDFs (eg. React PDF), etc. So, for everything you can imagine as a set of elements like <tag some="attribute">... other nested elements ...</tag> you can create easily a GrapesJS builder around it and then use it independently in some of your applications.
+    
 Introduction
 What is GrapesJS?
At first look you might probably think it's just another kind of page/HTML builder, but actually is something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don't just think about web pages, we use HTML-like structure basically everywhere: Newsletters (eg. MJML), Native Mobile Applications (eg. React Native), Native Desktop Applications (eg. Vuido), PDFs (eg. React PDF), etc. So, for everything you can imagine as a set of elements like <tag some="attribute">... other nested elements ...</tag> you can create easily a GrapesJS builder around it and then use it independently in some of your applications.
 GrapesJS comes along with different features and tools which enable you to craft easy to use builders, which will allow your users to create complex HTML-like templates without any knowledge of coding.
 Why GrapesJS?
Mainly, GrapesJS was designed to be used inside some CMS 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. Then, with the same concept, instead of creating just an application we decided to create a framework that could be extended and used by everyone for any kind purpose.
 Quick Start
To show up of what GrapesJS is capable of we have created some presets.
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.
 Download
Latest version: npm
You can download GrapesJS from one of this sources
  • CDNs
 
    • unpkg
 
      • https://unpkg.com/grapesjs
      • https://unpkg.com/grapesjs/dist/css/grapes.min.css
    • cdnjs
 
      • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js
      • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css
  • npm
 
    • npm i grapesjs
  • git
-
    • git clone https://github.com/artf/grapesjs.git
Edit this page on GitHub
Last Updated: 7/14/2018, 1:29:46 AM

+
 Changelog
To track changes made in the library we rely on Github Releases
Edit this page on GitHub
Last Updated: 8/13/2018, 2:12:15 PM

           Getting Started
          →
       

-    
+    
   
 
diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html
index e8e97d3c3..4627462a3 100644
--- a/docs/modules/Assets.html
+++ b/docs/modules/Assets.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 Asset Manager
GrapesJS - Asset Manager
In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS, which is intentionally lightweight and implements just an image in its core, but as you'll see next it's easy to extend and create your own asset types.
 Configuration
To change default configurations you have to pass assetManager property with the main configuration object
const editor = grapesjs.init({
+    
 Asset Manager
GrapesJS - Asset Manager
In this section, you will see how to setup and take the full advantage of built-in Asset Manager in GrapesJS, which is intentionally lightweight and implements just an image in its core, but as you'll see next it's easy to extend and create your own asset types.
 Configuration
To change default configurations you have to pass assetManager property with the main configuration object
const editor = grapesjs.init({
   ...
   assetManager: {
     assets: [...],
@@ -360,6 +360,6 @@ editor.on →
       

-    
+    
   
 
diff --git a/docs/modules/Blocks.html b/docs/modules/Blocks.html
index 6a0110429..c394bde38 100644
--- a/docs/modules/Blocks.html
+++ b/docs/modules/Blocks.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 Block Manager
GrapesJS - Block Manager
The Block is a group of Components and can be easily reused inside templates.
To better understand the difference between components and blocks, the component is more atomic so, for example, a single image,  a text box or a map fits perfectly in this concept. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).
Check Components page to see the list of built-in components and how to create your own.
Let's see how to add a new block to the editor using the Blocks API
var editor = grapesjs.init({...});
+    
 Block Manager
GrapesJS - Block Manager
The Block is a group of Components and can be easily reused inside templates.
To better understand the difference between components and blocks, the component is more atomic so, for example, a single image,  a text box or a map fits perfectly in this concept. The block is what the end user will drag inside the canvas, so it could contain a single image (single Component) or the entire section like, for example, the footer with a lot of components inside (texts, images, inputs, etc).
Check Components page to see the list of built-in components and how to create your own.
Let's see how to add a new block to the editor using the Blocks API
var editor = grapesjs.init({...});
 var blockManager = editor.BlockManager;
 
 // 'my-first-block' is the ID of the block
@@ -68,6 +68,6 @@ https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js<
           Component Manager
          →
       

-    
+    
   
 
diff --git a/docs/modules/Components-js.html b/docs/modules/Components-js.html
index 272f40d43..8cfb45aeb 100644
--- a/docs/modules/Components-js.html
+++ b/docs/modules/Components-js.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 Components & JS
In this guide you'll see how to attach component related scripts and deal with external javascript libraries (for stuff like counters, galleries, slideshows, etc.)
 Basic scripts
Let's see how to create a component with scripts using Blocks.
editor.BlockManager.add('test-block', {
+    
 Components & JS
In this guide you'll see how to attach component related scripts and deal with external javascript libraries (for stuff like counters, galleries, slideshows, etc.)
 Basic scripts
Let's see how to create a component with scripts using Blocks.
editor.BlockManager.add('test-block', {
   label: 'Test block',
   attributes: {class: 'fa fa-text'},
   content: {
@@ -163,6 +163,6 @@ script: funct
           Trait Manager
          →
       

-    
+    
   
 
diff --git a/docs/modules/Components.html b/docs/modules/Components.html
index c43dec03d..37efa7ed9 100644
--- a/docs/modules/Components.html
+++ b/docs/modules/Components.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 Component Manager
The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. 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.
 Built-in components
  • Default (Basic)
  • Text
  • Image
  • Video
  • Link
  • Map
  • Table
  • Row (for the table)
  • Cell (for the table)
 How Components work?
When we pass an HTML string to the editor like this:
<div>
+    
 Component Manager
The Component is the base element for the template composition and, usually, elements like images, text boxes, maps, etc. fit perfectly in this concept. 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.
 Built-in components
  • Default (Basic)
  • Text
  • Image
  • Video
  • Link
  • Map
  • Table
  • Row (for the table)
  • Cell (for the table)
 How Components work?
When we pass an HTML string to the editor like this:
<div>
   <img src="https://path/image" />
   <span title="foo">bar</span>
 </div>
@@ -191,6 +191,6 @@ comps.addTyp
           Components & JS
          →
       

-    
+    
   
 
diff --git a/docs/modules/Plugins.html b/docs/modules/Plugins.html
index 9a2babe5d..d99e8ab47 100644
--- a/docs/modules/Plugins.html
+++ b/docs/modules/Plugins.html
@@ -9,8 +9,8 @@
   
   
     
-    
-    
+    
+    
   
   
     
 Plugins
Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.
 Basic plugin
Generally, you would make plugins in separated files to keep thing cleaner, so you'll probably get a similar structure:
/your/path/to/grapesjs.min.js
+    
 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>',
+      });
+  }
+
+  var editor = grapesjs.init({
+      container : '#gjs',
+      plugins: [myPlugin]
+  });
+
This means that plugins can be moved to separate folders to keep thing cleaner or imported from NPM.
  import myPlugin from './plugins/myPlugin'
+  import npmPackage from '@npm/package'
+
+  var editor = grapesjs.init({
+      container : '#gjs',
+      plugins: [myPlugin, npmPackage]
+  });
+
 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
-
The order is important as before loading your plugin, GrapesJS have to be loaded first.
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:
@@ -50,8 +68,7 @@
       plugins: ['my-plugin-name']
   });
 </script>
-
 Plugins with options
It's also possible to pass custom parameters to plugins in the way to make them more flexible.
<script type="text/javascript">
-  var editor = grapesjs.init({
+
 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'],
       pluginsOpts: {
@@ -60,18 +77,29 @@
         }
       }
   });
-</script>
 
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' }
 })
-
 Boilerplate
If you want to start with a production-ready boilerplate, you might want to try  grapesjs-plugin-boilerplate which you can clone and start developing a plugin immediately. For more informations check the repository
Edit this page on GitHub
Last Updated: 7/7/2018, 4:18:04 PM

+

This also works with plugins that aren't named.

  import myPlugin from '../plugin'
+
+  var editor = grapesjs.init({
+      container : '#gjs',
+      plugins: [myPlugin],
+      pluginsOpts: {
+        [myPlugin]: {
+          customField: 'customValue'
+        }
+      }
+  });
+

Named Plugins vs Non-Named Plugins

When you use a named plugin, then that name must be unique across all other plugins.

grapesjs.plugins.add('my-plugin-name', fn);
+

In this example, the plugin name is my-plugin-name and can't be used by other plugins. To avoid namespace restrictions use basic plugins that are purely functional.

Boilerplate

If you want to start with a production-ready boilerplate for a named plugin, you might want to try grapesjs-plugin-boilerplate which you can clone and start developing a named plugin immediately. For more informations check the repository

  • https://github.com/artf/grapesjs-preset-webpage
  • https://github.com/artf/grapesjs-preset-newsletter
Edit this page on GitHub
Last Updated: 8/2/2018, 1:42:17 AM

← Replace Rich Text Editor →

- + diff --git a/docs/modules/Storage.html b/docs/modules/Storage.html index 6453c9cbd..f47b6a559 100644 --- a/docs/modules/Storage.html +++ b/docs/modules/Storage.html @@ -9,8 +9,8 @@ - - + +

Storage Manager

The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings

WARNING

This guide requires GrapesJS v0.14.15 or higher

Basic configuration

The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in LocalStorage which just leverages localStorage API. +

Storage Manager

The aim of this guide is to show how to setup correctly your storage configuration for common usages of the editor and explain also some additional advanced settings

WARNING

This guide requires GrapesJS v0.14.15 or higher

Basic configuration

The storage manager is a built-in module implemented inside GrapesJS which allows the persistence of your data. By default, GrapesJS saves the data locally by using the built-in LocalStorage which just leverages localStorage API. You can initialize the editor with different storage configurations via storageManager option:

const editor = grapesjs.init({
   ...
   // Default configurations
@@ -192,6 +192,6 @@ editor.on →
- + diff --git a/docs/modules/Style-manager.html b/docs/modules/Style-manager.html index 7a204872d..1eb2f2350 100644 --- a/docs/modules/Style-manager.html +++ b/docs/modules/Style-manager.html @@ -9,8 +9,8 @@ - - + +

Style Manager

Coming soon

Built-in properties

Here you can find all the available built-in properties that you can use inside Style Manager via buildProps:

float, position, text-align, display, font-family, font-weight, border, border-style, border-color, border-width, box-shadow, background-repeat, background-position, background-attachment, background-size, transition, transition-duration, transition-property, transition-timing-function, top, right, bottom, left, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, width, heigth, min-width, min-heigth, max-width, max-heigth, font-size, letter-spacing, line-height, text-shadow, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, perspective, transform, transform-rotate-x, transform-rotate-y, transform-rotate-z, transform-scale-x, transform-scale-y, transform-scale-z, color, background-color, background, background-image, cursor

Example usage:

...
+

Style Manager

Coming soon

Built-in properties

Here you can find all the available built-in properties that you can use inside Style Manager via buildProps:

float, position, text-align, display, font-family, font-weight, border, border-style, border-color, border-width, box-shadow, background-repeat, background-position, background-attachment, background-size, transition, transition-duration, transition-property, transition-timing-function, top, right, bottom, left, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, width, heigth, min-width, min-heigth, max-width, max-heigth, font-size, letter-spacing, line-height, text-shadow, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, perspective, transform, transform-rotate-x, transform-rotate-y, transform-rotate-z, transform-scale-x, transform-scale-y, transform-scale-z, color, background-color, background, background-image, cursor

Example usage:

...
   styleManager : {
     sectors: [{
       name: 'Dimension',
@@ -42,9 +42,9 @@
         ← 
-          Storag Manager
+          Storage Manager
          →
- + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index dd6835f9d..a11714df6 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -9,8 +9,8 @@ - - + +

Trait Manager

In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as Settings of each 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 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:

In this case we gonna 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({...});
+

Trait Manager

In GrapesJS, Traits could define different parameters and behaviors of a single component. The user generally will see traits as Settings of each 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 2 traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see just this:

In this case we gonna 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;
@@ -125,6 +125,6 @@ traits: [
           Style Manager
          →
- +