diff --git a/docs/404.html b/docs/404.html index 459631299..5ca2e6550 100644 --- a/docs/404.html +++ b/docs/404.html @@ -8,12 +8,12 @@ - - + + -

404

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

404

That's a Four-Oh-Four.
Take me home.
+ diff --git a/docs/Home.html b/docs/Home.html index 972e89d69..22ebd2f9b 100644 --- a/docs/Home.html +++ b/docs/Home.html @@ -8,8 +8,8 @@ - - + + @@ -330,6 +330,6 @@ The default one is the localStorage which is pretty simple and all the data are } ...

Check Storage Manager API Reference

Edit this page on GitHub
Last Updated: 7/13/2018, 12:12:35 AM
- + diff --git a/docs/api/assets.html b/docs/api/assets.html index d45de0c7f..210183313 100644 --- a/docs/api/assets.html +++ b/docs/api/assets.html @@ -8,8 +8,8 @@ - - + + @@ -80,6 +80,6 @@ passed entity

+ diff --git a/docs/api/block_manager.html b/docs/api/block_manager.html index f7dcfd943..78d66f344 100644 --- a/docs/api/block_manager.html +++ b/docs/api/block_manager.html @@ -8,8 +8,8 @@ - - + + @@ -53,15 +53,15 @@ console.log< console.log(JSON.stringify(blocks)); // [{label: 'Heading', content: '<h1>Put your ...'}, ...]

Returns Collection

getAllVisible

Return the visible collection, which containes blocks actually rendered

Returns Collection

remove

Remove a block by id

Parameters

Returns Block Removed block

getCategories

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

Returns (Array | Collection)

getContainer

Return the Blocks container element

Returns HTMLElement

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 | Collection)
 getContainer
Return the Blocks container element
Returns HTMLElement
 render
Render blocks
 Parameters
  • blocksArray Blocks to render, without the argument will render all global blocks
  • optsObject Options (optional, default {})
+
    • opts.externalBoolean? Render blocks in a new container (HTMLElement will be returned)
    • opts.ignoreCategoriesBoolean? Render blocks without categories
 Examples
// Render all blocks (inside the global collection)
 blockManager.render();
 
 // Render new set of blocks
 const blocks = blockManager.getAll();
-blockManager.render(blocks.filter(
- block => block.get('category') == 'sections'
-));
+const filtered = blocks.filter(block => block.get('category') == 'sections')
+
+blockManager.render(filtered);
 // Or a new set from an array
 blockManager.render([
  {label: 'Label text', content: '<div>Content</div>'}
@@ -69,6 +69,10 @@ blockManager.// Back to blocks from the global collection
 blockManager.render();
+
+// 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 Rendered element
Edit this page on GitHub
Last Updated: 7/8/2018, 1:46:22 PM

←

→

- + diff --git a/docs/api/commands.html b/docs/api/commands.html index 22378f0bb..cfb5ef49c 100644 --- a/docs/api/commands.html +++ b/docs/api/commands.html @@ -8,8 +8,8 @@ - - + + @@ -66,6 +66,6 @@ commands.isA DOM Components →

- + diff --git a/docs/api/component.html b/docs/api/component.html index 53132b982..30cc3edb7 100644 --- a/docs/api/component.html +++ b/docs/api/component.html @@ -8,8 +8,8 @@ - - + + @@ -117,13 +117,13 @@ This works only if the component is already rendered

Returns

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

Returns this

Edit this page on GitHub
Last Updated: 11/22/2018, 7:37:29 AM

+

Returns this

remove

Remove the component

Returns this

Edit this page on GitHub
Last Updated: 1/5/2019, 1:17:11 AM

← Panels →

- + diff --git a/docs/api/components.html b/docs/api/components.html index f332b1c5c..1943f44a9 100644 --- a/docs/api/components.html +++ b/docs/api/components.html @@ -8,8 +8,8 @@ - - + + @@ -79,13 +79,13 @@ Once the wrapper is rendered, and it's what happens when you init the editor, the all new components will be added automatically and property changes are all updated immediately

Returns HTMLElement

clear

Remove all components

Returns this

addType

Add new component type. Read more about this in Define New Component

Parameters

Returns this

getType

Get component type. -Read more about this in Define New Component

Parameters

Returns Object Component type defintion, eg. { model: ..., view: ... }

getTypes

Return the array of all types

Returns Array

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

+Read more about this in Define New Component

Parameters

Returns Object Component type defintion, eg. { model: ..., view: ... }

getTypes

Return the array of all types

Returns Array

Edit this page on GitHub
Last Updated: 1/5/2019, 1:17:11 AM

← - Component →

- + diff --git a/docs/api/css_composer.html b/docs/api/css_composer.html index 70e944f52..31e40d688 100644 --- a/docs/api/css_composer.html +++ b/docs/api/css_composer.html @@ -8,8 +8,8 @@ - - + + @@ -27,14 +27,14 @@ Twitter GitHub -

CssComposer

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

CssComposer

This module contains and manage CSS rules for the template inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object

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

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

const cssComposer = editor.CssComposer;
-

load

Load data from the passed object, if the object is empty will try to fetch them +

load

Load data from the passed object, if the object is empty will try to fetch them autonomously from the storage manager. The fetched data will be added to the collection

Parameters

  • dataObject Object of data to load

Returns Object Loaded rules

store

Store data to the selected storage

Parameters

  • noStoreBoolean If true, won't store

Returns Object Data to store

add

Add new rule to the collection, if not yet exists with the same selectors

Parameters

  • selectorsArray<Selector> Array of selectors
  • stateString Css rule state
  • widthString For which device this style is oriented
  • optsObject Other options for the rule (optional, default {})

Examples

var sm = editor.SelectorManager;
 var sel1 = sm.add('myClass1');
@@ -53,20 +53,25 @@ rule.set: '300px',
   color: '#000',
 });
-

Returns (Model | null)

getAll

Get the collection of rules

Returns Collection

clear

Remove all rules

Returns this

setIdRule

Add/update the CSS rule with id selector

Parameters

  • namestring Id selector name, eg. 'my-id'
  • styleObject Style properties and values (optional, default {})
  • optsObject Custom options, like state and mediaText (optional, default {})

Examples

const rule = cc.setIdRule('myid', { color: 'red' });
-const ruleHover = cc.setIdRule('myid', { color: 'blue' }, { state: 'hover' });
-// This will add current CSS:
-// #myid { color: red }
-// #myid:hover { color: blue }
-

Returns CssRule The new/updated rule

getIdRule

Get the CSS rule by id selector

Parameters

  • namestring Id selector name, eg. 'my-id'
  • optsObject Custom options, like state and mediaText (optional, default {})

Examples

const rule = cc.getIdRule('myid');
-const ruleHover = cc.setIdRule('myid', { state: 'hover' });
-

Returns CssRule

setClassRule

Add/update the CSS rule with class selector

Parameters

  • namestring Class selector name, eg. 'my-class'
  • styleObject Style properties and values (optional, default {})
  • optsObject Custom options, like state and mediaText (optional, default {})

Examples

const rule = cc.setClassRule('myclass', { color: 'red' });
-const ruleHover = cc.setClassRule('myclass', { color: 'blue' }, { state: 'hover' });
-// This will add current CSS:
-// .myclass { color: red }
-// .myclass:hover { color: blue }
-

Returns CssRule The new/updated rule

getClassRule

Get the CSS rule by class selector

Parameters

  • namestring Class selector name, eg. 'my-class'
  • optsObject Custom options, like state and mediaText (optional, default {})

Examples

const rule = cc.getClassRule('myclass');
-const ruleHover = cc.getClassRule('myclass', { state: 'hover' });
+

Returns (Model | null)

getAll

Get the collection of rules

Returns Collection

clear

Remove all rules

Returns this

setRule

Add/update the CSS rule with a generic selector

Parameters

  • selectorsstring Selector, eg. '.myclass'
  • styleObject Style properties and values
  • optsObject Additional properties (optional, default {}) +
    • opts.atRuleTypeString At-rule type, eg. 'media' (optional, default '')
    • opts.atRuleParamsString At-rule parameters, eg. '(min-width: 500px)' (optional, default '')

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
+const rule = cc.setRule('.class1.class2:hover, div#myid', { color: 'red' });
+// output: .class1.class2:hover, div#myid { color: red }
+// With media
+const rule = cc.setRule('.class1:hover', { color: 'red' }, {
+ atRuleType: 'media',
+ atRuleParams: '(min-width: 500px)',
+});
+// output: @media (min-width: 500px) { .class1:hover { color: red } }
+

Returns CssRule The new/updated rule

getRule

Get the CSS rule by a generic selector

Parameters

  • selectorsstring Selector, eg. '.myclass:hover'
  • opts (optional, default {})

Examples

const rule = cc.getRule('.myclass1:hover');
+const rule2 = cc.getRule('.myclass1:hover, div#myid');
+const rule3 = cc.getRule('.myclass1', {
+ atRuleType: 'media',
+ atRuleParams: '(min-width: 500px)',
+});

Returns CssRule

Edit this page on GitHub
Last Updated: 7/8/2018, 11:44:23 PM

←

→

- + diff --git a/docs/api/editor.html b/docs/api/editor.html index 92c0258e4..d67f535b4 100644 --- a/docs/api/editor.html +++ b/docs/api/editor.html @@ -8,8 +8,8 @@ - - + + @@ -35,7 +35,7 @@ You get the Editor instance on init method and you can pass options via its // do something })

Components

Blocks

Assets

Keymaps

Style Manager

Storages

Canvas

Selectors

RTE

Commands

General

getConfig

Returns configuration object

Parameters

Returns any Returns the configuration object or +By changing result.content you're able to customize what is dropped

Selectors

RTE

Commands

General

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 HTML string

getCss

Returns CSS built inside canvas

Parameters

Returns string CSS string

getJs

Returns JS of all components

Returns string JS string

getComponents

Return the complete tree of components. Use getWrapper to include also the wrapper

Returns Components

getWrapper

Return the wrapper and its all components

Returns Component

setComponents

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

Parameters

Examples

editor.setComponents('<div class="cls">New component</div>');
 // or
 editor.setComponents({
@@ -123,13 +123,13 @@ custom parser, pass null as the argument

 // Callbacks of those events will always receive the message and
 // options, as arguments, eg:
 // editor.on('log:info', (msg, opts) => console.info(msg, opts))
-

Returns this

on

Attach event

Parameters

Returns this

once

Attach event and detach it after the first run

Parameters

Returns this

off

Detach event

Parameters

Returns this

trigger

Trigger event

Parameters

Returns this

destroy

Destroy the editor

render

Render editor

Returns HTMLElement

Edit this page on GitHub
Last Updated: 11/22/2018, 7:37:29 AM

+

Returns this

on

Attach event

Parameters

Returns this

once

Attach event and detach it after the first run

Parameters

Returns this

off

Detach event

Parameters

Returns this

trigger

Trigger event

Parameters

Returns this

destroy

Destroy the editor

render

Render editor

Returns HTMLElement

Edit this page on GitHub
Last Updated: 1/5/2019, 1:17:11 AM

← Canvas →

- + diff --git a/docs/api/index.html b/docs/api/index.html index c8ce92066..191b54eec 100644 --- a/docs/api/index.html +++ b/docs/api/index.html @@ -8,8 +8,8 @@ - - + + @@ -31,6 +31,6 @@ Editor →

- + diff --git a/docs/api/keymaps.html b/docs/api/keymaps.html index 11be94880..d0918721b 100644 --- a/docs/api/keymaps.html +++ b/docs/api/keymaps.html @@ -8,8 +8,8 @@ - - + + @@ -65,6 +65,6 @@ or just a command id as a string

+ diff --git a/docs/api/modal_dialog.html b/docs/api/modal_dialog.html index ff34811e2..0cb387d92 100644 --- a/docs/api/modal_dialog.html +++ b/docs/api/modal_dialog.html @@ -8,8 +8,8 @@ - - + + @@ -43,6 +43,6 @@ Rich Text Editor →

- + diff --git a/docs/api/panels.html b/docs/api/panels.html index 97049361a..0bdfc7183 100644 --- a/docs/api/panels.html +++ b/docs/api/panels.html @@ -8,8 +8,8 @@ - - + + @@ -86,6 +86,6 @@ command: func Style Manager →

- + diff --git a/docs/api/rich_text_editor.html b/docs/api/rich_text_editor.html index 4d4c5d8f5..4570b0f9a 100644 --- a/docs/api/rich_text_editor.html +++ b/docs/api/rich_text_editor.html @@ -8,8 +8,8 @@ - - + + @@ -74,6 +74,6 @@ rte.add →

- + diff --git a/docs/api/selector_manager.html b/docs/api/selector_manager.html index adae86ee1..55397364e 100644 --- a/docs/api/selector_manager.html +++ b/docs/api/selector_manager.html @@ -8,8 +8,8 @@ - - + + @@ -40,25 +40,29 @@ 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

add

Add a new selector to collection if it's not already exists. Class type is a default one

Parameters

Examples

var selector = selectorManager.add('selectorName');
+

getConfig

Get configuration object

Returns Object

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
-var selector = selectorManager.add('selectorName', {
+const selector = selectorManager.add('selectorName', {
   type: 1,
   label: 'selectorName'
 });
-

Returns Model

addClass

Add class selectors

Parameters

Examples

sm.addClass('class1');
+// Multiple selectors
+const selectors = selectorManager.add(['.class1', '.class2', '#id1']);
+

Returns (Model | Array)

addClass

Add class selectors

Parameters

Examples

sm.addClass('class1');
 sm.addClass('class1 class2');
 sm.addClass(['class1', 'class2']);
 // -> [SelectorObject, ...]
-

Returns Array Array of added selectors

get

Get the selector by its name

Parameters

Examples

var selector = selectorManager.get('selectorName');
-

Returns (Model | null)

getAll

Get all selectors

Returns Collection

Edit this page on GitHub
Last Updated: 7/8/2018, 11:38:08 PM

+

Returns Array Array of added selectors

get

Get the selector by its name

Parameters

Examples

const selector = selectorManager.get('selectorName');
+// or get an array
+const selectors = selectorManager.get(['class1', 'class2']);
+

Returns (Model | Array)

getAll

Get all selectors

Returns Collection

Edit this page on GitHub
Last Updated: 7/8/2018, 11:38:08 PM

← CSS Composer →

- + diff --git a/docs/api/storage_manager.html b/docs/api/storage_manager.html index 65ca5f9d1..d8a332757 100644 --- a/docs/api/storage_manager.html +++ b/docs/api/storage_manager.html @@ -8,8 +8,8 @@ - - + + @@ -65,6 +65,6 @@ storageManager. + diff --git a/docs/api/style_manager.html b/docs/api/style_manager.html index cfe678ea7..76db3e94e 100644 --- a/docs/api/style_manager.html +++ b/docs/api/style_manager.html @@ -8,8 +8,8 @@ - - + + @@ -83,13 +83,13 @@ propView.ren propView.model.on('change:value', ...); someContainer.appendChild(propView.el);

Returns PropertyView

setTarget

Select different target for the Style Manager. -It could be a Component, CSSRule, or a string of any CSS selector

Parameters

  • target(Component | CSSRule | String)
  • opts

Returns Styleable A Component or CSSRule

Edit this page on GitHub
Last Updated: 11/3/2018, 1:41:52 PM

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

Parameters

  • target(Component | CSSRule | String)
  • opts

Returns Styleable A Component or CSSRule

Edit this page on GitHub
Last Updated: 1/5/2019, 1:17:11 AM

← Storage Manager →

- + diff --git a/docs/api/undo_manager.html b/docs/api/undo_manager.html index 09899cfb9..de30f09a1 100644 --- a/docs/api/undo_manager.html +++ b/docs/api/undo_manager.html @@ -8,8 +8,8 @@ - - + + @@ -50,6 +50,6 @@ stack.each Keymaps

- + diff --git a/docs/assets/js/15.7fc23c4b.js b/docs/assets/js/15.7fc23c4b.js new file mode 100644 index 000000000..21329323f --- /dev/null +++ b/docs/assets/js/15.7fc23c4b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{249:function(t,a,e){"use strict";e.r(a);var s=e(1),n=Object(s.a)({},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"content"},[t._m(0),e("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),e("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),e("OutboundLink")],1)]),t._m(1),e("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),e("p",[t._v("Get configuration object")]),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)])]),t._m(5),e("p",[t._v("Load default blocks if the collection is empty")]),t._m(6),e("p",[t._v("Add new block to the collection.")]),t._m(7),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")]),e("li",[e("code",[t._v("opts")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Options\n"),e("ul",[e("li",[e("code",[t._v("opts.label")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Name of the block")]),e("li",[e("code",[t._v("opts.content")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" HTML content")]),e("li",[e("code",[t._v("opts.category")]),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1),t._v(" | "),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1),t._v(")")]),t._v(" Group the block inside a catgegory.\nYou should pass objects with id property, eg:\n{id: 'some-uid', label: 'My category'}\nThe string will be converted in:\n'someid' => {id: 'someid', label: 'someid'}")]),e("li",[e("code",[t._v("opts.attributes")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Block attributes (optional, default "),e("code",[t._v("{}")]),t._v(")")])])])]),t._m(8),t._m(9),t._m(10),t._m(11),e("p",[t._v("Return the block by id")]),t._m(12),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")])]),t._m(13),t._m(14),t._m(15),e("p",[t._v("Return all blocks")]),t._m(16),t._m(17),t._m(18),t._m(19),e("p",[t._v("Return the visible collection, which containes blocks actually rendered")]),t._m(20),t._m(21),e("p",[t._v("Remove a block by id")]),t._m(22),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")])]),t._m(23),t._m(24),e("p",[t._v("Get all available categories.\nIt's possible to add categories only within blocks via 'add()' method")]),e("p",[t._v("Returns "),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(" | Collection)")])]),t._m(25),e("p",[t._v("Return the Blocks container element")]),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),e("OutboundLink")],1)])]),t._m(26),e("p",[t._v("Render blocks")]),t._m(27),e("ul",[e("li",[e("code",[t._v("blocks")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1)]),t._v(" Blocks to render, without the argument will render all global blocks")]),e("li",[e("code",[t._v("opts")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Options (optional, default "),e("code",[t._v("{}")]),t._v(")\n"),e("ul",[e("li",[e("code",[t._v("opts.external")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),e("OutboundLink")],1),t._v("?")]),t._v(" Render blocks in a new container (HTMLElement will be returned)")]),e("li",[e("code",[t._v("opts.ignoreCategories")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),e("OutboundLink")],1),t._v("?")]),t._v(" Render blocks without categories")])])])]),t._m(28),t._m(29),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),e("OutboundLink")],1)]),t._v(" Rendered element")])])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"blockmanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#blockmanager","aria-hidden":"true"}},[this._v("#")]),this._v(" BlockManager")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("init")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blockManager "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("BlockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ul",[e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),e("li",[e("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),e("li",[e("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),e("li",[e("a",{attrs:{href:"#remove"}},[t._v("remove")])]),e("li",[e("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),e("li",[e("a",{attrs:{href:"#getcategories"}},[t._v("getCategories")])]),e("li",[e("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),e("li",[e("a",{attrs:{href:"#render"}},[t._v("render")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"onload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onload","aria-hidden":"true"}},[this._v("#")]),this._v(" onLoad")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("add")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'h1-block'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Heading'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'

Put your title here

