diff --git a/docs/404.html b/docs/404.html index cde1fdb70..b4abcfc50 100644 --- a/docs/404.html +++ b/docs/404.html @@ -4,19 +4,19 @@ GrapesJS - + - - - + + + -

404

There's nothing here.
+ - + diff --git a/docs/Home.html b/docs/Home.html index ab4d1f841..00d8707ec 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -4,14 +4,14 @@ Getting started | GrapesJS - + - - - + + + - + diff --git a/docs/api/assets.html b/docs/api/assets.html index fd956ebc0..acb349b12 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# AssetManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# AssetManager
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  assetManager: {
    // options
  }
@@ -57,7 +57,7 @@ assetManager.: './path/to/img.png',
 }]);
 
Returns Model
 
# get
 
Returns the asset by URL
 
# Parameters
  
# Examples
 
var asset = assetManager.get('http://img.jpg');
-
Returns Object (opens new window) Object representing the asset
 
# getAll
 
Return the global collection, containing all the assets
 
Returns Collection
 
# getAllVisible
 
Return the visible collection, which containes assets actually rendered
 
Returns Collection
 
# remove
 
Remove the asset by its URL
 
# Parameters
  
# Examples
 
assetManager.remove('http://img.jpg');
+
Returns Object (opens new window) Object representing the asset
 
# getAll
 
Return the global collection, containing all the assets
 
Returns Collection
 
# getAllVisible
 
Return the visible collection, which contains assets actually rendered
 
Returns Collection
 
# remove
 
Remove the asset by its URL
 
# Parameters
  
# Examples
 
assetManager.remove('http://img.jpg');
 
Returns this
 
# store
 
Store assets data to the selected storage
 
# Parameters
  
# Examples
 
var assets = assetManager.store();
 
Returns Object (opens new window) Data to store
 
# load
 
Load data from the passed object.
 The fetched data will be added to the collection.
 
# Parameters
  
# Examples
 
var assets = assetManager.load({
@@ -80,7 +80,7 @@ passed entity 
: {},
  isType: (value) => {},
 })
-
# getType
 
Get type
 
# Parameters
  
Returns Object (opens new window) Type definition
 
# getTypes
 
Get types
 
Returns Array (opens new window)
  

+

# getType

Get type

# Parameters

Returns Object (opens new window) Type definition

# getTypes

Get types

Returns Array (opens new window)

←

- + diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index 52efe72fc..328e3cef8 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# BlockManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# BlockManager
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  blockManager: {
    // options
  }
 })
 
Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
 
const blockManager = editor.BlockManager;
-
 
# getConfig
 
Get configuration object
 
Returns Object (opens new window)
 
# onLoad
 
Load default blocks if the collection is empty
 
# add
 
Add new block to the collection.
 
# Parameters

# getConfig

Get configuration object

Returns Object (opens new window)

# onLoad

Load default blocks if the collection is empty

# add

Add new block to the collection.

# Parameters

Returns Block Removed block

# getCategories

Get all available categories. -It's possible to add categories only within blocks via 'add()' method

Returns (Array (opens new window) | Collection)

# getContainer

Return the Blocks container element

Returns HTMLElement (opens new window)

# render

Render blocks

# Parameters

# Examples

// Render all blocks (inside the global collection)
+It's possible to add categories only within blocks via 'add()' method
 
Returns (Array (opens new window) | Collection)
 
# getContainer
 
Return the Blocks container element
 
Returns HTMLElement (opens new window)
 
# render
 
Render blocks
 
# Parameters
  
# Examples
 
// Render all blocks (inside the global collection)
 blockManager.render();
 
 // Render new set of blocks
@@ -83,7 +81,7 @@ blockManager.// You can also render your blocks outside of the main block container
 const newBlocksEl = blockManager.render(filtered, { external: true });
 document.getElementById('some-id').appendChild(newBlocksEl);
-
Returns HTMLElement (opens new window) Rendered element

+

Returns HTMLElement (opens new window) Rendered element

← →

- + diff --git a/docs/api/canvas.html b/docs/api/canvas.html index d166fcc5b..1c834ad48 100644 --- a/docs/api/canvas.html +++ b/docs/api/canvas.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Canvas

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Canvas
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  canvas: {
    // options
  }
@@ -46,8 +46,7 @@
 
# getRect
 
Get canvas rectangular data
 
Returns Object (opens new window)
 
# hasFocus
 
Check if the canvas is focused
 
Returns Boolean (opens new window)
 
# scrollTo
 
Scroll canvas to the element if it's not visible. The scrolling is
 executed via scrollIntoView API and options of this method are
 passed to it. For instance, you can scroll smoothly by using
-{ behavior: 'smooth' }.
 
# Parameters
  
# Examples
 
const selected = editor.getSelected();
+{ behavior: 'smooth' }.
 
# Parameters
  
# Examples
 
const selected = editor.getSelected();
 // Scroll smoothly (this behavior can be polyfilled)
 canvas.scrollTo(selected, { behavior: 'smooth' });
 // Force the scroll, even if the element is alredy visible
