* `name`**[String][1]?** Name of the component. Will be used, for example, in Layers and badges
* `removable`**[Boolean][3]?** When `true` the component is removable from the canvas, default: `true`
* `draggable`**([Boolean][3] | [String][1] | [Function][4])?** Indicates if it's possible to drag the component inside others.
You can also specify a query string to indentify elements,
You can also specify a query string to identify elements,
eg. `'.some-class[title=Hello], [data-gjs-type=column]'` means you can drag the component only inside elements
containing `some-class` class and `Hello` title, and `column` components. In the case of a function, target and destination components are passed as arguments, return a Boolean to indicate if the drag is possible. Default: `true`
* `droppable`**([Boolean][3] | [String][1] | [Function][4])?** Indicates if it's possible to drop other components inside. You can use
Each third-party library could handle the state of the content differently and what is actually rendered as a DOM in the preview might not rapresent the final HTML output. So, by default, GrapesJS takes the `innerHTML` as the final output directly from the DOM element but is highly recommended to specify the method responsable to return the final state as HTML string (each third-party library might handle it differently).
Each third-party library could handle the state of the content differently and what is actually rendered as a DOM in the preview might not rapresent the final HTML output. So, by default, GrapesJS takes the `innerHTML` as the final output directly from the DOM element but is highly recommended to specify the method responsible to return the final state as HTML string (each third-party library might handle it differently).