'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n category"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Basic'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n title"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Insert h1 block'")]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Block")]),this._v(" Added block")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" block "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token keyword"}},[t._v("get")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'h1-block'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("log")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token constant"}},[t._v("JSON")]),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("stringify")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// {label: 'Heading', content: '

Put your ...', ...}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("getAll")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("log")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token constant"}},[t._v("JSON")]),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("stringify")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// [{label: 'Heading', content: '

Put your ...'}, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getallvisible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible","aria-hidden":"true"}},[this._v("#")]),this._v(" getAllVisible")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Block")]),this._v(" Removed block")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getcategories"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcategories","aria-hidden":"true"}},[this._v("#")]),this._v(" getCategories")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getcontainer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token comment"}},[t._v("// Render all blocks (inside the global collection)")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Render new set of blocks")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("getAll")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" filtered "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blocks"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("filter")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block "),e("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" block"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token keyword"}},[t._v("get")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'category'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'sections'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Or a new set from an array")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("label"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Label text'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'
Content
'")]),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Back to blocks from the global collection")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("// You can also render your blocks outside of the main block container")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" newBlocksEl "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("filtered"),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" external"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ndocument"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("getElementById")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'some-id'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("appendChild")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newBlocksEl"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])}],!1,null,null,null);n.options.__file="block_manager.md";a.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/15.f4316c4a.js b/docs/assets/js/15.f4316c4a.js deleted file mode 100644 index b1f8aff08..000000000 --- a/docs/assets/js/15.f4316c4a.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{249:function(t,a,e){"use strict";e.r(a);var s=e(1),n=Object(s.a)({},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"content"},[t._m(0),e("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),e("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/block_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),e("OutboundLink")],1)]),t._m(1),e("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),e("p",[t._v("Get configuration object")]),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)])]),t._m(5),e("p",[t._v("Load default blocks if the collection is empty")]),t._m(6),e("p",[t._v("Add new block to the collection.")]),t._m(7),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")]),e("li",[e("code",[t._v("opts")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Options\n"),e("ul",[e("li",[e("code",[t._v("opts.label")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Name of the block")]),e("li",[e("code",[t._v("opts.content")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" HTML content")]),e("li",[e("code",[t._v("opts.category")]),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1),t._v(" | "),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1),t._v(")")]),t._v(" Group the block inside a catgegory.\nYou should pass objects with id property, eg:\n{id: 'some-uid', label: 'My category'}\nThe string will be converted in:\n'someid' => {id: 'someid', label: 'someid'}")]),e("li",[e("code",[t._v("opts.attributes")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),e("OutboundLink")],1)]),t._v(" Block attributes (optional, default "),e("code",[t._v("{}")]),t._v(")")])])])]),t._m(8),t._m(9),t._m(10),t._m(11),e("p",[t._v("Return the block by id")]),t._m(12),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")])]),t._m(13),t._m(14),t._m(15),e("p",[t._v("Return all blocks")]),t._m(16),t._m(17),t._m(18),t._m(19),e("p",[t._v("Return the visible collection, which containes blocks actually rendered")]),t._m(20),t._m(21),e("p",[t._v("Remove a block by id")]),t._m(22),e("ul",[e("li",[e("code",[t._v("id")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),e("OutboundLink")],1)]),t._v(" Block id")])]),t._m(23),t._m(24),e("p",[t._v("Get all available categories.\nIt's possible to add categories only within blocks via 'add()' method")]),e("p",[t._v("Returns "),e("strong",[t._v("("),e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1),t._v(" | Collection)")])]),t._m(25),e("p",[t._v("Return the Blocks container element")]),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),e("OutboundLink")],1)])]),t._m(26),e("p",[t._v("Render blocks")]),t._m(27),e("ul",[e("li",[e("code",[t._v("blocks")]),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),e("OutboundLink")],1)]),t._v(" Blocks to render, without the argument will render\nall global blocks")])]),t._m(28),t._m(29),e("p",[t._v("Returns "),e("strong",[e("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),e("OutboundLink")],1)]),t._v(" Rendered element")])])},[function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"blockmanager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#blockmanager","aria-hidden":"true"}},[this._v("#")]),this._v(" BlockManager")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("init")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),e("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-js extra-class"},[e("pre",{pre:!0,attrs:{class:"language-js"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blockManager "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("BlockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("ul",[e("li",[e("a",{attrs:{href:"#add"}},[t._v("add")])]),e("li",[e("a",{attrs:{href:"#get"}},[t._v("get")])]),e("li",[e("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),e("li",[e("a",{attrs:{href:"#getallvisible"}},[t._v("getAllVisible")])]),e("li",[e("a",{attrs:{href:"#remove"}},[t._v("remove")])]),e("li",[e("a",{attrs:{href:"#getconfig"}},[t._v("getConfig")])]),e("li",[e("a",{attrs:{href:"#getcategories"}},[t._v("getCategories")])]),e("li",[e("a",{attrs:{href:"#getcontainer"}},[t._v("getContainer")])]),e("li",[e("a",{attrs:{href:"#render"}},[t._v("render")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getconfig"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"onload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#onload","aria-hidden":"true"}},[this._v("#")]),this._v(" onLoad")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"add"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[t._v("blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("add")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'h1-block'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Heading'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'

Put your title here

'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n category"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Basic'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n attributes"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n title"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Insert h1 block'")]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Block")]),this._v(" Added block")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"get"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" block "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token keyword"}},[t._v("get")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'h1-block'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("log")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token constant"}},[t._v("JSON")]),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("stringify")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("block"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// {label: 'Heading', content: '

Put your ...', ...}")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("getAll")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("log")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token constant"}},[t._v("JSON")]),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("stringify")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// [{label: 'Heading', content: '

Put your ...'}, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getallvisible"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getallvisible","aria-hidden":"true"}},[this._v("#")]),this._v(" getAllVisible")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Collection")])])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"remove"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remove","aria-hidden":"true"}},[this._v("#")]),this._v(" remove")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("p",[this._v("Returns "),a("strong",[this._v("Block")]),this._v(" Removed block")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getcategories"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcategories","aria-hidden":"true"}},[this._v("#")]),this._v(" getCategories")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"getcontainer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h2",{attrs:{id:"render"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"parameters-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,a=this._self._c||t;return a("h3",{attrs:{id:"examples-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,a=t.$createElement,e=t._self._c||a;return e("div",{staticClass:"language-javascript extra-class"},[e("pre",{pre:!0,attrs:{class:"language-javascript"}},[e("code",[e("span",{attrs:{class:"token comment"}},[t._v("// Render all blocks (inside the global collection)")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Render new set of blocks")]),t._v("\n"),e("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" blocks "),e("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" blockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("getAll")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("blocks"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("filter")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n block "),e("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" block"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token keyword"}},[t._v("get")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token string"}},[t._v("'category'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),e("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'sections'")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Or a new set from an array")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),e("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("label"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'Label text'")]),e("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" content"),e("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),e("span",{attrs:{class:"token string"}},[t._v("'
Content
'")]),e("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),e("span",{attrs:{class:"token punctuation"}},[t._v("]")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),e("span",{attrs:{class:"token comment"}},[t._v("// Back to blocks from the global collection")]),t._v("\nblockManager"),e("span",{attrs:{class:"token punctuation"}},[t._v(".")]),e("span",{attrs:{class:"token function"}},[t._v("render")]),e("span",{attrs:{class:"token punctuation"}},[t._v("(")]),e("span",{attrs:{class:"token punctuation"}},[t._v(")")]),e("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])}],!1,null,null,null);n.options.__file="block_manager.md";a.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/20.2a47ec70.js b/docs/assets/js/20.2a47ec70.js deleted file mode 100644 index 32ad8d126..000000000 --- a/docs/assets/js/20.2a47ec70.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{254:function(t,s,a){"use strict";a.r(s);var e=a(1),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("This module contains and manage CSS rules for the template inside the canvas.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Load data from the passed object, if the object is empty will try to fetch them\nautonomously from the storage manager.\nThe fetched data will be added to the collection")]),t._m(5),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object of data to load")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Loaded rules")]),t._m(6),a("p",[t._v("Store data to the selected storage")]),t._m(7),a("ul",[a("li",[a("code",[t._v("noStore")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If true, won't store")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data to store")]),t._m(8),a("p",[t._v("Add new rule to the collection, if not yet exists with the same selectors")]),t._m(9),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("")]),t._v(" Array of selectors")]),a("li",[a("code",[t._v("state")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Css rule state")]),a("li",[a("code",[t._v("width")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" For which device this style is oriented")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Other options for the rule (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(10),t._m(11),t._m(12),t._m(13),a("p",[t._v("Get the rule")]),t._m(14),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("")]),t._v(" Array of selectors")]),a("li",[a("code",[t._v("state")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Css rule state")]),a("li",[a("code",[t._v("width")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" For which device this style is oriented")]),a("li",[a("code",[t._v("ruleProps")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Other rule props")])]),t._m(15),t._m(16),t._m(17),t._m(18),a("p",[t._v("Get the collection of rules")]),t._m(19),t._m(20),a("p",[t._v("Remove all rules")]),t._m(21),t._m(22),a("p",[t._v("Add/update the CSS rule with id selector")]),t._m(23),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Id selector name, eg. 'my-id'")]),a("li",[a("code",[t._v("style")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Style properties and values (optional, default "),a("code",[t._v("{}")]),t._v(")")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(24),t._m(25),t._m(26),t._m(27),a("p",[t._v("Get the CSS rule by id selector")]),t._m(28),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Id selector name, eg. 'my-id'")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(29),t._m(30),t._m(31),t._m(32),a("p",[t._v("Add/update the CSS rule with class selector")]),t._m(33),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Class selector name, eg. 'my-class'")]),a("li",[a("code",[t._v("style")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Style properties and values (optional, default "),a("code",[t._v("{}")]),t._v(")")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(34),t._m(35),t._m(36),t._m(37),a("p",[t._v("Get the CSS rule by class selector")]),t._m(38),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Class selector name, eg. 'my-class'")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options, like "),a("code",[t._v("state")]),t._v(" and "),a("code",[t._v("mediaText")]),t._v(" (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(39),t._m(40),t._m(41)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"csscomposer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#csscomposer","aria-hidden":"true"}},[this._v("#")]),this._v(" CssComposer")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cssComposer "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),a("li",[a("a",{attrs:{href:"#setidrule"}},[t._v("setIdRule")])]),a("li",[a("a",{attrs:{href:"#getidrule"}},[t._v("getIdRule")])]),a("li",[a("a",{attrs:{href:"#setclassrule"}},[t._v("setClassRule")])]),a("li",[a("a",{attrs:{href:"#getclassrule"}},[t._v("getClassRule")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"load"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrule"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'style'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#fff'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Model")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Update the style")]),t._v("\nrule"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'style'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#000'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("(Model | null)")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Collection")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"clear"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#clear","aria-hidden":"true"}},[this._v("#")]),this._v(" clear")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"setidrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setidrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setIdRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" ruleHover "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'blue'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will add current CSS:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// #myid { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// #myid:hover { color: blue }")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")]),this._v(" The new/updated rule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getidrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getidrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getIdRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" ruleHover "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setIdRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"setclassrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setclassrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setClassRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-7"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" ruleHover "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'blue'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will add current CSS:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// .myclass { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// .myclass:hover { color: blue }")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")]),this._v(" The new/updated rule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getclassrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getclassrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getClassRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-8"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" ruleHover "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getClassRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" state"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")])])}],!1,null,null,null);n.options.__file="css_composer.md";s.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/20.543fb485.js b/docs/assets/js/20.543fb485.js new file mode 100644 index 000000000..f3b730189 --- /dev/null +++ b/docs/assets/js/20.543fb485.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{254:function(t,s,a){"use strict";a.r(s);var e=a(1),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("This module contains and manage CSS rules for the template inside the canvas.\nYou can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/css_composer/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(2),t._m(3),t._m(4),a("p",[t._v("Load data from the passed object, if the object is empty will try to fetch them\nautonomously from the storage manager.\nThe fetched data will be added to the collection")]),t._m(5),a("ul",[a("li",[a("code",[t._v("data")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Object of data to load")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Loaded rules")]),t._m(6),a("p",[t._v("Store data to the selected storage")]),t._m(7),a("ul",[a("li",[a("code",[t._v("noStore")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If true, won't store")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Data to store")]),t._m(8),a("p",[t._v("Add new rule to the collection, if not yet exists with the same selectors")]),t._m(9),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("")]),t._v(" Array of selectors")]),a("li",[a("code",[t._v("state")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Css rule state")]),a("li",[a("code",[t._v("width")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" For which device this style is oriented")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Other options for the rule (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(10),t._m(11),t._m(12),t._m(13),a("p",[t._v("Get the rule")]),t._m(14),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("")]),t._v(" Array of selectors")]),a("li",[a("code",[t._v("state")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Css rule state")]),a("li",[a("code",[t._v("width")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" For which device this style is oriented")]),a("li",[a("code",[t._v("ruleProps")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Other rule props")])]),t._m(15),t._m(16),t._m(17),t._m(18),a("p",[t._v("Get the collection of rules")]),t._m(19),t._m(20),a("p",[t._v("Remove all rules")]),t._m(21),t._m(22),a("p",[t._v("Add/update the CSS rule with a generic selector")]),t._m(23),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass'")]),a("li",[a("code",[t._v("style")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Style properties and values")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Additional properties (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.atRuleType")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" At-rule type, eg. 'media' (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.atRuleParams")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" At-rule parameters, eg. '(min-width: 500px)' (optional, default "),a("code",[t._v("''")]),t._v(")")])])])]),t._m(24),t._m(25),t._m(26),t._m(27),a("p",[t._v("Get the CSS rule by a generic selector")]),t._m(28),a("ul",[a("li",[a("code",[t._v("selectors")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Selector, eg. '.myclass:hover'")]),t._m(29)]),t._m(30),t._m(31),t._m(32)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"csscomposer"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#csscomposer","aria-hidden":"true"}},[this._v("#")]),this._v(" CssComposer")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" cssComposer "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ul",[a("li",[a("a",{attrs:{href:"#load"}},[t._v("load")])]),a("li",[a("a",{attrs:{href:"#store"}},[t._v("store")])]),a("li",[a("a",{attrs:{href:"#add"}},[t._v("add")])]),a("li",[a("a",{attrs:{href:"#get"}},[t._v("get")])]),a("li",[a("a",{attrs:{href:"#getall"}},[t._v("getAll")])]),a("li",[a("a",{attrs:{href:"#clear"}},[t._v("clear")])]),a("li",[a("a",{attrs:{href:"#setrule"}},[t._v("setRule")])]),a("li",[a("a",{attrs:{href:"#getrule"}},[t._v("getRule")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"load"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"store"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrule"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'style'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'100px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#fff'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Model")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sm "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel1 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" sel2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myClass2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cssComposer"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("sel1"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sel2"),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Update the style")]),t._v("\nrule"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("set")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'style'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n width"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'300px'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#000'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("(Model | null)")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Collection")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"clear"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#clear","aria-hidden":"true"}},[this._v("#")]),this._v(" clear")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("this")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"setrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setrule","aria-hidden":"true"}},[this._v("#")]),this._v(" setRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-5"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Simple class-based rule")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.class1.class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("rule"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("toCSS")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// output: .class1.class2 { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// With state and other mixed selector")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.class1.class2:hover, div#myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// output: .class1.class2:hover, div#myid { color: red }")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// With media")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.class1:hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'media'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// output: @media (min-width: 500px) { .class1:hover { color: red } }")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")]),this._v(" The new/updated rule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getrule"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getrule","aria-hidden":"true"}},[this._v("#")]),this._v(" getRule")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-6"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("code",[this._v("opts")]),this._v(" (optional, default "),s("code",[this._v("{}")]),this._v(")")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-4"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.myclass1:hover'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule2 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.myclass1:hover, div#myid'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rule3 "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" cc"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getRule")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.myclass1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n atRuleType"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'media'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n atRuleParams"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'(min-width: 500px)'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("CssRule")])])}],!1,null,null,null);n.options.__file="css_composer.md";s.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/22.a74e75d1.js b/docs/assets/js/22.a74e75d1.js new file mode 100644 index 000000000..2e61e75db --- /dev/null +++ b/docs/assets/js/22.a74e75d1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{236:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.\nYou get the Editor instance on init method and you can pass options via its "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),t._m(2),a("p",[t._v("You can make use of available events in this way")]),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),a("p",[t._v("Returns configuration object")]),t._m(29),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v("?")]),t._v(" Property name")])]),t._m(30),t._m(31),a("p",[t._v("Returns HTML built inside canvas")]),t._m(32),t._m(33),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(34),a("p",[t._v("Returns CSS built inside canvas")]),t._m(35),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS string")]),t._m(36),a("p",[t._v("Returns JS of all components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" JS string")]),t._m(37),t._m(38),t._m(39),t._m(40),a("p",[t._v("Return the wrapper and its all components")]),t._m(41),t._m(42),a("p",[t._v("Set components inside editor's canvas. This method overrides actual components")]),t._m(43),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")])]),t._m(44),t._m(45),t._m(46),t._m(47),a("p",[t._v("Add components")]),t._m(48),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.avoidUpdateStyle")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If the HTML string contains styles,\nby default, they will be created and, if already exist, updated. When this option\nis true, styles already created will not be updated. (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._m(49),t._m(50),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(51),a("p",[t._v("Returns style in JSON format object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(52),a("p",[t._v("Set style inside editor's canvas. This method overrides actual style")]),t._m(53),a("ul",[a("li",[a("code",[t._v("style")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" CSS string or style model")])]),t._m(54),t._m(55),t._m(56),t._m(57),a("p",[t._v("Returns the last selected component, if there is one")]),t._m(58),t._m(59),a("p",[t._v("Returns an array of all selected components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(60),a("p",[t._v("Get a stylable entity from the selected component.\nIf you select a component without classes the entity is the Component\nitself and all changes will go inside its 'style' attribute. Otherwise,\nif the selected component has one or more classes, the function will\nreturn the corresponding CSS Rule")]),t._m(61),t._m(62),a("p",[t._v("Select a component")]),t._m(63),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(64),t._m(65),t._m(66),t._m(67),a("p",[t._v("Add component to selection")]),t._m(68),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(69),t._m(70),t._m(71),t._m(72),a("p",[t._v("Remove component from selection")]),t._m(73),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(74),t._m(75),t._m(76),t._m(77),a("p",[t._v("Toggle component selection")]),t._m(78),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(79),t._m(80),t._m(81),t._m(82),a("p",[t._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),t._m(83),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the device")])]),t._m(84),t._m(85),t._m(86),t._m(87),a("p",[t._v("Return the actual active device")]),t._m(88),t._m(89),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Device name")]),t._m(90),a("p",[t._v("Execute command")]),t._m(91),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(92),t._m(93),t._m(94),t._m(95),a("p",[t._v("Stop the command if stop method was provided")]),t._m(96),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(97),t._m(98),t._m(99),t._m(100),a("p",[t._v("Store data to the current storage")]),t._m(101),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(102),a("p",[t._v("Load data from the current storage")]),t._m(103),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(104),a("p",[t._v("Returns container element. The one which was indicated as 'container'\non init method")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(105),t._m(106),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(107),a("p",[t._v("Replace the built-in Rich Text Editor with a custom one.")]),t._m(108),a("ul",[a("li",[a("code",[t._v("obj")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom RTE Interface")])]),t._m(109),t._m(110),t._m(111),t._m(112),t._m(113),a("ul",[a("li",[a("code",[t._v("parser")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(" | null)")]),t._v(" Parser function")])]),t._m(114),t._m(115),t._m(116),t._m(117),a("p",[t._v("Trigger event log message")]),t._m(118),a("ul",[t._m(119),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.ns")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Namespace of the log (eg. to use in plugins) (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.level")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Level of the log, "),a("code",[t._v("debug")]),t._v(", "),a("code",[t._v("info")]),t._v(", "),a("code",[t._v("warning")]),t._v(", "),a("code",[t._v("error")]),t._v(" (optional, default "),a("code",[t._v("'debug'")]),t._v(")")])])])]),t._m(120),t._m(121),t._m(122),t._m(123),a("p",[t._v("Attach event")]),t._m(124),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(125),t._m(126),a("p",[t._v("Attach event and detach it after the first run")]),t._m(127),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(128),t._m(129),a("p",[t._v("Detach event")]),t._m(130),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(131),t._m(132),a("p",[t._v("Trigger event")]),t._m(133),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event to trigger")])]),t._m(134),t._m(135),a("p",[t._v("Destroy the editor")]),t._m(136),a("p",[t._v("Render editor")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"editor"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#editor","aria-hidden":"true"}},[this._v("#")]),this._v(" Editor")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"available-events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#available-events","aria-hidden":"true"}},[this._v("#")]),this._v(" Available Events")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'EVENT-NAME'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("some"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" argument"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" Components")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("component:create")]),t._v(" - Component is created (only the model, is not yet mounted in the canvas), called after the init() method")]),a("li",[a("code",[t._v("component:mount")]),t._v(" - Component is monted to an element and rendered in canvas")]),a("li",[a("code",[t._v("component:add")]),t._v(" - Triggered when a new component is added to the editor, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:remove")]),t._v(" - Triggered when a component is removed, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:clone")]),t._v(" - Triggered when a component is cloned, the new model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update")]),t._v(" - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update:{propertyName}")]),t._v(" - Listen any property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate")]),t._v(" - Triggered when the style of the component is updated, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate:{propertyName}")]),t._v(" - Listen for a specific style property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:selected")]),t._v(" - New component selected, the selected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:deselected")]),t._v(" - Component deselected, the deselected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:toggled")]),t._v(" - Component selection changed, toggled model is passed as an argument to the callback")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"blocks"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blocks","aria-hidden":"true"}},[this._v("#")]),this._v(" Blocks")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("block:add")]),t._v(" - New block added")]),a("li",[a("code",[t._v("block:remove")]),t._v(" - Block removed")]),a("li",[a("code",[t._v("block:drag:start")]),t._v(" - Started dragging block, model of the block is passed as an argument")]),a("li",[a("code",[t._v("block:drag")]),t._v(" - Dragging block, the block's model and the drag event are passed as arguments")]),a("li",[a("code",[t._v("block:drag:stop")]),t._v(" - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"assets"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assets","aria-hidden":"true"}},[this._v("#")]),this._v(" Assets")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("asset:add")]),t._v(" - New asset added")]),a("li",[a("code",[t._v("asset:remove")]),t._v(" - Asset removed")]),a("li",[a("code",[t._v("asset:upload:start")]),t._v(" - Before the upload is started")]),a("li",[a("code",[t._v("asset:upload:end")]),t._v(" - After the upload is ended")]),a("li",[a("code",[t._v("asset:upload:error")]),t._v(" - On any error in upload, passes the error as an argument")]),a("li",[a("code",[t._v("asset:upload:response")]),t._v(" - On upload response, passes the result as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps","aria-hidden":"true"}},[this._v("#")]),this._v(" Keymaps")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("keymap:add")]),t._v(" - New keymap added. The new keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:remove")]),t._v(" - Keymap removed. The removed keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:emit")]),t._v(" - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event")]),a("li",[a("code",[t._v("keymap:emit:{keymapId}")]),t._v(" - "),a("code",[t._v("keymapId")]),t._v(" emitted, in arguments you get keymapId, shortcutUsed, Event")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"style-manager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Style Manager")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("styleManager:update:target")]),this._v(" - The target (Component or CSSRule) is changed")]),e("li",[e("code",[this._v("styleManager:change")]),this._v(" - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback")]),e("li",[e("code",[this._v("styleManager:change:{propertyName}")]),this._v(" - As above but for a specific style property")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"storages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#storages","aria-hidden":"true"}},[this._v("#")]),this._v(" Storages")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("storage:start")]),t._v(" - Before the storage request is started")]),a("li",[a("code",[t._v("storage:start:store")]),t._v(" - Before the store request. The object to store is passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:start:load")]),t._v(" - Before the load request. Items to load are passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:load")]),t._v(" - Triggered when something was loaded from the storage, loaded object passed as an argumnet")]),a("li",[a("code",[t._v("storage:store")]),t._v(" - Triggered when something is stored to the storage, stored object passed as an argumnet")]),a("li",[a("code",[t._v("storage:end")]),t._v(" - After the storage request is ended")]),a("li",[a("code",[t._v("storage:end:store")]),t._v(" - After the store request")]),a("li",[a("code",[t._v("storage:end:load")]),t._v(" - After the load request")]),a("li",[a("code",[t._v("storage:error")]),t._v(" - On any error on storage request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:store")]),t._v(" - Error on store request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:load")]),t._v(" - Error on load request, passes the error as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"canvas"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvas:dragenter")]),t._v(" - When something is dragged inside the canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragover")]),t._v(" - When something is dragging on canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:drop")]),t._v(" - Something is dropped in canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the dropped model are passed as arguments")]),a("li",[a("code",[t._v("canvas:dragend")]),t._v(" - When a drag operation is ended, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragdata")]),t._v(" - On any dataTransfer parse, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the "),a("code",[t._v("result")]),t._v(" are passed as arguments.\nBy changing "),a("code",[t._v("result.content")]),t._v(" you're able to customize what is dropped")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"selectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectors","aria-hidden":"true"}},[this._v("#")]),this._v(" Selectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("selector:add")]),this._v(" - Triggers when a new selector/class is created")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"rte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#rte","aria-hidden":"true"}},[this._v("#")]),this._v(" RTE")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("rte:enable")]),this._v(" - RTE enabled. The view, on which RTE is enabled, is passed as an argument")]),e("li",[e("code",[this._v("rte:disable")]),this._v(" - RTE disabled. The view, on which RTE is disabled, is passed as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"modal"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#modal","aria-hidden":"true"}},[this._v("#")]),this._v(" Modal")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("modal:open")]),this._v(" - Modal is opened")]),e("li",[e("code",[this._v("modal:close")]),this._v(" - Modal is closed")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"commands"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#commands","aria-hidden":"true"}},[this._v("#")]),this._v(" Commands")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("run:{commandName}")]),t._v(" - Triggered when some command is called to run (eg. editor.runCommand('preview'))")]),a("li",[a("code",[t._v("stop:{commandName}")]),t._v(" - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))")]),a("li",[a("code",[t._v("run:{commandName}:before")]),t._v(" - Triggered before the command is called")]),a("li",[a("code",[t._v("stop:{commandName}:before")]),t._v(" - Triggered before the command is called to stop")]),a("li",[a("code",[t._v("abort:{commandName}")]),t._v(" - Triggered when the command execution is aborted ("),a("code",[t._v("editor.on(")]),t._v("run:preview:before"),a("code",[t._v(", opts => opts.abort = 1);")]),t._v(")")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"general"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#general","aria-hidden":"true"}},[this._v("#")]),this._v(" General")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvasScroll")]),t._v(" - Triggered when the canvas is scrolle")]),a("li",[a("code",[t._v("undo")]),t._v(" - Undo executed")]),a("li",[a("code",[t._v("redo")]),t._v(" - Redo executed")]),a("li",[a("code",[t._v("load")]),t._v(" - When the editor is loaded")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" Returns the configuration object or\nthe value of the specified property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gethtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gethtml","aria-hidden":"true"}},[this._v("#")]),this._v(" getHtml")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("opts")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcss","aria-hidden":"true"}},[this._v("#")]),this._v(" getCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getjs"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getjs","aria-hidden":"true"}},[this._v("#")]),this._v(" getJs")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" getComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the complete tree of components. Use "),e("code",[this._v("getWrapper")]),this._v(" to include also the wrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Components")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapper"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Component")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" setComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
New component
'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" addComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
New component
'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.cls{color: red}'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("//or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselected"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselected","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelected")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedall","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedtostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedtostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"select"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("#")]),this._v(" select")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Select dropped block")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'block:drag:stop'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("select")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectadd"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectadd","aria-hidden":"true"}},[this._v("#")]),this._v(" selectAdd")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectAdd")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectremove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectremove","aria-hidden":"true"}},[this._v("#")]),this._v(" selectRemove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectRemove")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selecttoggle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selecttoggle","aria-hidden":"true"}},[this._v("#")]),this._v(" selectToggle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectToggle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" setDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Tablet'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" getDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// 'Tablet'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"runcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#runcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" runCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("runCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stopcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stopcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" stopCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("stopCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdirtycount"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdirtycount","aria-hidden":"true"}},[this._v("#")]),this._v(" getDirtyCount")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the count of changes made to the content and not yet stored.\nThis count resets at any "),e("code",[this._v("store()")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomrte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomrte","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomRte")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// Function for enabling custom RTE")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// el is the HTMLElement of the double clicked Text Component")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// rte is the same instance you have returned the first time you call")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// enable(). This is useful if need to check if the RTE is already enabled so")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ion this case you'll need to return the RTE and the end of the function")]),t._v("\n enable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("MyCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// return the RTE instance")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),a("span",{attrs:{class:"token comment"}},[t._v("// Disable the editor, called for example when you unfocus the Text Component")]),t._v("\n disable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("blur")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Called when the Text Component is focused again. If you returned the RTE instance")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// from the enable function, the enable won't be called again instead will call focus,")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// in this case to avoid double binding of the editor")]),t._v("\n focus"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("focus")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomparsercss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomparsercss","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomParserCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Replace the default CSS parser with a custom one.\nThe parser function receives a CSS string as a parameter and expects\nan array of CSSRule objects as a result. If you need to remove the\ncustom parser, pass "),e("code",[this._v("null")]),this._v(" as the argument")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomParserCss")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("css "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" result "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ... parse the CSS string")]),t._v("\n result"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("push")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'.someclass, div .otherclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"log"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#log","aria-hidden":"true"}},[this._v("#")]),this._v(" log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("msg")]),e("strong",[this._v("any")]),this._v(" Message to log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Something done!'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ns"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'from-plugin-x'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" level"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'info'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will trigger following events")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Callbacks of those events will always receive the message and")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// options, as arguments, eg:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// editor.on('log:info', (msg, opts) => console.info(msg, opts))")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"on"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#on","aria-hidden":"true"}},[this._v("#")]),this._v(" on")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"once"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#once","aria-hidden":"true"}},[this._v("#")]),this._v(" once")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"off"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#off","aria-hidden":"true"}},[this._v("#")]),this._v(" off")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"trigger"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#trigger","aria-hidden":"true"}},[this._v("#")]),this._v(" trigger")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-22"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"destroy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#destroy","aria-hidden":"true"}},[this._v("#")]),this._v(" destroy")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])}],!1,null,null,null);n.options.__file="editor.md";e.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/22.f6f7f1a8.js b/docs/assets/js/22.f6f7f1a8.js deleted file mode 100644 index af0d81ab4..000000000 --- a/docs/assets/js/22.f6f7f1a8.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{236:function(t,e,a){"use strict";a.r(e);var s=a(1),n=Object(s.a)({},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Editor contains the top level API which you'll probably use to customize the editor or extend it with plugins.\nYou get the Editor instance on init method and you can pass options via its "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(1),t._m(2),a("p",[t._v("You can make use of available events in this way")]),t._m(3),t._m(4),t._m(5),t._m(6),t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),a("p",[t._v("Returns configuration object")]),t._m(27),a("ul",[a("li",[a("code",[t._v("prop")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v("?")]),t._v(" Property name")])]),t._m(28),t._m(29),a("p",[t._v("Returns HTML built inside canvas")]),t._m(30),t._m(31),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" HTML string")]),t._m(32),a("p",[t._v("Returns CSS built inside canvas")]),t._m(33),a("ul",[a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" CSS string")]),t._m(34),a("p",[t._v("Returns JS of all components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" JS string")]),t._m(35),t._m(36),t._m(37),t._m(38),a("p",[t._v("Return the wrapper and its all components")]),t._m(39),t._m(40),a("p",[t._v("Set components inside editor's canvas. This method overrides actual components")]),t._m(41),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")])]),t._m(42),t._m(43),t._m(44),t._m(45),a("p",[t._v("Add components")]),t._m(46),a("ul",[a("li",[a("code",[t._v("components")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" HTML string or components model")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Options\n"),a("ul",[a("li",[a("code",[t._v("opts.avoidUpdateStyle")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean",target:"_blank",rel:"noopener noreferrer"}},[t._v("Boolean"),a("OutboundLink")],1)]),t._v(" If the HTML string contains styles,\nby default, they will be created and, if already exist, updated. When this option\nis true, styles already created will not be updated. (optional, default "),a("code",[t._v("false")]),t._v(")")])])])]),t._m(47),t._m(48),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(49),a("p",[t._v("Returns style in JSON format object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(50),a("p",[t._v("Set style inside editor's canvas. This method overrides actual style")]),t._m(51),a("ul",[a("li",[a("code",[t._v("style")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v("<"),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v("> | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" CSS string or style model")])]),t._m(52),t._m(53),t._m(54),t._m(55),a("p",[t._v("Returns the last selected component, if there is one")]),t._m(56),t._m(57),a("p",[t._v("Returns an array of all selected components")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)])]),t._m(58),a("p",[t._v("Get a stylable entity from the selected component.\nIf you select a component without classes the entity is the Component\nitself and all changes will go inside its 'style' attribute. Otherwise,\nif the selected component has one or more classes, the function will\nreturn the corresponding CSS Rule")]),t._m(59),t._m(60),a("p",[t._v("Select a component")]),t._m(61),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(62),t._m(63),t._m(64),t._m(65),a("p",[t._v("Add component to selection")]),t._m(66),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(67),t._m(68),t._m(69),t._m(70),a("p",[t._v("Remove component from selection")]),t._m(71),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(72),t._m(73),t._m(74),t._m(75),a("p",[t._v("Toggle component selection")]),t._m(76),a("ul",[a("li",[a("code",[t._v("el")]),a("strong",[t._v("(Component | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Component to select")])]),t._m(77),t._m(78),t._m(79),t._m(80),a("p",[t._v("Set device to the editor. If the device exists it will\nchange the canvas to the proper width")]),t._m(81),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Name of the device")])]),t._m(82),t._m(83),t._m(84),t._m(85),a("p",[t._v("Return the actual active device")]),t._m(86),t._m(87),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Device name")]),t._m(88),a("p",[t._v("Execute command")]),t._m(89),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(90),t._m(91),t._m(92),t._m(93),a("p",[t._v("Stop the command if stop method was provided")]),t._m(94),a("ul",[a("li",[a("code",[t._v("id")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Command ID")]),a("li",[a("code",[t._v("options")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")")])]),t._m(95),t._m(96),t._m(97),t._m(98),a("p",[t._v("Store data to the current storage")]),t._m(99),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(100),a("p",[t._v("Load data from the current storage")]),t._m(101),a("ul",[a("li",[a("code",[t._v("clb")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Stored data")]),t._m(102),a("p",[t._v("Returns container element. The one which was indicated as 'container'\non init method")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])]),t._m(103),t._m(104),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[t._v("number"),a("OutboundLink")],1)])]),t._m(105),a("p",[t._v("Replace the built-in Rich Text Editor with a custom one.")]),t._m(106),a("ul",[a("li",[a("code",[t._v("obj")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom RTE Interface")])]),t._m(107),t._m(108),t._m(109),t._m(110),t._m(111),a("ul",[a("li",[a("code",[t._v("parser")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1),t._v(" | null)")]),t._v(" Parser function")])]),t._m(112),t._m(113),t._m(114),t._m(115),a("p",[t._v("Trigger event log message")]),t._m(116),a("ul",[t._m(117),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Custom options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.ns")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Namespace of the log (eg. to use in plugins) (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.level")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Level of the log, "),a("code",[t._v("debug")]),t._v(", "),a("code",[t._v("info")]),t._v(", "),a("code",[t._v("warning")]),t._v(", "),a("code",[t._v("error")]),t._v(" (optional, default "),a("code",[t._v("'debug'")]),t._v(")")])])])]),t._m(118),t._m(119),t._m(120),t._m(121),a("p",[t._v("Attach event")]),t._m(122),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(123),t._m(124),a("p",[t._v("Attach event and detach it after the first run")]),t._m(125),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(126),t._m(127),a("p",[t._v("Detach event")]),t._m(128),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event name")]),a("li",[a("code",[t._v("callback")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function",target:"_blank",rel:"noopener noreferrer"}},[t._v("Function"),a("OutboundLink")],1)]),t._v(" Callback function")])]),t._m(129),t._m(130),a("p",[t._v("Trigger event")]),t._m(131),a("ul",[a("li",[a("code",[t._v("event")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1)]),t._v(" Event to trigger")])]),t._m(132),t._m(133),a("p",[t._v("Destroy the editor")]),t._m(134),a("p",[t._v("Render editor")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/HTML/Element",target:"_blank",rel:"noopener noreferrer"}},[t._v("HTMLElement"),a("OutboundLink")],1)])])])},[function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"editor"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#editor","aria-hidden":"true"}},[this._v("#")]),this._v(" Editor")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"available-events"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#available-events","aria-hidden":"true"}},[this._v("#")]),this._v(" Available Events")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'EVENT-NAME'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("some"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" argument"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// do something")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"components"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#components","aria-hidden":"true"}},[this._v("#")]),this._v(" Components")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("component:create")]),t._v(" - Component is created (only the model, is not yet mounted in the canvas), called after the init() method")]),a("li",[a("code",[t._v("component:mount")]),t._v(" - Component is monted to an element and rendered in canvas")]),a("li",[a("code",[t._v("component:add")]),t._v(" - Triggered when a new component is added to the editor, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:remove")]),t._v(" - Triggered when a component is removed, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:clone")]),t._v(" - Triggered when a component is cloned, the new model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update")]),t._v(" - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:update:{propertyName}")]),t._v(" - Listen any property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate")]),t._v(" - Triggered when the style of the component is updated, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:styleUpdate:{propertyName}")]),t._v(" - Listen for a specific style property change, the model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:selected")]),t._v(" - New component selected, the selected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:deselected")]),t._v(" - Component deselected, the deselected model is passed as an argument to the callback")]),a("li",[a("code",[t._v("component:toggled")]),t._v(" - Component selection changed, toggled model is passed as an argument to the callback")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"blocks"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#blocks","aria-hidden":"true"}},[this._v("#")]),this._v(" Blocks")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("block:add")]),t._v(" - New block added")]),a("li",[a("code",[t._v("block:remove")]),t._v(" - Block removed")]),a("li",[a("code",[t._v("block:drag:start")]),t._v(" - Started dragging block, model of the block is passed as an argument")]),a("li",[a("code",[t._v("block:drag")]),t._v(" - Dragging block, the block's model and the drag event are passed as arguments")]),a("li",[a("code",[t._v("block:drag:stop")]),t._v(" - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"assets"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#assets","aria-hidden":"true"}},[this._v("#")]),this._v(" Assets")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("asset:add")]),t._v(" - New asset added")]),a("li",[a("code",[t._v("asset:remove")]),t._v(" - Asset removed")]),a("li",[a("code",[t._v("asset:upload:start")]),t._v(" - Before the upload is started")]),a("li",[a("code",[t._v("asset:upload:end")]),t._v(" - After the upload is ended")]),a("li",[a("code",[t._v("asset:upload:error")]),t._v(" - On any error in upload, passes the error as an argument")]),a("li",[a("code",[t._v("asset:upload:response")]),t._v(" - On upload response, passes the result as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"keymaps"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#keymaps","aria-hidden":"true"}},[this._v("#")]),this._v(" Keymaps")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("keymap:add")]),t._v(" - New keymap added. The new keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:remove")]),t._v(" - Keymap removed. The removed keyamp object is passed as an argument")]),a("li",[a("code",[t._v("keymap:emit")]),t._v(" - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event")]),a("li",[a("code",[t._v("keymap:emit:{keymapId}")]),t._v(" - "),a("code",[t._v("keymapId")]),t._v(" emitted, in arguments you get keymapId, shortcutUsed, Event")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"style-manager"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Style Manager")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("styleManager:update:target")]),this._v(" - The target (Component or CSSRule) is changed")]),e("li",[e("code",[this._v("styleManager:change")]),this._v(" - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback")]),e("li",[e("code",[this._v("styleManager:change:{propertyName}")]),this._v(" - As above but for a specific style property")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"storages"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#storages","aria-hidden":"true"}},[this._v("#")]),this._v(" Storages")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("storage:start")]),t._v(" - Before the storage request is started")]),a("li",[a("code",[t._v("storage:start:store")]),t._v(" - Before the store request. The object to store is passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:start:load")]),t._v(" - Before the load request. Items to load are passed as an argumnet (which you can edit)")]),a("li",[a("code",[t._v("storage:load")]),t._v(" - Triggered when something was loaded from the storage, loaded object passed as an argumnet")]),a("li",[a("code",[t._v("storage:store")]),t._v(" - Triggered when something is stored to the storage, stored object passed as an argumnet")]),a("li",[a("code",[t._v("storage:end")]),t._v(" - After the storage request is ended")]),a("li",[a("code",[t._v("storage:end:store")]),t._v(" - After the store request")]),a("li",[a("code",[t._v("storage:end:load")]),t._v(" - After the load request")]),a("li",[a("code",[t._v("storage:error")]),t._v(" - On any error on storage request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:store")]),t._v(" - Error on store request, passes the error as an argument")]),a("li",[a("code",[t._v("storage:error:load")]),t._v(" - Error on load request, passes the error as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"canvas"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#canvas","aria-hidden":"true"}},[this._v("#")]),this._v(" Canvas")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvas:dragenter")]),t._v(" - When something is dragged inside the canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragover")]),t._v(" - When something is dragging on canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:drop")]),t._v(" - Something is dropped in canvas, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the dropped model are passed as arguments")]),a("li",[a("code",[t._v("canvas:dragend")]),t._v(" - When a drag operation is ended, "),a("code",[t._v("DataTransfer")]),t._v(" instance passed as an argument")]),a("li",[a("code",[t._v("canvas:dragdata")]),t._v(" - On any dataTransfer parse, "),a("code",[t._v("DataTransfer")]),t._v(" instance and the "),a("code",[t._v("result")]),t._v(" are passed as arguments.\nBy changing "),a("code",[t._v("result.content")]),t._v(" you're able to customize what is dropped")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"selectors"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectors","aria-hidden":"true"}},[this._v("#")]),this._v(" Selectors")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("selector:add")]),this._v(" - Triggers when a new selector/class is created")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"rte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#rte","aria-hidden":"true"}},[this._v("#")]),this._v(" RTE")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("rte:enable")]),this._v(" - RTE enabled. The view, on which RTE is enabled, is passed as an argument")]),e("li",[e("code",[this._v("rte:disable")]),this._v(" - RTE disabled. The view, on which RTE is disabled, is passed as an argument")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"commands"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#commands","aria-hidden":"true"}},[this._v("#")]),this._v(" Commands")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("run:{commandName}")]),t._v(" - Triggered when some command is called to run (eg. editor.runCommand('preview'))")]),a("li",[a("code",[t._v("stop:{commandName}")]),t._v(" - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))")]),a("li",[a("code",[t._v("run:{commandName}:before")]),t._v(" - Triggered before the command is called")]),a("li",[a("code",[t._v("stop:{commandName}:before")]),t._v(" - Triggered before the command is called to stop")]),a("li",[a("code",[t._v("abort:{commandName}")]),t._v(" - Triggered when the command execution is aborted ("),a("code",[t._v("editor.on(")]),t._v("run:preview:before"),a("code",[t._v(", opts => opts.abort = 1);")]),t._v(")")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"general"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#general","aria-hidden":"true"}},[this._v("#")]),this._v(" General")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ul",[a("li",[a("code",[t._v("canvasScroll")]),t._v(" - Triggered when the canvas is scrolle")]),a("li",[a("code",[t._v("undo")]),t._v(" - Undo executed")]),a("li",[a("code",[t._v("redo")]),t._v(" - Redo executed")]),a("li",[a("code",[t._v("load")]),t._v(" - When the editor is loaded")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getconfig"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" Returns the configuration object or\nthe value of the specified property")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"gethtml"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#gethtml","aria-hidden":"true"}},[this._v("#")]),this._v(" getHtml")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("ul",[e("li",[e("code",[this._v("opts")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcss","aria-hidden":"true"}},[this._v("#")]),this._v(" getCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getjs"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getjs","aria-hidden":"true"}},[this._v("#")]),this._v(" getJs")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" getComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the complete tree of components. Use "),e("code",[this._v("getWrapper")]),this._v(" to include also the wrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Components")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getwrapper"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getwrapper","aria-hidden":"true"}},[this._v("#")]),this._v(" getWrapper")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Component")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" setComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
New component
'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"addcomponents"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#addcomponents","aria-hidden":"true"}},[this._v("#")]),this._v(" addComponents")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-2"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'
New component
'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addComponents")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'text'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n classes"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'New component'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setstyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setstyle","aria-hidden":"true"}},[this._v("#")]),this._v(" setStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-3"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'.cls{color: red}'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("//or")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setStyle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'cls'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselected"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselected","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelected")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedall"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedall","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedAll")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getselectedtostyle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getselectedtostyle","aria-hidden":"true"}},[this._v("#")]),this._v(" getSelectedToStyle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("Model")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"select"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[this._v("#")]),this._v(" select")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-4"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-4","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token comment"}},[t._v("// Select dropped block")]),t._v("\neditor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("on")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'block:drag:stop'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("select")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectadd"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectadd","aria-hidden":"true"}},[this._v("#")]),this._v(" selectAdd")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-5"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-5","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectAdd")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selectremove"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selectremove","aria-hidden":"true"}},[this._v("#")]),this._v(" selectRemove")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-6"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-6","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectRemove")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"selecttoggle"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#selecttoggle","aria-hidden":"true"}},[this._v("#")]),this._v(" selectToggle")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-7"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-7","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("selectToggle")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("model"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" setDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-8"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-8","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Tablet'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdevice"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdevice","aria-hidden":"true"}},[this._v("#")]),this._v(" getDevice")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-9"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-9","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" device "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("getDevice")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("device"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// 'Tablet'")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"runcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#runcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" runCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-10"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-10","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("runCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"stopcommand"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#stopcommand","aria-hidden":"true"}},[this._v("#")]),this._v(" stopCommand")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-11"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-11","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("stopCommand")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'myCommand'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("someValue"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("any")]),this._v(" The return is defined by the command")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"store"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#store","aria-hidden":"true"}},[this._v("#")]),this._v(" store")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"load"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#load","aria-hidden":"true"}},[this._v("#")]),this._v(" load")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-15"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-15","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getcontainer"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getcontainer","aria-hidden":"true"}},[this._v("#")]),this._v(" getContainer")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"getdirtycount"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#getdirtycount","aria-hidden":"true"}},[this._v("#")]),this._v(" getDirtyCount")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Return the count of changes made to the content and not yet stored.\nThis count resets at any "),e("code",[this._v("store()")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomrte"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomrte","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomRte")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-16"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-16","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-12"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-12","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// Function for enabling custom RTE")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// el is the HTMLElement of the double clicked Text Component")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// rte is the same instance you have returned the first time you call")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// enable(). This is useful if need to check if the RTE is already enabled so")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ion this case you'll need to return the RTE and the end of the function")]),t._v("\n enable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{attrs:{class:"token class-name"}},[t._v("MyCustomRte")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// return the RTE instance")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),a("span",{attrs:{class:"token comment"}},[t._v("// Disable the editor, called for example when you unfocus the Text Component")]),t._v("\n disable"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("blur")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Called when the Text Component is focused again. If you returned the RTE instance")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// from the enable function, the enable won't be called again instead will call focus,")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// in this case to avoid double binding of the editor")]),t._v("\n focus"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n rte"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("focus")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{attrs:{class:"token comment"}},[t._v("// this depends on the Custom RTE API")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"setcustomparsercss"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#setcustomparsercss","aria-hidden":"true"}},[this._v("#")]),this._v(" setCustomParserCss")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Replace the default CSS parser with a custom one.\nThe parser function receives a CSS string as a parameter and expects\nan array of CSSRule objects as a result. If you need to remove the\ncustom parser, pass "),e("code",[this._v("null")]),this._v(" as the argument")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-17"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-17","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-13"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-13","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("setCustomParserCss")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("css "),a("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" result "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ... parse the CSS string")]),t._v("\n result"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("push")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'.someclass, div .otherclass'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n style"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" color"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'red'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" result"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"log"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#log","aria-hidden":"true"}},[this._v("#")]),this._v(" log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-18"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-18","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("li",[e("code",[this._v("msg")]),e("strong",[this._v("any")]),this._v(" Message to log")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"examples-14"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#examples-14","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("log")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'Something done!'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" ns"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'from-plugin-x'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" level"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'info'")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// This will trigger following events")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// `log`, `log:info`, `log-from-plugin-x`, `log-from-plugin-x:info`")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Callbacks of those events will always receive the message and")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// options, as arguments, eg:")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// editor.on('log:info', (msg, opts) => console.info(msg, opts))")]),t._v("\n")])])])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"on"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#on","aria-hidden":"true"}},[this._v("#")]),this._v(" on")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-19"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-19","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"once"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#once","aria-hidden":"true"}},[this._v("#")]),this._v(" once")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-20"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-20","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"off"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#off","aria-hidden":"true"}},[this._v("#")]),this._v(" off")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-21"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-21","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"trigger"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#trigger","aria-hidden":"true"}},[this._v("#")]),this._v(" trigger")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h3",{attrs:{id:"parameters-22"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#parameters-22","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,e=this._self._c||t;return e("p",[this._v("Returns "),e("strong",[this._v("this")])])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"destroy"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#destroy","aria-hidden":"true"}},[this._v("#")]),this._v(" destroy")])},function(){var t=this.$createElement,e=this._self._c||t;return e("h2",{attrs:{id:"render"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#render","aria-hidden":"true"}},[this._v("#")]),this._v(" render")])}],!1,null,null,null);n.options.__file="editor.md";e.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/27.0ec3b804.js b/docs/assets/js/27.0ec3b804.js new file mode 100644 index 000000000..e7a7a076b --- /dev/null +++ b/docs/assets/js/27.0ec3b804.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{231:function(t,s,a){"use strict";a.r(s);var e=a(1),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better this concept let's take\na look at this code:")]),t._m(1),t._m(2),a("p",[t._v("In this scenario we get:")]),t._m(3),t._m(4),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(5),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(6),t._m(7),t._m(8),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(9),a("p",[t._v("Add a new selector to collection if it's not already exists. Class type is a default one")]),t._m(10),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Selector/s name")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Selector options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.label")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Label for the selector, if it's not provided the label will be the same as the name (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Type of the selector. At the moment, only 'class' (1) is available (optional, default "),a("code",[t._v("1")]),t._v(")")])])])]),t._m(11),t._m(12),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(13),a("p",[t._v("Add class selectors")]),t._m(14),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(15),t._m(16),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(17),a("p",[t._v("Get the selector by its name")]),t._m(18),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")]),t._v(" Selector name")]),t._m(19),a("li",[a("code",[t._v("tyoe")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Selector type")])]),t._m(20),t._m(21),a("p",[t._v("Returns "),a("strong",[t._v("(Model | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(")")])]),t._m(22),a("p",[t._v("Get all selectors")]),t._m(23)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"selectormanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#selectormanager","aria-hidden":"true"}},[this._v("#")]),this._v(" SelectorManager")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{attrs:{class:"token selector"}},[this._v("span > #send-btn.btn")]),s("span",{attrs:{class:"token punctuation"}},[this._v("{")]),this._v("\n ...\n"),s("span",{attrs:{class:"token punctuation"}},[this._v("}")]),this._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("send-btn"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("span -> selector of type "),s("code",[this._v("tag")])]),s("li",[this._v("send-btn -> selector of type "),s("code",[this._v("id")])]),s("li",[this._v("btn -> selector of type "),s("code",[this._v("class")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("So, for example, being "),s("code",[this._v("btn")]),this._v(" the same class entity it'll be easier to refactor and track things.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectorManager "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("a",{attrs:{href:"#getconfig"}},[this._v("getConfig")])]),s("li",[s("a",{attrs:{href:"#add"}},[this._v("add")])]),s("li",[s("a",{attrs:{href:"#addclass"}},[this._v("addClass")])]),s("li",[s("a",{attrs:{href:"#get"}},[this._v("get")])]),s("li",[s("a",{attrs:{href:"#getAll"}},[this._v("getAll")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Same as")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Multiple selectors")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'.class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'.class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'#id1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"addclass"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#addclass","aria-hidden":"true"}},[this._v("#")]),this._v(" addClass")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("code",[this._v("type")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// or get an array")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectors "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Collection")])])}],!1,null,null,null);n.options.__file="selector_manager.md";s.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/27.741f6722.js b/docs/assets/js/27.741f6722.js deleted file mode 100644 index db35f3e51..000000000 --- a/docs/assets/js/27.741f6722.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{231:function(t,s,a){"use strict";a.r(s);var e=a(1),n=Object(e.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"content"},[t._m(0),a("p",[t._v("Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better this concept let's take\na look at this code:")]),t._m(1),t._m(2),a("p",[t._v("In this scenario we get:")]),t._m(3),t._m(4),a("p",[t._v("You can customize the initial state of the module from the editor initialization, by passing the following "),a("a",{attrs:{href:"https://github.com/artf/grapesjs/blob/master/src/selector_manager/config/config.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("Configuration Object"),a("OutboundLink")],1)]),t._m(5),a("p",[t._v("Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance")]),t._m(6),t._m(7),t._m(8),a("p",[t._v("Get configuration object")]),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)])]),t._m(9),a("p",[t._v("Add a new selector to collection if it's not already exists. Class type is a default one")]),t._m(10),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Selector name")]),a("li",[a("code",[t._v("opts")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object",target:"_blank",rel:"noopener noreferrer"}},[t._v("Object"),a("OutboundLink")],1)]),t._v(" Selector options (optional, default "),a("code",[t._v("{}")]),t._v(")\n"),a("ul",[a("li",[a("code",[t._v("opts.label")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Label for the selector, if it's not provided the label will be the same as the name (optional, default "),a("code",[t._v("''")]),t._v(")")]),a("li",[a("code",[t._v("opts.type")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Type of the selector. At the moment, only 'class' (1) is available (optional, default "),a("code",[t._v("1")]),t._v(")")])])])]),t._m(11),t._m(12),t._m(13),t._m(14),a("p",[t._v("Add class selectors")]),t._m(15),a("ul",[a("li",[a("code",[t._v("classes")]),a("strong",[t._v("("),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1),t._v(" | "),a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("string"),a("OutboundLink")],1),t._v(")")]),t._v(" Array or string of classes")])]),t._m(16),t._m(17),a("p",[t._v("Returns "),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array",target:"_blank",rel:"noopener noreferrer"}},[t._v("Array"),a("OutboundLink")],1)]),t._v(" Array of added selectors")]),t._m(18),a("p",[t._v("Get the selector by its name")]),t._m(19),a("ul",[a("li",[a("code",[t._v("name")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Selector name")]),t._m(20),a("li",[a("code",[t._v("tyoe")]),a("strong",[a("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[t._v("String"),a("OutboundLink")],1)]),t._v(" Selector type")])]),t._m(21),t._m(22),t._m(23),t._m(24),a("p",[t._v("Get all selectors")]),t._m(25)])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"selectormanager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#selectormanager","aria-hidden":"true"}},[this._v("#")]),this._v(" SelectorManager")])},function(){var t=this.$createElement,s=this._self._c||t;return s("div",{staticClass:"language-css extra-class"},[s("pre",{pre:!0,attrs:{class:"language-css"}},[s("code",[s("span",{attrs:{class:"token selector"}},[this._v("span > #send-btn.btn")]),s("span",{attrs:{class:"token punctuation"}},[this._v("{")]),this._v("\n ...\n"),s("span",{attrs:{class:"token punctuation"}},[this._v("}")]),this._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("send-btn"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{attrs:{class:"token attr-value"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("=")]),a("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("btn"),a("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token tag"}},[a("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("span -> selector of type "),s("code",[this._v("tag")])]),s("li",[this._v("send-btn -> selector of type "),s("code",[this._v("id")])]),s("li",[this._v("btn -> selector of type "),s("code",[this._v("class")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("So, for example, being "),s("code",[this._v("btn")]),this._v(" the same class entity it'll be easier to refactor and track things.")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" editor "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("init")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{attrs:{class:"token comment"}},[t._v("// options")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" selectorManager "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("SelectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[s("a",{attrs:{href:"#getconfig"}},[this._v("getConfig")])]),s("li",[s("a",{attrs:{href:"#add"}},[this._v("add")])]),s("li",[s("a",{attrs:{href:"#addclass"}},[this._v("addClass")])]),s("li",[s("a",{attrs:{href:"#get"}},[this._v("get")])]),s("li",[s("a",{attrs:{href:"#getAll"}},[this._v("getAll")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getconfig"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getconfig","aria-hidden":"true"}},[this._v("#")]),this._v(" getConfig")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"add"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#add","aria-hidden":"true"}},[this._v("#")]),this._v(" add")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// Same as")]),t._v("\n"),a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("add")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n type"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token number"}},[t._v("1")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),t._v("\n"),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Model")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"addclass"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#addclass","aria-hidden":"true"}},[this._v("#")]),this._v(" addClass")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-2","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[t._v("sm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'class1 class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nsm"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token function"}},[t._v("addClass")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'class1'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'class2'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{attrs:{class:"token comment"}},[t._v("// -> [SelectorObject, ...]")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"get"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#get","aria-hidden":"true"}},[this._v("#")]),this._v(" get")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"parameters-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#parameters-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Parameters")])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("code",[this._v("type")]),this._v(" (optional, default "),s("code",[this._v("Selector.TYPE_CLASS")]),this._v(")")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h3",{attrs:{id:"examples-3"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#examples-3","aria-hidden":"true"}},[this._v("#")]),this._v(" Examples")])},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" selector "),a("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" selectorManager"),a("span",{attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{attrs:{class:"token keyword"}},[t._v("get")]),a("span",{attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{attrs:{class:"token string"}},[t._v("'selectorName'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("(Model | null)")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"getall"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#getall","aria-hidden":"true"}},[this._v("#")]),this._v(" getAll")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Returns "),s("strong",[this._v("Collection")])])}],!1,null,null,null);n.options.__file="selector_manager.md";s.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/38.107d92e8.js b/docs/assets/js/38.107d92e8.js deleted file mode 100644 index 65e48d820..000000000 --- a/docs/assets/js/38.107d92e8.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{241:function(t,s,n){"use strict";n.r(s);var a=n(1),e=Object(a.a)({},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"content"},[t._m(0),n("p",[t._v("The Component is the base element for template composition. It is atomic, so elements like images, text boxes, maps, etc. fit the definition of a Component. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.")]),n("p"),n("div",{staticClass:"table-of-contents"},[n("ul",[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),n("li",[n("a",{attrs:{href:"#improvement-over-addtype"}},[t._v("Improvement over addType "),n("Badge",{attrs:{text:"0.14.50+"}})],1)]),t._m(6),t._m(7),t._m(8)])]),n("p"),t._m(9),t._m(10),t._m(11),n("p",[t._v("When we pass an HTML string to the editor like this:")]),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),n("p",[t._v("For example, with the image component this method looks like:")]),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),n("p",[t._v("To define a new Component type you need to choose from which built-in Component inherit its properties, in our case we just gonna choose the default one. Let's see a complete example of the new type definition")]),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),n("p",[t._v("Here an example of how easily you can update/override the component")]),t._m(34),n("h2",{attrs:{id:"improvement-over-addtype"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#improvement-over-addtype","aria-hidden":"true"}},[t._v("#")]),t._v(" Improvement over addType "),n("Badge",{attrs:{text:"0.14.50+"}})],1),n("p",[t._v("Now, with the "),n("a",{attrs:{href:"https://github.com/artf/grapesjs/releases/tag/v0.14.50",target:"_blank",rel:"noopener noreferrer"}},[t._v("0.14.50"),n("OutboundLink")],1),t._v(" release, defining new components or extending them is a bit easier (without breaking the old process)")]),t._m(35),t._m(36),t._m(37),t._m(38),t._m(39),t._m(40),t._m(41),t._m(42),t._m(43),t._m(44),t._m(45),t._m(46),t._m(47),t._m(48),t._m(49),t._m(50),n("p",[t._v("Let's see below the flow of all hooks:")]),t._m(51),n("p",[t._v("Below you can find an example usage of all the hooks")]),t._m(52),t._m(53),t._m(54),t._m(55),t._m(56),n("p",[t._v("In the example above the editor will not get the new type from the HTML because the content is already parsed and appended, so it'll get it only with new components (eg. from Blocks)")]),t._m(57),t._m(58),n("p",[t._v("Solution 2: put all the stuff inside a plugin ("),n("a",{attrs:{href:"https://github.com/artf/grapesjs/wiki/Creating-plugins",target:"_blank",rel:"noopener noreferrer"}},[t._v("Creating plugins"),n("OutboundLink")],1),t._v(")")])])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"component-manager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#component-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Component Manager")])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#built-in-components"}},[this._v("Built-in components")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#how-components-work"}},[this._v("How Components work?")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#component-recognition"}},[this._v("Component recognition")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#define-new-component"}},[this._v("Define new Component")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#update-component-type"}},[this._v("Update Component type")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#lifecycle-hooks"}},[this._v("Lifecycle Hooks")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#components-js"}},[this._v("Components & JS")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#hints"}},[this._v("Hints")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"built-in-components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#built-in-components","aria-hidden":"true"}},[this._v("#")]),this._v(" Built-in components")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ul",[n("li",[t._v("default (Basic)")]),n("li",[t._v("wrapper")]),n("li",[t._v("text")]),n("li",[t._v("textnode")]),n("li",[t._v("svg")]),n("li",[t._v("script")]),n("li",[t._v("image")]),n("li",[t._v("video")]),n("li",[t._v("label")]),n("li",[t._v("link")]),n("li",[t._v("map")]),n("li",[t._v("table")]),n("li",[t._v("row (for the table)")]),n("li",[t._v("cell (for the table)")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"how-components-work"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-components-work","aria-hidden":"true"}},[this._v("#")]),this._v(" How Components work?")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-html extra-class"},[n("pre",{pre:!0,attrs:{class:"language-html"}},[n("code",[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),n("span",{attrs:{class:"token attr-name"}},[t._v("src")]),n("span",{attrs:{class:"token attr-value"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://path/image"),n("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),n("span",{attrs:{class:"token attr-name"}},[t._v("title")]),n("span",{attrs:{class:"token attr-value"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foo"),n("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("bar"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("p",[t._v("For each DOM element ("),n("code",[t._v("div")]),t._v(", "),n("code",[t._v("img")]),t._v(", "),n("code",[t._v("span")]),t._v(", etc.) the editor will create and store an object representation. Every future change to the template will be made on top of this structure, which will then reflect on the canvas. So each object, usually called "),n("em",[t._v("Model")]),t._v(" (or state/store), will be the source of truth for the template, but what exactly does that mean?")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("In more practical example, once the template is rendered on the canvas, if you try to remove one of its elements (eg. by using using the browser inspector) and ask the editor to print the HTML (using "),s("code",[this._v("editor.getHtml()")]),this._v(") you'll see that the element will still be there. This is because the editor relies on Models and not on the DOM elements inside the canvas. This approach allows us to be extremely flexible on how we generate the final code (from the "),s("em",[this._v("Model")]),this._v(") and how to render it inside the canvas (from the "),s("em",[this._v("View")]),this._v(").")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"manage-components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#manage-components","aria-hidden":"true"}},[this._v("#")]),this._v(" Manage Components")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"component-recognition"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#component-recognition","aria-hidden":"true"}},[this._v("#")]),this._v(" Component recognition")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("But now, how does the editor recognize which Component to bind to the "),s("code",[this._v("img")]),this._v(" element and what to do with the "),s("code",[this._v("span")]),this._v(" one?\nEach Component inherits, from the base one, a particular static method")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("/**\n * @param {HTMLElement} el\n * @return {Object}\n */")]),t._v("\nisComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("p",[t._v("This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each "),n("strong",[t._v("HTML string/element")]),t._v(" introduced inside the canvas will be processed by "),n("code",[t._v("isComponent")]),t._v(" of all available types and if it matches, the object represented the type should be returned. The method "),n("code",[t._v("isComponent")]),n("strong",[t._v("is skipped")]),t._v(" if you add the component object ("),n("code",[t._v("{ type: 'my-custom-type', tagName: 'div', attribute: {...}, ...}")]),t._v(") or declare the type explicitly on the element ("),n("code",[t._v('
...
')]),t._v(")")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("// Image component")]),t._v("\nisComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("if")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),n("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'IMG'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'image'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Let's try with something that might look a little bit tricky. What about a Google Map?!? Google Maps are generally embedded as "),s("code",[this._v("iframe")]),this._v("s, but the template can be composed by a lot of different "),s("code",[this._v("iframe")]),this._v("s. How can I tell the editor that a particular iframe is actually a Google's Map? Well, you'll have to figure out the right pattern, you have the "),s("code",[this._v("HTMLElement")]),this._v(" so you can make all the checks you want. In this particular case this pattern is used:")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("// Map component")]),t._v("\nisComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),n("span",{attrs:{class:"token keyword"}},[t._v("if")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),n("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'IFRAME'")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),n("span",{attrs:{class:"token regex"}},[t._v("/maps\\.google\\.com/")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("test")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" src"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("In addition to "),s("code",[this._v("tagName")]),this._v(" check, we also used the "),s("code",[this._v("src")]),this._v(" property, but you can actually override it with your own logic by extending the built-in component.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"define-new-component"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#define-new-component","aria-hidden":"true"}},[this._v("#")]),this._v(" Define new Component")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Let's see an example with another HTML element that is not handled by default Component types. What about "),s("code",[this._v("input")]),this._v(" elements?")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("With the default GrapesJS configuration "),s("code",[this._v("input")]),this._v("s are treated like any other element; you can move it around, style it, etc. However, we'd like to handle this type of element more specifically. In this case, we have to create a new Component type.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Let's define few specs for our new "),s("em",[this._v("Input")]),this._v(" type:")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("Can be dropped only inside "),s("code",[this._v("form")]),this._v(" elements")]),s("li",[this._v("Can't drop other elements inside it")]),s("li",[this._v("Can change the type of the input (text, password, email, etc.)")]),s("li",[this._v("Can make it required for the form")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("// Get DomComponents module")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comps "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// Get the model and the view from the default Component type")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" defaultType "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'default'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" defaultModel "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" defaultView "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" inputTypes "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'text'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Text'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'email'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Email'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'password'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Password'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'number'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Number'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// The `input` will be the Component type ID")]),t._v("\ncomps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Define the Model")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultModel"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Extend default properties")]),t._v("\n defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Object"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("assign")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" defaultModel"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Can be dropped only inside `form` elements")]),t._v("\n draggable"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'form, form *'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Can't drop other elements inside it")]),t._v("\n droppable"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("false")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Traits (Settings)")]),t._v("\n traits"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token string"}},[t._v("'name'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'placeholder'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Change the type of the input (text, password, email, etc.)")]),t._v("\n type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'select'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n options"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inputTypes"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Can make it required for the form")]),t._v("\n type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'checkbox'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Required'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'required'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// The second argument of .extend are static methods and we'll put inside our")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// isComponent() method. As you're putting a new Component type on top of the stack,")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// not declaring isComponent() might probably break stuff, especially if you extend")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// the default one.")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n isComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("if")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),n("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'INPUT'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Define the View")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("The code above is pretty much self-explanatory and as you see a lot of work is basically done on top of the Model properties.\nThe "),s("em",[this._v("View")]),this._v(" is just extending the default one, so to cover also this part let's add some random behavior.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token operator"}},[t._v("...")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Bind events")]),t._v("\n events"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// If you want to bind the event to children elements")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// 'click .someChildrenClass': 'methodName',")]),t._v("\n click"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'handleClick'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dblclick"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("alert")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Hi!'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{attrs:{class:"token comment"}},[t._v("// It doesn't make too much sense this method inside the component")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// but it's ok as an example")]),t._v("\n randomHex"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'#'")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("+")]),t._v(" Math"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("floor")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Math"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("random")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token operator"}},[t._v("*")]),n("span",{attrs:{class:"token number"}},[t._v("16777216")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("toString")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token number"}},[t._v("16")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n handleClick"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("set")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'style'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("color"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("randomHex")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// <- Affects the final HTML code")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("backgroundColor "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("randomHex")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// <- Doesn't affect the final HTML code")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Tip: updating the model will reflect the changes to the view, so, in this case,")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// if you put the model change after the DOM one this will override the backgroundColor")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// change made before")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{attrs:{class:"token comment"}},[t._v("// The render() should return 'this'")]),t._v("\n render"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Extend the original render method")]),t._v("\n defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("apply")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arguments"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("placeholder "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Text here'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// <- Doesn't affect the final HTML code")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("From the example above you can notice few interesting things: how to bind events, how to update directly the DOM and how to update the model. The difference between updating the DOM and the model is that the HTML code (the one you get with "),s("code",[this._v("editor.getHtml()")]),this._v(") is generated from the "),s("em",[this._v("Model")]),this._v(" so updating directly the DOM will not affect it, it's just the change for the canvas.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"update-component-type"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-component-type","aria-hidden":"true"}},[this._v("#")]),this._v(" Update Component type")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" originalMap "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ncomps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" originalMap"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Override how the component is rendered to HTML")]),t._v("\n toHTML"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'
My Custom Map
'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n isComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// ... new logic for isComponent")]),t._v("\n\t\t"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" originalMap"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ul",[n("li",[t._v("If you don't specify the type to extend, the "),n("code",[t._v("default")]),t._v(" one will be used. In that case, you just\nuse objects for "),n("code",[t._v("model")]),t._v(" and "),n("code",[t._v("view")])]),n("li",[t._v("The "),n("code",[t._v("defaults")]),t._v(" property, in the "),n("code",[t._v("model")]),t._v(", will be merged automatically with defaults of the parent component")]),n("li",[t._v("If you use an object in "),n("code",[t._v("model")]),t._v(" you can specify "),n("code",[t._v("isComponent")]),t._v(" outside or omit it. In this case,\nthe "),n("code",[t._v("isComponent")]),t._v(" is not mandatory but without it means the parser won't be able to identify the component\nif not explicitly declared (eg. "),n("code",[t._v('
...
')]),t._v(")")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("Before")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" defaultType "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'default'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ncomps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'new-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n someprop"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'somevalue'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Even if it returns false, declaring isComponent is mandatory")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("isComponent")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("false")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("After")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'new-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// We can even omit isComponent here, as `false` return will be the default behavior")]),t._v("\n isComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" el "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("false")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n someprop"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'somevalue'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ul",[n("li",[t._v("If you need to extend some component, you can use "),n("code",[t._v("extend")]),t._v(" and "),n("code",[t._v("extendView")]),t._v(" property.")]),n("li",[t._v("You can now omit "),n("code",[t._v("view")]),t._v(" property if you don't need to change it")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("Before")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" originalMap "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ncomps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" originalMap"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("isComponent")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// ... usually, you'd reuse the same logic")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Even if I do nothing in view, I have to specify it")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" originalMap"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("After")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("The "),s("code",[this._v("map")]),this._v(" type is already defined, so it will be used as a base for the model and view.\nWe can skip "),s("code",[this._v("isComponent")]),this._v(" if the recognition logic is the same of the extended component.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Extend the "),s("code",[this._v("model")]),this._v(" and "),s("code",[this._v("view")]),this._v(" with some other, already defined, components.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n extend"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'other-defined-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// Will extend 'other-defined-component'")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// Will extend 'other-defined-component'")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// `isComponent` will be taken from `map`")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n extend"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'other-defined-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// Will extend 'other-defined-component'")]),t._v("\n extendView"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'other-defined-component-2'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// Will extend 'other-defined-component-2'")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// `isComponent` will be taken from `map`")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"lifecycle-hooks"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#lifecycle-hooks","aria-hidden":"true"}},[this._v("#")]),this._v(" Lifecycle Hooks")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("p",[t._v("Each component triggers different lifecycle hooks, which allows you to add custom actions at their specific stages.\nWe can distinguish 2 different types of hooks: "),n("strong",[t._v("global")]),t._v(" and "),n("strong",[t._v("local")]),t._v(".\nYou define "),n("strong",[t._v("local")]),t._v(" hooks when you create/extend a component type (usually via some "),n("code",[t._v("model")]),t._v("/"),n("code",[t._v("view")]),t._v(" method) and the reason is to react to an event of that\nparticular component type. Instead, the "),n("strong",[t._v("global")]),t._v(" one, will be called indistinctly on any component (you listen to them via "),n("code",[t._v("editor.on")]),t._v(") and you can make\nuse of them for a more generic use case or also listen to them inside other components.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ul",[n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("model.init()")]),t._v(" method, executed once the model of the component is initiliazed")]),n("li",[n("strong",[t._v("Global hook")]),t._v(": "),n("code",[t._v("component:create")]),t._v(" event, called right after "),n("code",[t._v("model.init()")]),t._v(". The model is passed as an argument to the callback function.\nEs. "),n("code",[t._v("editor.on('component:create', model => console.log('created', model))")])]),n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("view.init()")]),t._v(" method, executed once the view of the component is initiliazed")]),n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("view.onRender()")]),t._v(" method, executed once the component is rendered on the canvas")]),n("li",[n("strong",[t._v("Global hook")]),t._v(": "),n("code",[t._v("component:mount")]),t._v(" event, called right after "),n("code",[t._v("view.onRender()")]),t._v(". The model is passed as an argument to the callback function.")]),n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("model.updated()")]),t._v(" method, executes when some property of the model is updated.")]),n("li",[n("strong",[t._v("Global hook")]),t._v(": "),n("code",[t._v("component:update")]),t._v(" event, called after "),n("code",[t._v("model.updated()")]),t._v(". The model is passed as an argument to the callback function.\nYou can also listen to specific property change via "),n("code",[t._v("component:update:{propertyName}")])]),n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("model.removed()")]),t._v(" method, executed when the component is removed.")]),n("li",[n("strong",[t._v("Global hook")]),t._v(": "),n("code",[t._v("component:remove")]),t._v(" event, called after "),n("code",[t._v("model.removed()")]),t._v(". The model is passed as an argument to the callback function.")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'test-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n testprop"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token number"}},[t._v("1")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: model.init'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("listenTo")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'change:testprop'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("handlePropChange"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Here we can listen global hooks with editor.on('...')")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("updated")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("property"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValue"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: model.updated'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'property'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" property"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'value'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'prevValue'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValue"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("removed")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: model.removed'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("handlePropChange")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'The value of testprop'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'testprop'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: view.init'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("onRender")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: view.onRender'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// A block for the custom component")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("BlockManager"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("add")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'test-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Test Component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'
Test Component
'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// Global hooks")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("on")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token template-string"}},[n("span",{attrs:{class:"token string"}},[t._v("`component:create`")])]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Global hook: component:create'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("on")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token template-string"}},[n("span",{attrs:{class:"token string"}},[t._v("`component:mount`")])]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Global hook: component:mount'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("on")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token template-string"}},[n("span",{attrs:{class:"token string"}},[t._v("`component:update:testprop`")])]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Global hook: component:update:testprop'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("on")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token template-string"}},[n("span",{attrs:{class:"token string"}},[t._v("`component:remove`")])]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Global hook: component:remove'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"components-js"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#components-js","aria-hidden":"true"}},[this._v("#")]),this._v(" Components & JS")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("If you want to know how to create Components with javascript attached (eg. counters, galleries, slideshows, etc.) check the dedicated page\n"),s("a",{attrs:{href:"Components-&-JS"}},[this._v("Components & JS")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"hints"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hints","aria-hidden":"true"}},[this._v("#")]),this._v(" Hints")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-html extra-class"},[n("pre",{pre:!0,attrs:{class:"language-html"}},[n("code",[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),n("span",{attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{attrs:{class:"token attr-value"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("gjs"),n("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n ...\n "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("cutom-element")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n ...\n"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{attrs:{class:"token script language-javascript"}},[t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n container "),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'#gjs'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fromElement"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("true")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'cutom-element-type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token operator"}},[t._v("...")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")]),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Solution 1: turn off "),s("code",[this._v("autorender")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-html extra-class"},[n("pre",{pre:!0,attrs:{class:"language-html"}},[n("code",[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{attrs:{class:"token script language-javascript"}},[t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n autorender"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token number"}},[t._v("0")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n container "),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'#gjs'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fromElement"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("true")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'cutom-element-type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token operator"}},[t._v("...")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{attrs:{class:"token comment"}},[t._v("// after all new types")]),t._v("\n editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("render")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")]),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])}],!1,null,null,null);e.options.__file="Components.md";s.default=e.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/38.7c24f706.js b/docs/assets/js/38.7c24f706.js new file mode 100644 index 000000000..596622f33 --- /dev/null +++ b/docs/assets/js/38.7c24f706.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{241:function(t,s,n){"use strict";n.r(s);var a=n(1),e=Object(a.a)({},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"content"},[t._m(0),n("p",[t._v("The Component is the base element for template composition. It is atomic, so elements like images, text boxes, maps, etc. fit the definition of a Component. The concept of the component was made to allow the developer to bind different behaviors to different elements. Like for example, opening the Asset Manager on double click of the image.")]),n("p"),n("div",{staticClass:"table-of-contents"},[n("ul",[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),n("li",[n("a",{attrs:{href:"#improvement-over-addtype"}},[t._v("Improvement over addType "),n("Badge",{attrs:{text:"0.14.50+"}})],1)]),t._m(6),t._m(7),t._m(8)])]),n("p"),t._m(9),t._m(10),t._m(11),n("p",[t._v("When we pass an HTML string to the editor like this:")]),t._m(12),t._m(13),t._m(14),t._m(15),t._m(16),t._m(17),t._m(18),t._m(19),n("p",[t._v("For example, with the image component this method looks like:")]),t._m(20),t._m(21),t._m(22),t._m(23),t._m(24),t._m(25),t._m(26),t._m(27),t._m(28),n("p",[t._v("To define a new Component type you need to choose from which built-in Component inherit its properties, in our case we just gonna choose the default one. Let's see a complete example of the new type definition")]),t._m(29),t._m(30),t._m(31),t._m(32),t._m(33),n("p",[t._v("Here an example of how easily you can update/override the component")]),t._m(34),n("h2",{attrs:{id:"improvement-over-addtype"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#improvement-over-addtype","aria-hidden":"true"}},[t._v("#")]),t._v(" Improvement over addType "),n("Badge",{attrs:{text:"0.14.50+"}})],1),n("p",[t._v("Now, with the "),n("a",{attrs:{href:"https://github.com/artf/grapesjs/releases/tag/v0.14.50",target:"_blank",rel:"noopener noreferrer"}},[t._v("0.14.50"),n("OutboundLink")],1),t._v(" release, defining new components or extending them is a bit easier (without breaking the old process)")]),t._m(35),t._m(36),t._m(37),t._m(38),t._m(39),t._m(40),t._m(41),t._m(42),t._m(43),t._m(44),t._m(45),t._m(46),t._m(47),t._m(48),t._m(49),t._m(50),n("p",[t._v("Let's see below the flow of all hooks:")]),t._m(51),n("p",[t._v("Below you can find an example usage of all the hooks")]),t._m(52),t._m(53),n("p",[t._v("If you want to know how to create Components with javascript attached (eg. counters, galleries, slideshows, etc.) check the dedicated page\n"),n("router-link",{attrs:{to:"./Components-js.html"}},[t._v("Components & JS")])],1),t._m(54),t._m(55),n("p",[t._v("In the example above the editor will not get the new type from the HTML because the content is already parsed and appended, so it'll get it only with new components (eg. from Blocks)")]),t._m(56),t._m(57),n("p",[t._v("Solution 2: put all the stuff inside a plugin ("),n("a",{attrs:{href:"https://github.com/artf/grapesjs/wiki/Creating-plugins",target:"_blank",rel:"noopener noreferrer"}},[t._v("Creating plugins"),n("OutboundLink")],1),t._v(")")])])},[function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"component-manager"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#component-manager","aria-hidden":"true"}},[this._v("#")]),this._v(" Component Manager")])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#built-in-components"}},[this._v("Built-in components")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#how-components-work"}},[this._v("How Components work?")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#component-recognition"}},[this._v("Component recognition")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#define-new-component"}},[this._v("Define new Component")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#update-component-type"}},[this._v("Update Component type")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#lifecycle-hooks"}},[this._v("Lifecycle Hooks")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#components-js"}},[this._v("Components & JS")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("li",[s("a",{attrs:{href:"#hints"}},[this._v("Hints")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"built-in-components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#built-in-components","aria-hidden":"true"}},[this._v("#")]),this._v(" Built-in components")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ul",[n("li",[t._v("default (Basic)")]),n("li",[t._v("wrapper")]),n("li",[t._v("text")]),n("li",[t._v("textnode")]),n("li",[t._v("svg")]),n("li",[t._v("script")]),n("li",[t._v("image")]),n("li",[t._v("video")]),n("li",[t._v("label")]),n("li",[t._v("link")]),n("li",[t._v("map")]),n("li",[t._v("table")]),n("li",[t._v("row (for the table)")]),n("li",[t._v("cell (for the table)")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"how-components-work"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-components-work","aria-hidden":"true"}},[this._v("#")]),this._v(" How Components work?")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-html extra-class"},[n("pre",{pre:!0,attrs:{class:"language-html"}},[n("code",[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),n("span",{attrs:{class:"token attr-name"}},[t._v("src")]),n("span",{attrs:{class:"token attr-value"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://path/image"),n("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("/>")])]),t._v("\n "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),n("span",{attrs:{class:"token attr-name"}},[t._v("title")]),n("span",{attrs:{class:"token attr-value"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("foo"),n("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("bar"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("p",[t._v("For each DOM element ("),n("code",[t._v("div")]),t._v(", "),n("code",[t._v("img")]),t._v(", "),n("code",[t._v("span")]),t._v(", etc.) the editor will create and store an object representation. Every future change to the template will be made on top of this structure, which will then reflect on the canvas. So each object, usually called "),n("em",[t._v("Model")]),t._v(" (or state/store), will be the source of truth for the template, but what exactly does that mean?")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("In more practical example, once the template is rendered on the canvas, if you try to remove one of its elements (eg. by using using the browser inspector) and ask the editor to print the HTML (using "),s("code",[this._v("editor.getHtml()")]),this._v(") you'll see that the element will still be there. This is because the editor relies on Models and not on the DOM elements inside the canvas. This approach allows us to be extremely flexible on how we generate the final code (from the "),s("em",[this._v("Model")]),this._v(") and how to render it inside the canvas (from the "),s("em",[this._v("View")]),this._v(").")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h1",{attrs:{id:"manage-components"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#manage-components","aria-hidden":"true"}},[this._v("#")]),this._v(" Manage Components")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"component-recognition"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#component-recognition","aria-hidden":"true"}},[this._v("#")]),this._v(" Component recognition")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("But now, how does the editor recognize which Component to bind to the "),s("code",[this._v("img")]),this._v(" element and what to do with the "),s("code",[this._v("span")]),this._v(" one?\nEach Component inherits, from the base one, a particular static method")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("/**\n * @param {HTMLElement} el\n * @return {Object}\n */")]),t._v("\nisComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("p",[t._v("This method gives us the possibility to recognize and bind component types to each HTMLElement (div, img, iframe, etc.). Each "),n("strong",[t._v("HTML string/element")]),t._v(" introduced inside the canvas will be processed by "),n("code",[t._v("isComponent")]),t._v(" of all available types and if it matches, the object represented the type should be returned. The method "),n("code",[t._v("isComponent")]),n("strong",[t._v("is skipped")]),t._v(" if you add the component object ("),n("code",[t._v("{ type: 'my-custom-type', tagName: 'div', attribute: {...}, ...}")]),t._v(") or declare the type explicitly on the element ("),n("code",[t._v('
...
')]),t._v(")")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("// Image component")]),t._v("\nisComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("if")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),n("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'IMG'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'image'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Let's try with something that might look a little bit tricky. What about a Google Map?!? Google Maps are generally embedded as "),s("code",[this._v("iframe")]),this._v("s, but the template can be composed by a lot of different "),s("code",[this._v("iframe")]),this._v("s. How can I tell the editor that a particular iframe is actually a Google's Map? Well, you'll have to figure out the right pattern, you have the "),s("code",[this._v("HTMLElement")]),this._v(" so you can make all the checks you want. In this particular case this pattern is used:")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("// Map component")]),t._v("\nisComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t"),n("span",{attrs:{class:"token keyword"}},[t._v("if")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),n("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'IFRAME'")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("&&")]),t._v(" "),n("span",{attrs:{class:"token regex"}},[t._v("/maps\\.google\\.com/")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("test")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n\t\t"),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" src"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("src"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\t"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("In addition to "),s("code",[this._v("tagName")]),this._v(" check, we also used the "),s("code",[this._v("src")]),this._v(" property, but you can actually override it with your own logic by extending the built-in component.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"define-new-component"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#define-new-component","aria-hidden":"true"}},[this._v("#")]),this._v(" Define new Component")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Let's see an example with another HTML element that is not handled by default Component types. What about "),s("code",[this._v("input")]),this._v(" elements?")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("With the default GrapesJS configuration "),s("code",[this._v("input")]),this._v("s are treated like any other element; you can move it around, style it, etc. However, we'd like to handle this type of element more specifically. In this case, we have to create a new Component type.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Let's define few specs for our new "),s("em",[this._v("Input")]),this._v(" type:")])},function(){var t=this.$createElement,s=this._self._c||t;return s("ul",[s("li",[this._v("Can be dropped only inside "),s("code",[this._v("form")]),this._v(" elements")]),s("li",[this._v("Can't drop other elements inside it")]),s("li",[this._v("Can change the type of the input (text, password, email, etc.)")]),s("li",[this._v("Can make it required for the form")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token comment"}},[t._v("// Get DomComponents module")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" comps "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// Get the model and the view from the default Component type")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" defaultType "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'default'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" defaultModel "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" defaultView "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" inputTypes "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'text'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Text'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'email'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Email'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'password'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Password'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("value"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'number'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Number'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// The `input` will be the Component type ID")]),t._v("\ncomps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Define the Model")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultModel"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Extend default properties")]),t._v("\n defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Object"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("assign")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" defaultModel"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Can be dropped only inside `form` elements")]),t._v("\n draggable"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'form, form *'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Can't drop other elements inside it")]),t._v("\n droppable"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("false")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Traits (Settings)")]),t._v("\n traits"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token string"}},[t._v("'name'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'placeholder'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Change the type of the input (text, password, email, etc.)")]),t._v("\n type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'select'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n options"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" inputTypes"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Can make it required for the form")]),t._v("\n type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'checkbox'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Required'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'required'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// The second argument of .extend are static methods and we'll put inside our")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// isComponent() method. As you're putting a new Component type on top of the stack,")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// not declaring isComponent() might probably break stuff, especially if you extend")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// the default one.")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n isComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("if")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("tagName "),n("span",{attrs:{class:"token operator"}},[t._v("==")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'INPUT'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Define the View")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("The code above is pretty much self-explanatory and as you see a lot of work is basically done on top of the Model properties.\nThe "),s("em",[this._v("View")]),this._v(" is just extending the default one, so to cover also this part let's add some random behavior.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'input'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token operator"}},[t._v("...")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Bind events")]),t._v("\n events"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// If you want to bind the event to children elements")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// 'click .someChildrenClass': 'methodName',")]),t._v("\n click"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'handleClick'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n dblclick"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("alert")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Hi!'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{attrs:{class:"token comment"}},[t._v("// It doesn't make too much sense this method inside the component")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// but it's ok as an example")]),t._v("\n randomHex"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'#'")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("+")]),t._v(" Math"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("floor")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Math"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("random")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token operator"}},[t._v("*")]),n("span",{attrs:{class:"token number"}},[t._v("16777216")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("toString")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token number"}},[t._v("16")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n handleClick"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("e"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("set")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'style'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("color"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("randomHex")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// <- Affects the final HTML code")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("style"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("backgroundColor "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("randomHex")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// <- Doesn't affect the final HTML code")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Tip: updating the model will reflect the changes to the view, so, in this case,")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// if you put the model change after the DOM one this will override the backgroundColor")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// change made before")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n\n "),n("span",{attrs:{class:"token comment"}},[t._v("// The render() should return 'this'")]),t._v("\n render"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Extend the original render method")]),t._v("\n defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("render"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("apply")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arguments"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("placeholder "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Text here'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// <- Doesn't affect the final HTML code")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("From the example above you can notice few interesting things: how to bind events, how to update directly the DOM and how to update the model. The difference between updating the DOM and the model is that the HTML code (the one you get with "),s("code",[this._v("editor.getHtml()")]),this._v(") is generated from the "),s("em",[this._v("Model")]),this._v(" so updating directly the DOM will not affect it, it's just the change for the canvas.")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"update-component-type"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#update-component-type","aria-hidden":"true"}},[this._v("#")]),this._v(" Update Component type")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" originalMap "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ncomps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" originalMap"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Override how the component is rendered to HTML")]),t._v("\n toHTML"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'
My Custom Map
'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n isComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("function")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// ... new logic for isComponent")]),t._v("\n\t\t"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" originalMap"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ul",[n("li",[t._v("If you don't specify the type to extend, the "),n("code",[t._v("default")]),t._v(" one will be used. In that case, you just\nuse objects for "),n("code",[t._v("model")]),t._v(" and "),n("code",[t._v("view")])]),n("li",[t._v("The "),n("code",[t._v("defaults")]),t._v(" property, in the "),n("code",[t._v("model")]),t._v(", will be merged automatically with defaults of the parent component")]),n("li",[t._v("If you use an object in "),n("code",[t._v("model")]),t._v(" you can specify "),n("code",[t._v("isComponent")]),t._v(" outside or omit it. In this case,\nthe "),n("code",[t._v("isComponent")]),t._v(" is not mandatory but without it means the parser won't be able to identify the component\nif not explicitly declared (eg. "),n("code",[t._v('
...
')]),t._v(")")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("Before")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" defaultType "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'default'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ncomps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'new-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n someprop"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'somevalue'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Even if it returns false, declaring isComponent is mandatory")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("isComponent")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("false")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" defaultType"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("After")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'new-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// We can even omit isComponent here, as `false` return will be the default behavior")]),t._v("\n isComponent"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" el "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("false")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n someprop"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'somevalue'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ul",[n("li",[t._v("If you need to extend some component, you can use "),n("code",[t._v("extend")]),t._v(" and "),n("code",[t._v("extendView")]),t._v(" property.")]),n("li",[t._v("You can now omit "),n("code",[t._v("view")]),t._v(" property if you don't need to change it")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("Before")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token keyword"}},[t._v("const")]),t._v(" originalMap "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("getType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\ncomps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" originalMap"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("extend")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("isComponent")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("el"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// ... usually, you'd reuse the same logic")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Even if I do nothing in view, I have to specify it")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" originalMap"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("view\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[s("strong",[this._v("After")])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("The "),s("code",[this._v("map")]),this._v(" type is already defined, so it will be used as a base for the model and view.\nWe can skip "),s("code",[this._v("isComponent")]),this._v(" if the recognition logic is the same of the extended component.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Extend the "),s("code",[this._v("model")]),this._v(" and "),s("code",[this._v("view")]),this._v(" with some other, already defined, components.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n extend"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'other-defined-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// Will extend 'other-defined-component'")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// Will extend 'other-defined-component'")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// `isComponent` will be taken from `map`")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("comps"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'map'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n extend"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'other-defined-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// Will extend 'other-defined-component'")]),t._v("\n extendView"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'other-defined-component-2'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token comment"}},[t._v("// Will extend 'other-defined-component-2'")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// `isComponent` will be taken from `map`")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"lifecycle-hooks"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#lifecycle-hooks","aria-hidden":"true"}},[this._v("#")]),this._v(" Lifecycle Hooks")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("p",[t._v("Each component triggers different lifecycle hooks, which allows you to add custom actions at their specific stages.\nWe can distinguish 2 different types of hooks: "),n("strong",[t._v("global")]),t._v(" and "),n("strong",[t._v("local")]),t._v(".\nYou define "),n("strong",[t._v("local")]),t._v(" hooks when you create/extend a component type (usually via some "),n("code",[t._v("model")]),t._v("/"),n("code",[t._v("view")]),t._v(" method) and the reason is to react to an event of that\nparticular component type. Instead, the "),n("strong",[t._v("global")]),t._v(" one, will be called indistinctly on any component (you listen to them via "),n("code",[t._v("editor.on")]),t._v(") and you can make\nuse of them for a more generic use case or also listen to them inside other components.")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("ul",[n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("model.init()")]),t._v(" method, executed once the model of the component is initiliazed")]),n("li",[n("strong",[t._v("Global hook")]),t._v(": "),n("code",[t._v("component:create")]),t._v(" event, called right after "),n("code",[t._v("model.init()")]),t._v(". The model is passed as an argument to the callback function.\nEs. "),n("code",[t._v("editor.on('component:create', model => console.log('created', model))")])]),n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("view.init()")]),t._v(" method, executed once the view of the component is initiliazed")]),n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("view.onRender()")]),t._v(" method, executed once the component is rendered on the canvas")]),n("li",[n("strong",[t._v("Global hook")]),t._v(": "),n("code",[t._v("component:mount")]),t._v(" event, called right after "),n("code",[t._v("view.onRender()")]),t._v(". The model is passed as an argument to the callback function.")]),n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("model.updated()")]),t._v(" method, executes when some property of the model is updated.")]),n("li",[n("strong",[t._v("Global hook")]),t._v(": "),n("code",[t._v("component:update")]),t._v(" event, called after "),n("code",[t._v("model.updated()")]),t._v(". The model is passed as an argument to the callback function.\nYou can also listen to specific property change via "),n("code",[t._v("component:update:{propertyName}")])]),n("li",[n("strong",[t._v("Local hook")]),t._v(": "),n("code",[t._v("model.removed()")]),t._v(" method, executed when the component is removed.")]),n("li",[n("strong",[t._v("Global hook")]),t._v(": "),n("code",[t._v("component:remove")]),t._v(" event, called after "),n("code",[t._v("model.removed()")]),t._v(". The model is passed as an argument to the callback function.")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[t._v("editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'test-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n model"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n defaults"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n testprop"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token number"}},[t._v("1")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: model.init'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("listenTo")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'change:testprop'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("handlePropChange"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token comment"}},[t._v("// Here we can listen global hooks with editor.on('...')")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("updated")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),t._v("property"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValue"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: model.updated'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token string"}},[t._v("'property'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" property"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'value'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'prevValue'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" prevValue"),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("removed")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: model.removed'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("handlePropChange")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'The value of testprop'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token keyword"}},[t._v("this")]),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'testprop'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n view"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: view.init'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token function"}},[t._v("onRender")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Local hook: view.onRender'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// A block for the custom component")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("BlockManager"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("add")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'test-component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n label"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Test Component'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n content"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'
Test Component
'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),n("span",{attrs:{class:"token comment"}},[t._v("// Global hooks")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("on")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token template-string"}},[n("span",{attrs:{class:"token string"}},[t._v("`component:create`")])]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Global hook: component:create'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("on")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token template-string"}},[n("span",{attrs:{class:"token string"}},[t._v("`component:mount`")])]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Global hook: component:mount'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("on")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token template-string"}},[n("span",{attrs:{class:"token string"}},[t._v("`component:update:testprop`")])]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Global hook: component:update:testprop'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\neditor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("on")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token template-string"}},[n("span",{attrs:{class:"token string"}},[t._v("`component:remove`")])]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model "),n("span",{attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("log")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'Global hook: component:remove'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" model"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token keyword"}},[t._v("get")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"components-js"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#components-js","aria-hidden":"true"}},[this._v("#")]),this._v(" Components & JS")])},function(){var t=this.$createElement,s=this._self._c||t;return s("h2",{attrs:{id:"hints"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#hints","aria-hidden":"true"}},[this._v("#")]),this._v(" Hints")])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-html extra-class"},[n("pre",{pre:!0,attrs:{class:"language-html"}},[n("code",[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),n("span",{attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{attrs:{class:"token attr-value"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{attrs:{class:"token punctuation"}},[t._v('"')]),t._v("gjs"),n("span",{attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n ...\n "),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("cutom-element")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n ...\n"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{attrs:{class:"token script language-javascript"}},[t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n container "),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'#gjs'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fromElement"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("true")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'cutom-element-type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token operator"}},[t._v("...")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")]),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])},function(){var t=this.$createElement,s=this._self._c||t;return s("p",[this._v("Solution 1: turn off "),s("code",[this._v("autorender")])])},function(){var t=this,s=t.$createElement,n=t._self._c||s;return n("div",{staticClass:"language-html extra-class"},[n("pre",{pre:!0,attrs:{class:"language-html"}},[n("code",[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),n("span",{attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{attrs:{class:"token script language-javascript"}},[t._v("\n "),n("span",{attrs:{class:"token keyword"}},[t._v("var")]),t._v(" editor "),n("span",{attrs:{class:"token operator"}},[t._v("=")]),t._v(" grapesjs"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("init")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n autorender"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token number"}},[t._v("0")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n container "),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'#gjs'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n fromElement"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token boolean"}},[t._v("true")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),t._v("DomComponents"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("addType")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token string"}},[t._v("'cutom-element-type'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),n("span",{attrs:{class:"token operator"}},[t._v("...")]),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),n("span",{attrs:{class:"token comment"}},[t._v("// after all new types")]),t._v("\n editor"),n("span",{attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{attrs:{class:"token function"}},[t._v("render")]),n("span",{attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")]),n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token tag"}},[n("span",{attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])}],!1,null,null,null);e.options.__file="Components.md";s.default=e.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/41.92a37b1a.js b/docs/assets/js/41.92a37b1a.js deleted file mode 100644 index 019d53a60..000000000 --- a/docs/assets/js/41.92a37b1a.js +++ /dev/null @@ -1 +0,0 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{238:function(t,a,n){"use strict";n.r(a);var o=n(1),s=Object(o.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("div",{staticClass:"content"},[n("h1",{attrs:{id:"style-manager"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[t._v("#")]),t._v(" Style Manager")]),n("p",[t._v("Coming soon")]),n("p"),n("div",{staticClass:"table-of-contents"},[n("ul",[n("li",[n("a",{attrs:{href:"#built-in-properties"}},[t._v("Built-in properties")])])])]),n("p"),n("h2",{attrs:{id:"built-in-properties"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#built-in-properties","aria-hidden":"true"}},[t._v("#")]),t._v(" Built-in properties")]),n("p",[t._v("Here you can find all the available built-in properties that you can use inside Style Manager via "),n("code",[t._v("buildProps")]),t._v(":")]),n("p",[n("code",[t._v("float")]),t._v(", "),n("code",[t._v("position")]),t._v(", "),n("code",[t._v("text-align")]),t._v(", "),n("code",[t._v("display")]),t._v(", "),n("code",[t._v("font-family")]),t._v(", "),n("code",[t._v("font-weight")]),t._v(", "),n("code",[t._v("border")]),t._v(", "),n("code",[t._v("border-style")]),t._v(", "),n("code",[t._v("border-color")]),t._v(", "),n("code",[t._v("border-width")]),t._v(", "),n("code",[t._v("box-shadow")]),t._v(", "),n("code",[t._v("background-repeat")]),t._v(", "),n("code",[t._v("background-position")]),t._v(", "),n("code",[t._v("background-attachment")]),t._v(", "),n("code",[t._v("background-size")]),t._v(", "),n("code",[t._v("transition")]),t._v(", "),n("code",[t._v("transition-duration")]),t._v(", "),n("code",[t._v("transition-property")]),t._v(", "),n("code",[t._v("transition-timing-function")]),t._v(", "),n("code",[t._v("top")]),t._v(", "),n("code",[t._v("right")]),t._v(", "),n("code",[t._v("bottom")]),t._v(", "),n("code",[t._v("left")]),t._v(", "),n("code",[t._v("margin")]),t._v(", "),n("code",[t._v("margin-top")]),t._v(", "),n("code",[t._v("margin-right")]),t._v(", "),n("code",[t._v("margin-bottom")]),t._v(", "),n("code",[t._v("margin-left")]),t._v(", "),n("code",[t._v("padding")]),t._v(", "),n("code",[t._v("padding-top")]),t._v(", "),n("code",[t._v("padding-right")]),t._v(", "),n("code",[t._v("padding-bottom")]),t._v(", "),n("code",[t._v("padding-left")]),t._v(", "),n("code",[t._v("width")]),t._v(", "),n("code",[t._v("heigth")]),t._v(", "),n("code",[t._v("min-width")]),t._v(", "),n("code",[t._v("min-heigth")]),t._v(", "),n("code",[t._v("max-width")]),t._v(", "),n("code",[t._v("max-heigth")]),t._v(", "),n("code",[t._v("font-size")]),t._v(", "),n("code",[t._v("letter-spacing")]),t._v(", "),n("code",[t._v("line-height")]),t._v(", "),n("code",[t._v("text-shadow")]),t._v(", "),n("code",[t._v("border-radius")]),t._v(", "),n("code",[t._v("border-top-left-radius")]),t._v(", "),n("code",[t._v("border-top-right-radius")]),t._v(", "),n("code",[t._v("border-bottom-left-radius")]),t._v(", "),n("code",[t._v("border-bottom-right-radius")]),t._v(", "),n("code",[t._v("perspective")]),t._v(", "),n("code",[t._v("transform")]),t._v(", "),n("code",[t._v("transform-rotate-x")]),t._v(", "),n("code",[t._v("transform-rotate-y")]),t._v(", "),n("code",[t._v("transform-rotate-z")]),t._v(", "),n("code",[t._v("transform-scale-x")]),t._v(", "),n("code",[t._v("transform-scale-y")]),t._v(", "),n("code",[t._v("transform-scale-z")]),t._v(", "),n("code",[t._v("color")]),t._v(", "),n("code",[t._v("background-color")]),t._v(", "),n("code",[t._v("background")]),t._v(", "),n("code",[t._v("background-image")]),t._v(", "),n("code",[t._v("cursor")])]),n("p",[t._v("Example usage:")]),n("div",{staticClass:"language-js extra-class"},[n("pre",{pre:!0,attrs:{class:"language-js"}},[n("code",[n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n styleManager "),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n sectors"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Dimension'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buildProps"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token string"}},[t._v("'width'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),n("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'Extra'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buildProps"),n("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),n("span",{attrs:{class:"token punctuation"}},[t._v("[")]),n("span",{attrs:{class:"token string"}},[t._v("'background-color'")]),n("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),n("span",{attrs:{class:"token string"}},[t._v("'box-shadow'")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),n("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])])}],!1,null,null,null);s.options.__file="Style-manager.md";a.default=s.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/41.a4ceead1.js b/docs/assets/js/41.a4ceead1.js new file mode 100644 index 000000000..ebdae28df --- /dev/null +++ b/docs/assets/js/41.a4ceead1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{238:function(t,o,a){"use strict";a.r(o);var e=a(1),n=Object(e.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this,o=t.$createElement,a=t._self._c||o;return a("div",{staticClass:"content"},[a("h1",{attrs:{id:"style-manager"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#style-manager","aria-hidden":"true"}},[t._v("#")]),t._v(" Style Manager")]),a("p",[t._v("Coming soon")]),a("p"),a("div",{staticClass:"table-of-contents"},[a("ul",[a("li",[a("a",{attrs:{href:"#built-in-properties"}},[t._v("Built-in properties")])])])]),a("p"),a("h2",{attrs:{id:"built-in-properties"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#built-in-properties","aria-hidden":"true"}},[t._v("#")]),t._v(" Built-in properties")]),a("p",[t._v("Here you can find all the available built-in properties that you can use inside Style Manager via "),a("code",[t._v("buildProps")]),t._v(":")]),a("p",[a("code",[t._v("float")]),t._v(", "),a("code",[t._v("position")]),t._v(", "),a("code",[t._v("text-align")]),t._v(", "),a("code",[t._v("display")]),t._v(", "),a("code",[t._v("font-family")]),t._v(", "),a("code",[t._v("font-weight")]),t._v(", "),a("code",[t._v("border")]),t._v(", "),a("code",[t._v("border-style")]),t._v(", "),a("code",[t._v("border-color")]),t._v(", "),a("code",[t._v("border-width")]),t._v(", "),a("code",[t._v("box-shadow")]),t._v(", "),a("code",[t._v("background-repeat")]),t._v(", "),a("code",[t._v("background-position")]),t._v(", "),a("code",[t._v("background-attachment")]),t._v(", "),a("code",[t._v("background-size")]),t._v(", "),a("code",[t._v("transition")]),t._v(", "),a("code",[t._v("transition-duration")]),t._v(", "),a("code",[t._v("transition-property")]),t._v(", "),a("code",[t._v("transition-timing-function")]),t._v(", "),a("code",[t._v("top")]),t._v(", "),a("code",[t._v("right")]),t._v(", "),a("code",[t._v("bottom")]),t._v(", "),a("code",[t._v("left")]),t._v(", "),a("code",[t._v("margin")]),t._v(", "),a("code",[t._v("margin-top")]),t._v(", "),a("code",[t._v("margin-right")]),t._v(", "),a("code",[t._v("margin-bottom")]),t._v(", "),a("code",[t._v("margin-left")]),t._v(", "),a("code",[t._v("padding")]),t._v(", "),a("code",[t._v("padding-top")]),t._v(", "),a("code",[t._v("padding-right")]),t._v(", "),a("code",[t._v("padding-bottom")]),t._v(", "),a("code",[t._v("padding-left")]),t._v(", "),a("code",[t._v("width")]),t._v(", "),a("code",[t._v("height")]),t._v(", "),a("code",[t._v("min-width")]),t._v(", "),a("code",[t._v("min-height")]),t._v(", "),a("code",[t._v("max-width")]),t._v(", "),a("code",[t._v("max-height")]),t._v(", "),a("code",[t._v("font-size")]),t._v(", "),a("code",[t._v("letter-spacing")]),t._v(", "),a("code",[t._v("line-height")]),t._v(", "),a("code",[t._v("text-shadow")]),t._v(", "),a("code",[t._v("border-radius")]),t._v(", "),a("code",[t._v("border-top-left-radius")]),t._v(", "),a("code",[t._v("border-top-right-radius")]),t._v(", "),a("code",[t._v("border-bottom-left-radius")]),t._v(", "),a("code",[t._v("border-bottom-right-radius")]),t._v(", "),a("code",[t._v("perspective")]),t._v(", "),a("code",[t._v("transform")]),t._v(", "),a("code",[t._v("transform-rotate-x")]),t._v(", "),a("code",[t._v("transform-rotate-y")]),t._v(", "),a("code",[t._v("transform-rotate-z")]),t._v(", "),a("code",[t._v("transform-scale-x")]),t._v(", "),a("code",[t._v("transform-scale-y")]),t._v(", "),a("code",[t._v("transform-scale-z")]),t._v(", "),a("code",[t._v("color")]),t._v(", "),a("code",[t._v("background-color")]),t._v(", "),a("code",[t._v("background")]),t._v(", "),a("code",[t._v("background-image")]),t._v(", "),a("code",[t._v("cursor")]),t._v(", "),a("code",[t._v("flex-direction")]),t._v(", "),a("code",[t._v("flex-wrap")]),t._v(", "),a("code",[t._v("justify-content")]),t._v(", "),a("code",[t._v("align-items")]),t._v(", "),a("code",[t._v("align-content")]),t._v(", "),a("code",[t._v("order")]),t._v(", "),a("code",[t._v("flex-basis")]),t._v(", "),a("code",[t._v("flex-grow")]),t._v(", "),a("code",[t._v("flex-shrink")]),t._v(", "),a("code",[t._v("align-self")]),t._v(", "),a("code",[t._v("overflow")]),t._v(", "),a("code",[t._v("overflow-x")]),t._v(", "),a("code",[t._v("overflow-y")])]),a("p",[t._v("Example usage:")]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n styleManager "),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n sectors"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Dimension'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buildProps"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'width'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'min-height'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),a("span",{attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'Extra'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n buildProps"),a("span",{attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{attrs:{class:"token string"}},[t._v("'background-color'")]),a("span",{attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{attrs:{class:"token string"}},[t._v("'box-shadow'")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])])])}],!1,null,null,null);n.options.__file="Style-manager.md";o.default=n.exports}}]); \ No newline at end of file diff --git a/docs/assets/js/app.b5c3dd14.js b/docs/assets/js/app.ce70656e.js similarity index 72% rename from docs/assets/js/app.b5c3dd14.js rename to docs/assets/js/app.ce70656e.js index c202603e1..80ba9e435 100644 --- a/docs/assets/js/app.b5c3dd14.js +++ b/docs/assets/js/app.ce70656e.js @@ -1,8 +1,8 @@ -(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(e){function t(t){for(var r,o,s=t[0],l=t[1],u=t[2],p=0,f=[];p=0&&Math.floor(t)===t&&isFinite(e)}function d(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function v(e){var t=parseFloat(e);return isNaN(t)?e:t}function h(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i-1)return e.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function b(e,t){return y.call(e,t)}function _(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var x=/-(\w)/g,C=_(function(e){return e.replace(x,function(e,t){return t?t.toUpperCase():""})}),w=_(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}),k=/\B([A-Z])/g,E=_(function(e){return e.replace(k,"-$1").toLowerCase()});var S=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function $(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function O(e,t){for(var n in t)e[n]=t[n];return e}function P(e){for(var t={},n=0;n0,X=W&&W.indexOf("edge/")>0,Y=(W&&W.indexOf("android"),W&&/iphone|ipad|ipod|ios/.test(W)||"ios"===G),Q=(W&&/chrome\/\d+/.test(W),{}.watch),Z=!1;if(V)try{var ee={};Object.defineProperty(ee,"passive",{get:function(){Z=!0}}),window.addEventListener("test-passive",null,ee)}catch(e){}var te=function(){return void 0===H&&(H=!V&&!z&&"undefined"!=typeof global&&"server"===global.process.env.VUE_ENV),H},ne=V&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function re(e){return"function"==typeof e&&/native code/.test(e.toString())}var ie,ae="undefined"!=typeof Symbol&&re(Symbol)&&"undefined"!=typeof Reflect&&re(Reflect.ownKeys);ie="undefined"!=typeof Set&&re(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var oe=A,se=0,le=function(){this.id=se++,this.subs=[]};le.prototype.addSub=function(e){this.subs.push(e)},le.prototype.removeSub=function(e){g(this.subs,e)},le.prototype.depend=function(){le.target&&le.target.addDep(this)},le.prototype.notify=function(){for(var e=this.subs.slice(),t=0,n=e.length;t-1)if(a&&!b(i,"default"))o=!1;else if(""===o||o===E(e)){var l=Be(String,i.type);(l<0||s0&&(ut((u=e(u,(n||"")+"_"+l))[0])&&ut(p)&&(r[c]=he(p.text+u[0].text),u.shift()),r.push.apply(r,u)):s(u)?ut(p)?r[c]=he(p.text+u):""!==u&&r.push(he(u)):ut(u)&&ut(p)?r[c]=he(p.text+u.text):(o(t._isVList)&&a(u.tag)&&i(u.key)&&a(n)&&(u.key="__vlist"+n+"_"+l+"__"),r.push(u)));return r}(e):void 0}function ut(e){return a(e)&&a(e.text)&&!1===e.isComment}function ct(e,t){return(e.__esModule||ae&&"Module"===e[Symbol.toStringTag])&&(e=e.default),l(e)?t.extend(e):e}function pt(e){return e.isComment&&e.asyncFactory}function ft(e){if(Array.isArray(e))for(var t=0;tOt&&wt[n].id>e.id;)n--;wt.splice(n+1,0,e)}else wt.push(e);St||(St=!0,Ze(Pt))}}(this)},Tt.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||l(e)||this.deep){var t=this.value;if(this.value=e,this.user)try{this.cb.call(this.vm,e,t)}catch(e){Fe(e,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,e,t)}}},Tt.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},Tt.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},Tt.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||g(this.vm._watchers,this);for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1}};var jt={enumerable:!0,configurable:!0,get:A,set:A};function Lt(e,t,n){jt.get=function(){return this[t][n]},jt.set=function(e){this[t][n]=e},Object.defineProperty(e,n,jt)}function Mt(e){e._watchers=[];var t=e.$options;t.props&&function(e,t){var n=e.$options.propsData||{},r=e._props={},i=e.$options._propKeys=[];e.$parent&&xe(!1);var a=function(a){i.push(a);var o=De(a,t,n,e);Se(r,a,o),a in e||Lt(e,"_props",a)};for(var o in t)a(o);xe(!0)}(e,t.props),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]=null==t[n]?A:S(t[n],e)}(e,t.methods),t.data?function(e){var t=e.$options.data;c(t=e._data="function"==typeof t?function(e,t){ce();try{return e.call(t,t)}catch(e){return Fe(e,t,"data()"),{}}finally{pe()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,i=(e.$options.methods,n.length);for(;i--;){var a=n[i];0,r&&b(r,a)||(o=void 0,36!==(o=(a+"").charCodeAt(0))&&95!==o&&Lt(e,"_data",a))}var o;Ee(t,!0)}(e):Ee(e._data={},!0),t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=te();for(var i in t){var a=t[i],o="function"==typeof a?a:a.get;0,r||(n[i]=new Tt(e,o||A,A,It)),i in e||Rt(e,i,a)}}(e,t.computed),t.watch&&t.watch!==Q&&function(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var i=0;i=0||n.indexOf(e[i])<0)&&r.push(e[i]);return r}return e}function pn(e){this._init(e)}function fn(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,i=e._Ctor||(e._Ctor={});if(i[r])return i[r];var a=e.name||n.options.name;var o=function(e){this._init(e)};return(o.prototype=Object.create(n.prototype)).constructor=o,o.cid=t++,o.options=Ie(n.options,e),o.super=n,o.options.props&&function(e){var t=e.options.props;for(var n in t)Lt(e.prototype,"_props",n)}(o),o.options.computed&&function(e){var t=e.options.computed;for(var n in t)Rt(e.prototype,n,t[n])}(o),o.extend=n.extend,o.mixin=n.mixin,o.use=n.use,D.forEach(function(e){o[e]=n[e]}),a&&(o.options.components[a]=o),o.superOptions=n.options,o.extendOptions=e,o.sealedOptions=O({},o.options),i[r]=o,o}}function dn(e){return e&&(e.Ctor.options.name||e.tag)}function vn(e,t){return Array.isArray(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!p(e)&&e.test(t)}function hn(e,t){var n=e.cache,r=e.keys,i=e._vnode;for(var a in n){var o=n[a];if(o){var s=dn(o.componentOptions);s&&!t(s)&&mn(n,a,r,i)}}}function mn(e,t,n,r){var i=e[t];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),e[t]=null,g(n,t)}!function(e){e.prototype._init=function(e){var t=this;t._uid=ln++,t._isVue=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r,n._parentElm=t._parentElm,n._refElm=t._refElm;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=Ie(un(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&ht(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,i=n&&n.context;e.$slots=mt(t._renderChildren,i),e.$scopedSlots=r,e._c=function(t,n,r,i){return sn(e,t,n,r,i,!1)},e.$createElement=function(t,n,r,i){return sn(e,t,n,r,i,!0)};var a=n&&n.data;Se(e,"$attrs",a&&a.attrs||r,null,!0),Se(e,"$listeners",t._parentListeners||r,null,!0)}(t),Ct(t,"beforeCreate"),function(e){var t=Nt(e.$options.inject,e);t&&(xe(!1),Object.keys(t).forEach(function(n){Se(e,n,t[n])}),xe(!0))}(t),Mt(t),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(t),Ct(t,"created"),t.$options.el&&t.$mount(t.$options.el)}}(pn),function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=$e,e.prototype.$delete=Oe,e.prototype.$watch=function(e,t,n){if(c(t))return Ut(this,e,t,n);(n=n||{}).user=!0;var r=new Tt(this,e,t,n);return n.immediate&&t.call(this,r.value),function(){r.teardown()}}}(pn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){if(Array.isArray(e))for(var r=0,i=e.length;r1?$(t):t;for(var n=$(arguments,1),r=0,i=t.length;rparseInt(this.max)&&mn(o,s[0],s,this._vnode)),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return N}};Object.defineProperty(e,"config",t),e.util={warn:oe,extend:O,mergeOptions:Ie,defineReactive:Se},e.set=$e,e.delete=Oe,e.nextTick=Ze,e.options=Object.create(null),D.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,O(e.options.components,yn),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=$(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=Ie(this.options,e),this}}(e),fn(e),function(e){D.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&c(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}(e)}(pn),Object.defineProperty(pn.prototype,"$isServer",{get:te}),Object.defineProperty(pn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(pn,"FunctionalRenderContext",{value:Qt}),pn.version="2.5.17";var bn=h("style,class"),_n=h("input,textarea,option,select,progress"),xn=h("contenteditable,draggable,spellcheck"),Cn=h("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),wn="http://www.w3.org/1999/xlink",kn=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},En=function(e){return kn(e)?e.slice(6,e.length):""},Sn=function(e){return null==e||!1===e};function $n(e){for(var t=e.data,n=e,r=e;a(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=On(r.data,t));for(;a(n=n.parent);)n&&n.data&&(t=On(t,n.data));return function(e,t){if(a(e)||a(t))return Pn(e,An(t));return""}(t.staticClass,t.class)}function On(e,t){return{staticClass:Pn(e.staticClass,t.staticClass),class:a(e.class)?[e.class,t.class]:t.class}}function Pn(e,t){return e?t?e+" "+t:e:t||""}function An(e){return Array.isArray(e)?function(e){for(var t,n="",r=0,i=e.length;r-1?Zn(e,t,n):Cn(t)?Sn(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):xn(t)?e.setAttribute(t,Sn(n)||"false"===n?"false":"true"):kn(t)?Sn(n)?e.removeAttributeNS(wn,En(t)):e.setAttributeNS(wn,t,n):Zn(e,t,n)}function Zn(e,t,n){if(Sn(n))e.removeAttribute(t);else{if(K&&!J&&"TEXTAREA"===e.tagName&&"placeholder"===t&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}var er={create:Yn,update:Yn};function tr(e,t){var n=t.elm,r=t.data,o=e.data;if(!(i(r.staticClass)&&i(r.class)&&(i(o)||i(o.staticClass)&&i(o.class)))){var s=$n(t),l=n._transitionClasses;a(l)&&(s=Pn(s,An(l))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}var nr,rr={create:tr,update:tr},ir="__r",ar="__c";function or(e,t,n,r,i){var a;t=(a=t)._withTask||(a._withTask=function(){Je=!0;var e=a.apply(null,arguments);return Je=!1,e}),n&&(t=function(e,t,n){var r=nr;return function i(){null!==e.apply(null,arguments)&&sr(t,i,n,r)}}(t,e,r)),nr.addEventListener(e,t,Z?{capture:r,passive:i}:r)}function sr(e,t,n,r){(r||nr).removeEventListener(e,t._withTask||t,n)}function lr(e,t){if(!i(e.data.on)||!i(t.data.on)){var n=t.data.on||{},r=e.data.on||{};nr=t.elm,function(e){if(a(e[ir])){var t=K?"change":"input";e[t]=[].concat(e[ir],e[t]||[]),delete e[ir]}a(e[ar])&&(e.change=[].concat(e[ar],e.change||[]),delete e[ar])}(n),at(n,r,or,sr,t.context),nr=void 0}}var ur={create:lr,update:lr};function cr(e,t){if(!i(e.data.domProps)||!i(t.data.domProps)){var n,r,o=t.elm,s=e.data.domProps||{},l=t.data.domProps||{};for(n in a(l.__ob__)&&(l=t.data.domProps=O({},l)),s)i(l[n])&&(o[n]="");for(n in l){if(r=l[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),r===s[n])continue;1===o.childNodes.length&&o.removeChild(o.childNodes[0])}if("value"===n){o._value=r;var u=i(r)?"":String(r);pr(o,u)&&(o.value=u)}else o[n]=r}}}function pr(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,r=e._vModifiers;if(a(r)){if(r.lazy)return!1;if(r.number)return v(n)!==v(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var fr={create:cr,update:cr},dr=_(function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach(function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t});function vr(e){var t=hr(e.style);return e.staticStyle?O(e.staticStyle,t):t}function hr(e){return Array.isArray(e)?P(e):"string"==typeof e?dr(e):e}var mr,gr=/^--/,yr=/\s*!important$/,br=function(e,t,n){if(gr.test(t))e.style.setProperty(t,n);else if(yr.test(n))e.style.setProperty(t,n.replace(yr,""),"important");else{var r=xr(t);if(Array.isArray(n))for(var i=0,a=n.length;i-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function Er(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function Sr(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&O(t,$r(e.name||"v")),O(t,e),t}return"string"==typeof e?$r(e):void 0}}var $r=_(function(e){return{enterClass:e+"-enter",enterToClass:e+"-enter-to",enterActiveClass:e+"-enter-active",leaveClass:e+"-leave",leaveToClass:e+"-leave-to",leaveActiveClass:e+"-leave-active"}}),Or=V&&!J,Pr="transition",Ar="animation",Tr="transition",jr="transitionend",Lr="animation",Mr="animationend";Or&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Tr="WebkitTransition",jr="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(Lr="WebkitAnimation",Mr="webkitAnimationEnd"));var Ir=V?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function Rr(e){Ir(function(){Ir(e)})}function Dr(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),kr(e,t))}function Ur(e,t){e._transitionClasses&&g(e._transitionClasses,t),Er(e,t)}function Nr(e,t,n){var r=Fr(e,t),i=r.type,a=r.timeout,o=r.propCount;if(!i)return n();var s=i===Pr?jr:Mr,l=0,u=function(){e.removeEventListener(s,c),n()},c=function(t){t.target===e&&++l>=o&&u()};setTimeout(function(){l0&&(n=Pr,c=o,p=a.length):t===Ar?u>0&&(n=Ar,c=u,p=l.length):p=(n=(c=Math.max(o,u))>0?o>u?Pr:Ar:null)?n===Pr?a.length:l.length:0,{type:n,timeout:c,propCount:p,hasTransform:n===Pr&&Br.test(r[Tr+"Property"])}}function Hr(e,t){for(;e.length1}function Kr(e,t){!0!==t.data.show&&Vr(t)}var Jr=function(e){var t,n,r={},l=e.modules,u=e.nodeOps;for(t=0;tv?b(e,i(n[g+1])?null:n[g+1].elm,n,d,g,r):d>g&&x(0,t,f,v)}(l,d,v,n,s):a(v)?(a(e.text)&&u.setTextContent(l,""),b(l,null,v,0,v.length-1,n)):a(d)?x(0,d,0,d.length-1):a(e.text)&&u.setTextContent(l,""):e.text!==t.text&&u.setTextContent(l,t.text),a(f)&&a(c=f.hook)&&a(c=c.postpatch)&&c(e,t)}}}function E(e,t,n){if(o(n)&&a(e.parent))e.parent.data.pendingInsert=t;else for(var r=0;r-1,o.selected!==a&&(o.selected=a);else if(L(ei(o),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));i||(e.selectedIndex=-1)}}function Zr(e,t){return t.every(function(t){return!L(t,e)})}function ei(e){return"_value"in e?e._value:e.value}function ti(e){e.target.composing=!0}function ni(e){e.target.composing&&(e.target.composing=!1,ri(e.target,"input"))}function ri(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function ii(e){return!e.componentInstance||e.data&&e.data.transition?e:ii(e.componentInstance._vnode)}var ai={model:Xr,show:{bind:function(e,t,n){var r=t.value,i=(n=ii(n)).data&&n.data.transition,a=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;r&&i?(n.data.show=!0,Vr(n,function(){e.style.display=a})):e.style.display=r?a:"none"},update:function(e,t,n){var r=t.value;!r!=!t.oldValue&&((n=ii(n)).data&&n.data.transition?(n.data.show=!0,r?Vr(n,function(){e.style.display=e.__vOriginalDisplay}):zr(n,function(){e.style.display="none"})):e.style.display=r?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,r,i){i||(e.style.display=e.__vOriginalDisplay)}}},oi={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function si(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?si(ft(t.children)):e}function li(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var i=n._parentListeners;for(var a in i)t[C(a)]=i[a];return t}function ui(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var ci={name:"transition",props:oi,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(function(e){return e.tag||pt(e)})).length){0;var r=this.mode;0;var i=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return i;var a=si(i);if(!a)return i;if(this._leaving)return ui(e,i);var o="__transition-"+this._uid+"-";a.key=null==a.key?a.isComment?o+"comment":o+a.tag:s(a.key)?0===String(a.key).indexOf(o)?a.key:o+a.key:a.key;var l=(a.data||(a.data={})).transition=li(this),u=this._vnode,c=si(u);if(a.data.directives&&a.data.directives.some(function(e){return"show"===e.name})&&(a.data.show=!0),c&&c.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(a,c)&&!pt(c)&&(!c.componentInstance||!c.componentInstance._vnode.isComment)){var p=c.data.transition=O({},l);if("out-in"===r)return this._leaving=!0,ot(p,"afterLeave",function(){t._leaving=!1,t.$forceUpdate()}),ui(e,i);if("in-out"===r){if(pt(a))return u;var f,d=function(){f()};ot(l,"afterEnter",d),ot(l,"enterCancelled",d),ot(p,"delayLeave",function(e){f=e})}}return i}}},pi=O({tag:String,moveClass:String},oi);function fi(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function di(e){e.data.newPos=e.elm.getBoundingClientRect()}function vi(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,i=t.top-n.top;if(r||i){e.data.moved=!0;var a=e.elm.style;a.transform=a.WebkitTransform="translate("+r+"px,"+i+"px)",a.transitionDuration="0s"}}delete pi.mode;var hi={Transition:ci,TransitionGroup:{props:pi,render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],a=this.children=[],o=li(this),s=0;s-1?In[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:In[e]=/HTMLUnknownElement/.test(t.toString())},O(pn.options.directives,ai),O(pn.options.components,hi),pn.prototype.__patch__=V?Jr:A,pn.prototype.$mount=function(e,t){return function(e,t,n){var r;return e.$el=t,e.$options.render||(e.$options.render=ve),Ct(e,"beforeMount"),r=function(){e._update(e._render(),n)},new Tt(e,r,A,null,!0),n=!1,null==e.$vnode&&(e._isMounted=!0,Ct(e,"mounted")),e}(this,e=e&&V?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},V&&setTimeout(function(){N.devtools&&ne&&ne.emit("init",pn)},0),t.a=pn},function(e,t,n){"use strict";function r(e,t,n,r,i,a,o,s){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),a&&(u._scopeId="data-v-"+a),o?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=l):i&&(l=s?function(){i.call(this,this.$root.$options.shadowRoot)}:i),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var p=u.beforeCreate;u.beforeCreate=p?[].concat(p,l):[l]}return{exports:e,options:u}}n.d(t,"a",function(){return r})},function(e,t,n){"use strict";var r=n(67),i=n(35),a=n(1),o=Object(a.a)(i.default,r.a,r.b,!1,null,null,null);o.options.__file="Layout.vue",t.default=o.exports},function(e,t,n){var r=n(69)("wks"),i=n(26),a=n(4).Symbol,o="function"==typeof a;(e.exports=function(e){return r[e]||(r[e]=o&&a[e]||(o?a:i)("Symbol."+e))}).store=r},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t,n){var r=n(4),i=n(15),a=n(11),o=n(16),s=n(13),l=function(e,t,n){var u,c,p,f,d=e&l.F,v=e&l.G,h=e&l.S,m=e&l.P,g=e&l.B,y=v?r:h?r[t]||(r[t]={}):(r[t]||{}).prototype,b=v?i:i[t]||(i[t]={}),_=b.prototype||(b.prototype={});for(u in v&&(n=t),n)p=((c=!d&&y&&void 0!==y[u])?y:n)[u],f=g&&c?s(p,r):m&&"function"==typeof p?s(Function.call,p):p,y&&o(y,u,p,e&l.U),b[u]!=p&&a(b,u,f),m&&_[u]!=p&&(_[u]=p)};r.core=i,l.F=1,l.G=2,l.S=4,l.P=8,l.B=16,l.W=32,l.U=64,l.R=128,e.exports=l},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){var r=n(6);e.exports=function(e){if(!r(e))throw TypeError(e+" is not an object!");return e}},function(e,t,n){e.exports=!n(7)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,n){"use strict";function r(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t=e.length?(this._t=void 0,i(1)):i(0,"keys"==t?n:"values"==t?e[n]:[n,e[n]])},"values"),a.Arguments=a.Array,r("keys"),r("values"),r("entries")},function(e,t,n){"use strict";var r=n(7);e.exports=function(e,t){return!!e&&r(function(){t?e.call(null,function(){},1):e.call(null)})}},function(e,t,n){"use strict";var r=n(5),i=n(32)(3);r(r.P+r.F*!n(22)([].some,!0),"Array",{some:function(e){return i(this,e,arguments[1])}})},function(e,t,n){var r=n(5);r(r.S+r.F,"Object",{assign:n(102)})},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+r).toString(36))}},function(e,t,n){var r=n(77),i=n(63);e.exports=Object.keys||function(e){return r(e,i)}},function(e,t,n){var r=n(61),i=n(20);e.exports=function(e){return r(i(e))}},function(e,t,n){var r=n(20);e.exports=function(e){return Object(r(e))}},function(e,t,n){var r=n(29),i=n(27);n(80)("keys",function(){return function(e){return i(r(e))}})},function(e,t,n){"use strict";var r=n(5),i=n(32)(0),a=n(22)([].forEach,!0);r(r.P+r.F*!a,"Array",{forEach:function(e){return i(this,e,arguments[1])}})},function(e,t,n){var r=n(13),i=n(61),a=n(29),o=n(59),s=n(114);e.exports=function(e,t){var n=1==e,l=2==e,u=3==e,c=4==e,p=6==e,f=5==e||p,d=t||s;return function(t,s,v){for(var h,m,g=a(t),y=i(g),b=r(s,v,3),_=o(y.length),x=0,C=n?d(t,_):l?d(t,0):void 0;_>x;x++)if((f||x in y)&&(m=b(h=y[x],x,g),e))if(n)C[x]=m;else if(m)switch(e){case 3:return!0;case 5:return h;case 6:return x;case 2:C.push(h)}else if(c)return!1;return p?-1:u||c?c:C}}},function(e,t,n){"use strict";var r=n(5),i=n(32)(1);r(r.P+r.F*!n(22)([].map,!0),"Array",{map:function(e){return i(this,e,arguments[1])}})},function(e,t,n){n(66)("replace",2,function(e,t,n){return[function(r,i){"use strict";var a=e(this),o=null==r?void 0:r[t];return void 0!==o?o.call(r,a,i):n.call(String(a),r,i)},n]})},function(e,t,n){"use strict";var r=n(36),i=n.n(r);t.default=i.a},function(e,t,n){"use strict";var r=n(162).default,i=n(155).default;e.exports={components:{Layout:r,CarbonAds:i}}},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";n.r(t);var r=n(51),i=n.n(r);for(var a in r)"default"!==a&&function(e){n.d(t,e,function(){return r[e]})}(a);t.default=i.a},function(e,t,n){"use strict";e.exports={render:function(e){return e("div",{class:"carbon-ads"})},mounted:function(){this.load()},watch:{$route:function(e,t){e.path!==t.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},methods:{load:function(){var e=document.createElement("script");e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CKYI5KJU&placement=grapesjscom",this.$el.appendChild(e)}}}},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){var r,i; + */var r=Object.freeze({});function i(e){return null==e}function a(e){return null!=e}function o(e){return!0===e}function s(e){return"string"==typeof e||"number"==typeof e||"symbol"==typeof e||"boolean"==typeof e}function l(e){return null!==e&&"object"==typeof e}var u=Object.prototype.toString;function c(e){return"[object Object]"===u.call(e)}function p(e){return"[object RegExp]"===u.call(e)}function f(e){var t=parseFloat(String(e));return t>=0&&Math.floor(t)===t&&isFinite(e)}function d(e){return null==e?"":"object"==typeof e?JSON.stringify(e,null,2):String(e)}function v(e){var t=parseFloat(e);return isNaN(t)?e:t}function h(e,t){for(var n=Object.create(null),r=e.split(","),i=0;i-1)return e.splice(n,1)}}var y=Object.prototype.hasOwnProperty;function b(e,t){return y.call(e,t)}function _(e){var t=Object.create(null);return function(n){return t[n]||(t[n]=e(n))}}var x=/-(\w)/g,C=_(function(e){return e.replace(x,function(e,t){return t?t.toUpperCase():""})}),w=_(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}),k=/\B([A-Z])/g,E=_(function(e){return e.replace(k,"-$1").toLowerCase()});var S=Function.prototype.bind?function(e,t){return e.bind(t)}:function(e,t){function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}return n._length=e.length,n};function $(e,t){t=t||0;for(var n=e.length-t,r=new Array(n);n--;)r[n]=e[n+t];return r}function O(e,t){for(var n in t)e[n]=t[n];return e}function A(e){for(var t={},n=0;n0,X=W&&W.indexOf("edge/")>0,Y=(W&&W.indexOf("android"),W&&/iphone|ipad|ipod|ios/.test(W)||"ios"===G),Q=(W&&/chrome\/\d+/.test(W),{}.watch),Z=!1;if(V)try{var ee={};Object.defineProperty(ee,"passive",{get:function(){Z=!0}}),window.addEventListener("test-passive",null,ee)}catch(e){}var te=function(){return void 0===H&&(H=!V&&!z&&"undefined"!=typeof global&&"server"===global.process.env.VUE_ENV),H},ne=V&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function re(e){return"function"==typeof e&&/native code/.test(e.toString())}var ie,ae="undefined"!=typeof Symbol&&re(Symbol)&&"undefined"!=typeof Reflect&&re(Reflect.ownKeys);ie="undefined"!=typeof Set&&re(Set)?Set:function(){function e(){this.set=Object.create(null)}return e.prototype.has=function(e){return!0===this.set[e]},e.prototype.add=function(e){this.set[e]=!0},e.prototype.clear=function(){this.set=Object.create(null)},e}();var oe=P,se=0,le=function(){this.id=se++,this.subs=[]};le.prototype.addSub=function(e){this.subs.push(e)},le.prototype.removeSub=function(e){g(this.subs,e)},le.prototype.depend=function(){le.target&&le.target.addDep(this)},le.prototype.notify=function(){for(var e=this.subs.slice(),t=0,n=e.length;t-1)if(a&&!b(i,"default"))o=!1;else if(""===o||o===E(e)){var l=Be(String,i.type);(l<0||s0&&(ut((u=e(u,(n||"")+"_"+l))[0])&&ut(p)&&(r[c]=he(p.text+u[0].text),u.shift()),r.push.apply(r,u)):s(u)?ut(p)?r[c]=he(p.text+u):""!==u&&r.push(he(u)):ut(u)&&ut(p)?r[c]=he(p.text+u.text):(o(t._isVList)&&a(u.tag)&&i(u.key)&&a(n)&&(u.key="__vlist"+n+"_"+l+"__"),r.push(u)));return r}(e):void 0}function ut(e){return a(e)&&a(e.text)&&!1===e.isComment}function ct(e,t){return(e.__esModule||ae&&"Module"===e[Symbol.toStringTag])&&(e=e.default),l(e)?t.extend(e):e}function pt(e){return e.isComment&&e.asyncFactory}function ft(e){if(Array.isArray(e))for(var t=0;tOt&&wt[n].id>e.id;)n--;wt.splice(n+1,0,e)}else wt.push(e);St||(St=!0,Ze(At))}}(this)},Tt.prototype.run=function(){if(this.active){var e=this.get();if(e!==this.value||l(e)||this.deep){var t=this.value;if(this.value=e,this.user)try{this.cb.call(this.vm,e,t)}catch(e){Fe(e,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,e,t)}}},Tt.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},Tt.prototype.depend=function(){for(var e=this.deps.length;e--;)this.deps[e].depend()},Tt.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||g(this.vm._watchers,this);for(var e=this.deps.length;e--;)this.deps[e].removeSub(this);this.active=!1}};var jt={enumerable:!0,configurable:!0,get:P,set:P};function Lt(e,t,n){jt.get=function(){return this[t][n]},jt.set=function(e){this[t][n]=e},Object.defineProperty(e,n,jt)}function Mt(e){e._watchers=[];var t=e.$options;t.props&&function(e,t){var n=e.$options.propsData||{},r=e._props={},i=e.$options._propKeys=[];e.$parent&&xe(!1);var a=function(a){i.push(a);var o=De(a,t,n,e);Se(r,a,o),a in e||Lt(e,"_props",a)};for(var o in t)a(o);xe(!0)}(e,t.props),t.methods&&function(e,t){e.$options.props;for(var n in t)e[n]=null==t[n]?P:S(t[n],e)}(e,t.methods),t.data?function(e){var t=e.$options.data;c(t=e._data="function"==typeof t?function(e,t){ce();try{return e.call(t,t)}catch(e){return Fe(e,t,"data()"),{}}finally{pe()}}(t,e):t||{})||(t={});var n=Object.keys(t),r=e.$options.props,i=(e.$options.methods,n.length);for(;i--;){var a=n[i];0,r&&b(r,a)||(o=void 0,36!==(o=(a+"").charCodeAt(0))&&95!==o&&Lt(e,"_data",a))}var o;Ee(t,!0)}(e):Ee(e._data={},!0),t.computed&&function(e,t){var n=e._computedWatchers=Object.create(null),r=te();for(var i in t){var a=t[i],o="function"==typeof a?a:a.get;0,r||(n[i]=new Tt(e,o||P,P,It)),i in e||Rt(e,i,a)}}(e,t.computed),t.watch&&t.watch!==Q&&function(e,t){for(var n in t){var r=t[n];if(Array.isArray(r))for(var i=0;i=0||n.indexOf(e[i])<0)&&r.push(e[i]);return r}return e}function pn(e){this._init(e)}function fn(e){e.cid=0;var t=1;e.extend=function(e){e=e||{};var n=this,r=n.cid,i=e._Ctor||(e._Ctor={});if(i[r])return i[r];var a=e.name||n.options.name;var o=function(e){this._init(e)};return(o.prototype=Object.create(n.prototype)).constructor=o,o.cid=t++,o.options=Ie(n.options,e),o.super=n,o.options.props&&function(e){var t=e.options.props;for(var n in t)Lt(e.prototype,"_props",n)}(o),o.options.computed&&function(e){var t=e.options.computed;for(var n in t)Rt(e.prototype,n,t[n])}(o),o.extend=n.extend,o.mixin=n.mixin,o.use=n.use,D.forEach(function(e){o[e]=n[e]}),a&&(o.options.components[a]=o),o.superOptions=n.options,o.extendOptions=e,o.sealedOptions=O({},o.options),i[r]=o,o}}function dn(e){return e&&(e.Ctor.options.name||e.tag)}function vn(e,t){return Array.isArray(e)?e.indexOf(t)>-1:"string"==typeof e?e.split(",").indexOf(t)>-1:!!p(e)&&e.test(t)}function hn(e,t){var n=e.cache,r=e.keys,i=e._vnode;for(var a in n){var o=n[a];if(o){var s=dn(o.componentOptions);s&&!t(s)&&mn(n,a,r,i)}}}function mn(e,t,n,r){var i=e[t];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),e[t]=null,g(n,t)}!function(e){e.prototype._init=function(e){var t=this;t._uid=ln++,t._isVue=!0,e&&e._isComponent?function(e,t){var n=e.$options=Object.create(e.constructor.options),r=t._parentVnode;n.parent=t.parent,n._parentVnode=r,n._parentElm=t._parentElm,n._refElm=t._refElm;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,t.render&&(n.render=t.render,n.staticRenderFns=t.staticRenderFns)}(t,e):t.$options=Ie(un(t.constructor),e||{},t),t._renderProxy=t,t._self=t,function(e){var t=e.$options,n=t.parent;if(n&&!t.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(e)}e.$parent=n,e.$root=n?n.$root:e,e.$children=[],e.$refs={},e._watcher=null,e._inactive=null,e._directInactive=!1,e._isMounted=!1,e._isDestroyed=!1,e._isBeingDestroyed=!1}(t),function(e){e._events=Object.create(null),e._hasHookEvent=!1;var t=e.$options._parentListeners;t&&ht(e,t)}(t),function(e){e._vnode=null,e._staticTrees=null;var t=e.$options,n=e.$vnode=t._parentVnode,i=n&&n.context;e.$slots=mt(t._renderChildren,i),e.$scopedSlots=r,e._c=function(t,n,r,i){return sn(e,t,n,r,i,!1)},e.$createElement=function(t,n,r,i){return sn(e,t,n,r,i,!0)};var a=n&&n.data;Se(e,"$attrs",a&&a.attrs||r,null,!0),Se(e,"$listeners",t._parentListeners||r,null,!0)}(t),Ct(t,"beforeCreate"),function(e){var t=Nt(e.$options.inject,e);t&&(xe(!1),Object.keys(t).forEach(function(n){Se(e,n,t[n])}),xe(!0))}(t),Mt(t),function(e){var t=e.$options.provide;t&&(e._provided="function"==typeof t?t.call(e):t)}(t),Ct(t,"created"),t.$options.el&&t.$mount(t.$options.el)}}(pn),function(e){var t={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(e.prototype,"$data",t),Object.defineProperty(e.prototype,"$props",n),e.prototype.$set=$e,e.prototype.$delete=Oe,e.prototype.$watch=function(e,t,n){if(c(t))return Ut(this,e,t,n);(n=n||{}).user=!0;var r=new Tt(this,e,t,n);return n.immediate&&t.call(this,r.value),function(){r.teardown()}}}(pn),function(e){var t=/^hook:/;e.prototype.$on=function(e,n){if(Array.isArray(e))for(var r=0,i=e.length;r1?$(t):t;for(var n=$(arguments,1),r=0,i=t.length;rparseInt(this.max)&&mn(o,s[0],s,this._vnode)),t.data.keepAlive=!0}return t||e&&e[0]}}};!function(e){var t={get:function(){return N}};Object.defineProperty(e,"config",t),e.util={warn:oe,extend:O,mergeOptions:Ie,defineReactive:Se},e.set=$e,e.delete=Oe,e.nextTick=Ze,e.options=Object.create(null),D.forEach(function(t){e.options[t+"s"]=Object.create(null)}),e.options._base=e,O(e.options.components,yn),function(e){e.use=function(e){var t=this._installedPlugins||(this._installedPlugins=[]);if(t.indexOf(e)>-1)return this;var n=$(arguments,1);return n.unshift(this),"function"==typeof e.install?e.install.apply(e,n):"function"==typeof e&&e.apply(null,n),t.push(e),this}}(e),function(e){e.mixin=function(e){return this.options=Ie(this.options,e),this}}(e),fn(e),function(e){D.forEach(function(t){e[t]=function(e,n){return n?("component"===t&&c(n)&&(n.name=n.name||e,n=this.options._base.extend(n)),"directive"===t&&"function"==typeof n&&(n={bind:n,update:n}),this.options[t+"s"][e]=n,n):this.options[t+"s"][e]}})}(e)}(pn),Object.defineProperty(pn.prototype,"$isServer",{get:te}),Object.defineProperty(pn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(pn,"FunctionalRenderContext",{value:Qt}),pn.version="2.5.17";var bn=h("style,class"),_n=h("input,textarea,option,select,progress"),xn=h("contenteditable,draggable,spellcheck"),Cn=h("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),wn="http://www.w3.org/1999/xlink",kn=function(e){return":"===e.charAt(5)&&"xlink"===e.slice(0,5)},En=function(e){return kn(e)?e.slice(6,e.length):""},Sn=function(e){return null==e||!1===e};function $n(e){for(var t=e.data,n=e,r=e;a(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(t=On(r.data,t));for(;a(n=n.parent);)n&&n.data&&(t=On(t,n.data));return function(e,t){if(a(e)||a(t))return An(e,Pn(t));return""}(t.staticClass,t.class)}function On(e,t){return{staticClass:An(e.staticClass,t.staticClass),class:a(e.class)?[e.class,t.class]:t.class}}function An(e,t){return e?t?e+" "+t:e:t||""}function Pn(e){return Array.isArray(e)?function(e){for(var t,n="",r=0,i=e.length;r-1?Zn(e,t,n):Cn(t)?Sn(n)?e.removeAttribute(t):(n="allowfullscreen"===t&&"EMBED"===e.tagName?"true":t,e.setAttribute(t,n)):xn(t)?e.setAttribute(t,Sn(n)||"false"===n?"false":"true"):kn(t)?Sn(n)?e.removeAttributeNS(wn,En(t)):e.setAttributeNS(wn,t,n):Zn(e,t,n)}function Zn(e,t,n){if(Sn(n))e.removeAttribute(t);else{if(K&&!J&&"TEXTAREA"===e.tagName&&"placeholder"===t&&!e.__ieph){var r=function(t){t.stopImmediatePropagation(),e.removeEventListener("input",r)};e.addEventListener("input",r),e.__ieph=!0}e.setAttribute(t,n)}}var er={create:Yn,update:Yn};function tr(e,t){var n=t.elm,r=t.data,o=e.data;if(!(i(r.staticClass)&&i(r.class)&&(i(o)||i(o.staticClass)&&i(o.class)))){var s=$n(t),l=n._transitionClasses;a(l)&&(s=An(s,Pn(l))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}var nr,rr={create:tr,update:tr},ir="__r",ar="__c";function or(e,t,n,r,i){var a;t=(a=t)._withTask||(a._withTask=function(){Je=!0;var e=a.apply(null,arguments);return Je=!1,e}),n&&(t=function(e,t,n){var r=nr;return function i(){null!==e.apply(null,arguments)&&sr(t,i,n,r)}}(t,e,r)),nr.addEventListener(e,t,Z?{capture:r,passive:i}:r)}function sr(e,t,n,r){(r||nr).removeEventListener(e,t._withTask||t,n)}function lr(e,t){if(!i(e.data.on)||!i(t.data.on)){var n=t.data.on||{},r=e.data.on||{};nr=t.elm,function(e){if(a(e[ir])){var t=K?"change":"input";e[t]=[].concat(e[ir],e[t]||[]),delete e[ir]}a(e[ar])&&(e.change=[].concat(e[ar],e.change||[]),delete e[ar])}(n),at(n,r,or,sr,t.context),nr=void 0}}var ur={create:lr,update:lr};function cr(e,t){if(!i(e.data.domProps)||!i(t.data.domProps)){var n,r,o=t.elm,s=e.data.domProps||{},l=t.data.domProps||{};for(n in a(l.__ob__)&&(l=t.data.domProps=O({},l)),s)i(l[n])&&(o[n]="");for(n in l){if(r=l[n],"textContent"===n||"innerHTML"===n){if(t.children&&(t.children.length=0),r===s[n])continue;1===o.childNodes.length&&o.removeChild(o.childNodes[0])}if("value"===n){o._value=r;var u=i(r)?"":String(r);pr(o,u)&&(o.value=u)}else o[n]=r}}}function pr(e,t){return!e.composing&&("OPTION"===e.tagName||function(e,t){var n=!0;try{n=document.activeElement!==e}catch(e){}return n&&e.value!==t}(e,t)||function(e,t){var n=e.value,r=e._vModifiers;if(a(r)){if(r.lazy)return!1;if(r.number)return v(n)!==v(t);if(r.trim)return n.trim()!==t.trim()}return n!==t}(e,t))}var fr={create:cr,update:cr},dr=_(function(e){var t={},n=/:(.+)/;return e.split(/;(?![^(]*\))/g).forEach(function(e){if(e){var r=e.split(n);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t});function vr(e){var t=hr(e.style);return e.staticStyle?O(e.staticStyle,t):t}function hr(e){return Array.isArray(e)?A(e):"string"==typeof e?dr(e):e}var mr,gr=/^--/,yr=/\s*!important$/,br=function(e,t,n){if(gr.test(t))e.style.setProperty(t,n);else if(yr.test(n))e.style.setProperty(t,n.replace(yr,""),"important");else{var r=xr(t);if(Array.isArray(n))for(var i=0,a=n.length;i-1?t.split(/\s+/).forEach(function(t){return e.classList.add(t)}):e.classList.add(t);else{var n=" "+(e.getAttribute("class")||"")+" ";n.indexOf(" "+t+" ")<0&&e.setAttribute("class",(n+t).trim())}}function Er(e,t){if(t&&(t=t.trim()))if(e.classList)t.indexOf(" ")>-1?t.split(/\s+/).forEach(function(t){return e.classList.remove(t)}):e.classList.remove(t),e.classList.length||e.removeAttribute("class");else{for(var n=" "+(e.getAttribute("class")||"")+" ",r=" "+t+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?e.setAttribute("class",n):e.removeAttribute("class")}}function Sr(e){if(e){if("object"==typeof e){var t={};return!1!==e.css&&O(t,$r(e.name||"v")),O(t,e),t}return"string"==typeof e?$r(e):void 0}}var $r=_(function(e){return{enterClass:e+"-enter",enterToClass:e+"-enter-to",enterActiveClass:e+"-enter-active",leaveClass:e+"-leave",leaveToClass:e+"-leave-to",leaveActiveClass:e+"-leave-active"}}),Or=V&&!J,Ar="transition",Pr="animation",Tr="transition",jr="transitionend",Lr="animation",Mr="animationend";Or&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Tr="WebkitTransition",jr="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(Lr="WebkitAnimation",Mr="webkitAnimationEnd"));var Ir=V?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(e){return e()};function Rr(e){Ir(function(){Ir(e)})}function Dr(e,t){var n=e._transitionClasses||(e._transitionClasses=[]);n.indexOf(t)<0&&(n.push(t),kr(e,t))}function Ur(e,t){e._transitionClasses&&g(e._transitionClasses,t),Er(e,t)}function Nr(e,t,n){var r=Fr(e,t),i=r.type,a=r.timeout,o=r.propCount;if(!i)return n();var s=i===Ar?jr:Mr,l=0,u=function(){e.removeEventListener(s,c),n()},c=function(t){t.target===e&&++l>=o&&u()};setTimeout(function(){l0&&(n=Ar,c=o,p=a.length):t===Pr?u>0&&(n=Pr,c=u,p=l.length):p=(n=(c=Math.max(o,u))>0?o>u?Ar:Pr:null)?n===Ar?a.length:l.length:0,{type:n,timeout:c,propCount:p,hasTransform:n===Ar&&Br.test(r[Tr+"Property"])}}function Hr(e,t){for(;e.length1}function Kr(e,t){!0!==t.data.show&&Vr(t)}var Jr=function(e){var t,n,r={},l=e.modules,u=e.nodeOps;for(t=0;tv?b(e,i(n[g+1])?null:n[g+1].elm,n,d,g,r):d>g&&x(0,t,f,v)}(l,d,v,n,s):a(v)?(a(e.text)&&u.setTextContent(l,""),b(l,null,v,0,v.length-1,n)):a(d)?x(0,d,0,d.length-1):a(e.text)&&u.setTextContent(l,""):e.text!==t.text&&u.setTextContent(l,t.text),a(f)&&a(c=f.hook)&&a(c=c.postpatch)&&c(e,t)}}}function E(e,t,n){if(o(n)&&a(e.parent))e.parent.data.pendingInsert=t;else for(var r=0;r-1,o.selected!==a&&(o.selected=a);else if(L(ei(o),r))return void(e.selectedIndex!==s&&(e.selectedIndex=s));i||(e.selectedIndex=-1)}}function Zr(e,t){return t.every(function(t){return!L(t,e)})}function ei(e){return"_value"in e?e._value:e.value}function ti(e){e.target.composing=!0}function ni(e){e.target.composing&&(e.target.composing=!1,ri(e.target,"input"))}function ri(e,t){var n=document.createEvent("HTMLEvents");n.initEvent(t,!0,!0),e.dispatchEvent(n)}function ii(e){return!e.componentInstance||e.data&&e.data.transition?e:ii(e.componentInstance._vnode)}var ai={model:Xr,show:{bind:function(e,t,n){var r=t.value,i=(n=ii(n)).data&&n.data.transition,a=e.__vOriginalDisplay="none"===e.style.display?"":e.style.display;r&&i?(n.data.show=!0,Vr(n,function(){e.style.display=a})):e.style.display=r?a:"none"},update:function(e,t,n){var r=t.value;!r!=!t.oldValue&&((n=ii(n)).data&&n.data.transition?(n.data.show=!0,r?Vr(n,function(){e.style.display=e.__vOriginalDisplay}):zr(n,function(){e.style.display="none"})):e.style.display=r?e.__vOriginalDisplay:"none")},unbind:function(e,t,n,r,i){i||(e.style.display=e.__vOriginalDisplay)}}},oi={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function si(e){var t=e&&e.componentOptions;return t&&t.Ctor.options.abstract?si(ft(t.children)):e}function li(e){var t={},n=e.$options;for(var r in n.propsData)t[r]=e[r];var i=n._parentListeners;for(var a in i)t[C(a)]=i[a];return t}function ui(e,t){if(/\d-keep-alive$/.test(t.tag))return e("keep-alive",{props:t.componentOptions.propsData})}var ci={name:"transition",props:oi,abstract:!0,render:function(e){var t=this,n=this.$slots.default;if(n&&(n=n.filter(function(e){return e.tag||pt(e)})).length){0;var r=this.mode;0;var i=n[0];if(function(e){for(;e=e.parent;)if(e.data.transition)return!0}(this.$vnode))return i;var a=si(i);if(!a)return i;if(this._leaving)return ui(e,i);var o="__transition-"+this._uid+"-";a.key=null==a.key?a.isComment?o+"comment":o+a.tag:s(a.key)?0===String(a.key).indexOf(o)?a.key:o+a.key:a.key;var l=(a.data||(a.data={})).transition=li(this),u=this._vnode,c=si(u);if(a.data.directives&&a.data.directives.some(function(e){return"show"===e.name})&&(a.data.show=!0),c&&c.data&&!function(e,t){return t.key===e.key&&t.tag===e.tag}(a,c)&&!pt(c)&&(!c.componentInstance||!c.componentInstance._vnode.isComment)){var p=c.data.transition=O({},l);if("out-in"===r)return this._leaving=!0,ot(p,"afterLeave",function(){t._leaving=!1,t.$forceUpdate()}),ui(e,i);if("in-out"===r){if(pt(a))return u;var f,d=function(){f()};ot(l,"afterEnter",d),ot(l,"enterCancelled",d),ot(p,"delayLeave",function(e){f=e})}}return i}}},pi=O({tag:String,moveClass:String},oi);function fi(e){e.elm._moveCb&&e.elm._moveCb(),e.elm._enterCb&&e.elm._enterCb()}function di(e){e.data.newPos=e.elm.getBoundingClientRect()}function vi(e){var t=e.data.pos,n=e.data.newPos,r=t.left-n.left,i=t.top-n.top;if(r||i){e.data.moved=!0;var a=e.elm.style;a.transform=a.WebkitTransform="translate("+r+"px,"+i+"px)",a.transitionDuration="0s"}}delete pi.mode;var hi={Transition:ci,TransitionGroup:{props:pi,render:function(e){for(var t=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],a=this.children=[],o=li(this),s=0;s-1?In[e]=t.constructor===window.HTMLUnknownElement||t.constructor===window.HTMLElement:In[e]=/HTMLUnknownElement/.test(t.toString())},O(pn.options.directives,ai),O(pn.options.components,hi),pn.prototype.__patch__=V?Jr:P,pn.prototype.$mount=function(e,t){return function(e,t,n){var r;return e.$el=t,e.$options.render||(e.$options.render=ve),Ct(e,"beforeMount"),r=function(){e._update(e._render(),n)},new Tt(e,r,P,null,!0),n=!1,null==e.$vnode&&(e._isMounted=!0,Ct(e,"mounted")),e}(this,e=e&&V?function(e){if("string"==typeof e){var t=document.querySelector(e);return t||document.createElement("div")}return e}(e):void 0,t)},V&&setTimeout(function(){N.devtools&&ne&&ne.emit("init",pn)},0),t.a=pn},function(e,t,n){"use strict";function r(e,t,n,r,i,a,o,s){var l,u="function"==typeof e?e.options:e;if(t&&(u.render=t,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),a&&(u._scopeId="data-v-"+a),o?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},u._ssrRegister=l):i&&(l=s?function(){i.call(this,this.$root.$options.shadowRoot)}:i),l)if(u.functional){u._injectStyles=l;var c=u.render;u.render=function(e,t){return l.call(t),c(e,t)}}else{var p=u.beforeCreate;u.beforeCreate=p?[].concat(p,l):[l]}return{exports:e,options:u}}n.d(t,"a",function(){return r})},function(e,t,n){"use strict";var r=n(67),i=n(35),a=n(1),o=Object(a.a)(i.default,r.a,r.b,!1,null,null,null);o.options.__file="Layout.vue",t.default=o.exports},function(e,t,n){var r=n(70)("wks"),i=n(26),a=n(4).Symbol,o="function"==typeof a;(e.exports=function(e){return r[e]||(r[e]=o&&a[e]||(o?a:i)("Symbol."+e))}).store=r},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t,n){var r=n(4),i=n(15),a=n(11),o=n(16),s=n(13),l=function(e,t,n){var u,c,p,f,d=e&l.F,v=e&l.G,h=e&l.S,m=e&l.P,g=e&l.B,y=v?r:h?r[t]||(r[t]={}):(r[t]||{}).prototype,b=v?i:i[t]||(i[t]={}),_=b.prototype||(b.prototype={});for(u in v&&(n=t),n)p=((c=!d&&y&&void 0!==y[u])?y:n)[u],f=g&&c?s(p,r):m&&"function"==typeof p?s(Function.call,p):p,y&&o(y,u,p,e&l.U),b[u]!=p&&a(b,u,f),m&&_[u]!=p&&(_[u]=p)};r.core=i,l.F=1,l.G=2,l.S=4,l.P=8,l.B=16,l.W=32,l.U=64,l.R=128,e.exports=l},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t){e.exports=function(e){try{return!!e()}catch(e){return!0}}},function(e,t,n){var r=n(6);e.exports=function(e){if(!r(e))throw TypeError(e+" is not an object!");return e}},function(e,t,n){e.exports=!n(7)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,n){"use strict";function r(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t=e.length?(this._t=void 0,i(1)):i(0,"keys"==t?n:"values"==t?e[n]:[n,e[n]])},"values"),a.Arguments=a.Array,r("keys"),r("values"),r("entries")},function(e,t,n){"use strict";var r=n(7);e.exports=function(e,t){return!!e&&r(function(){t?e.call(null,function(){},1):e.call(null)})}},function(e,t,n){"use strict";var r=n(5),i=n(32)(3);r(r.P+r.F*!n(22)([].some,!0),"Array",{some:function(e){return i(this,e,arguments[1])}})},function(e,t,n){var r=n(5);r(r.S+r.F,"Object",{assign:n(102)})},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++n+r).toString(36))}},function(e,t,n){var r=n(78),i=n(63);e.exports=Object.keys||function(e){return r(e,i)}},function(e,t,n){var r=n(61),i=n(20);e.exports=function(e){return r(i(e))}},function(e,t,n){var r=n(20);e.exports=function(e){return Object(r(e))}},function(e,t,n){var r=n(29),i=n(27);n(81)("keys",function(){return function(e){return i(r(e))}})},function(e,t,n){"use strict";var r=n(5),i=n(32)(0),a=n(22)([].forEach,!0);r(r.P+r.F*!a,"Array",{forEach:function(e){return i(this,e,arguments[1])}})},function(e,t,n){var r=n(13),i=n(61),a=n(29),o=n(59),s=n(114);e.exports=function(e,t){var n=1==e,l=2==e,u=3==e,c=4==e,p=6==e,f=5==e||p,d=t||s;return function(t,s,v){for(var h,m,g=a(t),y=i(g),b=r(s,v,3),_=o(y.length),x=0,C=n?d(t,_):l?d(t,0):void 0;_>x;x++)if((f||x in y)&&(m=b(h=y[x],x,g),e))if(n)C[x]=m;else if(m)switch(e){case 3:return!0;case 5:return h;case 6:return x;case 2:C.push(h)}else if(c)return!1;return p?-1:u||c?c:C}}},function(e,t,n){"use strict";var r=n(5),i=n(32)(1);r(r.P+r.F*!n(22)([].map,!0),"Array",{map:function(e){return i(this,e,arguments[1])}})},function(e,t,n){n(66)("replace",2,function(e,t,n){return[function(r,i){"use strict";var a=e(this),o=null==r?void 0:r[t];return void 0!==o?o.call(r,a,i):n.call(String(a),r,i)},n]})},function(e,t,n){"use strict";var r=n(36),i=n.n(r);t.default=i.a},function(e,t,n){"use strict";var r=n(162).default,i=n(155).default;e.exports={components:{Layout:r,CarbonAds:i}}},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){"use strict";n.r(t);var r=n(51),i=n.n(r);for(var a in r)"default"!==a&&function(e){n.d(t,e,function(){return r[e]})}(a);t.default=i.a},function(e,t,n){"use strict";e.exports={render:function(e){return e("div",{class:"carbon-ads"})},mounted:function(){this.load()},watch:{$route:function(e,t){e.path!==t.path&&this.$el.querySelector("#carbonads")&&(this.$el.innerHTML="",this.load())}},methods:{load:function(){var e=document.createElement("script");e.id="_carbonads_js",e.src="//cdn.carbonads.com/carbon.js?serve=CKYI5KJU&placement=grapesjscom",this.$el.appendChild(e)}}}},function(e,t,n){},function(e,t,n){},function(e,t,n){},function(e,t,n){var r,i; /* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress - * @license MIT */void 0===(i="function"==typeof(r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function i(e,t,n){return en?n:e}function a(e){return 100*(-1+e)}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=i(e,r.minimum,1),n.status=1===e?null:e;var l=n.render(!t),u=l.querySelector(r.barSelector),c=r.speed,p=r.easing;return l.offsetWidth,o(function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,function(e,t,n){var i;return(i="translate3d"===r.positionUsing?{transform:"translate3d("+a(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+a(e)+"%,0)"}:{"margin-left":a(e)+"%"}).transition="all "+t+"ms "+n,i}(e,c,p)),1===e?(s(l,{transition:"none",opacity:1}),l.offsetWidth,setTimeout(function(){s(l,{transition:"all "+c+"ms linear",opacity:0}),setTimeout(function(){n.remove(),t()},c)},c)):setTimeout(t,c)}),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout(function(){n.status&&(n.trickle(),e())},r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*i(Math.random()*t,.1,.95)),t=i(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always(function(){0==--t?(e=0,n.done()):n.set((e-t)/e)}),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var i,o=t.querySelector(r.barSelector),l=e?"-100":a(n.status||0),c=document.querySelector(r.parent);return s(o,{transition:"all 0 linear",transform:"translate3d("+l+"%,0,0)"}),r.showSpinner||(i=t.querySelector(r.spinnerSelector))&&f(i),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){c(document.documentElement,"nprogress-busy"),c(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var o=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),s=function(){var e=["Webkit","O","Moz","ms"],t={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,function(e,t){return t.toUpperCase()}),t[n]||(t[n]=function(t){var n=document.body.style;if(t in n)return t;for(var r,i=e.length,a=t.charAt(0).toUpperCase()+t.slice(1);i--;)if((r=e[i]+a)in n)return r;return t}(n))}function r(e,t,r){t=n(t),e.style[t]=r}return function(e,t){var n,i,a=arguments;if(2==a.length)for(n in t)void 0!==(i=t[n])&&t.hasOwnProperty(n)&&r(e,n,i);else r(e,a[1],a[2])}}();function l(e,t){var n="string"==typeof e?e:p(e);return n.indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;l(n,t)||(e.className=r.substring(1))}function c(e,t){var n,r=p(e);l(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n})?r.call(t,n,t,e):r)||(e.exports=i)},function(e,t){e.exports=!1},function(e,t,n){var r=n(6),i=n(4).document,a=r(i)&&r(i.createElement);e.exports=function(e){return a?i.createElement(e):{}}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var r=n(72),i=Math.min;e.exports=function(e){return e>0?i(r(e),9007199254740991):0}},function(e,t,n){var r=n(12).f,i=n(17),a=n(3)("toStringTag");e.exports=function(e,t,n){e&&!i(e=n?e:e.prototype,a)&&r(e,a,{configurable:!0,value:t})}},function(e,t,n){var r=n(14);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==r(e)?e.split(""):Object(e)}},function(e,t,n){var r=n(69)("keys"),i=n(26);e.exports=function(e){return r[e]||(r[e]=i(e))}},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t,n){"use strict";var r=n(5),i=n(32)(2);r(r.P+r.F*!n(22)([].filter,!0),"Array",{filter:function(e){return i(this,e,arguments[1])}})},function(e,t,n){"use strict";var r=n(5),i=n(78)(!1),a=[].indexOf,o=!!a&&1/[1].indexOf(1,-0)<0;r(r.P+r.F*(o||!n(22)(a)),"Array",{indexOf:function(e){return o?a.apply(this,arguments)||0:i(this,e,arguments[1])}})},function(e,t,n){"use strict";var r=n(11),i=n(16),a=n(7),o=n(20),s=n(3);e.exports=function(e,t,n){var l=s(e),u=n(o,l,""[e]),c=u[0],p=u[1];a(function(){var t={};return t[l]=function(){return 7},7!=""[e](t)})&&(i(String.prototype,e,c),r(RegExp.prototype,l,2==t?function(e,t){return p.call(e,this,t)}:function(e){return p.call(e,this)}))}},function(e,t,n){"use strict";var r=function(){var e=this.$createElement,t=this._self._c||e;return t("Layout",[t("CarbonAds",{attrs:{slot:"sidebar-top"},slot:"sidebar-top"})],1)},i=[];n.d(t,"a",function(){return r}),n.d(t,"b",function(){return i})},function(e,t,n){var r=n(14),i=n(3)("toStringTag"),a="Arguments"==r(function(){return arguments}());e.exports=function(e){var t,n,o;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(n=function(e,t){try{return e[t]}catch(e){}}(t=Object(e),i))?n:a?r(t):"Object"==(o=r(t))&&"function"==typeof t.callee?"Arguments":o}},function(e,t,n){var r=n(15),i=n(4),a=i["__core-js_shared__"]||(i["__core-js_shared__"]={});(e.exports=function(e,t){return a[e]||(a[e]=void 0!==t?t:{})})("versions",[]).push({version:r.version,mode:n(56)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(e,t,n){e.exports=!n(9)&&!n(7)(function(){return 7!=Object.defineProperty(n(57)("div"),"a",{get:function(){return 7}}).a})},function(e,t,n){var r=n(6);e.exports=function(e,t){if(!r(e))return e;var n,i;if(t&&"function"==typeof(n=e.toString)&&!r(i=n.call(e)))return i;if("function"==typeof(n=e.valueOf)&&!r(i=n.call(e)))return i;if(!t&&"function"==typeof(n=e.toString)&&!r(i=n.call(e)))return i;throw TypeError("Can't convert object to primitive value")}},function(e,t){var n=Math.ceil,r=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?r:n)(e)}},function(e,t,n){var r,i,a,o=n(13),s=n(95),l=n(74),u=n(57),c=n(4),p=c.process,f=c.setImmediate,d=c.clearImmediate,v=c.MessageChannel,h=c.Dispatch,m=0,g={},y=function(){var e=+this;if(g.hasOwnProperty(e)){var t=g[e];delete g[e],t()}},b=function(e){y.call(e.data)};f&&d||(f=function(e){for(var t=[],n=1;arguments.length>n;)t.push(arguments[n++]);return g[++m]=function(){s("function"==typeof e?e:Function(e),t)},r(m),m},d=function(e){delete g[e]},"process"==n(14)(p)?r=function(e){p.nextTick(o(y,e,1))}:h&&h.now?r=function(e){h.now(o(y,e,1))}:v?(a=(i=new v).port2,i.port1.onmessage=b,r=o(a.postMessage,a,1)):c.addEventListener&&"function"==typeof postMessage&&!c.importScripts?(r=function(e){c.postMessage(e+"","*")},c.addEventListener("message",b,!1)):r="onreadystatechange"in u("script")?function(e){l.appendChild(u("script")).onreadystatechange=function(){l.removeChild(this),y.call(e)}}:function(e){setTimeout(o(y,e,1),0)}),e.exports={set:f,clear:d}},function(e,t,n){var r=n(4).document;e.exports=r&&r.documentElement},function(e,t,n){"use strict";var r=n(25);function i(e){var t,n;this.promise=new e(function(e,r){if(void 0!==t||void 0!==n)throw TypeError("Bad Promise constructor");t=e,n=r}),this.resolve=r(t),this.reject=r(n)}e.exports.f=function(e){return new i(e)}},function(e,t,n){"use strict";var r=n(4),i=n(12),a=n(9),o=n(3)("species");e.exports=function(e){var t=r[e];a&&t&&!t[o]&&i.f(t,o,{configurable:!0,get:function(){return this}})}},function(e,t,n){var r=n(17),i=n(28),a=n(78)(!1),o=n(62)("IE_PROTO");e.exports=function(e,t){var n,s=i(e),l=0,u=[];for(n in s)n!=o&&r(s,n)&&u.push(n);for(;t.length>l;)r(s,n=t[l++])&&(~a(u,n)||u.push(n));return u}},function(e,t,n){var r=n(28),i=n(59),a=n(103);e.exports=function(e){return function(t,n,o){var s,l=r(t),u=i(l.length),c=a(o,u);if(e&&n!=n){for(;u>c;)if((s=l[c++])!=s)return!0}else for(;u>c;c++)if((e||c in l)&&l[c]===n)return e||c||0;return!e&&-1}}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t,n){var r=n(5),i=n(15),a=n(7);e.exports=function(e,t){var n=(i.Object||{})[e]||Object[e],o={};o[e]=t(n),r(r.S+r.F*a(function(){n(1)}),"Object",o)}},function(e,t,n){var r=n(14);e.exports=Array.isArray||function(e){return"Array"==r(e)}},function(e,t,n){var r=n(12).f,i=Function.prototype,a=/^\s*function ([^ (]*)/;"name"in i||n(9)&&r(i,"name",{configurable:!0,get:function(){try{return(""+this).match(a)[1]}catch(e){return""}}})},function(e,t,n){var r=n(6),i=n(14),a=n(3)("match");e.exports=function(e){var t;return r(e)&&(void 0!==(t=e[a])?!!t:"RegExp"==i(e))}},function(e,t,n){n(66)("match",1,function(e,t,n){return[function(n){"use strict";var r=e(this),i=null==n?void 0:n[t];return void 0!==i?i.call(n,r):new RegExp(n)[t](String(r))},n]})},function(e,t,n){"use strict";e.exports=function(e){e.Vue,e.options,e.router,e.siteData}},function(e,t){var n="Expected a function",r=NaN,i="[object Symbol]",a=/^\s+|\s+$/g,o=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,l=/^0o[0-7]+$/i,u=parseInt,c="object"==typeof global&&global&&global.Object===Object&&global,p="object"==typeof self&&self&&self.Object===Object&&self,f=c||p||Function("return this")(),d=Object.prototype.toString,v=Math.max,h=Math.min,m=function(){return f.Date.now()};function g(e,t,r){var i,a,o,s,l,u,c=0,p=!1,f=!1,d=!0;if("function"!=typeof e)throw new TypeError(n);function g(t){var n=i,r=a;return i=a=void 0,c=t,s=e.apply(r,n)}function _(e){var n=e-u;return void 0===u||n>=t||n<0||f&&e-c>=o}function x(){var e=m();if(_(e))return C(e);l=setTimeout(x,function(e){var n=t-(e-u);return f?h(n,o-(e-c)):n}(e))}function C(e){return l=void 0,d&&i?g(e):(i=a=void 0,s)}function w(){var e=m(),n=_(e);if(i=arguments,a=this,u=e,n){if(void 0===l)return function(e){return c=e,l=setTimeout(x,t),p?g(e):s}(u);if(f)return l=setTimeout(x,t),g(u)}return void 0===l&&(l=setTimeout(x,t)),s}return t=b(t)||0,y(r)&&(p=!!r.leading,o=(f="maxWait"in r)?v(b(r.maxWait)||0,t):o,d="trailing"in r?!!r.trailing:d),w.cancel=function(){void 0!==l&&clearTimeout(l),c=0,i=u=a=l=void 0},w.flush=function(){return void 0===l?s:C(m())},w}function y(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function b(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&d.call(e)==i}(e))return r;if(y(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=y(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(a,"");var n=s.test(e);return n||l.test(e)?u(e.slice(2),n?2:8):o.test(e)?r:+e}e.exports=function(e,t,r){var i=!0,a=!0;if("function"!=typeof e)throw new TypeError(n);return y(r)&&(i="leading"in r?!!r.leading:i,a="trailing"in r?!!r.trailing:a),g(e,t,{leading:i,maxWait:t,trailing:a})}},function(e,t,n){e.exports=n(163)},function(e,t,n){"use strict";var r,i,a,o,s=n(56),l=n(4),u=n(13),c=n(68),p=n(5),f=n(6),d=n(25),v=n(89),h=n(90),m=n(94),g=n(73).set,y=n(96)(),b=n(75),_=n(97),x=n(98),C=n(99),w=l.TypeError,k=l.process,E=k&&k.versions,S=E&&E.v8||"",$=l.Promise,O="process"==c(k),P=function(){},A=i=b.f,T=!!function(){try{var e=$.resolve(1),t=(e.constructor={})[n(3)("species")]=function(e){e(P,P)};return(O||"function"==typeof PromiseRejectionEvent)&&e.then(P)instanceof t&&0!==S.indexOf("6.6")&&-1===x.indexOf("Chrome/66")}catch(e){}}(),j=function(e){var t;return!(!f(e)||"function"!=typeof(t=e.then))&&t},L=function(e,t){if(!e._n){e._n=!0;var n=e._c;y(function(){for(var r=e._v,i=1==e._s,a=0,o=function(t){var n,a,o,s=i?t.ok:t.fail,l=t.resolve,u=t.reject,c=t.domain;try{s?(i||(2==e._h&&R(e),e._h=1),!0===s?n=r:(c&&c.enter(),n=s(r),c&&(c.exit(),o=!0)),n===t.promise?u(w("Promise-chain cycle")):(a=j(n))?a.call(n,l,u):l(n)):u(r)}catch(e){c&&!o&&c.exit(),u(e)}};n.length>a;)o(n[a++]);e._c=[],e._n=!1,t&&!e._h&&M(e)})}},M=function(e){g.call(l,function(){var t,n,r,i=e._v,a=I(e);if(a&&(t=_(function(){O?k.emit("unhandledRejection",i,e):(n=l.onunhandledrejection)?n({promise:e,reason:i}):(r=l.console)&&r.error&&r.error("Unhandled promise rejection",i)}),e._h=O||I(e)?2:1),e._a=void 0,a&&t.e)throw t.v})},I=function(e){return 1!==e._h&&0===(e._a||e._c).length},R=function(e){g.call(l,function(){var t;O?k.emit("rejectionHandled",e):(t=l.onrejectionhandled)&&t({promise:e,reason:e._v})})},D=function(e){var t=this;t._d||(t._d=!0,(t=t._w||t)._v=e,t._s=2,t._a||(t._a=t._c.slice()),L(t,!0))},U=function(e){var t,n=this;if(!n._d){n._d=!0,n=n._w||n;try{if(n===e)throw w("Promise can't be resolved itself");(t=j(e))?y(function(){var r={_w:n,_d:!1};try{t.call(e,u(U,r,1),u(D,r,1))}catch(e){D.call(r,e)}}):(n._v=e,n._s=1,L(n,!1))}catch(e){D.call({_w:n,_d:!1},e)}}};T||($=function(e){v(this,$,"Promise","_h"),d(e),r.call(this);try{e(u(U,this,1),u(D,this,1))}catch(e){D.call(this,e)}},(r=function(e){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1}).prototype=n(100)($.prototype,{then:function(e,t){var n=A(m(this,$));return n.ok="function"!=typeof e||e,n.fail="function"==typeof t&&t,n.domain=O?k.domain:void 0,this._c.push(n),this._a&&this._a.push(n),this._s&&L(this,!1),n.promise},catch:function(e){return this.then(void 0,e)}}),a=function(){var e=new r;this.promise=e,this.resolve=u(U,e,1),this.reject=u(D,e,1)},b.f=A=function(e){return e===$||e===o?new a(e):i(e)}),p(p.G+p.W+p.F*!T,{Promise:$}),n(60)($,"Promise"),n(76)("Promise"),o=n(15).Promise,p(p.S+p.F*!T,"Promise",{reject:function(e){var t=A(this);return(0,t.reject)(e),t.promise}}),p(p.S+p.F*(s||!T),"Promise",{resolve:function(e){return C(s&&this===o?$:this,e)}}),p(p.S+p.F*!(T&&n(101)(function(e){$.all(e).catch(P)})),"Promise",{all:function(e){var t=this,n=A(t),r=n.resolve,i=n.reject,a=_(function(){var n=[],a=0,o=1;h(e,!1,function(e){var s=a++,l=!1;n.push(void 0),o++,t.resolve(e).then(function(e){l||(l=!0,n[s]=e,--o||r(n))},i)}),--o||r(n)});return a.e&&i(a.v),n.promise},race:function(e){var t=this,n=A(t),r=n.reject,i=_(function(){h(e,!1,function(e){t.resolve(e).then(n.resolve,r)})});return i.e&&r(i.v),n.promise}})},function(e,t){e.exports=function(e,t,n,r){if(!(e instanceof t)||void 0!==r&&r in e)throw TypeError(n+": incorrect invocation!");return e}},function(e,t,n){var r=n(13),i=n(91),a=n(92),o=n(8),s=n(59),l=n(93),u={},c={};(t=e.exports=function(e,t,n,p,f){var d,v,h,m,g=f?function(){return e}:l(e),y=r(n,p,t?2:1),b=0;if("function"!=typeof g)throw TypeError(e+" is not iterable!");if(a(g)){for(d=s(e.length);d>b;b++)if((m=t?y(o(v=e[b])[0],v[1]):y(e[b]))===u||m===c)return m}else for(h=g.call(e);!(v=h.next()).done;)if((m=i(h,y,v.value,t))===u||m===c)return m}).BREAK=u,t.RETURN=c},function(e,t,n){var r=n(8);e.exports=function(e,t,n,i){try{return i?t(r(n)[0],n[1]):t(n)}catch(t){var a=e.return;throw void 0!==a&&r(a.call(e)),t}}},function(e,t,n){var r=n(19),i=n(3)("iterator"),a=Array.prototype;e.exports=function(e){return void 0!==e&&(r.Array===e||a[i]===e)}},function(e,t,n){var r=n(68),i=n(3)("iterator"),a=n(19);e.exports=n(15).getIteratorMethod=function(e){if(null!=e)return e[i]||e["@@iterator"]||a[r(e)]}},function(e,t,n){var r=n(8),i=n(25),a=n(3)("species");e.exports=function(e,t){var n,o=r(e).constructor;return void 0===o||null==(n=r(o)[a])?t:i(n)}},function(e,t){e.exports=function(e,t,n){var r=void 0===n;switch(t.length){case 0:return r?e():e.call(n);case 1:return r?e(t[0]):e.call(n,t[0]);case 2:return r?e(t[0],t[1]):e.call(n,t[0],t[1]);case 3:return r?e(t[0],t[1],t[2]):e.call(n,t[0],t[1],t[2]);case 4:return r?e(t[0],t[1],t[2],t[3]):e.call(n,t[0],t[1],t[2],t[3])}return e.apply(n,t)}},function(e,t,n){var r=n(4),i=n(73).set,a=r.MutationObserver||r.WebKitMutationObserver,o=r.process,s=r.Promise,l="process"==n(14)(o);e.exports=function(){var e,t,n,u=function(){var r,i;for(l&&(r=o.domain)&&r.exit();e;){i=e.fn,e=e.next;try{i()}catch(r){throw e?n():t=void 0,r}}t=void 0,r&&r.enter()};if(l)n=function(){o.nextTick(u)};else if(!a||r.navigator&&r.navigator.standalone)if(s&&s.resolve){var c=s.resolve(void 0);n=function(){c.then(u)}}else n=function(){i.call(r,u)};else{var p=!0,f=document.createTextNode("");new a(u).observe(f,{characterData:!0}),n=function(){f.data=p=!p}}return function(r){var i={fn:r,next:void 0};t&&(t.next=i),e||(e=i,n()),t=i}}},function(e,t){e.exports=function(e){try{return{e:!1,v:e()}}catch(e){return{e:!0,v:e}}}},function(e,t,n){var r=n(4).navigator;e.exports=r&&r.userAgent||""},function(e,t,n){var r=n(8),i=n(6),a=n(75);e.exports=function(e,t){if(r(e),i(t)&&t.constructor===e)return t;var n=a.f(e);return(0,n.resolve)(t),n.promise}},function(e,t,n){var r=n(16);e.exports=function(e,t,n){for(var i in t)r(e,i,t[i],n);return e}},function(e,t,n){var r=n(3)("iterator"),i=!1;try{var a=[7][r]();a.return=function(){i=!0},Array.from(a,function(){throw 2})}catch(e){}e.exports=function(e,t){if(!t&&!i)return!1;var n=!1;try{var a=[7],o=a[r]();o.next=function(){return{done:n=!0}},a[r]=function(){return o},e(a)}catch(e){}return n}},function(e,t,n){"use strict";var r=n(27),i=n(104),a=n(79),o=n(29),s=n(61),l=Object.assign;e.exports=!l||n(7)(function(){var e={},t={},n=Symbol(),r="abcdefghijklmnopqrst";return e[n]=7,r.split("").forEach(function(e){t[e]=e}),7!=l({},e)[n]||Object.keys(l({},t)).join("")!=r})?function(e,t){for(var n=o(e),l=arguments.length,u=1,c=i.f,p=a.f;l>u;)for(var f,d=s(arguments[u++]),v=c?r(d).concat(c(d)):r(d),h=v.length,m=0;h>m;)p.call(d,f=v[m++])&&(n[f]=d[f]);return n}:l},function(e,t,n){var r=n(72),i=Math.max,a=Math.min;e.exports=function(e,t){return(e=r(e))<0?i(e+t,0):a(e,t)}},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t,n){var r=n(6),i=n(106).onFreeze;n(80)("freeze",function(e){return function(t){return e&&r(t)?e(i(t)):t}})},function(e,t,n){var r=n(26)("meta"),i=n(6),a=n(17),o=n(12).f,s=0,l=Object.isExtensible||function(){return!0},u=!n(7)(function(){return l(Object.preventExtensions({}))}),c=function(e){o(e,r,{value:{i:"O"+ ++s,w:{}}})},p=e.exports={KEY:r,NEED:!1,fastKey:function(e,t){if(!i(e))return"symbol"==typeof e?e:("string"==typeof e?"S":"P")+e;if(!a(e,r)){if(!l(e))return"F";if(!t)return"E";c(e)}return e[r].i},getWeak:function(e,t){if(!a(e,r)){if(!l(e))return!0;if(!t)return!1;c(e)}return e[r].w},onFreeze:function(e){return u&&p.NEED&&l(e)&&!a(e,r)&&c(e),e}}},function(e,t,n){var r=n(3)("unscopables"),i=Array.prototype;null==i[r]&&n(11)(i,r,{}),e.exports=function(e){i[r][e]=!0}},function(e,t){e.exports=function(e,t){return{value:t,done:!!e}}},function(e,t,n){"use strict";var r=n(56),i=n(5),a=n(16),o=n(11),s=n(19),l=n(110),u=n(60),c=n(113),p=n(3)("iterator"),f=!([].keys&&"next"in[].keys()),d=function(){return this};e.exports=function(e,t,n,v,h,m,g){l(n,t,v);var y,b,_,x=function(e){if(!f&&e in E)return E[e];switch(e){case"keys":case"values":return function(){return new n(this,e)}}return function(){return new n(this,e)}},C=t+" Iterator",w="values"==h,k=!1,E=e.prototype,S=E[p]||E["@@iterator"]||h&&E[h],$=S||x(h),O=h?w?x("entries"):$:void 0,P="Array"==t&&E.entries||S;if(P&&(_=c(P.call(new e)))!==Object.prototype&&_.next&&(u(_,C,!0),r||"function"==typeof _[p]||o(_,p,d)),w&&S&&"values"!==S.name&&(k=!0,$=function(){return S.call(this)}),r&&!g||!f&&!k&&E[p]||o(E,p,$),s[t]=$,s[C]=d,h)if(y={values:w?$:x("values"),keys:m?$:x("keys"),entries:O},g)for(b in y)b in E||a(E,b,y[b]);else i(i.P+i.F*(f||k),t,y);return y}},function(e,t,n){"use strict";var r=n(111),i=n(58),a=n(60),o={};n(11)(o,n(3)("iterator"),function(){return this}),e.exports=function(e,t,n){e.prototype=r(o,{next:i(1,n)}),a(e,t+" Iterator")}},function(e,t,n){var r=n(8),i=n(112),a=n(63),o=n(62)("IE_PROTO"),s=function(){},l=function(){var e,t=n(57)("iframe"),r=a.length;for(t.style.display="none",n(74).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write(" - - + + @@ -28,6 +28,6 @@ GitHub

FAQ

Coming soon

Edit this page on GitHub
Last Updated: 7/9/2018, 12:48:25 AM
- + diff --git a/docs/getting-started.html b/docs/getting-started.html index ce4bdbbc9..8f2e42336 100644 --- a/docs/getting-started.html +++ b/docs/getting-started.html @@ -9,7 +9,7 @@ - + @@ -128,7 +128,7 @@ This isn't totally out of the ordinary, but the unique thing about Components th // use `content` for static strings, `components` string will be parsed // and transformed in Components components: '<span>HTML at some point</span>', - } + } ] } }) @@ -579,6 +579,6 @@ To complete our builder let's customize its color palette and to make it more vi Asset Manager →

- + diff --git a/docs/guides/Custom-CSS-parser.html b/docs/guides/Custom-CSS-parser.html index b1ac338cf..9d2d15f39 100644 --- a/docs/guides/Custom-CSS-parser.html +++ b/docs/guides/Custom-CSS-parser.html @@ -8,8 +8,8 @@ - - + + @@ -209,6 +209,6 @@ editor.setCu ←

- + diff --git a/docs/guides/Replace-Rich-Text-Editor.html b/docs/guides/Replace-Rich-Text-Editor.html index af220793d..6e36f6455 100644 --- a/docs/guides/Replace-Rich-Text-Editor.html +++ b/docs/guides/Replace-Rich-Text-Editor.html @@ -8,8 +8,8 @@ - - + + @@ -101,6 +101,6 @@ Obviously, each third-party library has its own APIs and can present some limita Use Custom CSS Parser →

- + diff --git a/docs/index.html b/docs/index.html index 5cef49e64..ac8bfef8d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,8 +8,8 @@ - - + + @@ -37,6 +37,6 @@ GrapesJS ships with features and tools that enable you to craft easy to use buil Getting Started →

- + diff --git a/docs/modules/Assets.html b/docs/modules/Assets.html index 77031b307..9f185c6a8 100644 --- a/docs/modules/Assets.html +++ b/docs/modules/Assets.html @@ -8,8 +8,8 @@ - - + + @@ -367,6 +367,6 @@ editor.on →

- + diff --git a/docs/modules/Blocks.html b/docs/modules/Blocks.html index 7fd90f692..cc7f58e1b 100644 --- a/docs/modules/Blocks.html +++ b/docs/modules/Blocks.html @@ -8,8 +8,8 @@ - - + + @@ -68,6 +68,6 @@ If you want to check the complete list of available Component's properties, chec Component Manager →

- + diff --git a/docs/modules/Components-js.html b/docs/modules/Components-js.html index f49b844ac..919a40752 100644 --- a/docs/modules/Components-js.html +++ b/docs/modules/Components-js.html @@ -8,8 +8,8 @@ - - + + @@ -163,6 +163,6 @@ script: funct Trait Manager →

- + diff --git a/docs/modules/Components.html b/docs/modules/Components.html index 7e36cfdb8..de1584ade 100644 --- a/docs/modules/Components.html +++ b/docs/modules/Components.html @@ -8,8 +8,8 @@ - - + + @@ -267,7 +267,7 @@ editor.on.on(`component:update:testprop`, model => console.log('Global hook: component:update:testprop', model.get('type'))); editor.on(`component:remove`, model => console.log('Global hook: component:remove', model.get('type')));

Components & JS

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

Hints

<div id="gjs">
+Components & JS
 Hints
<div id="gjs">
  ...
  <cutom-element></cutom-element>
  ...
@@ -293,13 +293,13 @@ editor.on// after all new types
   editor.render();
 </script>
-
Solution 2: put all the stuff inside a plugin (Creating plugins)
Edit this page on GitHub
Last Updated: 12/26/2018, 11:59:49 PM

+

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

Edit this page on GitHub
Last Updated: 1/13/2019, 2:18:49 PM

← Components & JS →

- + diff --git a/docs/modules/Plugins.html b/docs/modules/Plugins.html index 68d11da8a..0ce15152d 100644 --- a/docs/modules/Plugins.html +++ b/docs/modules/Plugins.html @@ -8,8 +8,8 @@ - - + + @@ -100,6 +100,6 @@ Replace Rich Text Editor →

- + diff --git a/docs/modules/Storage.html b/docs/modules/Storage.html index b240ba72d..e649f4490 100644 --- a/docs/modules/Storage.html +++ b/docs/modules/Storage.html @@ -8,8 +8,8 @@ - - + + @@ -192,6 +192,6 @@ editor.on →

- + diff --git a/docs/modules/Style-manager.html b/docs/modules/Style-manager.html index 6a57ed9d6..6adc7236e 100644 --- a/docs/modules/Style-manager.html +++ b/docs/modules/Style-manager.html @@ -8,8 +8,8 @@ - - + + @@ -27,7 +27,7 @@ Twitter GitHub -

Style Manager

Coming soon

Built-in properties

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

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

Example usage:

...
+

Style Manager

Coming soon

Built-in properties

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

float, position, text-align, display, font-family, font-weight, border, border-style, border-color, border-width, box-shadow, background-repeat, background-position, background-attachment, background-size, transition, transition-duration, transition-property, transition-timing-function, top, right, bottom, left, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, width, height, min-width, min-height, max-width, max-height, font-size, letter-spacing, line-height, text-shadow, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, perspective, transform, transform-rotate-x, transform-rotate-y, transform-rotate-z, transform-scale-x, transform-scale-y, transform-scale-z, color, background-color, background, background-image, cursor, flex-direction, flex-wrap, justify-content, align-items, align-content, order, flex-basis, flex-grow, flex-shrink, align-self, overflow, overflow-x, overflow-y

Example usage:

...
   styleManager : {
     sectors: [{
       name: 'Dimension',
@@ -38,13 +38,13 @@
     }]
   }
 ...
-
Edit this page on GitHub
Last Updated: 7/12/2018, 2:18:43 AM

+

Edit this page on GitHub
Last Updated: 1/21/2019, 2:30:30 PM

← Storage Manager →

- + diff --git a/docs/modules/Traits.html b/docs/modules/Traits.html index 0e5fe452f..a42d6833e 100644 --- a/docs/modules/Traits.html +++ b/docs/modules/Traits.html @@ -8,8 +8,8 @@ - - + + @@ -125,6 +125,6 @@ traits: [ Style Manager →

- +