@@ -68,7 +67,7 @@ styles: 
 .testp { color: blue; }
 `,
 });
-
Returns Frame
  

+

Returns Frame

← →

- + diff --git a/docs/api/commands.html b/docs/api/commands.html index 49f443261..c0a7168d9 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Commands

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
+     (opens new window) 
   
 
# Commands
 
You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
 
const editor = grapesjs.init({
  commands: {
    // options
  }
@@ -71,7 +71,7 @@ commands.isA
 // -> false
 
Returns Boolean (opens new window)
 
# getActive
 
Get all active commands
 
# Examples
 
console.log(commands.getActive());
 // -> { someCommand: itsLastReturn, anotherOne: ... };
-
Returns Object (opens new window)
  

+

Returns Object (opens new window)

← →

- + diff --git a/docs/api/component.html b/docs/api/component.html index 9bd2ce211..ef8f1dede 100644 --- a/docs/api/component.html +++ b/docs/api/component.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
GrapesJS

# Component

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

# 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({
@@ -47,52 +47,52 @@ component.ge

# Properties

# init

Hook method, called once the model is created

# updated

Hook method, called when the model has been updated (eg. updated some model's property)

# Parameters

  • property String (opens new window) Property name, if triggered after some property update
  • value any Property value, if triggered after some property update
  • previous any Property previous value, if triggered after some property update

# removed

Hook method, called once the model has been removed

# is

Check component's type

# Parameters

# Examples

component.is('image')
+By default, when toolbar property is falsy the editor will add automatically commands like move, delete, etc. based on its properties. 
  • components Collection<Component>? Children components. Default: null
    •  
    # init
     
    Hook method, called once the model is created
     
    # updated
     
    Hook method, called when the model has been updated (eg. updated some model's property)
     
    # Parameters
     
    • property String (opens new window) Property name, if triggered after some property update
      •  
    • value any Property value, if triggered after some property update
      •  
    • previous any Property previous value, if triggered after some property update
     
    # removed
     
    Hook method, called once the model has been removed
     
    # is
     
    Check component's type
     
    # Parameters
      
    # Examples
     
    component.is('image')
 // -> false
-
    Returns Boolean (opens new window)
     
    # props
     
    Return all the propeties
     
    Returns Object (opens new window)
     
    # index
     
    Get the index of the component in the parent collection.
     
    Returns Number (opens new window)
     
    # setDragMode
     
    Change the drag mode of the component.
-To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 (opens new window)
     
    # Parameters
      
    Returns this
     
    # find
     
    Find inner components by query string.
-ATTENTION: this method works only with already rendered component
     
    # Parameters
      
    # Examples
     
    component.find('div > .class');
+
    Returns Boolean (opens new window)
     
    # props
     
    Return all the propeties
     
    Returns Object (opens new window)
     
    # index
     
    Get the index of the component in the parent collection.
     
    Returns Number (opens new window)
     
    # setDragMode
     
    Change the drag mode of the component.
+To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 (opens new window)
     
    # Parameters
      
    Returns this
     
    # find
     
    Find inner components by query string.
+ATTENTION: this method works only with already rendered component
     
    # Parameters
      
    # Examples
     
    component.find('div > .class');
 // -> [Component, Component, ...]
-
    Returns Array (opens new window) Array of components
     
    # findType
     
    Find all inner components by component type.
+

    Returns Array (opens new window) Array of components

    # findType

    Find all inner components by component type. The advantage of this method over find is that you can use it -also before rendering the component

    # Parameters

    # Examples

    const allImages = component.findType('image');
+also before rendering the component
     
    # Parameters
      
    # Examples
     
    const allImages = component.findType('image');
 console.log(allImages[0]) // prints the first found component
-
    Returns Array (opens new window)<Component>
     
    # closest
     
    Find the closest parent component by query string.
-ATTENTION: this method works only with already rendered component
     
    # Parameters
      
    # Examples
     
    component.closest('div.some-class');
+
    Returns Array (opens new window)<Component>
     
    # closest
     
    Find the closest parent component by query string.
+ATTENTION: this method works only with already rendered component
     
    # Parameters
      
    # Examples
     
    component.closest('div.some-class');
 // -> Component
-
    Returns Component
     
    # closestType
     
    Find the closest parent component by its type.
+

    Returns Component

    # closestType

    Find the closest parent component by its type. The advantage of this method over closest is that you can use it -also before rendering the component

    # Parameters

    # Examples

    const Section = component.closestType('section');
+also before rendering the component
     
    # Parameters
      
    # Examples
     
    const Section = component.closestType('section');
 console.log(Section);
-
    Returns Component Found component, otherwise undefined
     
    # contains
     
    The method returns a Boolean value indicating whether the passed
-component is a descendant of a given component
     
    # Parameters
      
    Returns Boolean (opens new window)
     
    # replaceWith
     
    Replace a component with another one
     
    # Parameters
      
    # Examples
     
    component.replaceWith('<div>Some new content</div>');
+
    Returns Component Found component, otherwise undefined
     
    # contains
     
    The method returns a Boolean value indicating whether the passed
+component is a descendant of a given component
     
    # Parameters
      
    Returns Boolean (opens new window)
     
    # replaceWith
     
    Replace a component with another one
     
    # Parameters
      
    # Examples
     
    component.replaceWith('<div>Some new content</div>');
 // -> Component
-
    Returns (Component | Array (opens new window)<Component>) New added component/s
     
    # setAttributes
     
    Update attributes of the component
     
    # Parameters
      
    # Examples
     
    component.setAttributes({ id: 'test', 'data-key': 'value' });
-
    Returns this
     
    # addAttributes
     
    Add attributes to the component
     
    # Parameters
      
    # Examples
     
    component.addAttributes({ 'data-key': 'value' });
-
    Returns this
     
    # removeAttributes
     
    Remove attributes from the component
     
    # Parameters
      
    # Examples
     
    component.removeAttributes('some-attr');
+
    Returns (Component | Array (opens new window)<Component>) New added component/s
     
    # setAttributes
     
    Update attributes of the component
     
    # Parameters
      
    # Examples
     
    component.setAttributes({ id: 'test', 'data-key': 'value' });
+
    Returns this
     
    # addAttributes
     
    Add attributes to the component
     
    # Parameters
      
    # Examples
     
    component.addAttributes({ 'data-key': 'value' });
+
    Returns this
     
    # removeAttributes
     
    Remove attributes from the component
     
    # Parameters
      
    # Examples
     
    component.removeAttributes('some-attr');
 component.removeAttributes(['some-attr1', 'some-attr2']);
-
    Returns this
     
    # getStyle
     
    Get the style of the component
     
    Returns Object (opens new window)
     
    # setStyle
     
    Set the style on the component
     
    # Parameters
      
    # Examples
     
    component.setStyle({ color: 'red' });
-
    Returns Object (opens new window)
     
    # getAttributes
     
    Return all component's attributes
     
    # Parameters
     
    • opts   (optional, default {})
     
    Returns Object (opens new window)
     
    # addClass
     
    Add classes
     
    # Parameters
      
    # Examples
     
    model.addClass('class1');
+
    Returns this
     
    # getStyle
     
    Get the style of the component
     
    # Parameters
     
    • opts   (optional, default {})
     
    Returns Object (opens new window)
     
    # setStyle
     
    Set the style on the component
     
    # Parameters
      
    # Examples
     
    component.setStyle({ color: 'red' });
+
    Returns Object (opens new window)
     
    # getAttributes
     
    Return all component's attributes
     
    # Parameters
     
    • opts   (optional, default {})
     
    Returns Object (opens new window)
     
    # addClass
     
    Add classes
     
    # Parameters
      
    # Examples
     
    model.addClass('class1');
 model.addClass('class1 class2');
 model.addClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
    Returns Array (opens new window) Array of added selectors
     
    # setClass
     
    Set classes (resets current collection)
     
    # Parameters
      
    # Examples
     
    model.setClass('class1');
+
    Returns Array (opens new window) Array of added selectors
     
    # setClass
     
    Set classes (resets current collection)
     
    # Parameters
      
    # Examples
     
    model.setClass('class1');
 model.setClass('class1 class2');
 model.setClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
    Returns Array (opens new window) Array of added selectors
     
    # removeClass
     
    Remove classes
     
    # Parameters
      
    # Examples
     
    model.removeClass('class1');
+
    Returns Array (opens new window) Array of added selectors
     
    # removeClass
     
    Remove classes
     
    # Parameters
      
    # Examples
     
    model.removeClass('class1');
 model.removeClass('class1 class2');
 model.removeClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-
    Returns Array (opens new window) Array of removed selectors
     
    # getClasses
     
    Returns component's classes as an array of strings
     
    Returns Array (opens new window)
     
    # append
     
    Add new component children
     
    # Parameters
      
    # Examples
     
    someComponent.get('components').length // -> 0
+
    Returns Array (opens new window) Array of removed selectors
     
    # getClasses
     
    Returns component's classes as an array of strings
     
    Returns Array (opens new window)
     
    # append
     
    Add new component children
     
    # Parameters
      
    # Examples
     
    someComponent.get('components').length // -> 0
 const videoComponent = someComponent.append('<video></video><div></div>')[0];
 // This will add 2 components (`video` and `div`) to your `someComponent`
 someComponent.get('components').length // -> 2
@@ -101,35 +101,34 @@ otherComponent..append([otherComponent3, otherComponent4]);
 // append at specific index (eg. at the beginning)
 someComponent.append(otherComponent, { at: 0 });
-
    Returns Array (opens new window) Array of appended components
     
    # components
     
    Set new collection if components are provided, otherwise the
-current collection is returned
     
    # Parameters
      
    # Examples
     
    // Set new collection
+
    Returns Array (opens new window) Array of appended components
     
    # components
     
    Set new collection if components are provided, otherwise the
+current collection is returned
     
    # Parameters
      
    # Examples
     
    // Set new collection
 component.components('<span></span><div></div>');
 // Get current collection
 const collection = component.components();
 console.log(collection.length);
 // -> 2
-
    Returns (Collection | Array (opens new window)<Component>)
     
    # empty
     
    Remove all inner components
     
    • @return {this}
     
    # Parameters
     
    • opts   (optional, default {})
     
    # parent
     
    Get the parent component, if exists
     
    # Parameters
     
    • opts   (optional, default {})
     
    # Examples
     
    component.parent();
+
    Returns (Collection | Array (opens new window)<Component>)
     
    # empty
     
    Remove all inner components
     
    • @return {this}
     
    # Parameters
     
    • opts   (optional, default {})
     
    # parent
     
    Get the parent component, if exists
     
    # Parameters
     
    • opts   (optional, default {})
     
    # Examples
     
    component.parent();
 // -> Component
-
    Returns Component
     
    # getTrait
     
    Get the trait by id/name
     
    # Parameters
      
    # Examples
     
    const traitTitle = component.getTrait('title');
+
    Returns Component
     
    # getTrait
     
    Get the trait by id/name
     
    # Parameters
      
    # Examples
     
    const traitTitle = component.getTrait('title');
 traitTitle && traitTitle.set('label', 'New label');
-
    Returns Trait Trait model
     
    # updateTrait
     
    Update a trait
     
    # Parameters
      
    # Examples
     
    component.updateTrait('title', {
+
    Returns Trait Trait model
     
    # updateTrait
     
    Update a trait
     
    # Parameters
      
    # Examples
     
    component.updateTrait('title', {
  type: 'select',
  options: [ 'Option 1', 'Option 2' ],
 });
-
    Returns this
     
    # getTraitIndex
     
    Get the trait position index by id/name. Useful in case you want to
-replace some trait, at runtime, with something else.
     
    # Parameters
      
    # Examples
     
    const traitTitle = component.getTraitIndex('title');
+
    Returns this
     
    # getTraitIndex
     
    Get the trait position index by id/name. Useful in case you want to
+replace some trait, at runtime, with something else.
     
    # Parameters
      
    # Examples
     
    const traitTitle = component.getTraitIndex('title');
 console.log(traitTitle); // 1
-
    Returns Number (opens new window) Index position of the current trait
     
    # removeTrait
     
    Remove trait/s by id/s.
     
    # Parameters
      
    # Examples
     
    component.removeTrait('title');
+
    Returns Number (opens new window) Index position of the current trait
     
    # removeTrait
     
    Remove trait/s by id/s.
     
    # Parameters
      
    # Examples
     
    component.removeTrait('title');
 component.removeTrait(['title', 'id']);
-
    Returns Array (opens new window) Array of removed traits
     
    # addTrait
     
    Add trait/s by id/s.
     
    # Parameters
      
    # Examples
     
    component.addTrait('title', { at: 1 }); // Add title trait (`at` option is the position index)
+
    Returns Array (opens new window) Array of removed traits
     
    # addTrait
     
    Add trait/s by id/s.
     
    # Parameters
      
    # Examples
     
    component.addTrait('title', { at: 1 }); // Add title trait (`at` option is the position index)
 component.addTrait({
  type: 'checkbox',
  name: 'disabled',
 });
 component.addTrait(['title', {...}, ...]);
-
    Returns Array (opens new window) Array of added traits
     
    # getName
     
    Get the name of the component
     
    Returns String (opens new window)
     
    # getIcon
     
    Get the icon string
     
    Returns String (opens new window)
     
    # toHTML
     
    Return HTML string of the component
     
    # Parameters
      
    # Examples
     
    // Simple HTML return
+
    Returns Array (opens new window) Array of added traits
     
    # getName
     
    Get the name of the component
     
    Returns String (opens new window)
     
    # getIcon
     
    Get the icon string
     
    Returns String (opens new window)
     
    # toHTML
     
    Return HTML string of the component
     
    # Parameters
      
    # Examples
     
    // Simple HTML return
 component.set({ tagName: 'span' });
 component.setAttributes({ title: 'Hello' });
 component.toHTML();
@@ -149,19 +148,19 @@ component.to
  },
 });
 // -> <span title="Custom attribute"></span>
-
    Returns String (opens new window) HTML string
     
    # getChangedProps
     
    Return an object containing only changed props
     
    # Parameters
     
    • res
     
    # getId
     
    Return the component id
     
    Returns String (opens new window)
     
    # setId
     
    Set new id on the component
     
    # Parameters
      
    Returns this
     
    # getEl
     
    Get the DOM element of the component.
-This works only if the component is already rendered
     
    # Parameters
     
    • frame Frame Specific frame from which taking the element
     
    Returns HTMLElement (opens new window)
     
    # getView
     
    Get the View of the component.
-This works only if the component is already rendered
     
    # Parameters
     
    • frame Frame Get View of a specific frame
     
    Returns ComponentView
     
    # onAll
     
    Execute callback function on itself and all inner components
     
    # Parameters
      
    # Examples
     
    component.onAll(component => {
+
    Returns String (opens new window) HTML string
     
    # getChangedProps
     
    Return an object containing only changed props
     
    # Parameters
     
    • res
     
    # getId
     
    Return the component id
     
    Returns String (opens new window)
     
    # setId
     
    Set new id on the component
     
    # Parameters
      
    Returns this
     
    # getEl
     
    Get the DOM element of the component.
+This works only if the component is already rendered
     
    # Parameters
     
    • frame Frame Specific frame from which taking the element
     
    Returns HTMLElement (opens new window)
     
    # getView
     
    Get the View of the component.
+This works only if the component is already rendered
     
    # Parameters
     
    • frame Frame Get View of a specific frame
     
    Returns ComponentView
     
    # onAll
     
    Execute callback function on itself and all inner components
     
    # Parameters
      
    # Examples
     
    component.onAll(component => {
  // do something with component
 })
-
    Returns this
     
    # remove
     
    Remove the component
     
    # Parameters
     
    • opts   (optional, default {})
     
    Returns this
     
    # move
     
    Move the component to another destination component
     
    # Parameters
     
    • component Component Destination component (so the current one will be appended as a child)
      •  
    • opts Object (opens new window) Options for the append action (optional, default {})
     
    # Examples
     
    // Move the selected component on top of the wrapper
+
    Returns this
     
    # remove
     
    Remove the component
     
    # Parameters
     
    • opts   (optional, default {})
     
    Returns this
     
    # move
     
    Move the component to another destination component
     
    # Parameters
     
    • component Component Destination component (so the current one will be appended as a child)
      •  
    • opts Object (opens new window) Options for the append action (optional, default {})
     
    # Examples
     
    // Move the selected component on top of the wrapper
 const dest = editor.getWrapper();
 editor.getSelected().move(dest, { at: 0 });
-
    Returns this
     
    # getList
     
    The list of components is taken from the Components module.
+

    Returns this

    # getList

    The list of components is taken from the Components module. Initially, the list, was set statically on the Component object but it was -not ok, as it was shared between multiple editor instances

    # Parameters

    • model

    # checkId

    This method checks, for each parsed component and style object +not ok, as it was shared between multiple editor instances

    # Parameters

    • model

    # checkId

    This method checks, for each parsed component and style object (are not Components/CSSRules yet), for duplicated id and fixes them -This method is used in Components.js just after the parsing

    # Parameters

    • components
    • styles (optional, default [])
    • list (optional, default {})
    • opts (optional, default {})

    +This method is used in Components.js just after the parsing

    # Parameters

    • components
    • styles (optional, default [])
    • list (optional, default {})
    • opts (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 (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # 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 (opens new window)
     
    const editor = grapesjs.init({
  domComponents: {
    // options
  }
@@ -70,8 +70,7 @@ comp1Children.// Remove comp2
 wrapperChildren.remove(comp2);
 
    Returns Components Collection of components
     
    # addComponent
     
    Add new components to the wrapper's children. It's the same
-as 'domComponents.getComponents().add(...)'
     
    # Parameters
      
    # Examples
     
    // Example of a new component with some extra property
+as 'domComponents.getComponents().add(...)'
     
    # Parameters
      
    # Examples
     
    // Example of a new component with some extra property
 var comp1 = domComponents.addComponent({
   tagName: 'div',
   removable: true, // Can't remove it
@@ -86,15 +85,15 @@ 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 (opens new window)
     
    # clear
     
    Remove all components
     
    # Parameters
     
    • opts   (optional, default {})
     
    Returns this
     
    # addType
     
    Add new component type.
 Read more about this in Define New Component (opens new window)
     
    # Parameters
      
    Returns this
     
    # getType
     
    Get component type.
-Read more about this in Define New Component (opens new window)
     
    # Parameters
      
    Returns Object (opens new window) Component type defintion, eg. { model: ..., view: ... }
     
    # removeType
     
    Remove component type
     
    # Parameters
      
    Returns (Object (opens new window) | undefined (opens new window)) Removed component type, undefined otherwise
     
    # getTypes
     
    Return the array of all types
     
    Returns Array (opens new window)
      
    
+Read more about this in Define New Component (opens new window)
     
    # Parameters
      
    Returns Object (opens new window) Component type defintion, eg. { model: ..., view: ... }
     
    # removeType
     
    Remove component type
     
    # Parameters
      
    Returns (Object (opens new window) | undefined (opens new window)) Removed component type, undefined otherwise
     
    # getTypes
     
    Return the array of all types
     
    Returns Array (opens new window)
      
    
       ←
        
-         - Component
+         ‍  ‍  ‍ Component
       
       →
    - + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index 06f1a1078..26cd4b69e 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # CssComposer

    This module contains and manage CSS rules for the template inside the canvas. + (opens new window)

    # 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 (opens new window)

    const editor = grapesjs.init({
  cssComposer: {
    // options
@@ -60,8 +60,7 @@ rule.set: '300px',
   color: '#000',
 });
-

    Returns (Model | null)

    # getAll

    Get the collection of rules

    Returns Collection

    # clear

    Remove all rules

    # Parameters

    • opts (optional, default {})

    Returns this

    # setRule

    Add/update the CSS rule with a generic selector

    # Parameters

    # Examples

    // Simple class-based rule
+

    Returns (Model | null)

    # getAll

    Get the collection of rules

    Returns Collection

    # clear

    Remove all rules

    # Parameters

    • opts (optional, default {})

    Returns this

    # setRule

    Add/update the CSS rule with a generic selector

    # Parameters

    # Examples

    // Simple class-based rule
 const rule = cc.setRule('.class1.class2', { color: 'red' });
 console.log(rule.toCSS()) // output: .class1.class2 { color: red }
 // With state and other mixed selector
@@ -83,7 +82,7 @@ console.log<
 const id = someComponent.getId();
 const rules = cc.getRules(`#${id}`);
 console.log(rules.map(rule => rule.toCSS()))
