diff --git a/docs/404.html b/docs/404.html index 8d7201fc4..b41d47732 100644 --- a/docs/404.html +++ b/docs/404.html @@ -4,18 +4,18 @@ GrapesJS - + - - + + -

404

How did we get here?
+ - + diff --git a/docs/Home.html b/docs/Home.html index 9fb2860ef..0a220954a 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -4,13 +4,13 @@ Getting started | GrapesJS - + - - + +
GrapesJS

# 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>
+     
   
 
# 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>
+<div id="gjs"></div>
 
-<script type="text/javascript">
+<script type="text/javascript">
   var editor = grapesjs.init({
       container : '#gjs',
       components: '<div class="txt-red">Hello world!</div>',
@@ -336,6 +336,6 @@ The default one is the localStorage which is pretty simple and all the data are
   }
 ...
 
Check Storage Manager API Reference
- + diff --git a/docs/api/assets.html b/docs/api/assets.html index 876751740..b456cb5aa 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -4,13 +4,13 @@ GrapesJS - + - - + +
GrapesJS

# 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
  }
@@ -88,6 +88,6 @@ passed entity 

-    
+    
   
 
diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html
index 9473af80c..e7182e6d5 100644
--- a/docs/api/block_manager.html
+++ b/docs/api/block_manager.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
  GrapesJS 
 
  
   
 
# 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
  }
@@ -88,6 +88,6 @@ document.get
       
       →
     
 

-    
+    
   
 
diff --git a/docs/api/canvas.html b/docs/api/canvas.html
index 938d6f016..71b1fa444 100644
--- a/docs/api/canvas.html
+++ b/docs/api/canvas.html
@@ -4,13 +4,13 @@
     
     
     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
 
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
  }
@@ -76,6 +76,6 @@ styles: 
       
       →
     
 

-    
+    
   
 
diff --git a/docs/api/commands.html b/docs/api/commands.html
index 4a3a4ee4b..c7285ef20 100644
--- a/docs/api/commands.html
+++ b/docs/api/commands.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
  GrapesJS 
 
  
   
 
# 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
  }
@@ -79,6 +79,6 @@ commands.isA
       
       →
     
 

-    
+    
   
 
diff --git a/docs/api/component.html b/docs/api/component.html
index bcb793a8c..d2cbab24f 100644
--- a/docs/api/component.html
+++ b/docs/api/component.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
  GrapesJS 
 
  
   
 
# Component
 
The Component object represents a single node of our template structure, so when you update its properties the changes are
+     
   
 
# Component
 
The Component object represents a single node of our template structure, so when you update its properties the changes are
 immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
 the tree of nodes).
 An example on how to update properties:
 
component.set({
@@ -73,8 +73,8 @@ also before rendering the component
 
.log(Section);
 
Returns Component Found component, otherwise undefined
 
# 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
 
  • attrs Object Key value attributes
    •  
  • opts   (optional, default {})
 
# Examples
 
component.setAttributes({ id: 'test', 'data-key': 'value' });
-
Returns this
 
# addAttributes
 
Add attributes to the component
 
# Parameters
  
# Examples
 
component.addAttributes({ 'data-key': 'value' });
+
Returns (Component | Array<Component>) New added component/s
 
# setAttributes
 
Update attributes of the component
 
# Parameters
 
  • attrs Object Key value attributes
    •  
  • opts   (optional, default {})
    •  
  • options Object Options for the model update
 
# Examples
 
component.setAttributes({ id: 'test', 'data-key': 'value' });
+
Returns this
 
# addAttributes
 
Add attributes to the component
 
# Parameters
 
  • attrs Object Key value attributes
    •  
  • opts   (optional, default {})
    •  
  • options Object Options for the model update
 
# 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
 
  • prop Object 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');
@@ -152,7 +152,7 @@ This works only if the component is already rendered
 

 Initially, the list, was set statically on the Component object but it was
 not ok, as it was shared between multiple editor instances
 
# Parameters
 
  • model
 
# checkId
 
This method checks, for each parsed component and style object
 (are not Components/CSSRules yet), for duplicated id and fixes them
-This method is used in Components.js just after the parsing
 
# Parameters
 
  • components
    •  
  • styles   (optional, default [])
    •  
  • list   (optional, default {})
  

+This method is used in Components.js just after the parsing
 
# Parameters
 
  • components
    •  
  • styles   (optional, default [])
    •  
  • list   (optional, default {})
  

       ←
       
 GrapesJS 
 
  
   
 
# 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
  }
@@ -70,7 +70,7 @@ comp1Children..remove(comp2);
 
Returns Components Collection of components
 
# addComponent
 
Add new components to the wrapper's children. It's the same
 as 'domComponents.getComponents().add(...)'
 
# Parameters
 
  • component (Object | Component | Array<Object>) Component/s to add
-
    • component.tagName string Tag name (optional, default 'div')
      •  
    • component.type string Type of the component. Available: ''(default), 'text', 'image' (optional, default '')
      •  
    • component.removable boolean If component is removable (optional, default true)
      •  
    • component.draggable boolean If is possible to move the component around the structure (optional, default true)
      •  
    • component.droppable boolean If is possible to drop inside other components (optional, default true)
      •  
    • component.badgable boolean If the badge is visible when the component is selected (optional, default true)
      •  
    • component.stylable boolean If is possible to style component (optional, default true)
      •  
    • component.copyable boolean If is possible to copy&paste the component (optional, default true)
      •  
    • component.content string String inside component (optional, default '')
      •  
    • component.style Object Style object (optional, default {})
      •  
    • component.attributes Object Attribute object (optional, default {})
 
# Examples
 
// Example of a new component with some extra property
+
  • component.tagName string Tag name (optional, default 'div')
    •  
  • component.type string Type of the component. Available: ''(default), 'text', 'image' (optional, default '')
    •  
  • component.removable boolean If component is removable (optional, default true)
    •  
  • component.draggable boolean If is possible to move the component around the structure (optional, default true)
    •  
  • component.droppable boolean If is possible to drop inside other components (optional, default true)
    •  
  • component.badgable boolean If the badge is visible when the component is selected (optional, default true)
    •  
  • component.stylable boolean If is possible to style component (optional, default true)
    •  
  • component.copyable boolean If is possible to copy&paste the component (optional, default true)
    •  
  • component.content string String inside component (optional, default '')
    •  
  • component.style Object Style object (optional, default {})
    •  
  • component.attributes Object Attribute object (optional, default {})
 
  • opt Object the options object to be used by the [Components.add]getComponents method (optional, default {})
    •  
    # Examples
     
    // Example of a new component with some extra property
 var comp1 = domComponents.addComponent({
   tagName: 'div',
   removable: true, // Can't remove it
@@ -85,7 +85,7 @@ Once the wrapper is rendered, and it's what happens when you init the editor,
 the all new components will be added automatically and property changes are all
 updated immediately
     
    Returns HTMLElement
     
    # clear
     
    Remove all components
     
    Returns this
     
    # addType
     
    Add new component type.
 Read more about this in Define New Component
     
    # Parameters
      
    Returns this
     
    # getType
     
    Get component type.
-Read more about this in Define New Component
     
    # Parameters
      
    Returns Object Component type defintion, eg. { model: ..., view: ... }
     
    # removeType
     
    Remove component type
     
    # Parameters
      
    Returns (Object | undefined) Removed component type, undefined otherwise
     
    # getTypes
     
    Return the array of all types
     
    Returns Array
      
    
+Read more about this in Define New Component
     
    # Parameters
      
    Returns Object Component type defintion, eg. { model: ..., view: ... }
     
    # removeType
     
    Remove component type
     
    # Parameters
      
    Returns (Object | undefined) Removed component type, undefined otherwise
     
    # getTypes
     
    Return the array of all types
     
    Returns Array
      
    
       ←
       
    
-    
+    
   
 
diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html
index da6242e7e..8ef0f8d3e 100644
--- a/docs/api/css_composer.html
+++ b/docs/api/css_composer.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
          GrapesJS 
     
      
       
     
    # 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
@@ -87,6 +87,6 @@ console.log<
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html
index 891fcb3b9..0d6d7d3a6 100644
--- a/docs/api/device_manager.html
+++ b/docs/api/device_manager.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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
  }
@@ -62,6 +62,6 @@ console.log<
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/api/editor.html b/docs/api/editor.html
index 76203fb9d..153f81b23 100644
--- a/docs/api/editor.html
+++ b/docs/api/editor.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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
 });
@@ -43,7 +43,7 @@ You get the Editor instance on init method and you can pass options via its 
    # Components
     
    • component:create - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
      •  
    • component:mount - Component is mounted to an element and rendered in canvas
      •  
    • component:add - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
      •  
    • component:remove - Triggered when a component is removed, the model is passed as an argument to the callback
      •  
    • component:clone - Triggered when a component is cloned, the new model is passed as an argument to the callback
      •  
    • component:update - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback
      •  
    • component:update:{propertyName} - Listen any property change, the model is passed as an argument to the callback
      •  
    • component:styleUpdate - Triggered when the style of the component is updated, the model is passed as an argument to the callback
      •  
    • component:styleUpdate:{propertyName} - Listen for a specific style property change, the model is passed as an argument to the callback
      •  
    • component:selected - New component selected, the selected model is passed as an argument to the callback
      •  
    • component:deselected - Component deselected, the deselected model is passed as an argument to the callback
      •  
    • component:toggled - Component selection changed, toggled model is passed as an argument to the callback
      •  
    • component:type:add - New component type added, the new type is passed as an argument to the callback
      •  
    • component:type:update - Component type updated, the updated type is passed as an argument to the callback
      •  
    • component:drag:start - Component drag started. Passed an object, to the callback, containing the target (component to drag), parent (parent of the component) and index (component index in the parent)
      •  
    • component:drag - During component drag. Passed the same object as in component:drag:start event, but in this case, parent and index are updated by the current pointer
      •  
    • component:drag:end - Component drag ended. Passed the same object as in component:drag:start event, but in this case, parent and index are updated by the final pointer
     
    # Blocks
     
    • block:add - New block added
      •  
    • block:remove - Block removed
      •  
    • block:drag:start - Started dragging block, model of the block is passed as an argument
      •  
    • block:drag - Dragging block, the block's model and the drag event are passed as arguments
      •  
    • block:drag:stop - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
     
    # Assets
     
    • asset:add - New asset added
      •  
    • asset:remove - Asset removed
      •  
    • asset:upload:start - Before the upload is started
      •  
    • asset:upload:end - After the upload is ended
      •  
    • asset:upload:error - On any error in upload, passes the error as an argument
      •  
    • asset:upload:response - On upload response, passes the result as an argument
     
    # Keymaps
     
    • keymap:add - New keymap added. The new keyamp object is passed as an argument
      •  
    • keymap:remove - Keymap removed. The removed keyamp object is passed as an argument
      •  
    • keymap:emit - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
      •  
    • keymap:emit:{keymapId} - keymapId emitted, in arguments you get keymapId, shortcutUsed, Event
     
    # Style Manager
     
    • styleManager:update:target - The target (Component or CSSRule) is changed
      •  
    • styleManager:change - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
      •  
    • styleManager:change:{propertyName} - As above but for a specific style property
     
    # Storages
     
    • storage:start - Before the storage request is started
      •  
    • storage:start:store - Before the store request. The object to store is passed as an argumnet (which you can edit)
      •  
    • storage:start:load - Before the load request. Items to load are passed as an argumnet (which you can edit)
      •  
    • storage:load - Triggered when something was loaded from the storage, loaded object passed as an argumnet
      •  
    • storage:store - Triggered when something is stored to the storage, stored object passed as an argumnet
      •  
    • storage:end - After the storage request is ended
      •  
    • storage:end:store - After the store request
      •  
    • storage:end:load - After the load request
      •  
    • storage:error - On any error on storage request, passes the error as an argument
      •  
    • storage:error:store - Error on store request, passes the error as an argument
      •  
    • storage:error:load - Error on load request, passes the error as an argument
     
    # Canvas
     
    • canvas:dragenter - When something is dragged inside the canvas, DataTransfer instance passed as an argument
      •  
    • canvas:dragover - When something is dragging on canvas, DataTransfer instance passed as an argument
      •  
    • canvas:drop - Something is dropped in canvas, DataTransfer instance and the dropped model are passed as arguments
      •  
    • canvas:dragend - When a drag operation is ended, DataTransfer instance passed as an argument
      •  
    • canvas:dragdata - On any dataTransfer parse, DataTransfer instance and the result are passed as arguments.
 By changing result.content you're able to customize what is dropped
     
    # Selectors
     
    • selector:add - New selector is add. Passes the new selector as an argument
      •  
    • selector:remove - Selector removed. Passes the removed selector as an argument
      •  
    • selector:update - Selector updated. Passes the updated selector as an argument
      •  
    • selector:state - State changed. Passes the new state value as an argument
     
    # RTE
     
    • rte:enable - RTE enabled. The view, on which RTE is enabled, is passed as an argument
      •  
    • rte:disable - RTE disabled. The view, on which RTE is disabled, is passed as an argument
      
    • modal:open - Modal is opened
      •  
    • modal:close - Modal is closed
     
    # Commands
     
    • run:{commandName} - Triggered when some command is called to run (eg. editor.runCommand('preview'))
      •  
    • stop:{commandName} - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
      •  
    • run:{commandName}:before - Triggered before the command is called
      •  
    • stop:{commandName}:before - Triggered before the command is called to stop
      •  
    • abort:{commandName} - Triggered when the command execution is aborted (editor.on(run:preview:before, opts => opts.abort = 1);)
      •  
    • run - Triggered on run of any command. The id and the result are passed as arguments to the callback
      •  
    • stop - Triggered on stop of any command. The id and the result are passed as arguments to the callback
     
    # General
     
    • canvasScroll - Canvas is scrolled
      •  
    • update - The structure of the template is updated (its HTML/CSS)
      •  
    • undo - Undo executed
      •  
    • redo - Redo executed
      •  
    • load - Editor is loaded
     
    # getConfig
     
    Returns configuration object
     
    # Parameters
      
    Returns any Returns the configuration object or
 the value of the specified property
     
    # getHtml
     
    Returns HTML built inside canvas
     
    # Parameters
     
    • opts
     
    Returns string HTML string
     
    # getCss
     
    Returns CSS built inside canvas
     
    # Parameters
     
    • opts Object Options (optional, default {})
-
      • opts.avoidProtected Boolean Don't include protected CSS (optional, default false)
     
    Returns string CSS string
     
    # getJs
     
    Returns JS of all components
     
    Returns string JS string
     
    # getComponents
     
    Return the complete tree of components. Use getWrapper to include also the wrapper
     
    Returns Components
     
    # getWrapper
     
    Return the wrapper and its all components
     
    Returns Component
     
    # setComponents
     
    Set components inside editor's canvas. This method overrides actual components
     
    # Parameters
      
    # Examples
     
    editor.setComponents('<div class="cls">New component</div>');
+
    • opts.avoidProtected Boolean Don't include protected CSS (optional, default false)
     
    Returns string CSS string
     
    # getJs
     
    Returns JS of all components
     
    Returns string JS string
     
    # getComponents
     
    Return the complete tree of components. Use getWrapper to include also the wrapper
     
    Returns Components
     
    # getWrapper
     
    Return the wrapper and its all components
     
    Returns Component
     
    # setComponents
     
    Set components inside editor's canvas. This method overrides actual components
     
    # Parameters
      
    # Examples
     
    editor.setComponents('<div class="cls">New component</div>');
 // or
 editor.setComponents({
  type: 'text',
@@ -60,7 +60,7 @@ editor.addCo
   classes:['cls'],
   content: 'New component'
 });
-
    Returns Array<Component>
     
    # getStyle
     
    Returns style in JSON format object
     
    Returns Object
     
    # setStyle
     
    Set style inside editor's canvas. This method overrides actual style
     
    # Parameters
      
    # Examples
     
    editor.setStyle('.cls{color: red}');
+
    Returns Array<Component>
     
    # getStyle
     
    Returns style in JSON format object
     
    Returns Object
     
    # setStyle
     
    Set style inside editor's canvas. This method overrides actual style
     
    # Parameters
      
    # Examples
     
    editor.setStyle('.cls{color: red}');
 //or
 editor.setStyle({
   selectors: ['cls']
@@ -138,7 +138,7 @@ To get more about this feature read: .t('msg2', { params: { test: 'hello' } });
 // custom local
 editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
-
    Returns String
     
    # on
     
    Attach event
     
    # Parameters
      
    Returns this
     
    # once
     
    Attach event and detach it after the first run
     
    # Parameters
      
    Returns this
     
    # off
     
    Detach event
     
    # Parameters
      
    Returns this
     
    # trigger
     
    Trigger event
     
    # Parameters
      
    Returns this
     
    # destroy
     
    Destroy the editor
     
    # render
     
    Render editor
     
    Returns HTMLElement
      
    
+
    Returns String
     
    # on
     
    Attach event
     
    # Parameters
      
    Returns this
     
    # once
     
    Attach event and detach it after the first run
     
    # Parameters
      
    Returns this
     
    # off
     
    Detach event
     
    # Parameters
      
    Returns this
     
    # trigger
     
    Trigger event
     
    # Parameters
      
    Returns this
     
    # destroy
     
    Destroy the editor
     
    # render
     
    Render editor
     
    Returns HTMLElement
      
    
       ←
       
     GrapesJS 
     
      
       
     
    # I18n
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
     
    const editor = grapesjs.init({
+     
       
     
    # I18n
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
     
    const editor = grapesjs.init({
  i18n: {
    locale: 'en',
    localeFallback: 'en',
@@ -82,6 +82,6 @@ obj.t
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/api/index.html b/docs/api/index.html
index f350e4bf3..f80d87bf1 100644
--- a/docs/api/index.html
+++ b/docs/api/index.html
@@ -4,18 +4,18 @@
     
     
     API Reference | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
     
     
      
     
    # 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.
      
     
+     
       
     
    # 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.
      
     
         Editor
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/api/keymaps.html b/docs/api/keymaps.html
index 7c6006884..0533adbf4 100644
--- a/docs/api/keymaps.html
+++ b/docs/api/keymaps.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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: {
@@ -73,6 +73,6 @@ or just a command id as a string
     
    
-    
+    
   
 
diff --git a/docs/api/modal_dialog.html b/docs/api/modal_dialog.html
index 329a2200f..ce1af68c9 100644
--- a/docs/api/modal_dialog.html
+++ b/docs/api/modal_dialog.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
          GrapesJS 
     
      
       
     
     
    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
  }
@@ -53,6 +53,6 @@ The callback will be called one only time
     
    
-    
+    
   
 
diff --git a/docs/api/panels.html b/docs/api/panels.html
index 0423a40ba..d6ee60745 100644
--- a/docs/api/panels.html
+++ b/docs/api/panels.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
          GrapesJS 
     
      
       
     
    # 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
  }
@@ -94,6 +94,6 @@ command: {
       →
     
     
    
-    
+    
   
 
diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html
index 70ce78927..e87d89522 100644
--- a/docs/api/rich_text_editor.html
+++ b/docs/api/rich_text_editor.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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({
  richTextEditor: {
    // options
@@ -108,6 +108,6 @@ rte.add
       →
     
     
    
-    
+    
   
 
diff --git a/docs/api/selector_manager.html b/docs/api/selector_manager.html
index 55049d55b..473bdbb3f 100644
--- a/docs/api/selector_manager.html
+++ b/docs/api/selector_manager.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # SelectorManager
     
    Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
+     
       
     
    # SelectorManager
     
    Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take
 a look at this code:
     
    span > #send-btn.btn{
  ...
 }
 
    <span>
-  <button id="send-btn" class="btn"></button>
+  <button id="send-btn" class="btn"></button>
 </span>
 
    In this scenario we get:
     
    • span     -> selector of type tag
      •  
    • send-btn -> selector of type id
      •  
    • btn      -> selector of type class
     
    So, for example, being btn the same class entity it'll be easier to refactor and track things.
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object
     
    const editor = grapesjs.init({
  selectorManager: {
@@ -72,6 +72,6 @@ sm.addClass<
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html
index cc1b664d5..65ae85cad 100644
--- a/docs/api/storage_manager.html
+++ b/docs/api/storage_manager.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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
  }
@@ -73,6 +73,6 @@ storageManager.
    
-    
+    
   
 
diff --git a/docs/api/style_manager.html b/docs/api/style_manager.html
index 83aa1eae8..66b57dac8 100644
--- a/docs/api/style_manager.html
+++ b/docs/api/style_manager.html
@@ -4,13 +4,13 @@
     
     
     GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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
@@ -65,7 +65,7 @@ that one will be returned
     
    }],
 }, { at: 0 });
 // With `at: 0` we place the new property at the beginning of the collection
-
    Returns (Property | null) Added Property or null in case sector doesn't exist
     
    # getProperty
     
    Get property by its CSS name and sector id
     
    # Parameters
     
    • sectorId string Sector id
      •  
    • name string CSS property name, eg. 'min-height'
     
    # Examples
     
    var property = styleManager.getProperty('mySector','min-height');
+
    Returns (Property | null) Added Property or null in case sector doesn't exist
     
    # getProperty
     
    Get property by its CSS name and sector id
     
    # Parameters
     
    • sectorId string Sector id
      •  
    • name string CSS property name (or id), eg. 'min-height'
     
    # Examples
     
    var property = styleManager.getProperty('mySector','min-height');
 
    Returns (Property | null)
     
    # removeProperty
     
    Remove a property from the sector
     
    # Parameters
     
    • sectorId string Sector id
      •  
    • name string CSS property name, eg. 'min-height'
     
    # Examples
     
    const property = styleManager.removeProperty('mySector', 'min-height');
 
    Returns Property Removed property
     
    # getProperties
     
    Get properties of the sector
     
    # Parameters
      
    # Examples
     
    var properties = styleManager.getProperties('mySector');
 
    Returns Properties Collection of properties
     
    # getModelToStyle
     
    Get what to style inside Style Manager. If you select the component
@@ -74,14 +74,28 @@ go inside its 'style' property. Otherwise, if the selected component has
 one or more classes, the function will return the corresponding CSS Rule
     
    # Parameters
     
    • model Model
      •  
    • options   (optional, default {})
     
    Returns Model
     
    # addType
     
    Add new property type
     
    # Parameters
     
    • id string Type ID
      •  
    • definition Object Definition of the type. Each definition contains
 model (business logic), view (presentation logic)
 and isType function which recognize the type of the
-passed entity
     
    # Examples
     
    styleManager.addType('my-type', {
- model: {},
- view: {},
- isType: (value) => {
-   if (value && value.type == 'my-type') {
-     return value;
+passed entity 
    # Examples
     
    styleManager.addType('my-custom-prop', {
+   create({ props, change }) {
+     const el = document.createElement('div');
+     el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
+     const inputEl = el.querySelector('.my-input');
+     inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit
+     inputEl.addEventListener('input', event => change({ event, complete: false }));
+     return el;
+   },
+   emit({ props, updateStyle }, { event, complete }) {
+     const { value } = event.target;
+     const valueRes = value + 'px';
+     // Pass a string value for the exact CSS property or an object containing multiple properties
+     // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
+     updateStyle(valueRes, { complete });
+   },
+   update({ value, el }) {
+     el.querySelector('.my-input').value = parseInt(value, 10);
+   },
+   destroy() {
+     // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.
    }
- },
 })
 
    # getType
     
    Get type
     
    # Parameters
      
    Returns Object Type definition
     
    # getTypes
     
    Get all types
     
    Returns Array
     
    # createType
     
    Create new property from type
     
    # Parameters
     
    • id string Type ID
      •  
    • options Object Options (optional, default {})
 
      • options.model Object Custom model object (optional, default {})
        •  
      • options.view Object Custom view object (optional, default {})
     
    # Examples
     
    const propView = styleManager.createType('integer', {
@@ -91,7 +105,7 @@ propView.ren
 propView.model.on('change:value', ...);
 someContainer.appendChild(propView.el);
 
    Returns PropertyView
     
    # setTarget
     
    Select different target for the Style Manager.
-It could be a Component, CSSRule, or a string of any CSS selector
     
    # Parameters
     
    • target (Component | CSSRule | String)
      •  
    • opts
     
    Returns Styleable A Component or CSSRule
      
    
+It could be a Component, CSSRule, or a string of any CSS selector
     
    # Parameters
     
    • target (Component | CSSRule | String)
      •  
    • opts
     
    Returns Styleable A Component or CSSRule
      
    
       ←
       
     GrapesJS 
     
      
       
     
    # 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();
 // { ... }
@@ -62,6 +62,6 @@ inserted component will be returned in the list) by returning an array length of
        
     
    
-    
+    
   
 
diff --git a/docs/assets/css/0.styles.d44f2c14.css b/docs/assets/css/0.styles.d44f2c14.css
deleted file mode 100644
index 36518ce1f..000000000
--- a/docs/assets/css/0.styles.d44f2c14.css
+++ /dev/null
@@ -1 +0,0 @@
-#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-color:#e67891 transparent transparent #e67891;border-style:solid;border-width:2px;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;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}@-webkit-keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;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:1rem}.search-box input{cursor:text;width:10rem;height:2rem;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:2rem;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{white-space:normal;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}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;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}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50;pointer-events:none}.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 .dropdown-title{font-weight:600;font-size:inherit}.dropdown-wrapper .dropdown-title:hover{color:#e67891}.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.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper.open:blur{display:none}.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;border-color:#ddd #ddd #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{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.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}.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{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.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}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.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}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#e67891;border-left-color:#e67891}.sidebar-heading.clickable:hover{color:#e67891}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;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 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}.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}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@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}}.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}}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#e67891}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-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;-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,div[class*=language-] pre[class*=language-]{background:transparent;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 br{-webkit-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;-webkit-user-select:none;-ms-user-select:none;user-select:none;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-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}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"}div[class~=language-php]:before{content:"php"}.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}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.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}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}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:16px;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}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-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:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-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}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-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}@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}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.img-ctr{margin:0 auto;display: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!important}.navbar .links{background-color:transparent!important}.token.string{color:#e67891}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#ffeff2!important}}.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)}.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}.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}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}
\ No newline at end of file
diff --git a/docs/assets/css/0.styles.fa50aa79.css b/docs/assets/css/0.styles.fa50aa79.css
new file mode 100644
index 000000000..e0461c9fa
--- /dev/null
+++ b/docs/assets/css/0.styles.fa50aa79.css
@@ -0,0 +1 @@
+code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#e67891}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-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;-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,div[class*=language-] pre[class*=language-]{background:transparent;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 br{-webkit-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;-webkit-user-select:none;-ms-user-select:none;user-select:none;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-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}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"}div[class~=language-php]:before{content:"php"}.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}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.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}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}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:16px;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}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-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:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-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}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-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}@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}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.img-ctr{margin:0 auto;display: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!important}.navbar .links{background-color:transparent!important}.token.string{color:#e67891}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#ffeff2!important}}.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-color:#e67891 transparent transparent #e67891;border-style:solid;border-width:2px;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;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}@-webkit-keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;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:1rem}.search-box input{cursor:text;width:10rem;height:2rem;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:2rem;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{white-space:normal;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}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;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}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#e67891}.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:1rem 1.5rem .45rem 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 .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.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.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper.open:blur{display:none}.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;border-color:#ddd #ddd #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{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.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}.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{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.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:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.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}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#e67891;border-left-color:#e67891}.sidebar-heading.clickable:hover{color:#e67891}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;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 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}.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}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@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}}.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}}.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}.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}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}
\ No newline at end of file
diff --git a/docs/assets/js/8.625d63ee.js b/docs/assets/js/10.2045a1e8.js
similarity index 82%
rename from docs/assets/js/8.625d63ee.js
rename to docs/assets/js/10.2045a1e8.js
index 909b5415b..7d2ca40b3 100644
--- a/docs/assets/js/8.625d63ee.js
+++ b/docs/assets/js/10.2045a1e8.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{273:function(e,t,s){"use strict";s(17);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:''})]}),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"}}},w={id:"panel-switcher",buttons:[d,b]},m={id:"panel-switcher",buttons:[d,b,v]},u={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:''})]}),x={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},M=Object.assign({},x,{container:"#gjs2",blockManager:a}),O=Object.assign({},M,{container:"#gjs3",blockManager:Object.assign({},a,{appendTo:"#blocks3"})}),f=Object.assign({},M,{container:"#gjs4",blockManager:Object.assign({},a,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},M,{container:"#gjs5",blockManager:Object.assign({},a,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container5"})}),_=Object.assign({},M,{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({},M,{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({},M,{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});t.a={gjsConfigStart:x,gjsConfigBlocks:M,gjsConfigPanels:O,gjsConfigLayers:f,gjsConfigStyle:T,gjsConfigTraits:_,gjsConfigDevices:k,gjsConfigTheme:S,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:w,panelSwitcherTraits:m,panelSwitcherTraitsIcons:u,panelDevices:y,panelDevicesIcons:j}},298:function(e,t,s){},343:function(e,t,s){"use strict";var a=s(298);s.n(a).a},389:function(e,t,s){"use strict";s.r(t);var a=s(273),n={mounted:function(){var e=grapesjs.init(a.a.gjsConfigStyle);e.Panels.addPanel(Object.assign({},a.a.panelTop,{el:"#panel__top5"})),e.Panels.addPanel(Object.assign({},a.a.panelBasicActions,{el:"#panel__basic-actions5"})),e.Panels.addPanel(Object.assign({},a.a.panelSidebar,{el:"#panel__right5"})),e.Panels.addPanel(Object.assign({},a.a.panelSwitcher,{el:"#panel__switcher5"})),window.editor5=e}},i=(s(343),s(33)),l=Object(i.a)(n,(function(){var e=this.$createElement;this._self._c;return this._m(0)}),[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"panel__top",attrs:{id:"panel__top5"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions5"}}),this._v(" "),t("div",{staticClass:"panel__switcher",attrs:{id:"panel__switcher5"}})]),this._v(" "),t("div",{staticClass:"editor-row"},[t("div",{staticClass:"editor-canvas"},[t("div",{staticClass:"gjs",attrs:{id:"gjs5"}},[t("h1",[this._v("Hello World Component!")])])]),this._v(" "),t("div",{staticClass:"panel__right",attrs:{id:"panel__right5"}},[t("div",{staticClass:"layers-container",attrs:{id:"layers-container5"}}),this._v(" "),t("div",{staticClass:"styles-container",attrs:{id:"styles-container5"}})])]),this._v(" "),t("div",{attrs:{id:"blocks5"}})])}],!1,null,null,null);t.default=l.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{302:function(e,t,s){"use strict";s(9);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:''})]}),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"}}},w={id:"panel-switcher",buttons:[d,b]},m={id:"panel-switcher",buttons:[d,b,v]},u={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:''})]}),x={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},M=Object.assign({},x,{container:"#gjs2",blockManager:a}),O=Object.assign({},M,{container:"#gjs3",blockManager:Object.assign({},a,{appendTo:"#blocks3"})}),f=Object.assign({},M,{container:"#gjs4",blockManager:Object.assign({},a,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},M,{container:"#gjs5",blockManager:Object.assign({},a,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container5"})}),_=Object.assign({},M,{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({},M,{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({},M,{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});t.a={gjsConfigStart:x,gjsConfigBlocks:M,gjsConfigPanels:O,gjsConfigLayers:f,gjsConfigStyle:T,gjsConfigTraits:_,gjsConfigDevices:k,gjsConfigTheme:C,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:w,panelSwitcherTraits:m,panelSwitcherTraitsIcons:u,panelDevices:y,panelDevicesIcons:j}},329:function(e,t,s){},370:function(e,t,s){"use strict";var a=s(329);s.n(a).a},412:function(e,t,s){"use strict";s.r(t);var a=s(302),n={mounted:function(){var e=grapesjs.init(a.a.gjsConfigTraits);e.Panels.addPanel(Object.assign({},a.a.panelTop,{el:"#panel__top6"})),e.Panels.addPanel(Object.assign({},a.a.panelBasicActions,{el:"#panel__basic-actions6"})),e.Panels.addPanel(Object.assign({},a.a.panelSidebar,{el:"#panel__right6"})),e.Panels.addPanel(Object.assign({},a.a.panelSwitcherTraits,{el:"#panel__switcher6"})),window.editor6=e}},i=(s(370),s(42)),l=Object(i.a)(n,(function(){var e=this.$createElement;this._self._c;return this._m(0)}),[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"panel__top",attrs:{id:"panel__top6"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions6"}}),this._v(" "),t("div",{staticClass:"panel__switcher",attrs:{id:"panel__switcher6"}})]),this._v(" "),t("div",{staticClass:"editor-row"},[t("div",{staticClass:"editor-canvas"},[t("div",{staticClass:"gjs",attrs:{id:"gjs6"}},[t("h1",[this._v("Hello World Component!")])])]),this._v(" "),t("div",{staticClass:"panel__right",attrs:{id:"panel__right6"}},[t("div",{staticClass:"layers-container",attrs:{id:"layers-container6"}}),this._v(" "),t("div",{staticClass:"styles-container",attrs:{id:"styles-container6"}}),this._v(" "),t("div",{staticClass:"traits-container",attrs:{id:"traits-container6"}})])]),this._v(" "),t("div",{attrs:{id:"blocks6"}})])}],!1,null,null,null);t.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/10.6a518be5.js b/docs/assets/js/10.6a518be5.js
deleted file mode 100644
index 8e6c6c693..000000000
--- a/docs/assets/js/10.6a518be5.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{273:function(e,t,s){"use strict";s(17);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:''})]}),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"}}},w={id:"panel-switcher",buttons:[d,b]},m={id:"panel-switcher",buttons:[d,b,v]},u={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:''})]}),x={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},M=Object.assign({},x,{container:"#gjs2",blockManager:a}),O=Object.assign({},M,{container:"#gjs3",blockManager:Object.assign({},a,{appendTo:"#blocks3"})}),f=Object.assign({},M,{container:"#gjs4",blockManager:Object.assign({},a,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},M,{container:"#gjs5",blockManager:Object.assign({},a,{appendTo:"#blocks5"}),layerManager:{appendTo:"#layers-container5",scrollLayers:0},styleManager:Object.assign({},i,{appendTo:"#styles-container5"}),selectorManager:Object.assign({},o,{appendTo:"#styles-container5"})}),_=Object.assign({},M,{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({},M,{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({},M,{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});t.a={gjsConfigStart:x,gjsConfigBlocks:M,gjsConfigPanels:O,gjsConfigLayers:f,gjsConfigStyle:T,gjsConfigTraits:_,gjsConfigDevices:k,gjsConfigTheme:C,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:w,panelSwitcherTraits:m,panelSwitcherTraitsIcons:u,panelDevices:y,panelDevicesIcons:j}},300:function(e,t,s){},345:function(e,t,s){"use strict";var a=s(300);s.n(a).a},387:function(e,t,s){"use strict";s.r(t);var a=s(273),n={mounted:function(){var e=grapesjs.init(a.a.gjsConfigTraits);e.Panels.addPanel(Object.assign({},a.a.panelTop,{el:"#panel__top6"})),e.Panels.addPanel(Object.assign({},a.a.panelBasicActions,{el:"#panel__basic-actions6"})),e.Panels.addPanel(Object.assign({},a.a.panelSidebar,{el:"#panel__right6"})),e.Panels.addPanel(Object.assign({},a.a.panelSwitcherTraits,{el:"#panel__switcher6"})),window.editor6=e}},i=(s(345),s(33)),l=Object(i.a)(n,(function(){var e=this.$createElement;this._self._c;return this._m(0)}),[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"panel__top",attrs:{id:"panel__top6"}},[t("div",{staticClass:"panel__basic-actions",attrs:{id:"panel__basic-actions6"}}),this._v(" "),t("div",{staticClass:"panel__switcher",attrs:{id:"panel__switcher6"}})]),this._v(" "),t("div",{staticClass:"editor-row"},[t("div",{staticClass:"editor-canvas"},[t("div",{staticClass:"gjs",attrs:{id:"gjs6"}},[t("h1",[this._v("Hello World Component!")])])]),this._v(" "),t("div",{staticClass:"panel__right",attrs:{id:"panel__right6"}},[t("div",{staticClass:"layers-container",attrs:{id:"layers-container6"}}),this._v(" "),t("div",{staticClass:"styles-container",attrs:{id:"styles-container6"}}),this._v(" "),t("div",{staticClass:"traits-container",attrs:{id:"traits-container6"}})])]),this._v(" "),t("div",{attrs:{id:"blocks6"}})])}],!1,null,null,null);t.default=l.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/11.b2ac4984.js b/docs/assets/js/11.0153cb6c.js
similarity index 66%
rename from docs/assets/js/11.b2ac4984.js
rename to docs/assets/js/11.0153cb6c.js
index 00ec88b63..4b562ec8d 100644
--- a/docs/assets/js/11.b2ac4984.js
+++ b/docs/assets/js/11.0153cb6c.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[11,13],{275:function(t,n,e){},291:function(t,n,e){"use strict";var a=e(275);e.n(a).a},311:function(t,n,e){"use strict";e.r(n);var a={render:function(t){return t("div",{class:"carbon-ads",attrs:{id:"native-carbon"}})},mounted:function(){window.BSANativeCallback=function(t){if(!t.ads.length){var n=document.createElement("script");n.src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom",n.setAttribute("id","_carbonads_js");var e=document.getElementById("native-carbon");e&&e.appendChild(n)}},this.load()},watch:{$route:function(t,n){t.path!==n.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},methods:{initCarbon:function(){var t=window._bsa;void 0!==t&&t&&t.init("default","CK7I62QJ","placement:grapesjscomdocs",{target:"#native-carbon"})},load:function(){var t=this,n=document.createElement("script");n.src="//m.servedby-buysellads.com/monetization.js",n.onload=function(){return t.initCarbon()},this.$el.appendChild(n)}}},o=(e(291),e(33)),r=Object(o.a)(a,void 0,void 0,!1,null,null,null);n.default=r.exports},385:function(t,n,e){"use strict";e.r(n);var a=e(347),o=e(311),r={components:{Layout:a.a,CarbonAds:o.default}},i=e(33),s=Object(i.a)(r,(function(){var t=this.$createElement,n=this._self._c||t;return n("Layout",[n("CarbonAds",{attrs:{slot:"sidebar-top"},slot:"sidebar-top"})],1)}),[],!1,null,null,null);n.default=s.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11,13],{304:function(t,n,e){},320:function(t,n,e){"use strict";var a=e(304);e.n(a).a},338:function(t,n,e){"use strict";e.r(n);var a={render:function(t){return t("div",{class:"carbon-ads",attrs:{id:"native-carbon"}})},mounted:function(){window.BSANativeCallback=function(t){if(!t.ads.length){var n=document.createElement("script");n.src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom",n.setAttribute("id","_carbonads_js");var e=document.getElementById("native-carbon");e&&e.appendChild(n)}},this.load()},watch:{$route:function(t,n){t.path!==n.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},methods:{initCarbon:function(){var t=window._bsa;void 0!==t&&t&&t.init("default","CK7I62QJ","placement:grapesjscomdocs",{target:"#native-carbon"})},load:function(){var t=this,n=document.createElement("script");n.src="//m.servedby-buysellads.com/monetization.js",n.onload=function(){return t.initCarbon()},this.$el.appendChild(n)}}},o=(e(320),e(42)),r=Object(o.a)(a,void 0,void 0,!1,null,null,null);n.default=r.exports},410:function(t,n,e){"use strict";e.r(n);var a=e(372),o=e(338),r={components:{Layout:a.a,CarbonAds:o.default}},i=e(42),s=Object(i.a)(r,(function(){var t=this.$createElement,n=this._self._c||t;return n("Layout",[n("CarbonAds",{attrs:{slot:"sidebar-top"},slot:"sidebar-top"})],1)}),[],!1,null,null,null);n.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/12.566ab8ad.js b/docs/assets/js/12.566ab8ad.js
new file mode 100644
index 000000000..0bb960cbe
--- /dev/null
+++ b/docs/assets/js/12.566ab8ad.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{321:function(t,n,e){},362:function(t,n,e){"use strict";var s=e(321);e.n(s).a},420:function(t,n,e){"use strict";e.r(n);e(362);var s=e(42),i=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"demo-container"},[this._t("default")],2)}),[],!1,null,"b3715568",null);n.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/12.bf8ecce1.js b/docs/assets/js/12.bf8ecce1.js
deleted file mode 100644
index 94e89b29c..000000000
--- a/docs/assets/js/12.bf8ecce1.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{292:function(t,n,e){},337:function(t,n,e){"use strict";var s=e(292);e.n(s).a},395:function(t,n,e){"use strict";e.r(n);e(337);var s=e(33),i=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"demo-container"},[this._t("default")],2)}),[],!1,null,"b3715568",null);n.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/13.d807997f.js b/docs/assets/js/13.9f383e4b.js
similarity index 73%
rename from docs/assets/js/13.d807997f.js
rename to docs/assets/js/13.9f383e4b.js
index 02930facc..f2385d39f 100644
--- a/docs/assets/js/13.d807997f.js
+++ b/docs/assets/js/13.9f383e4b.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{275:function(n,t,e){},291:function(n,t,e){"use strict";var a=e(275);e.n(a).a},311:function(n,t,e){"use strict";e.r(t);var a={render:function(n){return n("div",{class:"carbon-ads",attrs:{id:"native-carbon"}})},mounted:function(){window.BSANativeCallback=function(n){if(!n.ads.length){var t=document.createElement("script");t.src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom",t.setAttribute("id","_carbonads_js");var e=document.getElementById("native-carbon");e&&e.appendChild(t)}},this.load()},watch:{$route:function(n,t){n.path!==t.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},methods:{initCarbon:function(){var n=window._bsa;void 0!==n&&n&&n.init("default","CK7I62QJ","placement:grapesjscomdocs",{target:"#native-carbon"})},load:function(){var n=this,t=document.createElement("script");t.src="//m.servedby-buysellads.com/monetization.js",t.onload=function(){return n.initCarbon()},this.$el.appendChild(t)}}},o=(e(291),e(33)),i=Object(o.a)(a,void 0,void 0,!1,null,null,null);t.default=i.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{304:function(n,t,e){},320:function(n,t,e){"use strict";var a=e(304);e.n(a).a},338:function(n,t,e){"use strict";e.r(t);var a={render:function(n){return n("div",{class:"carbon-ads",attrs:{id:"native-carbon"}})},mounted:function(){window.BSANativeCallback=function(n){if(!n.ads.length){var t=document.createElement("script");t.src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=grapesjscom",t.setAttribute("id","_carbonads_js");var e=document.getElementById("native-carbon");e&&e.appendChild(t)}},this.load()},watch:{$route:function(n,t){n.path!==t.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},methods:{initCarbon:function(){var n=window._bsa;void 0!==n&&n&&n.init("default","CK7I62QJ","placement:grapesjscomdocs",{target:"#native-carbon"})},load:function(){var n=this,t=document.createElement("script");t.src="//m.servedby-buysellads.com/monetization.js",t.onload=function(){return n.initCarbon()},this.$el.appendChild(t)}}},o=(e(320),e(42)),i=Object(o.a)(a,void 0,void 0,!1,null,null,null);t.default=i.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/14.0ba8a778.js b/docs/assets/js/14.0ba8a778.js
deleted file mode 100644
index e53ec30c6..000000000
--- a/docs/assets/js/14.0ba8a778.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{301:function(t,e,n){},346:function(t,e,n){"use strict";var i=n(301);n.n(i).a},396:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(346),n(33)),a=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/14.9f9af6a1.js b/docs/assets/js/14.9f9af6a1.js
new file mode 100644
index 000000000..422bb8b14
--- /dev/null
+++ b/docs/assets/js/14.9f9af6a1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{330:function(t,e,n){},371:function(t,e,n){"use strict";var i=n(330);n.n(i).a},421:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(371),n(42)),a=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/15.52ce2afa.js b/docs/assets/js/15.5acbb762.js
similarity index 66%
rename from docs/assets/js/15.52ce2afa.js
rename to docs/assets/js/15.5acbb762.js
index 887818aad..3f7d622d4 100644
--- a/docs/assets/js/15.52ce2afa.js
+++ b/docs/assets/js/15.5acbb762.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{386:function(e,t,r){"use strict";r.r(t);r(142);var s={name:"DemoViewer",props:{value:{type:String,default:""},user:{type:String,default:"artur_arseniev"},width:{type:String,default:"100%"},height:{type:String,default:"300"}},computed:{src:function(){var e=this.value,t=this.user;return"//jsfiddle.net/".concat(t,"/").concat(e,"/embedded/js,html,css,result")}}},i=r(33),n=Object(i.a)(s,(function(){var e=this.$createElement;return(this._self._c||e)("iframe",{attrs:{width:this.width,height:this.height,src:this.src,allowfullscreen:"allowfullscreen",frameborder:"0"}})}),[],!1,null,null,null);t.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{411:function(e,t,r){"use strict";r.r(t);r(171);var s={name:"DemoViewer",props:{value:{type:String,default:""},user:{type:String,default:"artur_arseniev"},width:{type:String,default:"100%"},height:{type:String,default:"300"}},computed:{src:function(){var e=this.value,t=this.user;return"//jsfiddle.net/".concat(t,"/").concat(e,"/embedded/js,html,css,result")}}},i=r(42),n=Object(i.a)(s,(function(){var e=this.$createElement;return(this._self._c||e)("iframe",{attrs:{width:this.width,height:this.height,src:this.src,allowfullscreen:"allowfullscreen",frameborder:"0"}})}),[],!1,null,null,null);t.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/16.47266d46.js b/docs/assets/js/16.54ada0d6.js
similarity index 72%
rename from docs/assets/js/16.47266d46.js
rename to docs/assets/js/16.54ada0d6.js
index 61ae7071f..0fc838adf 100644
--- a/docs/assets/js/16.47266d46.js
+++ b/docs/assets/js/16.54ada0d6.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{384:function(t,e,s){"use strict";s.r(e);var n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(33),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n      Take me home.\n    ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{409:function(t,e,s){"use strict";s.r(e);var n=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],o={methods:{getMsg:function(){return n[Math.floor(Math.random()*n.length)]}}},i=s(42),h=Object(i.a)(o,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("RouterLink",{attrs:{to:"/"}},[this._v("\n      Take me home.\n    ")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/17.5b690198.js b/docs/assets/js/17.5b690198.js
new file mode 100644
index 000000000..2992e16b4
--- /dev/null
+++ b/docs/assets/js/17.5b690198.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{428:function(t,s,a){"use strict";a.r(s);var n=a(42),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"getting-started"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[t._v("#")]),t._v(" Getting started")]),t._v(" "),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.")]),t._v(" "),a("p",[t._v("The pretty minimalistic way to instantiate the editor could be like this:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path/to/grapes.min.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path/to/grapes.min.js"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}}),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("gjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      container "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      components"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Hello world!
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.txt-red{color: red}'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("In just few lines, with the default configurations, you're already able to see something with which play around.")]),t._v(" "),a("p",[t._v("[[img/default-gjs.jpg]]")]),t._v(" "),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.")]),t._v(" "),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)")]),t._v(" "),a("p",[t._v("[[img/canvas-panels.jpg]]")]),t._v(" "),a("p",[t._v("If you'd like to extend the already instantiated editor you have to check "),a("a",{attrs:{href:"API-Reference"}},[t._v("API Reference")]),t._v(". Check also "),a("a",{attrs:{href:"./Creating-plugins"}},[t._v("how to create plugins")]),t._v(" using the same API.\nIn this guide we'll focus on how to initialize the editor with all custom UI from scratch.")]),t._v(" "),a("p",[t._v("Let's start the editor with some basic toolbar panel")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    height"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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:")]),t._v(" "),a("p",[t._v("[[img/new-panel.png]]")]),t._v(" "),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Editor"}},[t._v("Editor API Reference")]),t._v(" for more details about editor configurations")])]),t._v(" "),a("p",[t._v("Now let's put some button inside")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id          "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-smile-o'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smile'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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)")]),t._v(" "),a("p",[t._v("[[img/new-btn.png]]")]),t._v(" "),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._v(" "),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Panels"}},[t._v("Panels API Reference")]),t._v(" for more details about Panels and Buttons")])]),t._v(" "),a("p",[t._v("Assigning commands is pretty easy, but before you should define one or use one of defaults ("),a("a",{attrs:{href:"./Built-in-commands"}},[t._v("Built-in commands")]),t._v("). So in this case we gonna create a new one.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id          "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-smile-o'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smile'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command     "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'helloWorld'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  commands"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'helloWorld'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello world!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Deactivate button")]),t._v("\n          senderBtn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'active'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("stop")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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.")]),t._v(" "),a("p",[t._v("[[img/btn-clicked.png]]")]),t._v(" "),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Commands"}},[t._v("Commands API Reference")])])]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[t._v("#")]),t._v(" Components")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Disable default local storage in case you've already used GrapesJS")]),t._v("\n  storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  components"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("\n              "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("\n              "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id        "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vis'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-eye'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sw-visibility'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            context   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-random-context'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// For grouping context of buttons in the same panel")]),t._v("\n            active    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("Worth noting the use of "),a("code",[t._v("context")]),t._v(" option (try to click 'smile' command without it) and "),a("code",[t._v("active")]),t._v(" to enable it after the render.\nNow you should be able to see blocks inside canvas.")]),t._v(" "),a("p",[t._v("[[img/blocks3.jpg]]")]),t._v(" "),a("p",[t._v("You could add other commands to enable interactions with blocks. Check "),a("a",{attrs:{href:"./Built-in-commands"}},[t._v("Built-in commands")]),t._v(" to get more information")]),t._v(" "),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Components"}},[t._v("Components API Reference")])])]),t._v(" "),a("h2",{attrs:{id:"style-manager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#style-manager"}},[t._v("#")]),t._v(" Style Manager")]),t._v(" "),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.")]),t._v(" "),a("p",[t._v("To enable this module we rely on a built-in command "),a("code",[t._v("open-sm")]),t._v(", which shows up the Style Manager, which we gonna bind to another button in a separate panel")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\npanels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If you use this id the default CSS will place this panel on top right corner for you")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'views'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id        "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'open-style-manager'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-paint-brush'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'open-sm'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            active    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("After this you'll be able to see something like in the image below")]),t._v(" "),a("p",[t._v("[[img/enabled-sm.jpg]]")]),t._v(" "),a("p",[t._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 "),a("code",[t._v("select-comp")]),t._v(" in this way")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id         "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-mouse-pointer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select-comp'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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")]),t._v(" "),a("p",[t._v("[[img/default-sm.jpg]]")]),t._v(" "),a("p",[t._v("As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one")]),t._v(" "),a("p",[t._v("Let's put a few sectors with use of "),a("code",[t._v("buildProps")]),t._v(" which helps us building common properties")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("Now you should be able to style components")]),t._v(" "),a("p",[t._v("[[img/style-comp.jpg]]")]),t._v(" "),a("p",[t._v("You can check the list of usable properties inside "),a("code",[t._v("buildProps")]),t._v(" here: "),a("a",{attrs:{href:"./Built-in-properties"}},[t._v("Built-in properties")]),t._v("\notherwise is possible to build them on your own, let's see how we'd have done the previous configuration without the "),a("code",[t._v("buildProps")]),t._v(" helper")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\nstyleManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  sectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Just the name")]),t._v("\n            name      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CSS property")]),t._v("\n            property  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Type of the input, options: integer | radio | select | color | file | composite | stack")]),t._v("\n            type      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Units, available only for 'integer' types")]),t._v("\n            units     "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Default value")]),t._v("\n            defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auto'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Min value, available only for 'integer' types")]),t._v("\n            min       "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Here I'm going to be more original")]),t._v("\n            name      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Minimum height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            property  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            type      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// List of options, available only for 'select' and 'radio'  types")]),t._v("\n            list    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Sectors are expanded by default so put this one closed")]),t._v("\n      open"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Background'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          property  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          type      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Box shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          property  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          type    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stack'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          preview   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// List of nested properties, available only for 'stack' and 'composite'  types")]),t._v("\n          properties  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Shadow type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Nested properties with stack/composite type don't require proper 'property' name")]),t._v("\n                  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as all of them will be merged to parent property, eg. box-shadow: X Y ...;")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  list"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Outside'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                              "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'inset'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Inside'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'X position'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-x'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Y position'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-y'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Blur'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-blur'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  min"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Spread'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-spread'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'black'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("As you can see using "),a("code",[t._v("buildProps")]),t._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 "),a("code",[t._v("min")]),t._v(":")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Use 'property' as id")]),t._v("\n        min"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Style-Manager"}},[t._v("Style Manager API Reference")])])]),t._v(" "),a("h2",{attrs:{id:"store-load-data"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store-load-data"}},[t._v("#")]),t._v(" Store/load data")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Default configuration")]),t._v("\n    storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'gjs-'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("             "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prefix identifier that will be used inside storing and loading")]),t._v("\n      type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'local'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Type of the storage")]),t._v("\n      autosave"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Store data automatically")]),t._v("\n      autoload"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Autoload stored data on init")]),t._v("\n      stepsBeforeSave"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If autosave enabled, indicates how many changes are necessary before store method is triggered")]),t._v("\n      storeComponents"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of components in JSON format")]),t._v("\n      storeStyles"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of rules/style in JSON format")]),t._v("\n      storeHtml"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of components as HTML string")]),t._v("\n      storeCss"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of rules/style as CSS string")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("Worth noting the defaut "),a("code",[t._v("id")]),t._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 "),a("code",[t._v("{ 'gjs-components': '
    ....' ...}")]),t._v(" in this way it prevents the risk of collisions, quite common with localStorage use in large applications.")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      stepsBeforeSave"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      urlStore"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://store/endpoint'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      urlLoad"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://load/endpoint'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      params"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// For custom values on requests")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    autosave"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  commands"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeData'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Storage-Manager"}},[t._v("Storage Manager API Reference")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/17.9b7a7fa4.js b/docs/assets/js/17.9b7a7fa4.js
deleted file mode 100644
index f1bf39afb..000000000
--- a/docs/assets/js/17.9b7a7fa4.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{411:function(t,s,a){"use strict";a.r(s);var n=a(33),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"getting-started"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[t._v("#")]),t._v(" Getting started")]),t._v(" "),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.")]),t._v(" "),a("p",[t._v("The pretty minimalistic way to instantiate the editor could be like this:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path/to/grapes.min.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path/to/grapes.min.js"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}}),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("gjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("text/javascript"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      container "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      components"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Hello world!
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.txt-red{color: red}'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("In just few lines, with the default configurations, you're already able to see something with which play around.")]),t._v(" "),a("p",[t._v("[[img/default-gjs.jpg]]")]),t._v(" "),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.")]),t._v(" "),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)")]),t._v(" "),a("p",[t._v("[[img/canvas-panels.jpg]]")]),t._v(" "),a("p",[t._v("If you'd like to extend the already instantiated editor you have to check "),a("a",{attrs:{href:"API-Reference"}},[t._v("API Reference")]),t._v(". Check also "),a("a",{attrs:{href:"./Creating-plugins"}},[t._v("how to create plugins")]),t._v(" using the same API.\nIn this guide we'll focus on how to initialize the editor with all custom UI from scratch.")]),t._v(" "),a("p",[t._v("Let's start the editor with some basic toolbar panel")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    height"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n    panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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:")]),t._v(" "),a("p",[t._v("[[img/new-panel.png]]")]),t._v(" "),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Editor"}},[t._v("Editor API Reference")]),t._v(" for more details about editor configurations")])]),t._v(" "),a("p",[t._v("Now let's put some button inside")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id          "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-smile-o'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smile'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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)")]),t._v(" "),a("p",[t._v("[[img/new-btn.png]]")]),t._v(" "),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._v(" "),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Panels"}},[t._v("Panels API Reference")]),t._v(" for more details about Panels and Buttons")])]),t._v(" "),a("p",[t._v("Assigning commands is pretty easy, but before you should define one or use one of defaults ("),a("a",{attrs:{href:"./Built-in-commands"}},[t._v("Built-in commands")]),t._v("). So in this case we gonna create a new one.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id          "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-smile-o'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            attributes  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Smile'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command     "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'helloWorld'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  commands"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'helloWorld'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello world!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Deactivate button")]),t._v("\n          senderBtn"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'active'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("stop")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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.")]),t._v(" "),a("p",[t._v("[[img/btn-clicked.png]]")]),t._v(" "),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Commands"}},[t._v("Commands API Reference")])])]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[t._v("#")]),t._v(" Components")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Disable default local storage in case you've already used GrapesJS")]),t._v("\n  storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n  components"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("\n              "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v("\n              "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id        "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vis'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-eye'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sw-visibility'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            context   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-random-context'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// For grouping context of buttons in the same panel")]),t._v("\n            active    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("Worth noting the use of "),a("code",[t._v("context")]),t._v(" option (try to click 'smile' command without it) and "),a("code",[t._v("active")]),t._v(" to enable it after the render.\nNow you should be able to see blocks inside canvas.")]),t._v(" "),a("p",[t._v("[[img/blocks3.jpg]]")]),t._v(" "),a("p",[t._v("You could add other commands to enable interactions with blocks. Check "),a("a",{attrs:{href:"./Built-in-commands"}},[t._v("Built-in commands")]),t._v(" to get more information")]),t._v(" "),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Components"}},[t._v("Components API Reference")])])]),t._v(" "),a("h2",{attrs:{id:"style-manager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#style-manager"}},[t._v("#")]),t._v(" Style Manager")]),t._v(" "),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.")]),t._v(" "),a("p",[t._v("To enable this module we rely on a built-in command "),a("code",[t._v("open-sm")]),t._v(", which shows up the Style Manager, which we gonna bind to another button in a separate panel")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\npanels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If you use this id the default CSS will place this panel on top right corner for you")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'views'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id        "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'open-style-manager'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-paint-brush'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'open-sm'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            active    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("After this you'll be able to see something like in the image below")]),t._v(" "),a("p",[t._v("[[img/enabled-sm.jpg]]")]),t._v(" "),a("p",[t._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 "),a("code",[t._v("select-comp")]),t._v(" in this way")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  panels"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'commands'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        buttons "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smile'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            id         "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            className "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fa fa-mouse-pointer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            command   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select-comp'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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")]),t._v(" "),a("p",[t._v("[[img/default-sm.jpg]]")]),t._v(" "),a("p",[t._v("As we exploring different configurations inside GrapesJS we gonna overwrite all the default sectors to create some custom one")]),t._v(" "),a("p",[t._v("Let's put a few sectors with use of "),a("code",[t._v("buildProps")]),t._v(" which helps us building common properties")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("Now you should be able to style components")]),t._v(" "),a("p",[t._v("[[img/style-comp.jpg]]")]),t._v(" "),a("p",[t._v("You can check the list of usable properties inside "),a("code",[t._v("buildProps")]),t._v(" here: "),a("a",{attrs:{href:"./Built-in-properties"}},[t._v("Built-in properties")]),t._v("\notherwise is possible to build them on your own, let's see how we'd have done the previous configuration without the "),a("code",[t._v("buildProps")]),t._v(" helper")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\nstyleManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  sectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Just the name")]),t._v("\n            name      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CSS property")]),t._v("\n            property  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Type of the input, options: integer | radio | select | color | file | composite | stack")]),t._v("\n            type      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Units, available only for 'integer' types")]),t._v("\n            units     "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Default value")]),t._v("\n            defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'auto'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Min value, available only for 'integer' types")]),t._v("\n            min       "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Here I'm going to be more original")]),t._v("\n            name      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Minimum height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            property  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            type      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            defaults  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// List of options, available only for 'select' and 'radio'  types")]),t._v("\n            list    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                      value   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                      name    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Sectors are expanded by default so put this one closed")]),t._v("\n      open"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Background'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          property  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          type      "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'none'")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          name    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Box shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          property  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          type    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'stack'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          preview   "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// List of nested properties, available only for 'stack' and 'composite'  types")]),t._v("\n          properties  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Shadow type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Nested properties with stack/composite type don't require proper 'property' name")]),t._v("\n                  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// as all of them will be merged to parent property, eg. box-shadow: X Y ...;")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-type'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  list"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Outside'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                              "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'inset'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Inside'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'X position'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-x'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Y position'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-y'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Blur'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-blur'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  min"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Spread'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-spread'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'shadow-color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'color'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                  defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'black'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("As you can see using "),a("code",[t._v("buildProps")]),t._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 "),a("code",[t._v("min")]),t._v(":")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  styleManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    sectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      buildProps"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      properties"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'width'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Use 'property' as id")]),t._v("\n        min"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Style-Manager"}},[t._v("Style Manager API Reference")])])]),t._v(" "),a("h2",{attrs:{id:"store-load-data"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store-load-data"}},[t._v("#")]),t._v(" Store/load data")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Default configuration")]),t._v("\n    storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'gjs-'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("             "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Prefix identifier that will be used inside storing and loading")]),t._v("\n      type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'local'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("          "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Type of the storage")]),t._v("\n      autosave"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Store data automatically")]),t._v("\n      autoload"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Autoload stored data on init")]),t._v("\n      stepsBeforeSave"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If autosave enabled, indicates how many changes are necessary before store method is triggered")]),t._v("\n      storeComponents"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of components in JSON format")]),t._v("\n      storeStyles"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of rules/style in JSON format")]),t._v("\n      storeHtml"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("        "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of components as HTML string")]),t._v("\n      storeCss"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("         "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Enable/Disable storing of rules/style as CSS string")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("Worth noting the defaut "),a("code",[t._v("id")]),t._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 "),a("code",[t._v("{ 'gjs-components': '
    ....' ...}")]),t._v(" in this way it prevents the risk of collisions, quite common with localStorage use in large applications.")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    container "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#gjs'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n    storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      stepsBeforeSave"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      urlStore"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://store/endpoint'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      urlLoad"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://load/endpoint'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      params"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// For custom values on requests")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),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._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'remote'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    autosave"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  commands"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'storeData'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" senderBtn")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n          editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("blockquote",[a("p",[t._v("Check "),a("a",{attrs:{href:"API-Storage-Manager"}},[t._v("Storage Manager API Reference")])])])])}),[],!1,null,null,null);s.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/18.66b0785d.js b/docs/assets/js/18.f81603cf.js
similarity index 97%
rename from docs/assets/js/18.66b0785d.js
rename to docs/assets/js/18.f81603cf.js
index 2439d92e2..12d04e7e1 100644
--- a/docs/assets/js/18.66b0785d.js
+++ b/docs/assets/js/18.f81603cf.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{409:function(e,t,r){"use strict";r.r(t);var a=r(33),s=Object(a.a)({},(function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h1",{attrs:{id:"introduction"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#introduction"}},[e._v("#")]),e._v(" Introduction")]),e._v(" "),r("p"),r("div",{staticClass:"table-of-contents"},[r("ul",[r("li",[r("a",{attrs:{href:"#what-is-grapesjs"}},[e._v("What is GrapesJS?")])]),r("li",[r("a",{attrs:{href:"#why-grapesjs"}},[e._v("Why GrapesJS?")])]),r("li",[r("a",{attrs:{href:"#quick-start"}},[e._v("Quick Start")])]),r("li",[r("a",{attrs:{href:"#download"}},[e._v("Download")])]),r("li",[r("a",{attrs:{href:"#changelog"}},[e._v("Changelog")])])])]),r("p"),e._v(" "),r("h2",{attrs:{id:"what-is-grapesjs"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#what-is-grapesjs"}},[e._v("#")]),e._v(" What is GrapesJS?")]),e._v(" "),r("p",[e._v('At first glance might think this is just another page/HTML builder, but it\'s something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things".  By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. '),r("a",{attrs:{href:"https://mjml.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("MJML"),r("OutboundLink")],1),e._v("), Native Mobile Applications (eg. "),r("a",{attrs:{href:"https://github.com/facebook/react-native",target:"_blank",rel:"noopener noreferrer"}},[e._v("React Native"),r("OutboundLink")],1),e._v("), Native Desktop Applications (eg. "),r("a",{attrs:{href:"https://vuido.mimec.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuido"),r("OutboundLink")],1),e._v("), PDFs (eg. "),r("a",{attrs:{href:"https://github.com/diegomura/react-pdf",target:"_blank",rel:"noopener noreferrer"}},[e._v("React PDF"),r("OutboundLink")],1),e._v("), etc. So, for everything you can imagine as a set of elements like "),r("code",[e._v('... other nested elements ...')]),e._v(" you can create easily a GrapesJS builder around it and then use it independently your applications.\nGrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.")]),e._v(" "),r("h2",{attrs:{id:"why-grapesjs"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#why-grapesjs"}},[e._v("#")]),e._v(" Why GrapesJS?")]),e._v(" "),r("p",[e._v("GrapesJS was designed  primarily to for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors. Which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.")]),e._v(" "),r("h2",{attrs:{id:"quick-start"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick Start")]),e._v(" "),r("p",[e._v("To showcase the power of GrapesJS we have created some presets.")]),e._v(" "),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)]),e._v(" "),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)]),e._v(" "),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)])]),e._v(" "),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._v(" "),r("h2",{attrs:{id:"download"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#download"}},[e._v("#")]),e._v(" Download")]),e._v(" "),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)]),e._v(" "),r("p",[e._v("You can download GrapesJS from one of these sources")]),e._v(" "),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")])]),e._v(" "),r("li",[r("code",[e._v("https://unpkg.com/grapesjs/dist/css/grapes.min.css")])])])]),e._v(" "),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")])]),e._v(" "),r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css")])])])])])]),e._v(" "),r("li",[e._v("npm\n"),r("ul",[r("li",[r("code",[e._v("npm i grapesjs")])])])]),e._v(" "),r("li",[e._v("git\n"),r("ul",[r("li",[r("code",[e._v("git clone https://github.com/artf/grapesjs.git")])])])])]),e._v(" "),r("h2",{attrs:{id:"changelog"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#changelog"}},[e._v("#")]),e._v(" Changelog")]),e._v(" "),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)])])}),[],!1,null,null,null);t.default=s.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{436:function(e,t,r){"use strict";r.r(t);var a=r(42),s=Object(a.a)({},(function(){var e=this,t=e.$createElement,r=e._self._c||t;return r("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h1",{attrs:{id:"introduction"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#introduction"}},[e._v("#")]),e._v(" Introduction")]),e._v(" "),r("p"),r("div",{staticClass:"table-of-contents"},[r("ul",[r("li",[r("a",{attrs:{href:"#what-is-grapesjs"}},[e._v("What is GrapesJS?")])]),r("li",[r("a",{attrs:{href:"#why-grapesjs"}},[e._v("Why GrapesJS?")])]),r("li",[r("a",{attrs:{href:"#quick-start"}},[e._v("Quick Start")])]),r("li",[r("a",{attrs:{href:"#download"}},[e._v("Download")])]),r("li",[r("a",{attrs:{href:"#changelog"}},[e._v("Changelog")])])])]),r("p"),e._v(" "),r("h2",{attrs:{id:"what-is-grapesjs"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#what-is-grapesjs"}},[e._v("#")]),e._v(" What is GrapesJS?")]),e._v(" "),r("p",[e._v('At first glance might think this is just another page/HTML builder, but it\'s something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things".  By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. '),r("a",{attrs:{href:"https://mjml.io/",target:"_blank",rel:"noopener noreferrer"}},[e._v("MJML"),r("OutboundLink")],1),e._v("), Native Mobile Applications (eg. "),r("a",{attrs:{href:"https://github.com/facebook/react-native",target:"_blank",rel:"noopener noreferrer"}},[e._v("React Native"),r("OutboundLink")],1),e._v("), Native Desktop Applications (eg. "),r("a",{attrs:{href:"https://vuido.mimec.org",target:"_blank",rel:"noopener noreferrer"}},[e._v("Vuido"),r("OutboundLink")],1),e._v("), PDFs (eg. "),r("a",{attrs:{href:"https://github.com/diegomura/react-pdf",target:"_blank",rel:"noopener noreferrer"}},[e._v("React PDF"),r("OutboundLink")],1),e._v("), etc. So, for everything you can imagine as a set of elements like "),r("code",[e._v('... other nested elements ...')]),e._v(" you can create easily a GrapesJS builder around it and then use it independently your applications.\nGrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.")]),e._v(" "),r("h2",{attrs:{id:"why-grapesjs"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#why-grapesjs"}},[e._v("#")]),e._v(" Why GrapesJS?")]),e._v(" "),r("p",[e._v("GrapesJS was designed  primarily to for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors. Which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.")]),e._v(" "),r("h2",{attrs:{id:"quick-start"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#quick-start"}},[e._v("#")]),e._v(" Quick Start")]),e._v(" "),r("p",[e._v("To showcase the power of GrapesJS we have created some presets.")]),e._v(" "),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)]),e._v(" "),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)]),e._v(" "),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)])]),e._v(" "),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._v(" "),r("h2",{attrs:{id:"download"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#download"}},[e._v("#")]),e._v(" Download")]),e._v(" "),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)]),e._v(" "),r("p",[e._v("You can download GrapesJS from one of these sources")]),e._v(" "),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")])]),e._v(" "),r("li",[r("code",[e._v("https://unpkg.com/grapesjs/dist/css/grapes.min.css")])])])]),e._v(" "),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")])]),e._v(" "),r("li",[r("code",[e._v("https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css")])])])])])]),e._v(" "),r("li",[e._v("npm\n"),r("ul",[r("li",[r("code",[e._v("npm i grapesjs")])])])]),e._v(" "),r("li",[e._v("git\n"),r("ul",[r("li",[r("code",[e._v("git clone https://github.com/artf/grapesjs.git")])])])])]),e._v(" "),r("h2",{attrs:{id:"changelog"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#changelog"}},[e._v("#")]),e._v(" Changelog")]),e._v(" "),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)])])}),[],!1,null,null,null);t.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/19.2f9692d0.js b/docs/assets/js/19.4c33dd22.js
similarity index 78%
rename from docs/assets/js/19.2f9692d0.js
rename to docs/assets/js/19.4c33dd22.js
index 3461d862b..df128c604 100644
--- a/docs/assets/js/19.2f9692d0.js
+++ b/docs/assets/js/19.4c33dd22.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{410:function(t,e,s){"use strict";s.r(e);var a=s(33),o=Object(a.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("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 "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{435:function(t,e,s){"use strict";s.r(e);var a=s(42),o=Object(a.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("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 "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/2.a342f4be.js b/docs/assets/js/2.a342f4be.js
deleted file mode 100644
index 46b88a79c..000000000
--- a/docs/assets/js/2.a342f4be.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{274:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return l})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return p})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return g})),n.d(e,"j",(function(){return v}));n(19),n(81),n(136),n(302),n(143),n(53),n(34),n(276),n(54),n(303),n(84);var i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function u(t){return s.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(u(t))return t;var e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function f(t,e){var n=decodeURIComponent(t.hash),r=function(t){var e=t.match(i);if(e)return e[0]}(e);return(!r||n===r)&&o(t.path)===o(e)}function p(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){var i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;var r=e.split("/");n&&r[r.length-1]||r.pop();for(var a=t.replace(/^\//,"").split("/"),s=0;s3&&void 0!==arguments[3]?arguments[3]:1;if("string"==typeof e)return p(n,e,i);if(Array.isArray(e))return Object.assign(p(n,e[0],i),{title:e[1]});var a=e.children||[];return 0===a.length&&e.path?Object.assign(p(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,children:a.map((function(e){return t(e,n,i,r+1)})),collapsable:!1!==e.collapsable}}(t,r,l)})):[]}return[]}function g(t){var e;return(t=t.map((function(t){return Object.assign({},t)}))).forEach((function(t){2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)})),t.filter((function(t){return 2===t.level}))}function v(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},276:function(t,e,n){"use strict";var i=n(139),r=n(12),a=n(15),s=n(18),o=n(140),u=n(141);i("match",1,(function(t,e,n){return[function(e){var n=s(this),i=null==e?void 0:e[t];return void 0!==i?i.call(e,n):new RegExp(e)[t](String(n))},function(t){var i=n(e,t,this);if(i.done)return i.value;var s=r(t),l=String(this);if(!s.global)return u(s,l);var c=s.unicode;s.lastIndex=0;for(var h,f=[],p=0;null!==(h=u(s,l));){var d=String(h[0]);f[p]=d,""===d&&(s.lastIndex=o(l,a(s.lastIndex),c)),p++}return 0===p?null:f}]}))},277:function(t,e,n){},278:function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},279:function(t,e,n){},280:function(t,e,n){},281:function(t,e,n){},282:function(t,e,n){},283:function(t,e,n){},284:function(t,e,n){},285:function(t,e,n){},286:function(t,e,n){},287:function(t,e,n){},288:function(t,e,n){},289:function(t,e,n){},290:function(t,e,n){},302:function(t,e,n){n(0)({target:"Array",stat:!0},{isArray:n(37)})},303:function(t,e,n){"use strict";var i=n(139),r=n(137),a=n(12),s=n(18),o=n(315),u=n(140),l=n(15),c=n(141),h=n(56),f=n(1),p=[].push,d=Math.min,g=!f((function(){return!RegExp(4294967295,"y")}));i("split",2,(function(t,e,n){var i;return i="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var i=String(s(this)),a=void 0===n?4294967295:n>>>0;if(0===a)return[];if(void 0===t)return[i];if(!r(t))return e.call(i,t,a);for(var o,u,l,c=[],f=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),d=0,g=new RegExp(t.source,f+"g");(o=h.call(g,i))&&!((u=g.lastIndex)>d&&(c.push(i.slice(d,o.index)),o.length>1&&o.index=a));)g.lastIndex===o.index&&g.lastIndex++;return d===i.length?!l&&g.test("")||c.push(""):c.push(i.slice(d)),c.length>a?c.slice(0,a):c}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:e.call(this,t,n)}:e,[function(e,n){var r=s(this),a=null==e?void 0:e[t];return void 0!==a?a.call(e,r,n):i.call(String(r),e,n)},function(t,r){var s=n(i,t,this,r,i!==e);if(s.done)return s.value;var h=a(t),f=String(this),p=o(h,RegExp),v=h.unicode,m=(h.ignoreCase?"i":"")+(h.multiline?"m":"")+(h.unicode?"u":"")+(g?"y":"g"),b=new p(g?h:"^(?:"+h.source+")",m),k=void 0===r?4294967295:r>>>0;if(0===k)return[];if(0===f.length)return null===c(b,f)?[f]:[];for(var _=0,x=0,C=[];x-1)&&(e=e.replace(/y/g,""));var o=s(x?new m(t,e):m(t,e),i?this:b,y);return C&&n&&d(o,{sticky:n}),o},$=function(t){t in y||o(y,t,{configurable:!0,get:function(){return m[t]},set:function(e){m[t]=e}})},L=u(m),S=0;L.length>S;)$(L[S++]);b.constructor=y,y.prototype=b,f(r,"RegExp",y)}g("RegExp")},307:function(t,e,n){"use strict";var i=n(20),r=n(12),a=n(1),s=n(138),o=RegExp.prototype,u=o.toString,l=a((function(){return"/a/b"!=u.call({source:"a",flags:"b"})})),c="toString"!=u.name;(l||c)&&i(RegExp.prototype,"toString",(function(){var t=r(this),e=String(t.source),n=t.flags;return"/"+e+"/"+String(void 0===n&&t instanceof RegExp&&!("flags"in o)?s.call(t):n)}),{unsafe:!0})},308:function(t,e){t.exports=function(t){return null==t}},309:function(t,e,n){"use strict";n.r(e);n(135);var i=n(274),r={name:"SidebarGroup",components:{DropdownTransition:n(310).a},props:["item","open","collapsable","depth"],beforeCreate:function(){this.$options.components.SidebarLinks=n(309).default},methods:{isActive:i.e}},a=(n(333),n(33)),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?n("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):n("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),n("DropdownTransition",[t.open||!t.collapsable?n("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;n(334),n(53);function o(t,e,n,i,r){var a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}};return r>2&&(a.style={"padding-left":r+"rem"}),t("RouterLink",a,n)}function u(t,e,n,r,a){var s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||s>a?null:t("ul",{class:"sidebar-sub-headers"},e.map((function(e){var l=Object(i.e)(r,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,l,e.level-1),u(t,e.children,n,r,a,s+1)])})))}var l={functional:!0,props:["item","sidebarDepth"],render:function(t,e){var n=e.parent,r=n.$page,a=(n.$site,n.$route),s=n.$themeConfig,l=n.$themeLocaleConfig,c=e.props,h=c.item,f=c.sidebarDepth,p=Object(i.e)(a,h.path),d="auto"===h.type?p||h.children.some((function(t){return Object(i.e)(a,h.basePath+"#"+t.slug)})):p,g="external"===h.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,h.path,h.title||h.path):o(t,h.path,h.title||h.path,d),v=[r.frontmatter.sidebarDepth,f,l.sidebarDepth,s.sidebarDepth,1].find((function(t){return void 0!==t})),m=l.displayAllHeaders||s.displayAllHeaders;return"auto"===h.type?[g,u(t,h.children,h.basePath,a,v)]:(d||m)&&h.headers&&!i.d.test(h.path)?[g,u(t,Object(i.c)(h.headers),h.path,a,v)]:g}};n(335);function c(t,e){return"group"===e.type&&e.children.some((function(e){return"group"===e.type?c(t,e):"page"===e.type&&Object(i.e)(t,e.path)}))}var h={name:"SidebarLinks",components:{SidebarGroup:s,SidebarLink:Object(a.a)(l,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth"],data:function(){return{openGroupIndex:0}},watch:{$route:function(){this.refreshIndex()}},created:function(){this.refreshIndex()},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Object(i.e)(this.$route,t.regularPath)}}},f=Object(a.a)(h,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.items.length?n("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(e,i){return n("li",{key:i},["group"===e.type?n("SidebarGroup",{attrs:{item:e,open:i===t.openGroupIndex,collapsable:e.collapsable||e.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):n("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:e}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=f.exports},310:function(t,e,n){"use strict";var i={name:"DropdownTransition",methods:{setHeight:function(t){t.style.height=t.scrollHeight+"px"},unsetHeight:function(t){t.style.height=""}}},r=(n(325),n(33)),a=Object(r.a)(i,(function(){var t=this.$createElement;return(this._self._c||t)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},312:function(t,e,n){"use strict";var i=n(0),r=n(313);i({target:"String",proto:!0,forced:n(314)("link")},{link:function(t){return r(this,"a","href",t)}})},313:function(t,e,n){var i=n(18),r=/"/g;t.exports=function(t,e,n,a){var s=String(i(t)),o="<"+e;return""!==n&&(o+=" "+n+'="'+String(a).replace(r,""")+'"'),o+">"+s+""}},314:function(t,e,n){var i=n(1);t.exports=function(t){return i((function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}))}},315:function(t,e,n){var i=n(12),r=n(79),a=n(2)("species");t.exports=function(t,e){var n,s=i(t).constructor;return void 0===s||null==(n=i(s)[a])?e:r(n)}},316:function(t,e,n){"use strict";var i=n(277);n.n(i).a},317:function(t,e,n){var i=n(0),r=n(318);i({global:!0,forced:parseInt!=r},{parseInt:r})},318:function(t,e,n){var i=n(3),r=n(304).trim,a=n(278),s=i.parseInt,o=/^[+-]?0[Xx]/,u=8!==s(a+"08")||22!==s(a+"0x16");t.exports=u?function(t,e){var n=r(String(t));return s(n,e>>>0||(o.test(n)?16:10))}:s},319:function(t,e,n){var i=n(1),r=n(278);t.exports=function(t){return i((function(){return!!r[t]()||"​…᠎"!="​…᠎"[t]()||r[t].name!==t}))}},320:function(t,e,n){var i=n(5),r=n(145);t.exports=function(t,e,n){var a,s;return r&&"function"==typeof(a=e.constructor)&&a!==n&&i(s=a.prototype)&&s!==n.prototype&&r(t,s),t}},321:function(t,e,n){"use strict";var i=n(36),r=n(7),a=n(2),s=n(6),o=a("species");t.exports=function(t){var e=i(t),n=r.f;s&&e&&!e[o]&&n(e,o,{configurable:!0,get:function(){return this}})}},322:function(t,e,n){"use strict";var i,r=n(0),a=n(22).f,s=n(15),o=n(82),u=n(18),l=n(83),c=n(23),h="".endsWith,f=Math.min,p=l("endsWith");r({target:"String",proto:!0,forced:!!(c||p||(i=a(String.prototype,"endsWith"),!i||i.writable))&&!p},{endsWith:function(t){var e=String(u(this));o(t);var n=arguments.length>1?arguments[1]:void 0,i=s(e.length),r=void 0===n?i:f(s(n),i),a=String(t);return h?h.call(e,a,r):e.slice(r-a.length,r)===a}})},323:function(t,e,n){"use strict";var i=n(279);n.n(i).a},324:function(t,e,n){"use strict";var i=n(280);n.n(i).a},325:function(t,e,n){"use strict";var i=n(281);n.n(i).a},326:function(t,e,n){"use strict";var i=n(282);n.n(i).a},327:function(t,e,n){"use strict";var i=n(283);n.n(i).a},328:function(t,e,n){"use strict";var i=n(284);n.n(i).a},329:function(t,e,n){"use strict";var i=n(285);n.n(i).a},330:function(t,e,n){var i=n(25),r=n(9),a=n(21);t.exports=function(t){return"string"==typeof t||!r(t)&&a(t)&&"[object String]"==i(t)}},331:function(t,e,n){"use strict";var i=n(286);n.n(i).a},332:function(t,e,n){"use strict";var i=n(287);n.n(i).a},333:function(t,e,n){"use strict";var i=n(288);n.n(i).a},334:function(t,e,n){"use strict";var i=n(0),r=n(24).find,a=n(80),s=n(13),o=!0,u=s("find");"find"in[]&&Array(1).find((function(){o=!1})),i({target:"Array",proto:!0,forced:o||!u},{find:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}}),a("find")},335:function(t,e,n){"use strict";var i=n(289);n.n(i).a},336:function(t,e,n){"use strict";var i=n(290);n.n(i).a},347:function(t,e,n){"use strict";n(135),n(78),n(312);var i=n(274),r={name:"NavLink",props:{item:{required:!0}},computed:{link:function(){return Object(i.b)(this.item.link)},exact:function(){var t=this;return this.$site.locales?Object.keys(this.$site.locales).some((function(e){return e===t.link})):"/"===this.link},isNonHttpURI:function(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget:function(){return"_blank"===this.target},isInternal:function(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target:function(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel:function(){return this.isNonHttpURI?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":""}},methods:{focusoutAction:function(){this.$emit("focusout")}}},a=n(33),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isInternal?n("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction(e)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):n("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?n("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:s},computed:{data:function(){return this.$page.frontmatter},actionLink:function(){return{link:this.data.actionLink,text:this.data.actionText}}}},u=(n(316),Object(a.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"home",attrs:{"aria-labelledby":"main-title"}},[n("header",{staticClass:"hero"},[t.data.heroImage?n("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?n("h1",{attrs:{id:"main-title"}},[t._v("\n      "+t._s(t.data.heroText||t.$title||"Hello")+"\n    ")]):t._e(),t._v(" "),null!==t.data.tagline?n("p",{staticClass:"description"},[t._v("\n      "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n    ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?n("p",{staticClass:"action"},[n("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?n("div",{staticClass:"features"},t._l(t.data.features,(function(e,i){return n("div",{key:i,staticClass:"feature"},[n("h2",[t._v(t._s(e.title))]),t._v(" "),n("p",[t._v(t._s(e.details))])])})),0):t._e(),t._v(" "),n("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?n("div",{staticClass:"footer"},[t._v("\n    "+t._s(t.data.footer)+"\n  ")]):t._e()],1)}),[],!1,null,null,null).exports),l=(n(317),n(19),n(146),n(136),n(302),n(34),n(148),n(276),n(305),n(143),n(53),n(306),n(307),n(322),n(54),n(303),n(149)),c=n.n(l),h=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=c()(e,"title","");return c()(e,"frontmatter.tags")&&(i+=" ".concat(e.frontmatter.tags.join(" "))),n&&(i+=" ".concat(n)),f(t,i)},f=function(t,e){var n=function(t){return t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")},i=new RegExp("[^\0-]"),r=t.split(/\s+/g).map((function(t){return t.trim()})).filter((function(t){return!!t}));if(i.test(t))return r.some((function(t){return e.toLowerCase().indexOf(t)>-1}));var a=t.endsWith(" ");return new RegExp(r.map((function(t,e){return r.length!==e+1||a?"(?=.*\\b".concat(n(t),"\\b)"):"(?=.*\\b".concat(n(t),")")})).join("")+".+","gi").test(e)},p={name:"SearchBox",data:function(){return{query:"",focused:!1,focusIndex:0,placeholder:void 0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var t=this.query.trim().toLowerCase();if(t){for(var e=this.$site.pages,n=this.$site.themeConfig.searchMaxSuggestions||5,i=this.$localePath,r=[],a=0;a=n);a++){var s=e[a];if(this.getPageLocalePath(s)===i&&this.isSearchable(s))if(h(t,s))r.push(s);else if(s.headers)for(var o=0;o=n);o++){var u=s.headers[o];u.title&&h(t,s,u.title)&&r.push(Object.assign({},s,{path:s.path+"#"+u.slug,header:u}))}}return r}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted:function(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy:function(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath:function(t){for(var e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable:function(t){var e=null;return null===e||(e=Array.isArray(e)?e:new Array(e)).filter((function(e){return t.path.match(e)})).length>0},onHotkey:function(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex "+t._s(e.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(324),Object(a.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[n("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[n("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),v=(n(142),n(31)),m=n(310),b=n(150),k=n.n(b),_={name:"DropdownLink",components:{NavLink:s,DropdownTransition:m.a},props:{item:{required:!0}},data:function(){return{open:!1}},computed:{dropdownAriaLabel:function(){return this.item.ariaLabel||this.item.text}},watch:{$route:function(){this.open=!1}},methods:{setOpen:function(t){this.open=t},isLastItemOfArray:function(t,e){return k()(e)===t}}},x=(n(326),{name:"NavLinks",components:{NavLink:s,DropdownLink:Object(a.a)(_,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[n("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),n("DropdownTransition",[n("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(e,i){return n("li",{key:e.link||i,staticClass:"dropdown-item"},["links"===e.type?n("h4",[t._v("\n          "+t._s(e.text)+"\n        ")]):t._e(),t._v(" "),"links"===e.type?n("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(e.items,(function(i){return n("li",{key:i.link,staticClass:"dropdown-subitem"},[n("NavLink",{attrs:{item:i},on:{focusout:function(n){t.isLastItemOfArray(i,e.items)&&t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0):n("NavLink",{attrs:{item:e},on:{focusout:function(n){t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav:function(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav:function(){var t=this,e=this.$site.locales;if(e&&Object.keys(e).length>1){var n=this.$page.path,i=this.$router.options.routes,r=this.$site.themeConfig.locales||{},a={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(e).map((function(a){var s,o=e[a],u=r[a]&&r[a].label||o.lang;return o.lang===t.$lang?s=n:(s=n.replace(t.$localeConfig.path,a),i.some((function(t){return t.path===s}))||(s=a)),{text:u,link:s}}))};return[].concat(Object(v.a)(this.userNav),[a])}return this.userNav},userLinks:function(){return(this.nav||[]).map((function(t){return Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)})}))},repoLink:function(){var t=this.$site.themeConfig.repo;return t?/^https?:/.test(t)?t:"https://github.com/".concat(t):null},repoLabel:function(){if(this.repoLink){if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;for(var t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"],n=0;nMath.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),B=Object(a.a)(W,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?n("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),n("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),n("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?n("Home"):n("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.a=B.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/2.d536d6fb.js b/docs/assets/js/2.d536d6fb.js
new file mode 100644
index 000000000..84dd7195a
--- /dev/null
+++ b/docs/assets/js/2.d536d6fb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{303:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return l})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return p})),n.d(e,"k",(function(){return f})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return v})),n.d(e,"j",(function(){return m}));n(24),n(99),n(166),n(93),n(172),n(64),n(43),n(305),n(65),n(331),n(102);var i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function u(t){return s.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(u(t))return t;var e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function p(t,e){var n=decodeURIComponent(t.hash),r=function(t){var e=t.match(i);if(e)return e[0]}(e);return(!r||n===r)&&o(t.path)===o(e)}function f(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){var i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;var r=e.split("/");n&&r[r.length-1]||r.pop();for(var a=t.replace(/^\//,"").split("/"),s=0;s3&&void 0!==arguments[3]?arguments[3]:1;if("string"==typeof e)return f(n,e,i);if(Array.isArray(e))return Object.assign(f(n,e[0],i),{title:e[1]});var a=e.children||[];return 0===a.length&&e.path?Object.assign(f(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map((function(e){return t(e,n,i,r+1)})),collapsable:!1!==e.collapsable}}(t,r,l)})):[]}return[]}function g(t){var e=v(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map((function(e){return{type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}}))}]}function v(t){var e;return(t=t.map((function(t){return Object.assign({},t)}))).forEach((function(t){2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)})),t.filter((function(t){return 2===t.level}))}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},305:function(t,e,n){"use strict";var i=n(168),r=n(5),a=n(13),s=n(23),o=n(169),u=n(170);i("match",1,(function(t,e,n){return[function(e){var n=s(this),i=null==e?void 0:e[t];return void 0!==i?i.call(e,n):new RegExp(e)[t](String(n))},function(t){var i=n(e,t,this);if(i.done)return i.value;var s=r(t),l=String(this);if(!s.global)return u(s,l);var c=s.unicode;s.lastIndex=0;for(var h,p=[],f=0;null!==(h=u(s,l));){var d=String(h[0]);p[f]=d,""===d&&(s.lastIndex=o(l,a(s.lastIndex),c)),f++}return 0===f?null:p}]}))},306:function(t,e,n){},307:function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},308:function(t,e,n){},309:function(t,e,n){},310:function(t,e,n){},311:function(t,e,n){},312:function(t,e,n){},313:function(t,e,n){},314:function(t,e,n){},315:function(t,e,n){},316:function(t,e,n){},317:function(t,e,n){},318:function(t,e,n){},319:function(t,e,n){},331:function(t,e,n){"use strict";var i=n(168),r=n(167),a=n(5),s=n(23),o=n(98),u=n(169),l=n(13),c=n(170),h=n(67),p=n(1),f=[].push,d=Math.min,g=!p((function(){return!RegExp(4294967295,"y")}));i("split",2,(function(t,e,n){var i;return i="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var i=String(s(this)),a=void 0===n?4294967295:n>>>0;if(0===a)return[];if(void 0===t)return[i];if(!r(t))return e.call(i,t,a);for(var o,u,l,c=[],p=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),d=0,g=new RegExp(t.source,p+"g");(o=h.call(g,i))&&!((u=g.lastIndex)>d&&(c.push(i.slice(d,o.index)),o.length>1&&o.index=a));)g.lastIndex===o.index&&g.lastIndex++;return d===i.length?!l&&g.test("")||c.push(""):c.push(i.slice(d)),c.length>a?c.slice(0,a):c}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:e.call(this,t,n)}:e,[function(e,n){var r=s(this),a=null==e?void 0:e[t];return void 0!==a?a.call(e,r,n):i.call(String(r),e,n)},function(t,r){var s=n(i,t,this,r,i!==e);if(s.done)return s.value;var h=a(t),p=String(this),f=o(h,RegExp),v=h.unicode,m=(h.ignoreCase?"i":"")+(h.multiline?"m":"")+(h.unicode?"u":"")+(g?"y":"g"),b=new f(g?h:"^(?:"+h.source+")",m),k=void 0===r?4294967295:r>>>0;if(0===k)return[];if(0===p.length)return null===c(b,p)?[p]:[];for(var _=0,x=0,C=[];x-1)&&(e=e.replace(/y/g,""));var o=s(x?new m(t,e):m(t,e),i?this:b,$);return C&&n&&d(o,{sticky:n}),o},y=function(t){t in $||o($,t,{configurable:!0,get:function(){return m[t]},set:function(e){m[t]=e}})},L=u(m),w=0;L.length>w;)y(L[w++]);b.constructor=$,$.prototype=b,p(r,"RegExp",$)}g("RegExp")},335:function(t,e){t.exports=function(t){return null==t}},336:function(t,e,n){"use strict";n.r(e);n(165);var i=n(303),r={name:"SidebarGroup",components:{DropdownTransition:n(337).a},props:["item","open","collapsable","depth"],beforeCreate:function(){this.$options.components.SidebarLinks=n(336).default},methods:{isActive:i.e}},a=(n(358),n(42)),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?n("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):n("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),n("DropdownTransition",[t.open||!t.collapsable?n("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;n(359),n(64);function o(t,e,n,i,r){var a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}};return r>2&&(a.style={"padding-left":r+"rem"}),t("RouterLink",a,n)}function u(t,e,n,r,a){var s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||s>a?null:t("ul",{class:"sidebar-sub-headers"},e.map((function(e){var l=Object(i.e)(r,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,l,e.level-1),u(t,e.children,n,r,a,s+1)])})))}var l={functional:!0,props:["item","sidebarDepth"],render:function(t,e){var n=e.parent,r=n.$page,a=(n.$site,n.$route),s=n.$themeConfig,l=n.$themeLocaleConfig,c=e.props,h=c.item,p=c.sidebarDepth,f=Object(i.e)(a,h.path),d="auto"===h.type?f||h.children.some((function(t){return Object(i.e)(a,h.basePath+"#"+t.slug)})):f,g="external"===h.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,h.path,h.title||h.path):o(t,h.path,h.title||h.path,d),v=[r.frontmatter.sidebarDepth,p,l.sidebarDepth,s.sidebarDepth,1].find((function(t){return void 0!==t})),m=l.displayAllHeaders||s.displayAllHeaders;return"auto"===h.type?[g,u(t,h.children,h.basePath,a,v)]:(d||m)&&h.headers&&!i.d.test(h.path)?[g,u(t,Object(i.c)(h.headers),h.path,a,v)]:g}};n(360);function c(t,e){return"group"===e.type&&e.children.some((function(e){return"group"===e.type?c(t,e):"page"===e.type&&Object(i.e)(t,e.path)}))}var h={name:"SidebarLinks",components:{SidebarGroup:s,SidebarLink:Object(a.a)(l,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data:function(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route:function(){this.refreshIndex()}},created:function(){this.refreshIndex()},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Object(i.e)(this.$route,t.regularPath)}}},p=Object(a.a)(h,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.items.length?n("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(e,i){return n("li",{key:i},["group"===e.type?n("SidebarGroup",{attrs:{item:e,open:i===t.openGroupIndex,collapsable:e.collapsable||e.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):n("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:e}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=p.exports},337:function(t,e,n){"use strict";var i={name:"DropdownTransition",methods:{setHeight:function(t){t.style.height=t.scrollHeight+"px"},unsetHeight:function(t){t.style.height=""}}},r=(n(350),n(42)),a=Object(r.a)(i,(function(){var t=this.$createElement;return(this._self._c||t)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},339:function(t,e,n){"use strict";var i=n(0),r=n(340);i({target:"String",proto:!0,forced:n(341)("link")},{link:function(t){return r(this,"a","href",t)}})},340:function(t,e,n){var i=n(23),r=/"/g;t.exports=function(t,e,n,a){var s=String(i(t)),o="<"+e;return""!==n&&(o+=" "+n+'="'+String(a).replace(r,""")+'"'),o+">"+s+""}},341:function(t,e,n){var i=n(1);t.exports=function(t){return i((function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}))}},342:function(t,e,n){"use strict";var i=n(306);n.n(i).a},343:function(t,e,n){var i=n(0),r=n(344);i({global:!0,forced:parseInt!=r},{parseInt:r})},344:function(t,e,n){var i=n(3),r=n(332).trim,a=n(307),s=i.parseInt,o=/^[+-]?0[Xx]/,u=8!==s(a+"08")||22!==s(a+"0x16");t.exports=u?function(t,e){var n=r(String(t));return s(n,e>>>0||(o.test(n)?16:10))}:s},345:function(t,e,n){var i=n(1),r=n(307);t.exports=function(t){return i((function(){return!!r[t]()||"​…᠎"!="​…᠎"[t]()||r[t].name!==t}))}},346:function(t,e,n){var i=n(4),r=n(97);t.exports=function(t,e,n){var a,s;return r&&"function"==typeof(a=e.constructor)&&a!==n&&i(s=a.prototype)&&s!==n.prototype&&r(t,s),t}},347:function(t,e,n){"use strict";var i,r=n(0),a=n(25).f,s=n(13),o=n(100),u=n(23),l=n(101),c=n(20),h="".endsWith,p=Math.min,f=l("endsWith");r({target:"String",proto:!0,forced:!!(c||f||(i=a(String.prototype,"endsWith"),!i||i.writable))&&!f},{endsWith:function(t){var e=String(u(this));o(t);var n=arguments.length>1?arguments[1]:void 0,i=s(e.length),r=void 0===n?i:p(s(n),i),a=String(t);return h?h.call(e,a,r):e.slice(r-a.length,r)===a}})},348:function(t,e,n){"use strict";var i=n(308);n.n(i).a},349:function(t,e,n){"use strict";var i=n(309);n.n(i).a},350:function(t,e,n){"use strict";var i=n(310);n.n(i).a},351:function(t,e,n){"use strict";var i=n(311);n.n(i).a},352:function(t,e,n){"use strict";var i=n(312);n.n(i).a},353:function(t,e,n){"use strict";var i=n(313);n.n(i).a},354:function(t,e,n){"use strict";var i=n(314);n.n(i).a},355:function(t,e,n){var i=n(30),r=n(14),a=n(26);t.exports=function(t){return"string"==typeof t||!r(t)&&a(t)&&"[object String]"==i(t)}},356:function(t,e,n){"use strict";var i=n(315);n.n(i).a},357:function(t,e,n){"use strict";var i=n(316);n.n(i).a},358:function(t,e,n){"use strict";var i=n(317);n.n(i).a},359:function(t,e,n){"use strict";var i=n(0),r=n(29).find,a=n(95),s=n(17),o=!0,u=s("find");"find"in[]&&Array(1).find((function(){o=!1})),i({target:"Array",proto:!0,forced:o||!u},{find:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}}),a("find")},360:function(t,e,n){"use strict";var i=n(318);n.n(i).a},361:function(t,e,n){"use strict";var i=n(319);n.n(i).a},372:function(t,e,n){"use strict";n(165),n(92),n(339);var i=n(303),r={name:"NavLink",props:{item:{required:!0}},computed:{link:function(){return Object(i.b)(this.item.link)},exact:function(){var t=this;return this.$site.locales?Object.keys(this.$site.locales).some((function(e){return e===t.link})):"/"===this.link},isNonHttpURI:function(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget:function(){return"_blank"===this.target},isInternal:function(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target:function(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel:function(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction:function(){this.$emit("focusout")}}},a=n(42),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isInternal?n("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction(e)}}},[t._v("\n  "+t._s(t.item.text)+"\n")]):n("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n  "+t._s(t.item.text)+"\n  "),t.isBlankTarget?n("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:s},computed:{data:function(){return this.$page.frontmatter},actionLink:function(){return{link:this.data.actionLink,text:this.data.actionText}}}},u=(n(342),Object(a.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[n("header",{staticClass:"hero"},[t.data.heroImage?n("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?n("h1",{attrs:{id:"main-title"}},[t._v("\n      "+t._s(t.data.heroText||t.$title||"Hello")+"\n    ")]):t._e(),t._v(" "),null!==t.data.tagline?n("p",{staticClass:"description"},[t._v("\n      "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n    ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?n("p",{staticClass:"action"},[n("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?n("div",{staticClass:"features"},t._l(t.data.features,(function(e,i){return n("div",{key:i,staticClass:"feature"},[n("h2",[t._v(t._s(e.title))]),t._v(" "),n("p",[t._v(t._s(e.details))])])})),0):t._e(),t._v(" "),n("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?n("div",{staticClass:"footer"},[t._v("\n    "+t._s(t.data.footer)+"\n  ")]):t._e()],1)}),[],!1,null,null,null).exports),l=(n(343),n(24),n(174),n(166),n(93),n(43),n(176),n(305),n(333),n(172),n(64),n(334),n(94),n(347),n(65),n(331),n(177)),c=n.n(l),h=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=c()(e,"title","");return c()(e,"frontmatter.tags")&&(i+=" ".concat(e.frontmatter.tags.join(" "))),n&&(i+=" ".concat(n)),p(t,i)},p=function(t,e){var n=function(t){return t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")},i=new RegExp("[^\0-]"),r=t.split(/\s+/g).map((function(t){return t.trim()})).filter((function(t){return!!t}));if(i.test(t))return r.some((function(t){return e.toLowerCase().indexOf(t)>-1}));var a=t.endsWith(" ");return new RegExp(r.map((function(t,e){return r.length!==e+1||a?"(?=.*\\b".concat(n(t),"\\b)"):"(?=.*\\b".concat(n(t),")")})).join("")+".+","gi").test(e)},f={name:"SearchBox",data:function(){return{query:"",focused:!1,focusIndex:0,placeholder:void 0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var t=this.query.trim().toLowerCase();if(t){for(var e=this.$site.pages,n=this.$site.themeConfig.searchMaxSuggestions||5,i=this.$localePath,r=[],a=0;a=n);a++){var s=e[a];if(this.getPageLocalePath(s)===i&&this.isSearchable(s))if(h(t,s))r.push(s);else if(s.headers)for(var o=0;o=n);o++){var u=s.headers[o];u.title&&h(t,s,u.title)&&r.push(Object.assign({},s,{path:s.path+"#"+u.slug,header:u}))}}return r}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted:function(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy:function(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath:function(t){for(var e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable:function(t){var e=null;return null===e||(e=Array.isArray(e)?e:new Array(e)).filter((function(e){return t.path.match(e)})).length>0},onHotkey:function(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex "+t._s(e.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(349),Object(a.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[n("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[n("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),v=(n(171),n(40)),m=n(337),b=n(178),k=n.n(b),_={name:"DropdownLink",components:{NavLink:s,DropdownTransition:m.a},props:{item:{required:!0}},data:function(){return{open:!1}},computed:{dropdownAriaLabel:function(){return this.item.ariaLabel||this.item.text}},watch:{$route:function(){this.open=!1}},methods:{setOpen:function(t){this.open=t},isLastItemOfArray:function(t,e){return k()(e)===t},handleDropdown:function(){0===event.detail&&this.setOpen(!this.open)}}},x=(n(351),{name:"NavLinks",components:{NavLink:s,DropdownLink:Object(a.a)(_,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[n("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow down"})]),t._v(" "),n("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),n("DropdownTransition",[n("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(e,i){return n("li",{key:e.link||i,staticClass:"dropdown-item"},["links"===e.type?n("h4",[t._v("\n          "+t._s(e.text)+"\n        ")]):t._e(),t._v(" "),"links"===e.type?n("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(e.items,(function(i){return n("li",{key:i.link,staticClass:"dropdown-subitem"},[n("NavLink",{attrs:{item:i},on:{focusout:function(n){t.isLastItemOfArray(i,e.items)&&t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0):n("NavLink",{attrs:{item:e},on:{focusout:function(n){t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav:function(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav:function(){var t=this,e=this.$site.locales;if(e&&Object.keys(e).length>1){var n=this.$page.path,i=this.$router.options.routes,r=this.$site.themeConfig.locales||{},a={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(e).map((function(a){var s,o=e[a],u=r[a]&&r[a].label||o.lang;return o.lang===t.$lang?s=n:(s=n.replace(t.$localeConfig.path,a),i.some((function(t){return t.path===s}))||(s=a)),{text:u,link:s}}))};return[].concat(Object(v.a)(this.userNav),[a])}return this.userNav},userLinks:function(){return(this.nav||[]).map((function(t){return Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)})}))},repoLink:function(){var t=this.$site.themeConfig.repo;return t?/^https?:/.test(t)?t:"https://github.com/".concat(t):null},repoLabel:function(){if(this.repoLink){if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;for(var t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"],n=0;nMath.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),G=Object(a.a)(W,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?n("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),n("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),n("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?n("Home"):n("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.a=G.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/20.ab1e767c.js b/docs/assets/js/20.e7f5e457.js
similarity index 99%
rename from docs/assets/js/20.ab1e767c.js
rename to docs/assets/js/20.e7f5e457.js
index b7b6c269b..4097c4045 100644
--- a/docs/assets/js/20.ab1e767c.js
+++ b/docs/assets/js/20.e7f5e457.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{431:function(t,a,e){"use strict";e.r(a);var s=e(33),r=Object(s.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"assetmanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assetmanager"}},[t._v("#")]),t._v(" AssetManager")]),t._v(" "),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._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n assetManager"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assetManager "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("AssetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ul",[e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#remove"}},[t._v("remove")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#store"}},[t._v("store")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#load"}},[t._v("load")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getassetsel"}},[t._v("getAssetsEl")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])])]),t._v(" "),e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),e("p",[t._v("Add new asset/s to the collection. URLs are supposed to be unique")]),t._v(" "),e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("asset")]),t._v(" "),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.")]),t._v(" "),e("li",[e("code",[t._v("opts")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In case of strings, would be interpreted as images")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Using objects you could indicate the type and other meta informations")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//type: 'image',\t//image is default")]),t._v("\n\theight"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nwidth"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("Model")])]),t._v(" "),e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),e("p",[t._v("Returns the asset by URL")]),t._v(" "),e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("src")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" asset "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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._v(" "),e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),e("p",[t._v("Return the global collection, containing all the assets")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("Collection")])]),t._v(" "),e("h2",{attrs:{id:"getallvisible"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible"}},[t._v("#")]),t._v(" getAllVisible")]),t._v(" "),e("p",[t._v("Return the visible collection, which containes assets actually rendered")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("Collection")])]),t._v(" "),e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),e("p",[t._v("Remove the asset by its URL")]),t._v(" "),e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("src")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("this")])]),t._v(" "),e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" store")]),t._v(" "),e("p",[t._v("Store assets data to the selected storage")]),t._v(" "),e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("noStore")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("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._v(" "),e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[t._v("#")]),t._v(" load")]),t._v(" "),e("p",[t._v("Load data from the passed object.\nThe fetched data will be added to the collection.")]),t._v(" "),e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("data")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tassets"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("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._v(" "),e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer"}},[t._v("#")]),t._v(" getContainer")]),t._v(" "),e("p",[t._v("Return the Asset Manager Container")]),t._v(" "),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(" "),e("h2",{attrs:{id:"getassetsel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getassetsel"}},[t._v("#")]),t._v(" getAssetsEl")]),t._v(" "),e("p",[t._v("Get assets element container")]),t._v(" "),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(" "),e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render")]),t._v(" "),e("p",[t._v("Render assets")]),t._v(" "),e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("assets")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render all assets")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render some of the assets")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assets "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("assets"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("asset")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" asset"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'category'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cats'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("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(" "),e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype"}},[t._v("#")]),t._v(" addType")]),t._v(" "),e("p",[t._v("Add new type. If you want to get more about type definition we suggest to read the "),e("RouterLink",{attrs:{to:"/modules/Assets.html"}},[t._v("module's page")])],1),t._v(" "),e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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")]),t._v(" "),e("li",[e("code",[t._v("definition")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addType")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-type'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("isType")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype"}},[t._v("#")]),t._v(" getType")]),t._v(" "),e("p",[t._v("Get type")]),t._v(" "),e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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")])]),t._v(" "),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._v(" "),e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes"}},[t._v("#")]),t._v(" getTypes")]),t._v(" "),e("p",[t._v("Get types")]),t._v(" "),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)])])])}),[],!1,null,null,null);a.default=r.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{434:function(t,a,e){"use strict";e.r(a);var s=e(42),r=Object(s.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"assetmanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assetmanager"}},[t._v("#")]),t._v(" AssetManager")]),t._v(" "),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._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n assetManager"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assetManager "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("AssetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ul",[e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#remove"}},[t._v("remove")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#store"}},[t._v("store")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#load"}},[t._v("load")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getassetsel"}},[t._v("getAssetsEl")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])])]),t._v(" "),e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),e("p",[t._v("Add new asset/s to the collection. URLs are supposed to be unique")]),t._v(" "),e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("asset")]),t._v(" "),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.")]),t._v(" "),e("li",[e("code",[t._v("opts")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In case of strings, would be interpreted as images")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Using objects you could indicate the type and other meta informations")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//type: 'image',\t//image is default")]),t._v("\n\theight"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("300")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nwidth"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("200")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tsrc"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./path/to/img.png'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("Model")])]),t._v(" "),e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),e("p",[t._v("Returns the asset by URL")]),t._v(" "),e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("src")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" asset "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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._v(" "),e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),e("p",[t._v("Return the global collection, containing all the assets")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("Collection")])]),t._v(" "),e("h2",{attrs:{id:"getallvisible"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible"}},[t._v("#")]),t._v(" getAllVisible")]),t._v(" "),e("p",[t._v("Return the visible collection, which containes assets actually rendered")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("Collection")])]),t._v(" "),e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),e("p",[t._v("Remove the asset by its URL")]),t._v(" "),e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("src")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'http://img.jpg'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("this")])]),t._v(" "),e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" store")]),t._v(" "),e("p",[t._v("Store assets data to the selected storage")]),t._v(" "),e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("noStore")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("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._v(" "),e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[t._v("#")]),t._v(" load")]),t._v(" "),e("p",[t._v("Load data from the passed object.\nThe fetched data will be added to the collection.")]),t._v(" "),e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("data")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" assets "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\tassets"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("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._v(" "),e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer"}},[t._v("#")]),t._v(" getContainer")]),t._v(" "),e("p",[t._v("Return the Asset Manager Container")]),t._v(" "),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(" "),e("h2",{attrs:{id:"getassetsel"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getassetsel"}},[t._v("#")]),t._v(" getAssetsEl")]),t._v(" "),e("p",[t._v("Get assets element container")]),t._v(" "),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(" "),e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render")]),t._v(" "),e("p",[t._v("Render assets")]),t._v(" "),e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("assets")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render all assets")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render some of the assets")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" assets "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nassetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("assets"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("asset")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" asset"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'category'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cats'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("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(" "),e("h2",{attrs:{id:"addtype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addtype"}},[t._v("#")]),t._v(" addType")]),t._v(" "),e("p",[t._v("Add new type. If you want to get more about type definition we suggest to read the "),e("RouterLink",{attrs:{to:"/modules/Assets.html"}},[t._v("module's page")])],1),t._v(" "),e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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")]),t._v(" "),e("li",[e("code",[t._v("definition")]),t._v(" "),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._v(" "),e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("assetManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addType")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-type'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("isType")]),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("h2",{attrs:{id:"gettype"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettype"}},[t._v("#")]),t._v(" getType")]),t._v(" "),e("p",[t._v("Get type")]),t._v(" "),e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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")])]),t._v(" "),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._v(" "),e("h2",{attrs:{id:"gettypes"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gettypes"}},[t._v("#")]),t._v(" getTypes")]),t._v(" "),e("p",[t._v("Get types")]),t._v(" "),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)])])])}),[],!1,null,null,null);a.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/21.66fe8957.js b/docs/assets/js/21.d845a12d.js
similarity index 99%
rename from docs/assets/js/21.66fe8957.js
rename to docs/assets/js/21.d845a12d.js
index cfc539c63..581180a79 100644
--- a/docs/assets/js/21.66fe8957.js
+++ b/docs/assets/js/21.d845a12d.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{415:function(t,e,a){"use strict";a.r(e);var s=a(33),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"blockmanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#blockmanager"}},[t._v("#")]),t._v(" BlockManager")]),t._v(" "),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n blockManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blockManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("BlockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#remove"}},[t._v("remove")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcategories"}},[t._v("getCategories")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#render"}},[t._v("render")])])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get configuration object")]),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(" "),a("h2",{attrs:{id:"onload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onload"}},[t._v("#")]),t._v(" onLoad")]),t._v(" "),a("p",[t._v("Load default blocks if the collection is empty")]),t._v(" "),a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),a("p",[t._v("Add new block to the collection.")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.label")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the block")]),t._v(" "),a("li",[a("code",[t._v("opts.content")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML content")]),t._v(" "),a("li",[a("code",[t._v("opts.category")]),t._v(" "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(")")]),t._v(" Group the block inside a catgegory.\nYou should pass objects with id property, eg:\n{id: 'some-uid', label: 'My category'}\nThe string will be converted in:\n'someid' => {id: 'someid', label: 'someid'}")]),t._v(" "),a("li",[a("code",[t._v("opts.attributes")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Block attributes (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])]),t._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'h1-block'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  label"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Heading'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  content"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Put your title here
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  category"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Basic'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Insert h1 block'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Block")]),t._v(" Added block")]),t._v(" "),a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),a("p",[t._v("Return the block by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")])]),t._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" block "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'h1-block'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {label: 'Heading', content: '
    Put your ...', ...}")]),t._v("\n")])])]),a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),a("p",[t._v("Return all blocks")]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [{label: 'Heading', content: '
    Put your ...'}, ...]")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Collection")])]),t._v(" "),a("h2",{attrs:{id:"getallvisible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible"}},[t._v("#")]),t._v(" getAllVisible")]),t._v(" "),a("p",[t._v("Return the visible collection, which containes blocks actually rendered")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Collection")])]),t._v(" "),a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),a("p",[t._v("Remove a block by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Block")]),t._v(" Removed block")]),t._v(" "),a("h2",{attrs:{id:"getcategories"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcategories"}},[t._v("#")]),t._v(" getCategories")]),t._v(" "),a("p",[t._v("Get all available categories.\nIt's possible to add categories only within blocks via 'add()' method")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(" | Collection)")])]),t._v(" "),a("h2",{attrs:{id:"getcontainer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer"}},[t._v("#")]),t._v(" getContainer")]),t._v(" "),a("p",[t._v("Return the Blocks container element")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render")]),t._v(" "),a("p",[t._v("Render blocks")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("blocks")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Blocks to render, without the argument will render all global blocks")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.external")]),t._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._v("?")]),t._v(" Render blocks in a new container (HTMLElement will be returned)")]),t._v(" "),a("li",[a("code",[t._v("opts.ignoreCategories")]),t._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._v("?")]),t._v(" Render blocks without categories")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render all blocks (inside the global collection)")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render new set of blocks")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" filtered "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blocks"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("block")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'category'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sections'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Or a new set from an array")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("label"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Label text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Content
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Back to blocks from the global collection")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// You can also render your blocks outside of the main block container")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newBlocksEl "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" external"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndocument"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-id'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendChild")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newBlocksEl"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)]),t._v(" Rendered element")])])}),[],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{456:function(t,e,a){"use strict";a.r(e);var s=a(42),n=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"blockmanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#blockmanager"}},[t._v("#")]),t._v(" BlockManager")]),t._v(" "),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n blockManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blockManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("BlockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#remove"}},[t._v("remove")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcategories"}},[t._v("getCategories")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#render"}},[t._v("render")])])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get configuration object")]),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(" "),a("h2",{attrs:{id:"onload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onload"}},[t._v("#")]),t._v(" onLoad")]),t._v(" "),a("p",[t._v("Load default blocks if the collection is empty")]),t._v(" "),a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),a("p",[t._v("Add new block to the collection.")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.label")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the block")]),t._v(" "),a("li",[a("code",[t._v("opts.content")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML content")]),t._v(" "),a("li",[a("code",[t._v("opts.category")]),t._v(" "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(")")]),t._v(" Group the block inside a catgegory.\nYou should pass objects with id property, eg:\n{id: 'some-uid', label: 'My category'}\nThe string will be converted in:\n'someid' => {id: 'someid', label: 'someid'}")]),t._v(" "),a("li",[a("code",[t._v("opts.attributes")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Block attributes (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])]),t._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'h1-block'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  label"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Heading'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  content"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Put your title here
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  category"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Basic'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Insert h1 block'")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Block")]),t._v(" Added block")]),t._v(" "),a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),a("p",[t._v("Return the block by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")])]),t._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" block "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'h1-block'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {label: 'Heading', content: '
    Put your ...', ...}")]),t._v("\n")])])]),a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),a("p",[t._v("Return all blocks")]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [{label: 'Heading', content: '
    Put your ...'}, ...]")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Collection")])]),t._v(" "),a("h2",{attrs:{id:"getallvisible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible"}},[t._v("#")]),t._v(" getAllVisible")]),t._v(" "),a("p",[t._v("Return the visible collection, which containes blocks actually rendered")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Collection")])]),t._v(" "),a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),a("p",[t._v("Remove a block by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Block id")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Block")]),t._v(" Removed block")]),t._v(" "),a("h2",{attrs:{id:"getcategories"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcategories"}},[t._v("#")]),t._v(" getCategories")]),t._v(" "),a("p",[t._v("Get all available categories.\nIt's possible to add categories only within blocks via 'add()' method")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(" | Collection)")])]),t._v(" "),a("h2",{attrs:{id:"getcontainer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer"}},[t._v("#")]),t._v(" getContainer")]),t._v(" "),a("p",[t._v("Return the Blocks container element")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render")]),t._v(" "),a("p",[t._v("Render blocks")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("blocks")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Blocks to render, without the argument will render all global blocks")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.external")]),t._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._v("?")]),t._v(" Render blocks in a new container (HTMLElement will be returned)")]),t._v(" "),a("li",[a("code",[t._v("opts.ignoreCategories")]),t._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._v("?")]),t._v(" Render blocks without categories")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render all blocks (inside the global collection)")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Render new set of blocks")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" filtered "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blocks"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("block")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'category'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'sections'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Or a new set from an array")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("label"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Label text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Content
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Back to blocks from the global collection")]),t._v("\nblockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// You can also render your blocks outside of the main block container")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newBlocksEl "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" external"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndocument"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-id'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendChild")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newBlocksEl"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)]),t._v(" Rendered element")])])}),[],!1,null,null,null);e.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/22.cb6c233f.js b/docs/assets/js/22.c3fd37bc.js
similarity index 98%
rename from docs/assets/js/22.cb6c233f.js
rename to docs/assets/js/22.c3fd37bc.js
index 0ef57936f..ca03aa14c 100644
--- a/docs/assets/js/22.cb6c233f.js
+++ b/docs/assets/js/22.c3fd37bc.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{413:function(t,e,a){"use strict";a.r(e);var s=a(33),r=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"canvas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#canvas"}},[t._v("#")]),t._v(" Canvas")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n canvas"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" canvas "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getelement"}},[t._v("getElement")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getframeel"}},[t._v("getFrameEl")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getwindow"}},[t._v("getWindow")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getdocument"}},[t._v("getDocument")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getbody"}},[t._v("getBody")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getwrapperel"}},[t._v("getWrapperEl")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setcustombadgelabel"}},[t._v("setCustomBadgeLabel")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#hasfocus"}},[t._v("hasFocus")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#scrollto"}},[t._v("scrollTo")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setzoom"}},[t._v("setZoom")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getzoom"}},[t._v("getZoom")])])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get the configuration object")]),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(" "),a("h2",{attrs:{id:"getelement"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getelement"}},[t._v("#")]),t._v(" getElement")]),t._v(" "),a("p",[t._v("Get the canvas element")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"getframeel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getframeel"}},[t._v("#")]),t._v(" getFrameEl")]),t._v(" "),a("p",[t._v("Get the iframe element of the canvas")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"getwindow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwindow"}},[t._v("#")]),t._v(" getWindow")]),t._v(" "),a("p",[t._v("Get the window instance of the iframe element")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"getdocument"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdocument"}},[t._v("#")]),t._v(" getDocument")]),t._v(" "),a("p",[t._v("Get the document of the iframe element")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("HTMLDocument")])]),t._v(" "),a("h2",{attrs:{id:"getbody"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getbody"}},[t._v("#")]),t._v(" getBody")]),t._v(" "),a("p",[t._v("Get the body of the iframe element")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"getwrapperel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwrapperel"}},[t._v("#")]),t._v(" getWrapperEl")]),t._v(" "),a("p",[t._v("Get the wrapper element containing all the components")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"setcustombadgelabel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcustombadgelabel"}},[t._v("#")]),t._v(" setCustomBadgeLabel")]),t._v(" "),a("p",[t._v("Set custom badge naming strategy")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("f")]),t._v(" "),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(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setCustomBadgeLabel")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getName")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"getrect"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getrect"}},[t._v("#")]),t._v(" getRect")]),t._v(" "),a("p",[t._v("Get canvas rectangular data")]),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(" "),a("h2",{attrs:{id:"hasfocus"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hasfocus"}},[t._v("#")]),t._v(" hasFocus")]),t._v(" "),a("p",[t._v("Check if the canvas is focused")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"scrollto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scrollto"}},[t._v("#")]),t._v(" scrollTo")]),t._v(" "),a("p",[t._v("Scroll canvas to the element if it's not visible. The scrolling is\nexecuted via "),a("code",[t._v("scrollIntoView")]),t._v(" API and options of this method are\npassed to it. For instance, you can scroll smoothly by using\n"),a("code",[t._v("{ behavior: 'smooth' }")]),t._v(".")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("el")]),t._v(" "),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)")])]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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")]),t._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._v(" Force the scroll, even if the element is already visible (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selected "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getSelected")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Scroll smoothly (this behavior can be polyfilled)")]),t._v("\ncanvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scrollTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selected"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" behavior"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smooth'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Force the scroll, even if the element is alredy visible")]),t._v("\ncanvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scrollTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selected"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" force"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"setzoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setzoom"}},[t._v("#")]),t._v(" setZoom")]),t._v(" "),a("p",[t._v("Set zoom value")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("value")]),t._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._v(" The zoom value, from 0 to 100")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getzoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getzoom"}},[t._v("#")]),t._v(" getZoom")]),t._v(" "),a("p",[t._v("Get zoom value")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"addframe"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addframe"}},[t._v("#")]),t._v(" addFrame")]),t._v(" "),a("p",[t._v("Add new frame to the canvas")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("props")]),t._v(" "),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(" Frame properties (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFrame")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\nname"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mobile home page'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nx"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Position in canvas")]),t._v("\ny"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nwidth"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Frame dimensions")]),t._v("\nheight"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("600")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// device: 'DEVICE-ID',")]),t._v("\ncomponents"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Title frame
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Paragraph frame
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nstyles"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("\n.testh { color: red; }\n.testp { color: blue; }\n")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Frame")])])])}),[],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{438:function(t,e,a){"use strict";a.r(e);var s=a(42),r=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"canvas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#canvas"}},[t._v("#")]),t._v(" Canvas")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n canvas"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" canvas "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getelement"}},[t._v("getElement")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getframeel"}},[t._v("getFrameEl")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getwindow"}},[t._v("getWindow")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getdocument"}},[t._v("getDocument")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getbody"}},[t._v("getBody")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getwrapperel"}},[t._v("getWrapperEl")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setcustombadgelabel"}},[t._v("setCustomBadgeLabel")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#hasfocus"}},[t._v("hasFocus")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#scrollto"}},[t._v("scrollTo")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setzoom"}},[t._v("setZoom")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getzoom"}},[t._v("getZoom")])])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get the configuration object")]),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(" "),a("h2",{attrs:{id:"getelement"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getelement"}},[t._v("#")]),t._v(" getElement")]),t._v(" "),a("p",[t._v("Get the canvas element")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"getframeel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getframeel"}},[t._v("#")]),t._v(" getFrameEl")]),t._v(" "),a("p",[t._v("Get the iframe element of the canvas")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"getwindow"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwindow"}},[t._v("#")]),t._v(" getWindow")]),t._v(" "),a("p",[t._v("Get the window instance of the iframe element")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"getdocument"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdocument"}},[t._v("#")]),t._v(" getDocument")]),t._v(" "),a("p",[t._v("Get the document of the iframe element")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("HTMLDocument")])]),t._v(" "),a("h2",{attrs:{id:"getbody"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getbody"}},[t._v("#")]),t._v(" getBody")]),t._v(" "),a("p",[t._v("Get the body of the iframe element")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"getwrapperel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwrapperel"}},[t._v("#")]),t._v(" getWrapperEl")]),t._v(" "),a("p",[t._v("Get the wrapper element containing all the components")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"setcustombadgelabel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcustombadgelabel"}},[t._v("#")]),t._v(" setCustomBadgeLabel")]),t._v(" "),a("p",[t._v("Set custom badge naming strategy")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("f")]),t._v(" "),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(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setCustomBadgeLabel")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getName")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"getrect"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getrect"}},[t._v("#")]),t._v(" getRect")]),t._v(" "),a("p",[t._v("Get canvas rectangular data")]),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(" "),a("h2",{attrs:{id:"hasfocus"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hasfocus"}},[t._v("#")]),t._v(" hasFocus")]),t._v(" "),a("p",[t._v("Check if the canvas is focused")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"scrollto"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scrollto"}},[t._v("#")]),t._v(" scrollTo")]),t._v(" "),a("p",[t._v("Scroll canvas to the element if it's not visible. The scrolling is\nexecuted via "),a("code",[t._v("scrollIntoView")]),t._v(" API and options of this method are\npassed to it. For instance, you can scroll smoothly by using\n"),a("code",[t._v("{ behavior: 'smooth' }")]),t._v(".")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("el")]),t._v(" "),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)")])]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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")]),t._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._v(" Force the scroll, even if the element is already visible (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selected "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getSelected")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Scroll smoothly (this behavior can be polyfilled)")]),t._v("\ncanvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scrollTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selected"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" behavior"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'smooth'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Force the scroll, even if the element is alredy visible")]),t._v("\ncanvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("scrollTo")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selected"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" force"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"setzoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setzoom"}},[t._v("#")]),t._v(" setZoom")]),t._v(" "),a("p",[t._v("Set zoom value")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("value")]),t._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._v(" The zoom value, from 0 to 100")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getzoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getzoom"}},[t._v("#")]),t._v(" getZoom")]),t._v(" "),a("p",[t._v("Get zoom value")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"addframe"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addframe"}},[t._v("#")]),t._v(" addFrame")]),t._v(" "),a("p",[t._v("Add new frame to the canvas")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("props")]),t._v(" "),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(" Frame properties (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Canvas"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addFrame")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\nname"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Mobile home page'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nx"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Position in canvas")]),t._v("\ny"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("100")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nwidth"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("500")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Frame dimensions")]),t._v("\nheight"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("600")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// device: 'DEVICE-ID',")]),t._v("\ncomponents"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Title frame
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Paragraph frame
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\nstyles"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("\n.testh { color: red; }\n.testp { color: blue; }\n")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Frame")])])])}),[],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/23.dc99d7c7.js b/docs/assets/js/23.8db1ae40.js
similarity index 99%
rename from docs/assets/js/23.dc99d7c7.js
rename to docs/assets/js/23.8db1ae40.js
index 809606bb7..a35c0e319 100644
--- a/docs/assets/js/23.dc99d7c7.js
+++ b/docs/assets/js/23.8db1ae40.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{414:function(t,a,s){"use strict";s.r(a);var e=s(33),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"commands"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#commands"}},[t._v("#")]),t._v(" Commands")]),t._v(" "),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n commands"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" commands "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#extend"}},[t._v("extend")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#has"}},[t._v("has")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#run"}},[t._v("run")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#stop"}},[t._v("stop")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#isactive"}},[t._v("isActive")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getactive"}},[t._v("getActive")])])]),t._v(" "),s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),s("p",[t._v("Add new command to the collection")]),t._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("command")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello world!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// As a function")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("this")])]),t._v(" "),s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),s("p",[t._v("Get command by ID")]),t._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myCommand "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmyCommand"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("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._v(" "),s("h2",{attrs:{id:"extend"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#extend"}},[t._v("#")]),t._v(" extend")]),t._v(" "),s("p",[t._v("Extend the command. The command to extend should be defined as an object")]),t._v(" "),s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("cmd")]),t._v("   (optional, default "),s("code",[t._v("{}")]),t._v(")")]),t._v(" "),s("li",[s("code",[t._v("Object")]),t._v(" "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" with the new command functions")])]),t._v(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'old-command'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("someInnerFunction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("this")])]),t._v(" "),s("h2",{attrs:{id:"has"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#has"}},[t._v("#")]),t._v(" has")]),t._v(" "),s("p",[t._v("Check if command exists")]),t._v(" "),s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),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._v(" "),s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),s("p",[t._v("Get an object containing all the commands")]),t._v(" "),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(" "),s("h2",{attrs:{id:"run"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#run"}},[t._v("#")]),t._v(" run")]),t._v(" "),s("p",[t._v("Execute the command")]),t._v(" "),s("h3",{attrs:{id:"parameters-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("options")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" someOption"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("any")]),t._v(" The return is defined by the command")]),t._v(" "),s("h2",{attrs:{id:"stop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stop"}},[t._v("#")]),t._v(" stop")]),t._v(" "),s("p",[t._v("Stop the command")]),t._v(" "),s("h3",{attrs:{id:"parameters-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("options")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" someOption"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("any")]),t._v(" The return is defined by the command")]),t._v(" "),s("h2",{attrs:{id:"isactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#isactive"}},[t._v("#")]),t._v(" isActive")]),t._v(" "),s("p",[t._v("Check if the command is active. You activate commands with "),s("code",[t._v("run")]),t._v("\nand disable them with "),s("code",[t._v("stop")]),t._v(". If the command was created without "),s("code",[t._v("stop")]),t._v("\nmethod it can't be registered as active")]),t._v(" "),s("h3",{attrs:{id:"parameters-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cId "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-command'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isActive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isActive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])]),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._v(" "),s("h2",{attrs:{id:"getactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getactive"}},[t._v("#")]),t._v(" getActive")]),t._v(" "),s("p",[t._v("Get all active commands")]),t._v(" "),s("h3",{attrs:{id:"examples-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getActive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { someCommand: itsLastReturn, anotherOne: ... };")]),t._v("\n")])])]),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)])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{439:function(t,a,s){"use strict";s.r(a);var e=s(42),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"commands"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#commands"}},[t._v("#")]),t._v(" Commands")]),t._v(" "),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n commands"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" commands "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#extend"}},[t._v("extend")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#has"}},[t._v("has")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#run"}},[t._v("run")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#stop"}},[t._v("stop")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#isactive"}},[t._v("isActive")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getactive"}},[t._v("getActive")])])]),t._v(" "),s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),s("p",[t._v("Add new command to the collection")]),t._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("command")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello world!'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sender")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// As a function")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("this")])]),t._v(" "),s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),s("p",[t._v("Get command by ID")]),t._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myCommand "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmyCommand"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("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._v(" "),s("h2",{attrs:{id:"extend"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#extend"}},[t._v("#")]),t._v(" extend")]),t._v(" "),s("p",[t._v("Extend the command. The command to extend should be defined as an object")]),t._v(" "),s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("cmd")]),t._v("   (optional, default "),s("code",[t._v("{}")]),t._v(")")]),t._v(" "),s("li",[s("code",[t._v("Object")]),t._v(" "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),s("OutboundLink")],1)]),t._v(" with the new command functions")])]),t._v(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'old-command'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("someInnerFunction")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("this")])]),t._v(" "),s("h2",{attrs:{id:"has"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#has"}},[t._v("#")]),t._v(" has")]),t._v(" "),s("p",[t._v("Check if command exists")]),t._v(" "),s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),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._v(" "),s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),s("p",[t._v("Get an object containing all the commands")]),t._v(" "),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(" "),s("h2",{attrs:{id:"run"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#run"}},[t._v("#")]),t._v(" run")]),t._v(" "),s("p",[t._v("Execute the command")]),t._v(" "),s("h3",{attrs:{id:"parameters-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("options")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" someOption"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("any")]),t._v(" The return is defined by the command")]),t._v(" "),s("h2",{attrs:{id:"stop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stop"}},[t._v("#")]),t._v(" stop")]),t._v(" "),s("p",[t._v("Stop the command")]),t._v(" "),s("h3",{attrs:{id:"parameters-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("options")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" someOption"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("any")]),t._v(" The return is defined by the command")]),t._v(" "),s("h2",{attrs:{id:"isactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#isactive"}},[t._v("#")]),t._v(" isActive")]),t._v(" "),s("p",[t._v("Check if the command is active. You activate commands with "),s("code",[t._v("run")]),t._v("\nand disable them with "),s("code",[t._v("stop")]),t._v(". If the command was created without "),s("code",[t._v("stop")]),t._v("\nmethod it can't be registered as active")]),t._v(" "),s("h3",{attrs:{id:"parameters-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cId "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-command'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isActive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> true")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncommands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isActive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cId"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])]),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._v(" "),s("h2",{attrs:{id:"getactive"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getactive"}},[t._v("#")]),t._v(" getActive")]),t._v(" "),s("p",[t._v("Get all active commands")]),t._v(" "),s("h3",{attrs:{id:"examples-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("console"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("commands"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getActive")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { someCommand: itsLastReturn, anotherOne: ... };")]),t._v("\n")])])]),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)])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/24.245fff8a.js b/docs/assets/js/24.245fff8a.js
deleted file mode 100644
index 88724523e..000000000
--- a/docs/assets/js/24.245fff8a.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{424:function(t,e,a){"use strict";a.r(e);var r=a(33),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#component"}},[t._v("#")]),t._v(" Component")]),t._v(" "),a("p",[t._v("The Component object represents a single node of our template structure, so when you update its properties the changes are\nimmediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all\nthe tree of nodes).\nAn example on how to update properties:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tagName"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n removable"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 'span'")]),t._v("\n")])])]),a("h3",{attrs:{id:"properties"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[t._v("#")]),t._v(" Properties")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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.")]),t._v(" "),a("li",[a("code",[t._v("tagName")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")])]),t._v(" "),a("li",[a("code",[t._v("attributes")]),t._v(" "),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("{}")])]),t._v(" "),a("li",[a("code",[t._v("name")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("removable")]),t._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._v("?")]),t._v(" When "),a("code",[t._v("true")]),t._v(" the component is removable from the canvas, default: "),a("code",[t._v("true")])]),t._v(" "),a("li",[a("code",[t._v("draggable")]),t._v(" "),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")])]),t._v(" "),a("li",[a("code",[t._v("droppable")]),t._v(" "),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")])]),t._v(" "),a("li",[a("code",[t._v("badgable")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("stylable")]),t._v(" "),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")])]),t._v(" "),a("li",[a("code",[t._v("stylable-require")]),t._v(" "),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("[]")])]),t._v(" "),a("li",[a("code",[t._v("unstylable")]),t._v(" "),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("[]")])]),t._v(" "),a("li",[a("code",[t._v("style-signature")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: "),a("code",[t._v("''")])]),t._v(" "),a("li",[a("code",[t._v("highlightable")]),t._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._v("?")]),t._v(" It can be highlighted with 'dotted' borders if true. Default: "),a("code",[t._v("true")])]),t._v(" "),a("li",[a("code",[t._v("copyable")]),t._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._v("?")]),t._v(" True if it's possible to clone the component. Default: "),a("code",[t._v("true")])]),t._v(" "),a("li",[a("code",[t._v("resizable")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("editable")]),t._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._v("?")]),t._v(" Allow to edit the content of the component (used on Text components). Default: "),a("code",[t._v("false")])]),t._v(" "),a("li",[a("code",[t._v("layerable")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("selectable")]),t._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._v("?")]),t._v(" Allow component to be selected when clicked. Default: "),a("code",[t._v("true")])]),t._v(" "),a("li",[a("code",[t._v("hoverable")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("void")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("content")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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("''")])]),t._v(" "),a("li",[a("code",[t._v("icon")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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("''")])]),t._v(" "),a("li",[a("code",[t._v("script")]),t._v(" "),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("RouterLink",{attrs:{to:"/modules/Components-js.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("''")])],1),t._v(" "),a("li",[a("code",[t._v("script-export")]),t._v(" "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")?")]),t._v(" You can specify javascript available only in export functions (eg. when you get the HTML).\nIf this property is defined it will overwrite the "),a("code",[t._v("script")]),t._v(" one (in export functions). Default: "),a("code",[t._v("''")])]),t._v(" "),a("li",[a("code",[t._v("traits")]),t._v(" "),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("RouterLink",{attrs:{to:"/modules/Traits.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("['id', 'title']")])],1),t._v(" "),a("li",[a("code",[t._v("propagate")]),t._v(" "),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("[]")])]),t._v(" "),a("li",[a("code",[t._v("toolbar")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("components")]),t._v(" "),a("strong",[t._v("Collection<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">?")]),t._v(" Children components. Default: "),a("code",[t._v("null")])])]),t._v(" "),a("h2",{attrs:{id:"init"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#init"}},[t._v("#")]),t._v(" init")]),t._v(" "),a("p",[t._v("Hook method, called once the model is created")]),t._v(" "),a("h2",{attrs:{id:"updated"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#updated"}},[t._v("#")]),t._v(" updated")]),t._v(" "),a("p",[t._v("Hook method, called when the model has been updated (eg. updated some model's property)")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("property")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Property name, if triggered after some property update")]),t._v(" "),a("li",[a("code",[t._v("value")]),t._v(" "),a("strong",[t._v("any")]),t._v(" Property value, if triggered after some property update")]),t._v(" "),a("li",[a("code",[t._v("previous")]),t._v(" "),a("strong",[t._v("any")]),t._v(" Property previous value, if triggered after some property update")])]),t._v(" "),a("h2",{attrs:{id:"removed"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removed"}},[t._v("#")]),t._v(" removed")]),t._v(" "),a("p",[t._v("Hook method, called once the model has been removed")]),t._v(" "),a("h2",{attrs:{id:"is"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#is"}},[t._v("#")]),t._v(" is")]),t._v(" "),a("p",[t._v("Check component's type")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("is")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'image'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[t._v("#")]),t._v(" props")]),t._v(" "),a("p",[t._v("Return all the propeties")]),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(" "),a("h2",{attrs:{id:"index"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#index"}},[t._v("#")]),t._v(" index")]),t._v(" "),a("p",[t._v("Get the index of the component in the parent collection.")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"setdragmode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdragmode"}},[t._v("#")]),t._v(" setDragMode")]),t._v(" "),a("p",[t._v("Change the drag mode of the component.\nTo get more about this feature read: "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/issues/1936",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/artf/grapesjs/issues/1936"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("value")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Drag mode, options: 'absolute' | 'translate'")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"find"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#find"}},[t._v("#")]),t._v(" find")]),t._v(" "),a("p",[t._v("Find inner components by query string.\n"),a("strong",[t._v("ATTENTION")]),t._v(": this method works only with already rendered component")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("query")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div > .class'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [Component, Component, ...]")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"findtype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#findtype"}},[t._v("#")]),t._v(" findType")]),t._v(" "),a("p",[t._v("Find all inner components by component type.\nThe advantage of this method over "),a("code",[t._v("find")]),t._v(" is that you can use it\nalso before rendering the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" allImages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("findType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'image'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("allImages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// prints the first found component")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">")])]),t._v(" "),a("h2",{attrs:{id:"closest"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closest"}},[t._v("#")]),t._v(" closest")]),t._v(" "),a("p",[t._v("Find the closest parent component by query string.\n"),a("strong",[t._v("ATTENTION")]),t._v(": this method works only with already rendered component")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("query")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("closest")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div.some-class'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])])]),t._v(" "),a("h2",{attrs:{id:"closesttype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closesttype"}},[t._v("#")]),t._v(" closestType")]),t._v(" "),a("p",[t._v("Find the closest parent component by its type.\nThe advantage of this method over "),a("code",[t._v("closest")]),t._v(" is that you can use it\nalso before rendering the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Section "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("closestType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'section'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Section"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])]),t._v(" Found component, otherwise "),a("code",[t._v("undefined")])]),t._v(" "),a("h2",{attrs:{id:"replacewith"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#replacewith"}},[t._v("#")]),t._v(" replaceWith")]),t._v(" "),a("p",[t._v("Replace a component with another one")]),t._v(" "),a("h3",{attrs:{id:"parameters-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("el")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("replaceWith")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Some new content
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"setattributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setattributes"}},[t._v("#")]),t._v(" setAttributes")]),t._v(" "),a("p",[t._v("Update attributes of the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("attrs")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"addattributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addattributes"}},[t._v("#")]),t._v(" addAttributes")]),t._v(" "),a("p",[t._v("Add attributes to the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("attrs")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-8"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstyle"}},[t._v("#")]),t._v(" getStyle")]),t._v(" "),a("p",[t._v("Get the style of the component")]),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(" "),a("h2",{attrs:{id:"setstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setstyle"}},[t._v("#")]),t._v(" setStyle")]),t._v(" "),a("p",[t._v("Set the style on the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("prop")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-9"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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(" "),a("h2",{attrs:{id:"getattributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getattributes"}},[t._v("#")]),t._v(" getAttributes")]),t._v(" "),a("p",[t._v("Return all component's attributes")]),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(" "),a("h2",{attrs:{id:"addclass"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addclass"}},[t._v("#")]),t._v(" addClass")]),t._v(" "),a("p",[t._v("Add classes")]),t._v(" "),a("h3",{attrs:{id:"parameters-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("classes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-10"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"setclass"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setclass"}},[t._v("#")]),t._v(" setClass")]),t._v(" "),a("p",[t._v("Set classes (resets current collection)")]),t._v(" "),a("h3",{attrs:{id:"parameters-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("classes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-11"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"removeclass"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removeclass"}},[t._v("#")]),t._v(" removeClass")]),t._v(" "),a("p",[t._v("Remove classes")]),t._v(" "),a("h3",{attrs:{id:"parameters-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("classes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-12"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"getclasses"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getclasses"}},[t._v("#")]),t._v(" getClasses")]),t._v(" "),a("p",[t._v("Returns component's classes as an array of strings")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"append"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#append"}},[t._v("#")]),t._v(" append")]),t._v(" "),a("p",[t._v("Add new component children")]),t._v(" "),a("h3",{attrs:{id:"parameters-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("components")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-13"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("someComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 0")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" videoComponent "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" someComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This will add 2 components (`video` and `div`) to your `someComponent`")]),t._v("\nsomeComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// You can pass components directly")]),t._v("\notherComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("otherComponent2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\notherComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("otherComponent3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" otherComponent4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[t._v("#")]),t._v(" components")]),t._v(" "),a("p",[t._v("Set new collection if "),a("code",[t._v("components")]),t._v(" are provided, otherwise the\ncurrent collection is returned")]),t._v(" "),a("h3",{attrs:{id:"parameters-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("components")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-14"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set new collection")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("components")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Get current collection")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" collection "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("components")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("collection"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"empty"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empty"}},[t._v("#")]),t._v(" empty")]),t._v(" "),a("p",[t._v("Remove all inner components")]),t._v(" "),a("ul",[a("li",[t._v("@return {this}")])]),t._v(" "),a("h3",{attrs:{id:"parameters-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h2",{attrs:{id:"parent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parent"}},[t._v("#")]),t._v(" parent")]),t._v(" "),a("p",[t._v("Get the parent component, if exists")]),t._v(" "),a("h3",{attrs:{id:"examples-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-15"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("parent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])])]),t._v(" "),a("h2",{attrs:{id:"gettrait"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettrait"}},[t._v("#")]),t._v(" getTrait")]),t._v(" "),a("p",[t._v("Get the trait by id/name")]),t._v(" "),a("h3",{attrs:{id:"parameters-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._v(" "),a("h3",{attrs:{id:"examples-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-16"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ntraitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" traitTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'label'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New label'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Trait")]),t._v(" Trait model")]),t._v(" "),a("h2",{attrs:{id:"updatetrait"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#updatetrait"}},[t._v("#")]),t._v(" updateTrait")]),t._v(" "),a("p",[t._v("Update a trait")]),t._v(" "),a("h3",{attrs:{id:"parameters-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")]),t._v(" "),a("li",[a("code",[t._v("props")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object with the props to update")])]),t._v(" "),a("h3",{attrs:{id:"examples-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-17"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("updateTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n options"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Option 1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Option 2'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"gettraitindex"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettraitindex"}},[t._v("#")]),t._v(" getTraitIndex")]),t._v(" "),a("p",[t._v("Get the trait position index by id/name. Useful in case you want to\nreplace some trait, at runtime, with something else.")]),t._v(" "),a("h3",{attrs:{id:"parameters-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._v(" "),a("h3",{attrs:{id:"examples-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-18"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getTraitIndex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("traitTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)]),t._v(" Index position of the current trait")]),t._v(" "),a("h2",{attrs:{id:"removetrait"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removetrait"}},[t._v("#")]),t._v(" removeTrait")]),t._v(" "),a("p",[t._v("Remove trait/s by id/s.")]),t._v(" "),a("h3",{attrs:{id:"parameters-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">)")]),t._v(" The "),a("code",[t._v("id")]),t._v("/"),a("code",[t._v("name")]),t._v(" of the trait (or an array)")])]),t._v(" "),a("h3",{attrs:{id:"examples-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-19"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'id'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed traits")]),t._v(" "),a("h2",{attrs:{id:"addtrait"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addtrait"}},[t._v("#")]),t._v(" addTrait")]),t._v(" "),a("p",[t._v("Add trait/s by id/s.")]),t._v(" "),a("h3",{attrs:{id:"parameters-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("trait")]),t._v(" "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(")>)")]),t._v(" Trait to add (or an array of traits)")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),a("strong",[t._v("Options")]),t._v(" Options for the add (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-20"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Add title trait (`at` option is the position index)")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'checkbox'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'disabled'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added traits")]),t._v(" "),a("h2",{attrs:{id:"getname"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getname"}},[t._v("#")]),t._v(" getName")]),t._v(" "),a("p",[t._v("Get the name of the component")]),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(" "),a("h2",{attrs:{id:"geticon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geticon"}},[t._v("#")]),t._v(" getIcon")]),t._v(" "),a("p",[t._v("Get the icon string")]),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(" "),a("h2",{attrs:{id:"tohtml"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tohtml"}},[t._v("#")]),t._v(" toHTML")]),t._v(" "),a("p",[t._v("Return HTML string of the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-23"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("opts")]),t._v(" "),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.tag")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(" Custom tagName")]),t._v(" "),a("li",[a("code",[t._v("opts.attributes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-21"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Simple HTML return")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" tagName"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Custom attributes")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-test'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Custom dynamic attributes")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("attributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" attributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Custom attribute'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"getid"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getid"}},[t._v("#")]),t._v(" getId")]),t._v(" "),a("p",[t._v("Return the component id")]),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(" "),a("h2",{attrs:{id:"setid"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setid"}},[t._v("#")]),t._v(" setId")]),t._v(" "),a("p",[t._v("Set new id on the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-24"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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("li",[a("code",[t._v("opts")])])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getel"}},[t._v("#")]),t._v(" getEl")]),t._v(" "),a("p",[t._v("Get the DOM element of the component.\nThis works only if the component is already rendered")]),t._v(" "),a("h3",{attrs:{id:"parameters-25"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-25"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("frame")]),t._v(" "),a("strong",[t._v("Frame")]),t._v(" Specific frame from which taking the element")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"getview"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getview"}},[t._v("#")]),t._v(" getView")]),t._v(" "),a("p",[t._v("Get the View of the component.\nThis works only if the component is already rendered")]),t._v(" "),a("h3",{attrs:{id:"parameters-26"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-26"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("frame")]),t._v(" "),a("strong",[t._v("Frame")]),t._v(" Get View of a specific frame")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("ComponentView")])]),t._v(" "),a("h2",{attrs:{id:"onall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onall"}},[t._v("#")]),t._v(" onAll")]),t._v(" "),a("p",[t._v("Execute callback function on itself and all inner components")]),t._v(" "),a("h3",{attrs:{id:"parameters-27"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-27"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("clb")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-22"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something with component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),a("p",[t._v("Remove the component")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getlist"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getlist"}},[t._v("#")]),t._v(" getList")]),t._v(" "),a("p",[t._v("The list of components is taken from the Components module.\nInitially, the list, was set statically on the Component object but it was\nnot ok, as it was shared between multiple editor instances")]),t._v(" "),a("h3",{attrs:{id:"parameters-28"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-28"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("model")])])]),t._v(" "),a("h2",{attrs:{id:"checkid"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkid"}},[t._v("#")]),t._v(" checkId")]),t._v(" "),a("p",[t._v("This method checks, for each parsed component and style object\n(are not Components/CSSRules yet), for duplicated id and fixes them\nThis method is used in Components.js just after the parsing")]),t._v(" "),a("h3",{attrs:{id:"parameters-29"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-29"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("components")])]),t._v(" "),a("li",[a("code",[t._v("styles")]),t._v("   (optional, default "),a("code",[t._v("[]")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("list")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])}),[],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/24.6189d84c.js b/docs/assets/js/24.6189d84c.js
new file mode 100644
index 000000000..b7c24164f
--- /dev/null
+++ b/docs/assets/js/24.6189d84c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{423:function(t,e,a){"use strict";a.r(e);var r=a(42),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#component"}},[t._v("#")]),t._v(" Component")]),t._v(" "),a("p",[t._v("The Component object represents a single node of our template structure, so when you update its properties the changes are\nimmediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all\nthe tree of nodes).\nAn example on how to update properties:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n tagName"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n removable"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 'span'")]),t._v("\n")])])]),a("h3",{attrs:{id:"properties"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[t._v("#")]),t._v(" Properties")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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.")]),t._v(" "),a("li",[a("code",[t._v("tagName")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")])]),t._v(" "),a("li",[a("code",[t._v("attributes")]),t._v(" "),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("{}")])]),t._v(" "),a("li",[a("code",[t._v("name")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("removable")]),t._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._v("?")]),t._v(" When "),a("code",[t._v("true")]),t._v(" the component is removable from the canvas, default: "),a("code",[t._v("true")])]),t._v(" "),a("li",[a("code",[t._v("draggable")]),t._v(" "),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")])]),t._v(" "),a("li",[a("code",[t._v("droppable")]),t._v(" "),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")])]),t._v(" "),a("li",[a("code",[t._v("badgable")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("stylable")]),t._v(" "),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")])]),t._v(" "),a("li",[a("code",[t._v("stylable-require")]),t._v(" "),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("[]")])]),t._v(" "),a("li",[a("code",[t._v("unstylable")]),t._v(" "),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("[]")])]),t._v(" "),a("li",[a("code",[t._v("style-signature")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">?")]),t._v(" This option comes handy when you need to remove or export strictly component-specific rules. Be default, if this option is not empty, the editor will remove rules when there are no components, of that type, in the canvas. Eg. '['.navbar', '[navbar-']'. Default: "),a("code",[t._v("''")])]),t._v(" "),a("li",[a("code",[t._v("highlightable")]),t._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._v("?")]),t._v(" It can be highlighted with 'dotted' borders if true. Default: "),a("code",[t._v("true")])]),t._v(" "),a("li",[a("code",[t._v("copyable")]),t._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._v("?")]),t._v(" True if it's possible to clone the component. Default: "),a("code",[t._v("true")])]),t._v(" "),a("li",[a("code",[t._v("resizable")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("editable")]),t._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._v("?")]),t._v(" Allow to edit the content of the component (used on Text components). Default: "),a("code",[t._v("false")])]),t._v(" "),a("li",[a("code",[t._v("layerable")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("selectable")]),t._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._v("?")]),t._v(" Allow component to be selected when clicked. Default: "),a("code",[t._v("true")])]),t._v(" "),a("li",[a("code",[t._v("hoverable")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("void")]),t._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._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")])]),t._v(" "),a("li",[a("code",[t._v("content")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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("''")])]),t._v(" "),a("li",[a("code",[t._v("icon")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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("''")])]),t._v(" "),a("li",[a("code",[t._v("script")]),t._v(" "),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("RouterLink",{attrs:{to:"/modules/Components-js.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("''")])],1),t._v(" "),a("li",[a("code",[t._v("script-export")]),t._v(" "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(")?")]),t._v(" You can specify javascript available only in export functions (eg. when you get the HTML).\nIf this property is defined it will overwrite the "),a("code",[t._v("script")]),t._v(" one (in export functions). Default: "),a("code",[t._v("''")])]),t._v(" "),a("li",[a("code",[t._v("traits")]),t._v(" "),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("RouterLink",{attrs:{to:"/modules/Traits.html"}},[t._v("here")]),t._v(". Default: "),a("code",[t._v("['id', 'title']")])],1),t._v(" "),a("li",[a("code",[t._v("propagate")]),t._v(" "),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("[]")])]),t._v(" "),a("li",[a("code",[t._v("toolbar")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("components")]),t._v(" "),a("strong",[t._v("Collection<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">?")]),t._v(" Children components. Default: "),a("code",[t._v("null")])])]),t._v(" "),a("h2",{attrs:{id:"init"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#init"}},[t._v("#")]),t._v(" init")]),t._v(" "),a("p",[t._v("Hook method, called once the model is created")]),t._v(" "),a("h2",{attrs:{id:"updated"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#updated"}},[t._v("#")]),t._v(" updated")]),t._v(" "),a("p",[t._v("Hook method, called when the model has been updated (eg. updated some model's property)")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("property")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Property name, if triggered after some property update")]),t._v(" "),a("li",[a("code",[t._v("value")]),t._v(" "),a("strong",[t._v("any")]),t._v(" Property value, if triggered after some property update")]),t._v(" "),a("li",[a("code",[t._v("previous")]),t._v(" "),a("strong",[t._v("any")]),t._v(" Property previous value, if triggered after some property update")])]),t._v(" "),a("h2",{attrs:{id:"removed"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removed"}},[t._v("#")]),t._v(" removed")]),t._v(" "),a("p",[t._v("Hook method, called once the model has been removed")]),t._v(" "),a("h2",{attrs:{id:"is"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#is"}},[t._v("#")]),t._v(" is")]),t._v(" "),a("p",[t._v("Check component's type")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("is")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'image'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> false")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[t._v("#")]),t._v(" props")]),t._v(" "),a("p",[t._v("Return all the propeties")]),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(" "),a("h2",{attrs:{id:"index"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#index"}},[t._v("#")]),t._v(" index")]),t._v(" "),a("p",[t._v("Get the index of the component in the parent collection.")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"setdragmode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdragmode"}},[t._v("#")]),t._v(" setDragMode")]),t._v(" "),a("p",[t._v("Change the drag mode of the component.\nTo get more about this feature read: "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/issues/1936",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://github.com/artf/grapesjs/issues/1936"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("value")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Drag mode, options: 'absolute' | 'translate'")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"find"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#find"}},[t._v("#")]),t._v(" find")]),t._v(" "),a("p",[t._v("Find inner components by query string.\n"),a("strong",[t._v("ATTENTION")]),t._v(": this method works only with already rendered component")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("query")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("find")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div > .class'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [Component, Component, ...]")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"findtype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#findtype"}},[t._v("#")]),t._v(" findType")]),t._v(" "),a("p",[t._v("Find all inner components by component type.\nThe advantage of this method over "),a("code",[t._v("find")]),t._v(" is that you can use it\nalso before rendering the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" allImages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("findType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'image'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("allImages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// prints the first found component")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"#component"}},[t._v("Component")]),t._v(">")])]),t._v(" "),a("h2",{attrs:{id:"closest"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closest"}},[t._v("#")]),t._v(" closest")]),t._v(" "),a("p",[t._v("Find the closest parent component by query string.\n"),a("strong",[t._v("ATTENTION")]),t._v(": this method works only with already rendered component")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("query")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("closest")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div.some-class'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])])]),t._v(" "),a("h2",{attrs:{id:"closesttype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closesttype"}},[t._v("#")]),t._v(" closestType")]),t._v(" "),a("p",[t._v("Find the closest parent component by its type.\nThe advantage of this method over "),a("code",[t._v("closest")]),t._v(" is that you can use it\nalso before rendering the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Section "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("closestType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'section'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Section"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])]),t._v(" Found component, otherwise "),a("code",[t._v("undefined")])]),t._v(" "),a("h2",{attrs:{id:"replacewith"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#replacewith"}},[t._v("#")]),t._v(" replaceWith")]),t._v(" "),a("p",[t._v("Replace a component with another one")]),t._v(" "),a("h3",{attrs:{id:"parameters-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("el")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("replaceWith")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Some new content
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"setattributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setattributes"}},[t._v("#")]),t._v(" setAttributes")]),t._v(" "),a("p",[t._v("Update attributes of the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("attrs")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("options")]),t._v(" "),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 for the model update")])]),t._v(" "),a("h3",{attrs:{id:"examples-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"addattributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addattributes"}},[t._v("#")]),t._v(" addAttributes")]),t._v(" "),a("p",[t._v("Add attributes to the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("attrs")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("options")]),t._v(" "),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 for the model update")])]),t._v(" "),a("h3",{attrs:{id:"examples-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-8"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-key'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'value'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstyle"}},[t._v("#")]),t._v(" getStyle")]),t._v(" "),a("p",[t._v("Get the style of the component")]),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(" "),a("h2",{attrs:{id:"setstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setstyle"}},[t._v("#")]),t._v(" setStyle")]),t._v(" "),a("p",[t._v("Set the style on the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("prop")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-9"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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(" "),a("h2",{attrs:{id:"getattributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getattributes"}},[t._v("#")]),t._v(" getAttributes")]),t._v(" "),a("p",[t._v("Return all component's attributes")]),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(" "),a("h2",{attrs:{id:"addclass"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addclass"}},[t._v("#")]),t._v(" addClass")]),t._v(" "),a("p",[t._v("Add classes")]),t._v(" "),a("h3",{attrs:{id:"parameters-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("classes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-10"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"setclass"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setclass"}},[t._v("#")]),t._v(" setClass")]),t._v(" "),a("p",[t._v("Set classes (resets current collection)")]),t._v(" "),a("h3",{attrs:{id:"parameters-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("classes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-11"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"removeclass"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removeclass"}},[t._v("#")]),t._v(" removeClass")]),t._v(" "),a("p",[t._v("Remove classes")]),t._v(" "),a("h3",{attrs:{id:"parameters-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("classes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-12"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nmodel"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"getclasses"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getclasses"}},[t._v("#")]),t._v(" getClasses")]),t._v(" "),a("p",[t._v("Returns component's classes as an array of strings")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"append"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#append"}},[t._v("#")]),t._v(" append")]),t._v(" "),a("p",[t._v("Add new component children")]),t._v(" "),a("h3",{attrs:{id:"parameters-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("components")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-13"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("someComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 0")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" videoComponent "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" someComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// This will add 2 components (`video` and `div`) to your `someComponent`")]),t._v("\nsomeComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// You can pass components directly")]),t._v("\notherComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("otherComponent2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\notherComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("append")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("otherComponent3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" otherComponent4"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[t._v("#")]),t._v(" components")]),t._v(" "),a("p",[t._v("Set new collection if "),a("code",[t._v("components")]),t._v(" are provided, otherwise the\ncurrent collection is returned")]),t._v(" "),a("h3",{attrs:{id:"parameters-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("components")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-14"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set new collection")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("components")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Get current collection")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" collection "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("components")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("collection"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> 2")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"empty"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#empty"}},[t._v("#")]),t._v(" empty")]),t._v(" "),a("p",[t._v("Remove all inner components")]),t._v(" "),a("ul",[a("li",[t._v("@return {this}")])]),t._v(" "),a("h3",{attrs:{id:"parameters-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h2",{attrs:{id:"parent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parent"}},[t._v("#")]),t._v(" parent")]),t._v(" "),a("p",[t._v("Get the parent component, if exists")]),t._v(" "),a("h3",{attrs:{id:"examples-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-15"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("parent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> Component")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])])]),t._v(" "),a("h2",{attrs:{id:"gettrait"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettrait"}},[t._v("#")]),t._v(" getTrait")]),t._v(" "),a("p",[t._v("Get the trait by id/name")]),t._v(" "),a("h3",{attrs:{id:"parameters-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._v(" "),a("h3",{attrs:{id:"examples-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-16"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ntraitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" traitTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'label'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New label'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Trait")]),t._v(" Trait model")]),t._v(" "),a("h2",{attrs:{id:"updatetrait"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#updatetrait"}},[t._v("#")]),t._v(" updateTrait")]),t._v(" "),a("p",[t._v("Update a trait")]),t._v(" "),a("h3",{attrs:{id:"parameters-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")]),t._v(" "),a("li",[a("code",[t._v("props")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object with the props to update")])]),t._v(" "),a("h3",{attrs:{id:"examples-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-17"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("updateTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n options"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Option 1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Option 2'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"gettraitindex"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettraitindex"}},[t._v("#")]),t._v(" getTraitIndex")]),t._v(" "),a("p",[t._v("Get the trait position index by id/name. Useful in case you want to\nreplace some trait, at runtime, with something else.")]),t._v(" "),a("h3",{attrs:{id:"parameters-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" The "),a("code",[t._v("id")]),t._v(" or "),a("code",[t._v("name")]),t._v(" of the trait")])]),t._v(" "),a("h3",{attrs:{id:"examples-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-18"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" traitTitle "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getTraitIndex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("traitTitle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 1")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("Number"),a("OutboundLink")],1)]),t._v(" Index position of the current trait")]),t._v(" "),a("h2",{attrs:{id:"removetrait"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removetrait"}},[t._v("#")]),t._v(" removeTrait")]),t._v(" "),a("p",[t._v("Remove trait/s by id/s.")]),t._v(" "),a("h3",{attrs:{id:"parameters-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(">)")]),t._v(" The "),a("code",[t._v("id")]),t._v("/"),a("code",[t._v("name")]),t._v(" of the trait (or an array)")])]),t._v(" "),a("h3",{attrs:{id:"examples-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-19"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'id'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of removed traits")]),t._v(" "),a("h2",{attrs:{id:"addtrait"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addtrait"}},[t._v("#")]),t._v(" addTrait")]),t._v(" "),a("p",[t._v("Add trait/s by id/s.")]),t._v(" "),a("h3",{attrs:{id:"parameters-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("trait")]),t._v(" "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(")>)")]),t._v(" Trait to add (or an array of traits)")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),a("strong",[t._v("Options")]),t._v(" Options for the add (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-20"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Add title trait (`at` option is the position index)")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'checkbox'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'disabled'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addTrait")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added traits")]),t._v(" "),a("h2",{attrs:{id:"getname"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getname"}},[t._v("#")]),t._v(" getName")]),t._v(" "),a("p",[t._v("Get the name of the component")]),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(" "),a("h2",{attrs:{id:"geticon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geticon"}},[t._v("#")]),t._v(" getIcon")]),t._v(" "),a("p",[t._v("Get the icon string")]),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(" "),a("h2",{attrs:{id:"tohtml"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tohtml"}},[t._v("#")]),t._v(" toHTML")]),t._v(" "),a("p",[t._v("Return HTML string of the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-23"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("opts")]),t._v(" "),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.tag")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(" Custom tagName")]),t._v(" "),a("li",[a("code",[t._v("opts.attributes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-21"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Simple HTML return")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" tagName"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Custom attributes")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'data-test'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Custom dynamic attributes")]),t._v("\ncomponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toHTML")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("attributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" attributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tagName'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("title "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Custom attribute'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" attributes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// -> ')]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"getid"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getid"}},[t._v("#")]),t._v(" getId")]),t._v(" "),a("p",[t._v("Return the component id")]),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(" "),a("h2",{attrs:{id:"setid"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setid"}},[t._v("#")]),t._v(" setId")]),t._v(" "),a("p",[t._v("Set new id on the component")]),t._v(" "),a("h3",{attrs:{id:"parameters-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-24"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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("li",[a("code",[t._v("opts")])])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getel"}},[t._v("#")]),t._v(" getEl")]),t._v(" "),a("p",[t._v("Get the DOM element of the component.\nThis works only if the component is already rendered")]),t._v(" "),a("h3",{attrs:{id:"parameters-25"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-25"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("frame")]),t._v(" "),a("strong",[t._v("Frame")]),t._v(" Specific frame from which taking the element")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"getview"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getview"}},[t._v("#")]),t._v(" getView")]),t._v(" "),a("p",[t._v("Get the View of the component.\nThis works only if the component is already rendered")]),t._v(" "),a("h3",{attrs:{id:"parameters-26"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-26"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("frame")]),t._v(" "),a("strong",[t._v("Frame")]),t._v(" Get View of a specific frame")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("ComponentView")])]),t._v(" "),a("h2",{attrs:{id:"onall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onall"}},[t._v("#")]),t._v(" onAll")]),t._v(" "),a("p",[t._v("Execute callback function on itself and all inner components")]),t._v(" "),a("h3",{attrs:{id:"parameters-27"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-27"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("clb")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-22"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("onAll")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("component")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// do something with component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),a("p",[t._v("Remove the component")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getlist"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getlist"}},[t._v("#")]),t._v(" getList")]),t._v(" "),a("p",[t._v("The list of components is taken from the Components module.\nInitially, the list, was set statically on the Component object but it was\nnot ok, as it was shared between multiple editor instances")]),t._v(" "),a("h3",{attrs:{id:"parameters-28"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-28"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("model")])])]),t._v(" "),a("h2",{attrs:{id:"checkid"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkid"}},[t._v("#")]),t._v(" checkId")]),t._v(" "),a("p",[t._v("This method checks, for each parsed component and style object\n(are not Components/CSSRules yet), for duplicated id and fixes them\nThis method is used in Components.js just after the parsing")]),t._v(" "),a("h3",{attrs:{id:"parameters-29"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-29"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("components")])]),t._v(" "),a("li",[a("code",[t._v("styles")]),t._v("   (optional, default "),a("code",[t._v("[]")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("list")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])])])}),[],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/25.d8c7e0b5.js b/docs/assets/js/25.0b97e6b6.js
similarity index 97%
rename from docs/assets/js/25.d8c7e0b5.js
rename to docs/assets/js/25.0b97e6b6.js
index 4f6beedbc..27c564d6f 100644
--- a/docs/assets/js/25.d8c7e0b5.js
+++ b/docs/assets/js/25.0b97e6b6.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{423:function(t,e,a){"use strict";a.r(e);var n=a(33),r=Object(n.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"domcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#domcomponents"}},[t._v("#")]),t._v(" DomComponents")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n domComponents"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" domComponents "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#getwrapper"}},[t._v("getWrapper")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcomponents"}},[t._v("getComponents")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#addcomponent"}},[t._v("addComponent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#render"}},[t._v("render")])])]),t._v(" "),a("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[t._v("#")]),t._v(" load")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("data")]),t._v(" "),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._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._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" store")]),t._v(" "),a("p",[t._v("Store components on the selected storage")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("noStore")]),t._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._v(" If true, won't store")])]),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(" Data to store")]),t._v(" "),a("h2",{attrs:{id:"getwrapper"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper"}},[t._v("#")]),t._v(" getWrapper")]),t._v(" "),a("p",[t._v("Returns root component inside the canvas. Something like "),a("code",[t._v("")]),t._v(" inside HTML page\nThe wrapper doesn't differ from the original Component Model")]),t._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Change background of the wrapper and set some attribute")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrapper "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getWrapper")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'attributes'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Component")]),t._v(" Root Component")]),t._v(" "),a("h2",{attrs:{id:"getcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents"}},[t._v("#")]),t._v(" getComponents")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Let's add some component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrapperChildren "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tagName"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Now let's add an other one inside first component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// First we have to get the collection inside. Each")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// component has 'components' property")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1Children "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Procede as before. You could also add multiple objects")]),t._v("\ncomp1Children"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" height"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Remove comp2")]),t._v("\nwrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Components")]),t._v(" Collection of components")]),t._v(" "),a("h2",{attrs:{id:"addcomponent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addcomponent"}},[t._v("#")]),t._v(" addComponent")]),t._v(" "),a("p",[t._v("Add new components to the wrapper's children. It's the same\nas 'domComponents.getComponents().add(...)'")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("component")]),t._v(" "),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")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("component.type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("component.removable")]),t._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._v(" If component is removable (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.draggable")]),t._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._v(" If is possible to move the component around the structure (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.droppable")]),t._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._v(" If is possible to drop inside other components (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.badgable")]),t._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._v(" If the badge is visible when the component is selected (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.stylable")]),t._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._v(" If is possible to style component (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.copyable")]),t._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._v(" If is possible to copy&paste the component (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.content")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("component.style")]),t._v(" "),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(")")]),t._v(" "),a("li",[a("code",[t._v("component.attributes")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Example of a new component with some extra property")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tagName"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  removable"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Can't remove it")]),t._v("\n  draggable"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Can't move it")]),t._v("\n  copyable"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Disable copy/past")]),t._v("\n  content"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Content text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Text inside component")]),t._v("\n  style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'here'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render")]),t._v(" "),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")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"clear"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clear"}},[t._v("#")]),t._v(" clear")]),t._v(" "),a("p",[t._v("Remove all components")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"addtype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addtype"}},[t._v("#")]),t._v(" addType")]),t._v(" "),a("p",[t._v("Add new component type.\nRead more about this in "),a("a",{attrs:{href:"https://grapesjs.com/docs/modules/Components.html#define-new-component",target:"_blank",rel:"noopener noreferrer"}},[t._v("Define New Component"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")]),t._v(" "),a("li",[a("code",[t._v("methods")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Component methods")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"gettype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettype"}},[t._v("#")]),t._v(" getType")]),t._v(" "),a("p",[t._v("Get component type.\nRead more about this in "),a("a",{attrs:{href:"https://grapesjs.com/docs/modules/Components.html#define-new-component",target:"_blank",rel:"noopener noreferrer"}},[t._v("Define New Component"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")])]),t._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(" Component type defintion, eg. "),a("code",[t._v("{ model: ..., view: ... }")])]),t._v(" "),a("h2",{attrs:{id:"removetype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removetype"}},[t._v("#")]),t._v(" removeType")]),t._v(" "),a("p",[t._v("Remove component type")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")])]),t._v(" "),a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined",target:"_blank",rel:"noopener noreferrer"}},[t._v("undefined"),a("OutboundLink")],1),t._v(")")]),t._v(" Removed component type, undefined otherwise")]),t._v(" "),a("h2",{attrs:{id:"gettypes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettypes"}},[t._v("#")]),t._v(" getTypes")]),t._v(" "),a("p",[t._v("Return the array of all types")]),t._v(" "),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)])])])}),[],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{440:function(t,e,a){"use strict";a.r(e);var n=a(42),r=Object(n.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"domcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#domcomponents"}},[t._v("#")]),t._v(" DomComponents")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n domComponents"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" domComponents "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#getwrapper"}},[t._v("getWrapper")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcomponents"}},[t._v("getComponents")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#addcomponent"}},[t._v("addComponent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#render"}},[t._v("render")])])]),t._v(" "),a("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[t._v("#")]),t._v(" load")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("data")]),t._v(" "),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._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._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" store")]),t._v(" "),a("p",[t._v("Store components on the selected storage")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("noStore")]),t._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._v(" If true, won't store")])]),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(" Data to store")]),t._v(" "),a("h2",{attrs:{id:"getwrapper"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper"}},[t._v("#")]),t._v(" getWrapper")]),t._v(" "),a("p",[t._v("Returns root component inside the canvas. Something like "),a("code",[t._v("")]),t._v(" inside HTML page\nThe wrapper doesn't differ from the original Component Model")]),t._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Change background of the wrapper and set some attribute")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrapper "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getWrapper")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nwrapper"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'attributes'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'title'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Component")]),t._v(" Root Component")]),t._v(" "),a("h2",{attrs:{id:"getcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents"}},[t._v("#")]),t._v(" getComponents")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Let's add some component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" wrapperChildren "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" wrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tagName"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'span'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Now let's add an other one inside first component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// First we have to get the collection inside. Each")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// component has 'components' property")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1Children "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" comp1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'components'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Procede as before. You could also add multiple objects")]),t._v("\ncomp1Children"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'blue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" height"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" width"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Remove comp2")]),t._v("\nwrapperChildren"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("comp2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Components")]),t._v(" Collection of components")]),t._v(" "),a("h2",{attrs:{id:"addcomponent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addcomponent"}},[t._v("#")]),t._v(" addComponent")]),t._v(" "),a("p",[t._v("Add new components to the wrapper's children. It's the same\nas 'domComponents.getComponents().add(...)'")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("component")]),t._v(" "),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")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("component.type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("component.removable")]),t._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._v(" If component is removable (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.draggable")]),t._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._v(" If is possible to move the component around the structure (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.droppable")]),t._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._v(" If is possible to drop inside other components (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.badgable")]),t._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._v(" If the badge is visible when the component is selected (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.stylable")]),t._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._v(" If is possible to style component (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.copyable")]),t._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._v(" If is possible to copy&paste the component (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("component.content")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("component.style")]),t._v(" "),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(")")]),t._v(" "),a("li",[a("code",[t._v("component.attributes")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("opt")]),t._v(" "),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(" the options object to be used by the [Components.add]"),a("a",{attrs:{href:"#getcomponents"}},[t._v("getComponents")]),t._v(" method (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Example of a new component with some extra property")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comp1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" domComponents"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  tagName"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  removable"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Can't remove it")]),t._v("\n  draggable"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Can't move it")]),t._v("\n  copyable"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Disable copy/past")]),t._v("\n  content"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Content text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Text inside component")]),t._v("\n  style"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'here'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[t._v("#")]),t._v(" render")]),t._v(" "),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")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"clear"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clear"}},[t._v("#")]),t._v(" clear")]),t._v(" "),a("p",[t._v("Remove all components")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"addtype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addtype"}},[t._v("#")]),t._v(" addType")]),t._v(" "),a("p",[t._v("Add new component type.\nRead more about this in "),a("a",{attrs:{href:"https://grapesjs.com/docs/modules/Components.html#define-new-component",target:"_blank",rel:"noopener noreferrer"}},[t._v("Define New Component"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")]),t._v(" "),a("li",[a("code",[t._v("methods")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Component methods")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"gettype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettype"}},[t._v("#")]),t._v(" getType")]),t._v(" "),a("p",[t._v("Get component type.\nRead more about this in "),a("a",{attrs:{href:"https://grapesjs.com/docs/modules/Components.html#define-new-component",target:"_blank",rel:"noopener noreferrer"}},[t._v("Define New Component"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")])]),t._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(" Component type defintion, eg. "),a("code",[t._v("{ model: ..., view: ... }")])]),t._v(" "),a("h2",{attrs:{id:"removetype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removetype"}},[t._v("#")]),t._v(" removeType")]),t._v(" "),a("p",[t._v("Remove component type")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")])]),t._v(" "),a("li",[a("code",[t._v("type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Component ID")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined",target:"_blank",rel:"noopener noreferrer"}},[t._v("undefined"),a("OutboundLink")],1),t._v(")")]),t._v(" Removed component type, undefined otherwise")]),t._v(" "),a("h2",{attrs:{id:"gettypes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettypes"}},[t._v("#")]),t._v(" getTypes")]),t._v(" "),a("p",[t._v("Return the array of all types")]),t._v(" "),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)])])])}),[],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/26.ad7fc796.js b/docs/assets/js/26.5cd0ef40.js
similarity index 99%
rename from docs/assets/js/26.ad7fc796.js
rename to docs/assets/js/26.5cd0ef40.js
index 5c2b964cf..d7d9fbcb1 100644
--- a/docs/assets/js/26.ad7fc796.js
+++ b/docs/assets/js/26.5cd0ef40.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{416:function(t,s,a){"use strict";a.r(s);var e=a(33),r=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"csscomposer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#csscomposer"}},[t._v("#")]),t._v(" CssComposer")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n cssComposer"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cssComposer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CssComposer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setrule"}},[t._v("setRule")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getrule"}},[t._v("getRule")])])]),t._v(" "),a("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[t._v("#")]),t._v(" load")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("data")]),t._v(" "),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")])]),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 rules")]),t._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" store")]),t._v(" "),a("p",[t._v("Store data to the selected storage")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("noStore")]),t._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._v(" If true, won't store")])]),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(" Data to store")]),t._v(" "),a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),a("p",[t._v("Add new rule to the collection, if not yet exists with the same selectors")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("selectors")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("state")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("width")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  width"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#fff'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Model")])]),t._v(" "),a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),a("p",[t._v("Get the rule")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("selectors")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("state")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("width")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("ruleProps")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Update the style")]),t._v("\nrule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  width"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#000'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("(Model | null)")])]),t._v(" "),a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),a("p",[t._v("Get the collection of rules")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Collection")])]),t._v(" "),a("h2",{attrs:{id:"clear"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clear"}},[t._v("#")]),t._v(" clear")]),t._v(" "),a("p",[t._v("Remove all rules")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"setrule"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setrule"}},[t._v("#")]),t._v(" setRule")]),t._v(" "),a("p",[t._v("Add/update the CSS rule with a generic selector")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("selectors")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass'")]),t._v(" "),a("li",[a("code",[t._v("style")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Additional properties (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.atRuleType")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" At-rule type, eg. 'media' (optional, default "),a("code",[t._v("''")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("opts.atRuleParams")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" At-rule parameters, eg. '(min-width: 500px)' (optional, default "),a("code",[t._v("''")]),t._v(")")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Simple class-based rule")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1.class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toCSS")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: .class1.class2 { color: red }")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With state and other mixed selector")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1.class2:hover, div#myid'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: .class1.class2:hover, div#myid { color: red }")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With media")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1:hover'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'media'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: @media (min-width: 500px) { .class1:hover { color: red } }")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("CssRule")]),t._v(" The new/updated rule")]),t._v(" "),a("h2",{attrs:{id:"getrule"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getrule"}},[t._v("#")]),t._v(" getRule")]),t._v(" "),a("p",[t._v("Get the CSS rule by a generic selector")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("selectors")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass:hover'")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1:hover'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1:hover, div#myid'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule3 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'media'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("CssRule")])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{442:function(t,s,a){"use strict";a.r(s);var e=a(42),r=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"csscomposer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#csscomposer"}},[t._v("#")]),t._v(" CssComposer")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n cssComposer"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cssComposer "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CssComposer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setrule"}},[t._v("setRule")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getrule"}},[t._v("getRule")])])]),t._v(" "),a("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[t._v("#")]),t._v(" load")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("data")]),t._v(" "),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")])]),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 rules")]),t._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" store")]),t._v(" "),a("p",[t._v("Store data to the selected storage")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("noStore")]),t._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._v(" If true, won't store")])]),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(" Data to store")]),t._v(" "),a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),a("p",[t._v("Add new rule to the collection, if not yet exists with the same selectors")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("selectors")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("state")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("width")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  width"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#fff'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Model")])]),t._v(" "),a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),a("p",[t._v("Get the rule")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("selectors")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("state")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("width")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("ruleProps")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Update the style")]),t._v("\nrule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("set")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'style'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  width"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#000'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("(Model | null)")])]),t._v(" "),a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),a("p",[t._v("Get the collection of rules")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Collection")])]),t._v(" "),a("h2",{attrs:{id:"clear"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clear"}},[t._v("#")]),t._v(" clear")]),t._v(" "),a("p",[t._v("Remove all rules")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"setrule"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setrule"}},[t._v("#")]),t._v(" setRule")]),t._v(" "),a("p",[t._v("Add/update the CSS rule with a generic selector")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("selectors")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass'")]),t._v(" "),a("li",[a("code",[t._v("style")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Additional properties (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.atRuleType")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" At-rule type, eg. 'media' (optional, default "),a("code",[t._v("''")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("opts.atRuleParams")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" At-rule parameters, eg. '(min-width: 500px)' (optional, default "),a("code",[t._v("''")]),t._v(")")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Simple class-based rule")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1.class2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("toCSS")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: .class1.class2 { color: red }")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With state and other mixed selector")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1.class2:hover, div#myid'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: .class1.class2:hover, div#myid { color: red }")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With media")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1:hover'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'media'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// output: @media (min-width: 500px) { .class1:hover { color: red } }")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("CssRule")]),t._v(" The new/updated rule")]),t._v(" "),a("h2",{attrs:{id:"getrule"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getrule"}},[t._v("#")]),t._v(" getRule")]),t._v(" "),a("p",[t._v("Get the CSS rule by a generic selector")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("selectors")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass:hover'")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1:hover'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule2 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1:hover, div#myid'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule3 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getRule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.myclass1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'media'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("CssRule")])])])}),[],!1,null,null,null);s.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/27.169cfbf6.js b/docs/assets/js/27.1af8a808.js
similarity index 98%
rename from docs/assets/js/27.169cfbf6.js
rename to docs/assets/js/27.1af8a808.js
index 6f03ca3a2..c1a4256e5 100644
--- a/docs/assets/js/27.169cfbf6.js
+++ b/docs/assets/js/27.1af8a808.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{417:function(t,a,s){"use strict";s.r(a);var e=s(33),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"devicemanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#devicemanager"}},[t._v("#")]),t._v(" DeviceManager")]),t._v(" "),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n deviceManager"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" deviceManager "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DeviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getAll"}},[t._v("getAll")])])]),t._v(" "),s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),s("p",[t._v("Add new device to the collection. URLs are supposed to be unique")]),t._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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 id")]),t._v(" "),s("li",[s("code",[t._v("width")]),t._v(" "),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")]),t._v(" "),s("li",[s("code",[t._v("opts")]),t._v(" "),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("?")]),t._v(" Custom options (optional, default "),s("code",[t._v("{}")]),t._v(")")])]),t._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("deviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tablet'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'900px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndeviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tablet2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'900px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// At first, GrapesJS tries to localize the name by device id.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In case is not found, the `name` property is used (or `id` if name is missing)")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tablet 2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n widthMedia"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'810px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the width that will be used for the CSS media")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("Device")]),t._v(" Added device")]),t._v(" "),s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),s("p",[t._v("Return device by name")]),t._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" deviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tablet'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'Tablet', width: '900px'}")]),t._v("\n")])])]),s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),s("p",[t._v("Return all devices")]),t._v(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" devices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" deviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("devices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [{name: 'Desktop', width: ''}, ...]")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("Collection")])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{443:function(t,a,s){"use strict";s.r(a);var e=s(42),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"devicemanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#devicemanager"}},[t._v("#")]),t._v(" DeviceManager")]),t._v(" "),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n deviceManager"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" deviceManager "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DeviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getAll"}},[t._v("getAll")])])]),t._v(" "),s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),s("p",[t._v("Add new device to the collection. URLs are supposed to be unique")]),t._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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 id")]),t._v(" "),s("li",[s("code",[t._v("width")]),t._v(" "),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")]),t._v(" "),s("li",[s("code",[t._v("opts")]),t._v(" "),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("?")]),t._v(" Custom options (optional, default "),s("code",[t._v("{}")]),t._v(")")])]),t._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("deviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tablet'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'900px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndeviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'tablet2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'900px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n height"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'300px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// At first, GrapesJS tries to localize the name by device id.")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In case is not found, the `name` property is used (or `id` if name is missing)")]),t._v("\n name"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tablet 2'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n widthMedia"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'810px'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the width that will be used for the CSS media")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("Device")]),t._v(" Added device")]),t._v(" "),s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),s("p",[t._v("Return device by name")]),t._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" deviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Tablet'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'Tablet', width: '900px'}")]),t._v("\n")])])]),s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),s("p",[t._v("Return all devices")]),t._v(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" devices "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" deviceManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("JSON")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("devices"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// [{name: 'Desktop', width: ''}, ...]")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("Collection")])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/28.3d9c921b.js b/docs/assets/js/28.3d9c921b.js
new file mode 100644
index 000000000..5051df038
--- /dev/null
+++ b/docs/assets/js/28.3d9c921b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{422:function(e,t,a){"use strict";a.r(t);var s=a(42),r=Object(s.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h2",{attrs:{id:"editor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#editor"}},[e._v("#")]),e._v(" Editor")]),e._v(" "),a("p",[e._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"}},[e._v("Configuration Object"),a("OutboundLink")],1)]),e._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("const")]),e._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// options")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("h2",{attrs:{id:"available-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#available-events"}},[e._v("#")]),e._v(" Available Events")]),e._v(" "),a("p",[e._v("You can make use of available events in this way")]),e._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'EVENT-NAME'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("some"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" argument")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=>")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// do something")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])]),a("h3",{attrs:{id:"components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[e._v("#")]),e._v(" Components")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("component:create")]),e._v(" - Component is created (only the model, is not yet mounted in the canvas), called after the init() method")]),e._v(" "),a("li",[a("code",[e._v("component:mount")]),e._v(" - Component is mounted to an element and rendered in canvas")]),e._v(" "),a("li",[a("code",[e._v("component:add")]),e._v(" - Triggered when a new component is added to the editor, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:remove")]),e._v(" - Triggered when a component is removed, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:clone")]),e._v(" - Triggered when a component is cloned, the new model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:update")]),e._v(" - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:update:{propertyName}")]),e._v(" - Listen any property change, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:styleUpdate")]),e._v(" - Triggered when the style of the component is updated, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:styleUpdate:{propertyName}")]),e._v(" - Listen for a specific style property change, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:selected")]),e._v(" - New component selected, the selected model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:deselected")]),e._v(" - Component deselected, the deselected model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:toggled")]),e._v(" - Component selection changed, toggled model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:type:add")]),e._v(" - New component type added, the new type is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:type:update")]),e._v(" - Component type updated, the updated type is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:drag:start")]),e._v(" - Component drag started. Passed an object, to the callback, containing the "),a("code",[e._v("target")]),e._v(" (component to drag), "),a("code",[e._v("parent")]),e._v(" (parent of the component) and "),a("code",[e._v("index")]),e._v(" (component index in the parent)")]),e._v(" "),a("li",[a("code",[e._v("component:drag")]),e._v(" - During component drag. Passed the same object as in "),a("code",[e._v("component:drag:start")]),e._v(" event, but in this case, "),a("code",[e._v("parent")]),e._v(" and "),a("code",[e._v("index")]),e._v(" are updated by the current pointer")]),e._v(" "),a("li",[a("code",[e._v("component:drag:end")]),e._v(" - Component drag ended. Passed the same object as in "),a("code",[e._v("component:drag:start")]),e._v(" event, but in this case, "),a("code",[e._v("parent")]),e._v(" and "),a("code",[e._v("index")]),e._v(" are updated by the final pointer")])]),e._v(" "),a("h3",{attrs:{id:"blocks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#blocks"}},[e._v("#")]),e._v(" Blocks")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("block:add")]),e._v(" - New block added")]),e._v(" "),a("li",[a("code",[e._v("block:remove")]),e._v(" - Block removed")]),e._v(" "),a("li",[a("code",[e._v("block:drag:start")]),e._v(" - Started dragging block, model of the block is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("block:drag")]),e._v(" - Dragging block, the block's model and the drag event are passed as arguments")]),e._v(" "),a("li",[a("code",[e._v("block:drag:stop")]),e._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")])]),e._v(" "),a("h3",{attrs:{id:"assets"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#assets"}},[e._v("#")]),e._v(" Assets")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("asset:add")]),e._v(" - New asset added")]),e._v(" "),a("li",[a("code",[e._v("asset:remove")]),e._v(" - Asset removed")]),e._v(" "),a("li",[a("code",[e._v("asset:upload:start")]),e._v(" - Before the upload is started")]),e._v(" "),a("li",[a("code",[e._v("asset:upload:end")]),e._v(" - After the upload is ended")]),e._v(" "),a("li",[a("code",[e._v("asset:upload:error")]),e._v(" - On any error in upload, passes the error as an argument")]),e._v(" "),a("li",[a("code",[e._v("asset:upload:response")]),e._v(" - On upload response, passes the result as an argument")])]),e._v(" "),a("h3",{attrs:{id:"keymaps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#keymaps"}},[e._v("#")]),e._v(" Keymaps")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("keymap:add")]),e._v(" - New keymap added. The new keyamp object is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("keymap:remove")]),e._v(" - Keymap removed. The removed keyamp object is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("keymap:emit")]),e._v(" - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event")]),e._v(" "),a("li",[a("code",[e._v("keymap:emit:{keymapId}")]),e._v(" - "),a("code",[e._v("keymapId")]),e._v(" emitted, in arguments you get keymapId, shortcutUsed, Event")])]),e._v(" "),a("h3",{attrs:{id:"style-manager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#style-manager"}},[e._v("#")]),e._v(" Style Manager")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("styleManager:update:target")]),e._v(" - The target (Component or CSSRule) is changed")]),e._v(" "),a("li",[a("code",[e._v("styleManager:change")]),e._v(" - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("styleManager:change:{propertyName}")]),e._v(" - As above but for a specific style property")])]),e._v(" "),a("h3",{attrs:{id:"storages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#storages"}},[e._v("#")]),e._v(" Storages")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("storage:start")]),e._v(" - Before the storage request is started")]),e._v(" "),a("li",[a("code",[e._v("storage:start:store")]),e._v(" - Before the store request. The object to store is passed as an argumnet (which you can edit)")]),e._v(" "),a("li",[a("code",[e._v("storage:start:load")]),e._v(" - Before the load request. Items to load are passed as an argumnet (which you can edit)")]),e._v(" "),a("li",[a("code",[e._v("storage:load")]),e._v(" - Triggered when something was loaded from the storage, loaded object passed as an argumnet")]),e._v(" "),a("li",[a("code",[e._v("storage:store")]),e._v(" - Triggered when something is stored to the storage, stored object passed as an argumnet")]),e._v(" "),a("li",[a("code",[e._v("storage:end")]),e._v(" - After the storage request is ended")]),e._v(" "),a("li",[a("code",[e._v("storage:end:store")]),e._v(" - After the store request")]),e._v(" "),a("li",[a("code",[e._v("storage:end:load")]),e._v(" - After the load request")]),e._v(" "),a("li",[a("code",[e._v("storage:error")]),e._v(" - On any error on storage request, passes the error as an argument")]),e._v(" "),a("li",[a("code",[e._v("storage:error:store")]),e._v(" - Error on store request, passes the error as an argument")]),e._v(" "),a("li",[a("code",[e._v("storage:error:load")]),e._v(" - Error on load request, passes the error as an argument")])]),e._v(" "),a("h3",{attrs:{id:"canvas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#canvas"}},[e._v("#")]),e._v(" Canvas")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("canvas:dragenter")]),e._v(" - When something is dragged inside the canvas, "),a("code",[e._v("DataTransfer")]),e._v(" instance passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("canvas:dragover")]),e._v(" - When something is dragging on canvas, "),a("code",[e._v("DataTransfer")]),e._v(" instance passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("canvas:drop")]),e._v(" - Something is dropped in canvas, "),a("code",[e._v("DataTransfer")]),e._v(" instance and the dropped model are passed as arguments")]),e._v(" "),a("li",[a("code",[e._v("canvas:dragend")]),e._v(" - When a drag operation is ended, "),a("code",[e._v("DataTransfer")]),e._v(" instance passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("canvas:dragdata")]),e._v(" - On any dataTransfer parse, "),a("code",[e._v("DataTransfer")]),e._v(" instance and the "),a("code",[e._v("result")]),e._v(" are passed as arguments.\nBy changing "),a("code",[e._v("result.content")]),e._v(" you're able to customize what is dropped")])]),e._v(" "),a("h3",{attrs:{id:"selectors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectors"}},[e._v("#")]),e._v(" Selectors")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("selector:add")]),e._v(" - New selector is add. Passes the new selector as an argument")]),e._v(" "),a("li",[a("code",[e._v("selector:remove")]),e._v(" - Selector removed. Passes the removed selector as an argument")]),e._v(" "),a("li",[a("code",[e._v("selector:update")]),e._v(" - Selector updated. Passes the updated selector as an argument")]),e._v(" "),a("li",[a("code",[e._v("selector:state")]),e._v(" - State changed. Passes the new state value as an argument")])]),e._v(" "),a("h3",{attrs:{id:"rte"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rte"}},[e._v("#")]),e._v(" RTE")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("rte:enable")]),e._v(" - RTE enabled. The view, on which RTE is enabled, is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("rte:disable")]),e._v(" - RTE disabled. The view, on which RTE is disabled, is passed as an argument")])]),e._v(" "),a("h3",{attrs:{id:"modal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modal"}},[e._v("#")]),e._v(" Modal")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("modal:open")]),e._v(" - Modal is opened")]),e._v(" "),a("li",[a("code",[e._v("modal:close")]),e._v(" - Modal is closed")])]),e._v(" "),a("h3",{attrs:{id:"commands"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#commands"}},[e._v("#")]),e._v(" Commands")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("run:{commandName}")]),e._v(" - Triggered when some command is called to run (eg. editor.runCommand('preview'))")]),e._v(" "),a("li",[a("code",[e._v("stop:{commandName}")]),e._v(" - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))")]),e._v(" "),a("li",[a("code",[e._v("run:{commandName}:before")]),e._v(" - Triggered before the command is called")]),e._v(" "),a("li",[a("code",[e._v("stop:{commandName}:before")]),e._v(" - Triggered before the command is called to stop")]),e._v(" "),a("li",[a("code",[e._v("abort:{commandName}")]),e._v(" - Triggered when the command execution is aborted ("),a("code",[e._v("editor.on(")]),e._v("run:preview:before"),a("code",[e._v(", opts => opts.abort = 1);")]),e._v(")")]),e._v(" "),a("li",[a("code",[e._v("run")]),e._v(" - Triggered on run of any command. The id and the result are passed as arguments to the callback")]),e._v(" "),a("li",[a("code",[e._v("stop")]),e._v(" - Triggered on stop of any command. The id and the result are passed as arguments to the callback")])]),e._v(" "),a("h3",{attrs:{id:"general"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#general"}},[e._v("#")]),e._v(" General")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("canvasScroll")]),e._v(" - Canvas is scrolled")]),e._v(" "),a("li",[a("code",[e._v("update")]),e._v(" - The structure of the template is updated (its HTML/CSS)")]),e._v(" "),a("li",[a("code",[e._v("undo")]),e._v(" - Undo executed")]),e._v(" "),a("li",[a("code",[e._v("redo")]),e._v(" - Redo executed")]),e._v(" "),a("li",[a("code",[e._v("load")]),e._v(" - Editor is loaded")])]),e._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[e._v("#")]),e._v(" getConfig")]),e._v(" "),a("p",[e._v("Returns configuration object")]),e._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("prop")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1),e._v("?")]),e._v(" Property name")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("any")]),e._v(" Returns the configuration object or\nthe value of the specified property")]),e._v(" "),a("h2",{attrs:{id:"gethtml"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gethtml"}},[e._v("#")]),e._v(" getHtml")]),e._v(" "),a("p",[e._v("Returns HTML built inside canvas")]),e._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("opts")])])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" HTML string")]),e._v(" "),a("h2",{attrs:{id:"getcss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcss"}},[e._v("#")]),e._v(" getCss")]),e._v(" "),a("p",[e._v("Returns CSS built inside canvas")]),e._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Options (optional, default "),a("code",[e._v("{}")]),e._v(")\n"),a("ul",[a("li",[a("code",[e._v("opts.avoidProtected")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),a("OutboundLink")],1)]),e._v(" Don't include protected CSS (optional, default "),a("code",[e._v("false")]),e._v(")")])])])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" CSS string")]),e._v(" "),a("h2",{attrs:{id:"getjs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getjs"}},[e._v("#")]),e._v(" getJs")]),e._v(" "),a("p",[e._v("Returns JS of all components")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" JS string")]),e._v(" "),a("h2",{attrs:{id:"getcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents"}},[e._v("#")]),e._v(" getComponents")]),e._v(" "),a("p",[e._v("Return the complete tree of components. Use "),a("code",[e._v("getWrapper")]),e._v(" to include also the wrapper")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("Components")])]),e._v(" "),a("h2",{attrs:{id:"getwrapper"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper"}},[e._v("#")]),e._v(" getWrapper")]),e._v(" "),a("p",[e._v("Return the wrapper and its all components")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("Component")])]),e._v(" "),a("h2",{attrs:{id:"setcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcomponents"}},[e._v("#")]),e._v(" setComponents")]),e._v(" "),a("p",[e._v("Set components inside editor's canvas. This method overrides actual components")]),e._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("components")]),e._v(" "),a("strong",[e._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1),e._v(")")]),e._v(" HTML string or components model")]),e._v(" "),a("li",[a("code",[e._v("opt")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" the options object to be used by the [setComponents]"),a("a",{attrs:{href:"em#setComponents"}},[e._v("em#setComponents")]),e._v(" method (optional, default "),a("code",[e._v("{}")]),e._v(")")])]),e._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'
    New component
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// or")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n type"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n  classes"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n  content"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'New component'")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"addcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addcomponents"}},[e._v("#")]),e._v(" addComponents")]),e._v(" "),a("p",[e._v("Add components")]),e._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("components")]),e._v(" "),a("strong",[e._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1),e._v(")")]),e._v(" HTML string or components model")]),e._v(" "),a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Options\n"),a("ul",[a("li",[a("code",[e._v("opts.avoidUpdateStyle")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),a("OutboundLink")],1)]),e._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",[e._v("false")]),e._v(")")])])])]),e._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("addComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'
    New component
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// or")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("addComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n type"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n  classes"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n  content"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'New component'")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v("")])]),e._v(" "),a("h2",{attrs:{id:"getstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstyle"}},[e._v("#")]),e._v(" getStyle")]),e._v(" "),a("p",[e._v("Returns style in JSON format object")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"setstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setstyle"}},[e._v("#")]),e._v(" setStyle")]),e._v(" "),a("p",[e._v("Set style inside editor's canvas. This method overrides actual style")]),e._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("style")]),e._v(" "),a("strong",[e._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1),e._v(")")]),e._v(" CSS string or style model")]),e._v(" "),a("li",[a("code",[e._v("opt")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" the options object to be used by the [setStyle]"),a("a",{attrs:{href:"em#setStyle"}},[e._v("em#setStyle")]),e._v(" method (optional, default "),a("code",[e._v("{}")]),e._v(")")])]),e._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.cls{color: red}'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("//or")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n  selectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),e._v("\n  style"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'red'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"getselected"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getselected"}},[e._v("#")]),e._v(" getSelected")]),e._v(" "),a("p",[e._v("Returns the last selected component, if there is one")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("Model")])]),e._v(" "),a("h2",{attrs:{id:"getselectedall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getselectedall"}},[e._v("#")]),e._v(" getSelectedAll")]),e._v(" "),a("p",[e._v("Returns an array of all selected components")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"getselectedtostyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getselectedtostyle"}},[e._v("#")]),e._v(" getSelectedToStyle")]),e._v(" "),a("p",[e._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")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("Model")])]),e._v(" "),a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select"}},[e._v("#")]),e._v(" select")]),e._v(" "),a("p",[e._v("Select a component")]),e._v(" "),a("h3",{attrs:{id:"parameters-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("el")]),e._v(" "),a("strong",[e._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1),e._v(")")]),e._v(" Component to select")]),e._v(" "),a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("?")]),e._v(" Options\n"),a("ul",[a("li",[a("code",[e._v("opts.scroll")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),a("OutboundLink")],1),e._v("?")]),e._v(" Scroll canvas to the selected element")])])])]),e._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Select dropped block")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'block:drag:stop'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("model")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("select")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"selectadd"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectadd"}},[e._v("#")]),e._v(" selectAdd")]),e._v(" "),a("p",[e._v("Add component to selection")]),e._v(" "),a("h3",{attrs:{id:"parameters-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("el")]),e._v(" "),a("strong",[e._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v(")")]),e._v(" Component to select")])]),e._v(" "),a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("selectAdd")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"selectremove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectremove"}},[e._v("#")]),e._v(" selectRemove")]),e._v(" "),a("p",[e._v("Remove component from selection")]),e._v(" "),a("h3",{attrs:{id:"parameters-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("el")]),e._v(" "),a("strong",[e._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v(")")]),e._v(" Component to select")])]),e._v(" "),a("h3",{attrs:{id:"examples-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("selectRemove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"selecttoggle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selecttoggle"}},[e._v("#")]),e._v(" selectToggle")]),e._v(" "),a("p",[e._v("Toggle component selection")]),e._v(" "),a("h3",{attrs:{id:"parameters-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("el")]),e._v(" "),a("strong",[e._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v(")")]),e._v(" Component to select")])]),e._v(" "),a("h3",{attrs:{id:"examples-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("selectToggle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"setdevice"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdevice"}},[e._v("#")]),e._v(" setDevice")]),e._v(" "),a("p",[e._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),e._v(" "),a("h3",{attrs:{id:"parameters-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("name")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Name of the device")])]),e._v(" "),a("h3",{attrs:{id:"examples-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-8"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setDevice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'Tablet'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"getdevice"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdevice"}},[e._v("#")]),e._v(" getDevice")]),e._v(" "),a("p",[e._v("Return the actual active device")]),e._v(" "),a("h3",{attrs:{id:"examples-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-9"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("var")]),e._v(" device "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("getDevice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// 'Tablet'")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Device name")]),e._v(" "),a("h2",{attrs:{id:"runcommand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#runcommand"}},[e._v("#")]),e._v(" runCommand")]),e._v(" "),a("p",[e._v("Execute command")]),e._v(" "),a("h3",{attrs:{id:"parameters-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("id")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Command ID")]),e._v(" "),a("li",[a("code",[e._v("options")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Custom options (optional, default "),a("code",[e._v("{}")]),e._v(")")])]),e._v(" "),a("h3",{attrs:{id:"examples-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-10"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("runCommand")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("someValue"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[e._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("any")]),e._v(" The return is defined by the command")]),e._v(" "),a("h2",{attrs:{id:"stopcommand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#stopcommand"}},[e._v("#")]),e._v(" stopCommand")]),e._v(" "),a("p",[e._v("Stop the command if stop method was provided")]),e._v(" "),a("h3",{attrs:{id:"parameters-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("id")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Command ID")]),e._v(" "),a("li",[a("code",[e._v("options")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Custom options (optional, default "),a("code",[e._v("{}")]),e._v(")")])]),e._v(" "),a("h3",{attrs:{id:"examples-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-11"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("stopCommand")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("someValue"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[e._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("any")]),e._v(" The return is defined by the command")]),e._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[e._v("#")]),e._v(" store")]),e._v(" "),a("p",[e._v("Store data to the current storage")]),e._v(" "),a("h3",{attrs:{id:"parameters-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("clb")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Stored data")]),e._v(" "),a("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[e._v("#")]),e._v(" load")]),e._v(" "),a("p",[e._v("Load data from the current storage")]),e._v(" "),a("h3",{attrs:{id:"parameters-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("clb")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Stored data")]),e._v(" "),a("h2",{attrs:{id:"getcontainer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer"}},[e._v("#")]),e._v(" getContainer")]),e._v(" "),a("p",[e._v("Returns container element. The one which was indicated as 'container'\non init method")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"getdirtycount"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdirtycount"}},[e._v("#")]),e._v(" getDirtyCount")]),e._v(" "),a("p",[e._v("Return the count of changes made to the content and not yet stored.\nThis count resets at any "),a("code",[e._v("store()")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("number"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"setcustomrte"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcustomrte"}},[e._v("#")]),e._v(" setCustomRte")]),e._v(" "),a("p",[e._v("Replace the built-in Rich Text Editor with a custom one.")]),e._v(" "),a("h3",{attrs:{id:"parameters-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("obj")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Custom RTE Interface")])]),e._v(" "),a("h3",{attrs:{id:"examples-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-12"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setCustomRte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Function for enabling custom RTE")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// el is the HTMLElement of the double clicked Text Component")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// rte is the same instance you have returned the first time you call")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// enable(). This is useful if need to check if the RTE is already enabled so")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// ion this case you'll need to return the RTE and the end of the function")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[e._v("enable")]),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    rte "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("MyCustomRte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// this depends on the Custom RTE API")]),e._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("...")]),e._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("return")]),e._v(" rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// return the RTE instance")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Disable the editor, called for example when you unfocus the Text Component")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[e._v("disable")]),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("blur")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// this depends on the Custom RTE API")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Called when the Text Component is focused again. If you returned the RTE instance")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// from the enable function, the enable won't be called again instead will call focus,")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// in this case to avoid double binding of the editor")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[e._v("focus")]),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("function")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n  rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("focus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// this depends on the Custom RTE API")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("h2",{attrs:{id:"setcustomparsercss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcustomparsercss"}},[e._v("#")]),e._v(" setCustomParserCss")]),e._v(" "),a("p",[e._v("Replace the default CSS parser with a custom one.\nThe parser function receives a CSS string as a parameter and expects\nan array of CSSRule objects as a result. If you need to remove the\ncustom parser, pass "),a("code",[e._v("null")]),e._v(" as the argument")]),e._v(" "),a("h3",{attrs:{id:"parameters-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("parser")]),e._v(" "),a("strong",[e._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1),e._v(" | null)")]),e._v(" Parser function")])]),e._v(" "),a("h3",{attrs:{id:"examples-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-13"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setCustomParserCss")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("css")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=>")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("const")]),e._v(" result "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// ... parse the CSS string")]),e._v("\n result"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n   selectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.someclass, div .otherclass'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n   style"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'red'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// ...")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("return")]),e._v(" result"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"setdragmode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdragmode"}},[e._v("#")]),e._v(" setDragMode")]),e._v(" "),a("p",[e._v("Change the global drag mode of components.\nTo get more about this feature read: "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/issues/1936",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://github.com/artf/grapesjs/issues/1936"),a("OutboundLink")],1)]),e._v(" "),a("h3",{attrs:{id:"parameters-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("value")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)]),e._v(" Drag mode, options: 'absolute' | 'translate'")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"log"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#log"}},[e._v("#")]),e._v(" log")]),e._v(" "),a("p",[e._v("Trigger event log message")]),e._v(" "),a("h3",{attrs:{id:"parameters-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("msg")]),e._v(" "),a("strong",[e._v("any")]),e._v(" Message to log")]),e._v(" "),a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Custom options (optional, default "),a("code",[e._v("{}")]),e._v(")\n"),a("ul",[a("li",[a("code",[e._v("opts.ns")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)]),e._v(" Namespace of the log (eg. to use in plugins) (optional, default "),a("code",[e._v("''")]),e._v(")")]),e._v(" "),a("li",[a("code",[e._v("opts.level")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)]),e._v(" Level of the log, "),a("code",[e._v("debug")]),e._v(", "),a("code",[e._v("info")]),e._v(", "),a("code",[e._v("warning")]),e._v(", "),a("code",[e._v("error")]),e._v(" (optional, default "),a("code",[e._v("'debug'")]),e._v(")")])])])]),e._v(" "),a("h3",{attrs:{id:"examples-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-14"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'Something done!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" ns"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'from-plugin-x'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" level"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'info'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// This will trigger following events")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Callbacks of those events will always receive the message and")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// options, as arguments, eg:")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// editor.on('log:info', (msg, opts) => console.info(msg, opts))")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#t"}},[e._v("#")]),e._v(" t")]),e._v(" "),a("p",[e._v("Translate label")]),e._v(" "),a("h3",{attrs:{id:"parameters-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("args")]),e._v(" "),a("strong",[e._v("...any")])]),e._v(" "),a("li",[a("code",[e._v("key")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)]),e._v(" Label to translate")]),e._v(" "),a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("?")]),e._v(" Options for the translation\n"),a("ul",[a("li",[a("code",[e._v("opts.params")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("?")]),e._v(" Params for the translation")]),e._v(" "),a("li",[a("code",[e._v("opts.noWarn")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),a("OutboundLink")],1),e._v("?")]),e._v(" Avoid warnings in case of missing resources")])])])]),e._v(" "),a("h3",{attrs:{id:"examples-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-15"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'msg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// use params")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'msg2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" params"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" test"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'hello'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// custom local")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'msg2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" params"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" test"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'hello'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" l"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'it'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"on"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on"}},[e._v("#")]),e._v(" on")]),e._v(" "),a("p",[e._v("Attach event")]),e._v(" "),a("h3",{attrs:{id:"parameters-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("event")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Event name")]),e._v(" "),a("li",[a("code",[e._v("callback")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"once"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#once"}},[e._v("#")]),e._v(" once")]),e._v(" "),a("p",[e._v("Attach event and detach it after the first run")]),e._v(" "),a("h3",{attrs:{id:"parameters-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("event")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Event name")]),e._v(" "),a("li",[a("code",[e._v("callback")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"off"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#off"}},[e._v("#")]),e._v(" off")]),e._v(" "),a("p",[e._v("Detach event")]),e._v(" "),a("h3",{attrs:{id:"parameters-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-23"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("event")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Event name")]),e._v(" "),a("li",[a("code",[e._v("callback")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trigger"}},[e._v("#")]),e._v(" trigger")]),e._v(" "),a("p",[e._v("Trigger event")]),e._v(" "),a("h3",{attrs:{id:"parameters-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-24"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("event")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Event to trigger")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"destroy"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#destroy"}},[e._v("#")]),e._v(" destroy")]),e._v(" "),a("p",[e._v("Destroy the editor")]),e._v(" "),a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[e._v("#")]),e._v(" render")]),e._v(" "),a("p",[e._v("Render editor")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/28.f086d486.js b/docs/assets/js/28.f086d486.js
deleted file mode 100644
index 86af8084e..000000000
--- a/docs/assets/js/28.f086d486.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{420:function(e,t,a){"use strict";a.r(t);var s=a(33),r=Object(s.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h2",{attrs:{id:"editor"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#editor"}},[e._v("#")]),e._v(" Editor")]),e._v(" "),a("p",[e._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"}},[e._v("Configuration Object"),a("OutboundLink")],1)]),e._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("const")]),e._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// options")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("h2",{attrs:{id:"available-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#available-events"}},[e._v("#")]),e._v(" Available Events")]),e._v(" "),a("p",[e._v("You can make use of available events in this way")]),e._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'EVENT-NAME'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("some"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" argument")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=>")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// do something")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n")])])]),a("h3",{attrs:{id:"components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[e._v("#")]),e._v(" Components")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("component:create")]),e._v(" - Component is created (only the model, is not yet mounted in the canvas), called after the init() method")]),e._v(" "),a("li",[a("code",[e._v("component:mount")]),e._v(" - Component is mounted to an element and rendered in canvas")]),e._v(" "),a("li",[a("code",[e._v("component:add")]),e._v(" - Triggered when a new component is added to the editor, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:remove")]),e._v(" - Triggered when a component is removed, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:clone")]),e._v(" - Triggered when a component is cloned, the new model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:update")]),e._v(" - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:update:{propertyName}")]),e._v(" - Listen any property change, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:styleUpdate")]),e._v(" - Triggered when the style of the component is updated, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:styleUpdate:{propertyName}")]),e._v(" - Listen for a specific style property change, the model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:selected")]),e._v(" - New component selected, the selected model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:deselected")]),e._v(" - Component deselected, the deselected model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:toggled")]),e._v(" - Component selection changed, toggled model is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:type:add")]),e._v(" - New component type added, the new type is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:type:update")]),e._v(" - Component type updated, the updated type is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("component:drag:start")]),e._v(" - Component drag started. Passed an object, to the callback, containing the "),a("code",[e._v("target")]),e._v(" (component to drag), "),a("code",[e._v("parent")]),e._v(" (parent of the component) and "),a("code",[e._v("index")]),e._v(" (component index in the parent)")]),e._v(" "),a("li",[a("code",[e._v("component:drag")]),e._v(" - During component drag. Passed the same object as in "),a("code",[e._v("component:drag:start")]),e._v(" event, but in this case, "),a("code",[e._v("parent")]),e._v(" and "),a("code",[e._v("index")]),e._v(" are updated by the current pointer")]),e._v(" "),a("li",[a("code",[e._v("component:drag:end")]),e._v(" - Component drag ended. Passed the same object as in "),a("code",[e._v("component:drag:start")]),e._v(" event, but in this case, "),a("code",[e._v("parent")]),e._v(" and "),a("code",[e._v("index")]),e._v(" are updated by the final pointer")])]),e._v(" "),a("h3",{attrs:{id:"blocks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#blocks"}},[e._v("#")]),e._v(" Blocks")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("block:add")]),e._v(" - New block added")]),e._v(" "),a("li",[a("code",[e._v("block:remove")]),e._v(" - Block removed")]),e._v(" "),a("li",[a("code",[e._v("block:drag:start")]),e._v(" - Started dragging block, model of the block is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("block:drag")]),e._v(" - Dragging block, the block's model and the drag event are passed as arguments")]),e._v(" "),a("li",[a("code",[e._v("block:drag:stop")]),e._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")])]),e._v(" "),a("h3",{attrs:{id:"assets"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#assets"}},[e._v("#")]),e._v(" Assets")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("asset:add")]),e._v(" - New asset added")]),e._v(" "),a("li",[a("code",[e._v("asset:remove")]),e._v(" - Asset removed")]),e._v(" "),a("li",[a("code",[e._v("asset:upload:start")]),e._v(" - Before the upload is started")]),e._v(" "),a("li",[a("code",[e._v("asset:upload:end")]),e._v(" - After the upload is ended")]),e._v(" "),a("li",[a("code",[e._v("asset:upload:error")]),e._v(" - On any error in upload, passes the error as an argument")]),e._v(" "),a("li",[a("code",[e._v("asset:upload:response")]),e._v(" - On upload response, passes the result as an argument")])]),e._v(" "),a("h3",{attrs:{id:"keymaps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#keymaps"}},[e._v("#")]),e._v(" Keymaps")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("keymap:add")]),e._v(" - New keymap added. The new keyamp object is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("keymap:remove")]),e._v(" - Keymap removed. The removed keyamp object is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("keymap:emit")]),e._v(" - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event")]),e._v(" "),a("li",[a("code",[e._v("keymap:emit:{keymapId}")]),e._v(" - "),a("code",[e._v("keymapId")]),e._v(" emitted, in arguments you get keymapId, shortcutUsed, Event")])]),e._v(" "),a("h3",{attrs:{id:"style-manager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#style-manager"}},[e._v("#")]),e._v(" Style Manager")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("styleManager:update:target")]),e._v(" - The target (Component or CSSRule) is changed")]),e._v(" "),a("li",[a("code",[e._v("styleManager:change")]),e._v(" - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback")]),e._v(" "),a("li",[a("code",[e._v("styleManager:change:{propertyName}")]),e._v(" - As above but for a specific style property")])]),e._v(" "),a("h3",{attrs:{id:"storages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#storages"}},[e._v("#")]),e._v(" Storages")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("storage:start")]),e._v(" - Before the storage request is started")]),e._v(" "),a("li",[a("code",[e._v("storage:start:store")]),e._v(" - Before the store request. The object to store is passed as an argumnet (which you can edit)")]),e._v(" "),a("li",[a("code",[e._v("storage:start:load")]),e._v(" - Before the load request. Items to load are passed as an argumnet (which you can edit)")]),e._v(" "),a("li",[a("code",[e._v("storage:load")]),e._v(" - Triggered when something was loaded from the storage, loaded object passed as an argumnet")]),e._v(" "),a("li",[a("code",[e._v("storage:store")]),e._v(" - Triggered when something is stored to the storage, stored object passed as an argumnet")]),e._v(" "),a("li",[a("code",[e._v("storage:end")]),e._v(" - After the storage request is ended")]),e._v(" "),a("li",[a("code",[e._v("storage:end:store")]),e._v(" - After the store request")]),e._v(" "),a("li",[a("code",[e._v("storage:end:load")]),e._v(" - After the load request")]),e._v(" "),a("li",[a("code",[e._v("storage:error")]),e._v(" - On any error on storage request, passes the error as an argument")]),e._v(" "),a("li",[a("code",[e._v("storage:error:store")]),e._v(" - Error on store request, passes the error as an argument")]),e._v(" "),a("li",[a("code",[e._v("storage:error:load")]),e._v(" - Error on load request, passes the error as an argument")])]),e._v(" "),a("h3",{attrs:{id:"canvas"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#canvas"}},[e._v("#")]),e._v(" Canvas")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("canvas:dragenter")]),e._v(" - When something is dragged inside the canvas, "),a("code",[e._v("DataTransfer")]),e._v(" instance passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("canvas:dragover")]),e._v(" - When something is dragging on canvas, "),a("code",[e._v("DataTransfer")]),e._v(" instance passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("canvas:drop")]),e._v(" - Something is dropped in canvas, "),a("code",[e._v("DataTransfer")]),e._v(" instance and the dropped model are passed as arguments")]),e._v(" "),a("li",[a("code",[e._v("canvas:dragend")]),e._v(" - When a drag operation is ended, "),a("code",[e._v("DataTransfer")]),e._v(" instance passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("canvas:dragdata")]),e._v(" - On any dataTransfer parse, "),a("code",[e._v("DataTransfer")]),e._v(" instance and the "),a("code",[e._v("result")]),e._v(" are passed as arguments.\nBy changing "),a("code",[e._v("result.content")]),e._v(" you're able to customize what is dropped")])]),e._v(" "),a("h3",{attrs:{id:"selectors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectors"}},[e._v("#")]),e._v(" Selectors")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("selector:add")]),e._v(" - New selector is add. Passes the new selector as an argument")]),e._v(" "),a("li",[a("code",[e._v("selector:remove")]),e._v(" - Selector removed. Passes the removed selector as an argument")]),e._v(" "),a("li",[a("code",[e._v("selector:update")]),e._v(" - Selector updated. Passes the updated selector as an argument")]),e._v(" "),a("li",[a("code",[e._v("selector:state")]),e._v(" - State changed. Passes the new state value as an argument")])]),e._v(" "),a("h3",{attrs:{id:"rte"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rte"}},[e._v("#")]),e._v(" RTE")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("rte:enable")]),e._v(" - RTE enabled. The view, on which RTE is enabled, is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("rte:disable")]),e._v(" - RTE disabled. The view, on which RTE is disabled, is passed as an argument")])]),e._v(" "),a("h3",{attrs:{id:"modal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modal"}},[e._v("#")]),e._v(" Modal")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("modal:open")]),e._v(" - Modal is opened")]),e._v(" "),a("li",[a("code",[e._v("modal:close")]),e._v(" - Modal is closed")])]),e._v(" "),a("h3",{attrs:{id:"commands"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#commands"}},[e._v("#")]),e._v(" Commands")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("run:{commandName}")]),e._v(" - Triggered when some command is called to run (eg. editor.runCommand('preview'))")]),e._v(" "),a("li",[a("code",[e._v("stop:{commandName}")]),e._v(" - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))")]),e._v(" "),a("li",[a("code",[e._v("run:{commandName}:before")]),e._v(" - Triggered before the command is called")]),e._v(" "),a("li",[a("code",[e._v("stop:{commandName}:before")]),e._v(" - Triggered before the command is called to stop")]),e._v(" "),a("li",[a("code",[e._v("abort:{commandName}")]),e._v(" - Triggered when the command execution is aborted ("),a("code",[e._v("editor.on(")]),e._v("run:preview:before"),a("code",[e._v(", opts => opts.abort = 1);")]),e._v(")")]),e._v(" "),a("li",[a("code",[e._v("run")]),e._v(" - Triggered on run of any command. The id and the result are passed as arguments to the callback")]),e._v(" "),a("li",[a("code",[e._v("stop")]),e._v(" - Triggered on stop of any command. The id and the result are passed as arguments to the callback")])]),e._v(" "),a("h3",{attrs:{id:"general"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#general"}},[e._v("#")]),e._v(" General")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("canvasScroll")]),e._v(" - Canvas is scrolled")]),e._v(" "),a("li",[a("code",[e._v("update")]),e._v(" - The structure of the template is updated (its HTML/CSS)")]),e._v(" "),a("li",[a("code",[e._v("undo")]),e._v(" - Undo executed")]),e._v(" "),a("li",[a("code",[e._v("redo")]),e._v(" - Redo executed")]),e._v(" "),a("li",[a("code",[e._v("load")]),e._v(" - Editor is loaded")])]),e._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[e._v("#")]),e._v(" getConfig")]),e._v(" "),a("p",[e._v("Returns configuration object")]),e._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("prop")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1),e._v("?")]),e._v(" Property name")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("any")]),e._v(" Returns the configuration object or\nthe value of the specified property")]),e._v(" "),a("h2",{attrs:{id:"gethtml"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gethtml"}},[e._v("#")]),e._v(" getHtml")]),e._v(" "),a("p",[e._v("Returns HTML built inside canvas")]),e._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("opts")])])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" HTML string")]),e._v(" "),a("h2",{attrs:{id:"getcss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcss"}},[e._v("#")]),e._v(" getCss")]),e._v(" "),a("p",[e._v("Returns CSS built inside canvas")]),e._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Options (optional, default "),a("code",[e._v("{}")]),e._v(")\n"),a("ul",[a("li",[a("code",[e._v("opts.avoidProtected")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),a("OutboundLink")],1)]),e._v(" Don't include protected CSS (optional, default "),a("code",[e._v("false")]),e._v(")")])])])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" CSS string")]),e._v(" "),a("h2",{attrs:{id:"getjs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getjs"}},[e._v("#")]),e._v(" getJs")]),e._v(" "),a("p",[e._v("Returns JS of all components")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" JS string")]),e._v(" "),a("h2",{attrs:{id:"getcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents"}},[e._v("#")]),e._v(" getComponents")]),e._v(" "),a("p",[e._v("Return the complete tree of components. Use "),a("code",[e._v("getWrapper")]),e._v(" to include also the wrapper")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("Components")])]),e._v(" "),a("h2",{attrs:{id:"getwrapper"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper"}},[e._v("#")]),e._v(" getWrapper")]),e._v(" "),a("p",[e._v("Return the wrapper and its all components")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("Component")])]),e._v(" "),a("h2",{attrs:{id:"setcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcomponents"}},[e._v("#")]),e._v(" setComponents")]),e._v(" "),a("p",[e._v("Set components inside editor's canvas. This method overrides actual components")]),e._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("components")]),e._v(" "),a("strong",[e._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1),e._v(")")]),e._v(" HTML string or components model")])]),e._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'
    New component
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// or")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n type"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n  classes"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n  content"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'New component'")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"addcomponents"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addcomponents"}},[e._v("#")]),e._v(" addComponents")]),e._v(" "),a("p",[e._v("Add components")]),e._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("components")]),e._v(" "),a("strong",[e._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1),e._v(")")]),e._v(" HTML string or components model")]),e._v(" "),a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Options\n"),a("ul",[a("li",[a("code",[e._v("opts.avoidUpdateStyle")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),a("OutboundLink")],1)]),e._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",[e._v("false")]),e._v(")")])])])]),e._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("addComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'
    New component
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// or")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("addComponents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n type"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'text'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n  classes"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n  content"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'New component'")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v("")])]),e._v(" "),a("h2",{attrs:{id:"getstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstyle"}},[e._v("#")]),e._v(" getStyle")]),e._v(" "),a("p",[e._v("Returns style in JSON format object")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"setstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setstyle"}},[e._v("#")]),e._v(" setStyle")]),e._v(" "),a("p",[e._v("Set style inside editor's canvas. This method overrides actual style")]),e._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("style")]),e._v(" "),a("strong",[e._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1),e._v(")")]),e._v(" CSS string or style model")])]),e._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.cls{color: red}'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("//or")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n  selectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'cls'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),e._v("\n  style"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'red'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"getselected"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getselected"}},[e._v("#")]),e._v(" getSelected")]),e._v(" "),a("p",[e._v("Returns the last selected component, if there is one")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("Model")])]),e._v(" "),a("h2",{attrs:{id:"getselectedall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getselectedall"}},[e._v("#")]),e._v(" getSelectedAll")]),e._v(" "),a("p",[e._v("Returns an array of all selected components")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"getselectedtostyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getselectedtostyle"}},[e._v("#")]),e._v(" getSelectedToStyle")]),e._v(" "),a("p",[e._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")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("Model")])]),e._v(" "),a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select"}},[e._v("#")]),e._v(" select")]),e._v(" "),a("p",[e._v("Select a component")]),e._v(" "),a("h3",{attrs:{id:"parameters-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("el")]),e._v(" "),a("strong",[e._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1),e._v(")")]),e._v(" Component to select")]),e._v(" "),a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("?")]),e._v(" Options\n"),a("ul",[a("li",[a("code",[e._v("opts.scroll")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),a("OutboundLink")],1),e._v("?")]),e._v(" Scroll canvas to the selected element")])])])]),e._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Select dropped block")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'block:drag:stop'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("model")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("select")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"selectadd"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectadd"}},[e._v("#")]),e._v(" selectAdd")]),e._v(" "),a("p",[e._v("Add component to selection")]),e._v(" "),a("h3",{attrs:{id:"parameters-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("el")]),e._v(" "),a("strong",[e._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v(")")]),e._v(" Component to select")])]),e._v(" "),a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("selectAdd")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"selectremove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectremove"}},[e._v("#")]),e._v(" selectRemove")]),e._v(" "),a("p",[e._v("Remove component from selection")]),e._v(" "),a("h3",{attrs:{id:"parameters-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("el")]),e._v(" "),a("strong",[e._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v(")")]),e._v(" Component to select")])]),e._v(" "),a("h3",{attrs:{id:"examples-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("selectRemove")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"selecttoggle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selecttoggle"}},[e._v("#")]),e._v(" selectToggle")]),e._v(" "),a("p",[e._v("Toggle component selection")]),e._v(" "),a("h3",{attrs:{id:"parameters-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("el")]),e._v(" "),a("strong",[e._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1),e._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[e._v("Array"),a("OutboundLink")],1),e._v(")")]),e._v(" Component to select")])]),e._v(" "),a("h3",{attrs:{id:"examples-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("selectToggle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"setdevice"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdevice"}},[e._v("#")]),e._v(" setDevice")]),e._v(" "),a("p",[e._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),e._v(" "),a("h3",{attrs:{id:"parameters-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("name")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Name of the device")])]),e._v(" "),a("h3",{attrs:{id:"examples-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-8"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setDevice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'Tablet'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"getdevice"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdevice"}},[e._v("#")]),e._v(" getDevice")]),e._v(" "),a("p",[e._v("Return the actual active device")]),e._v(" "),a("h3",{attrs:{id:"examples-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-9"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("var")]),e._v(" device "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("getDevice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\nconsole"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("device"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// 'Tablet'")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Device name")]),e._v(" "),a("h2",{attrs:{id:"runcommand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#runcommand"}},[e._v("#")]),e._v(" runCommand")]),e._v(" "),a("p",[e._v("Execute command")]),e._v(" "),a("h3",{attrs:{id:"parameters-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("id")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Command ID")]),e._v(" "),a("li",[a("code",[e._v("options")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Custom options (optional, default "),a("code",[e._v("{}")]),e._v(")")])]),e._v(" "),a("h3",{attrs:{id:"examples-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-10"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("runCommand")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("someValue"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[e._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("any")]),e._v(" The return is defined by the command")]),e._v(" "),a("h2",{attrs:{id:"stopcommand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#stopcommand"}},[e._v("#")]),e._v(" stopCommand")]),e._v(" "),a("p",[e._v("Stop the command if stop method was provided")]),e._v(" "),a("h3",{attrs:{id:"parameters-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("id")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Command ID")]),e._v(" "),a("li",[a("code",[e._v("options")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Custom options (optional, default "),a("code",[e._v("{}")]),e._v(")")])]),e._v(" "),a("h3",{attrs:{id:"examples-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-11"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("stopCommand")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'myCommand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("someValue"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[e._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("any")]),e._v(" The return is defined by the command")]),e._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[e._v("#")]),e._v(" store")]),e._v(" "),a("p",[e._v("Store data to the current storage")]),e._v(" "),a("h3",{attrs:{id:"parameters-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("clb")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Stored data")]),e._v(" "),a("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[e._v("#")]),e._v(" load")]),e._v(" "),a("p",[e._v("Load data from the current storage")]),e._v(" "),a("h3",{attrs:{id:"parameters-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("clb")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Stored data")]),e._v(" "),a("h2",{attrs:{id:"getcontainer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer"}},[e._v("#")]),e._v(" getContainer")]),e._v(" "),a("p",[e._v("Returns container element. The one which was indicated as 'container'\non init method")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"getdirtycount"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdirtycount"}},[e._v("#")]),e._v(" getDirtyCount")]),e._v(" "),a("p",[e._v("Return the count of changes made to the content and not yet stored.\nThis count resets at any "),a("code",[e._v("store()")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("number"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"setcustomrte"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcustomrte"}},[e._v("#")]),e._v(" setCustomRte")]),e._v(" "),a("p",[e._v("Replace the built-in Rich Text Editor with a custom one.")]),e._v(" "),a("h3",{attrs:{id:"parameters-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("obj")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Custom RTE Interface")])]),e._v(" "),a("h3",{attrs:{id:"examples-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-12"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setCustomRte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Function for enabling custom RTE")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// el is the HTMLElement of the double clicked Text Component")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// rte is the same instance you have returned the first time you call")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// enable(). This is useful if need to check if the RTE is already enabled so")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// ion this case you'll need to return the RTE and the end of the function")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[e._v("enable")]),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    rte "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("new")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[e._v("MyCustomRte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// this depends on the Custom RTE API")]),e._v("\n    "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("...")]),e._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("return")]),e._v(" rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// return the RTE instance")]),e._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Disable the editor, called for example when you unfocus the Text Component")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[e._v("disable")]),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n    rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("blur")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// this depends on the Custom RTE API")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Called when the Text Component is focused again. If you returned the RTE instance")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// from the enable function, the enable won't be called again instead will call focus,")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// in this case to avoid double binding of the editor")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[e._v("focus")]),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("function")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" rte")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n  rte"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("focus")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// this depends on the Custom RTE API")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("h2",{attrs:{id:"setcustomparsercss"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcustomparsercss"}},[e._v("#")]),e._v(" setCustomParserCss")]),e._v(" "),a("p",[e._v("Replace the default CSS parser with a custom one.\nThe parser function receives a CSS string as a parameter and expects\nan array of CSSRule objects as a result. If you need to remove the\ncustom parser, pass "),a("code",[e._v("null")]),e._v(" as the argument")]),e._v(" "),a("h3",{attrs:{id:"parameters-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("parser")]),e._v(" "),a("strong",[e._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1),e._v(" | null)")]),e._v(" Parser function")])]),e._v(" "),a("h3",{attrs:{id:"examples-13"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-13"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("setCustomParserCss")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[e._v("css")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=>")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("const")]),e._v(" result "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// ... parse the CSS string")]),e._v("\n result"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v("\n   selectors"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'.someclass, div .otherclass'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v("\n   style"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" color"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'red'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// ...")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[e._v("return")]),e._v(" result"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"setdragmode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdragmode"}},[e._v("#")]),e._v(" setDragMode")]),e._v(" "),a("p",[e._v("Change the global drag mode of components.\nTo get more about this feature read: "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/issues/1936",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://github.com/artf/grapesjs/issues/1936"),a("OutboundLink")],1)]),e._v(" "),a("h3",{attrs:{id:"parameters-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("value")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)]),e._v(" Drag mode, options: 'absolute' | 'translate'")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"log"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#log"}},[e._v("#")]),e._v(" log")]),e._v(" "),a("p",[e._v("Trigger event log message")]),e._v(" "),a("h3",{attrs:{id:"parameters-19"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("msg")]),e._v(" "),a("strong",[e._v("any")]),e._v(" Message to log")]),e._v(" "),a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1)]),e._v(" Custom options (optional, default "),a("code",[e._v("{}")]),e._v(")\n"),a("ul",[a("li",[a("code",[e._v("opts.ns")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)]),e._v(" Namespace of the log (eg. to use in plugins) (optional, default "),a("code",[e._v("''")]),e._v(")")]),e._v(" "),a("li",[a("code",[e._v("opts.level")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)]),e._v(" Level of the log, "),a("code",[e._v("debug")]),e._v(", "),a("code",[e._v("info")]),e._v(", "),a("code",[e._v("warning")]),e._v(", "),a("code",[e._v("error")]),e._v(" (optional, default "),a("code",[e._v("'debug'")]),e._v(")")])])])]),e._v(" "),a("h3",{attrs:{id:"examples-14"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-14"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'Something done!'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" ns"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'from-plugin-x'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" level"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'info'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// This will trigger following events")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// Callbacks of those events will always receive the message and")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// options, as arguments, eg:")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// editor.on('log:info', (msg, opts) => console.info(msg, opts))")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#t"}},[e._v("#")]),e._v(" t")]),e._v(" "),a("p",[e._v("Translate label")]),e._v(" "),a("h3",{attrs:{id:"parameters-20"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("args")]),e._v(" "),a("strong",[e._v("...any")])]),e._v(" "),a("li",[a("code",[e._v("key")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)]),e._v(" Label to translate")]),e._v(" "),a("li",[a("code",[e._v("opts")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("?")]),e._v(" Options for the translation\n"),a("ul",[a("li",[a("code",[e._v("opts.params")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[e._v("Object"),a("OutboundLink")],1),e._v("?")]),e._v(" Params for the translation")]),e._v(" "),a("li",[a("code",[e._v("opts.noWarn")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[e._v("Boolean"),a("OutboundLink")],1),e._v("?")]),e._v(" Avoid warnings in case of missing resources")])])])]),e._v(" "),a("h3",{attrs:{id:"examples-15"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-15"}},[e._v("#")]),e._v(" Examples")]),e._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'msg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// use params")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'msg2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" params"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" test"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'hello'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[e._v("// custom local")]),e._v("\neditor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'msg2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" params"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("{")]),e._v(" test"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'hello'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" l"),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v(":")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("'it'")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(";")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),a("OutboundLink")],1)])]),e._v(" "),a("h2",{attrs:{id:"on"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on"}},[e._v("#")]),e._v(" on")]),e._v(" "),a("p",[e._v("Attach event")]),e._v(" "),a("h3",{attrs:{id:"parameters-21"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("event")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Event name")]),e._v(" "),a("li",[a("code",[e._v("callback")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"once"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#once"}},[e._v("#")]),e._v(" once")]),e._v(" "),a("p",[e._v("Attach event and detach it after the first run")]),e._v(" "),a("h3",{attrs:{id:"parameters-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("event")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Event name")]),e._v(" "),a("li",[a("code",[e._v("callback")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"off"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#off"}},[e._v("#")]),e._v(" off")]),e._v(" "),a("p",[e._v("Detach event")]),e._v(" "),a("h3",{attrs:{id:"parameters-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-23"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("event")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Event name")]),e._v(" "),a("li",[a("code",[e._v("callback")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[e._v("Function"),a("OutboundLink")],1)]),e._v(" Callback function")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trigger"}},[e._v("#")]),e._v(" trigger")]),e._v(" "),a("p",[e._v("Trigger event")]),e._v(" "),a("h3",{attrs:{id:"parameters-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-24"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("event")]),e._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("string"),a("OutboundLink")],1)]),e._v(" Event to trigger")])]),e._v(" "),a("p",[e._v("Returns "),a("strong",[e._v("this")])]),e._v(" "),a("h2",{attrs:{id:"destroy"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#destroy"}},[e._v("#")]),e._v(" destroy")]),e._v(" "),a("p",[e._v("Destroy the editor")]),e._v(" "),a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render"}},[e._v("#")]),e._v(" render")]),e._v(" "),a("p",[e._v("Render editor")]),e._v(" "),a("p",[e._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[e._v("HTMLElement"),a("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/29.5e2a7327.js b/docs/assets/js/29.aa861629.js
similarity index 99%
rename from docs/assets/js/29.5e2a7327.js
rename to docs/assets/js/29.aa861629.js
index 3c0fbec13..02ea268d5 100644
--- a/docs/assets/js/29.5e2a7327.js
+++ b/docs/assets/js/29.aa861629.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{418:function(t,s,a){"use strict";a.r(s);var e=a(33),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" I18n")]),t._v(" "),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/i18n/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   locale"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   localeFallback"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   messages"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     it"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" hello"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Ciao'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("I18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[t._v("#")]),t._v(" Events")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("i18n:add")]),t._v(" - New set of messages is added")]),t._v(" "),a("li",[a("code",[t._v("i18n:update")]),t._v(" - The set of messages is updated")]),t._v(" "),a("li",[a("code",[t._v("i18n:locale")]),t._v(" - Locale changed")])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get module configurations")]),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(" Configuration object")]),t._v(" "),a("h2",{attrs:{id:"setlocale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setlocale"}},[t._v("#")]),t._v(" setLocale")]),t._v(" "),a("p",[t._v("Update current locale")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("locale")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Locale value")])]),t._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocale")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'it'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getlocale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getlocale"}},[t._v("#")]),t._v(" getLocale")]),t._v(" "),a("p",[t._v("Get current locale")]),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(" Current locale value")]),t._v(" "),a("h2",{attrs:{id:"getmessages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getmessages"}},[t._v("#")]),t._v(" getMessages")]),t._v(" "),a("p",[t._v("Get all messages")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("lang")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(" Specify the language of messages to return")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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(")\n"),a("ul",[a("li",[a("code",[t._v("opts.debug")]),t._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._v("?")]),t._v(" Show warnings in case of missing language")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { hello: '...' }, ... }")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { hello: '...' }")]),t._v("\n")])])]),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(" "),a("h2",{attrs:{id:"setmessages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setmessages"}},[t._v("#")]),t._v(" setMessages")]),t._v(" "),a("p",[t._v("Set new set of messages")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("msg")]),t._v(" "),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(" Set of messages")])]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" en"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" msg2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg 2 up'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" msg3"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg 3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set replaced")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"addmessages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addmessages"}},[t._v("#")]),t._v(" addMessages")]),t._v(" "),a("p",[t._v("Update messages")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("msg")]),t._v(" "),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(" Set of messages to add")])]),t._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" en"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" msg2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg 2 up'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" msg3"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg 3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set updated")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#t"}},[t._v("#")]),t._v(" t")]),t._v(" "),a("p",[t._v("Translate the locale message")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("key")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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 to translate")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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 for the translation (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.params")]),t._v(" "),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(" Params for the translation")]),t._v(" "),a("li",[a("code",[t._v("opts.debug")]),t._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._v("?")]),t._v(" Show warnings in case of missing resources")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("obj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n en"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" msg"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" msg2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg {test}'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n it"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" msg2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg {test} it'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nobj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'msg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> outputs `Msg`")]),t._v("\nobj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'msg2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" params"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" test"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// use params")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> outputs `Msg hello`")]),t._v("\nobj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'msg2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" l"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'it'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" params"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" test"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// custom local")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> outputs `Msg hello it`")]),t._v("\n")])])]),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)])])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{441:function(t,s,a){"use strict";a.r(s);var e=a(42),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" I18n")]),t._v(" "),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/i18n/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   locale"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   localeFallback"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   messages"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     it"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" hello"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Ciao'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("I18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events"}},[t._v("#")]),t._v(" Events")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("i18n:add")]),t._v(" - New set of messages is added")]),t._v(" "),a("li",[a("code",[t._v("i18n:update")]),t._v(" - The set of messages is updated")]),t._v(" "),a("li",[a("code",[t._v("i18n:locale")]),t._v(" - Locale changed")])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get module configurations")]),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(" Configuration object")]),t._v(" "),a("h2",{attrs:{id:"setlocale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setlocale"}},[t._v("#")]),t._v(" setLocale")]),t._v(" "),a("p",[t._v("Update current locale")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("locale")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Locale value")])]),t._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocale")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'it'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getlocale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getlocale"}},[t._v("#")]),t._v(" getLocale")]),t._v(" "),a("p",[t._v("Get current locale")]),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(" Current locale value")]),t._v(" "),a("h2",{attrs:{id:"getmessages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getmessages"}},[t._v("#")]),t._v(" getMessages")]),t._v(" "),a("p",[t._v("Get all messages")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("lang")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(" Specify the language of messages to return")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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(")\n"),a("ul",[a("li",[a("code",[t._v("opts.debug")]),t._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._v("?")]),t._v(" Show warnings in case of missing language")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { hello: '...' }, ... }")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { hello: '...' }")]),t._v("\n")])])]),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(" "),a("h2",{attrs:{id:"setmessages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setmessages"}},[t._v("#")]),t._v(" setMessages")]),t._v(" "),a("p",[t._v("Set new set of messages")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("msg")]),t._v(" "),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(" Set of messages")])]),t._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" en"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" msg2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg 2 up'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" msg3"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg 3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set replaced")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"addmessages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addmessages"}},[t._v("#")]),t._v(" addMessages")]),t._v(" "),a("p",[t._v("Update messages")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("msg")]),t._v(" "),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(" Set of messages to add")])]),t._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2', } }")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" en"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" msg2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg 2 up'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" msg3"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg 3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Set updated")]),t._v("\ni18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#t"}},[t._v("#")]),t._v(" t")]),t._v(" "),a("p",[t._v("Translate the locale message")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("key")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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 to translate")]),t._v(" "),a("li",[a("code",[t._v("opts")]),t._v(" "),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 for the translation (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.params")]),t._v(" "),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(" Params for the translation")]),t._v(" "),a("li",[a("code",[t._v("opts.debug")]),t._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._v("?")]),t._v(" Show warnings in case of missing resources")])])])]),t._v(" "),a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("obj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n en"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" msg"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" msg2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg {test}'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n it"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" msg2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Msg {test} it'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nobj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'msg'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> outputs `Msg`")]),t._v("\nobj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'msg2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" params"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" test"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// use params")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> outputs `Msg hello`")]),t._v("\nobj"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("t")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'msg2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" l"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'it'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" params"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" test"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// custom local")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> outputs `Msg hello it`")]),t._v("\n")])])]),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)])])])}),[],!1,null,null,null);s.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/3.7e642bff.js b/docs/assets/js/3.7e642bff.js
deleted file mode 100644
index a1f7b4386..000000000
--- a/docs/assets/js/3.7e642bff.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{273:function(e,t,s){"use strict";s(17);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"}},b={id:"show-layers",active:!0,togglable:!1,label:"Layers",command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display="none"}}},d={id:"show-style",label:"Styles",togglable:!1,active:!0,command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display="none"}}},v={id:"show-traits",label:"Traits",togglable:!1,active:!0,command:{getTraitsEl:function(e){return e.getContainer().closest(".editor-row").querySelector(".traits-container")},run:function(e,t){this.getTraitsEl(e).style.display=""},stop:function(e,t){this.getTraitsEl(e).style.display="none"}}},m={id:"panel-switcher",buttons:[b,d]},w={id:"panel-switcher",buttons:[b,d,v]},u={id:"panel-switcher",buttons:[Object.assign({},b,{label:''}),Object.assign({},d,{label:''}),Object.assign({},v,{label:''})]},y={id:"panel-devices",buttons:[{id:"device-desktop",label:"D",command:{run:function(e){return e.setDevice("Desktop")}},active:!0,togglable:!1},{id:"device-mobile",label:"M",command:{run:function(e){return e.setDevice("Mobile")}},togglable:!1}]},j=Object.assign({},y,{buttons:[Object.assign({},y.buttons[0],{label:''}),Object.assign({},y.buttons[1],{label:''})]}),x={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},M=Object.assign({},x,{container:"#gjs2",blockManager:n}),O=Object.assign({},M,{container:"#gjs3",blockManager:Object.assign({},n,{appendTo:"#blocks3"})}),f=Object.assign({},M,{container:"#gjs4",blockManager:Object.assign({},n,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},M,{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({},M,{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({},M,{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({},M,{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});t.a={gjsConfigStart:x,gjsConfigBlocks:M,gjsConfigPanels:O,gjsConfigLayers:f,gjsConfigStyle:T,gjsConfigTraits:k,gjsConfigDevices:S,gjsConfigTheme:H,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:m,panelSwitcherTraits:w,panelSwitcherTraitsIcons:u,panelDevices:y,panelDevicesIcons:j}},293:function(e,t,s){},338:function(e,t,s){"use strict";var n=s(293);s.n(n).a},393:function(e,t,s){"use strict";s.r(t);var n=s(273),a={mounted:function(){window.editor2=grapesjs.init(n.a.gjsConfigBlocks)}},i=(s(338),s(33)),o=Object(i.a)(a,(function(){var e=this.$createElement;this._self._c;return this._m(0)}),[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"gjs",attrs:{id:"gjs2"}},[t("h1",[this._v("Hello World Component!")])]),this._v(" "),t("div",{attrs:{id:"blocks2"}})])}],!1,null,null,null);t.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/3.cd44cf34.js b/docs/assets/js/3.cd44cf34.js
new file mode 100644
index 000000000..e53381e06
--- /dev/null
+++ b/docs/assets/js/3.cd44cf34.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{302:function(e,t,s){"use strict";s(9);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"}},b={id:"show-layers",active:!0,togglable:!1,label:"Layers",command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getLayersEl(s).style.display="none"}}},d={id:"show-style",label:"Styles",togglable:!1,active:!0,command:{getRowEl:function(e){return e.getContainer().parentNode.parentNode},getLayersEl:function(e){return e.querySelector(".layers-container")},getStyleEl:function(e){return e.querySelector(".styles-container")},run:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display=""},stop:function(e,t){var s=this.getRowEl(e);this.getStyleEl(s).style.display="none"}}},v={id:"show-traits",label:"Traits",togglable:!1,active:!0,command:{getTraitsEl:function(e){return e.getContainer().closest(".editor-row").querySelector(".traits-container")},run:function(e,t){this.getTraitsEl(e).style.display=""},stop:function(e,t){this.getTraitsEl(e).style.display="none"}}},m={id:"panel-switcher",buttons:[b,d]},w={id:"panel-switcher",buttons:[b,d,v]},u={id:"panel-switcher",buttons:[Object.assign({},b,{label:''}),Object.assign({},d,{label:''}),Object.assign({},v,{label:''})]},y={id:"panel-devices",buttons:[{id:"device-desktop",label:"D",command:{run:function(e){return e.setDevice("Desktop")}},active:!0,togglable:!1},{id:"device-mobile",label:"M",command:{run:function(e){return e.setDevice("Mobile")}},togglable:!1}]},j=Object.assign({},y,{buttons:[Object.assign({},y.buttons[0],{label:''}),Object.assign({},y.buttons[1],{label:''})]}),x={container:"#gjs",fromElement:!0,height:"300px",width:"auto",storageManager:{type:null},panels:{defaults:[]}},M=Object.assign({},x,{container:"#gjs2",blockManager:n}),O=Object.assign({},M,{container:"#gjs3",blockManager:Object.assign({},n,{appendTo:"#blocks3"})}),f=Object.assign({},M,{container:"#gjs4",blockManager:Object.assign({},n,{appendTo:"#blocks4"}),layerManager:{appendTo:"#layers-container",scrollLayers:0},panels:{defaults:[h]}}),T=Object.assign({},M,{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({},M,{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({},M,{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({},M,{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});t.a={gjsConfigStart:x,gjsConfigBlocks:M,gjsConfigPanels:O,gjsConfigLayers:f,gjsConfigStyle:T,gjsConfigTraits:k,gjsConfigDevices:S,gjsConfigTheme:H,panelTop:{id:"panel-top"},panelBasicActions:g,panelBasicActionsIcons:p,panelSidebar:h,panelSwitcher:m,panelSwitcherTraits:w,panelSwitcherTraitsIcons:u,panelDevices:y,panelDevicesIcons:j}},322:function(e,t,s){},363:function(e,t,s){"use strict";var n=s(322);s.n(n).a},418:function(e,t,s){"use strict";s.r(t);var n=s(302),a={mounted:function(){window.editor2=grapesjs.init(n.a.gjsConfigBlocks)}},i=(s(363),s(42)),o=Object(i.a)(a,(function(){var e=this.$createElement;this._self._c;return this._m(0)}),[function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("div",{staticClass:"gjs",attrs:{id:"gjs2"}},[t("h1",[this._v("Hello World Component!")])]),this._v(" "),t("div",{attrs:{id:"blocks2"}})])}],!1,null,null,null);t.default=o.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/30.3a998b30.js b/docs/assets/js/30.9363b5c5.js
similarity index 98%
rename from docs/assets/js/30.3a998b30.js
rename to docs/assets/js/30.9363b5c5.js
index 4c0917af6..5cffebecb 100644
--- a/docs/assets/js/30.3a998b30.js
+++ b/docs/assets/js/30.9363b5c5.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{419:function(t,a,e){"use strict";e.r(a);var s=e(33),r=Object(s.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps"}},[t._v("#")]),t._v(" Keymaps")]),t._v(" "),e("p",[t._v("You can customize the initial state of the module from the editor initialization")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n keymaps"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Object of keymaps")]),t._v("\n   defaults"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'your-namespace:keymap-name'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n       keys"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+z, ctrl+z'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n       handler"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-command-id'")]),t._v("\n     "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("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._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" keymaps "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Keymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ul",[e("li",[e("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getAll"}},[t._v("getAll")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#remove"}},[t._v("remove")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#removeall"}},[t._v("removeAll")])])]),t._v(" "),e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),e("p",[t._v("Get module configurations")]),t._v(" "),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(" Configuration object")]),t._v(" "),e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),e("p",[t._v("Add new keymap")]),t._v(" "),e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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(" Keymap id")]),t._v(" "),e("li",[e("code",[t._v("keys")]),t._v(" "),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(" Keymap keys, eg. "),e("code",[t._v("ctrl+a")]),t._v(", "),e("code",[t._v("⌘+z, ctrl+z")])]),t._v(" "),e("li",[e("code",[t._v("handler")]),t._v(" "),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),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(")")]),t._v(" Keymap handler, might be a function")]),t._v(" "),e("li",[e("code",[t._v("opts")]),t._v(" "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Options (optional, default "),e("code",[t._v("{}")]),t._v(")")])]),t._v(" "),e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'ns' is just a custom namespace")]),t._v("\nkeymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+j, ⌘+u, ctrl+j, alt+u'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'do stuff'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// or")]),t._v("\nkeymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+s, ctrl+s'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-gjs-command'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// listen to events")]),t._v("\neditor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'keymap:emit'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" shortcut"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("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(" Added keymap\nor just a command id as a string")]),t._v(" "),e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),e("p",[t._v("Get the keymap by id")]),t._v(" "),e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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(" Keymap id")])]),t._v(" "),e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("keymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {keys, handler};")]),t._v("\n")])])]),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(" Keymap object")]),t._v(" "),e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),e("p",[t._v("Get all keymaps")]),t._v(" "),e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("keymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {id1: {}, id2: {}};")]),t._v("\n")])])]),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(" "),e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),e("p",[t._v("Remove the keymap by id")]),t._v(" "),e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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(" Keymap id")])]),t._v(" "),e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("keymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {keys, handler};")]),t._v("\n")])])]),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(" Removed keymap")]),t._v(" "),e("h2",{attrs:{id:"removeall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeall"}},[t._v("#")]),t._v(" removeAll")]),t._v(" "),e("p",[t._v("Remove all binded keymaps")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("this")])])])}),[],!1,null,null,null);a.default=r.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{445:function(t,a,e){"use strict";e.r(a);var s=e(42),r=Object(s.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps"}},[t._v("#")]),t._v(" Keymaps")]),t._v(" "),e("p",[t._v("You can customize the initial state of the module from the editor initialization")]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n keymaps"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Object of keymaps")]),t._v("\n   defaults"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'your-namespace:keymap-name'")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n       keys"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+z, ctrl+z'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n       handler"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-command-id'")]),t._v("\n     "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("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._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" keymaps "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Keymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ul",[e("li",[e("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getAll"}},[t._v("getAll")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#remove"}},[t._v("remove")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#removeall"}},[t._v("removeAll")])])]),t._v(" "),e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),e("p",[t._v("Get module configurations")]),t._v(" "),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(" Configuration object")]),t._v(" "),e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),e("p",[t._v("Add new keymap")]),t._v(" "),e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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(" Keymap id")]),t._v(" "),e("li",[e("code",[t._v("keys")]),t._v(" "),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(" Keymap keys, eg. "),e("code",[t._v("ctrl+a")]),t._v(", "),e("code",[t._v("⌘+z, ctrl+z")])]),t._v(" "),e("li",[e("code",[t._v("handler")]),t._v(" "),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),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(")")]),t._v(" Keymap handler, might be a function")]),t._v(" "),e("li",[e("code",[t._v("opts")]),t._v(" "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Options (optional, default "),e("code",[t._v("{}")]),t._v(")")])]),t._v(" "),e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'ns' is just a custom namespace")]),t._v("\nkeymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+j, ⌘+u, ctrl+j, alt+u'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'do stuff'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// or")]),t._v("\nkeymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'⌘+s, ctrl+s'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-gjs-command'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// listen to events")]),t._v("\neditor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'keymap:emit'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("id"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" shortcut"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" e")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),e("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(" Added keymap\nor just a command id as a string")]),t._v(" "),e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),e("p",[t._v("Get the keymap by id")]),t._v(" "),e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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(" Keymap id")])]),t._v(" "),e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("keymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {keys, handler};")]),t._v("\n")])])]),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(" Keymap object")]),t._v(" "),e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),e("p",[t._v("Get all keymaps")]),t._v(" "),e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("keymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getAll")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {id1: {}, id2: {}};")]),t._v("\n")])])]),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(" "),e("h2",{attrs:{id:"remove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),e("p",[t._v("Remove the keymap by id")]),t._v(" "),e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("id")]),t._v(" "),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(" Keymap id")])]),t._v(" "),e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("keymaps"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ns:my-keymap'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> {keys, handler};")]),t._v("\n")])])]),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(" Removed keymap")]),t._v(" "),e("h2",{attrs:{id:"removeall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#removeall"}},[t._v("#")]),t._v(" removeAll")]),t._v(" "),e("p",[t._v("Remove all binded keymaps")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("this")])])])}),[],!1,null,null,null);a.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/31.5286fade.js b/docs/assets/js/31.cd404053.js
similarity index 98%
rename from docs/assets/js/31.5286fade.js
rename to docs/assets/js/31.cd404053.js
index 413259f8d..a2051cd3a 100644
--- a/docs/assets/js/31.5286fade.js
+++ b/docs/assets/js/31.cd404053.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{421:function(t,e,a){"use strict";a.r(e);var r=a(33),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"modal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modal"}},[t._v("#")]),t._v(" Modal")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n modal"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" modal "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Modal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#open"}},[t._v("open")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#close"}},[t._v("close")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#isopen"}},[t._v("isOpen")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#settitle"}},[t._v("setTitle")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#gettitle"}},[t._v("getTitle")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setcontent"}},[t._v("setContent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcontent"}},[t._v("getContent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#onceclose"}},[t._v("onceClose")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#onceopen"}},[t._v("onceOpen")])])]),t._v(" "),a("h2",{attrs:{id:"open"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#open"}},[t._v("#")]),t._v(" open")]),t._v(" "),a("p",[t._v("Open the modal window")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("opts")]),t._v(" "),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")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("opts.content")]),t._v(" "),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._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"close"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#close"}},[t._v("#")]),t._v(" close")]),t._v(" "),a("p",[t._v("Close the modal window")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"onceclose"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onceclose"}},[t._v("#")]),t._v(" onceClose")]),t._v(" "),a("p",[t._v("Execute callback when the modal will be closed.\nThe callback will be called one only time")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("clb")]),t._v(" "),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(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"onceopen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onceopen"}},[t._v("#")]),t._v(" onceOpen")]),t._v(" "),a("p",[t._v("Execute callback when the modal will be opened.\nThe callback will be called one only time")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("clb")]),t._v(" "),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(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"isopen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#isopen"}},[t._v("#")]),t._v(" isOpen")]),t._v(" "),a("p",[t._v("Checks if the modal window is open")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"settitle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#settitle"}},[t._v("#")]),t._v(" setTitle")]),t._v(" "),a("p",[t._v("Set the title to the modal window")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("title")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("modal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTitle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"gettitle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettitle"}},[t._v("#")]),t._v(" getTitle")]),t._v(" "),a("p",[t._v("Returns the title of the modal window")]),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(" "),a("h2",{attrs:{id:"setcontent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcontent"}},[t._v("#")]),t._v(" setContent")]),t._v(" "),a("p",[t._v("Set the content of the modal window")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("content")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("modal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setContent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Some HTML content
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getcontent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontent"}},[t._v("#")]),t._v(" getContent")]),t._v(" "),a("p",[t._v("Get the content of the modal window")]),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)])])])}),[],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{444:function(t,e,a){"use strict";a.r(e);var r=a(42),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"modal"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modal"}},[t._v("#")]),t._v(" Modal")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n modal"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" modal "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Modal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#open"}},[t._v("open")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#close"}},[t._v("close")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#isopen"}},[t._v("isOpen")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#settitle"}},[t._v("setTitle")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#gettitle"}},[t._v("getTitle")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setcontent"}},[t._v("setContent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcontent"}},[t._v("getContent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#onceclose"}},[t._v("onceClose")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#onceopen"}},[t._v("onceOpen")])])]),t._v(" "),a("h2",{attrs:{id:"open"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#open"}},[t._v("#")]),t._v(" open")]),t._v(" "),a("p",[t._v("Open the modal window")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("opts")]),t._v(" "),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")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("opts.content")]),t._v(" "),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._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"close"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#close"}},[t._v("#")]),t._v(" close")]),t._v(" "),a("p",[t._v("Close the modal window")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"onceclose"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onceclose"}},[t._v("#")]),t._v(" onceClose")]),t._v(" "),a("p",[t._v("Execute callback when the modal will be closed.\nThe callback will be called one only time")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("clb")]),t._v(" "),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(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"onceopen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onceopen"}},[t._v("#")]),t._v(" onceOpen")]),t._v(" "),a("p",[t._v("Execute callback when the modal will be opened.\nThe callback will be called one only time")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("clb")]),t._v(" "),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(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"isopen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#isopen"}},[t._v("#")]),t._v(" isOpen")]),t._v(" "),a("p",[t._v("Checks if the modal window is open")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"settitle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#settitle"}},[t._v("#")]),t._v(" setTitle")]),t._v(" "),a("p",[t._v("Set the title to the modal window")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("title")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("modal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setTitle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'New title'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"gettitle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettitle"}},[t._v("#")]),t._v(" getTitle")]),t._v(" "),a("p",[t._v("Returns the title of the modal window")]),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(" "),a("h2",{attrs:{id:"setcontent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcontent"}},[t._v("#")]),t._v(" setContent")]),t._v(" "),a("p",[t._v("Set the content of the modal window")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("content")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("modal"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setContent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Some HTML content
    '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getcontent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontent"}},[t._v("#")]),t._v(" getContent")]),t._v(" "),a("p",[t._v("Get the content of the modal window")]),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)])])])}),[],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/32.0a0e4ae7.js b/docs/assets/js/32.023439b4.js
similarity index 99%
rename from docs/assets/js/32.0a0e4ae7.js
rename to docs/assets/js/32.023439b4.js
index 6308232ba..1dad18206 100644
--- a/docs/assets/js/32.0a0e4ae7.js
+++ b/docs/assets/js/32.023439b4.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{422:function(t,a,s){"use strict";s.r(a);var e=s(33),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"panels"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#panels"}},[t._v("#")]),t._v(" Panels")]),t._v(" "),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n panels"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" panelManager "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Panels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#addpanel"}},[t._v("addPanel")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#addbutton"}},[t._v("addButton")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getbutton"}},[t._v("getButton")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getpanel"}},[t._v("getPanel")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getpanels"}},[t._v("getPanels")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getpanelsel"}},[t._v("getPanelsEl")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#removepanel"}},[t._v("removePanel")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#removebutton"}},[t._v("removeButton")])])]),t._v(" "),s("h2",{attrs:{id:"getpanels"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getpanels"}},[t._v("#")]),t._v(" getPanels")]),t._v(" "),s("p",[t._v("Returns the collection of panels")]),t._v(" "),s("p",[t._v("Returns "),s("strong",[t._v("Collection")]),t._v(" Collection of panel")]),t._v(" "),s("h2",{attrs:{id:"getpanelsel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getpanelsel"}},[t._v("#")]),t._v(" getPanelsEl")]),t._v(" "),s("p",[t._v("Returns panels element")]),t._v(" "),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._v(" "),s("h2",{attrs:{id:"addpanel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#addpanel"}},[t._v("#")]),t._v(" addPanel")]),t._v(" "),s("p",[t._v("Add new panel to the collection")]),t._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panel")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" newPanel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addPanel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visible  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttons  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("Panel")]),t._v(" Added panel. Useful in case passed argument was an Object")]),t._v(" "),s("h2",{attrs:{id:"removepanel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removepanel"}},[t._v("#")]),t._v(" removePanel")]),t._v(" "),s("p",[t._v("Remove a panel from the collection")]),t._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panel")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newPanel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removePanel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visible  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttons  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newPanel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removePanel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("Panel")]),t._v(" Removed panel. Useful in case passed argument was an Object")]),t._v(" "),s("h2",{attrs:{id:"getpanel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getpanel"}},[t._v("#")]),t._v(" getPanel")]),t._v(" "),s("p",[t._v("Get panel by ID")]),t._v(" "),s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myPanel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPanel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("(Panel | null)")])]),t._v(" "),s("h2",{attrs:{id:"addbutton"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#addbutton"}},[t._v("#")]),t._v(" addButton")]),t._v(" "),s("p",[t._v("Add button to the panel")]),t._v(" "),s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panelId")]),t._v(" "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),t._v(" "),s("li",[s("code",[t._v("button")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" newButton "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  className"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someClass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  command"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Some title'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  active"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// It's also possible to pass the command as an object")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// with .run and .stop methods")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\ncommand"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Or simply like a function which will be evaluated as a single .run command")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("command")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("(Button | null)")]),t._v(" Added button. Useful in case passed button was an Object")]),t._v(" "),s("h2",{attrs:{id:"removebutton"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removebutton"}},[t._v("#")]),t._v(" removeButton")]),t._v(" "),s("p",[t._v("Remove button from the panel")]),t._v(" "),s("h3",{attrs:{id:"parameters-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panelId")]),t._v(" "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),t._v(" "),s("li",[s("code",[t._v("button")])]),t._v(" "),s("li",[s("code",[t._v("buttonId")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removedButton "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  className"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someClass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  command"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Some title'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  active"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removedButton "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("(Button | null)")]),t._v(" Removed button.")]),t._v(" "),s("h2",{attrs:{id:"getbutton"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getbutton"}},[t._v("#")]),t._v(" getButton")]),t._v(" "),s("p",[t._v("Get button from the panel")]),t._v(" "),s("h3",{attrs:{id:"parameters-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panelId")]),t._v(" "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),t._v(" "),s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" button "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myButton'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("(Button | null)")])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{447:function(t,a,s){"use strict";s.r(a);var e=s(42),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"panels"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#panels"}},[t._v("#")]),t._v(" Panels")]),t._v(" "),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n panels"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" panelManager "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Panels"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#addpanel"}},[t._v("addPanel")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#addbutton"}},[t._v("addButton")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getbutton"}},[t._v("getButton")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getpanel"}},[t._v("getPanel")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getpanels"}},[t._v("getPanels")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getpanelsel"}},[t._v("getPanelsEl")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#removepanel"}},[t._v("removePanel")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#removebutton"}},[t._v("removeButton")])])]),t._v(" "),s("h2",{attrs:{id:"getpanels"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getpanels"}},[t._v("#")]),t._v(" getPanels")]),t._v(" "),s("p",[t._v("Returns the collection of panels")]),t._v(" "),s("p",[t._v("Returns "),s("strong",[t._v("Collection")]),t._v(" Collection of panel")]),t._v(" "),s("h2",{attrs:{id:"getpanelsel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getpanelsel"}},[t._v("#")]),t._v(" getPanelsEl")]),t._v(" "),s("p",[t._v("Returns panels element")]),t._v(" "),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._v(" "),s("h2",{attrs:{id:"addpanel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#addpanel"}},[t._v("#")]),t._v(" addPanel")]),t._v(" "),s("p",[t._v("Add new panel to the collection")]),t._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panel")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" newPanel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addPanel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visible  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttons  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("Panel")]),t._v(" Added panel. Useful in case passed argument was an Object")]),t._v(" "),s("h2",{attrs:{id:"removepanel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removepanel"}},[t._v("#")]),t._v(" removePanel")]),t._v(" "),s("p",[t._v("Remove a panel from the collection")]),t._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panel")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newPanel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removePanel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n visible  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buttons  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newPanel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removePanel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("Panel")]),t._v(" Removed panel. Useful in case passed argument was an Object")]),t._v(" "),s("h2",{attrs:{id:"getpanel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getpanel"}},[t._v("#")]),t._v(" getPanel")]),t._v(" "),s("p",[t._v("Get panel by ID")]),t._v(" "),s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" myPanel "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getPanel")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("(Panel | null)")])]),t._v(" "),s("h2",{attrs:{id:"addbutton"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#addbutton"}},[t._v("#")]),t._v(" addButton")]),t._v(" "),s("p",[t._v("Add button to the panel")]),t._v(" "),s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panelId")]),t._v(" "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),t._v(" "),s("li",[s("code",[t._v("button")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" newButton "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  className"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someClass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  command"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Some title'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  active"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// It's also possible to pass the command as an object")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// with .run and .stop methods")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\ncommand"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("stop")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Or simply like a function which will be evaluated as a single .run command")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("command")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("editor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("(Button | null)")]),t._v(" Added button. Useful in case passed button was an Object")]),t._v(" "),s("h2",{attrs:{id:"removebutton"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removebutton"}},[t._v("#")]),t._v(" removeButton")]),t._v(" "),s("p",[t._v("Remove button from the panel")]),t._v(" "),s("h3",{attrs:{id:"parameters-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panelId")]),t._v(" "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),t._v(" "),s("li",[s("code",[t._v("button")])]),t._v(" "),s("li",[s("code",[t._v("buttonId")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removedButton "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  id"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  className"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someClass'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  command"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'someCommand'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Some title'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  active"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removedButton "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myNewButton'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("(Button | null)")]),t._v(" Removed button.")]),t._v(" "),s("h2",{attrs:{id:"getbutton"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getbutton"}},[t._v("#")]),t._v(" getButton")]),t._v(" "),s("p",[t._v("Get button from the panel")]),t._v(" "),s("h3",{attrs:{id:"parameters-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("panelId")]),t._v(" "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),s("OutboundLink")],1)]),t._v(" Panel's ID")]),t._v(" "),s("li",[s("code",[t._v("id")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" button "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" panelManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getButton")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myPanel'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'myButton'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("p",[t._v("Returns "),s("strong",[t._v("(Button | null)")])])])}),[],!1,null,null,null);a.default=n.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/33.0ba298a5.js b/docs/assets/js/33.a5b728f9.js
similarity index 99%
rename from docs/assets/js/33.0ba298a5.js
rename to docs/assets/js/33.a5b728f9.js
index aaf048e1f..9dfb12d57 100644
--- a/docs/assets/js/33.0ba298a5.js
+++ b/docs/assets/js/33.a5b728f9.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{425:function(t,a,s){"use strict";s.r(a);var n=s(33),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"richtexteditor"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#richtexteditor"}},[t._v("#")]),t._v(" RichTextEditor")]),t._v(" "),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")]),t._v(" "),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n richTextEditor"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rte "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("RichTextEditor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#remove"}},[t._v("remove")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#gettoolbarel"}},[t._v("getToolbarEl")])])]),t._v(" "),s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),s("p",[t._v("Add a new action to the built-in RTE toolbar")]),t._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("action")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'link'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'t'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Link'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Example on it's easy to wrap a selected content")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insertHTML")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// An example with fontSize")]),t._v("\nrte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fontSize'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('')]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Bind the 'result' on 'change' listener")]),t._v("\n  event"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fontSize'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Callback on any input change (mousedown, keydown, etc..)")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queryCommandValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'false'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// value is a string")]),t._v("\n      action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// An example with state")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("isValidAnchor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// a utility function to help determine if the selected is a valid anchor node")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" anchor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("anchorNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parentNode  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" anchor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" anchor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("parentNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" nextSibling "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" anchor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" anchor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nextSibling"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parentNode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" parentNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nodeName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nextSibling "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" nextSibling"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nodeName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nrte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'toggleAnchor'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('⫘')]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rte "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isValidAnchor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" btnState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ACTIVE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" btnState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INACTIVE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" btnState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INACTIVE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isValidAnchor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unlink'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insertHTML")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),s("p",[t._v("Get the action by its name")]),t._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" action "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'bold', ...}")]),t._v("\n")])])]),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(" "),s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),s("p",[t._v("Get all actions")]),t._v(" "),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._v(" "),s("h2",{attrs:{id:"remove"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),s("p",[t._v("Remove the action from the toolbar")]),t._v(" "),s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" "),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(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" action "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'bold', ...}")]),t._v("\n")])])]),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._v(" "),s("h2",{attrs:{id:"gettoolbarel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#gettoolbarel"}},[t._v("#")]),t._v(" getToolbarEl")]),t._v(" "),s("p",[t._v("Get the toolbar element")]),t._v(" "),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)])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{446:function(t,a,s){"use strict";s.r(a);var n=s(42),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h2",{attrs:{id:"richtexteditor"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#richtexteditor"}},[t._v("#")]),t._v(" RichTextEditor")]),t._v(" "),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")]),t._v(" "),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n richTextEditor"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rte "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("RichTextEditor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#remove"}},[t._v("remove")])]),t._v(" "),s("li",[s("a",{attrs:{href:"#gettoolbarel"}},[t._v("getToolbarEl")])])]),t._v(" "),s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),s("p",[t._v("Add a new action to the built-in RTE toolbar")]),t._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" "),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._v(" "),s("li",[s("code",[t._v("action")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'B'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'link'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" document"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'t'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  attributes"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("title"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Link'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Example on it's easy to wrap a selected content")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insertHTML")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// An example with fontSize")]),t._v("\nrte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fontSize'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('')]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Bind the 'result' on 'change' listener")]),t._v("\n  event"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fontSize'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Callback on any input change (mousedown, keydown, etc..)")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("update")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("doc"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("queryCommandValue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'false'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// value is a string")]),t._v("\n      action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("btn"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("firstChild"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// An example with state")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("isValidAnchor")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// a utility function to help determine if the selected is a valid anchor node")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" anchor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("anchorNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" parentNode  "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" anchor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" anchor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("parentNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" nextSibling "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" anchor "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" anchor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nextSibling"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("parentNode "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" parentNode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nodeName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("nextSibling "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" nextSibling"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("nodeName "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'A'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nrte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'toggleAnchor'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  icon"),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('⫘')]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("state")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" doc")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rte "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `btnState` is a integer, -1 for disabled, 0 for inactive, 1 for active")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isValidAnchor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" btnState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("ACTIVE")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" btnState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INACTIVE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" btnState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token constant"}},[t._v("INACTIVE")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("result")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("isValidAnchor")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("exec")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'unlink'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("else")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("insertHTML")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token template-string"}},[s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v('')]),s("span",{pre:!0,attrs:{class:"token interpolation"}},[s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("selection")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("")]),s("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),s("p",[t._v("Get the action by its name")]),t._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" "),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._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" action "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'bold', ...}")]),t._v("\n")])])]),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(" "),s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),s("p",[t._v("Get all actions")]),t._v(" "),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._v(" "),s("h2",{attrs:{id:"remove"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[t._v("#")]),t._v(" remove")]),t._v(" "),s("p",[t._v("Remove the action from the toolbar")]),t._v(" "),s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),s("ul",[s("li",[s("code",[t._v("name")]),t._v(" "),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(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" action "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" rte"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("remove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'bold'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// {name: 'bold', ...}")]),t._v("\n")])])]),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._v(" "),s("h2",{attrs:{id:"gettoolbarel"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#gettoolbarel"}},[t._v("#")]),t._v(" getToolbarEl")]),t._v(" "),s("p",[t._v("Get the toolbar element")]),t._v(" "),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)])])])}),[],!1,null,null,null);a.default=e.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/34.07640632.js b/docs/assets/js/34.07640632.js
deleted file mode 100644
index d3e7f9171..000000000
--- a/docs/assets/js/34.07640632.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{427:function(t,a,e){"use strict";e.r(a);var s=e(33),r=Object(s.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"selectormanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectormanager"}},[t._v("#")]),t._v(" SelectorManager")]),t._v(" "),e("p",[t._v("Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take\na look at this code:")]),t._v(" "),e("div",{staticClass:"language-css extra-class"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("span > #send-btn.btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ...\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("send-btn"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),e("p",[t._v("In this scenario we get:")]),t._v(" "),e("ul",[e("li",[t._v("span     -> selector of type "),e("code",[t._v("tag")])]),t._v(" "),e("li",[t._v("send-btn -> selector of type "),e("code",[t._v("id")])]),t._v(" "),e("li",[t._v("btn      -> selector of type "),e("code",[t._v("class")])])]),t._v(" "),e("p",[t._v("So, for example, being "),e("code",[t._v("btn")]),t._v(" the same class entity it'll be easier to refactor and track things.")]),t._v(" "),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/selector_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),e("OutboundLink")],1)]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectorManager"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectorManager "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ul",[e("li",[e("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#addclass"}},[t._v("addClass")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#setstate"}},[t._v("setState")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getstate"}},[t._v("getState")])])]),t._v(" "),e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),e("p",[t._v("Get configuration object")]),t._v(" "),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(" "),e("h2",{attrs:{id:"setstate"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstate"}},[t._v("#")]),t._v(" setState")]),t._v(" "),e("p",[t._v("Change the selector state")]),t._v(" "),e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("value")]),t._v(" "),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(" State value")])]),t._v(" "),e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hover'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("this")])]),t._v(" "),e("h2",{attrs:{id:"getstate"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstate"}},[t._v("#")]),t._v(" getState")]),t._v(" "),e("p",[t._v("Get the current selector state")]),t._v(" "),e("p",[t._v("Returns "),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(" "),e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),e("p",[t._v("Add a new selector to collection if it's not already exists. Class type is a default one")]),t._v(" "),e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("name")]),t._v(" "),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/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(")")]),t._v(" Selector/s name")]),t._v(" "),e("li",[e("code",[t._v("opts")]),t._v(" "),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(" Selector options (optional, default "),e("code",[t._v("{}")]),t._v(")\n"),e("ul",[e("li",[e("code",[t._v("opts.label")]),t._v(" "),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(" Label for the selector, if it's not provided the label will be the same as the name (optional, default "),e("code",[t._v("''")]),t._v(")")]),t._v(" "),e("li",[e("code",[t._v("opts.type")]),t._v(" "),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 of the selector. At the moment, only 'class' (1) is available (optional, default "),e("code",[t._v("1")]),t._v(")")])])])]),t._v(" "),e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Same as")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  label"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Multiple selectors")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class2'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#id1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("(Model | "),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(")")])]),t._v(" "),e("h2",{attrs:{id:"addclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addclass"}},[t._v("#")]),t._v(" addClass")]),t._v(" "),e("p",[t._v("Add class selectors")]),t._v(" "),e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("classes")]),t._v(" "),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(" | "),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._v(" "),e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("sm"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])]),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)]),t._v(" Array of added selectors")]),t._v(" "),e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),e("p",[t._v("Get the selector by its name")]),t._v(" "),e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("name")]),t._v(" "),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/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(")")]),t._v(" Selector name")]),t._v(" "),e("li",[e("code",[t._v("type")]),t._v(" "),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(" Selector type")])]),t._v(" "),e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// or get an array")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("(Model | "),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(")")])]),t._v(" "),e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),e("p",[t._v("Get all selectors")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("Collection")])]),t._v(" "),e("h2",{attrs:{id:"escapename"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#escapename"}},[t._v("#")]),t._v(" escapeName")]),t._v(" "),e("p",[t._v("Return escaped selector name")]),t._v(" "),e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("name")]),t._v(" "),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(" Selector name to escape")])]),t._v(" "),e("p",[t._v("Returns "),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(" Escaped name")])])}),[],!1,null,null,null);a.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/34.9ff2c896.js b/docs/assets/js/34.9ff2c896.js
new file mode 100644
index 000000000..b3b6feeda
--- /dev/null
+++ b/docs/assets/js/34.9ff2c896.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{449:function(t,a,e){"use strict";e.r(a);var s=e(42),r=Object(s.a)({},(function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[e("h2",{attrs:{id:"selectormanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectormanager"}},[t._v("#")]),t._v(" SelectorManager")]),t._v(" "),e("p",[t._v("Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To illustrate this concept let's take\na look at this code:")]),t._v(" "),e("div",{staticClass:"language-css extra-class"},[e("pre",{pre:!0,attrs:{class:"language-css"}},[e("code",[e("span",{pre:!0,attrs:{class:"token selector"}},[t._v("span > #send-btn.btn")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n ...\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),e("div",{staticClass:"language-html extra-class"},[e("pre",{pre:!0,attrs:{class:"language-html"}},[e("code",[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("send-btn"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),e("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),e("span",{pre:!0,attrs:{class:"token attr-value"}},[e("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token tag"}},[e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),e("p",[t._v("In this scenario we get:")]),t._v(" "),e("ul",[e("li",[t._v("span     -> selector of type "),e("code",[t._v("tag")])]),t._v(" "),e("li",[t._v("send-btn -> selector of type "),e("code",[t._v("id")])]),t._v(" "),e("li",[t._v("btn      -> selector of type "),e("code",[t._v("class")])])]),t._v(" "),e("p",[t._v("So, for example, being "),e("code",[t._v("btn")]),t._v(" the same class entity it'll be easier to refactor and track things.")]),t._v(" "),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/selector_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),e("OutboundLink")],1)]),t._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectorManager"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectorManager "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("ul",[e("li",[e("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#addclass"}},[t._v("addClass")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#setstate"}},[t._v("setState")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getstate"}},[t._v("getState")])])]),t._v(" "),e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),e("p",[t._v("Get configuration object")]),t._v(" "),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(" "),e("h2",{attrs:{id:"setstate"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstate"}},[t._v("#")]),t._v(" setState")]),t._v(" "),e("p",[t._v("Change the selector state")]),t._v(" "),e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("value")]),t._v(" "),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(" State value")])]),t._v(" "),e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hover'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("this")])]),t._v(" "),e("h2",{attrs:{id:"getstate"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstate"}},[t._v("#")]),t._v(" getState")]),t._v(" "),e("p",[t._v("Get the current selector state")]),t._v(" "),e("p",[t._v("Returns "),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(" "),e("h2",{attrs:{id:"add"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),e("p",[t._v("Add a new selector to collection if it's not already exists. Class type is a default one")]),t._v(" "),e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("name")]),t._v(" "),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/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(")")]),t._v(" Selector/s name")]),t._v(" "),e("li",[e("code",[t._v("opts")]),t._v(" "),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(" Selector options (optional, default "),e("code",[t._v("{}")]),t._v(")\n"),e("ul",[e("li",[e("code",[t._v("opts.label")]),t._v(" "),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(" Label for the selector, if it's not provided the label will be the same as the name (optional, default "),e("code",[t._v("''")]),t._v(")")]),t._v(" "),e("li",[e("code",[t._v("opts.type")]),t._v(" "),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 of the selector. At the moment, only 'class' (1) is available (optional, default "),e("code",[t._v("1")]),t._v(")")])])])]),t._v(" "),e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Same as")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  type"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  label"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Multiple selectors")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.class2'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#id1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("(Model | "),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(")")])]),t._v(" "),e("h2",{attrs:{id:"addclass"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addclass"}},[t._v("#")]),t._v(" addClass")]),t._v(" "),e("p",[t._v("Add class selectors")]),t._v(" "),e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("classes")]),t._v(" "),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(" | "),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._v(" "),e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("sm"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1 class2'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("addClass")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])]),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)]),t._v(" Array of added selectors")]),t._v(" "),e("h2",{attrs:{id:"get"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),e("p",[t._v("Get the selector by its name")]),t._v(" "),e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("name")]),t._v(" "),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/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(")")]),t._v(" Selector name")]),t._v(" "),e("li",[e("code",[t._v("type")]),t._v(" "),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(" Selector type")])]),t._v(" "),e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'selectorName'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// or get an array")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("get")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class1'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'class2'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("(Model | "),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(")")])]),t._v(" "),e("h2",{attrs:{id:"getall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getall"}},[t._v("#")]),t._v(" getAll")]),t._v(" "),e("p",[t._v("Get all selectors")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("Collection")])]),t._v(" "),e("h2",{attrs:{id:"escapename"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#escapename"}},[t._v("#")]),t._v(" escapeName")]),t._v(" "),e("p",[t._v("Return escaped selector name")]),t._v(" "),e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),e("ul",[e("li",[e("code",[t._v("name")]),t._v(" "),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(" Selector name to escape")])]),t._v(" "),e("p",[t._v("Returns "),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(" Escaped name")])])}),[],!1,null,null,null);a.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/35.061f6dd5.js b/docs/assets/js/35.628f4c41.js
similarity index 99%
rename from docs/assets/js/35.061f6dd5.js
rename to docs/assets/js/35.628f4c41.js
index 2de07f041..b627dcf3f 100644
--- a/docs/assets/js/35.061f6dd5.js
+++ b/docs/assets/js/35.628f4c41.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{426:function(t,e,a){"use strict";a.r(e);var s=a(33),r=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"storagemanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#storagemanager"}},[t._v("#")]),t._v(" StorageManager")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storageManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StorageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#isautosave"}},[t._v("isAutosave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setautosave"}},[t._v("setAutosave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getstepsbeforesave"}},[t._v("getStepsBeforeSave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setstepsbeforesave"}},[t._v("setStepsBeforeSave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setstepsbeforesave"}},[t._v("setStepsBeforeSave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getstorages"}},[t._v("getStorages")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcurrent"}},[t._v("getCurrent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcurrentstorage"}},[t._v("getCurrentStorage")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setcurrent"}},[t._v("setCurrent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get configuration object")]),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(" "),a("h2",{attrs:{id:"isautosave"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#isautosave"}},[t._v("#")]),t._v(" isAutosave")]),t._v(" "),a("p",[t._v("Checks if autosave is enabled")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"setautosave"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setautosave"}},[t._v("#")]),t._v(" setAutosave")]),t._v(" "),a("p",[t._v("Set autosave value")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("v")]),t._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._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getstepsbeforesave"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstepsbeforesave"}},[t._v("#")]),t._v(" getStepsBeforeSave")]),t._v(" "),a("p",[t._v("Returns number of steps required before trigger autosave")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"setstepsbeforesave"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setstepsbeforesave"}},[t._v("#")]),t._v(" setStepsBeforeSave")]),t._v(" "),a("p",[t._v("Set steps required before trigger autosave")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("v")]),t._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._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),a("p",[t._v("Add new storage")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("li",[a("code",[t._v("storage")]),t._v(" "),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")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("storage.store")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'local2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbErr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" res "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" len "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" len"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" localStorage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clb")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// might be called inside some async method")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In case of errors...")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// clbErr('Went something wrong');")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbErr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" key "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      localStorage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clb")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// might be called inside some async method")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),a("p",[t._v("Returns storage by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),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._v(" "),a("h2",{attrs:{id:"getstorages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstorages"}},[t._v("#")]),t._v(" getStorages")]),t._v(" "),a("p",[t._v("Returns all storages")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"getcurrent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcurrent"}},[t._v("#")]),t._v(" getCurrent")]),t._v(" "),a("p",[t._v("Returns current storage type")]),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(" "),a("h2",{attrs:{id:"setcurrent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcurrent"}},[t._v("#")]),t._v(" setCurrent")]),t._v(" "),a("p",[t._v("Set current storage type")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" store")]),t._v(" "),a("p",[t._v("Store key-value resources in the current storage")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("data")]),t._v(" "),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}")]),t._v(" "),a("li",[a("code",[t._v("clb")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("item1"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" value1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" item2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" value2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[t._v("#")]),t._v(" load")]),t._v(" "),a("p",[t._v("Load resource from the current storage by keys")]),t._v(" "),a("h3",{attrs:{id:"parameters-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("keys")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("clb")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// res -> {item1: value1, item2: value2}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nstorageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// res -> {item1: value1}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"getcurrentstorage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcurrentstorage"}},[t._v("#")]),t._v(" getCurrentStorage")]),t._v(" "),a("p",[t._v("Get current storage")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Storage")])])])}),[],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{448:function(t,e,a){"use strict";a.r(e);var s=a(42),r=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"storagemanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#storagemanager"}},[t._v("#")]),t._v(" StorageManager")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n storageManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" storageManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StorageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#isautosave"}},[t._v("isAutosave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setautosave"}},[t._v("setAutosave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getstepsbeforesave"}},[t._v("getStepsBeforeSave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setstepsbeforesave"}},[t._v("setStepsBeforeSave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setstepsbeforesave"}},[t._v("setStepsBeforeSave")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getstorages"}},[t._v("getStorages")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcurrent"}},[t._v("getCurrent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getcurrentstorage"}},[t._v("getCurrentStorage")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#setcurrent"}},[t._v("setCurrent")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get configuration object")]),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(" "),a("h2",{attrs:{id:"isautosave"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#isautosave"}},[t._v("#")]),t._v(" isAutosave")]),t._v(" "),a("p",[t._v("Checks if autosave is enabled")]),t._v(" "),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._v(" "),a("h2",{attrs:{id:"setautosave"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setautosave"}},[t._v("#")]),t._v(" setAutosave")]),t._v(" "),a("p",[t._v("Set autosave value")]),t._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("v")]),t._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._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"getstepsbeforesave"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstepsbeforesave"}},[t._v("#")]),t._v(" getStepsBeforeSave")]),t._v(" "),a("p",[t._v("Returns number of steps required before trigger autosave")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"setstepsbeforesave"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setstepsbeforesave"}},[t._v("#")]),t._v(" setStepsBeforeSave")]),t._v(" "),a("p",[t._v("Set steps required before trigger autosave")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("v")]),t._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._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[t._v("#")]),t._v(" add")]),t._v(" "),a("p",[t._v("Add new storage")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("li",[a("code",[t._v("storage")]),t._v(" "),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")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("storage.store")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'local2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbErr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" res "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" len "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("length"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" len"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" i"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("++")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" v "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" localStorage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getItem")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n      "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("keys"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("i"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clb")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("res"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// might be called inside some async method")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In case of errors...")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// clbErr('Went something wrong');")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clb"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" clbErr")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" key "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("in")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n      localStorage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setItem")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("clb")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// might be called inside some async method")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get"}},[t._v("#")]),t._v(" get")]),t._v(" "),a("p",[t._v("Returns storage by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),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._v(" "),a("h2",{attrs:{id:"getstorages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getstorages"}},[t._v("#")]),t._v(" getStorages")]),t._v(" "),a("p",[t._v("Returns all storages")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"getcurrent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcurrent"}},[t._v("#")]),t._v(" getCurrent")]),t._v(" "),a("p",[t._v("Returns current storage type")]),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(" "),a("h2",{attrs:{id:"setcurrent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setcurrent"}},[t._v("#")]),t._v(" setCurrent")]),t._v(" "),a("p",[t._v("Set current storage type")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"store"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store"}},[t._v("#")]),t._v(" store")]),t._v(" "),a("p",[t._v("Store key-value resources in the current storage")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("data")]),t._v(" "),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}")]),t._v(" "),a("li",[a("code",[t._v("clb")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("store")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("item1"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" value1"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" item2"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" value2"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),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._v(" "),a("h2",{attrs:{id:"load"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#load"}},[t._v("#")]),t._v(" load")]),t._v(" "),a("p",[t._v("Load resource from the current storage by keys")]),t._v(" "),a("h3",{attrs:{id:"parameters-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("keys")]),t._v(" "),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")]),t._v(" "),a("li",[a("code",[t._v("clb")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("storageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// res -> {item1: value1, item2: value2}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nstorageManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("load")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'item1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("res")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// res -> {item1: value1}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"getcurrentstorage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcurrentstorage"}},[t._v("#")]),t._v(" getCurrentStorage")]),t._v(" "),a("p",[t._v("Get current storage")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Storage")])])])}),[],!1,null,null,null);e.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/36.63462982.js b/docs/assets/js/36.63462982.js
deleted file mode 100644
index 7f06cc30e..000000000
--- a/docs/assets/js/36.63462982.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{428:function(t,e,r){"use strict";r.r(e);var a=r(33),s=Object(a.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h2",{attrs:{id:"stylemanager"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#stylemanager"}},[t._v("#")]),t._v(" StyleManager")]),t._v(" "),r("p",[t._v("With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),r("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),r("OutboundLink")],1)]),t._v(" "),r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n styleManager"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),r("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._v(" "),r("div",{staticClass:"language-js extra-class"},[r("pre",{pre:!0,attrs:{class:"language-js"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" styleManager "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StyleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),r("ul",[r("li",[r("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#addsector"}},[t._v("addSector")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#getsector"}},[t._v("getSector")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#removesector"}},[t._v("removeSector")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#getsectors"}},[t._v("getSectors")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#addproperty"}},[t._v("addProperty")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#getproperty"}},[t._v("getProperty")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#removeproperty"}},[t._v("removeProperty")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#getproperties"}},[t._v("getProperties")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#getmodeltostyle"}},[t._v("getModelToStyle")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),t._v(" "),r("li",[r("a",{attrs:{href:"#createtype"}},[t._v("createType")])])]),t._v(" "),r("h2",{attrs:{id:"getconfig"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),r("p",[t._v("Get configuration object")]),t._v(" "),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)])]),t._v(" "),r("h2",{attrs:{id:"addsector"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#addsector"}},[t._v("#")]),t._v(" addSector")]),t._v(" "),r("p",[t._v("Add new sector to the collection. If the sector with the same id already exists,\nthat one will be returned")]),t._v(" "),r("h3",{attrs:{id:"parameters"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("id")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),t._v(" "),r("li",[r("code",[t._v("sector")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Object representing sector\n"),r("ul",[r("li",[r("code",[t._v("sector.name")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector's label (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("sector.open")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),r("OutboundLink")],1)]),t._v(" Indicates if the sector should be opened (optional, default "),r("code",[t._v("true")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("sector.properties")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1),t._v(">")]),t._v(" Array of properties (optional, default "),r("code",[t._v("[]")]),t._v(")")])])]),t._v(" "),r("li",[r("code",[t._v("opts")]),t._v("   (optional, default "),r("code",[t._v("{}")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("options")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Options (optional, default "),r("code",[t._v("{}")]),t._v(")")])]),t._v(" "),r("h3",{attrs:{id:"examples"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("addSector")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My sector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  open"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  properties"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My property'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With `at: 0` we place the new sector at the beginning of the collection")]),t._v("\n")])])]),r("p",[t._v("Returns "),r("strong",[t._v("Sector")]),t._v(" Added Sector")]),t._v(" "),r("h2",{attrs:{id:"getsector"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getsector"}},[t._v("#")]),t._v(" getSector")]),t._v(" "),r("p",[t._v("Get sector by id")]),t._v(" "),r("h3",{attrs:{id:"parameters-2"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("id")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),t._v(" "),r("li",[r("code",[t._v("opts")]),t._v("   (optional, default "),r("code",[t._v("{}")]),t._v(")")])]),t._v(" "),r("h3",{attrs:{id:"examples-2"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("getSector")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),r("p",[t._v("Returns "),r("strong",[t._v("(Sector | null)")])]),t._v(" "),r("h2",{attrs:{id:"removesector"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#removesector"}},[t._v("#")]),t._v(" removeSector")]),t._v(" "),r("p",[t._v("Remove a sector by id")]),t._v(" "),r("h3",{attrs:{id:"parameters-3"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("id")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")])]),t._v(" "),r("h3",{attrs:{id:"examples-3"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removed "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeSector")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),r("p",[t._v("Returns "),r("strong",[t._v("Sector")]),t._v(" Removed sector")]),t._v(" "),r("h2",{attrs:{id:"getsectors"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getsectors"}},[t._v("#")]),t._v(" getSectors")]),t._v(" "),r("p",[t._v("Get all sectors")]),t._v(" "),r("p",[t._v("Returns "),r("strong",[t._v("Sectors")]),t._v(" Collection of sectors")]),t._v(" "),r("h2",{attrs:{id:"addproperty"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#addproperty"}},[t._v("#")]),t._v(" addProperty")]),t._v(" "),r("p",[t._v("Add property to the sector identified by id")]),t._v(" "),r("h3",{attrs:{id:"parameters-4"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("sectorId")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),t._v(" "),r("li",[r("code",[t._v("property")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Property object\n"),r("ul",[r("li",[r("code",[t._v("property.name")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Name of the property (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.property")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" CSS property, eg. "),r("code",[t._v("min-height")]),t._v(" (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.type")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Type of the property: integer | radio | select | color | file | composite | stack (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.units")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1),t._v(">")]),t._v(" Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default "),r("code",[t._v("[]")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.unit")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Default selected unit from "),r("code",[t._v("units")]),t._v(". Only for integer type (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.min")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),r("OutboundLink")],1)]),t._v(" Min possible value. Only for integer type (optional, default "),r("code",[t._v("null")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.max")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),r("OutboundLink")],1)]),t._v(" Max possible value. Only for integer type (optional, default "),r("code",[t._v("null")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.defaults")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Default value (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.info")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Some description (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.icon")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Class name. If exists no text will be displayed (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.preview")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),r("OutboundLink")],1)]),t._v(" Show layers preview. Only for stack type (optional, default "),r("code",[t._v("false")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.functionName")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Indicates if value need to be wrapped in some function, for istance "),r("code",[t._v("transform: rotate(90deg)")]),t._v(" (optional, default "),r("code",[t._v("''")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.properties")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1),t._v(">")]),t._v(" Nested properties for composite and stack type (optional, default "),r("code",[t._v("[]")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.layers")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1),t._v(">")]),t._v(" Layers for stack properties (optional, default "),r("code",[t._v("[]")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("property.list")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1),t._v("<"),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1),t._v(">")]),t._v(" List of possible options for radio and select types (optional, default "),r("code",[t._v("[]")]),t._v(")")])])]),t._v(" "),r("li",[r("code",[t._v("opts")]),t._v("   (optional, default "),r("code",[t._v("{}")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("options")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Options (optional, default "),r("code",[t._v("{}")]),t._v(")")])]),t._v(" "),r("h3",{attrs:{id:"examples-4"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("addProperty")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Minimum height'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  property"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  type"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  defaults"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  list"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    value"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    name"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     value"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200px'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     name"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With `at: 0` we place the new property at the beginning of the collection")]),t._v("\n")])])]),r("p",[t._v("Returns "),r("strong",[t._v("(Property | null)")]),t._v(" Added Property or "),r("code",[t._v("null")]),t._v(" in case sector doesn't exist")]),t._v(" "),r("h2",{attrs:{id:"getproperty"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getproperty"}},[t._v("#")]),t._v(" getProperty")]),t._v(" "),r("p",[t._v("Get property by its CSS name and sector id")]),t._v(" "),r("h3",{attrs:{id:"parameters-5"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("sectorId")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),t._v(" "),r("li",[r("code",[t._v("name")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._v(" "),r("h3",{attrs:{id:"examples-5"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProperty")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),r("p",[t._v("Returns "),r("strong",[t._v("(Property | null)")])]),t._v(" "),r("h2",{attrs:{id:"removeproperty"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#removeproperty"}},[t._v("#")]),t._v(" removeProperty")]),t._v(" "),r("p",[t._v("Remove a property from the sector")]),t._v(" "),r("h3",{attrs:{id:"parameters-6"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("sectorId")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")]),t._v(" "),r("li",[r("code",[t._v("name")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" CSS property name, eg. 'min-height'")])]),t._v(" "),r("h3",{attrs:{id:"examples-6"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" property "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeProperty")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),r("p",[t._v("Returns "),r("strong",[t._v("Property")]),t._v(" Removed property")]),t._v(" "),r("h2",{attrs:{id:"getproperties"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getproperties"}},[t._v("#")]),t._v(" getProperties")]),t._v(" "),r("p",[t._v("Get properties of the sector")]),t._v(" "),r("h3",{attrs:{id:"parameters-7"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("sectorId")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Sector id")])]),t._v(" "),r("h3",{attrs:{id:"examples-7"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" properties "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProperties")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),r("p",[t._v("Returns "),r("strong",[t._v("Properties")]),t._v(" Collection of properties")]),t._v(" "),r("h2",{attrs:{id:"getmodeltostyle"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getmodeltostyle"}},[t._v("#")]),t._v(" getModelToStyle")]),t._v(" "),r("p",[t._v("Get what to style inside Style Manager. If you select the component\nwithout classes the entity is the Component itself and all changes will\ngo inside its 'style' property. Otherwise, if the selected component has\none or more classes, the function will return the corresponding CSS Rule")]),t._v(" "),r("h3",{attrs:{id:"parameters-8"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("model")]),t._v(" "),r("strong",[t._v("Model")])]),t._v(" "),r("li",[r("code",[t._v("options")]),t._v("   (optional, default "),r("code",[t._v("{}")]),t._v(")")])]),t._v(" "),r("p",[t._v("Returns "),r("strong",[t._v("Model")])]),t._v(" "),r("h2",{attrs:{id:"addtype"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#addtype"}},[t._v("#")]),t._v(" addType")]),t._v(" "),r("p",[t._v("Add new property type")]),t._v(" "),r("h3",{attrs:{id:"parameters-9"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("id")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Type ID")]),t._v(" "),r("li",[r("code",[t._v("definition")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Definition of the type. Each definition contains\n"),r("code",[t._v("model")]),t._v(" (business logic), "),r("code",[t._v("view")]),t._v(" (presentation logic)\nand "),r("code",[t._v("isType")]),t._v(" function which recognize the type of the\npassed entity")])]),t._v(" "),r("h3",{attrs:{id:"examples-8"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples-8"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[t._v("styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("addType")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-type'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),r("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("isType")]),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" value"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-type'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" value"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),r("h2",{attrs:{id:"gettype"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#gettype"}},[t._v("#")]),t._v(" getType")]),t._v(" "),r("p",[t._v("Get type")]),t._v(" "),r("h3",{attrs:{id:"parameters-10"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("id")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Type ID")])]),t._v(" "),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Type definition")]),t._v(" "),r("h2",{attrs:{id:"gettypes"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#gettypes"}},[t._v("#")]),t._v(" getTypes")]),t._v(" "),r("p",[t._v("Get all types")]),t._v(" "),r("p",[t._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),r("OutboundLink")],1)])]),t._v(" "),r("h2",{attrs:{id:"createtype"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#createtype"}},[t._v("#")]),t._v(" createType")]),t._v(" "),r("p",[t._v("Create new property from type")]),t._v(" "),r("h3",{attrs:{id:"parameters-11"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("id")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),r("OutboundLink")],1)]),t._v(" Type ID")]),t._v(" "),r("li",[r("code",[t._v("options")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Options (optional, default "),r("code",[t._v("{}")]),t._v(")\n"),r("ul",[r("li",[r("code",[t._v("options.model")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Custom model object (optional, default "),r("code",[t._v("{}")]),t._v(")")]),t._v(" "),r("li",[r("code",[t._v("options.view")]),t._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),r("OutboundLink")],1)]),t._v(" Custom view object (optional, default "),r("code",[t._v("{}")]),t._v(")")])])])]),t._v(" "),r("h3",{attrs:{id:"examples-9"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#examples-9"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),r("div",{staticClass:"language-javascript extra-class"},[r("pre",{pre:!0,attrs:{class:"language-javascript"}},[r("code",[r("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" propView "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("createType")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("units"),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'rem'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),r("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change:value'")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),r("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsomeContainer"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),r("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendChild")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("propView"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),r("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),r("p",[t._v("Returns "),r("strong",[t._v("PropertyView")])]),t._v(" "),r("h2",{attrs:{id:"settarget"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#settarget"}},[t._v("#")]),t._v(" setTarget")]),t._v(" "),r("p",[t._v("Select different target for the Style Manager.\nIt could be a Component, CSSRule, or a string of any CSS selector")]),t._v(" "),r("h3",{attrs:{id:"parameters-12"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),r("ul",[r("li",[r("code",[t._v("target")]),t._v(" "),r("strong",[t._v("(Component | CSSRule | "),r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),r("OutboundLink")],1),t._v(")")])]),t._v(" "),r("li",[r("code",[t._v("opts")])])]),t._v(" "),r("p",[t._v("Returns "),r("strong",[t._v("Styleable")]),t._v(" A Component or CSSRule")])])}),[],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/36.70c7e6cb.js b/docs/assets/js/36.70c7e6cb.js
new file mode 100644
index 000000000..13bdeed80
--- /dev/null
+++ b/docs/assets/js/36.70c7e6cb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{427:function(t,e,a){"use strict";a.r(e);var r=a(42),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h2",{attrs:{id:"stylemanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#stylemanager"}},[t._v("#")]),t._v(" StyleManager")]),t._v(" "),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n styleManager"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),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._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" styleManager "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("StyleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#addsector"}},[t._v("addSector")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getsector"}},[t._v("getSector")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#removesector"}},[t._v("removeSector")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getsectors"}},[t._v("getSectors")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#addproperty"}},[t._v("addProperty")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getproperty"}},[t._v("getProperty")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#removeproperty"}},[t._v("removeProperty")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getproperties"}},[t._v("getProperties")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#getmodeltostyle"}},[t._v("getModelToStyle")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#addtype"}},[t._v("addType")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#gettype"}},[t._v("getType")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#gettypes"}},[t._v("getTypes")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#createtype"}},[t._v("createType")])])]),t._v(" "),a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[t._v("#")]),t._v(" getConfig")]),t._v(" "),a("p",[t._v("Get configuration object")]),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(" "),a("h2",{attrs:{id:"addsector"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addsector"}},[t._v("#")]),t._v(" addSector")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("li",[a("code",[t._v("sector")]),t._v(" "),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")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("sector.open")]),t._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._v(" Indicates if the sector should be opened (optional, default "),a("code",[t._v("true")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("sector.properties")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("options")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addSector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My sector'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  open"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  properties"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'My property'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With `at: 0` we place the new sector at the beginning of the collection")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Sector")]),t._v(" Added Sector")]),t._v(" "),a("h2",{attrs:{id:"getsector"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getsector"}},[t._v("#")]),t._v(" getSector")]),t._v(" "),a("p",[t._v("Get sector by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sector "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getSector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("(Sector | null)")])]),t._v(" "),a("h2",{attrs:{id:"removesector"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removesector"}},[t._v("#")]),t._v(" removeSector")]),t._v(" "),a("p",[t._v("Remove a sector by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" removed "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeSector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Sector")]),t._v(" Removed sector")]),t._v(" "),a("h2",{attrs:{id:"getsectors"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getsectors"}},[t._v("#")]),t._v(" getSectors")]),t._v(" "),a("p",[t._v("Get all sectors")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Sectors")]),t._v(" Collection of sectors")]),t._v(" "),a("h2",{attrs:{id:"addproperty"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addproperty"}},[t._v("#")]),t._v(" addProperty")]),t._v(" "),a("p",[t._v("Add property to the sector identified by id")]),t._v(" "),a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("sectorId")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("li",[a("code",[t._v("property")]),t._v(" "),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")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("property.property")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("property.type")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("property.units")]),t._v(" "),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(")")]),t._v(" "),a("li",[a("code",[t._v("property.unit")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("property.min")]),t._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._v(" Min possible value. Only for integer type (optional, default "),a("code",[t._v("null")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("property.max")]),t._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._v(" Max possible value. Only for integer type (optional, default "),a("code",[t._v("null")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("property.defaults")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("property.info")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("property.icon")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("property.preview")]),t._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._v(" Show layers preview. Only for stack type (optional, default "),a("code",[t._v("false")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("property.functionName")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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(")")]),t._v(" "),a("li",[a("code",[t._v("property.properties")]),t._v(" "),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(")")]),t._v(" "),a("li",[a("code",[t._v("property.layers")]),t._v(" "),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(")")]),t._v(" "),a("li",[a("code",[t._v("property.list")]),t._v(" "),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._v(" "),a("li",[a("code",[t._v("opts")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("options")]),t._v(" "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addProperty")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Minimum height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  property"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  type"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  defaults"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  list"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'100'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     value"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n     name"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'200'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" at"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// With `at: 0` we place the new property at the beginning of the collection")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("(Property | null)")]),t._v(" Added Property or "),a("code",[t._v("null")]),t._v(" in case sector doesn't exist")]),t._v(" "),a("h2",{attrs:{id:"getproperty"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getproperty"}},[t._v("#")]),t._v(" getProperty")]),t._v(" "),a("p",[t._v("Get property by its CSS name and sector id")]),t._v(" "),a("h3",{attrs:{id:"parameters-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("sectorId")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("li",[a("code",[t._v("name")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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 (or id), eg. 'min-height'")])]),t._v(" "),a("h3",{attrs:{id:"examples-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" property "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProperty")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("(Property | null)")])]),t._v(" "),a("h2",{attrs:{id:"removeproperty"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removeproperty"}},[t._v("#")]),t._v(" removeProperty")]),t._v(" "),a("p",[t._v("Remove a property from the sector")]),t._v(" "),a("h3",{attrs:{id:"parameters-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("sectorId")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("li",[a("code",[t._v("name")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" property "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("removeProperty")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Property")]),t._v(" Removed property")]),t._v(" "),a("h2",{attrs:{id:"getproperties"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getproperties"}},[t._v("#")]),t._v(" getProperties")]),t._v(" "),a("p",[t._v("Get properties of the sector")]),t._v(" "),a("h3",{attrs:{id:"parameters-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("sectorId")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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._v(" "),a("h3",{attrs:{id:"examples-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" properties "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getProperties")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mySector'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("Properties")]),t._v(" Collection of properties")]),t._v(" "),a("h2",{attrs:{id:"getmodeltostyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getmodeltostyle"}},[t._v("#")]),t._v(" getModelToStyle")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"parameters-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("model")]),t._v(" "),a("strong",[t._v("Model")])]),t._v(" "),a("li",[a("code",[t._v("options")]),t._v("   (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Model")])]),t._v(" "),a("h2",{attrs:{id:"addtype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addtype"}},[t._v("#")]),t._v(" addType")]),t._v(" "),a("p",[t._v("Add new property type")]),t._v(" "),a("h3",{attrs:{id:"parameters-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("definition")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-8"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-custom-prop'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("create")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" change "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" el "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createElement")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'div'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n     el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerHTML "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" inputEl "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.my-input'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n     inputEl"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEventListener")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("change")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" event "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// change will trigger the emit")]),t._v("\n     inputEl"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("addEventListener")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'input'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("event")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("change")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" complete"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("emit")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" updateStyle "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" complete "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("target"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" valueRes "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Pass a string value for the exact CSS property or an object containing multiple properties")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// eg. updateStyle({ [props.property]: valueRes, color: 'red' });")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("updateStyle")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("valueRes"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" complete "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("update")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" el "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'.my-input'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("value "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("parseInt")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("destroy")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h2",{attrs:{id:"gettype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettype"}},[t._v("#")]),t._v(" getType")]),t._v(" "),a("p",[t._v("Get type")]),t._v(" "),a("h3",{attrs:{id:"parameters-10"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")])]),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(" Type definition")]),t._v(" "),a("h2",{attrs:{id:"gettypes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gettypes"}},[t._v("#")]),t._v(" getTypes")]),t._v(" "),a("p",[t._v("Get all types")]),t._v(" "),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"createtype"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#createtype"}},[t._v("#")]),t._v(" createType")]),t._v(" "),a("p",[t._v("Create new property from type")]),t._v(" "),a("h3",{attrs:{id:"parameters-11"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("id")]),t._v(" "),a("strong",[a("a",{attrs:{href:"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")]),t._v(" "),a("li",[a("code",[t._v("options")]),t._v(" "),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")]),t._v(" "),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(")")]),t._v(" "),a("li",[a("code",[t._v("options.view")]),t._v(" "),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._v(" "),a("h3",{attrs:{id:"examples-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-9"}},[t._v("#")]),t._v(" Examples")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" propView "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" styleManager"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'integer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("units"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'px'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'rem'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\npropView"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("on")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change:value'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsomeContainer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("appendChild")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("propView"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Returns "),a("strong",[t._v("PropertyView")])]),t._v(" "),a("h2",{attrs:{id:"settarget"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#settarget"}},[t._v("#")]),t._v(" setTarget")]),t._v(" "),a("p",[t._v("Select different target for the Style Manager.\nIt could be a Component, CSSRule, or a string of any CSS selector")]),t._v(" "),a("h3",{attrs:{id:"parameters-12"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("target")]),t._v(" "),a("strong",[t._v("(Component | CSSRule | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(")")])]),t._v(" "),a("li",[a("code",[t._v("opts")])])]),t._v(" "),a("p",[t._v("Returns "),a("strong",[t._v("Styleable")]),t._v(" A Component or CSSRule")])])}),[],!1,null,null,null);e.default=s.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/37.e2d50838.js b/docs/assets/js/37.226975c7.js
similarity index 99%
rename from docs/assets/js/37.e2d50838.js
rename to docs/assets/js/37.226975c7.js
index b61d9e6c6..3499f7f47 100644
--- a/docs/assets/js/37.e2d50838.js
+++ b/docs/assets/js/37.226975c7.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{407:function(a,t,s){"use strict";s.r(t);var e=s(33),r=Object(e.a)({},(function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":a.$parent.slotKey}},[s("h2",{attrs:{id:"undomanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undomanager"}},[a._v("#")]),a._v(" UndoManager")]),a._v(" "),s("p",[a._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")]),a._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("const")]),a._v(" um "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=")]),a._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),a._v("UndoManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#getconfig"}},[a._v("getConfig")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#add"}},[a._v("add")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#remove"}},[a._v("remove")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#removeall"}},[a._v("removeAll")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#start"}},[a._v("start")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#stop"}},[a._v("stop")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#undo"}},[a._v("undo")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#undoall"}},[a._v("undoAll")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#redo"}},[a._v("redo")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#redoall"}},[a._v("redoAll")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#hasundo"}},[a._v("hasUndo")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#hasredo"}},[a._v("hasRedo")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#getstack"}},[a._v("getStack")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#clear"}},[a._v("clear")])])]),a._v(" "),s("h2",{attrs:{id:"getconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[a._v("#")]),a._v(" getConfig")]),a._v(" "),s("p",[a._v("Get module configurations")]),a._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("const")]),a._v(" config "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=")]),a._v(" um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("getConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[a._v("// { ... }")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[a._v("Object"),s("OutboundLink")],1)]),a._v(" Configuration object")]),a._v(" "),s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[a._v("#")]),a._v(" add")]),a._v(" "),s("p",[a._v("Add an entity (Model/Collection) to track\nNote: New Components and CSSRules will be added automatically")]),a._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[a._v("#")]),a._v(" Parameters")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("entity")]),a._v(" "),s("strong",[a._v("(Model | Collection)")]),a._v(" Entity to track")])]),a._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),a._v("someModelOrCollection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"remove"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[a._v("#")]),a._v(" remove")]),a._v(" "),s("p",[a._v("Remove and stop tracking the entity (Model/Collection)")]),a._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[a._v("#")]),a._v(" Parameters")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("entity")]),a._v(" "),s("strong",[a._v("(Model | Collection)")]),a._v(" Entity to remove")])]),a._v(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("remove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),a._v("someModelOrCollection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"removeall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removeall"}},[a._v("#")]),a._v(" removeAll")]),a._v(" "),s("p",[a._v("Remove all entities")]),a._v(" "),s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("removeAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"start"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#start"}},[a._v("#")]),a._v(" start")]),a._v(" "),s("p",[a._v("Start/resume tracking changes")]),a._v(" "),s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("start")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"stop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stop"}},[a._v("#")]),a._v(" stop")]),a._v(" "),s("p",[a._v("Stop tracking changes")]),a._v(" "),s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"undo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undo"}},[a._v("#")]),a._v(" undo")]),a._v(" "),s("p",[a._v("Undo last change")]),a._v(" "),s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[a._v("#")]),a._v(" Parameters")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("all")]),a._v("   (optional, default "),s("code",[a._v("true")]),a._v(")")])]),a._v(" "),s("h3",{attrs:{id:"examples-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("undo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"undoall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undoall"}},[a._v("#")]),a._v(" undoAll")]),a._v(" "),s("p",[a._v("Undo all changes")]),a._v(" "),s("h3",{attrs:{id:"examples-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-8"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("undoAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"redo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#redo"}},[a._v("#")]),a._v(" redo")]),a._v(" "),s("p",[a._v("Redo last change")]),a._v(" "),s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[a._v("#")]),a._v(" Parameters")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("all")]),a._v("   (optional, default "),s("code",[a._v("true")]),a._v(")")])]),a._v(" "),s("h3",{attrs:{id:"examples-9"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-9"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("redo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"redoall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#redoall"}},[a._v("#")]),a._v(" redoAll")]),a._v(" "),s("p",[a._v("Redo all changes")]),a._v(" "),s("h3",{attrs:{id:"examples-10"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-10"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("redoAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"hasundo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hasundo"}},[a._v("#")]),a._v(" hasUndo")]),a._v(" "),s("p",[a._v("Checks if exists an available undo")]),a._v(" "),s("h3",{attrs:{id:"examples-11"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-11"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("hasUndo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[a._v("Boolean"),s("OutboundLink")],1)])]),a._v(" "),s("h2",{attrs:{id:"hasredo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hasredo"}},[a._v("#")]),a._v(" hasRedo")]),a._v(" "),s("p",[a._v("Checks if exists an available redo")]),a._v(" "),s("h3",{attrs:{id:"examples-12"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-12"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("hasRedo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[a._v("Boolean"),s("OutboundLink")],1)])]),a._v(" "),s("h2",{attrs:{id:"getstack"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getstack"}},[a._v("#")]),a._v(" getStack")]),a._v(" "),s("p",[a._v("Get stack of changes")]),a._v(" "),s("h3",{attrs:{id:"examples-13"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-13"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("const")]),a._v(" stack "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=")]),a._v(" um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("getStack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\nstack"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("each")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[a._v("item")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=>")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("Collection")])]),a._v(" "),s("h2",{attrs:{id:"getstackgroup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getstackgroup"}},[a._v("#")]),a._v(" getStackGroup")]),a._v(" "),s("p",[a._v("Get grouped undo manager stack.\nThe difference between "),s("code",[a._v("getStack")]),a._v(" is when you do multiple operations at a time,\nlike appending multiple components:\n"),s("code",[a._v("editor.getWrapper().append(")])]),s("div",[a._v("C1")]),s("div",[a._v("C2")]),s("code",[a._v(");")]),a._v(" "),s("code",[a._v("getStack")]),a._v(" will return a collection length of 2.\n"),s("code",[a._v("getStackGroup")]),a._v(" instead will group them as a single operation (the first\ninserted component will be returned in the list) by returning an array length of 1."),s("p"),a._v(" "),s("p",[a._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[a._v("Array"),s("OutboundLink")],1)])]),a._v(" "),s("h2",{attrs:{id:"clear"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#clear"}},[a._v("#")]),a._v(" clear")]),a._v(" "),s("p",[a._v("Clear the stack")]),a._v(" "),s("h3",{attrs:{id:"examples-14"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-14"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])])])}),[],!1,null,null,null);t.default=r.exports}}]);
\ No newline at end of file
+(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{450:function(a,t,s){"use strict";s.r(t);var e=s(42),r=Object(e.a)({},(function(){var a=this,t=a.$createElement,s=a._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":a.$parent.slotKey}},[s("h2",{attrs:{id:"undomanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undomanager"}},[a._v("#")]),a._v(" UndoManager")]),a._v(" "),s("p",[a._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")]),a._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("const")]),a._v(" um "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=")]),a._v(" editor"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),a._v("UndoManager"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("ul",[s("li",[s("a",{attrs:{href:"#getconfig"}},[a._v("getConfig")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#add"}},[a._v("add")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#remove"}},[a._v("remove")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#removeall"}},[a._v("removeAll")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#start"}},[a._v("start")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#stop"}},[a._v("stop")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#undo"}},[a._v("undo")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#undoall"}},[a._v("undoAll")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#redo"}},[a._v("redo")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#redoall"}},[a._v("redoAll")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#hasundo"}},[a._v("hasUndo")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#hasredo"}},[a._v("hasRedo")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#getstack"}},[a._v("getStack")])]),a._v(" "),s("li",[s("a",{attrs:{href:"#clear"}},[a._v("clear")])])]),a._v(" "),s("h2",{attrs:{id:"getconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getconfig"}},[a._v("#")]),a._v(" getConfig")]),a._v(" "),s("p",[a._v("Get module configurations")]),a._v(" "),s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("const")]),a._v(" config "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=")]),a._v(" um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("getConfig")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[a._v("// { ... }")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[a._v("Object"),s("OutboundLink")],1)]),a._v(" Configuration object")]),a._v(" "),s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add"}},[a._v("#")]),a._v(" add")]),a._v(" "),s("p",[a._v("Add an entity (Model/Collection) to track\nNote: New Components and CSSRules will be added automatically")]),a._v(" "),s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters"}},[a._v("#")]),a._v(" Parameters")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("entity")]),a._v(" "),s("strong",[a._v("(Model | Collection)")]),a._v(" Entity to track")])]),a._v(" "),s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("add")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),a._v("someModelOrCollection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"remove"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#remove"}},[a._v("#")]),a._v(" remove")]),a._v(" "),s("p",[a._v("Remove and stop tracking the entity (Model/Collection)")]),a._v(" "),s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2"}},[a._v("#")]),a._v(" Parameters")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("entity")]),a._v(" "),s("strong",[a._v("(Model | Collection)")]),a._v(" Entity to remove")])]),a._v(" "),s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("remove")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),a._v("someModelOrCollection"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"removeall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#removeall"}},[a._v("#")]),a._v(" removeAll")]),a._v(" "),s("p",[a._v("Remove all entities")]),a._v(" "),s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("removeAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"start"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#start"}},[a._v("#")]),a._v(" start")]),a._v(" "),s("p",[a._v("Start/resume tracking changes")]),a._v(" "),s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("start")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"stop"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#stop"}},[a._v("#")]),a._v(" stop")]),a._v(" "),s("p",[a._v("Stop tracking changes")]),a._v(" "),s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("stop")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"undo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undo"}},[a._v("#")]),a._v(" undo")]),a._v(" "),s("p",[a._v("Undo last change")]),a._v(" "),s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3"}},[a._v("#")]),a._v(" Parameters")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("all")]),a._v("   (optional, default "),s("code",[a._v("true")]),a._v(")")])]),a._v(" "),s("h3",{attrs:{id:"examples-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-7"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("undo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"undoall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#undoall"}},[a._v("#")]),a._v(" undoAll")]),a._v(" "),s("p",[a._v("Undo all changes")]),a._v(" "),s("h3",{attrs:{id:"examples-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-8"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("undoAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"redo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#redo"}},[a._v("#")]),a._v(" redo")]),a._v(" "),s("p",[a._v("Redo last change")]),a._v(" "),s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4"}},[a._v("#")]),a._v(" Parameters")]),a._v(" "),s("ul",[s("li",[s("code",[a._v("all")]),a._v("   (optional, default "),s("code",[a._v("true")]),a._v(")")])]),a._v(" "),s("h3",{attrs:{id:"examples-9"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-9"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("redo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"redoall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#redoall"}},[a._v("#")]),a._v(" redoAll")]),a._v(" "),s("p",[a._v("Redo all changes")]),a._v(" "),s("h3",{attrs:{id:"examples-10"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-10"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("redoAll")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])]),a._v(" "),s("h2",{attrs:{id:"hasundo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hasundo"}},[a._v("#")]),a._v(" hasUndo")]),a._v(" "),s("p",[a._v("Checks if exists an available undo")]),a._v(" "),s("h3",{attrs:{id:"examples-11"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-11"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("hasUndo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[a._v("Boolean"),s("OutboundLink")],1)])]),a._v(" "),s("h2",{attrs:{id:"hasredo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hasredo"}},[a._v("#")]),a._v(" hasRedo")]),a._v(" "),s("p",[a._v("Checks if exists an available redo")]),a._v(" "),s("h3",{attrs:{id:"examples-12"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-12"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("hasRedo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[a._v("Boolean"),s("OutboundLink")],1)])]),a._v(" "),s("h2",{attrs:{id:"getstack"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getstack"}},[a._v("#")]),a._v(" getStack")]),a._v(" "),s("p",[a._v("Get stack of changes")]),a._v(" "),s("h3",{attrs:{id:"examples-13"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-13"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[a._v("const")]),a._v(" stack "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=")]),a._v(" um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("getStack")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\nstack"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("each")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[a._v("item")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("=>")]),a._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[a._v("...")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("Collection")])]),a._v(" "),s("h2",{attrs:{id:"getstackgroup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getstackgroup"}},[a._v("#")]),a._v(" getStackGroup")]),a._v(" "),s("p",[a._v("Get grouped undo manager stack.\nThe difference between "),s("code",[a._v("getStack")]),a._v(" is when you do multiple operations at a time,\nlike appending multiple components:\n"),s("code",[a._v("editor.getWrapper().append(")])]),s("div",[a._v("C1")]),s("div",[a._v("C2")]),s("code",[a._v(");")]),a._v(" "),s("code",[a._v("getStack")]),a._v(" will return a collection length of 2.\n"),s("code",[a._v("getStackGroup")]),a._v(" instead will group them as a single operation (the first\ninserted component will be returned in the list) by returning an array length of 1."),s("p"),a._v(" "),s("p",[a._v("Returns "),s("strong",[s("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[a._v("Array"),s("OutboundLink")],1)])]),a._v(" "),s("h2",{attrs:{id:"clear"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#clear"}},[a._v("#")]),a._v(" clear")]),a._v(" "),s("p",[a._v("Clear the stack")]),a._v(" "),s("h3",{attrs:{id:"examples-14"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-14"}},[a._v("#")]),a._v(" Examples")]),a._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[a._v("um"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[a._v("clear")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[a._v(";")]),a._v("\n")])])]),s("p",[a._v("Returns "),s("strong",[a._v("this")])])])}),[],!1,null,null,null);t.default=r.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/38.1230aa70.js b/docs/assets/js/38.e171813f.js
similarity index 67%
rename from docs/assets/js/38.1230aa70.js
rename to docs/assets/js/38.e171813f.js
index f26a4484c..9453afd82 100644
--- a/docs/assets/js/38.1230aa70.js
+++ b/docs/assets/js/38.e171813f.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{430:function(t,s,e){"use strict";e.r(s);var n=e(33),a=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"faq"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#faq"}},[this._v("#")]),this._v(" FAQ")]),this._v(" "),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([[38],{451:function(t,s,e){"use strict";e.r(s);var n=e(42),a=Object(n.a)({},(function(){var t=this.$createElement,s=this._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[s("h1",{attrs:{id:"faq"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#faq"}},[this._v("#")]),this._v(" FAQ")]),this._v(" "),s("p",[this._v("Coming soon")])])}),[],!1,null,null,null);s.default=a.exports}}]);
\ No newline at end of file
diff --git a/docs/assets/js/39.a1d49467.js b/docs/assets/js/39.a1d49467.js
new file mode 100644
index 000000000..51853c701
--- /dev/null
+++ b/docs/assets/js/39.a1d49467.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{454:function(t,s,a){"use strict";a.r(s);var n=a(42),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"getting-started"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getting-started"}},[t._v("#")]),t._v(" Getting Started")]),t._v(" "),a("p",[t._v("This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the "),a("a",{attrs:{href:"#final-result"}},[t._v("final result")])]),t._v(" "),a("h2",{attrs:{id:"import-the-library"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-the-library"}},[t._v("#")]),t._v(" Import the library")]),t._v(" "),a("p",[t._v("Before you start using GrapesJS, you'll have to import it. Let's import the latest version")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("link")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("stylesheet"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("//unpkg.com/grapesjs/dist/css/grapes.min.css"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("//unpkg.com/grapesjs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}}),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('\x3c!--\nIf you need plugins, put them below the main grapesjs script\n
     
-    
-    
+    
+    
   
   
     
    
+    
   
 
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 39a2cc65e..2c6b8436a 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -4,14 +4,14 @@
     
     
     Getting Started | GrapesJS
-    
+    
     
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # Getting Started
     
    This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the final result
     
    # Import the library
     
    Before you start using GrapesJS, you'll have to import it. Let's import the latest version
     
    <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
-<script src="//unpkg.com/grapesjs"></script>
+     
       
     
    # Getting Started
     
    This is a step-by-step guide for anyone who wants to create their own builder with GrapesJS. This is not a comprehensive guide, just a concise overview of most common modules. Follow along to create a page builder from scratch. Skip to the end of this page to see the final result
     
    # Import the library
     
    Before you start using GrapesJS, you'll have to import it. Let's import the latest version
     
    <link rel="stylesheet" href="//unpkg.com/grapesjs/dist/css/grapes.min.css">
+<script src="//unpkg.com/grapesjs"></script>
 <!--
 If you need plugins, put them below the main grapesjs script
 <script src="/path/to/some/plugin.min.js"></script>
@@ -45,7 +45,7 @@ If you need plugins, put them below the main grapesjs script
 // If you need plugins, put them below the main grapesjs script
 // import 'grapesjs-some-plugin';
 
    # Start from the canvas
     
    The first step is to define the interface of our editor. For this purpose we gonna start with basic HTML layouts. Finding a common structure for the UI of any project is not an easy task. That's why GrapesJS prefers to keep this process as simple as possible. We provide a few helpers, but let the user define the interface. This guarantees maximum flexibility.
-The main part of the GrapesJS editor is the canvas, this is where you create the structure of your templates and you can't miss it. Let's try to initiate the editor with the canvas and no panels.
     
    <div id="gjs">
+The main part of the GrapesJS editor is the canvas, this is where you create the structure of your templates and you can't miss it. Let's try to initiate the editor with the canvas and no panels.
     
    <div id="gjs">
   <h1>Hello World Component!</h1>
 </div>
 
    const editor = grapesjs.init({
@@ -73,10 +73,10 @@ The main part of the GrapesJS editor is the canvas, this is where you create the
   width: 100%;
   height: 100%;
 }
-
    Hello World Component!
     
    With just the canvas you're already able to move, copy and delete components from the structure. For now, we see the example template taken from the container. Next let's look at how to create and drag custom blocks into our canvas.
     
    # Add Blocks
     
    The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start by creating another container and append a few basic blocks inside of it. Later we can use this technique to build more complex structures.
     



     

    <div id="gjs">
+
    Hello World Component!
     
    With just the canvas you're already able to move, copy and delete components from the structure. For now, we see the example template taken from the container. Next let's look at how to create and drag custom blocks into our canvas.
     
    # Add Blocks
     
    The block in GrapesJS is just a reusable piece of HTML that you can drop in the canvas. A block can be an image, a button, or an entire section with videos, forms and iframes. Let's start by creating another container and append a few basic blocks inside of it. Later we can use this technique to build more complex structures.
     



     

    <div id="gjs">
   ...
 </div>
-<div id="blocks"></div>
+<div id="blocks"></div>
 
    const editor = grapesjs.init({
   // ...
   blockManager: {
@@ -119,9 +119,7 @@ The main part of the GrapesJS editor is the canvas, this is where you create the
   category: '...',
   // ...
 })
-
    ::: tip
-If you want to learn more about blocks we suggest to read its dedicated article: Block Manager Module
-:::
     
    # Define Components
     
    Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes.
+
    TIP
     
    If you want to learn more about blocks we suggest to read its dedicated article: Block Manager Module
     
    # Define Components
     
    Technically, once you drop your HTML block inside the canvas each element of the content is transformed into a GrapesJS Component. A GrapesJS Component is an object containing information about how the element is rendered in the canvas (managed in the View) and how it might look its final code (created by the properties in the Model). Generally, all Model properties are reflected in the View. Therefore, if you add a new attribute to the model, it will be available in the export code (which we will learn more about later), and the element you see in the canvas will be updated with new attributes.
 This isn't totally out of the ordinary, but the unique thing about Components that you can create a totally decoupled View. This means you can show the user whatever you desire regardless of what is in the Model. For example, by dragging a placeholder text you can fetch and show instead a dynamic content. If you want to learn more about Custom Components, you should check out Component Manager Module.
     
    GrapesJS comes with a few built-in Components that enable different features once rendered in the canvas. For example, by double clicking on an image component you will see the default Asset Manager, which you can customize or integrate you own. By double clicking on the text component you're able to edit it via the built-in Rich Text Editor, which is also customization and replaceable.
     
    As we have seen before you can create Blocks directly as Components
     
    editor.BlockManager.add('my-block-id', {
   // ...
   content: {
@@ -141,20 +139,18 @@ This isn't totally out of the ordinary, but the unique thing about Components th
     ]
   }
 })
-
    ::: tip
-Check out the Components API to learn how to interact with components dynamically
-:::
     
    An example on how to select some inner component and replace its children with new contents
     
    // The wrapper is the root Component
+
    TIP
     
    Check out the Components API to learn how to interact with components dynamically
     
    An example on how to select some inner component and replace its children with new contents
     
    // The wrapper is the root Component
 const wrapper = editor.DomComponents.getWrapper();
 const myComponent = wrapper.find('div.my-component')[0];
 myComponent.components().forEach(component => /* ... do something ... */);
 myComponent.components('<div>New content</div>');
-
    # Panels & Buttons
     
    Now that we have a canvas and custom blocks let's see how to create a new custom panel with some buttons inside (using Panels API) which trigger commands (the core one or custom).
     
     
     
     





    <div class="panel__top">
-    <div class="panel__basic-actions"></div>
+
    # Panels & Buttons
     
    Now that we have a canvas and custom blocks let's see how to create a new custom panel with some buttons inside (using Panels API) which trigger commands (the core one or custom).
     
     
     
     





    <div class="panel__top">
+    <div class="panel__basic-actions"></div>
 </div>
-<div id="gjs">
+<div id="gjs">
   ...
 </div>
-<div id="blocks"></div>
+<div id="blocks"></div>
 
    .panel__top {
   padding: 0;
   width: 100%;
@@ -210,20 +206,18 @@ Try to use Commands when possible, they al
 });
 editor.on('run:export-template', () => console.log('After the command run'));
 editor.on('abort:export-template', () => console.log('Command aborted'));
-
    ::: tip
-Check out the Panels API to see all the available methods
-:::
     
    # Layers
     
    Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it
     



     
     
     
     
     
     
     
     


    <div class="panel__top">
-    <div class="panel__basic-actions"></div>
+
    TIP
     
    Check out the Panels API to see all the available methods
     
    # Layers
     
    Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier. To enable it you just have to specify where you want to render it
     



     
     
     
     
     
     
     
     


    <div class="panel__top">
+    <div class="panel__basic-actions"></div>
 </div>
-<div class="editor-row">
-  <div class="editor-canvas">
-    <div id="gjs">...</div>
+<div class="editor-row">
+  <div class="editor-canvas">
+    <div id="gjs">...</div>
   </div>
-  <div class="panel__right">
-    <div class="layers-container"></div>
+  <div class="panel__right">
+    <div class="layers-container"></div>
   </div>
 </div>
-<div id="blocks"></div>
+<div id="blocks"></div>
 
    .editor-row {
   display: flex;
   justify-content: flex-start;
@@ -266,14 +260,14 @@ Check out the Panels API to see all the avai
     }]
   }
 });
-
     
    Hello World Component!
     
     
     
    # Style Manager
     
    Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.
     
    Let's start by adding one more panel inside the panel__right and another one in panel__top which will contain a Layer/Style Manager switcher
     


     




     



    <div class="panel__top">
-    <div class="panel__basic-actions"></div>
-    <div class="panel__switcher"></div>
+
     
    Hello World Component!
     
     
     
    # Style Manager
     
    Once you have defined the structure of the template the next step is the ability to style it. To meet this need GrapesJS includes the Style Manager module which is composed by CSS style properties and sectors. To make it more clear, let's see how to define a basic set.
     
    Let's start by adding one more panel inside the panel__right and another one in panel__top which will contain a Layer/Style Manager switcher
     


     




     



    <div class="panel__top">
+    <div class="panel__basic-actions"></div>
+    <div class="panel__switcher"></div>
 </div>
 ...
-  <div class="panel__right">
-    <div class="layers-container"></div>
-    <div class="styles-container"></div>
+  <div class="panel__right">
+    <div class="layers-container"></div>
+    <div class="styles-container"></div>
   </div>
 ...
 
    .panel__switcher {
@@ -381,13 +375,11 @@ editor.Commands.style.display = 'none';
   },
 });
-
     
     
    Hello World Component!
     
     
     
     
    Inside Style Manager definition we use buildProps which helps us create common properties from available built-in objects then in properties we can override same objects (eg. passing another name to change the label) identified by property name. As you can see from custom-prop example it's a matter of defining the CSS property and the input type. We suggest to check a more complete example of Style Manager properties usage from the webpage preset demo
     
    ::: tip
-Check the Style Manager API to see how to update sectors and properties dynamically
-:::
     
    # Traits
     
    Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. placeholder for inputs or alt for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we going to show you how to render available traits, for more details on how to extend them we suggest you read the Trait Manager Module page.
     
    Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher
     




     



    ...
-  <div class="panel__right">
-    <div class="layers-container"></div>
-    <div class="styles-container"></div>
-    <div class="traits-container"></div>
+
     
     
    Hello World Component!
     
     
     
     
    Inside Style Manager definition we use buildProps which helps us create common properties from available built-in objects then in properties we can override same objects (eg. passing another name to change the label) identified by property name. As you can see from custom-prop example it's a matter of defining the CSS property and the input type. We suggest to check a more complete example of Style Manager properties usage from the webpage preset demo
     
    TIP
     
    Check the Style Manager API to see how to update sectors and properties dynamically
     
    # Traits
     
    Most of the time you would style your components and place them somewhere in the structure, but sometimes your components might need custom attributes or even custom behaviors and for this need you can make use of traits. Traits are commonly used to update HTML element attributes (eg. placeholder for inputs or alt for images), but you can also define your own custom traits. Access the selected Component model and do whatever you want. For this guide, we going to show you how to render available traits, for more details on how to extend them we suggest you read the Trait Manager Module page.
     
    Let's create a new container for traits. Tell the editor where to render it and update the sidebar switcher
     




     



    ...
+  <div class="panel__right">
+    <div class="layers-container"></div>
+    <div class="styles-container"></div>
+    <div class="traits-container"></div>
   </div>
 ...
 
    const editor = grapesjs.init({
@@ -429,10 +421,10 @@ editor.Commandsthis.getTraitsEl(editor).style.display = 'none';
   },
 });
-
     
     
    Hello World Component!
     
     
     
     
     
    Now if you switch to the Trait panel and select one of the inner components you should see its default traits.
     
    # Responsive templates
     
    GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching
     


     




    <div class="panel__top">
-    <div class="panel__basic-actions"></div>
-    <div class="panel__devices"></div>
-    <div class="panel__switcher"></div>
+
     
     
    Hello World Component!
     
     
     
     
     
    Now if you switch to the Trait panel and select one of the inner components you should see its default traits.
     
    # Responsive templates
     
    GrapesJS implements a module which allows you to work with responsive templates easily. Let's see how to define different devices and a button for device switching
     


     




    <div class="panel__top">
+    <div class="panel__basic-actions"></div>
+    <div class="panel__devices"></div>
+    <div class="panel__switcher"></div>
 </div>
 ...
 
    .panel__devices {
@@ -501,9 +493,7 @@ editor.Commands// Set initial device as Mobile
 editor.setDevice('Mobile');
-
    ::: tip
-Check out the Device Manager API to see all the available methods
-:::
     
    # Store & load data
     
    Once you have finished with defining your builder interface the next step would be to setup the storing and loading process.
+
    TIP
     
    Check out the Device Manager API to see all the available methods
     
    # Store & load data
     
    Once you have finished with defining your builder interface the next step would be to setup the storing and loading process.
 GrapesJS implements 2 simple type of storages inside its Storage Manager: The local (by using localStorage, 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 (grapesjs-indexeddb is a good example).
 Let's see how the default options work
     
    grapesjs.init({
     // ...
@@ -598,6 +588,6 @@ To complete our builder let's customize its color palette and to make it more vi
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/guides/Custom-CSS-parser.html b/docs/guides/Custom-CSS-parser.html
index c723f8ef1..7705135f2 100644
--- a/docs/guides/Custom-CSS-parser.html
+++ b/docs/guides/Custom-CSS-parser.html
@@ -4,13 +4,13 @@
     
     
     Use Custom CSS Parser | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # Use Custom CSS Parser
     
    If you just use GrapesJS for building templates from scratch, so you start from an empty canvas and for editing you strictly rely  on the generated JSON (final HTML/CSS only for end-users) then, probably, you might skip this guide. On the other hand, if you import templates from already defined HTML/CSS or let the user embed custom codes (eg. using the grapesjs-custom-code plugin), then you have to know that you might face strange behaviors.
     
    ::: warning
-This guide requires GrapesJS v0.14.33 or higher
-:::
     
     
    # Import HTML/CSS
     
    Importing already defined HTML/CSS is a really good feature as it lets you start editing immediately any kind of template and obviously, GrapesJS itself promotes this kind of approach
     
    <div id="gjs">
-  <div class="txt-red">Hello world!</div>
+     
       
     
    # Use Custom CSS Parser
     
    If you just use GrapesJS for building templates from scratch, so you start from an empty canvas and for editing you strictly rely  on the generated JSON (final HTML/CSS only for end-users) then, probably, you might skip this guide. On the other hand, if you import templates from already defined HTML/CSS or let the user embed custom codes (eg. using the grapesjs-custom-code plugin), then you have to know that you might face strange behaviors.
     
    WARNING
     
    This guide requires GrapesJS v0.14.33 or higher
     
     
    # Import HTML/CSS
     
    Importing already defined HTML/CSS is a really good feature as it lets you start editing immediately any kind of template and obviously, GrapesJS itself promotes this kind of approach
     
    <div id="gjs">
+  <div class="txt-red">Hello world!</div>
   <style>.txt-red{color: red}</style>
 </div>
 
-<script type="text/javascript">
+<script type="text/javascript">
   const editor = grapesjs.init({
       container : '#gjs',
       fromElement: true,
@@ -48,7 +46,7 @@ This guide requires GrapesJS v0.14.33 or higher
 </script>
 
    To work fast and easier GrapesJS needs to compile a simple string (HTML/CSS) into structured nodes (nested JS objects). Fortunately, most of the hard work (parsing) is already done by the browser itself which translates that string into its own objects (DOM/CSSOM) and so we just rely on those, by traversing them and creating our nodes (unfortunately browser's objects are not enough). The fact we're able to parse our strings just by using the browser itself it's very cool, we can enable the import feature without requiring any third-party library, so... where is the problem? Well, while the generated DOM is performing quite well, as we're able to extract what we need, unfortunately, it's not the same for the CSSOM, so let's see in the next paragraph what is wrong with it.
     
    # CSSOM results are inconsistent
     
    Unfortunately, we have discovered that the CSSOM generated by browsers are highly inconsistent from what we ask to parse. To demonstrate it, we gonna create a simple example by using the built-in parser and we'll check its result.
 So, for our case we just take in account a simple rule, we'll parse it and print the CSSOM result on screen.
     
    <h1>To parse</h1>
-<pre id="css-to-parse">
+<pre id="css-to-parse">
   .simple-class {
     background-image:url("https://image1.png"), url("https://image2.jpg");
     background-attachment: fixed, scroll;
@@ -61,7 +59,7 @@ So, for our case we just take in account a simple rule, we'll parse it and print
 </pre>
 
 <h1>Result</h1>
-<pre id="result"></pre>
+<pre id="result"></pre>
 
 <script>
   // We use ES5 just to make it more cross-browser, without the need of being compiled
@@ -218,6 +216,6 @@ editor.setCu
        
     
    
-    
+    
   
 
diff --git a/docs/guides/Replace-Rich-Text-Editor.html b/docs/guides/Replace-Rich-Text-Editor.html
index 31ee94c6a..e4c3ec369 100644
--- a/docs/guides/Replace-Rich-Text-Editor.html
+++ b/docs/guides/Replace-Rich-Text-Editor.html
@@ -4,13 +4,13 @@
     
     
     Replace the built-in Rich Text Editor | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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
@@ -109,6 +109,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 539e41e0b..2771a38cc 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,16 +4,16 @@
     
     
     Introduction | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
-    
      GrapesJS 
     
     
     
      
     
    # Introduction
     
     
    # What is GrapesJS?
     
    At first glance might think this is just another page/HTML builder, but it's something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things".  By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. 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 your applications.
+     
       
     
    # Introduction
     
     
    # What is GrapesJS?
     
    At first glance might think this is just another page/HTML builder, but it's something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you to easily create a drag & drop enabled builder of "things".  By "things" we mean anything with HTML-like structure, which entails much more than web pages. We use HTML-like structure basically everywhere: Newsletters (eg. 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 your applications.
 GrapesJS ships with features and tools that enable you to craft easy to use builders. Which allows your users to create complex HTML-like templates without any knowledge of coding.
     
    # Why GrapesJS?
     
    GrapesJS was designed  primarily to for use inside Content Management Systems to speed up the creation of dynamic templates and replace common WYSIWYG editors. Which are good for content editing, but inappropriate for creating HTML structures. Instead of creating an application we decided to create an extensible framework that could be used by anyone for any purpose.
     
    # Quick Start
     
    To showcase the power of GrapesJS 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 these sources
     
    • CDNs
 
      • unpkg
 
        • https://unpkg.com/grapesjs
          •  
        • https://unpkg.com/grapesjs/dist/css/grapes.min.css
        •  
      • cdnjs
@@ -44,6 +44,6 @@ GrapesJS ships with features and tools that enable you to craft easy to use buil
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html
index 9e9046e65..f208185ac 100644
--- a/docs/modules/Assets.html
+++ b/docs/modules/Assets.html
@@ -4,13 +4,13 @@
     
     
     Asset Manager | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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. The Asset Manager is 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'll 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. The Asset Manager is 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'll have to pass assetManager property with the main configuration object
     
    const editor = grapesjs.init({
   ...
   assetManager: {
     assets: [...],
@@ -375,6 +375,6 @@ editor.on
       →
     
     
    
-    
+    
   
 
diff --git a/docs/modules/Blocks.html b/docs/modules/Blocks.html
index 47d998ce2..2f0223f9b 100644
--- a/docs/modules/Blocks.html
+++ b/docs/modules/Blocks.html
@@ -4,13 +4,13 @@
     
     
     Block Manager | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # Block Manager
     
    GrapesJS - Block Manager
     
     
    The Block is a group of Components and can be easily reused inside templates.
     
    The difference between components and blocks: The component is more atomic, so a single image,  a text box or a map is a component. 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 out the 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.
     
    The difference between components and blocks: The component is more atomic, so a single image,  a text box or a map is a component. 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 out the 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
@@ -97,6 +97,6 @@ If you want to check the complete list of available Component's properties, chec
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/modules/Commands.html b/docs/modules/Commands.html
index 28e20ad31..e7311c6ca 100644
--- a/docs/modules/Commands.html
+++ b/docs/modules/Commands.html
@@ -4,13 +4,13 @@
     
     
     Commands | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # Commands
     
    A basic command in GrapesJS it's a simple function, but you will see in this guide how powerful they can be. The main goal of the Command module is to centralize functions and be easily reused across the editor. Another big advantage of using commands is the ability to track them, extend or even interrupt beside some conditions.
     
    ::: warning
-This guide is referring to GrapesJS v0.14.61 or higher
-:::
     
     
    # Basic configuration
     
    You can create your commands already from the initialization step by passing them in the commands.defaults options:
     
    const editor = grapesjs.init({
+     
       
     
    # Commands
     
    A basic command in GrapesJS it's a simple function, but you will see in this guide how powerful they can be. The main goal of the Command module is to centralize functions and be easily reused across the editor. Another big advantage of using commands is the ability to track them, extend or even interrupt beside some conditions.
     
    WARNING
     
    This guide is referring to GrapesJS v0.14.61 or higher
     
     
    # Basic configuration
     
    You can create your commands already from the initialization step by passing them in the commands.defaults options:
     
    const editor = grapesjs.init({
   ...
   commands: {
     defaults: [
@@ -64,9 +62,7 @@ commands.add
   },
 });
 
    As you see the definition is quite easy, you just add an ID and the callback function. The Editor instance is passed as the first argument to the callback so you can access any other module or API method.
     
    Now if you want to call that command you should just run this
     
    editor.runCommand('my-command-id');
-
    ::: tip
-The method editor.runCommand is an alias of editor.Commands.run
-:::
     
    You could also pass options if you need
     
    editor.runCommand('my-command-id', { some: 'option' });
+
    TIP
     
    The method editor.runCommand is an alias of editor.Commands.run
     
    You could also pass options if you need
     
    editor.runCommand('my-command-id', { some: 'option' });
 
    Then you can get the same object as a third argument of the callback.
     
    commands.add('my-command-id', (editor, sender, options = {}) => {
   alert(`This is my command ${options.some}`);
 });
@@ -93,9 +89,7 @@ The method editor.runCommand is an alias of editor.Commands.r
 },
 ...
 // Now instead of the `undefined` you'll see the object from the run method
-
    To disable the command use editor.stopCommand method, so in our case it'll be editor.stopCommand('my-command-state'). As for the runCommand you can pass an options object as a second argument and use them in your stop method.
     
    Once the command is active, if you try to run editor.runCommand('my-command-state') again you'll notice that that the run is not triggering. This behavior is useful to prevent executing multiple times the activation process which might lead to an inconsistent state (think about, for instance, having a counter, which should be increased on run and decreased on stop). If you need to run a command multiple times probably you're dealing with a not stateful command, so try to use it without the stop method, but in case you're aware of your application state you can actually force the execution with editor.runCommand('my-command-state', { force: true }). The same logic applies to the stopCommand method.
     
     
    ::: danger WARNING
- 
-:::
     
    If you deal with UI in your stateful commands, be careful to keep the state coherent with your logic. Let's take, for example, the use of a modal as an indicator of the command state.
     
    commands.add('my-command-modal', {
+
    To disable the command use editor.stopCommand method, so in our case it'll be editor.stopCommand('my-command-state'). As for the runCommand you can pass an options object as a second argument and use them in your stop method.
     
    Once the command is active, if you try to run editor.runCommand('my-command-state') again you'll notice that that the run is not triggering. This behavior is useful to prevent executing multiple times the activation process which might lead to an inconsistent state (think about, for instance, having a counter, which should be increased on run and decreased on stop). If you need to run a command multiple times probably you're dealing with a not stateful command, so try to use it without the stop method, but in case you're aware of your application state you can actually force the execution with editor.runCommand('my-command-state', { force: true }). The same logic applies to the stopCommand method.
     
     
    WARNING
     
     
    If you deal with UI in your stateful commands, be careful to keep the state coherent with your logic. Let's take, for example, the use of a modal as an indicator of the command state.
     
    commands.add('my-command-modal', {
   run(editor) {
     editor.Modal.open({
       title: 'Modal example',
@@ -178,6 +172,6 @@ editor.on
       →
     
     
    
-    
+    
   
 
diff --git a/docs/modules/Components-js.html b/docs/modules/Components-js.html
index 805e35634..44a9de7b6 100644
--- a/docs/modules/Components-js.html
+++ b/docs/modules/Components-js.html
@@ -4,13 +4,13 @@
     
     
     Components & JS | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # 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: {
@@ -47,7 +47,7 @@
   }
 });
 
    Now if you drag the new block inside the canvas you'll see an alert and the message in console, as you might expect.
-One thing worth noting is that this context is bound to the component element, so if you wanted to change a property you'd do this.innerHTML = 'inner content'.
     
    One thing you should take in account is how the script is bound to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or editor.getHtml()), you might see something like this:
     
    <div id="c764"></div>
+One thing worth noting is that this context is bound to the component element, so if you wanted to change a property you'd do this.innerHTML = 'inner content'.
     
    One thing you should take in account is how the script is bound to component once rendered in the canvas or in your final template. If you check now the generated HTML coded by the editor (via Export button or editor.getHtml()), you might see something like this:
     
    <div id="c764"></div>
 <script>
   var items = document.querySelectorAll('#c764');
   for (var i = 0, len = items.length; i < len; i++) {
@@ -59,8 +59,8 @@ One thing worth noting is that this context is bound to the compone
     }.bind(items[i]))();
   }
 </script>
-
    As you see the editor attaches a unique ID to all components with scripts and retrieves them via querySelectorAll. Dragging another test-block will generate this:
     
    <div id="c764"></div>
-<div id="c765"></div>
+
    As you see the editor attaches a unique ID to all components with scripts and retrieves them via querySelectorAll. Dragging another test-block will generate this:
     
    <div id="c764"></div>
+<div id="c765"></div>
 <script>
   var items = document.querySelectorAll('#c764, #c765');
   for (var i = 0, len = items.length; i < len; i++) {
@@ -92,7 +92,7 @@ editor.BlockManager},
 ...
 });
-
    Unfortunately, this won't work. You'll get an undefined myVar error. The final HTML, with script functions converted to string, will look like this:
     
    <div id="c764"></div>
+
    Unfortunately, this won't work. You'll get an undefined myVar error. The final HTML, with script functions converted to string, will look like this:
     
    <div id="c764"></div>
 <script>
   var items = document.querySelectorAll('#c764');
   for (var i = 0, len = items.length; i < len; i++) {
@@ -115,7 +115,7 @@ editor.BlockManager...
   }
 });
-
    The final HTML will be:
     
    <div id="c764"></div>
+
    The final HTML will be:
     
    <div id="c764"></div>
 <script>
   var items = document.querySelectorAll('#c764');
   for (var i = 0, len = items.length; i < len; i++) {
@@ -171,6 +171,6 @@ All you have to do is to require the dependency when it is needed and then call
       
       →
     
     
    
-    
+    
   
 
diff --git a/docs/modules/Components.html b/docs/modules/Components.html
index 53a8b8c1e..8206f9719 100644
--- a/docs/modules/Components.html
+++ b/docs/modules/Components.html
@@ -4,13 +4,13 @@
     
     
     Component Manager | GrapesJS
-    
+    
     
     
     
     
-    
-    
+    
+    
   
   
     
      GrapesJS 
     
      
       
     
    # Component Manager
     
    The Component is a base element of the template. It might be something simple and atomic like an image or a text box, but also complex structures, more probably composed by other components, like sections or pages. The concept of the component was made to allow the developer to bind different behaviors to different elements. For example, opening the Asset Manager on double click of the image is a custom behavior binded to that particular type of element.
     
    ::: warning
-This guide is referring to GrapesJS v0.15.8 or higher
-:::
     
     
    # How Components work?
     
    Let's see in detail how components work by looking at all the steps from adding an HTML string to the editor.
     
    ::: tip
-All the following snippets can be run  directly in console from the main demo
-:::
     
    This is how we can add new components to the canvas:
     
    // Append components directly to the canvas
+     
       
     
    # Component Manager
     
    The Component is a base element of the template. It might be something simple and atomic like an image or a text box, but also complex structures, more probably composed by other components, like sections or pages. The concept of the component was made to allow the developer to bind different behaviors to different elements. For example, opening the Asset Manager on double click of the image is a custom behavior binded to that particular type of element.
     
    WARNING
     
    This guide is referring to GrapesJS v0.15.8 or higher
     
     
    # How Components work?
     
    Let's see in detail how components work by looking at all the steps from adding an HTML string to the editor.
     
    TIP
     
    All the following snippets can be run  directly in console from the main demo
     
    This is how we can add new components to the canvas:
     
    // Append components directly to the canvas
 editor.addComponents(`<div>
   <img src="https://path/image" />
   <span title="foo">Hello world!!!</span>
@@ -49,11 +45,10 @@ editor.getSe
 
 // Actually, editor.addComponents is an alias of...
 editor.getWrapper().append(`<div>...`);
-
    ::: tip
-If you need to append a component in at a specific position, you can use at option. So, to add a component on top of all others (in the same collection) you would use
     
    component.append('<div>...', { at: 0 })
+
    TIP
     
    If you need to append a component in at a specific position, you can use at option. So, to add a component on top of all others (in the same collection) you would use
     
    component.append('<div>...', { at: 0 })
 
    or in the middle
     
    const { length } = component.components();
 component.append('<div>...', { at: parseInt(length / 2, 10) })
-
    :::
     
    # Component Definition
     
    In the first step, the HTML string is parsed and transformed to what is called Component Definition, so the result of the input above would be:
     
    {
+
     
    # Component Definition
     
    In the first step, the HTML string is parsed and transformed to what is called Component Definition, so the result of the input above would be:
     
    {
   tagName: 'div',
   components: [
     {
@@ -65,17 +60,15 @@ component.ap
       attributes: { title: 'foo' },
       components: [{
         type: 'textnode',
-        content: 'Hello wdsforld!!!'
+        content: 'Hello world!!!'
       }]
     }
   ]
 }
 
    The real Component Definition would be a little bit bigger so so we'd reduced the JSON for the sake of simplicity.
     
    You might notice the result is similar to what is generally called a Virtual DOM, a lightweight representation of the DOM element. This actually helps the editor to keep track of the state of our elements and make performance-friendly changes/updates.
 The meaning of properties like tagName, attributes and components are quite obvious, but what about type?! This particular property specifies the Component Type of our Component Definition (you check the list of default components below) and if it's omitted, the default one will be used type: 'default'.
-At this point, a good question would be, how the editor assigns those types by starting from a simple HTML string? This step is identified as Component Recognition and it's explained in detail in the next paragraph.
     
    # Component Recognition and Component Type Stack
     
    As we mentioned before, when you pass an HTML string as a component to the editor, that string is parsed and compiled to the Component Definition with a new type property. To understand what type should be assigned, for each parsed HTML Element, the editor iterates over all the defined components, called Component Type Stack, and checks via isComponent method (we will see it later) if that component type is appropriate for that element. The Component Type Stack is just a simple array of component types but what is matter is the order of those types. Any new added custom Component Type (we'll see later how to create them) goes on top of the Component Type Stack and each element returned from the parser iterates the stack from top to bottom (the last element of the stack is the default one), the iteration stops once one of the component returns a truthy value from the isComponent method.
      
    ::: tip
-If you're importing big string chunks of HTML code you might want to improve the performances by skipping the parsing and the component recognition steps by passing directly Component Definition objects or using the JSX syntax.
-Read here about how to setup JSX syntax parser
-:::
     
    # Component instance
     
    Once the Component Definition is ready and the type is assigned, the Component instance can be created (known also as the Model). Let's step back to our previous example with the HTML string, the result of the append method is an array of added components.
     
    const component = editor.addComponents(`<div>
+At this point, a good question would be, how the editor assigns those types by starting from a simple HTML string? This step is identified as Component Recognition and it's explained in detail in the next paragraph.
     
    # Component Recognition and Component Type Stack
     
    As we mentioned before, when you pass an HTML string as a component to the editor, that string is parsed and compiled to the Component Definition with a new type property. To understand what type should be assigned, for each parsed HTML Element, the editor iterates over all the defined components, called Component Type Stack, and checks via isComponent method (we will see it later) if that component type is appropriate for that element. The Component Type Stack is just a simple array of component types but what is matter is the order of those types. Any new added custom Component Type (we'll see later how to create them) goes on top of the Component Type Stack and each element returned from the parser iterates the stack from top to bottom (the last element of the stack is the default one), the iteration stops once one of the component returns a truthy value from the isComponent method.
      
    TIP
     
    If you're importing big string chunks of HTML code you might want to improve the performances by skipping the parsing and the component recognition steps by passing directly Component Definition objects or using the JSX syntax.
+Read here about how to setup JSX syntax parser
     
    # Component instance
     
    Once the Component Definition is ready and the type is assigned, the Component instance can be created (known also as the Model). Let's step back to our previous example with the HTML string, the result of the append method is an array of added components.
     
    const component = editor.addComponents(`<div>
   <img src="https://path/image" />
   <span title="foo">Hello world!!!</span>
 </div>`)[0];
@@ -90,9 +83,7 @@ component.co
 
    Each component can define its own properties and methods but all of them will always extend, at least, the default one (then you will see how to create new custom components and how to extend the already defined) so it's good to check the Component API to see all available properties and methods.
     
    The main purpose of the Component is to keep track of its data and to return them when necessary. One common thing you might need to ask from the component is to show its current HTML
     
    const componentHTML = component.toHTML();
 
    This will return a string containing the HTML of the component and all of its children.
 The component implements also toJSON methods so you can get its JSON structure in this way
     
    JSON.stringify(component)
-
    ::: tip
-For storing/loading all the components you should rely on the Storage Manager
-:::
     
    So, the Component instance is responsible for the final data (eg. HTML, JSON) of your templates. If you need, for example, to update/add some attribute in the HTML you need to update its component (eg. component.addAttributes({ title: 'Title added' })), so the Component/Model is your Source of Truth.
     
    # Component rendering
     
    Another important part of components is how they are rendered in the canvas, this aspect is handled by its View. It has nothing to do with the final HTML data, you can return a big <div>...</div> string as HTML of your component but render it as a simple image in the canvas (think about placeholders for complex/dynamic data).
     
    By default, the view of components is automatically synced with the data of its models (you can't have a View without a Model). If you update the attribute of the component or append a new one as a child, the view will render it in the canvas.
     
    Unfortunately, sometimes, you might need some additional logic to handle better the component result. Think about allowing a user build its <table> element, for this specific case you might want to add custom buttons in the canvas, so it'd be easier adding/removing columns/rows. To handle those cases you can rely on the View, where you can add additional DOM component, attach events, etc. All of this will be completely unrelated with the final HTML of the <table> (the result the user would expect) as it handled by the Model.
+
    TIP
     
    For storing/loading all the components you should rely on the Storage Manager
     
    So, the Component instance is responsible for the final data (eg. HTML, JSON) of your templates. If you need, for example, to update/add some attribute in the HTML you need to update its component (eg. component.addAttributes({ title: 'Title added' })), so the Component/Model is your Source of Truth.
     
    # Component rendering
     
    Another important part of components is how they are rendered in the canvas, this aspect is handled by its View. It has nothing to do with the final HTML data, you can return a big <div>...</div> string as HTML of your component but render it as a simple image in the canvas (think about placeholders for complex/dynamic data).
     
    By default, the view of components is automatically synced with the data of its models (you can't have a View without a Model). If you update the attribute of the component or append a new one as a child, the view will render it in the canvas.
     
    Unfortunately, sometimes, you might need some additional logic to handle better the component result. Think about allowing a user build its <table> element, for this specific case you might want to add custom buttons in the canvas, so it'd be easier adding/removing columns/rows. To handle those cases you can rely on the View, where you can add additional DOM component, attach events, etc. All of this will be completely unrelated with the final HTML of the <table> (the result the user would expect) as it handled by the Model.
 Once the component is rendered you can always access its View and the DOM element.
     
    const component = editor.getSelected();
 // Get the View
 const view = component.getView();
@@ -131,9 +122,7 @@ Once the component is rendered you can always access its View and the DOM elemen
     }
   }
 });
-
    With this code, the editor will be able to understand simple text <input>s, assign default attributes and show some trait for a better attribute handling.
     
    ::: tip
-To understand better how Traits work you should read its dedicated page but we highly suggest to read it after you've finished reading this one
-:::
     
    # isComponent
     
    Let's see in detail what we have done so far. The first thing to notice is the isComponent function, we have already mentioned its usage in this section and we need it to make the editor understand <input> during the component recognition step.
+
    With this code, the editor will be able to understand simple text <input>s, assign default attributes and show some trait for a better attribute handling.
     
    TIP
     
    To understand better how Traits work you should read its dedicated page but we highly suggest to read it after you've finished reading this one
     
    # isComponent
     
    Let's see in detail what we have done so far. The first thing to notice is the isComponent function, we have already mentioned its usage in this section and we need it to make the editor understand <input> during the component recognition step.
 It receives only the el argument, which is the parsed HTMLElement node and expects a truthy value in case the element satisfies your logic condition. So, if we add this HTML string as component
     
    // ...after editor initialization
 editor.addComponents(`<input name="my-test" title="hello"/>`)
 
    The resultant Component Definition will be
     
    {
@@ -159,9 +148,7 @@ editor.addCo
   },
   // ...
 });
-
    ::: danger
-Keep the isComponent function as simple as possible
-:::
     
    Be aware that this method will probably receive ANY parsed element from your canvas (eg. on load or on add) and not all the nodes have the same interface (eg. properties/methods).
+
    WARNING
     
    Keep the isComponent function as simple as possible
     
    Be aware that this method will probably receive ANY parsed element from your canvas (eg. on load or on add) and not all the nodes have the same interface (eg. properties/methods).
 If you do this:
     
    // ...
 // Print elements
 isComponent: el => {
@@ -259,9 +246,7 @@ modelComponent..find(`.query-string[example=value]`).forEach(
   inner => console.log(inner.props())
 );
-
    You'll notice that, on any change, the component in the canvas and its export code are changing accordingly
     
    :::tip
-To know all the available methods/properties check the Component API
-:::
     
    # Listen to property changes
     
    If you need to accomplish some kind of action on some property change you can set up listeners in the init method
     
    editor.DomComponents.addType('my-input-type', {
+
    You'll notice that, on any change, the component in the canvas and its export code are changing accordingly
     
    TIP
     
    To know all the available methods/properties check the Component API
     
    # Listen to property changes
     
    If you need to accomplish some kind of action on some property change you can set up listeners in the init method
     
    editor.DomComponents.addType('my-input-type', {
   // ...
   model: {
     defaults: {
@@ -407,9 +392,8 @@ domc.addType
     },
   }
 });
-
    The same would be for the view by using extendFnView
     
    :::tip
-If you need you can also get all the current component types by using getTypes
     
    editor.DomComponents.getTypes().forEach(compType => console.log(compType.id))
-
    :::
     
    # Lifecycle Hooks
     
    Each component triggers different lifecycle hooks, which allows you to add custom actions at their specific stages.
+
    The same would be for the view by using extendFnView
     
    TIP
     
    If you need you can also get all the current component types by using getTypes
     
    editor.DomComponents.getTypes().forEach(compType => console.log(compType.id))
+
     
    # Lifecycle Hooks
     
    Each component triggers different lifecycle hooks, which allows you to add custom actions at their specific stages.
 We can distinguish 2 different types of hooks: global and local.
 You define local hooks when you create/extend a component type (usually via some model/view method) and the reason is to react to an event of that
 particular component type. Instead, the global one, will be called indistinctly on any component (you listen to them via editor.on) and you can make
@@ -499,7 +483,7 @@ editor.addCo
     “@babel/plugin-transform-react-jsx”
   ]
 }
-
    You can also customize the pragma function which executes the transformation [“@babel/plugin-transform-react-jsx”, { “pragma”: “customCreateEl” }], by default React.createElement is used (you'll need a React instance available in the file to make it work).
     
    A complete example of this approach can be found here
      
    
+

    You can also customize the pragma function which executes the transformation [“@babel/plugin-transform-react-jsx”, { “pragma”: “customCreateEl” }], by default React.createElement is used (you'll need a React instance available in the file to make it work).

    A complete example of this approach can be found here

    ← →

    - + diff --git a/docs/modules/I18n.html b/docs/modules/I18n.html index 48744618c..eec9ba4ba 100644 --- a/docs/modules/I18n.html +++ b/docs/modules/I18n.html @@ -4,13 +4,13 @@ I18n (Internalization) | GrapesJS - + - - + +
    GrapesJS

    # Internalization

    The I18n module allows the internalization and updates of strings in the editor UI

    ::: warning -This guide is referring to GrapesJS v0.15.9 or higher

    The module was added recently so we're open to receive support in translating strings in other languages. Your help will be much appreciated! -:::

    # Configuration

    By default, the editor includes only the English language, if you need other languages you have to import them manually. +

    # Internalization

    The I18n module allows the internalization and updates of strings in the editor UI

    WARNING

    This guide is referring to GrapesJS v0.15.9 or higher

    The module was added recently so we're open to receive support in translating strings in other languages. Your help will be much appreciated!

    # Configuration

    By default, the editor includes only the English language, if you need other languages you have to import them manually. Note: The language code is defined in the ISO 639-1 standard.

    import grapesjs from 'grapesjs';
 import it from 'grapesjs/locale/it';
 import tr from 'grapesjs/locale/tr';
@@ -97,9 +95,7 @@ styleManager: }
     }
 });
-

    # Adding new language

    If you want to support GrapesJS by adding a new language to our repository all you need to do is to follow steps below:

    1. First of all, be sure to check the language file in src/i18n/locale doesn't exist already
    2. Open a new issue to avoid overlap with other contributos. To be sure, check also no one else has opened already an issue for the same language
    3. Start a new branch from dev
    4. Copy (in the same folder) and rename the en locale file to the name of your language of choice (be sure to be compliant to ISO 639-1)
    5. Now you can start translating strings
    6. By following comments you'll probably notice that some keys are not indicated (eg. styleManager.properties), for the reference you can check other locale files
    7. Once you've done, you can create a new Pull Request on GitHub from your branch to dev by making also a reference to your issue in order to close it automatically once it's merged (your PR message should contain Closes #1234 where 1234 is the issue ID)

    # Plugin development

    ::: warning -This section is dedicated only to plugin developers and can also be skipped in case you use grapesjs-cli to init your plugin project -:::

    If you're developing a plugin for GrapesJS and you need to support some string localization or simply change the default one, we recommend the following structure.

    plugin-dir
+

    # Adding new language

    If you want to support GrapesJS by adding a new language to our repository all you need to do is to follow steps below:

    1. First of all, be sure to check the language file in src/i18n/locale doesn't exist already
    2. Open a new issue to avoid overlap with other contributos. To be sure, check also no one else has opened already an issue for the same language
    3. Start a new branch from dev
    4. Copy (in the same folder) and rename the en locale file to the name of your language of choice (be sure to be compliant to ISO 639-1)
    5. Now you can start translating strings
    6. By following comments you'll probably notice that some keys are not indicated (eg. styleManager.properties), for the reference you can check other locale files
    7. Once you've done, you can create a new Pull Request on GitHub from your branch to dev by making also a reference to your issue in order to close it automatically once it's merged (your PR message should contain Closes #1234 where 1234 is the issue ID)

    # Plugin development

    WARNING

    This section is dedicated only to plugin developers and can also be skipped in case you use grapesjs-cli to init your plugin project

    If you're developing a plugin for GrapesJS and you need to support some string localization or simply change the default one, we recommend the following structure.

    plugin-dir
 - package.json
 - README.md
 - ...
@@ -130,9 +126,7 @@ This section is dedicated only to plugin developers and can als
         ...options.i18n,
     });
 }
-

    The next step would be to compile your locale files into <rootDir>/locale directory to make them easily accessible by your users. This folder could be ignored in your git repository be should be deployd to the npm registry

    ::: warning -Remember that you can skip all these long steps and init your project with grapesjs-cli. This will create all the necessary folders/files/commands for you (during init command this step is flagged true by default and we recommend to keep it even in case the i18n is not required in your project) -:::

    At the end, your plugin users will be able to import other locale files (if they exist) in this way

    import grapesjs from 'grapesjs';
+

    The next step would be to compile your locale files into <rootDir>/locale directory to make them easily accessible by your users. This folder could be ignored in your git repository be should be deployd to the npm registry

    WARNING

    Remember that you can skip all these long steps and init your project with grapesjs-cli. This will create all the necessary folders/files/commands for you (during init command this step is flagged true by default and we recommend to keep it even in case the i18n is not required in your project)

    At the end, your plugin users will be able to import other locale files (if they exist) in this way

    import grapesjs from 'grapesjs';
 
 // Import from your plugin
 import yourPlugin from 'grapesjs-your-plugin';
@@ -157,6 +151,6 @@ Remember that you can skip all these long steps and init your project with 
       →
    - + diff --git a/docs/modules/Plugins.html b/docs/modules/Plugins.html index 766f29b73..8de4f38ad 100644 --- a/docs/modules/Plugins.html +++ b/docs/modules/Plugins.html @@ -4,13 +4,13 @@ Plugins | GrapesJS - + - - + +
    GrapesJS

    # Plugins

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

    # Basic plugin

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

      function myPlugin(editor){
+     
       
     
    # Plugins
     
    Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.
     
     
    # Basic plugin
     
    The most simple plugins are just functions that are run when the editor is being built.
     
      function myPlugin(editor){
       editor.BlockManager.add('my-first-block', {
         label: 'Simple block',
         content: '<div class="my-block">This is a simple block</div>',
@@ -61,14 +61,14 @@
   * editor.Commands.add(...);
   */
 })
-
    The name my-plugin-name is an ID of your plugin and you'll use it to tell your editor to grab it.
     
    Here is a complete generic example:
     
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
-<link rel="stylesheet" href="path/to/grapes.min.css">
-<script src="path/to/grapes.min.js"></script>
-<script src="path/to/grapesjs-plugin.js"></script>
+
    The name my-plugin-name is an ID of your plugin and you'll use it to tell your editor to grab it.
     
    Here is a complete generic example:
     
    <script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
+<link rel="stylesheet" href="path/to/grapes.min.css">
+<script src="path/to/grapes.min.js"></script>
+<script src="path/to/grapesjs-plugin.js"></script>
 
-<div id="gjs"></div>
+<div id="gjs"></div>
 
-<script type="text/javascript">
+<script type="text/javascript">
   var editor = grapesjs.init({
       container : '#gjs',
       plugins: ['my-plugin-name']
@@ -108,6 +108,6 @@
       
       →
    - + diff --git a/docs/modules/Storage.html b/docs/modules/Storage.html index 46779792d..a4fd3ca9d 100644 --- a/docs/modules/Storage.html +++ b/docs/modules/Storage.html @@ -4,13 +4,13 @@ Storage Manager | GrapesJS - + - - + +
    GrapesJS

    # 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
@@ -108,7 +106,7 @@ When you load the template, return a JSON object with the data
   'gjs-style': [...],
 ]);

    # Storage API

    The Storage module has also its own set of API that allows you to extend and add new functionalities.

    # Define new storage

    One of the most useful methods of API is the possibility to add new storages. You might think, we have the local and remote storages, what else do we need, right? Well, let's take as an example the local one. As you already know, it relies on localStorage API 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 IndexedDB which is also quite well supported and allows more space usage (each browser implements its own rules, for a better understanding on how browser storage limits work, check here). -IndexedDB configuration might be too much verbose for this guide so we decided to create the grapesjs-indexeddb 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.

    const editor = grapesjs.init({
+IndexedDB configuration might be too much verbose for this guide so we decided to create the grapesjs-indexeddb plugin, so you can check its source and see how it's implemented. For this guide we are going to see something much 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.
     
    const editor = grapesjs.init({
   ...
   storageManager: { type: 'simple-storage' },
 });
@@ -193,7 +191,7 @@ editor.on// do stuff
     }
 });
-

    +

    ←

    GrapesJS

    # 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, height, min-width, min-height, max-width, max-height, 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, flex-direction, flex-wrap, justify-content, align-items, align-content, order, flex-basis, flex-grow, flex-shrink, align-self, overflow, overflow-x, overflow-y

    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, height, min-width, min-height, max-width, max-height, 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, flex-direction, flex-wrap, justify-content, align-items, align-content, order, flex-basis, flex-grow, flex-shrink, align-self, overflow, overflow-x, overflow-y
     
    Example usage:
     
    ...
   styleManager : {
     sectors: [{
       name: 'Dimension',
@@ -53,6 +53,6 @@
       
       →
    - + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index 519c2fe78..6b4625080 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -4,13 +4,13 @@ Trait Manager | GrapesJS - + - - + +
    GrapesJS

    # Trait Manager

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

    ::: warning -This guide is referring to GrapesJS v0.15.3 or higher.

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

    # Add Traits to Components

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

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

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

    editor.DomComponents.addType('input', {
+     
       
     
    # Trait Manager
     
    In GrapesJS, Traits define different parameters and behaviors of a component. The user generally will see traits as the Settings of a component. A common use of traits is to customize element attributes (eg. placeholder for <input>) or you can also bind them to the properties of your components and react on their changes.
     
    WARNING
     
    This guide is referring to GrapesJS v0.15.3 or higher.

    
+To get a better understanding of the content in this guide we recommend reading Components first
     
     
    # Add Traits to Components
     
    Generally you define traits on the definition of your new custom components (or by extending another one). Let's see in this example how to make inputs more customizable by the editor.
     
    All components, by default, contain two traits: id and title (at the moment of writing). So, if you select an input and open the Settings panel you will see this:
      
    We can start by creating a new custom input component in this way:
     
    editor.DomComponents.addType('input', {
     isComponent: el => el.tagName == 'INPUT',
     model: {
       defaults: {
@@ -214,7 +212,7 @@ editor.DomComponentscreateInput({ trait }) {
     // Here we can decide to use properties from the trait
     const traitOpts = trait.get('options') || [];
-    const options = traitOpts.lenght ? traitOpts : [
+    const options = traitOpts.length ? traitOpts : [
       { id: 'url', name: 'URL' },
       { id: 'email', name: 'Email' },
     ];
@@ -369,7 +367,7 @@ By default, the base trait wrapper applies a listener on change eve
 Depends on the framework, for example, in React it should be ReactDOM.render(element, ... 
  • Change propogation: sliderInst.$on('change', ev => this.onChange(ev))
    
 The framework should have a mechanism to subscribe to changes and the component should expose that change
    
 We've also used onChange method which comes handy when you need to trigger manually the onEvent event (you should never call directly onEvent method, but only via onChange when you need)
    •  
  • Property getters/setters: sliderInst.getValue()/ sliderInst.setValue(value)
    
-The component should allow to read and write data from the instance
    •   
    
+The component should allow to read and write data from the instance
      
    
       ←