<divid="app"data-server-rendered="true"><divclass="theme-container"><divclass="theme-default-content"><h1>404</h1><blockquote>How did we get here?</blockquote><ahref="/docs/"class="router-link-active">
@ -55,7 +55,7 @@ If this property is defined it will overwrite the <code>script</code> one (in ex
For example if you create a component likes this: <code>{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }</code>
For example if you create a component likes this: <code>{ removable: false, draggable: false, propagate: ['removable', 'draggable'] }</code>
and append some new component inside, the new added component will get the exact same properties indicated in the <code>propagate</code> array (and the <code>propagate</code> property itself). Default: <code>[]</code></li><li><code>toolbar</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a><<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a>>?</strong> Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
and append some new component inside, the new added component will get the exact same properties indicated in the <code>propagate</code> array (and the <code>propagate</code> property itself). Default: <code>[]</code></li><li><code>toolbar</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array"target="_blank"rel="noopener noreferrer">Array<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a><<ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a>>?</strong> Set an array of items to show up inside the toolbar when the component is selected (move, clone, delete).
By default, when <code>toolbar</code> property is falsy the editor will add automatically commands like<code>move</code>,<code>delete</code>, etc. based on its properties.</li><li><code>components</code><strong>Collection<<ahref="#component">Component</a>>?</strong> Children components. Default: <code>null</code></li></ul><h3id="init"><ahref="#init"class="header-anchor">#</a> init</h3><p>Hook method, called once the model is created</p><h3id="updated"><ahref="#updated"class="header-anchor">#</a> updated</h3><p>Hook method, called when the model has been updated (eg. updated some model's property)</p><h4id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h4><ul><li><code>property</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Property name, if triggered after some property update</li><li><code>value</code><strong>any</strong> Property value, if triggered after some property update</li><li><code>previous</code><strong>any</strong> Property previous value, if triggered after some property update</li></ul><h3id="removed"><ahref="#removed"class="header-anchor">#</a> removed</h3><p>Hook method, called once the model has been removed</p><h3id="is"><ahref="#is"class="header-anchor">#</a> is</h3><p>Check component's type</p><h4id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h4><ul><li><code>type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Component type</li></ul><h4id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h4><divclass="language-javascript extra-class"><preclass="language-javascript"><code>component<spanclass="token punctuation">.</span><spanclass="token function">is</span><spanclass="token punctuation">(</span><spanclass="token string">'image'</span><spanclass="token punctuation">)</span>
By default, when <code>toolbar</code> property is falsy the editor will add automatically commands <code>core:component-exit</code> (select parent component, added if there is one),<code>tlb-move</code> (added if<code>draggable</code>) , <code>tlb-clone</code> (added if <code>copyable</code>), <code>tlb-delete</code> (added if <code>removable</code>).</li><li><code>components</code><strong>Collection<<ahref="#component">Component</a>>?</strong> Children components. Default: <code>null</code></li></ul><h3id="init"><ahref="#init"class="header-anchor">#</a> init</h3><p>Hook method, called once the model is created</p><h3id="updated"><ahref="#updated"class="header-anchor">#</a> updated</h3><p>Hook method, called when the model has been updated (eg. updated some model's property)</p><h4id="parameters"><ahref="#parameters"class="header-anchor">#</a> Parameters</h4><ul><li><code>property</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Property name, if triggered after some property update</li><li><code>value</code><strong>any</strong> Property value, if triggered after some property update</li><li><code>previous</code><strong>any</strong> Property previous value, if triggered after some property update</li></ul><h3id="removed"><ahref="#removed"class="header-anchor">#</a> removed</h3><p>Hook method, called once the model has been removed</p><h3id="is"><ahref="#is"class="header-anchor">#</a> is</h3><p>Check component's type</p><h4id="parameters-2"><ahref="#parameters-2"class="header-anchor">#</a> Parameters</h4><ul><li><code>type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">string<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Component type</li></ul><h4id="examples"><ahref="#examples"class="header-anchor">#</a> Examples</h4><divclass="language-javascript extra-class"><preclass="language-javascript"><code>component<spanclass="token punctuation">.</span><spanclass="token function">is</span><spanclass="token punctuation">(</span><spanclass="token string">'image'</span><spanclass="token punctuation">)</span>
<spanclass="token comment">// -> false</span>
<spanclass="token comment">// -> false</span>
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h3id="props"><ahref="#props"class="header-anchor">#</a> props</h3><p>Return all the propeties</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h3id="index"><ahref="#index"class="header-anchor">#</a> index</h3><p>Get the index of the component in the parent collection.</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number"target="_blank"rel="noopener noreferrer">Number<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h3id="setdragmode"><ahref="#setdragmode"class="header-anchor">#</a> setDragMode</h3><p>Change the drag mode of the component.
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h3id="props"><ahref="#props"class="header-anchor">#</a> props</h3><p>Return all the propeties</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h3id="index"><ahref="#index"class="header-anchor">#</a> index</h3><p>Get the index of the component in the parent collection.</p><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number"target="_blank"rel="noopener noreferrer">Number<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h3id="setdragmode"><ahref="#setdragmode"class="header-anchor">#</a> setDragMode</h3><p>Change the drag mode of the component.
To get more about this feature read: <ahref="https://github.com/artf/grapesjs/issues/1936"target="_blank"rel="noopener noreferrer">https://github.com/artf/grapesjs/issues/1936<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></p><h4id="parameters-3"><ahref="#parameters-3"class="header-anchor">#</a> Parameters</h4><ul><li><code>value</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Drag mode, options: 'absolute' | 'translate'</li></ul><p>Returns <strong>this</strong></p><h3id="find"><ahref="#find"class="header-anchor">#</a> find</h3><p>Find inner components by query string.
To get more about this feature read: <ahref="https://github.com/artf/grapesjs/issues/1936"target="_blank"rel="noopener noreferrer">https://github.com/artf/grapesjs/issues/1936<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></p><h4id="parameters-3"><ahref="#parameters-3"class="header-anchor">#</a> Parameters</h4><ul><li><code>value</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Drag mode, options: 'absolute' | 'translate'</li></ul><p>Returns <strong>this</strong></p><h3id="find"><ahref="#find"class="header-anchor">#</a> find</h3><p>Find inner components by query string.
@ -166,7 +166,21 @@ This works only if the component is already rendered</p> <h4 id="parameters-35">
</code></pre></div><p>Returns <strong>this</strong></p><h3id="remove"><ahref="#remove"class="header-anchor">#</a> remove</h3><p>Remove the component</p><h4id="parameters-37"><ahref="#parameters-37"class="header-anchor">#</a> Parameters</h4><ul><li><code>opts</code> (optional, default <code>{}</code>)</li></ul><p>Returns <strong>this</strong></p><h3id="move"><ahref="#move"class="header-anchor">#</a> move</h3><p>Move the component to another destination component</p><h4id="parameters-38"><ahref="#parameters-38"class="header-anchor">#</a> Parameters</h4><ul><li><code>component</code><strong><ahref="#component">Component</a></strong> Destination component (so the current one will be appended as a child)</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Options for the append action (optional, default <code>{}</code>)</li></ul><h4id="examples-28"><ahref="#examples-28"class="header-anchor">#</a> Examples</h4><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Move the selected component on top of the wrapper</span>
</code></pre></div><p>Returns <strong>this</strong></p><h3id="remove"><ahref="#remove"class="header-anchor">#</a> remove</h3><p>Remove the component</p><h4id="parameters-37"><ahref="#parameters-37"class="header-anchor">#</a> Parameters</h4><ul><li><code>opts</code> (optional, default <code>{}</code>)</li></ul><p>Returns <strong>this</strong></p><h3id="move"><ahref="#move"class="header-anchor">#</a> move</h3><p>Move the component to another destination component</p><h4id="parameters-38"><ahref="#parameters-38"class="header-anchor">#</a> Parameters</h4><ul><li><code>component</code><strong><ahref="#component">Component</a></strong> Destination component (so the current one will be appended as a child)</li><li><code>opts</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object"target="_blank"rel="noopener noreferrer">Object<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Options for the append action (optional, default <code>{}</code>)</li></ul><h4id="examples-28"><ahref="#examples-28"class="header-anchor">#</a> Examples</h4><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Move the selected component on top of the wrapper</span>
</code></pre></div><p>Returns <strong>this</strong></p></div><footerclass="page-edit"><divclass="edit-link"><ahref="https://github.com/artf/grapesjs/edit/dev/docs/api/component.md"target="_blank"rel="noopener noreferrer">Edit this page on GitHub</a><span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></div><divclass="last-updated"><spanclass="prefix">Last Updated:</span><spanclass="time">1/27/2022, 2:45:10 PM</span></div></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">
</code></pre></div><p>Returns <strong>this</strong></p><h3id="isinstanceof"><ahref="#isinstanceof"class="header-anchor">#</a> isInstanceOf</h3><p>Check if the component is an instance of some component type.</p><h4id="parameters-39"><ahref="#parameters-39"class="header-anchor">#</a> Parameters</h4><ul><li><code>type</code><strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong> Component type</li></ul><h4id="examples-29"><ahref="#examples-29"class="header-anchor">#</a> Examples</h4><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token comment">// Add a new component type by extending an existing one</span>
</code></pre></div><p>Returns <strong><ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean"target="_blank"rel="noopener noreferrer">Boolean<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a></strong></p><h3id="ischildof"><ahref="#ischildof"class="header-anchor">#</a> isChildOf</h3><p>Check if the component is a child of some other component (or component type)</p><h4id="parameters-40"><ahref="#parameters-40"class="header-anchor">#</a> Parameters</h4><ul><li><code>component</code><strong>([<ahref="#component">Component</a>] | <ahref="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String"target="_blank"rel="noopener noreferrer">String<span><svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"focusable="false"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><spanclass="sr-only">(opens new window)</span></span></a>)</strong> Component parent to check. In case a string is passed,
the check will be performed on the component type.</li></ul><h4id="examples-30"><ahref="#examples-30"class="header-anchor">#</a> Examples</h4><divclass="language-javascript extra-class"><preclass="language-javascript"><code><spanclass="token keyword">const</span> newTextComponent <spanclass="token operator">=</span> editor<spanclass="token punctuation">.</span><spanclass="token function">getSelected</span><spanclass="token punctuation">(</span><spanclass="token punctuation">)</span><spanclass="token punctuation">.</span><spanclass="token function">append</span><spanclass="token punctuation">(</span><spanclass="token punctuation">{</span>
(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{490:function(t,e,s){"use strict";s.r(e);vara=s(44),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{470:function(t,e,s){"use strict";s.r(e);vara=s(44),o=Object(a.a)({},(function(){vart=this.$createElement,e=this._self._c||t;returne("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("h1",{attrs:{id:"api-reference"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#api-reference"}},[this._v("#")]),this._v(" API Reference")]),this._v(" "),e("p",[this._v("Here you can find the documentation about GrapesJS' APIs. Mainly, you would use them for your editor to extend the basic functionality of the framework or you could also "),e("RouterLink",{attrs:{to:"/modules/Plugins.html"}},[this._v("create a plugin")]),this._v(" and make those extensions reusable and available to others.")],1)])}),[],!1,null,null,null);e.default=o.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{464:function(e,r,t){"use strict";t.r(r);varo=t(44),i=Object(o.a)({},(function(){vare=this,r=e.$createElement,t=e._self._c||r;returnt("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"device"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#device"}},[e._v("#")]),e._v(" Device")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("name")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Device type, eg. "),t("code",[e._v("Mobile")])]),e._v(" "),t("li",[t("code",[e._v("width")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Width to set for the editor iframe, eg. '900px'")]),e._v(" "),t("li",[t("code",[e._v("height")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Height to set for the editor iframe, eg. '600px'")]),e._v(" "),t("li",[t("code",[e._v("widthMedia")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" The width which will be used in media queries, If empty the width will be used")]),e._v(" "),t("li",[t("code",[e._v("priority")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Setup the order of media queries")])])])}),[],!1,null,null,null);r.default=i.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{468:function(e,r,t){"use strict";t.r(r);varo=t(44),i=Object(o.a)({},(function(){vare=this,r=e.$createElement,t=e._self._c||r;returnt("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[t("h2",{attrs:{id:"device"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#device"}},[e._v("#")]),e._v(" Device")]),e._v(" "),t("h3",{attrs:{id:"properties"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),t("ul",[t("li",[t("code",[e._v("name")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Device type, eg. "),t("code",[e._v("Mobile")])]),e._v(" "),t("li",[t("code",[e._v("width")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Width to set for the editor iframe, eg. '900px'")]),e._v(" "),t("li",[t("code",[e._v("height")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" Height to set for the editor iframe, eg. '600px'")]),e._v(" "),t("li",[t("code",[e._v("widthMedia")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),t("OutboundLink")],1),e._v("?")]),e._v(" The width which will be used in media queries, If empty the width will be used")]),e._v(" "),t("li",[t("code",[e._v("priority")]),e._v(" "),t("strong",[t("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number",target:"_blank",rel:"noopener noreferrer"}},[e._v("Number"),t("OutboundLink")],1),e._v("?")]),e._v(" Setup the order of media queries")])])])}),[],!1,null,null,null);r.default=i.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{485:function(e,t,r){"use strict";r.r(t);vara=r(44),n=Object(a.a)({},(function(){vare=this,t=e.$createElement,r=e._self._c||t;returnr("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h2",{attrs:{id:"state"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#state"}},[e._v("#")]),e._v(" State")]),e._v(" "),r("h3",{attrs:{id:"properties"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),r("ul",[r("li",[r("code",[e._v("name")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)]),e._v(" State name, eg. "),r("code",[e._v("hover")]),e._v(", "),r("code",[e._v("nth-of-type(2n)")])]),e._v(" "),r("li",[r("code",[e._v("label")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)]),e._v(" State label, eg. "),r("code",[e._v("Hover")]),e._v(", "),r("code",[e._v("Even/Odd")])])]),e._v(" "),r("h3",{attrs:{id:"getname"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getname"}},[e._v("#")]),e._v(" getName")]),e._v(" "),r("p",[e._v("Get state name")]),e._v(" "),r("p",[e._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)])]),e._v(" "),r("h3",{attrs:{id:"getlabel"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getlabel"}},[e._v("#")]),e._v(" getLabel")]),e._v(" "),r("p",[e._v("Get state label. If label was not provided, the name will be returned.")]),e._v(" "),r("p",[e._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=n.exports}}]);
(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{488:function(e,t,r){"use strict";r.r(t);vara=r(44),n=Object(a.a)({},(function(){vare=this,t=e.$createElement,r=e._self._c||t;returnr("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[r("h2",{attrs:{id:"state"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#state"}},[e._v("#")]),e._v(" State")]),e._v(" "),r("h3",{attrs:{id:"properties"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[e._v("#")]),e._v(" Properties")]),e._v(" "),r("ul",[r("li",[r("code",[e._v("name")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)]),e._v(" State name, eg. "),r("code",[e._v("hover")]),e._v(", "),r("code",[e._v("nth-of-type(2n)")])]),e._v(" "),r("li",[r("code",[e._v("label")]),e._v(" "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)]),e._v(" State label, eg. "),r("code",[e._v("Hover")]),e._v(", "),r("code",[e._v("Even/Odd")])])]),e._v(" "),r("h3",{attrs:{id:"getname"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getname"}},[e._v("#")]),e._v(" getName")]),e._v(" "),r("p",[e._v("Get state name")]),e._v(" "),r("p",[e._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)])]),e._v(" "),r("h3",{attrs:{id:"getlabel"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#getlabel"}},[e._v("#")]),e._v(" getLabel")]),e._v(" "),r("p",[e._v("Get state label. If label was not provided, the name will be returned.")]),e._v(" "),r("p",[e._v("Returns "),r("strong",[r("a",{attrs:{href:"https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String",target:"_blank",rel:"noopener noreferrer"}},[e._v("String"),r("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=n.exports}}]);
Artur Arseniev
5 years ago