-

    Returns Array (opens new window)<CssRule>

    +

    Returns Array (opens new window)<CssRule>

    ← →

    - + diff --git a/docs/api/device_manager.html b/docs/api/device_manager.html index 687d083a5..581c0984b 100644 --- a/docs/api/device_manager.html +++ b/docs/api/device_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # DeviceManager

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # DeviceManager
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  deviceManager: {
    // options
  }
@@ -54,7 +54,7 @@ console.log<
 
    # getAll
     
    Return all devices
     
    # Examples
     
    var devices = deviceManager.getAll();
 console.log(JSON.stringify(devices));
 // [{name: 'Desktop', width: ''}, ...]
-
    Returns Collection
      
    
+

    Returns Collection

    ← →

    - + diff --git a/docs/api/editor.html b/docs/api/editor.html index 691d0efba..5a8260139 100644 --- a/docs/api/editor.html +++ b/docs/api/editor.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Editor

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

    # 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 (opens new window)

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

    # Available Events

    You can make use of available events in this way

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

    # Components

    • component:create - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
    • component:mount - Component is mounted to an element and rendered in canvas
    • component:add - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
    • component:remove - Triggered when a component is removed, the model is passed as an argument to the callback
    • component:remove:before - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments 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

    # Parser

    • parse:html - On HTML parse, an object containing the input and the output of the parser is passed as an argument
    • parse:css - On CSS parse, an object containing the input and the output of the parser is passed as an argument

    # Commands

    • run:{commandName} - Triggered when some command is called to run (eg. editor.runCommand('preview'))
    • stop:{commandName} - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
    • run:{commandName}:before - Triggered before the command is called
    • stop:{commandName}:before - Triggered before the command is called to stop
    • abort:{commandName} - Triggered when the command execution is aborted (editor.on(run:preview:before, opts => opts.abort = 1);)
    • 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

    # Pages

    Check the Pages module.

    # 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

    Returns string (opens new window) HTML string

    # getCss

    Returns CSS built inside canvas

    # Parameters

    Returns string (opens new window) CSS string

    # getJs

    Returns JS of all components

    Returns string (opens new window) 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>');
+

    # 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:remove:before - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments 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

    # Parser

    • parse:html - On HTML parse, an object containing the input and the output of the parser is passed as an argument
    • parse:css - On CSS parse, an object containing the input and the output of the parser is passed as an argument

    # Commands

    • run:{commandName} - Triggered when some command is called to run (eg. editor.runCommand('preview'))
    • stop:{commandName} - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
    • run:{commandName}:before - Triggered before the command is called
    • stop:{commandName}:before - Triggered before the command is called to stop
    • abort:{commandName} - Triggered when the command execution is aborted (editor.on(run:preview:before, opts => opts.abort = 1);)
    • 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

    # Pages

    Check the Pages module.

    # 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

    Returns string (opens new window) HTML string

    # getCss

    Returns CSS built inside canvas

    # Parameters

    Returns string (opens new window) CSS string

    # getJs

    Returns JS of all components

    # Parameters

    Returns string (opens new window) 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',
   classes:['cls'],
   content: 'New component'
 });
-

    Returns this

    # addComponents

    Add components

    # Parameters

    Returns this

    # addComponents

    Add components

    # Parameters

    # Examples

    editor.addComponents('<div class="cls">New component</div>');
 // or
@@ -62,37 +58,40 @@ editor.addCo
   classes:['cls'],
   content: 'New component'
 });
-

    Returns Array (opens new window)<Component>

    # getStyle

    Returns style in JSON format object

    Returns Object (opens new window)

    # setStyle

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

    # Parameters

    # Examples

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

    Returns Array (opens new window)<Component>

    # getStyle

    Returns style in JSON format object

    Returns Object (opens new window)

    # setStyle

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

    # Parameters

    # Examples

    editor.setStyle('.cls{color: red}');
 //or
 editor.setStyle({
   selectors: ['cls']
   style: { color: 'red' }
 });
-

    Returns this

    # getSelected

    Returns the last selected component, if there is one

    Returns Model

    # getSelectedAll

    Returns an array of all selected components

    Returns Array (opens new window)

    # getSelectedToStyle

    Get a stylable entity from the selected component. +

    Returns this

    # addStyle

    Add styles to the editor

    # Parameters

    # Examples

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

    Returns Array (opens new window)<CssRule> Array of created CssRule instances

    # getSelected

    Returns the last selected component, if there is one

    Returns Model

    # getSelectedAll

    Returns an array of all selected components

    Returns Array (opens new window)

    # getSelectedToStyle

    Get a stylable entity from the selected component. If you select a component without classes the entity is the Component itself and all changes will go inside its 'style' attribute. Otherwise, if the selected component has one or more classes, the function will -return the corresponding CSS Rule

    Returns Model

    # select

    Select a component

    # Parameters

    # Examples

    // Select dropped block
+return the corresponding CSS Rule
     
    Returns Model
     
    # select
     
    Select a component
     
    # Parameters
      
    # Examples
     
    // Select dropped block
 editor.on('block:drag:stop', function(model) {
  editor.select(model);
 });
-
    Returns this
     
    # selectAdd
     
    Add component to selection
     
    # Parameters
      
    # Examples
     
    editor.selectAdd(model);
-
    Returns this
     
    # selectRemove
     
    Remove component from selection
     
    # Parameters
      
    # Examples
     
    editor.selectRemove(model);
-
    Returns this
     
    # selectToggle
     
    Toggle component selection
     
    # Parameters
      
    # Examples
     
    editor.selectToggle(model);
-
    Returns this
     
    # setDevice
     
    Set device to the editor. If the device exists it will
-change the canvas to the proper width
     
    # Parameters
      
    # Examples
     
    editor.setDevice('Tablet');
-
    Returns this
     
    # getDevice
     
    Return the actual active device
     
    # Examples
     
    var device = editor.getDevice();
+
    Returns this
     
    # selectAdd
     
    Add component to selection
     
    # Parameters
      
    # Examples
     
    editor.selectAdd(model);
+
    Returns this
     
    # selectRemove
     
    Remove component from selection
     
    # Parameters
      
    # Examples
     
    editor.selectRemove(model);
+
    Returns this
     
    # selectToggle
     
    Toggle component selection
     
    # Parameters
      
    # Examples
     
    editor.selectToggle(model);
+
    Returns this
     
    # getEditing
     
    Returns, if active, the Component enabled in rich text editing mode.
     
    # Examples
     
    const textComp = editor.getEditing();
+if (textComp) {
+ console.log('HTML: ', textComp.toHTML());
+}
+
    Returns (Component | null)
     
    # setDevice
     
    Set device to the editor. If the device exists it will
+change the canvas to the proper width
     
    # Parameters
      
    # Examples
     
    editor.setDevice('Tablet');
+
    Returns this
     
    # getDevice
     
    Return the actual active device
     
    # Examples
     
    var device = editor.getDevice();
 console.log(device);
 // 'Tablet'
-
    Returns string (opens new window) Device name
     
    # runCommand
     
    Execute command
     
    # Parameters
      
    # Examples
     
    editor.runCommand('myCommand', {someValue: 1});
-
    Returns any The return is defined by the command
     
    # stopCommand
     
    Stop the command if stop method was provided
     
    # Parameters
      
    # Examples
     
    editor.stopCommand('myCommand', {someValue: 1});
-
    Returns any The return is defined by the command
     
    # store
     
    Store data to the current storage
     
    # Parameters
      
    Returns Object (opens new window) Stored data
     
    # load
     
    Load data from the current storage
     
    # Parameters
      
    Returns Object (opens new window) Stored data
     
    # getContainer
     
    Returns container element. The one which was indicated as 'container'
+

    Returns string (opens new window) Device name

    # runCommand

    Execute command

    # Parameters

    # Examples

    editor.runCommand('myCommand', {someValue: 1});
+

    Returns any The return is defined by the command

    # stopCommand

    Stop the command if stop method was provided

    # Parameters

    # Examples

    editor.stopCommand('myCommand', {someValue: 1});
