<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="content"><h1>404</h1><blockquote>That's a Four-Oh-Four.</blockquote><ahref="/docs/"class="router-link-active">Take me home.</a></div></div></div>
<spanclass="token comment">// [{label: 'Heading', content: '<h1>Put your ...'}, ...]</span>
<spanclass="token comment">// [{label: 'Heading', content: '<h1>Put your ...'}, ...]</span>
</code></pre></div><p>Returns <strong>Collection</strong></p><h2id="getallvisible"><ahref="#getallvisible"aria-hidden="true"class="header-anchor">#</a> getAllVisible</h2><p>Return the visible collection, which containes blocks actually rendered</p><p>Returns <strong>Collection</strong></p><h2id="remove"><ahref="#remove"aria-hidden="true"class="header-anchor">#</a> remove</h2><p>Remove a block by id</p><h3id="parameters-3"><ahref="#parameters-3"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Block id</li></ul><p>Returns <strong>Block</strong> Removed block</p><h2id="getcategories"><ahref="#getcategories"aria-hidden="true"class="header-anchor">#</a> getCategories</h2><p>Get all available categories.
</code></pre></div><p>Returns <strong>Collection</strong></p><h2id="getallvisible"><ahref="#getallvisible"aria-hidden="true"class="header-anchor">#</a> getAllVisible</h2><p>Return the visible collection, which containes blocks actually rendered</p><p>Returns <strong>Collection</strong></p><h2id="remove"><ahref="#remove"aria-hidden="true"class="header-anchor">#</a> remove</h2><p>Remove a block by id</p><h3id="parameters-3"><ahref="#parameters-3"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>id</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Block id</li></ul><p>Returns <strong>Block</strong> Removed block</p><h2id="getcategories"><ahref="#getcategories"aria-hidden="true"class="header-anchor">#</a> getCategories</h2><p>Get all available categories.
It's possible to add categories only within blocks via 'add()' method</p><p>Returns <strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> | Collection)</strong></p><h2id="getcontainer"><ahref="#getcontainer"aria-hidden="true"class="header-anchor">#</a> getContainer</h2><p>Return the Blocks container element</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2id="render"><ahref="#render"aria-hidden="true"class="header-anchor">#</a> render</h2><p>Render blocks</p><h3id="parameters-4"><ahref="#parameters-4"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>blocks</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Blocks to render, without the argument will render
It's possible to add categories only within blocks via 'add()' method</p><p>Returns <strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> | Collection)</strong></p><h2id="getcontainer"><ahref="#getcontainer"aria-hidden="true"class="header-anchor">#</a> getContainer</h2><p>Return the Blocks container element</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/HTML/Element"target="_blank"rel="noopener noreferrer">HTMLElement<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2id="render"><ahref="#render"aria-hidden="true"class="header-anchor">#</a> render</h2><p>Render blocks</p><h3id="parameters-4"><ahref="#parameters-4"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>blocks</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Blocks to render, without the argument will render all global blocks</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Options (optional, default <code>{}</code>)
all global blocks</li></ul><h3id="examples-4"><ahref="#examples-4"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Render all blocks (inside the global collection)</span>
<ul><li><code>opts.external</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Render blocks in a new container (HTMLElement will be returned)</li><li><code>opts.ignoreCategories</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>?</strong> Render blocks without categories</li></ul></li></ul><h3id="examples-4"><ahref="#examples-4"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Render all blocks (inside the global collection)</span>
@ -117,13 +117,13 @@ This works only if the component is already rendered</p><p>Returns <strong><a hr
This works only if the component is already rendered</p><p>Returns <strong>ComponentView</strong></p><h2id="onall"><ahref="#onall"aria-hidden="true"class="header-anchor">#</a> onAll</h2><p>Execute callback function on itself and all inner components</p><h3id="parameters-17"><ahref="#parameters-17"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Callback function, the model is passed as an argument</li></ul><h3id="examples-16"><ahref="#examples-16"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>component<spanclass="token punctuation">.</span><spanclass="token function">onAll</span><spanclass="token punctuation">(</span>component <spanclass="token operator">=></span><spanclass="token punctuation">{</span>
This works only if the component is already rendered</p><p>Returns <strong>ComponentView</strong></p><h2id="onall"><ahref="#onall"aria-hidden="true"class="header-anchor">#</a> onAll</h2><p>Execute callback function on itself and all inner components</p><h3id="parameters-17"><ahref="#parameters-17"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>clb</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function"target="_blank"rel="noopener noreferrer">Function<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Callback function, the model is passed as an argument</li></ul><h3id="examples-16"><ahref="#examples-16"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code>component<spanclass="token punctuation">.</span><spanclass="token function">onAll</span><spanclass="token punctuation">(</span>component <spanclass="token operator">=></span><spanclass="token punctuation">{</span>
<spanclass="token comment">// do something with component</span>
<spanclass="token comment">// do something with component</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> selectorManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>SelectorManager<spanclass="token punctuation">;</span>
</code></pre></div><p>Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance</p><divclass="language-js extra-class"><preclass="language-js"><code><spanclass="token keyword">const</span> selectorManager <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span>SelectorManager<spanclass="token punctuation">;</span>
</code></pre></div><ul><li><ahref="#getconfig">getConfig</a></li><li><ahref="#add">add</a></li><li><ahref="#addclass">addClass</a></li><li><ahref="#get">get</a></li><li><ahref="#getAll">getAll</a></li></ul><h2id="getconfig"><ahref="#getconfig"aria-hidden="true"class="header-anchor">#</a> getConfig</h2><p>Get configuration object</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2id="add"><ahref="#add"aria-hidden="true"class="header-anchor">#</a> add</h2><p>Add a new selector to collection if it's not already exists. Class type is a default one</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Selector name</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Selector options (optional, default <code>{}</code>)
</code></pre></div><ul><li><ahref="#getconfig">getConfig</a></li><li><ahref="#add">add</a></li><li><ahref="#addclass">addClass</a></li><li><ahref="#get">get</a></li><li><ahref="#getAll">getAll</a></li></ul><h2id="getconfig"><ahref="#getconfig"aria-hidden="true"class="header-anchor">#</a> getConfig</h2><p>Get configuration object</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong></p><h2id="add"><ahref="#add"aria-hidden="true"class="header-anchor">#</a> add</h2><p>Add a new selector to collection if it's not already exists. Class type is a default one</p><h3id="parameters"><ahref="#parameters"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>name</code><strong>(<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</strong> Selector/s name</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Selector options (optional, default <code>{}</code>)
<ul><li><code>opts.label</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Label for the selector, if it's not provided the label will be the same as the name (optional, default <code>''</code>)</li><li><code>opts.type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Type of the selector. At the moment, only 'class' (1) is available (optional, default <code>1</code>)</li></ul></li></ul><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">var</span> selector <spanclass="token operator">=</span> selectorManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'selectorName'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
<ul><li><code>opts.label</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Label for the selector, if it's not provided the label will be the same as the name (optional, default <code>''</code>)</li><li><code>opts.type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></strong> Type of the selector. At the moment, only 'class' (1) is available (optional, default <code>1</code>)</li></ul></li></ul><h3id="examples"><ahref="#examples"aria-hidden="true"class="header-anchor">#</a> Examples</h3><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> selector <spanclass="token operator">=</span> selectorManager<spanclass="token punctuation">.</span><spanclass="token function">add</span><spanclass="token punctuation">(</span><spanclass="token string">'selectorName'</span><spanclass="token punctuation">)</span><spanclass="token punctuation">;</span>
</code></pre></div><p>Returns <strong>PropertyView</strong></p><h2id="settarget"><ahref="#settarget"aria-hidden="true"class="header-anchor">#</a> setTarget</h2><p>Select different target for the Style Manager.
</code></pre></div><p>Returns <strong>PropertyView</strong></p><h2id="settarget"><ahref="#settarget"aria-hidden="true"class="header-anchor">#</a> setTarget</h2><p>Select different target for the Style Manager.
It could be a Component, CSSRule, or a string of any CSS selector</p><h3id="parameters-12"><ahref="#parameters-12"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>target</code><strong>(Component | CSSRule | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</strong></li><li><code>opts</code></li></ul><p>Returns <strong>Styleable</strong> A Component or CSSRule</p></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/style_manager.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">11/3/2018, 1:41:52 PM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
It could be a Component, CSSRule, or a string of any CSS selector</p><h3id="parameters-12"><ahref="#parameters-12"aria-hidden="true"class="header-anchor">#</a> Parameters</h3><ul><li><code>target</code><strong>(Component | CSSRule | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a>)</strong></li><li><code>opts</code></li></ul><p>Returns <strong>Styleable</strong> A Component or CSSRule</p></div><divclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/style_manager.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><divclass="last-updated"><spanclass="prefix">Last Updated: </span><spanclass="time">1/5/2019, 1:17:11 AM</span></div></div><divclass="page-nav"><pclass="inner"><spanclass="prev">
@ -128,7 +128,7 @@ This isn't totally out of the ordinary, but the unique thing about Components th
<spanclass="token comment">// use `content` for static strings, `components` string will be parsed</span>
<spanclass="token comment">// use `content` for static strings, `components` string will be parsed</span>
<spanclass="token comment">// and transformed in Components</span>
<spanclass="token comment">// and transformed in Components</span>
components<spanclass="token punctuation">:</span><spanclass="token string">'<span>HTML at some point</span>'</span><spanclass="token punctuation">,</span>
components<spanclass="token punctuation">:</span><spanclass="token string">'<span>HTML at some point</span>'</span><spanclass="token punctuation">,</span>
</code></pre></div><h2id="components-js"><ahref="#components-js"aria-hidden="true"class="header-anchor">#</a> Components & JS</h2><p>If you want to know how to create Components with javascript attached (eg. counters, galleries, slideshows, etc.) check the dedicated page
</code></pre></div><h2id="components-js"><ahref="#components-js"aria-hidden="true"class="header-anchor">#</a> Components & JS</h2><p>If you want to know how to create Components with javascript attached (eg. counters, galleries, slideshows, etc.) check the dedicated page
Artur Arseniev
8 years ago