+

    Returns any The return is defined by the command

    # store

    Store data to the current storage

    # Parameters

    Returns Object (opens new window) Stored data

    # load

    Load data from the current storage

    # Parameters

    Returns Object (opens new window) Stored data

    # getContainer

    Returns container element. The one which was indicated as 'container' on init method

    Returns HTMLElement (opens new window)

    # getDirtyCount

    Return the count of changes made to the content and not yet stored. This count resets at any store()

    Returns number (opens new window)

    # refresh

    Update editor dimension offsets

    This method could be useful when you update, for example, some position of the editor element (eg. canvas, panels, etc.) with CSS, where without -refresh you'll get misleading position of tools

    # Parameters

    # setCustomRte

    Replace the built-in Rich Text Editor with a custom one.

    # Parameters

    # Examples

    editor.setCustomRte({
+refresh you'll get misleading position of tools
     
    # Parameters
      
    # setCustomRte
     
    Replace the built-in Rich Text Editor with a custom one.
     
    # Parameters
      
    # Examples
     
    editor.setCustomRte({
   // Function for enabling custom RTE
   // el is the HTMLElement of the double clicked Text Component
   // rte is the same instance you have returned the first time you call
@@ -119,7 +118,7 @@ refresh you'll get misleading position of tools
     
    # setCustomParserCss
     
    Replace the default CSS parser with a custom one.
 The parser function receives a CSS string as a parameter and expects
 an array of CSSRule objects as a result. If you need to remove the
-custom parser, pass null as the argument
     
    # Parameters
      
    # Examples
     
    editor.setCustomParserCss(css => {
+custom parser, pass null as the argument
     
    # Parameters
      
    # Examples
     
    editor.setCustomParserCss(css => {
  const result = [];
  // ... parse the CSS string
  result.push({
@@ -130,20 +129,22 @@ custom parser, pass null as the argument
     
    return result;
 });
 
    Returns this
     
    # setDragMode
     
    Change the global drag mode of components.
-To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 (opens new window)
     
    # Parameters
      
    Returns this
     
    # log
     
    Trigger event log message
     
    # Parameters
      
    # Examples
     
    editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
+To get more about this feature read: https://github.com/artf/grapesjs/issues/1936 (opens new window)
     
    # Parameters
      
    Returns this
     
    # log
     
    Trigger event log message
     
    # Parameters
      
    # Examples
     
    editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
 // This will trigger following events
 // `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`
 // Callbacks of those events will always receive the message and
 // options, as arguments, eg:
 // editor.on('log:info', (msg, opts) => console.info(msg, opts))
-
    Returns this
     
    # t
     
    Translate label
     
    # Parameters
      
    # Examples
     
    editor.t('msg');
+
    Returns this
     
    # t
     
    Translate label
     
    # Parameters
      
    # Examples
     
    editor.t('msg');
 // use params
 editor.t('msg2', { params: { test: 'hello' } });
 // custom local
 editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
-
    Returns String (opens new window)
     
    # 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 (opens new window)
      
    
+
    Returns String (opens new window)
     
    # 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 (opens new window)
     
    # html
     
    Print safe HTML by using ES6 tagged template strings.
     
    # Parameters
      
    # Examples
     
    const unsafeStr = '<script>....</script>';
+const safeStr = '<b>Hello</b>';
+// Use `$${var}` to avoid escaping
+const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
+
    Returns String (opens new window)

    ←

    GrapesJS

    # I18n

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # I18n
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  i18n: {
    locale: 'en',
    localeFallback: 'en',
@@ -46,8 +46,7 @@
 })
 
    Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
     
    const i18n = editor.I18n;
 
    # Events
     
    • i18n:add - New set of messages is added
      •  
    • i18n:update - The set of messages is updated
      •  
    • i18n:locale - Locale changed
     
    # getConfig
     
    Get module configurations
     
    Returns Object (opens new window) Configuration object
     
    # setLocale
     
    Update current locale
     
    # Parameters
      
    # Examples
     
    i18n.setLocale('it');
-
    Returns this
     
    # getLocale
     
    Get current locale
     
    Returns String (opens new window) Current locale value
     
    # getMessages
     
    Get all messages
     
    # Parameters
      
    # Examples
     
    i18n.getMessages();
+
    Returns this
     
    # getLocale
     
    Get current locale
     
    Returns String (opens new window) Current locale value
     
    # getMessages
     
    Get all messages
     
    # Parameters
      
    # Examples
     
    i18n.getMessages();
 // -> { en: { hello: '...' }, ... }
 i18n.getMessages('en');
 // -> { hello: '...' }
@@ -63,8 +62,7 @@ i18n.addMess
 // Set updated
 i18n.getMessages();
 // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }
-
    Returns this
     
    # t
     
    Translate the locale message
     
    # Parameters
      
    # Examples
     
    obj.setMessages({
+
    Returns this
     
    # t
     
    Translate the locale message
     
    # Parameters
      
    # Examples
     
    obj.setMessages({
  en: { msg: 'Msg', msg2: 'Msg {test}'},
  it: { msg2: 'Msg {test} it'},
 });
@@ -74,7 +72,7 @@ obj.t
 // -> outputs `Msg hello`
 obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
 // -> outputs `Msg hello it`
-
    Returns String (opens new window)
      
    
+

    Returns String (opens new window)

    ← →

    - + diff --git a/docs/api/index.html b/docs/api/index.html index 6e062d392..85222a8f8 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -4,14 +4,14 @@ 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.

    + (opens new window)

    # 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 a42d1847a..0c1968d7f 100644 --- a/docs/api/keymaps.html +++ b/docs/api/keymaps.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Keymaps

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

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # Keymaps
     
    You can customize the initial state of the module from the editor initialization
     
    const editor = grapesjs.init({
  keymaps: {
     // Object of keymaps
    defaults: {
@@ -65,7 +65,7 @@ or just a command id as a string
     
    // -> {id1: {}, id2: {}};
 
    Returns Object (opens new window)
     
    # remove
     
    Remove the keymap by id
     
    # Parameters
      
    # Examples
     
    keymaps.remove('ns:my-keymap');
 // -> {keys, handler};
-
    Returns Object (opens new window) Removed keymap
     
    # removeAll
     
    Remove all binded keymaps
     
    Returns this
      
    
+

    Returns Object (opens new window) Removed keymap

    # removeAll

    Remove all binded keymaps

    Returns this

    ←

    - + diff --git a/docs/api/modal_dialog.html b/docs/api/modal_dialog.html index db18d3e7b..671d3238c 100644 --- a/docs/api/modal_dialog.html +++ b/docs/api/modal_dialog.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  modal: {
    // options
  }
 })
 
    Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
     
    const modal = editor.Modal;
-
     
    # open
     
    Open the modal window
     
    # Parameters
      
    Returns this
     
    # close
     
    Close the modal window
     
    Returns this
     
    # onceClose
     
    Execute callback when the modal will be closed.
+

    # open

    Open the modal window

    # Parameters

    Returns this

    # close

    Close the modal window

    Returns this

    # onceClose

    Execute callback when the modal will be closed. The callback will be called one only time

    # Parameters

    Returns this

    # onceOpen

    Execute callback when the modal will be opened. The callback will be called one only time

    # Parameters

    Returns this

    # isOpen

    Checks if the modal window is open

    Returns Boolean (opens new window)

    # setTitle

    Set the title to the modal window

    # Parameters

    # Examples

    modal.setTitle('New title');

    Returns this

    # getTitle

    Returns the title of the modal window

    Returns string (opens new window)

    # setContent

    Set the content of the modal window

    # Parameters

    # Examples

    modal.setContent('<div>Some HTML content</div>');
-

    Returns this

    # getContent

    Get the content of the modal window

    Returns string (opens new window)

    +

    Returns this

    # getContent

    Get the content of the modal window

    Returns string (opens new window)

    ←

    - + diff --git a/docs/api/page.html b/docs/api/page.html new file mode 100644 index 000000000..df5160318 --- /dev/null +++ b/docs/api/page.html @@ -0,0 +1,52 @@ + + + + + + GrapesJS + + + + + + + + + + +
    GrapesJS

    # getAllFrames

    Get all frames

    # Examples

    const arrayOfFrames = page.getAllFrames();
+

    Returns Array (opens new window)<Frame>

    # getMainFrame

    Get the first frame of the page (identified always as the main one)

    # Examples

    const mainFrame = page.getMainFrame();
+

    Returns Frame

    # getMainComponent

    Get the root component (usually is the wrapper component) from the main frame

    # Examples

    const rootComponent = page.getMainComponent();
+console.log(rootComponent.toHTML());
+

    Returns Component

    + ← + + Style Manager + + → +

    + + + diff --git a/docs/api/pages.html b/docs/api/pages.html index dda0a9420..e37e845e8 100644 --- a/docs/api/pages.html +++ b/docs/api/pages.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Pages

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

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # Pages
     
    You can customize the initial state of the module from the editor initialization
     
    const editor = grapesjs.init({
  ....
  pageManager: {
    pages: [
@@ -64,15 +64,15 @@ pageManager.
 const somePage = pageManager.get('page-id');
 pageManager.select(somePage);
 
    Returns this
     
    # getSelected
     
    Get the selected page
     
    # Examples
     
    const selectedPage = pageManager.getSelected();
-
    Returns Page
      
    
+

    Returns Page

    ← - Style Manager + + ‍ ‍ ‍ Page →

    - + diff --git a/docs/api/panels.html b/docs/api/panels.html index be9883bc2..71b2b70e4 100644 --- a/docs/api/panels.html +++ b/docs/api/panels.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # Panels

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # Panels
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  panels: {
    // options
  }
@@ -86,15 +86,15 @@ command: {const removedButton = panelManager.removeButton('myNewPanel', 'myNewButton');
 
    Returns (Button | null) Removed button.
     
    # getButton
     
    Get button from the panel
     
    # Parameters
      
    # Examples
     
    var button = panelManager.getButton('myPanel','myButton');
-
    Returns (Button | null)
      
    
+

    Returns (Button | null)

    ← Pages →

    - + diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html index bad597d81..1ae1b1759 100644 --- a/docs/api/rich_text_editor.html +++ b/docs/api/rich_text_editor.html @@ -4,14 +4,14 @@ 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 (opens new window). + (opens new window)

    # RichTextEditor

    This module allows to customize the built-in toolbar of the Rich Text Editor and use commands from the HTML Editing APIs (opens new window). 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 (opens new window)

    const editor = grapesjs.init({
  richTextEditor: {
    // options
@@ -100,7 +100,7 @@ rte.add// {name: 'bold', ...}

    Returns Object (opens new window)

    # getAll

    Get all actions

    Returns Array (opens new window)

    # remove

    Remove the action from the toolbar

    # Parameters

    # Examples

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

    Returns Object (opens new window) Removed action

    # getToolbarEl

    Get the toolbar element

    Returns HTMLElement (opens new window)

    +

    Returns Object (opens new window) Removed action

    # getToolbarEl

    Get the toolbar element

    Returns HTMLElement (opens new window)

    ←

    GrapesJS

    # SelectorManager

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

    # 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{
  ...
 }
@@ -48,8 +48,7 @@ a look at this code:
     
    })
 
    Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
     
    const selectorManager = editor.SelectorManager;
 
     
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # setState
     
    Change the selector state
     
    # Parameters
      
    # Examples
     
    selectorManager.setState('hover');
-
    Returns this
     
    # getState
     
    Get the current selector state
     
    Returns String (opens new window)
     
    # add
     
    Add a new selector to collection if it's not already exists. Class type is a default one
     
    # Parameters
      
    # Examples
     
    const selector = selectorManager.add('selectorName');
+
    Returns this
     
    # getState
     
    Get the current selector state
     
    Returns String (opens new window)
     
    # add
     
    Add a new selector to collection if it's not already exists. Class type is a default one
     
    # Parameters
      
    # Examples
     
    const selector = selectorManager.add('selectorName');
 // Same as
 const selector = selectorManager.add('selectorName', {
   type: 1,
@@ -64,7 +63,7 @@ sm.addClass<
 
    Returns Array (opens new window) Array of added selectors
     
    # get
     
    Get the selector by its name
     
    # Parameters
      
    # Examples
     
    const selector = selectorManager.get('selectorName');
 // or get an array
 const selectors = selectorManager.get(['class1', 'class2']);
-
    Returns (Model | Array (opens new window))
     
    # getAll
     
    Get all selectors
     
    Returns Collection
     
    # escapeName
     
    Return escaped selector name
     
    # Parameters
      
    Returns String (opens new window) Escaped name

    +

    Returns (Model | Array (opens new window))

    # getAll

    Get all selectors

    Returns Collection

    # escapeName

    Return escaped selector name

    # Parameters

    Returns String (opens new window) Escaped name

    ← →

    - + diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html index fd4d86f80..d922774f4 100644 --- a/docs/api/storage_manager.html +++ b/docs/api/storage_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # StorageManager

    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

    const editor = grapesjs.init({
+     (opens new window) 
       
     
    # StorageManager
     
    You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)
     
    const editor = grapesjs.init({
  storageManager: {
    // options
  }
 })
 
    Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
     
    const storageManager = editor.StorageManager;
-
     
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # isAutosave
     
    Checks if autosave is enabled
     
    Returns Boolean (opens new window)
     
    # setAutosave
     
    Set autosave value
     
    # Parameters
      
    Returns this
     
    # getStepsBeforeSave
     
    Returns number of steps required before trigger autosave
     
    Returns number (opens new window)
     
    # setStepsBeforeSave
     
    Set steps required before trigger autosave
     
    # Parameters
      
    Returns this
     
    # add
     
    Add new storage
     
    # Parameters
      
    # Examples
     
    storageManager.add('local2', {
+
     
    # getConfig
     
    Get configuration object
     
    Returns Object (opens new window)
     
    # isAutosave
     
    Checks if autosave is enabled
     
    Returns Boolean (opens new window)
     
    # setAutosave
     
    Set autosave value
     
    # Parameters
      
    Returns this
     
    # getStepsBeforeSave
     
    Returns number of steps required before trigger autosave
     
    Returns number (opens new window)
     
    # setStepsBeforeSave
     
    Set steps required before trigger autosave
     
    # Parameters
      
    Returns this
     
    # add
     
    Add new storage
     
    # Parameters
      
    # Examples
     
    storageManager.add('local2', {
   load: function(keys, clb, clbErr) {
     var res = {};
     for (var i = 0, len = keys.length; i < len; i++){
@@ -65,7 +64,7 @@
 storageManager.load('item1', res => {
 // res -> {item1: value1}
 });
-
    # getCurrentStorage
     
    Get current storage
     
    Returns Storage
      
    
+

    # getCurrentStorage

    Get current storage

    Returns Storage

    ←

    GrapesJS

    # StyleManager

    With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components. + (opens new window)

    # 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 (opens new window)

    const editor = grapesjs.init({
  styleManager: {
    // options
@@ -42,8 +42,7 @@ You can customize the initial state of the module from the editor initialization
 })

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

    const styleManager = editor.StyleManager;

    # getConfig

    Get configuration object

    Returns Object (opens new window)

    # addSector

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

    # Parameters

    # Examples

    var sector = styleManager.addSector('mySector',{
+that one will be returned
     
    # Parameters
      
    # Examples
     
    var sector = styleManager.addSector('mySector',{
   name: 'My sector',
   open: true,
   properties: [{ name: 'My property'}]
@@ -51,8 +50,7 @@ that one will be returned
     
    // With `at: 0` we place the new sector at the beginning of the collection
 
    Returns Sector Added Sector
     
    # getSector
     
    Get sector by id
     
    # Parameters
      
    # Examples
     
    var sector = styleManager.getSector('mySector');
 
    Returns (Sector | null)
     
    # removeSector
     
    Remove a sector by id
     
    # Parameters
      
    # Examples
     
    const removed = styleManager.removeSector('mySector');
-
    Returns Sector Removed sector
     
    # getSectors
     
    Get all sectors
     
    Returns Sectors Collection of sectors
     
    # addProperty
     
    Add property to the sector identified by id
     
    # Parameters
      
    # Examples
     
    var property = styleManager.addProperty('mySector',{
+
    Returns Sector Removed sector
     
    # getSectors
     
    Get all sectors
     
    Returns Sectors Collection of sectors
     
    # addProperty
     
    Add property to the sector identified by id
     
    # Parameters
      
    # Examples
     
    var property = styleManager.addProperty('mySector',{
   name: 'Minimum height',
   property: 'min-height',
   type: 'select',
@@ -98,23 +96,22 @@ passed entity 
    // In order to prevent memory leaks, use this method to clean, eventually, created instances, global event listeners, etc.
    }
 })
-
    # getType
     
    Get type
     
    # Parameters
      
    Returns Object (opens new window) Type definition
     
    # getTypes
     
    Get all types
     
    Returns Array (opens new window)
     
    # createType
     
    Create new property from type
     
    # Parameters
      
    # Examples
     
    const propView = styleManager.createType('integer', {
+
    # getType
     
    Get type
     
    # Parameters
      
    Returns Object (opens new window) Type definition
     
    # getTypes
     
    Get all types
     
    Returns Array (opens new window)
     
    # createType
     
    Create new property from type
     
    # Parameters
      
    # Examples
     
    const propView = styleManager.createType('integer', {
  model: {units: ['px', 'rem']}
 });
 propView.render();
 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
      
    Returns Styleable A Component or CSSRule

    +It could be a Component, CSSRule, or a string of any CSS selector

    # Parameters

    Returns Styleable A Component or CSSRule

    ← - Storage Manager →

    - + diff --git a/docs/api/undo_manager.html b/docs/api/undo_manager.html index be22fe992..1fa87fc4d 100644 --- a/docs/api/undo_manager.html +++ b/docs/api/undo_manager.html @@ -4,14 +4,14 @@ GrapesJS - + - - - + + +
    GrapesJS

    # UndoManager

    This module allows to manage the stack of changes applied in canvas. + (opens new window)

    # 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();
 // { ... }
@@ -59,11 +59,11 @@ like appending multiple components:
 editor.getWrapper().append(
    C1
    C2
    ); getStack will return a collection length of 2.
 getStackGroup instead will group them as a single operation (the first
 inserted component will be returned in the list) by returning an array length of 1.
     
    Returns Array (opens new window)
     
    # clear
     
    Clear the stack
     
    # Examples
     
    um.clear();
-
    Returns this

    +

    Returns this

    ←

    - + diff --git a/docs/assets/css/0.styles.1858edcc.css b/docs/assets/css/0.styles.1858edcc.css new file mode 100644 index 000000000..4004488cb --- /dev/null +++ b/docs/assets/css/0.styles.1858edcc.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;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;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-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:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .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:focus,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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.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}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983} \ No newline at end of file diff --git a/docs/assets/css/0.styles.ac93482a.css b/docs/assets/css/0.styles.ac93482a.css deleted file mode 100644 index 00ee624ad..000000000 --- a/docs/assets/css/0.styles.ac93482a.css +++ /dev/null @@ -1 +0,0 @@ -code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.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-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{border:3px solid #444}.gjs-block{width:auto;height:auto;min-height: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}.theme-code-block[data-v-6d04095e]{display:none}.theme-code-block__active[data-v-6d04095e]{display:block}.theme-code-block>pre[data-v-6d04095e]{background-color:orange}.theme-code-group__nav[data-v-32c2d7ed]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-32c2d7ed]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-32c2d7ed]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-32c2d7ed]{border-bottom:1px solid #42b983}.pre-blank[data-v-32c2d7ed]{color:#42b983} \ No newline at end of file diff --git a/docs/assets/js/10.66bafe27.js b/docs/assets/js/10.66bafe27.js deleted file mode 100644 index cff202849..000000000 --- a/docs/assets/js/10.66bafe27.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{379:function(e,t,s){"use strict";s(11);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}},411:function(e,t,s){},451:function(e,t,s){"use strict";s(411)},501:function(e,t,s){"use strict";s.r(t);var a=s(379),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(451),s(52)),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/8.7a2feb85.js b/docs/assets/js/10.bc8d26ba.js similarity index 83% rename from docs/assets/js/8.7a2feb85.js rename to docs/assets/js/10.bc8d26ba.js index 4457522d0..ba024a841 100644 --- a/docs/assets/js/8.7a2feb85.js +++ b/docs/assets/js/10.bc8d26ba.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{379:function(e,t,s){"use strict";s(11);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}},408:function(e,t,s){},448:function(e,t,s){"use strict";s(408)},498:function(e,t,s){"use strict";s.r(t);var a=s(379),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(448),s(52)),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],{308: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}},341:function(e,t,s){},379:function(e,t,s){"use strict";s(341)},425:function(e,t,s){"use strict";s.r(t);var a=s(308),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(379),s(44)),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.00909638.js b/docs/assets/js/11.e4a5286f.js similarity index 71% rename from docs/assets/js/11.00909638.js rename to docs/assets/js/11.e4a5286f.js index 54278e336..4900ef523 100644 --- a/docs/assets/js/11.00909638.js +++ b/docs/assets/js/11.e4a5286f.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[11,13],{381:function(t,n,e){},384:function(t,n,e){"use strict";e(381)},417: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(384),e(52)),i=Object(o.a)(a,void 0,void 0,!1,null,null,null);n.default=i.exports},494:function(t,n,e){"use strict";e.r(n);var a=e(455),o=e(417),i={components:{Layout:a.a,CarbonAds:o.default}},r=e(52),s=Object(r.a)(i,(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],{310:function(t,n,e){},313:function(t,n,e){"use strict";e(310)},347: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(313),e(44)),i=Object(o.a)(a,void 0,void 0,!1,null,null,null);n.default=i.exports},428:function(t,n,e){"use strict";e.r(n);var a=e(383),o=e(347),i={components:{Layout:a.a,CarbonAds:o.default}},r=e(44),s=Object(r.a)(i,(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.05f31234.js b/docs/assets/js/12.05f31234.js new file mode 100644 index 000000000..e04006cdf --- /dev/null +++ b/docs/assets/js/12.05f31234.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{333:function(t,n,e){},371:function(t,n,e){"use strict";e(333)},435:function(t,n,e){"use strict";e.r(n);e(371);var s=e(44),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.8abc0790.js b/docs/assets/js/12.8abc0790.js deleted file mode 100644 index b4c8634fa..000000000 --- a/docs/assets/js/12.8abc0790.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{403:function(t,n,e){},443:function(t,n,e){"use strict";e(403)},506:function(t,n,e){"use strict";e.r(n);e(443);var s=e(52),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.a938815d.js b/docs/assets/js/13.8130e741.js similarity index 80% rename from docs/assets/js/13.a938815d.js rename to docs/assets/js/13.8130e741.js index f756cd32d..025a3138c 100644 --- a/docs/assets/js/13.a938815d.js +++ b/docs/assets/js/13.8130e741.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{381:function(n,t,e){},384:function(n,t,e){"use strict";e(381)},417: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(384),e(52)),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],{310:function(n,t,e){},313:function(n,t,e){"use strict";e(310)},347: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(313),e(44)),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.f6679dbc.js b/docs/assets/js/14.21fd784c.js similarity index 50% rename from docs/assets/js/14.f6679dbc.js rename to docs/assets/js/14.21fd784c.js index 6cf75ae12..01403d9f2 100644 --- a/docs/assets/js/14.f6679dbc.js +++ b/docs/assets/js/14.21fd784c.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{412:function(t,e,n){},452:function(t,e,n){"use strict";n(412)},507: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(452),n(52)),p=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=p.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{342:function(t,e,n){},380:function(t,e,n){"use strict";n(342)},436: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(380),n(44)),p=Object(r.a)(i,void 0,void 0,!1,null,"15b7b770",null);e.default=p.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/15.8026aa70.js b/docs/assets/js/15.8026aa70.js new file mode 100644 index 000000000..d9be20887 --- /dev/null +++ b/docs/assets/js/15.8026aa70.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{343:function(t,e,a){},381:function(t,e,a){"use strict";a(343)},422:function(t,e,a){"use strict";a.r(e);var n={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}},mounted:function(){this.$parent&&this.$parent.loadTabs&&this.$parent.loadTabs()}},i=(a(381),a(44)),s=Object(i.a)(n,(function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"759a7d02",null);e.default=s.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/15.e1f63ebd.js b/docs/assets/js/15.e1f63ebd.js deleted file mode 100644 index b978611e6..000000000 --- a/docs/assets/js/15.e1f63ebd.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{413:function(e,t,c){},453:function(e,t,c){"use strict";c(413)},503:function(e,t,c){"use strict";c.r(t);var i={name:"CodeBlock",props:{title:{type:String,required:!0},active:{type:Boolean,default:!1}}},n=(c(453),c(52)),s=Object(n.a)(i,(function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"theme-code-block",class:{"theme-code-block__active":this.active}},[this._t("default")],2)}),[],!1,null,"6d04095e",null);t.default=s.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/16.50cb9f03.js b/docs/assets/js/16.50cb9f03.js deleted file mode 100644 index 95dee437e..000000000 --- a/docs/assets/js/16.50cb9f03.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{414:function(e,t,o){},454:function(e,t,o){"use strict";o(414)},504:function(e,t,o){"use strict";o.r(t);o(27),o(116),o(76),o(118);var a={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.codeTabs.forEach((function(e){e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm.classList.add("theme-code-block__active")}},mounted:function(){var e=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){return Boolean(e.componentOptions)})).map((function(t,o){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=o),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0)},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e}}},c=(o(454),o(52)),n=Object(c.a)(a,(function(){var e=this,t=e.$createElement,o=e._self._c||t;return o("div",{staticClass:"theme-code-group"},[o("div",{staticClass:"theme-code-group__nav"},[o("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,a){return o("li",{key:t.title,staticClass:"theme-code-group__li"},[o("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":a===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(a)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?o("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)}),[],!1,null,"32c2d7ed",null);t.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/16.5365d48a.js b/docs/assets/js/16.5365d48a.js new file mode 100644 index 000000000..e248e1201 --- /dev/null +++ b/docs/assets/js/16.5365d48a.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{344:function(e,t,a){},382:function(e,t,a){"use strict";a(344)},423:function(e,t,a){"use strict";a.r(t);a(66),a(27),a(95),a(96);var o={name:"CodeGroup",data:function(){return{codeTabs:[],activeCodeTabIndex:-1}},watch:{activeCodeTabIndex:function(e){this.activateCodeTab(e)}},mounted:function(){this.loadTabs()},methods:{changeCodeTab:function(e){this.activeCodeTabIndex=e},loadTabs:function(){var e=this;this.codeTabs=(this.$slots.default||[]).filter((function(e){return Boolean(e.componentOptions)})).map((function(t,a){return""===t.componentOptions.propsData.active&&(e.activeCodeTabIndex=a),{title:t.componentOptions.propsData.title,elm:t.elm}})),-1===this.activeCodeTabIndex&&this.codeTabs.length>0&&(this.activeCodeTabIndex=0),this.activateCodeTab(0)},activateCodeTab:function(e){this.codeTabs.forEach((function(e){e.elm&&e.elm.classList.remove("theme-code-block__active")})),this.codeTabs[e].elm&&this.codeTabs[e].elm.classList.add("theme-code-block__active")}}},n=(a(382),a(44)),c=Object(n.a)(o,(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ClientOnly",[a("div",{staticClass:"theme-code-group"},[a("div",{staticClass:"theme-code-group__nav"},[a("ul",{staticClass:"theme-code-group__ul"},e._l(e.codeTabs,(function(t,o){return a("li",{key:t.title,staticClass:"theme-code-group__li"},[a("button",{staticClass:"theme-code-group__nav-tab",class:{"theme-code-group__nav-tab-active":o===e.activeCodeTabIndex},on:{click:function(t){return e.changeCodeTab(o)}}},[e._v("\n "+e._s(t.title)+"\n ")])])})),0)]),e._v(" "),e._t("default"),e._v(" "),e.codeTabs.length<1?a("pre",{staticClass:"pre-blank"},[e._v("// Make sure to add code blocks to your code group")]):e._e()],2)])}),[],!1,null,"deefee04",null);t.default=c.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/17.1b60a777.js b/docs/assets/js/17.16a899b7.js similarity index 66% rename from docs/assets/js/17.1b60a777.js rename to docs/assets/js/17.16a899b7.js index 525ea1bbd..d1f0c8396 100644 --- a/docs/assets/js/17.1b60a777.js +++ b/docs/assets/js/17.16a899b7.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{502:function(e,t,r){"use strict";r.r(t);r(214);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(52),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([[17],{424:function(e,t,r){"use strict";r.r(t);r(173);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(44),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/18.b7385ed2.js b/docs/assets/js/18.2b682096.js similarity index 72% rename from docs/assets/js/18.b7385ed2.js rename to docs/assets/js/18.2b682096.js index a08f9e997..04337a28d 100644 --- a/docs/assets/js/18.b7385ed2.js +++ b/docs/assets/js/18.2b682096.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{493: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(52),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([[18],{431: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(44),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/19.46b34bc8.js b/docs/assets/js/19.c8bf26af.js similarity index 99% rename from docs/assets/js/19.46b34bc8.js rename to docs/assets/js/19.c8bf26af.js index 7d66762eb..70db7347f 100644 --- a/docs/assets/js/19.46b34bc8.js +++ b/docs/assets/js/19.c8bf26af.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{530:function(t,s,a){"use strict";a.r(s);var n=a(52),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 +(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{459:function(t,s,a){"use strict";a.r(s);var n=a(44),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/2.15028157.js b/docs/assets/js/2.15028157.js new file mode 100644 index 000000000..a0231f8ca --- /dev/null +++ b/docs/assets/js/2.15028157.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{309: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(45),n(67),n(311),n(314),n(172),n(66),n(95),n(96),n(27),n(97),n(165);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"})}},311:function(t,e,n){"use strict";var i=n(169),r=n(5),a=n(13),s=n(23),o=n(170),u=n(171);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}]}))},312:function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},314:function(t,e,n){"use strict";var i=n(169),r=n(166),a=n(5),s=n(23),o=n(100),u=n(170),l=n(13),c=n(171),h=n(70),p=n(168).UNSUPPORTED_Y,f=[].push,d=Math.min;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),f=String(this),g=o(h,RegExp),v=h.unicode,m=(h.ignoreCase?"i":"")+(h.multiline?"m":"")+(h.unicode?"u":"")+(p?"g":"y"),b=new g(p?"^(?:"+h.source+")":h,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);C&&n&&(d(o).sticky=!0);return 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),w=0;L.length>w;)$(L[w++]);b.constructor=y,y.prototype=b,p(r,"RegExp",y)}g("RegExp")},319:function(t,e,n){"use strict";var i=n(14),r=n(5),a=n(2),s=n(167),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})},320:function(t,e,n){},321:function(t,e,n){},322:function(t,e,n){},323:function(t,e,n){},324:function(t,e,n){},325:function(t,e,n){},326:function(t,e){t.exports=function(t){return null==t}},327:function(t,e,n){},328:function(t,e,n){},329:function(t,e,n){},330:function(t,e,n){},331:function(t,e,n){},332:function(t,e,n){},345:function(t,e,n){"use strict";n.r(e);n(93);var i=n(309),r={name:"SidebarGroup",components:{DropdownTransition:n(346).a},props:["item","open","collapsable","depth"],beforeCreate:function(){this.$options.components.SidebarLinks=n(345).default},methods:{isActive:i.e}},a=(n(367),n(44)),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(368),n(66);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(369);function c(t,e){if("group"===e.type){var n=e.path&&Object(i.e)(t,e.path),r=e.children.some((function(e){return"group"===e.type?c(t,e):"page"===e.type&&Object(i.e)(t,e.path)}));return n||r}return!1}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},346: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(359),n(44)),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},348:function(t,e,n){"use strict";var i=n(0),r=n(349);i({target:"String",proto:!0,forced:n(350)("link")},{link:function(t){return r(this,"a","href",t)}})},349: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+""}},350:function(t,e,n){var i=n(2);t.exports=function(t){return i((function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}))}},351:function(t,e,n){"use strict";n(315)},352:function(t,e,n){var i=n(0),r=n(353);i({global:!0,forced:parseInt!=r},{parseInt:r})},353:function(t,e,n){var i=n(3),r=n(316).trim,a=n(312),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},354:function(t,e,n){var i=n(2),r=n(312);t.exports=function(t){return i((function(){return!!r[t]()||"​…᠎"!="​…᠎"[t]()||r[t].name!==t}))}},355:function(t,e,n){var i=n(4),r=n(69);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}},356:function(t,e,n){"use strict";var i,r=n(0),a=n(24).f,s=n(13),o=n(101),u=n(23),l=n(102),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}})},357:function(t,e,n){"use strict";n(320)},358:function(t,e,n){"use strict";n(321)},359:function(t,e,n){"use strict";n(322)},360:function(t,e,n){"use strict";n(323)},361:function(t,e,n){"use strict";n(324)},362:function(t,e,n){"use strict";n(325)},363:function(t,e,n){"use strict";n(327)},364:function(t,e,n){var i=n(30),r=n(15),a=n(25);t.exports=function(t){return"string"==typeof t||!r(t)&&a(t)&&"[object String]"==i(t)}},365:function(t,e,n){"use strict";n(328)},366:function(t,e,n){"use strict";n(329)},367:function(t,e,n){"use strict";n(330)},368:function(t,e,n){"use strict";var i=n(0),r=n(29).find,a=n(98),s=!0;"find"in[]&&Array(1).find((function(){s=!1})),i({target:"Array",proto:!0,forced:s},{find:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}}),a("find")},369:function(t,e,n){"use strict";n(331)},370:function(t,e,n){"use strict";n(332)},383:function(t,e,n){"use strict";n(348),n(93),n(94);var i=n(309),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(44),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.apply(null,arguments)}}},[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(351),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(352),n(317),n(165),n(97),n(27),n(45),n(311),n(175),n(176),n(172),n(67),n(318),n(319),n(66),n(314),n(356),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(358),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(42),m=(n(173),n(346)),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(360),{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/2.76987c6d.js b/docs/assets/js/2.76987c6d.js deleted file mode 100644 index 6e0f526b5..000000000 --- a/docs/assets/js/2.76987c6d.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{380: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(27),n(116),n(209),n(119),n(215),n(76),n(53),n(382),n(77),n(385),n(118);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"})}},382:function(t,e,n){"use strict";var i=n(211),r=n(7),a=n(20),s=n(26),o=n(212),u=n(213);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}]}))},383:function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},385:function(t,e,n){"use strict";var i=n(211),r=n(210),a=n(7),s=n(26),o=n(421),u=n(212),l=n(20),c=n(213),h=n(79),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")},390:function(t,e,n){},391:function(t,e,n){},392:function(t,e,n){},393:function(t,e,n){},394:function(t,e,n){},395:function(t,e,n){},396:function(t,e){t.exports=function(t){return null==t}},397:function(t,e,n){},398:function(t,e,n){},399:function(t,e,n){},400:function(t,e,n){},401:function(t,e,n){},402:function(t,e,n){},415:function(t,e,n){"use strict";n.r(e);n(208);var i=n(380),r={name:"SidebarGroup",components:{DropdownTransition:n(416).a},props:["item","open","collapsable","depth"],beforeCreate:function(){this.$options.components.SidebarLinks=n(415).default},methods:{isActive:i.e}},a=(n(439),n(52)),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(440),n(76);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(441);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},416: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(431),n(52)),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},418:function(t,e,n){"use strict";var i=n(0),r=n(419);i({target:"String",proto:!0,forced:n(420)("link")},{link:function(t){return r(this,"a","href",t)}})},419:function(t,e,n){var i=n(26),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+""}},420: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}))}},421:function(t,e,n){var i=n(7),r=n(55),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)}},422:function(t,e,n){"use strict";n(386)},423:function(t,e,n){var i=n(0),r=n(424);i({global:!0,forced:parseInt!=r},{parseInt:r})},424:function(t,e,n){var i=n(4),r=n(387).trim,a=n(383),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},425:function(t,e,n){var i=n(1),r=n(383);t.exports=function(t){return i((function(){return!!r[t]()||"​…᠎"!="​…᠎"[t]()||r[t].name!==t}))}},426:function(t,e,n){var i=n(5),r=n(121);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}},427:function(t,e,n){"use strict";var i=n(36),r=n(9),a=n(2),s=n(8),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}})}},428:function(t,e,n){"use strict";var i,r=n(0),a=n(34).f,s=n(20),o=n(123),u=n(26),l=n(124),c=n(35),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}})},429:function(t,e,n){"use strict";n(390)},430:function(t,e,n){"use strict";n(391)},431:function(t,e,n){"use strict";n(392)},432:function(t,e,n){"use strict";n(393)},433:function(t,e,n){"use strict";n(394)},434:function(t,e,n){"use strict";n(395)},435:function(t,e,n){"use strict";n(397)},436:function(t,e,n){var i=n(38),r=n(13),a=n(28);t.exports=function(t){return"string"==typeof t||!r(t)&&a(t)&&"[object String]"==i(t)}},437:function(t,e,n){"use strict";n(398)},438:function(t,e,n){"use strict";n(399)},439:function(t,e,n){"use strict";n(400)},440:function(t,e,n){"use strict";var i=n(0),r=n(37).find,a=n(122),s=n(21),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")},441:function(t,e,n){"use strict";n(401)},442:function(t,e,n){"use strict";n(402)},455:function(t,e,n){"use strict";n(208),n(117),n(418);var i=n(380),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(52),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(422),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(423),n(27),n(217),n(209),n(119),n(53),n(219),n(382),n(388),n(215),n(76),n(389),n(120),n(428),n(77),n(385),n(220)),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(430),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(214),n(50)),m=n(416),b=n(221),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(432),{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.f6e656e9.js b/docs/assets/js/20.7ee8a470.js similarity index 97% rename from docs/assets/js/20.f6e656e9.js rename to docs/assets/js/20.7ee8a470.js index 2dac42d66..ad3110705 100644 --- a/docs/assets/js/20.f6e656e9.js +++ b/docs/assets/js/20.7ee8a470.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{521:function(e,t,r){"use strict";r.r(t);var a=r(52),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 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([[20],{448:function(e,t,r){"use strict";r.r(t);var a=r(44),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 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/21.5fbfcbfa.js b/docs/assets/js/21.80a868df.js similarity index 78% rename from docs/assets/js/21.5fbfcbfa.js rename to docs/assets/js/21.80a868df.js index bf6efb0c0..fee894e86 100644 --- a/docs/assets/js/21.5fbfcbfa.js +++ b/docs/assets/js/21.80a868df.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{513:function(t,e,s){"use strict";s.r(e);var a=s(52),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([[21],{447:function(t,e,s){"use strict";s.r(e);var a=s(44),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/22.b1817aaa.js b/docs/assets/js/22.b1817aaa.js new file mode 100644 index 000000000..245235c77 --- /dev/null +++ b/docs/assets/js/22.b1817aaa.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{446:function(t,a,e){"use strict";e.r(a);var s=e(44),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 contains 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/22.c9db409a.js b/docs/assets/js/22.c9db409a.js deleted file mode 100644 index 5ea07dfc7..000000000 --- a/docs/assets/js/22.c9db409a.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{508:function(t,a,e){"use strict";e.r(a);var s=e(52),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/23.24b1a9f0.js b/docs/assets/js/23.24b1a9f0.js new file mode 100644 index 000000000..82e096847 --- /dev/null +++ b/docs/assets/js/23.24b1a9f0.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{445:function(t,a,e){"use strict";e.r(a);var s=e(44),n=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:"blockmanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blockmanager"}},[t._v("#")]),t._v(" BlockManager")]),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/block_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 blockManager"),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(" blockManager "),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("BlockManager"),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:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getcategories"}},[t._v("getCategories")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#render"}},[t._v("render")])])]),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:"onload"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onload"}},[t._v("#")]),t._v(" onLoad")]),t._v(" "),e("p",[t._v("Load default blocks if the collection is empty")]),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 block to the collection.")]),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("p",[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(" Block id")])]),t._v(" "),e("li",[e("p",[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")]),t._v(" "),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(" Name of the block")]),t._v(" "),e("li",[e("code",[t._v("opts.content")]),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(" HTML content")]),t._v(" "),e("li",[e("code",[t._v("opts.category")]),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(")")]),t._v(" Group the block inside a category.\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(" "),e("li",[e("code",[t._v("opts.attributes")]),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(" Block attributes (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",[t._v("blockManager"),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("'h1-block'")]),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 label"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Heading'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'

    Put your title here

    '")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n category"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Basic'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),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 title"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Insert h1 block'")]),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(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("Block")]),t._v(" Added block")]),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("Return the block 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(" Block 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",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" block "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),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("'h1-block'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),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 constant"}},[t._v("JSON")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block"),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("// {label: 'Heading', content: '

    Put your ...', ...}")]),t._v("\n")])])]),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 all blocks")]),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",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),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("\nconsole"),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 constant"}},[t._v("JSON")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),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("// [{label: 'Heading', content: '

    Put your ...'}, ...]")]),t._v("\n")])])]),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 blocks 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 a block 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(" Block 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",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Id of the block which need to be removed")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'button'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nblockManager"),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("(")]),t._v("id"),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("Block")]),t._v(" Removed block")]),t._v(" "),e("h2",{attrs:{id:"getcategories"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcategories"}},[t._v("#")]),t._v(" getCategories")]),t._v(" "),e("p",[t._v("Get all available categories.\nIt's possible to add categories only within blocks via 'add()' method")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(" | Collection)")])]),t._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 Blocks container element")]),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 blocks")]),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("p",[e("code",[t._v("blocks")]),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(" Blocks to render, without the argument will render all global blocks")])]),t._v(" "),e("li",[e("p",[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("ul",[e("li",[e("code",[t._v("opts.external")]),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("?")]),t._v(" Render blocks in a new container (HTMLElement will be returned)")]),t._v(" "),e("li",[e("code",[t._v("opts.ignoreCategories")]),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("?")]),t._v(" Render blocks without categories")])])])]),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 comment"}},[t._v("// Render all blocks (inside the global collection)")]),t._v("\nblockManager"),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 new set of blocks")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),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 keyword"}},[t._v("const")]),t._v(" filtered "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blocks"),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("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("block")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" block"),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("'sections'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nblockManager"),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("filtered"),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 a new set from an array")]),t._v("\nblockManager"),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("[")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("label"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Label text'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Content
    '")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Back to blocks from the global collection")]),t._v("\nblockManager"),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("// You can also render your blocks outside of the main block container")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newBlocksEl "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),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("filtered"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" external"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),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("\ndocument"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-id'")]),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 function"}},[t._v("appendChild")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newBlocksEl"),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(" Rendered element")])])}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/23.eea06144.js b/docs/assets/js/23.eea06144.js deleted file mode 100644 index 61407e057..000000000 --- a/docs/assets/js/23.eea06144.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{509:function(t,a,e){"use strict";e.r(a);var s=e(52),n=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:"blockmanager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blockmanager"}},[t._v("#")]),t._v(" BlockManager")]),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/block_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 blockManager"),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(" blockManager "),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("BlockManager"),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:"#getconfig"}},[t._v("getConfig")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getcategories"}},[t._v("getCategories")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),t._v(" "),e("li",[e("a",{attrs:{href:"#render"}},[t._v("render")])])]),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:"onload"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#onload"}},[t._v("#")]),t._v(" onLoad")]),t._v(" "),e("p",[t._v("Load default blocks if the collection is empty")]),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 block to the collection.")]),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(" Block id")]),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\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(" Name of the block")]),t._v(" "),e("li",[e("code",[t._v("opts.content")]),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(" HTML content")]),t._v(" "),e("li",[e("code",[t._v("opts.category")]),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(")")]),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(" "),e("li",[e("code",[t._v("opts.attributes")]),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(" Block attributes (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",[t._v("blockManager"),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("'h1-block'")]),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 label"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Heading'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'

    Put your title here

    '")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n category"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Basic'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),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 title"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Insert h1 block'")]),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(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),e("p",[t._v("Returns "),e("strong",[t._v("Block")]),t._v(" Added block")]),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("Return the block 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(" Block 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",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" block "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),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("'h1-block'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),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 constant"}},[t._v("JSON")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block"),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("// {label: 'Heading', content: '

    Put your ...', ...}")]),t._v("\n")])])]),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 all blocks")]),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",[e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),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("\nconsole"),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 constant"}},[t._v("JSON")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("stringify")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),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("// [{label: 'Heading', content: '

    Put your ...'}, ...]")]),t._v("\n")])])]),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 blocks 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 a block 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(" Block 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",[e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Id of the block which need to be removed")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'button'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nblockManager"),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("(")]),t._v("id"),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("Block")]),t._v(" Removed block")]),t._v(" "),e("h2",{attrs:{id:"getcategories"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcategories"}},[t._v("#")]),t._v(" getCategories")]),t._v(" "),e("p",[t._v("Get all available categories.\nIt's possible to add categories only within blocks via 'add()' method")]),t._v(" "),e("p",[t._v("Returns "),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(" | Collection)")])]),t._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 Blocks container element")]),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 blocks")]),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("blocks")]),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(" Blocks to render, without the argument will render all global blocks")]),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(")\n"),e("ul",[e("li",[e("code",[t._v("opts.external")]),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("?")]),t._v(" Render blocks in a new container (HTMLElement will be returned)")]),t._v(" "),e("li",[e("code",[t._v("opts.ignoreCategories")]),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("?")]),t._v(" Render blocks without categories")])])])]),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 comment"}},[t._v("// Render all blocks (inside the global collection)")]),t._v("\nblockManager"),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 new set of blocks")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),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 keyword"}},[t._v("const")]),t._v(" filtered "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blocks"),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("(")]),e("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("block")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" block"),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("'sections'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nblockManager"),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("filtered"),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 a new set from an array")]),t._v("\nblockManager"),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("[")]),t._v("\n "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("label"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Label text'")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'
    Content
    '")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Back to blocks from the global collection")]),t._v("\nblockManager"),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("// You can also render your blocks outside of the main block container")]),t._v("\n"),e("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newBlocksEl "),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),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("filtered"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" external"),e("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),e("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),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("\ndocument"),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-id'")]),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 function"}},[t._v("appendChild")]),e("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newBlocksEl"),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(" Rendered element")])])}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/24.a568d17b.js b/docs/assets/js/24.0b14d393.js similarity index 52% rename from docs/assets/js/24.a568d17b.js rename to docs/assets/js/24.0b14d393.js index ac0319b3f..6f88578f9 100644 --- a/docs/assets/js/24.a568d17b.js +++ b/docs/assets/js/24.0b14d393.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{510:function(t,e,a){"use strict";a.r(e);var s=a(52),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:"#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:"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([[24],{443:function(t,e,a){"use strict";a.r(e);var s=a(44),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:"#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:"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("p",[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("p",[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(")")]),t._v(" "),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/25.9769e6e3.js b/docs/assets/js/25.a736d8ee.js similarity index 99% rename from docs/assets/js/25.9769e6e3.js rename to docs/assets/js/25.a736d8ee.js index 58e95d760..0fe2633e7 100644 --- a/docs/assets/js/25.9769e6e3.js +++ b/docs/assets/js/25.a736d8ee.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{511:function(t,a,s){"use strict";s.r(a);var e=s(52),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([[25],{444:function(t,a,s){"use strict";s.r(a);var e=s(44),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/26.284071ba.js b/docs/assets/js/26.284071ba.js deleted file mode 100644 index 25ee45fb3..000000000 --- a/docs/assets/js/26.284071ba.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{512:function(t,e,a){"use strict";a.r(e);var r=a(52),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:"contains"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contains"}},[t._v("#")]),t._v(" contains")]),t._v(" "),a("p",[t._v("The method returns a Boolean value indicating whether the passed\ncomponent is a descendant of a given component")]),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("component")]),t._v(" "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])]),t._v(" Component to check")])]),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:"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-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("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-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-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-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("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:"removeattributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removeattributes"}},[t._v("#")]),t._v(" removeAttributes")]),t._v(" "),a("p",[t._v("Remove attributes from the component")]),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("attrs")]),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(" Array of attributes to remove (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 for the model update")])]),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("removeAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-attr'")]),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("removeAttributes")]),a("span",{pre:!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("'some-attr1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-attr2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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-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("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-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("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("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("opts")]),t._v(" (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(" "),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-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("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("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-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("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("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-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("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-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("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-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("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 for the append action (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),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",[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("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// append at specific index (eg. at the beginning)")]),t._v("\nsomeComponent"),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("otherComponent"),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("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-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("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("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("Component.append()")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),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",[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-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("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:"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("opts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),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",[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-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("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-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",[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-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("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-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",[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-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(" 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-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",[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-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("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-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("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-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("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-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",[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-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("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-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",[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:"getchangedprops"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getchangedprops"}},[t._v("#")]),t._v(" getChangedProps")]),t._v(" "),a("p",[t._v("Return an object containing only changed props")]),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("res")])])]),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-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("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-30"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-30"}},[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-31"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-31"}},[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-32"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-32"}},[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-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-23"}},[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("h3",{attrs:{id:"parameters-33"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-33"}},[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("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h2",{attrs:{id:"move"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#move"}},[t._v("#")]),t._v(" move")]),t._v(" "),a("p",[t._v("Move the component to another destination component")]),t._v(" "),a("h3",{attrs:{id:"parameters-34"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-34"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("component")]),t._v(" "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])]),t._v(" Destination component (so the current one will be appended as a child)")]),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 for the append action (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{attrs:{id:"examples-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-24"}},[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("// Move the selected component on top of the wrapper")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" dest "),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("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("\neditor"),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("move")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dest"),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("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-35"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-35"}},[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-36"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-36"}},[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(")")]),t._v(" "),a("li",[a("code",[t._v("opts")]),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/26.5a4f24ff.js b/docs/assets/js/26.5a4f24ff.js new file mode 100644 index 000000000..b965e3875 --- /dev/null +++ b/docs/assets/js/26.5a4f24ff.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{456:function(t,e,a){"use strict";a.r(e);var r=a(44),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(" | "),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(" 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(". In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drop is possible. 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("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("h3",{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("h3",{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("h4",{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("h3",{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("h3",{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("h4",{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("h4",{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("h3",{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("h3",{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("h3",{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("h4",{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("h3",{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("h4",{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("h4",{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("h3",{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("h4",{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("h4",{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("h3",{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("h4",{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("h4",{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("h3",{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("h4",{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("h4",{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("h3",{attrs:{id:"contains"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contains"}},[t._v("#")]),t._v(" contains")]),t._v(" "),a("p",[t._v("The method returns a Boolean value indicating whether the passed\ncomponent is a descendant of a given component")]),t._v(" "),a("h4",{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("component")]),t._v(" "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])]),t._v(" Component to check")])]),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("h3",{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("h4",{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("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("h4",{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("h3",{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("h4",{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("h4",{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("h3",{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("h4",{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("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("h4",{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("h3",{attrs:{id:"removeattributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removeattributes"}},[t._v("#")]),t._v(" removeAttributes")]),t._v(" "),a("p",[t._v("Remove attributes from the component")]),t._v(" "),a("h4",{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("attrs")]),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(" Array of attributes to remove (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 for the model update")])]),t._v(" "),a("h4",{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("removeAttributes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-attr'")]),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("removeAttributes")]),a("span",{pre:!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("'some-attr1'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'some-attr2'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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("h3",{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("h4",{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("opts")]),t._v(" (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(" "),a("h3",{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("h4",{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("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("h4",{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("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("h3",{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("h4",{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("opts")]),t._v(" (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(" "),a("h3",{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("h4",{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("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("h4",{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("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("h3",{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("h4",{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("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("h4",{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("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("h3",{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("h4",{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("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("h4",{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("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("h3",{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("h3",{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("h4",{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("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 for the append action (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h4",{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",[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("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// append at specific index (eg. at the beginning)")]),t._v("\nsomeComponent"),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("otherComponent"),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("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("h3",{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("h4",{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("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("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("Component.append()")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h4",{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",[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("h3",{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("h4",{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("opts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h3",{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("h4",{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("opts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h4",{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",[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("h3",{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("h4",{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("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("h4",{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",[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("h3",{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("h4",{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(" 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("h4",{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",[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("h3",{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("h4",{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("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("h4",{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",[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("h3",{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("h4",{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("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("h4",{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("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("h3",{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("h4",{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("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("h4",{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",[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("h3",{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("h3",{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("h3",{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("h4",{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("p",[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(")")]),t._v(" "),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("h4",{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",[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("h3",{attrs:{id:"getchangedprops"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getchangedprops"}},[t._v("#")]),t._v(" getChangedProps")]),t._v(" "),a("p",[t._v("Return an object containing only changed props")]),t._v(" "),a("h4",{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("res")])])]),t._v(" "),a("h3",{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("h3",{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("h4",{attrs:{id:"parameters-30"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-30"}},[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("h3",{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("h4",{attrs:{id:"parameters-31"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-31"}},[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("h3",{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("h4",{attrs:{id:"parameters-32"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-32"}},[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("h3",{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("h4",{attrs:{id:"parameters-33"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-33"}},[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("h4",{attrs:{id:"examples-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-23"}},[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("h3",{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("h4",{attrs:{id:"parameters-34"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-34"}},[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("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h3",{attrs:{id:"move"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#move"}},[t._v("#")]),t._v(" move")]),t._v(" "),a("p",[t._v("Move the component to another destination component")]),t._v(" "),a("h4",{attrs:{id:"parameters-35"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-35"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("component")]),t._v(" "),a("strong",[a("a",{attrs:{href:"#component"}},[t._v("Component")])]),t._v(" Destination component (so the current one will be appended as a child)")]),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 for the append action (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._v(" "),a("h4",{attrs:{id:"examples-24"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-24"}},[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("// Move the selected component on top of the wrapper")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" dest "),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("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("\neditor"),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(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("move")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("dest"),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("p",[t._v("Returns "),a("strong",[t._v("this")])]),t._v(" "),a("h3",{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("h4",{attrs:{id:"parameters-36"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-36"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("model")])])]),t._v(" "),a("h3",{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("h4",{attrs:{id:"parameters-37"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-37"}},[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(")")]),t._v(" "),a("li",[a("code",[t._v("opts")]),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/27.4266ca40.js b/docs/assets/js/27.f3b530ab.js similarity index 54% rename from docs/assets/js/27.4266ca40.js rename to docs/assets/js/27.f3b530ab.js index 4bf68a68d..b8be2eff1 100644 --- a/docs/assets/js/27.4266ca40.js +++ b/docs/assets/js/27.f3b530ab.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{514:function(t,e,a){"use strict";a.r(e);var r=a(52),n=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:"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("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("opts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),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-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("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-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("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-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("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=n.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{442:function(t,e,a){"use strict";a.r(e);var r=a(44),n=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:"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("p",[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")]),t._v(" "),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("p",[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("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("opts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),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-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("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-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("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-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("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=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/28.cc45d02f.js b/docs/assets/js/28.f3e302a2.js similarity index 55% rename from docs/assets/js/28.cc45d02f.js rename to docs/assets/js/28.f3e302a2.js index aec8eace2..3af5b8219 100644 --- a/docs/assets/js/28.cc45d02f.js +++ b/docs/assets/js/28.f3e302a2.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{515:function(t,s,a){"use strict";a.r(s);var e=a(52),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(" Options for the add of new rule (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("addOpts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")]),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(" Other props for the rule")])]),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("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("opts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),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-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'")]),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-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("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")])]),t._v(" "),a("h2",{attrs:{id:"getrules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getrules"}},[t._v("#")]),t._v(" getRules")]),t._v(" "),a("p",[t._v("Find rules, in different states (eg. like "),a("code",[t._v(":hover")]),t._v(") and media queries, matching the selector.")]),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("selector")]),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("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 comment"}},[t._v("// Common scenario, take all the component specific rules")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),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("getId")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" rules "),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("getRules")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("#")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token template-punctuation 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("\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("rules"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rule")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[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(")")]),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("")])])])}),[],!1,null,null,null);s.default=r.exports}}]); \ No newline at end of file +(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{441:function(t,s,a){"use strict";a.r(s);var e=a(44),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(" Options for the add of new rule (optional, default "),a("code",[t._v("{}")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("addOpts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")]),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(" Other props for the rule")])]),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("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("opts")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),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-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[t._v("#")]),t._v(" Parameters")]),t._v(" "),a("ul",[a("li",[a("p",[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("p",[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("p",[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(")")]),t._v(" "),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-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("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")])]),t._v(" "),a("h2",{attrs:{id:"getrules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getrules"}},[t._v("#")]),t._v(" getRules")]),t._v(" "),a("p",[t._v("Find rules, in different states (eg. like "),a("code",[t._v(":hover")]),t._v(") and media queries, matching the selector.")]),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("selector")]),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("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 comment"}},[t._v("// Common scenario, take all the component specific rules")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" id "),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("getId")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._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(" rules "),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("getRules")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[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("#")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token template-punctuation 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("\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("rules"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rule")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[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(")")]),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("")])])])}),[],!1,null,null,null);s.default=r.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/29.4c939d39.js b/docs/assets/js/29.0534d4fc.js similarity index 98% rename from docs/assets/js/29.4c939d39.js rename to docs/assets/js/29.0534d4fc.js index e3047e906..f90568f25 100644 --- a/docs/assets/js/29.4c939d39.js +++ b/docs/assets/js/29.0534d4fc.js @@ -1 +1 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{516:function(t,a,s){"use strict";s.r(a);var e=s(52),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([[29],{440:function(t,a,s){"use strict";s.r(a);var e=s(44),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/3.9c33fa00.js b/docs/assets/js/3.9c33fa00.js new file mode 100644 index 000000000..6b9dff652 --- /dev/null +++ b/docs/assets/js/3.9c33fa00.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{308: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}},334:function(e,t,s){},372:function(e,t,s){"use strict";s(334)},433:function(e,t,s){"use strict";s.r(t);var n=s(308),a={mounted:function(){window.editor2=grapesjs.init(n.a.gjsConfigBlocks)}},i=(s(372),s(44)),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.ae005b76.js b/docs/assets/js/3.ae005b76.js deleted file mode 100644 index c7c6d0541..000000000 --- a/docs/assets/js/3.ae005b76.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{379:function(e,t,s){"use strict";s(11);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}},409:function(e,t,s){},449:function(e,t,s){"use strict";s(409)},499:function(e,t,s){"use strict";s.r(t);var n=s(379),a={mounted:function(){window.editor2=grapesjs.init(n.a.gjsConfigBlocks)}},i=(s(449),s(52)),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.2f7bb3ab.js b/docs/assets/js/30.2f7bb3ab.js deleted file mode 100644 index fb17d78f3..000000000 --- a/docs/assets/js/30.2f7bb3ab.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{517:function(e,t,a){"use strict";a.r(t);var s=a(52),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:remove:before")]),e._v(" - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments 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:"parser"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parser"}},[e._v("#")]),e._v(" Parser")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("parse:html")]),e._v(" - On HTML parse, an object containing the input and the output of the parser is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("parse:css")]),e._v(" - On CSS parse, an object containing the input and the output of the parser is passed as an argument")])]),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:"pages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pages"}},[e._v("#")]),e._v(" Pages")]),e._v(" "),a("p",[e._v("Check the "),a("RouterLink",{attrs:{to:"/api/pages.html"}},[e._v("Pages")]),e._v(" module.")],1),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("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.cleanId")]),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(" Remove unnecessary IDs (eg. those created automatically) (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(" 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:"refresh"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#refresh"}},[e._v("#")]),e._v(" refresh")]),e._v(" "),a("p",[e._v("Update editor dimension offsets")]),e._v(" "),a("p",[e._v("This method could be useful when you update, for example, some position\nof the editor element (eg. canvas, panels, etc.) with CSS, where without\nrefresh you'll get misleading position of tools")]),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("opts")])]),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("?")]),e._v(" Options\n"),a("ul",[a("li",[a("code",[e._v("options.tools")]),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(" Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default "),a("code",[e._v("false")]),e._v(")")])])])]),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-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("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-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("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-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("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-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("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-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("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-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:"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-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:"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-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 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-25"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-25"}},[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/30.91585127.js b/docs/assets/js/30.91585127.js new file mode 100644 index 000000000..f39cf9772 --- /dev/null +++ b/docs/assets/js/30.91585127.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{457:function(e,t,a){"use strict";a.r(t);var s=a(44),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:remove:before")]),e._v(" - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments 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.")])]),e._v(" "),a("p",[e._v("By 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:"parser"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parser"}},[e._v("#")]),e._v(" Parser")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("parse:html")]),e._v(" - On HTML parse, an object containing the input and the output of the parser is passed as an argument")]),e._v(" "),a("li",[a("code",[e._v("parse:css")]),e._v(" - On CSS parse, an object containing the input and the output of the parser is passed as an argument")])]),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:"pages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pages"}},[e._v("#")]),e._v(" Pages")]),e._v(" "),a("p",[e._v("Check the "),a("RouterLink",{attrs:{to:"/api/pages.html"}},[e._v("Pages")]),e._v(" module.")],1),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("p",[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(")")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("opts.cleanId")]),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(" Remove unnecessary IDs (eg. those created automatically) (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(" 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("p",[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(")")]),e._v(" "),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("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("p",[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(")")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("opts.component")]),e._v(" "),a("strong",[e._v("Component?")]),e._v(" Get the JS of a particular component")])])])]),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-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("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-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("p",[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("p",[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")]),e._v(" "),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-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("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(" (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:"addstyle"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#addstyle"}},[e._v("#")]),e._v(" addStyle")]),e._v(" "),a("p",[e._v("Add styles to the editor")]),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("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("opts")]),e._v(" (optional, default "),a("code",[e._v("{}")]),e._v(")")])]),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",[e._v("editor"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("addStyle")]),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("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(" Array of created CssRule instances")]),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-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("p",[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("p",[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")]),e._v(" "),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-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",[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-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-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("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-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("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("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-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("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-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("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:"getediting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getediting"}},[e._v("#")]),e._v(" getEditing")]),e._v(" "),a("p",[e._v("Returns, if active, the Component enabled in rich text editing mode.")]),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("const")]),e._v(" textComp "),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("getEditing")]),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 keyword"}},[e._v("if")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("(")]),e._v("textComp"),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 console"),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("'HTML: '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(",")]),e._v(" textComp"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[e._v("toHTML")]),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("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[e._v("}")]),e._v("\n")])])]),a("p",[e._v("Returns "),a("strong",[e._v("(Component | null)")])]),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-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("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-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("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-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",[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-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("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-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("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-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("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-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("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-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("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-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("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:"refresh"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#refresh"}},[e._v("#")]),e._v(" refresh")]),e._v(" "),a("p",[e._v("Update editor dimension offsets")]),e._v(" "),a("p",[e._v("This method could be useful when you update, for example, some position\nof the editor element (eg. canvas, panels, etc.) with CSS, where without\nrefresh you'll get misleading position of tools")]),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("p",[a("code",[e._v("opts")])])]),e._v(" "),a("li",[a("p",[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("?")]),e._v(" Options")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("options.tools")]),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(" Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default "),a("code",[e._v("false")]),e._v(")")])])])]),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-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("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-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("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-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("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-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("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-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("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-22"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("p",[a("code",[e._v("msg")]),e._v(" "),a("strong",[e._v("any")]),e._v(" Message to log")])]),e._v(" "),a("li",[a("p",[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(")")]),e._v(" "),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-16"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-16"}},[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-23"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-23"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("p",[a("code",[e._v("args")]),e._v(" "),a("strong",[e._v("...any")])])]),e._v(" "),a("li",[a("p",[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("p",[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")]),e._v(" "),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-17"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-17"}},[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-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 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-25"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-25"}},[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-26"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-26"}},[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-27"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-27"}},[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)])]),e._v(" "),a("h2",{attrs:{id:"html"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#html"}},[e._v("#")]),e._v(" html")]),e._v(" "),a("p",[e._v("Print safe HTML by using ES6 tagged template strings.")]),e._v(" "),a("h3",{attrs:{id:"parameters-28"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-28"}},[e._v("#")]),e._v(" Parameters")]),e._v(" "),a("ul",[a("li",[a("code",[e._v("literals")]),e._v(" "),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("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(" "),a("li",[a("code",[e._v("substs")]),e._v(" "),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("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(" "),a("h3",{attrs:{id:"examples-18"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-18"}},[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("const")]),e._v(" unsafeStr "),a("span",{pre:!0,attrs:{class:"token operator"}},[e._v("=")]),e._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[e._v("' - - - + + +
    GrapesJS

    # FAQ

    Coming soon

    - + diff --git a/docs/getting-started.html b/docs/getting-started.html index d0dfbd6b3..193e2eb3d 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -4,15 +4,15 @@ Getting Started | GrapesJS - + - - - + + +
    - + diff --git a/docs/guides/Custom-CSS-parser.html b/docs/guides/Custom-CSS-parser.html index f2b79d94d..c0fa59e7c 100644 --- a/docs/guides/Custom-CSS-parser.html +++ b/docs/guides/Custom-CSS-parser.html @@ -4,14 +4,14 @@ Use Custom CSS Parser | GrapesJS - + - - - + + +
    - + diff --git a/docs/guides/Replace-Rich-Text-Editor.html b/docs/guides/Replace-Rich-Text-Editor.html index 363c7898c..d761b64c1 100644 --- a/docs/guides/Replace-Rich-Text-Editor.html +++ b/docs/guides/Replace-Rich-Text-Editor.html @@ -4,14 +4,14 @@ Replace the built-in Rich Text Editor | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/index.html b/docs/index.html index 1b4ea06e3..af9306bdf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -4,14 +4,14 @@ Introduction | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html index 730094d71..96977b180 100644 --- a/docs/modules/Assets.html +++ b/docs/modules/Assets.html @@ -4,14 +4,14 @@ Asset Manager | GrapesJS - + - - - + + +
    GrapesJS

    +

    # Events

    Currently available events you can listen to

    • 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

    ←

    GrapesJS
    - + diff --git a/docs/modules/Commands.html b/docs/modules/Commands.html index 9f8ac30de..c1eb54044 100644 --- a/docs/modules/Commands.html +++ b/docs/modules/Commands.html @@ -4,14 +4,14 @@ Commands | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/modules/Components-js.html b/docs/modules/Components-js.html index 5f1be04c4..244c6c3ae 100644 --- a/docs/modules/Components-js.html +++ b/docs/modules/Components-js.html @@ -4,14 +4,14 @@ Components & JS | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/modules/Components.html b/docs/modules/Components.html index 6701f140c..80af25d3c 100644 --- a/docs/modules/Components.html +++ b/docs/modules/Components.html @@ -4,14 +4,14 @@ Component Manager | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/modules/I18n.html b/docs/modules/I18n.html index a328b7a9a..16222c5b3 100644 --- a/docs/modules/I18n.html +++ b/docs/modules/I18n.html @@ -4,14 +4,14 @@ I18n (Internalization) | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/modules/Plugins.html b/docs/modules/Plugins.html index 4e5151742..24c94fd4f 100644 --- a/docs/modules/Plugins.html +++ b/docs/modules/Plugins.html @@ -4,14 +4,14 @@ Plugins | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/modules/Storage.html b/docs/modules/Storage.html index 9fe83ac05..9063bf26b 100644 --- a/docs/modules/Storage.html +++ b/docs/modules/Storage.html @@ -4,14 +4,14 @@ Storage Manager | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/modules/Style-manager.html b/docs/modules/Style-manager.html index 70d0ce42e..d44345bf8 100644 --- a/docs/modules/Style-manager.html +++ b/docs/modules/Style-manager.html @@ -4,14 +4,14 @@ Style Manager | GrapesJS - + - - - + + +
    GrapesJS
    - + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index e98f56b38..5ce8d3aa4 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -4,14 +4,14 @@ Trait Manager | GrapesJS - + - - - + + +