Merge branch 'dev' into feature/data-sources

docs/api.js → docs/api.mjs

@@ -1,23 +1,28 @@
 // This script uses documentation to generate API Reference files
-const path = require('path');
-const documentation = require('documentation');
-const fs = require('fs');
+import { join, basename, dirname } from 'path';
+import { build, formats } from 'documentation';
+import { fileURLToPath } from 'url';
+import { existsSync, writeFileSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
 const docRoot = __dirname;
-const srcRoot = path.join(docRoot, '../src/');
-const START_EVENTS = '{START_EVENTS}';
-const END_EVENTS = '{END_EVENTS}';
-const REPLACE_EVENTS = '{REPLACE_EVENTS}';
+const srcRoot = join(docRoot, '../src/');
+const START_EVENTS = '{START\\_EVENTS}';
+const END_EVENTS = '{END\\_EVENTS}';
+const REPLACE_EVENTS = '{REPLACE\\_EVENTS}';
 
 const log = (...args) => console.log(...args);
 
 const getEventsMdFromTypes = async (filePath) => {
-  const dirname = filePath.replace(path.basename(filePath), '');
+  const dirname = filePath.replace(basename(filePath), '');
   const typesFilePath = `${dirname}types.ts`;
 
-  if (fs.existsSync(typesFilePath)) {
-    const resTypes = await documentation
-      .build([typesFilePath], { shallow: true })
-      .then((cm) => documentation.formats.md(cm /*{ markdownToc: true }*/));
+  if (existsSync(typesFilePath)) {
+    const resTypes = await build([typesFilePath], { shallow: true }).then((cm) =>
+      formats.md(cm /*{ markdownToc: true }*/),
+    );
     const indexFrom = resTypes.indexOf(START_EVENTS) + START_EVENTS.length;
     const indexTo = resTypes.indexOf(END_EVENTS);
     // console.log(`${resTypes}`)
@@ -176,13 +181,12 @@ async function generateDocs() {
     ].map(async (file) => {
       const filePath = `${srcRoot}/${file[0]}`;
 
-      if (!fs.existsSync(filePath)) {
+      if (!existsSync(filePath)) {
         throw `File not found '${filePath}'`;
       }
 
-      return documentation
-        .build([filePath], { shallow: true })
-        .then((cm) => documentation.formats.md(cm /*{ markdownToc: true }*/))
+      return build([filePath], { shallow: true })
+        .then((cm) => formats.md(cm /*{ markdownToc: true }*/))
         .then(async (output) => {
           let addLogs = [];
           let result = output
@@ -205,7 +209,7 @@ async function generateDocs() {
             result = eventsMd ? result.replace(REPLACE_EVENTS, `## Available Events\n${eventsMd}`) : result;
           }
 
-          fs.writeFileSync(`${docRoot}/api/${file[1]}`, result);
+          writeFileSync(`${docRoot}/api/${file[1]}`, result);
           log('Created', file[1], addLogs.length ? `(${addLogs.join(', ')})` : '');
         });
     }),

docs/api/asset.md

@@ -18,7 +18,7 @@ Get asset type.
 asset.getType(); // -> 'image'
 ```
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getSrc
 
@@ -31,7 +31,7 @@ Get asset URL.
 asset.getSrc(); // -> 'https://.../image.png'
 ```
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getFilename
 
@@ -46,7 +46,7 @@ asset.getFilename(); // -> 'image.png'
 asset.getFilename(); // -> 'image'
 ```
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getExtension
 
@@ -61,6 +61,6 @@ asset.getExtension(); // -> 'png'
 asset.getExtension(); // -> ''
 ```
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

docs/api/assets.md

@@ -73,7 +73,7 @@ editor.on('asset:upload:error', (error) => { ... });
 editor.on('asset:upload:response', (res) => { ... });
 ```
 
-* `asset:custom` Event to use in case of [custom Asset Manager UI](https://grapesjs.com/docs/modules/Assets.html#customization).
+* `asset:custom` Event to use in case of [custom Asset Manager UI](https\://grapesjs.com/docs/modules/Assets.html#customization).
 
 ```javascript
 editor.on('asset:custom', ({ container, assets, ... }) => { ... });
@@ -148,7 +148,7 @@ Checks if the asset manager is open
 assetManager.isOpen(); // true | false
 ```
 
-Returns **[Boolean][15]** 
+Returns **[Boolean][15]** 
 
 ## add
 
@@ -176,7 +176,7 @@ width: 200,
 assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
 ```
 
-Returns **[Asset]** 
+Returns **[Asset]** 
 
 ## get
 
@@ -192,19 +192,19 @@ Return asset by URL
 const asset = assetManager.get('http://img.jpg');
 ```
 
-Returns **([Asset] | null)** 
+Returns **([Asset] | null)** 
 
 ## getAll
 
 Return the global collection, containing all the assets
 
-Returns **Collection<[Asset]>** 
+Returns **Collection<[Asset]>**&#x20;
 
 ## getAllVisible
 
 Return the visible collection, which contains assets actually rendered
 
-Returns **Collection<[Asset]>** 
+Returns **Collection<[Asset]>**&#x20;
 
 ## remove
 
@@ -213,7 +213,7 @@ Remove asset
 ### Parameters
 
 *   `asset` **([String][13] | [Asset])** Asset or asset URL
-*   `opts` **RemoveOptions?** 
+*   `opts` **RemoveOptions?**&#x20;
 
 ### Examples
 
@@ -230,7 +230,7 @@ Returns **[Asset]** Removed asset
 
 Return the Asset Manager Container
 
-Returns **[HTMLElement][16]** 
+Returns **[HTMLElement][16]**&#x20;
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/asset_manager/config/config.ts
 

docs/api/block.md

@@ -19,31 +19,31 @@
 
 Get block id
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getLabel
 
 Get block label
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getMedia
 
 Get block media
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getContent
 
 Get block content
 
-Returns **([Object][2] | [String][1] | [Array][6]<([Object][2] | [String][1])>)** 
+Returns **([Object][2] | [String][1] | [Array][6]<([Object][2] | [String][1])>)**&#x20;
 
 ## getCategoryLabel
 
 Get block category label
 
-Returns **[String][1]** 
+Returns **[String][1]**&#x20;
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 

docs/api/block_manager.md

@@ -72,7 +72,7 @@ editor.on('block:drag:stop', (component, block) => { ... });
 editor.on('block:category:update', ({ category, changes }) => { ... });
 ```
 
-* `block:custom` Event to use in case of [custom Block Manager UI](https://grapesjs.com/docs/modules/Blocks.html#customization).
+* `block:custom` Event to use in case of [custom Block Manager UI](https\://grapesjs.com/docs/modules/Blocks.html#customization).
 
 ```javascript
 editor.on('block:custom', ({ container, blocks, ... }) => { ... });
@@ -92,7 +92,7 @@ editor.on('block', ({ event, model, ... }) => { ... });
 
 Get configuration object
 
-Returns **[Object][2]** 
+Returns **[Object][2]** 
 
 ## add
 
@@ -135,7 +135,7 @@ console.log(JSON.stringify(block));
 // {label: 'Heading', content: '<h1>Put your ...', ...}
 ```
 
-Returns **[Block]** 
+Returns **[Block]**&#x20;
 
 ## getAll
 
@@ -149,13 +149,13 @@ console.log(JSON.stringify(blocks));
 // [{label: 'Heading', content: '<h1>Put your ...'}, ...]
 ```
 
-Returns **Collection<[Block]>** 
+Returns **Collection<[Block]>**&#x20;
 
 ## getAllVisible
 
 Return the visible collection, which containes blocks actually rendered
 
-Returns **Collection<[Block]>** 
+Returns **Collection<[Block]>**&#x20;
 
 ## remove
 
@@ -182,20 +182,20 @@ Returns **[Block]** Removed block
 Get all available categories.
 It's possible to add categories only within blocks via 'add()' method
 
-Returns **([Array][4] | Collection)** 
+Returns **([Array][4] | Collection)**&#x20;
 
 ## getContainer
 
 Return the Blocks container element
 
-Returns **[HTMLElement][5]** 
+Returns **[HTMLElement][5]**&#x20;
 
 ## getDragBlock
 
 Returns currently dragging block.
 Updated when the drag starts and cleared once it's done.
 
-Returns **([Block] | [undefined][6])** 
+Returns **([Block] | [undefined][6])**&#x20;
 
 ## getBlocksByCategory
 
@@ -203,7 +203,7 @@ Get blocks by category.
 
 ### Parameters
 
-*   `blocks` **[Array][4]\<Block>?** 
+*   `blocks` **[Array][4]\<Block>?**&#x20;
 
 ### Examples
 
@@ -219,7 +219,7 @@ const myFilteredBlocks: Block[] = [...];
 blockManager.getBlocksByCategorymyFilteredBlocks
 ```
 
-Returns **[Array][4]\<BlocksByCategory>** 
+Returns **[Array][4]\<BlocksByCategory>**&#x20;
 
 ## render
 

docs/api/canvas.md

@@ -30,7 +30,9 @@ canvas.setCoords(...);
 
 * `canvas:dragend` When a drag operation is ended, `DataTransfer` instance passed as an argument.
 
-* `canvas:dragdata` On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
By changing `result.content` you're able to customize what is dropped.
+`canvas:dragdata` On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
+By changing `result.content` you're able to customize what is dropped.
+------------------------------------------------------------------------
 
 * `canvas:drop` Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments.
 
@@ -90,7 +92,9 @@ editor.on('canvas:pointer', () => {
 });
 ```
 
-* `canvas:refresh` Canvas was refreshed to update elements on top,
like spots/tools (eg. via `editor.Canvas.refresh()` or on frame resize).
+`canvas:refresh` Canvas was refreshed to update elements on top,
+like spots/tools (eg. via `editor.Canvas.refresh()` or on frame resize).
+--------------------------------------------------------------------------
 
 ```javascript
 editor.on('canvas:refresh', (canvasRefreshOptions) => {
@@ -98,7 +102,9 @@ editor.on('canvas:refresh', (canvasRefreshOptions) => {
 });
 ```
 
-* `canvas:frame:load` Frame loaded in canvas.
The event is triggered right after iframe's `onload`.
+`canvas:frame:load` Frame loaded in canvas.
+The event is triggered right after iframe's `onload`.
+-------------------------------------------------------
 
 ```javascript
 editor.on('canvas:frame:load', ({ window }) => {
@@ -106,7 +112,9 @@ editor.on('canvas:frame:load', ({ window }) => {
 });
 ```
 
-* `canvas:frame:load:head` Frame head loaded in canvas.
The event is triggered right after iframe's finished to load the head elemenets (eg. scripts)
+`canvas:frame:load:head` Frame head loaded in canvas.
+The event is triggered right after iframe's finished to load the head elemenets (eg. scripts)
+---------------------------------------------------------------------------------------------
 
 ```javascript
 editor.on('canvas:frame:load:head', ({ window }) => {
@@ -114,7 +122,9 @@ editor.on('canvas:frame:load:head', ({ window }) => {
 });
 ```
 
-* `canvas:frame:load:body` Frame body loaded in canvas.
The event is triggered when the body is rendered with components.
+`canvas:frame:load:body` Frame body loaded in canvas.
+The event is triggered when the body is rendered with components.
+-----------------------------------------------------------------
 
 ```javascript
 editor.on('canvas:frame:load:body', ({ window }) => {
@@ -132,37 +142,37 @@ editor.on('canvas:frame:load:body', ({ window }) => {
 
 Get configuration object
 
-Returns **[Object][2]** 
+Returns **[Object][2]** 
 
 ## getElement
 
 Get the canvas element
 
-Returns **[HTMLElement][3]** 
+Returns **[HTMLElement][3]** 
 
 ## getFrameEl
 
 Get the main frame element of the canvas
 
-Returns **[HTMLIFrameElement][4]** 
+Returns **[HTMLIFrameElement][4]** 
 
 ## getWindow
 
 Get the main frame window instance
 
-Returns **[Window][5]** 
+Returns **[Window][5]** 
 
 ## getDocument
 
 Get the main frame document element
 
-Returns **HTMLDocument** 
+Returns **HTMLDocument** 
 
 ## getBody
 
 Get the main frame body element
 
-Returns **[HTMLBodyElement][6]** 
+Returns **[HTMLBodyElement][6]** 
 
 ## setCustomBadgeLabel
 
@@ -170,7 +180,7 @@ Set custom badge naming strategy
 
 ### Parameters
 
-*   `f` **[Function][7]** 
+*   `f` **[Function][7]** 
 
 ### Examples
 
@@ -184,13 +194,13 @@ canvas.setCustomBadgeLabel(function(component){
 
 Get canvas rectangular data
 
-Returns **[Object][2]** 
+Returns **[Object][2]** 
 
 ## hasFocus
 
 Check if the canvas is focused
 
-Returns **[Boolean][8]** 
+Returns **[Boolean][8]** 
 
 ## scrollTo
 
@@ -201,7 +211,7 @@ passed to it. For instance, you can scroll smoothly by using
 
 ### Parameters
 
-*   `el` **([HTMLElement][3] | [Component])** 
+*   `el` **([HTMLElement][3] | [Component])** 
 *   `opts` **[Object][2]** Options, same as options for `scrollIntoView` (optional, default `{}`)
 
     *   `opts.force` **[Boolean][8]** Force the scroll, even if the element is already visible (optional, default `false`)
@@ -230,7 +240,7 @@ Set canvas zoom value
 canvas.setZoom(50); // set zoom to 50%
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## getZoom
 
@@ -243,7 +253,7 @@ canvas.setZoom(50); // set zoom to 50%
 const zoom = canvas.getZoom(); // 50
 ```
 
-Returns **[Number][9]** 
+Returns **[Number][9]** 
 
 ## setCoords
 
@@ -261,7 +271,7 @@ Set canvas position coordinates
 canvas.setCoords(100, 100);
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## getCoords
 
@@ -281,7 +291,7 @@ Returns **[Object][2]** Object containing coordinates
 
 Get the last created Component from a drag & drop to the canvas.
 
-Returns **([Component] | [undefined][10])** 
+Returns **([Component] | [undefined][10])** 
 
 ## addSpot
 
@@ -313,7 +323,7 @@ canvas.addSpot({
 });
 ```
 
-Returns **[CanvasSpot]** 
+Returns **[CanvasSpot]** 
 
 ## getSpots
 
@@ -339,7 +349,7 @@ const allSelectSpots = canvas.getSpots({ type: 'select' });
 allSelectSpots.length; // 2
 ```
 
-Returns **[Array][11]<[CanvasSpot]>** 
+Returns **[Array][11]<[CanvasSpot]>**&#x20;
 
 ## removeSpots
 
@@ -367,7 +377,7 @@ canvas.removeSpots(filteredSpots);
 canvas.removeSpots();
 ```
 
-Returns **[Array][11]<[CanvasSpot]>** 
+Returns **[Array][11]<[CanvasSpot]>**&#x20;
 
 ## hasCustomSpot
 
@@ -392,7 +402,7 @@ canvas.hasCustomSpot('select'); // false
 canvas.hasCustomSpot('target'); // true
 ```
 
-Returns **[Boolean][8]** 
+Returns **[Boolean][8]**&#x20;
 
 ## getWorldRectToScreen
 
@@ -400,9 +410,9 @@ Transform a box rect from the world coordinate system to the screen one.
 
 ### Parameters
 
-*   `boxRect` **[Object][2]** 
+*   `boxRect` **[Object][2]**&#x20;
 
-Returns **[Object][2]** 
+Returns **[Object][2]**&#x20;
 
 ## refresh
 

docs/api/canvas_spot.md

@@ -59,7 +59,7 @@ Check the spot type.
 
 #### Parameters
 
-*   `type` **[String][2]** 
+*   `type` **[String][2]** 
 
 #### Examples
 
@@ -67,7 +67,7 @@ Check the spot type.
 canvasSpot.isType('select');
 ```
 
-Returns **[Boolean][4]** 
+Returns **[Boolean][4]** 
 
 [1]: https://grapesjs.com/docs/modules/Canvas.html#canvas-spots
 

docs/api/commands.md

@@ -32,19 +32,19 @@ editor.on('command:run', ({ id, result, options }) => {
 });
 ```
 
-* `command:run:COMMAND_ID` Triggered on run of a specific command.
+* `command:run:COMMAND\_ID` Triggered on run of a specific command.
 
 ```javascript
 editor.on('command:run:my-command', ({ result, options }) => { ... });
 ```
 
-* `command:run:before:COMMAND_ID` Triggered before the command is called.
+* `command:run:before:COMMAND\_ID` Triggered before the command is called.
 
 ```javascript
 editor.on('command:run:before:my-command', ({ options }) => { ... });
 ```
 
-* `command:abort:COMMAND_ID` Triggered when the command execution is aborted.
+* `command:abort:COMMAND\_ID` Triggered when the command execution is aborted.
 
 ```javascript
 editor.on('command:abort:my-command', ({ options }) => { ... });
@@ -65,13 +65,13 @@ editor.on('command:stop', ({ id, result, options }) => {
 });
 ```
 
-* `command:stop:COMMAND_ID` Triggered on stop of a specific command.
+* `command:stop:COMMAND\_ID` Triggered on stop of a specific command.
 
 ```javascript
 editor.on('command:run:my-command', ({ result, options }) => { ... });
 ```
 
-* `command:stop:before:COMMAND_ID` Triggered before the command is called to stop.
+* `command:stop:before:COMMAND\_ID` Triggered before the command is called to stop.
 
 ```javascript
 editor.on('command:stop:before:my-command', ({ options }) => { ... });
@@ -114,7 +114,7 @@ commands.add('myCommand', {
 commands.add('myCommand2', editor => { ... });
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## get
 
@@ -153,7 +153,7 @@ commands.extend('old-command', {
 });
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## has
 
@@ -163,13 +163,13 @@ Check if command exists
 
 *   `id` **[string][11]** Command's ID
 
-Returns **[Boolean][14]** 
+Returns **[Boolean][14]** 
 
 ## getAll
 
 Get an object containing all the commands
 
-Returns **[Object][12]** 
+Returns **[Object][12]** 
 
 ## run
 
@@ -227,7 +227,7 @@ commands.isActive(cId);
 // -> false
 ```
 
-Returns **[Boolean][14]** 
+Returns **[Boolean][14]** 
 
 ## getActive
 
@@ -240,7 +240,7 @@ console.log(commands.getActive());
 // -> { someCommand: itsLastReturn, anotherOne: ... };
 ```
 
-Returns **[Object][12]** 
+Returns **[Object][12]** 
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/commands/config/config.ts
 

docs/api/component.md

@@ -97,19 +97,19 @@ component.is('image')
 // -> false
 ```
 
-Returns **[Boolean][3]** 
+Returns **[Boolean][3]** 
 
 ## props
 
 Return all the propeties
 
-Returns **[Object][2]** 
+Returns **[Object][2]** 
 
 ## index
 
 Get the index of the component in the parent collection.
 
-Returns **[Number][9]** 
+Returns **[Number][9]** 
 
 ## setDragMode
 
@@ -120,7 +120,7 @@ To get more about this feature read: [https://github.com/GrapesJS/grapesjs/issue
 
 *   `value` **[String][1]** Drag mode, options: `'absolute'` | `'translate'` | `''`
 
-Returns **this** 
+Returns **this** 
 
 ## getDragMode
 
@@ -136,7 +136,7 @@ By setting override to specific properties, changes of those properties will be
 
 ### Parameters
 
-*   `value` **([Boolean][3] | [String][1] | [Array][5]<[String][1]>)** 
+*   `value` **([Boolean][3] | [String][1] | [Array][5]<[String][1]>)**&#x20;
 
 ### Examples
 
@@ -148,7 +148,7 @@ component.setSymbolOverride(['children', 'classes']);
 
 Get symbol override value.
 
-Returns **([Boolean][3] | [Array][5]<[String][1]>)** 
+Returns **([Boolean][3] | [Array][5]<[String][1]>)**&#x20;
 
 ## find
 
@@ -185,7 +185,27 @@ const allImages = component.findType('image');
 console.log(allImages[0]) // prints the first found component
 ```
 
-Returns **[Array][5]\<Component>** 
+Returns **[Array][5]\<Component>**&#x20;
+
+## findFirstType
+
+Find the first inner component by component type.
+If no component is found, it returns `undefined`.
+
+### Parameters
+
+*   `type` **[String][1]** Component type
+
+### Examples
+
+```javascript
+const image = component.findFirstType('image');
+if (image) {
+ console.log(image);
+}
+```
+
+Returns **(Component | [undefined][11])**&#x20;
 
 ## closest
 
@@ -203,7 +223,7 @@ component.closest('div.some-class');
 // -> Component
 ```
 
-Returns **Component** 
+Returns **Component**&#x20;
 
 ## closestType
 
@@ -233,7 +253,7 @@ component is a descendant of a given component
 
 *   `component` **Component** Component to check
 
-Returns **[Boolean][3]** 
+Returns **[Boolean][3]**&#x20;
 
 ## replaceWith
 
@@ -269,7 +289,7 @@ Update attributes of the component
 component.setAttributes({ id: 'test', 'data-key': 'value' });
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## addAttributes
 
@@ -287,7 +307,7 @@ Add attributes to the component
 component.addAttributes({ 'data-key': 'value' });
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## removeAttributes
 
@@ -306,7 +326,7 @@ component.removeAttributes('some-attr');
 component.removeAttributes(['some-attr1', 'some-attr2']);
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## getStyle
 
@@ -317,7 +337,7 @@ Get the style of the component
 *   `options` **any**  (optional, default `{}`)
 *   `optsAdd` **any**  (optional, default `{}`)
 
-Returns **[Object][2]** 
+Returns **[Object][2]**&#x20;
 
 ## setStyle
 
@@ -334,7 +354,7 @@ Set the style on the component
 component.setStyle({ color: 'red' });
 ```
 
-Returns **[Object][2]** 
+Returns **[Object][2]**&#x20;
 
 ## getAttributes
 
@@ -344,7 +364,7 @@ Return all component's attributes
 
 *   `opts` **{noClass: [boolean][3]?, noStyle: [boolean][3]?}**  (optional, default `{}`)
 
-Returns **[Object][2]** 
+Returns **[Object][2]**&#x20;
 
 ## addClass
 
@@ -407,7 +427,7 @@ Returns **[Array][5]** Array of removed selectors
 
 Returns component's classes as an array of strings
 
-Returns **[Array][5]** 
+Returns **[Array][5]**&#x20;
 
 ## append
 
@@ -455,7 +475,7 @@ console.log(collection.length);
 // -> 2
 ```
 
-Returns **(Collection | [Array][5]<[Component]>)** 
+Returns **(Collection | [Array][5]<[Component]>)**&#x20;
 
 ## getChildAt
 
@@ -474,7 +494,7 @@ component.getChildAt(0);
 component.getChildAt(1);
 ```
 
-Returns **([Component] | null)** 
+Returns **([Component] | null)**&#x20;
 
 ## getLastChild
 
@@ -486,7 +506,7 @@ If exists, returns the last child component.
 const lastChild = component.getLastChild();
 ```
 
-Returns **([Component] | null)** 
+Returns **([Component] | null)**&#x20;
 
 ## empty
 
@@ -513,13 +533,13 @@ component.parent();
 // -> Component
 ```
 
-Returns **(Component | null)** 
+Returns **(Component | null)**&#x20;
 
 ## parents
 
 Return all parents of the component.
 
-Returns **[Array][5]\<Component>** 
+Returns **[Array][5]\<Component>**&#x20;
 
 ## getTraits
 
@@ -533,7 +553,7 @@ console.log(traits);
 // [Trait, Trait, Trait, ...]
 ```
 
-Returns **[Array][5]\<Trait>** 
+Returns **[Array][5]\<Trait>**&#x20;
 
 ## setTraits
 
@@ -551,7 +571,7 @@ console.log(traits);
 // [Trait, ...]
 ```
 
-Returns **[Array][5]\<Trait>** 
+Returns **[Array][5]\<Trait>**&#x20;
 
 ## getTrait
 
@@ -588,7 +608,7 @@ component.updateTrait('title', {
 });
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## getTraitIndex
 
@@ -657,7 +677,16 @@ Get the name of the component.
 
     *   `opts.noCustom` **[Boolean][3]?** Avoid custom name assigned to the component.
 
-Returns **[String][1]** 
+Returns **[String][1]**&#x20;
+
+## setName
+
+Update component name.
+
+### Parameters
+
+*   `name` **[String][1]** New name.
+*   `opts` **SetOptions**  (optional, default `{}`)
 
 ## setName
 
@@ -672,7 +701,7 @@ Update component name.
 
 Get the icon string
 
-Returns **[String][1]** 
+Returns **[String][1]**&#x20;
 
 ## toHTML
 
@@ -730,15 +759,15 @@ Return an object containing only changed props
 
 ### Parameters
 
-*   `res` **Partial\<ComponentDefinition>** 
+*   `res` **Partial\<ComponentDefinition>**&#x20;
 
-Returns **Partial\<ComponentDefinition>** 
+Returns **Partial\<ComponentDefinition>**&#x20;
 
 ## getId
 
 Return the component id
 
-Returns **[String][1]** 
+Returns **[String][1]**&#x20;
 
 ## setId
 
@@ -746,10 +775,10 @@ Set new id on the component
 
 ### Parameters
 
-*   `id` **[String][1]** 
-*   `opts` **any?** 
+*   `id` **[String][1]**&#x20;
+*   `opts` **any?**&#x20;
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## getEl
 
@@ -760,7 +789,7 @@ This works only if the component is already rendered
 
 *   `frame` **Frame** Specific frame from which taking the element
 
-Returns **[HTMLElement][11]** 
+Returns **[HTMLElement][12]**&#x20;
 
 ## getView
 
@@ -771,7 +800,7 @@ This works only if the component is already rendered
 
 *   `frame` **Frame** Get View of a specific frame
 
-Returns **ComponentView** 
+Returns **ComponentView**&#x20;
 
 ## onAll
 
@@ -789,7 +818,7 @@ component.onAll(component => {
 })
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## forEachChild
 
@@ -815,7 +844,7 @@ Remove the component
 
 *   `opts` **any**  (optional, default `{}`)
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## move
 
@@ -834,7 +863,7 @@ const dest = editor.getWrapper();
 editor.getSelected().move(dest, { at: 0 });
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## isInstanceOf
 
@@ -855,7 +884,7 @@ newTextExt.isInstanceOf('text-ext'); // true
 newTextExt.isInstanceOf('text'); // true
 ```
 
-Returns **[Boolean][3]** 
+Returns **[Boolean][3]**&#x20;
 
 ## isChildOf
 
@@ -878,7 +907,7 @@ innerComponent.isChildOf(newTextComponent); // true
 innerComponent.isChildOf('text'); // true
 ```
 
-Returns **[Boolean][3]** 
+Returns **[Boolean][3]**&#x20;
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
@@ -900,4 +929,6 @@ Returns **[Boolean][3]**
 
 [10]: https://github.com/GrapesJS/grapesjs/issues/1936
 
-[11]: https://developer.mozilla.org/docs/Web/HTML/Element
+[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
+
+[12]: https://developer.mozilla.org/docs/Web/HTML/Element

docs/api/components.md

@@ -159,7 +159,7 @@ Remove all components
 
 *   `opts`   (optional, default `{}`)
 
-Returns **this** 
+Returns **this** 
 
 ## addType
 
@@ -171,7 +171,7 @@ Read more about this in [Define New Component][15]
 *   `type` **[string][12]** Component ID
 *   `methods` **[Object][10]** Component methods
 
-Returns **this** 
+Returns **this** 
 
 ## getType
 
@@ -190,7 +190,7 @@ Remove component type
 
 ### Parameters
 
-*   `id` **[string][12]** 
+*   `id` **[string][12]** 
 *   `type` **[string][12]** Component ID
 
 Returns **([Object][10] | [undefined][16])** Removed component type, undefined otherwise
@@ -199,7 +199,7 @@ Returns **([Object][10] | [undefined][16])** Removed component type, undefined o
 
 Return the array of all types
 
-Returns **[Array][11]** 
+Returns **[Array][11]** 
 
 ## isComponent
 
@@ -207,7 +207,7 @@ Check if the object is a \[Component].
 
 ### Parameters
 
-*   `obj` **[Object][10]** 
+*   `obj` **[Object][10]** 
 
 ### Examples
 
@@ -216,7 +216,7 @@ cmp.isComponent(editor.getSelected()); // true
 cmp.isComponent({}); // false
 ```
 
-Returns **[Boolean][13]** 
+Returns **[Boolean][13]** 
 
 ## addSymbol
 
@@ -236,7 +236,7 @@ const symbol = cmp.addSymbol(editor.getSelected());
 // cmp.getSymbolInfo(symbol).isSymbol === true;
 ```
 
-Returns **[Component]** 
+Returns **[Component]** 
 
 ## getSymbols
 
@@ -251,7 +251,7 @@ const symbols = cmp.getSymbols();
 symbols[0].remove();
 ```
 
-Returns **[Array][11]<[Component]>** 
+Returns **[Array][11]<[Component]>**&#x20;
 
 ## detachSymbol
 

docs/api/css_composer.md

@@ -107,7 +107,7 @@ const rule3 = css.getRule('.myclass1', {
 });
 ```
 
-Returns **[CssRule]** 
+Returns **[CssRule]** 
 
 ## getRules
 
@@ -128,7 +128,7 @@ console.log(rules.map(rule => rule.toCSS()))
 console.log(css.getRules())
 ```
 
-Returns **[Array][9]<[CssRule]>** 
+Returns **[Array][9]<[CssRule]>**&#x20;
 
 ## remove
 
@@ -137,7 +137,7 @@ Remove rule, by CssRule or matching selector (eg. the selector will match also a
 ### Parameters
 
 *   `rule` **([String][8] | [CssRule] | [Array][9]<[CssRule]>)** CssRule or matching selector.
-*   `opts` **any?** 
+*   `opts` **any?**&#x20;
 
 ### Examples
 
@@ -159,7 +159,7 @@ Remove all rules
 
 *   `opts`   (optional, default `{}`)
 
-Returns **this** 
+Returns **this**&#x20;
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/css_composer/config/config.ts
 

docs/api/css_rule.md

@@ -6,7 +6,7 @@
 
 ### Parameters
 
-*   `props` **CssRuleProperties** 
+*   `props` **CssRuleProperties** 
 *   `opt` **any**  (optional, default `{}`)
 
 ### Properties
@@ -35,7 +35,7 @@ const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 cssRule.getAtRule(); // "@media (min-width: 500px)"
 ```
 
-Returns **[String][3]** 
+Returns **[String][3]** 
 
 ### selectorsToString
 
@@ -55,7 +55,7 @@ cssRule.selectorsToString(); // ".class1:hover"
 cssRule.selectorsToString({ skipState: true }); // ".class1"
 ```
 
-Returns **[String][3]** 
+Returns **[String][3]** 
 
 ### getDeclaration
 
@@ -75,7 +75,7 @@ const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
 cssRule.getDeclaration() // ".class1{color:red;}"
 ```
 
-Returns **[String][3]** 
+Returns **[String][3]** 
 
 ### getDevice
 
@@ -88,7 +88,7 @@ const device = rule.getDevice();
 console.log(device?.getName());
 ```
 
-Returns **([Device] | null)** 
+Returns **([Device] | null)** 
 
 ### getState
 
@@ -101,7 +101,7 @@ const state = rule.getState();
 console.log(state?.getLabel());
 ```
 
-Returns **([State] | null)** 
+Returns **([State] | null)** 
 
 ### getComponent
 
@@ -114,7 +114,7 @@ const cmp = rule.getComponent();
 console.log(cmp?.toHTML());
 ```
 
-Returns **([Component] | null)** 
+Returns **([Component] | null)** 
 
 ### toCSS
 

docs/api/device_manager.md

@@ -82,7 +82,7 @@ console.log(JSON.stringify(device));
 // {name: 'Tablet', width: '900px'}
 ```
 
-Returns **([Device] | null)** 
+Returns **([Device] | null)** 
 
 ## remove
 
@@ -116,7 +116,7 @@ console.log(JSON.stringify(devices));
 // [{name: 'Desktop', width: ''}, ...]
 ```
 
-Returns **[Array][10]<[Device]>** 
+Returns **[Array][10]<[Device]>**&#x20;
 
 ## select
 
@@ -146,7 +146,7 @@ Get the selected device
 const selected = deviceManager.getSelected();
 ```
 
-Returns **[Device]** 
+Returns **[Device]**&#x20;
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/device_manager/config/config.ts
 

docs/api/editor.md

@@ -90,7 +90,7 @@ Returns configuration object
 
 ### Parameters
 
-*   `prop` **P?** 
+*   `prop` **P?** 
 
 Returns **any** Returns the configuration object or the value of the specified property
 
@@ -139,13 +139,13 @@ Returns **[String][18]** JS string
 
 Return the complete tree of components. Use `getWrapper` to include also the wrapper
 
-Returns **Components** 
+Returns **Components** 
 
 ## getWrapper
 
 Return the wrapper and its all components
 
-Returns **Component** 
+Returns **Component** 
 
 ## setComponents
 
@@ -168,7 +168,7 @@ editor.setComponents({
 });
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## addComponents
 
@@ -195,13 +195,13 @@ editor.addComponents({
 });
 ```
 
-Returns **[Array][19]\<Component>** 
+Returns **[Array][19]\<Component>**&#x20;
 
 ## getStyle
 
 Returns style in JSON format object
 
-Returns **[Object][16]** 
+Returns **[Object][16]**&#x20;
 
 ## setStyle
 
@@ -223,7 +223,7 @@ editor.setStyle({
 });
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## addStyle
 
@@ -246,13 +246,13 @@ Returns **[Array][19]\<CssRule>** Array of created CssRule instances
 
 Returns the last selected component, if there is one
 
-Returns **Model** 
+Returns **Model**&#x20;
 
 ## getSelectedAll
 
 Returns an array of all selected components
 
-Returns **[Array][19]** 
+Returns **[Array][19]**&#x20;
 
 ## getSelectedToStyle
 
@@ -262,7 +262,7 @@ itself and all changes will go inside its 'style' attribute. Otherwise,
 if the selected component has one or more classes, the function will
 return the corresponding CSS Rule
 
-Returns **Model** 
+Returns **Model**&#x20;
 
 ## select
 
@@ -284,7 +284,7 @@ editor.on('block:drag:stop', function(model) {
 });
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## selectAdd
 
@@ -300,7 +300,7 @@ Add component to selection
 editor.selectAdd(model);
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## selectRemove
 
@@ -316,7 +316,7 @@ Remove component from selection
 editor.selectRemove(model);
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## selectToggle
 
@@ -332,7 +332,7 @@ Toggle component selection
 editor.selectToggle(model);
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## getEditing
 
@@ -347,7 +347,7 @@ if (textComp) {
 }
 ```
 
-Returns **(Component | null)** 
+Returns **(Component | null)**&#x20;
 
 ## setDevice
 
@@ -364,7 +364,7 @@ change the canvas to the proper width
 editor.setDevice('Tablet');
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## getDevice
 
@@ -461,7 +461,7 @@ console.log(editor.getProjectData());
 // { pages: [...], styles: [...], ... }
 ```
 
-Returns **[Object][16]** 
+Returns **[Object][16]**&#x20;
 
 ## loadProjectData
 
@@ -482,14 +482,14 @@ editor.loadProjectData({ pages: [...], styles: [...], ... })
 Returns container element. The one which was indicated as 'container'
 on init method
 
-Returns **[HTMLElement][21]** 
+Returns **[HTMLElement][21]**&#x20;
 
 ## getDirtyCount
 
 Return the count of changes made to the content and not yet stored.
 This count resets at any `store()`
 
-Returns **[number][22]** 
+Returns **[number][22]**&#x20;
 
 ## clearDirtyCount
 
@@ -505,7 +505,7 @@ refresh you'll get misleading position of tools
 
 ### Parameters
 
-*   `opts` **{tools: [boolean][17]?}?** 
+*   `opts` **{tools: [boolean][17]?}?**&#x20;
 *   `options` **[Object][16]?** Options
 
     *   `options.tools` **[Boolean][17]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
@@ -573,7 +573,7 @@ editor.setCustomParserCss(css => {
 });
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## setDragMode
 
@@ -584,7 +584,7 @@ To get more about this feature read: [https://github.com/GrapesJS/grapesjs/issue
 
 *   `value` **[String][18]** Drag mode, options: 'absolute' | 'translate'
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## log
 
@@ -609,7 +609,7 @@ editor.log('Something done!', { ns: 'from-plugin-x', level: 'info' });
 // editor.on('log:info', (msg, opts) => console.info(msg, opts))
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## t
 
@@ -617,7 +617,7 @@ Translate label
 
 ### Parameters
 
-*   `args` **...[Array][19]\<any>** 
+*   `args` **...[Array][19]\<any>**&#x20;
 *   `key` **[String][18]** Label to translate
 *   `opts` **[Object][16]?** Options for the translation
 
@@ -634,7 +634,7 @@ editor.t('msg2', { params: { test: 'hello' } });
 editor.t('msg2', { params: { test: 'hello' } l: 'it' });
 ```
 
-Returns **[String][18]** 
+Returns **[String][18]**&#x20;
 
 ## on
 
@@ -645,7 +645,7 @@ Attach event
 *   `event` **[string][18]** Event name
 *   `callback` **[Function][23]** Callback function
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## once
 
@@ -656,7 +656,7 @@ Attach event and detach it after the first run
 *   `event` **[string][18]** Event name
 *   `callback` **[Function][23]** Callback function
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## off
 
@@ -667,7 +667,7 @@ Detach event
 *   `event` **[string][18]** Event name
 *   `callback` **[Function][23]** Callback function
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## trigger
 
@@ -676,9 +676,9 @@ Trigger event
 ### Parameters
 
 *   `event` **[string][18]** Event to trigger
-*   `args` **...[Array][19]\<any>** 
+*   `args` **...[Array][19]\<any>**&#x20;
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## destroy
 
@@ -688,7 +688,7 @@ Destroy the editor
 
 Render editor
 
-Returns **[HTMLElement][21]** 
+Returns **[HTMLElement][21]**&#x20;
 
 ## onReady
 
@@ -713,8 +713,8 @@ Print safe HTML by using ES6 tagged template strings.
 
 ### Parameters
 
-*   `literals` **[Array][19]<[String][18]>** 
-*   `substs` **[Array][19]<[String][18]>** 
+*   `literals` **[Array][19]<[String][18]>**&#x20;
+*   `substs` **[Array][19]<[String][18]>**&#x20;
 
 ### Examples
 
@@ -725,7 +725,7 @@ const safeStr = '<b>Hello</b>';
 const strHtml = editor.html`Escaped ${unsafeStr} unescaped $${safeStr}`;
 ```
 
-Returns **[String][18]** 
+Returns **[String][18]**&#x20;
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/editor/config/config.ts
 

docs/api/i18n.md

@@ -56,7 +56,7 @@ Update current locale
 i18n.setLocale('it');
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## getLocale
 
@@ -84,7 +84,7 @@ i18n.getMessages('en');
 // -> { hello: '...' }
 ```
 
-Returns **[Object][3]** 
+Returns **[Object][3]** 
 
 ## setMessages
 
@@ -105,7 +105,7 @@ i18n.getMessages();
 // -> { en: { msg2: 'Msg 2 up', msg3: 'Msg 3', } }
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## addMessages
 
@@ -126,7 +126,7 @@ i18n.getMessages();
 // -> { en: { msg1: 'Msg 1', msg2: 'Msg 2 up', msg3: 'Msg 3', } }
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## t
 
@@ -155,13 +155,13 @@ obj.t('msg2', { l: 'it', params: { test: 'hello' } });  // custom local
 // -> outputs `Msg hello it`
 ```
 
-Returns **[String][2]** 
+Returns **[String][2]** 
 
 ## getConfig
 
 Get configuration object
 
-Returns **[Object][3]** 
+Returns **[Object][3]** 
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/i18n/config.ts
 

docs/api/keymaps.md

@@ -50,7 +50,7 @@ keymaps.add(...);
 
 Get configuration object
 
-Returns **[Object][7]** 
+Returns **[Object][7]** 
 
 ## add
 
@@ -115,7 +115,7 @@ keymaps.getAll();
 // -> {id1: {}, id2: {}};
 ```
 
-Returns **[Object][7]** 
+Returns **[Object][7]** 
 
 ## remove
 
@@ -138,7 +138,7 @@ Returns **[Object][7]** Removed keymap
 
 Remove all binded keymaps
 
-Returns **this** 
+Returns **this** 
 
 [1]: #getconfig
 

docs/api/layer.md

@@ -4,13 +4,13 @@
 
 Get layer id.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getIndex
 
 Get layer index.
 
-Returns **[Number][2]** 
+Returns **[Number][2]** 
 
 ## getValues
 
@@ -22,19 +22,19 @@ Get layer values.
 
     *   `opts.camelCase` **[Boolean][4]?** Return property names in camelCase.
 
-Returns **[Object][3]** 
+Returns **[Object][3]** 
 
 ## getLabel
 
 Get layer label.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## isSelected
 
 Check if the layer is selected.
 
-Returns **[Boolean][4]** 
+Returns **[Boolean][4]** 
 
 ## select
 
@@ -66,7 +66,7 @@ Returns **[Object][3]** Style object
 
 Check if the property has the preview enabled for this layer.
 
-Returns **[Boolean][4]** 
+Returns **[Boolean][4]** 
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 

docs/api/layer_manager.md

@@ -58,7 +58,7 @@ const component = editor.getSelected();
 layers.setRoot(component);
 ```
 
-Returns **[Component]** 
+Returns **[Component]** 
 
 ## getRoot
 
@@ -70,7 +70,7 @@ Get the current root layer.
 const layerRoot = layers.getRoot();
 ```
 
-Returns **[Component]** 
+Returns **[Component]** 
 
 ## getComponents
 
@@ -88,7 +88,7 @@ const components = layers.getComponents(component);
 console.log(components);
 ```
 
-Returns **[Array][14]<[Component]>** 
+Returns **[Array][14]<[Component]>**&#x20;
 
 ## setOpen
 
@@ -97,7 +97,7 @@ Update the layer open state of the component.
 ### Parameters
 
 *   `component` **[Component]** Component to update
-*   `value` **[Boolean][15]** 
+*   `value` **[Boolean][15]**&#x20;
 
 ## isOpen
 
@@ -105,9 +105,9 @@ Check the layer open state of the component.
 
 ### Parameters
 
-*   `component` **[Component]** 
+*   `component` **[Component]**&#x20;
 
-Returns **[Boolean][15]** 
+Returns **[Boolean][15]**&#x20;
 
 ## setVisible
 
@@ -116,7 +116,7 @@ Update the layer visibility state of the component.
 ### Parameters
 
 *   `component` **[Component]** Component to update
-*   `value` **[Boolean][15]** 
+*   `value` **[Boolean][15]**&#x20;
 
 ## isVisible
 
@@ -124,9 +124,9 @@ Check the layer visibility state of the component.
 
 ### Parameters
 
-*   `component` **[Component]** 
+*   `component` **[Component]**&#x20;
 
-Returns **[Boolean][15]** 
+Returns **[Boolean][15]**&#x20;
 
 ## setLocked
 
@@ -135,7 +135,7 @@ Update the layer locked state of the component.
 ### Parameters
 
 *   `component` **[Component]** Component to update
-*   `value` **[Boolean][15]** 
+*   `value` **[Boolean][15]**&#x20;
 
 ## isLocked
 
@@ -143,9 +143,9 @@ Check the layer locked state of the component.
 
 ### Parameters
 
-*   `component` **[Component]** 
+*   `component` **[Component]**&#x20;
 
-Returns **[Boolean][15]** 
+Returns **[Boolean][15]**&#x20;
 
 ## setName
 
@@ -162,7 +162,7 @@ Get the layer name of the component.
 
 ### Parameters
 
-*   `component` **[Component]** 
+*   `component` **[Component]**&#x20;
 
 Returns **[String][13]** Component layer name
 

docs/api/modal_dialog.md

@@ -58,7 +58,7 @@ modal.open({
 });
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## close
 
@@ -70,7 +70,7 @@ Close the modal window
 modal.close();
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## onceClose
 
@@ -89,7 +89,7 @@ modal.onceClose(() => {
 });
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## onceOpen
 
@@ -108,7 +108,7 @@ modal.onceOpen(() => {
 });
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## isOpen
 
@@ -120,7 +120,7 @@ Checks if the modal window is open
 modal.isOpen(); // true | false
 ```
 
-Returns **[Boolean][15]** 
+Returns **[Boolean][15]** 
 
 ## setTitle
 
@@ -141,7 +141,7 @@ el.innerText =  'New title';
 modal.setTitle(el);
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## getTitle
 
@@ -153,7 +153,7 @@ Returns the title of the modal window
 modal.getTitle();
 ```
 
-Returns **([string][12] | [HTMLElement][13])** 
+Returns **([string][12] | [HTMLElement][13])** 
 
 ## setContent
 
@@ -174,7 +174,7 @@ el.innerText =  'New content';
 modal.setContent(el);
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## getContent
 
@@ -186,7 +186,7 @@ Get the content of the modal window
 modal.getContent();
 ```
 
-Returns **([string][12] | [HTMLElement][13])** 
+Returns **([string][12] | [HTMLElement][13])** 
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/modal_dialog/config/config.ts
 

docs/api/page.md

@@ -4,13 +4,13 @@
 
 Get page id
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getName
 
 Get page name
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## setName
 
@@ -36,7 +36,7 @@ Get all frames
 const arrayOfFrames = page.getAllFrames();
 ```
 
-Returns **[Array][2]\<Frame>** 
+Returns **[Array][2]\<Frame>**&#x20;
 
 ## getMainFrame
 
@@ -48,7 +48,7 @@ Get the first frame of the page (identified always as the main one)
 const mainFrame = page.getMainFrame();
 ```
 
-Returns **Frame** 
+Returns **Frame**&#x20;
 
 ## getMainComponent
 
@@ -61,7 +61,7 @@ const rootComponent = page.getMainComponent();
 console.log(rootComponent.toHTML());
 ```
 
-Returns **Component** 
+Returns **Component**&#x20;
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 

docs/api/pages.md

@@ -70,7 +70,7 @@ Get all pages
 const arrayOfPages = pageManager.getAll();
 ```
 
-Returns **[Array][1]<[Page]>** 
+Returns **[Array][1]<[Page]>**&#x20;
 
 ## add
 
@@ -91,7 +91,7 @@ const newPage = pageManager.add({
 });
 ```
 
-Returns **[Page]** 
+Returns **[Page]**&#x20;
 
 ## remove
 
@@ -127,7 +127,7 @@ Get page by id
 const somePage = pageManager.get('page-id');
 ```
 
-Returns **[Page]** 
+Returns **[Page]**&#x20;
 
 ## getMain
 
@@ -139,7 +139,7 @@ Get main page (the first one available)
 const mainPage = pageManager.getMain();
 ```
 
-Returns **[Page]** 
+Returns **[Page]**&#x20;
 
 ## getAllWrappers
 
@@ -153,7 +153,7 @@ const wrappers = pageManager.getAllWrappers();
 const allImages = wrappers.map(wrp => wrp.findType('image')).flat();
 ```
 
-Returns **[Array][1]<[Component]>** 
+Returns **[Array][1]<[Component]>**&#x20;
 
 ## select
 
@@ -173,7 +173,7 @@ const somePage = pageManager.get('page-id');
 pageManager.select(somePage);
 ```
 
-Returns **this** 
+Returns **this**&#x20;
 
 ## getSelected
 
@@ -185,7 +185,7 @@ Get the selected page
 const selectedPage = pageManager.getSelected();
 ```
 
-Returns **[Page]** 
+Returns **[Page]**&#x20;
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 

docs/api/panels.md

@@ -37,7 +37,7 @@ Returns **Collection** Collection of panel
 
 Returns panels element
 
-Returns **[HTMLElement][10]** 
+Returns **[HTMLElement][10]** 
 
 ## addPanel
 
@@ -93,7 +93,7 @@ Get panel by ID
 const myPanel = panelManager.getPanel('myPanel');
 ```
 
-Returns **(Panel | null)** 
+Returns **(Panel | null)** 
 
 ## addButton
 
@@ -141,7 +141,7 @@ Remove button from the panel
 ### Parameters
 
 *   `panelId` **[String][12]** Panel's ID
-*   `button` **any** 
+*   `button` **any** 
 *   `buttonId` **[String][12]** Button's ID
 
 ### Examples
@@ -175,7 +175,7 @@ Get button from the panel
 const button = panelManager.getButton('myPanel', 'myButton');
 ```
 
-Returns **(Button | null)** 
+Returns **(Button | null)** 
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/panels/config/config.ts
 

docs/api/parser.md

@@ -33,7 +33,7 @@ const { Parser } = editor;
 
 Get configuration object
 
-Returns **[Object][5]** 
+Returns **[Object][5]** 
 
 ## parseHtml
 

docs/api/property.md

@@ -21,7 +21,7 @@
 
 Get property id.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### getType
 
@@ -29,13 +29,13 @@ Get the property type.
 The type of the property is defined on property creation and based on its value the proper Property class is assigned.
 The default type is `base`.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### getName
 
 Get name (the CSS property name).
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### getLabel
 
@@ -47,7 +47,7 @@ Get property label.
 
     *   `opts.locale` **[Boolean][4]** Use the locale string from i18n module (optional, default `true`)
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### getValue
 
@@ -59,7 +59,7 @@ Get property value.
 
     *   `opts.noDefault` **[Boolean][4]** Avoid returning the default value (optional, default `false`)
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### hasValue
 
@@ -71,13 +71,13 @@ Check if the property has value.
 
     *   `opts.noParent` **[Boolean][4]** Ignore the value if it comes from the parent target. (optional, default `false`)
 
-Returns **[Boolean][4]** 
+Returns **[Boolean][4]** 
 
 ### hasValueParent
 
 Indicates if the current value is coming from a parent target (eg. another CSSRule).
 
-Returns **[Boolean][4]** 
+Returns **[Boolean][4]** 
 
 ### getStyle
 
@@ -97,13 +97,13 @@ console.log(property.getStyle());
 // { color: 'red' };
 ```
 
-Returns **[Object][3]** 
+Returns **[Object][3]** 
 
 ### getDefaultValue
 
 Get the default value.
 
-Returns **[string][1]** 
+Returns **[string][1]** 
 
 ### upValue
 
@@ -122,7 +122,7 @@ The change is also propagated to the selected targets (eg. CSS rule).
 
 Check if the property is visible
 
-Returns **[Boolean][4]** 
+Returns **[Boolean][4]** 
 
 ### clear
 
@@ -139,19 +139,19 @@ The change is also propagated to the selected targets (eg. the css property is c
 
 Indicates if the current value comes directly from the selected target and so can be cleared.
 
-Returns **[Boolean][4]** 
+Returns **[Boolean][4]** 
 
 ### getParent
 
 If the current property is a sub-property, this will return the parent Property.
 
-Returns **([[Property][5]] | null)** 
+Returns **([[Property][5]] | null)** 
 
 ### isFull
 
 Indicates if the property is full-width in UI.
 
-Returns **[Boolean][4]** 
+Returns **[Boolean][4]** 
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 

docs/api/property_composite.md

@@ -38,7 +38,7 @@
 
 Get properties.
 
-Returns **[Array][1]<[Property]>** 
+Returns **[Array][1]<[Property]>**&#x20;
 
 ### getProperty
 
@@ -48,7 +48,7 @@ Get property by id.
 
 *   `id` **[String][4]** Property id.
 
-Returns **([Property] | null)** 
+Returns **([Property] | null)**&#x20;
 
 ### getPropertyAt
 
@@ -56,15 +56,15 @@ Get property at index.
 
 #### Parameters
 
-*   `index` **[Number][7]** 
+*   `index` **[Number][7]**&#x20;
 
-Returns **([Property] | null)** 
+Returns **([Property] | null)**&#x20;
 
 ### isDetached
 
 Check if the property is detached.
 
-Returns **[Boolean][3]** 
+Returns **[Boolean][3]**&#x20;
 
 ### getValues
 
@@ -84,19 +84,19 @@ console.log(property.getValues());
 // { 'margin-top': '10px', 'margin-right': '20px', ... };
 ```
 
-Returns **[Object][2]** 
+Returns **[Object][2]**&#x20;
 
 ### getSeparator
 
 Get property separator.
 
-Returns **[RegExp][5]** 
+Returns **[RegExp][5]**&#x20;
 
 ### getJoin
 
 Get the join value.
 
-Returns **[String][4]** 
+Returns **[String][4]**&#x20;
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 

docs/api/property_number.md

@@ -15,31 +15,31 @@
 
 Get property units.
 
-Returns **[Array][1]<[String][2]>** 
+Returns **[Array][1]<[String][2]>**&#x20;
 
 ### getUnit
 
 Get property unit value.
 
-Returns **[String][2]** 
+Returns **[String][2]**&#x20;
 
 ### getMin
 
 Get min value.
 
-Returns **[Number][3]** 
+Returns **[Number][3]**&#x20;
 
 ### getMax
 
 Get max value.
 
-Returns **[Number][3]** 
+Returns **[Number][3]**&#x20;
 
 ### getStep
 
 Get step value.
 
-Returns **[Number][3]** 
+Returns **[Number][3]**&#x20;
 
 ### upUnit
 
@@ -53,7 +53,7 @@ The change is also propagated to the selected targets.
 
     *   `opts.noTarget` **[Boolean][5]** If `true` the change won't be propagated to selected targets. (optional, default `false`)
 
-Returns **[String][2]** 
+Returns **[String][2]**&#x20;
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 

docs/api/property_select.md

@@ -28,7 +28,7 @@ Get current selected option or by id.
 
 *   `id` **[String][3]?** Option id.
 
-Returns **([Object][2] | null)** 
+Returns **([Object][2] | null)** 
 
 ### setOptions
 

docs/api/property_stack.md

@@ -33,13 +33,13 @@
 
 Get all available layers.
 
-Returns **[Array][5]<[Layer]>** 
+Returns **[Array][5]<[Layer]>**&#x20;
 
 ### hasLayers
 
 Check if the property has layers.
 
-Returns **[Boolean][1]** 
+Returns **[Boolean][1]**&#x20;
 
 ### getLayer
 
@@ -59,13 +59,13 @@ const layers = this.getLayers();
 const layerLast = property.getLayer(layers.length - 1);
 ```
 
-Returns **([Layer] | null)** 
+Returns **([Layer] | null)**&#x20;
 
 ### getSelectedLayer
 
 Get selected layer.
 
-Returns **([Layer] | [undefined][7])** 
+Returns **([Layer] | [undefined][7])**&#x20;
 
 ### selectLayer
 
@@ -172,7 +172,7 @@ Get the layer label. The label can be customized with the `layerLabel` property.
 
 #### Parameters
 
-*   `layer` **[Layer]** 
+*   `layer` **[Layer]**&#x20;
 
 #### Examples
 
@@ -181,7 +181,7 @@ const layer = this.getLayer(1);
 const label = this.getLayerLabel(layer);
 ```
 
-Returns **[String][2]** 
+Returns **[String][2]**&#x20;
 
 ### getStyleFromLayer
 
@@ -189,7 +189,7 @@ Get style object from the layer.
 
 #### Parameters
 
-*   `layer` **[Layer]** 
+*   `layer` **[Layer]**&#x20;
 *   `opts` **[Object][8]** Options (optional, default `{}`)
 
     *   `opts.camelCase` **[Boolean][1]?** Return property names in camelCase.
@@ -204,7 +204,7 @@ If the property has `preview: false` the returned object will be empty.
 
 #### Parameters
 
-*   `layer` **[Layer]** 
+*   `layer` **[Layer]**&#x20;
 *   `opts` **[Object][8]** Options. Same of `getStyleFromLayer` (optional, default `{}`)
 
 Returns **[Object][8]** Style object
@@ -213,13 +213,13 @@ Returns **[Object][8]** Style object
 
 Get layer separator.
 
-Returns **[RegExp][3]** 
+Returns **[RegExp][3]**&#x20;
 
 ### hasEmptyValue
 
 Check if the property is with an empty value.
 
-Returns **[Boolean][1]** 
+Returns **[Boolean][1]**&#x20;
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 

docs/api/rich_text_editor.md

@@ -44,7 +44,7 @@ rte.add(...);
 
 Get configuration object
 
-Returns **[Object][9]** 
+Returns **[Object][9]** 
 
 ## add
 
@@ -130,13 +130,13 @@ const action = rte.get('bold');
 // {name: 'bold', ...}
 ```
 
-Returns **[Object][9]** 
+Returns **[Object][9]** 
 
 ## getAll
 
 Get all actions
 
-Returns **[Array][11]** 
+Returns **[Array][11]** 
 
 ## remove
 
@@ -144,7 +144,7 @@ Remove the action from the toolbar
 
 ### Parameters
 
-*   `name` **[string][10]** 
+*   `name` **[string][10]** 
 
 ### Examples
 
@@ -174,7 +174,7 @@ rte.run(action) // or rte.run('bold')
 
 Get the toolbar element
 
-Returns **[HTMLElement][12]** 
+Returns **[HTMLElement][12]** 
 
 [1]: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
 

docs/api/sector.md

@@ -17,13 +17,13 @@
 
 Get sector id.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### getName
 
 Get sector name.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### setName
 
@@ -37,7 +37,7 @@ Update sector name.
 
 Check if the sector is open
 
-Returns **[Boolean][2]** 
+Returns **[Boolean][2]** 
 
 ### setOpen
 
@@ -45,13 +45,13 @@ Update Sector open state
 
 #### Parameters
 
-*   `value` **[Boolean][2]** 
+*   `value` **[Boolean][2]** 
 
 ### isVisible
 
 Check if the sector is visible
 
-Returns **[Boolean][2]** 
+Returns **[Boolean][2]** 
 
 ### getProperties
 
@@ -64,7 +64,7 @@ Get sector properties.
     *   `opts.withValue` **[Boolean][2]** Get only properties with value (optional, default `false`)
     *   `opts.withParentValue` **[Boolean][2]** Get only properties with parent value (optional, default `false`)
 
-Returns **[Array][3]<[Property]>** 
+Returns **[Array][3]<[Property]>**&#x20;
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 

docs/api/selector.md

@@ -25,7 +25,7 @@ console.log(selector.toString());
 // -> `#my-selector`
 ```
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### getName
 
@@ -39,7 +39,7 @@ console.log(selector.getName());
 // -> `my-selector`
 ```
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### getLabel
 
@@ -53,7 +53,7 @@ console.log(selector.getLabel());
 // -> `My selector`
 ```
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### setLabel
 
@@ -76,7 +76,7 @@ console.log(selector.getLabel());
 
 Get selector active state.
 
-Returns **[Boolean][3]** 
+Returns **[Boolean][3]** 
 
 ### setActive
 

docs/api/selector_manager.md

@@ -85,7 +85,7 @@ sm.add(...);
 
 Get configuration object
 
-Returns **[Object][18]** 
+Returns **[Object][18]** 
 
 ## add
 
@@ -107,7 +107,7 @@ const selector = selectorManager.add('.my-class');
 console.log(selector.toString()) // `.my-class`
 ```
 
-Returns **[Selector]** 
+Returns **[Selector]** 
 
 ## get
 
@@ -116,7 +116,7 @@ Get the selector by its name/type
 ### Parameters
 
 *   `name` **[String][19]** Selector name or string identifier
-*   `type` **[number][20]?** 
+*   `type` **[number][20]?** 
 
 ### Examples
 
@@ -126,7 +126,7 @@ const selector = selectorManager.get('.my-class');
 const selectorId = selectorManager.get('#my-id');
 ```
 
-Returns **([Selector] | null)** 
+Returns **([Selector] | null)** 
 
 ## remove
 
@@ -135,7 +135,7 @@ Remove Selector.
 ### Parameters
 
 *   `selector` **([String][19] | [Selector])** Selector instance or Selector string identifier
-*   `opts` **RemoveOptions?** 
+*   `opts` **RemoveOptions?** 
 
 ### Examples
 
@@ -155,7 +155,7 @@ Rename Selector.
 
 *   `selector` **[Selector]** Selector to update.
 *   `name` **[String][19]** New name for the selector.
-*   `opts` **SetOptions?** 
+*   `opts` **SetOptions?** 
 
 ### Examples
 
@@ -181,19 +181,19 @@ Change the selector state
 selectorManager.setState('hover');
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## getState
 
 Get the current selector state value
 
-Returns **[String][19]** 
+Returns **[String][19]** 
 
 ## getStates
 
 Get states
 
-Returns **[Array][21]<[State]>** 
+Returns **[Array][21]<[State]>**&#x20;
 
 ## setStates
 
@@ -202,7 +202,7 @@ Set a new collection of states
 ### Parameters
 
 *   `states` **[Array][21]<[Object][18]>** Array of new states
-*   `opts` **any?** 
+*   `opts` **any?**&#x20;
 
 ### Examples
 
@@ -213,7 +213,7 @@ const states = selectorManager.setStates([
 ]);
 ```
 
-Returns **[Array][21]<[State]>** 
+Returns **[Array][21]<[State]>**&#x20;
 
 ## getSelected
 
@@ -226,7 +226,7 @@ const selected = selectorManager.getSelected();
 console.log(selected.map(s => s.toString()))
 ```
 
-Returns **[Array][21]<[Selector]>** 
+Returns **[Array][21]<[Selector]>**&#x20;
 
 ## getSelectedAll
 
@@ -239,7 +239,7 @@ const selected = selectorManager.getSelectedAll();
 console.log(selected.map(s => s.toString()))
 ```
 
-Returns **[Array][21]<[Selector]>** 
+Returns **[Array][21]<[Selector]>**&#x20;
 
 ## addSelected
 
@@ -280,7 +280,7 @@ const targetsToStyle = selectorManager.getSelectedTargets();
 console.log(targetsToStyle.map(target => target.getSelectorsString()))
 ```
 
-Returns **[Array][21]<([Component] | [CssRule])>** 
+Returns **[Array][21]<([Component] | [CssRule])>**&#x20;
 
 ## setComponentFirst
 
@@ -290,19 +290,19 @@ of selectors (which would change styles on all components with those classes).
 
 ### Parameters
 
-*   `value` **[Boolean][22]** 
+*   `value` **[Boolean][22]**&#x20;
 
 ## getComponentFirst
 
 Get the value of component-first option.
 
-Returns **[Boolean][22]** 
+Returns **[Boolean][22]**&#x20;
 
 ## getAll
 
 Get all selectors
 
-Returns **Collection<[Selector]>** 
+Returns **Collection<[Selector]>**&#x20;
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/selector_manager/config/config.ts
 

docs/api/state.md

@@ -13,12 +13,12 @@
 
 Get state name
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ### getLabel
 
 Get state label. If label was not provided, the name will be returned.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

docs/api/storage_manager.md

@@ -32,7 +32,9 @@ editor.on('storage:start', (type) => {
 });
 ```
 
-* `storage:start:store` Storage store request start.
The project JSON object to store is passed as an argument (which you can edit).
+`storage:start:store` Storage store request start.
+The project JSON object to store is passed as an argument (which you can edit).
+-------------------------------------------------------------------------------
 
 ```javascript
 editor.on('storage:start:store', (data) => {
@@ -48,7 +50,9 @@ editor.on('storage:start:load', () => {
 });
 ```
 
-* `storage:load` Storage loaded the project.
The loaded project is passed as an argument.
+`storage:load` Storage loaded the project.
+The loaded project is passed as an argument.
+--------------------------------------------
 
 ```javascript
 editor.on('storage:load', (data, res) => {
@@ -56,7 +60,9 @@ editor.on('storage:load', (data, res) => {
 });
 ```
 
-* `storage:store` Storage stored the project.
The stored project is passed as an argument.
+`storage:store` Storage stored the project.
+The stored project is passed as an argument.
+--------------------------------------------
 
 ```javascript
 editor.on('storage:store', (data, res) => {
@@ -64,7 +70,9 @@ editor.on('storage:store', (data, res) => {
 });
 ```
 
-* `storage:after` Storage request completed.
Triggered right after `storage:load`/`storage:store`.
+`storage:after` Storage request completed.
+Triggered right after `storage:load`/`storage:store`.
+---------------------------------------------------------
 
 ```javascript
 editor.on('storage:after', (type) => {
@@ -72,7 +80,9 @@ editor.on('storage:after', (type) => {
 });
 ```
 
-* `storage:end` Storage request ended.
This event triggers also in case of errors.
+`storage:end` Storage request ended.
+This event triggers also in case of errors.
+-------------------------------------------
 
 ```javascript
 editor.on('storage:end', (type) => {
@@ -80,7 +90,9 @@ editor.on('storage:end', (type) => {
 });
 ```
 
-* `storage:end:store` Storage store request ended.
This event triggers also in case of errors.
+`storage:end:store` Storage store request ended.
+This event triggers also in case of errors.
+-------------------------------------------
 
 ```javascript
 editor.on('storage:end:store', () => {
@@ -88,7 +100,9 @@ editor.on('storage:end:store', () => {
 });
 ```
 
-* `storage:end:load` Storage load request ended.
This event triggers also in case of errors.
+`storage:end:load` Storage load request ended.
+This event triggers also in case of errors.
+-------------------------------------------
 
 ```javascript
 editor.on('storage:end:load', () => {
@@ -141,13 +155,13 @@ editor.on('storage:error:load', (err) => {
 
 Get configuration object
 
-Returns **[Object][16]** 
+Returns **[Object][16]** 
 
 ## isAutosave
 
 Check if autosave is enabled.
 
-Returns **[Boolean][17]** 
+Returns **[Boolean][17]** 
 
 ## setAutosave
 
@@ -155,13 +169,13 @@ Set autosave value.
 
 ### Parameters
 
-*   `value` **[Boolean][17]** 
+*   `value` **[Boolean][17]** 
 
 ## getStepsBeforeSave
 
 Returns number of steps required before trigger autosave.
 
-Returns **[Number][18]** 
+Returns **[Number][18]** 
 
 ## setStepsBeforeSave
 
@@ -169,7 +183,7 @@ Set steps required before trigger autosave.
 
 ### Parameters
 
-*   `value` **[Number][18]** 
+*   `value` **[Number][18]** 
 
 ## add
 
@@ -204,19 +218,19 @@ Return storage by type.
 
 *   `type` **[String][19]** Storage type
 
-Returns **([Object][16] | null)** 
+Returns **([Object][16] | null)** 
 
 ## getStorages
 
 Get all storages.
 
-Returns **[Object][16]** 
+Returns **[Object][16]** 
 
 ## getCurrent
 
 Get current storage type.
 
-Returns **[String][19]** 
+Returns **[String][19]** 
 
 ## setCurrent
 
@@ -234,7 +248,7 @@ Get storage options by type.
 
 *   `type` **[String][19]** Storage type
 
-Returns **[Object][16]** 
+Returns **[Object][16]** 
 
 ## store
 

docs/api/style_manager.md

@@ -77,7 +77,7 @@ styleManager.addSector(...);
 
 Get configuration object
 
-Returns **[Object][22]** 
+Returns **[Object][22]** 
 
 ## addSector
 
@@ -119,7 +119,7 @@ Get sector by id.
 const sector = styleManager.getSector('mySector');
 ```
 
-Returns **([Sector] | null)** 
+Returns **([Sector] | null)** 
 
 ## getSectors
 
@@ -137,7 +137,7 @@ Get all sectors.
 const sectors = styleManager.getSectors();
 ```
 
-Returns **[Array][27]<[Sector]>** 
+Returns **[Array][27]<[Sector]>**&#x20;
 
 ## removeSector
 
@@ -199,7 +199,7 @@ Get the property.
 const property = styleManager.getProperty('mySector', 'min-height');
 ```
 
-Returns **([Property] | [undefined][29])** 
+Returns **([Property] | [undefined][29])**&#x20;
 
 ## getProperties
 
@@ -241,7 +241,7 @@ The target could be a Component, CSSRule, or a CSS selector string.
 
 ### Parameters
 
-*   `target` **([Component] | [CSSRule] | [String][23])** 
+*   `target` **([Component] | [CSSRule] | [String][23])**&#x20;
 *   `opts` **{stylable: [boolean][26]?, component: Component?}**  (optional, default `{}`)
 
 ### Examples
@@ -263,19 +263,19 @@ Returns **[Array][27]<([Component] | [CSSRule])>** Array containing selected Com
 Get the last selected target.
 By default, the Style Manager shows styles of the last selected target.
 
-Returns **([Component] | [CSSRule] | null)** 
+Returns **([Component] | [CSSRule] | null)**&#x20;
 
 ## getSelectedAll
 
 Get the array of selected targets.
 
-Returns **[Array][27]<([Component] | [CSSRule])>** 
+Returns **[Array][27]<([Component] | [CSSRule])>**&#x20;
 
 ## getSelectedParents
 
 Get parent rules of the last selected target.
 
-Returns **[Array][27]<[CSSRule]>** 
+Returns **[Array][27]<[CSSRule]>**&#x20;
 
 ## addStyleTargets
 
@@ -312,7 +312,7 @@ Returns **([Object][22] | null)** Property definition.
 
 Get all the available built-in property definitions.
 
-Returns **[Object][22]** 
+Returns **[Object][22]**&#x20;
 
 ## addBuiltIn
 
@@ -386,7 +386,7 @@ Returns **[Object][22]** Type definition
 
 Get all types
 
-Returns **[Array][27]** 
+Returns **[Array][27]**&#x20;
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/style_manager/config/config.ts
 

docs/api/trait.md

@@ -17,19 +17,19 @@
 
 Get the trait id.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getType
 
 Get the trait type.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getName
 
 Get the trait name.
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getLabel
 
@@ -41,7 +41,7 @@ Get the trait label.
 
     *   `opts.locale` **[Boolean][2]** Use the locale string from i18n module. (optional, default `true`)
 
-Returns **[String][1]** 
+Returns **[String][1]** 
 
 ## getValue
 
@@ -54,7 +54,7 @@ The value is taken from component attributes by default or from properties if th
 
     *   `opts.useType` **[Boolean][2]** Get the value based on type (eg. the checkbox will always return a boolean). (optional, default `false`)
 
-Returns **any** 
+Returns **any** 
 
 ## setValue
 
@@ -76,7 +76,7 @@ Get default value.
 
 Get trait options.
 
-Returns **[Array][4]\<TraitOption>** 
+Returns **[Array][4]\<TraitOption>**&#x20;
 
 ## getOption
 
@@ -86,7 +86,7 @@ Get current selected option or by id.
 
 *   `id` **[String][1]?** Option id.
 
-Returns **([Object][3] | null)** 
+Returns **([Object][3] | null)**&#x20;
 
 ## getOptionId
 
@@ -121,7 +121,7 @@ Get category label.
 
     *   `opts.locale` **[Boolean][2]** Use the locale string from i18n module. (optional, default `true`)
 
-Returns **[String][1]** 
+Returns **[String][1]**&#x20;
 
 ## runCommand
 

docs/api/trait_manager.md

@@ -42,7 +42,7 @@ editor.on('trait:value', ({ trait, component, value }) => { ... });
 editor.on('trait:category:update', ({ category, changes }) => { ... });
 ```
 
-* `trait:custom` Event to use in case of [custom Trait Manager UI](https://grapesjs.com/docs/modules/Traits.html#custom-trait-manager).
+* `trait:custom` Event to use in case of [custom Trait Manager UI](https\://grapesjs.com/docs/modules/Traits.html#custom-trait-manager).
 
 ```javascript
 editor.on('trait:custom', ({ container }) => { ... });
@@ -62,7 +62,7 @@ editor.on('trait', ({ event, model, ... }) => { ... });
 
 Get configuration object
 
-Returns **[Object][2]** 
+Returns **[Object][2]** 
 
 ## select
 
@@ -70,7 +70,7 @@ Select traits from a component.
 
 ### Parameters
 
-*   `component` **[Component]** 
+*   `component` **[Component]** 
 
 ### Examples
 
@@ -88,7 +88,7 @@ Get trait categories from the currently selected component.
 const traitCategories: Category[] = tm.getCategories();
 ```
 
-Returns **[Array][3]\<Category>** 
+Returns **[Array][3]\<Category>**&#x20;
 
 ## getTraits
 
@@ -100,7 +100,7 @@ Get traits from the currently selected component.
 const currentTraits: Trait[] = tm.getTraits();
 ```
 
-Returns **[Array][3]<[Trait]>** 
+Returns **[Array][3]<[Trait]>**&#x20;
 
 ## getTraitsByCategory
 
@@ -108,7 +108,7 @@ Get traits by category from the currently selected component.
 
 ### Parameters
 
-*   `traits` **[Array][3]\<Trait>?** 
+*   `traits` **[Array][3]\<Trait>?**&#x20;
 
 ### Examples
 
@@ -124,7 +124,7 @@ const myFilteredTraits: Trait[] = [...];
 tm.getTraitsByCategory(myFilteredTraits);
 ```
 
-Returns **[Array][3]\<TraitsByCategory>** 
+Returns **[Array][3]\<TraitsByCategory>**&#x20;
 
 ## getComponent
 

docs/api/undo_manager.md

@@ -28,7 +28,7 @@ const um = editor.UndoManager;
 
 Get configuration object
 
-Returns **[Object][15]** 
+Returns **[Object][15]** 
 
 ## add
 
@@ -45,7 +45,7 @@ Note: New Components and CSSRules will be added automatically
 um.add(someModelOrCollection);
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## remove
 
@@ -61,7 +61,7 @@ Remove and stop tracking the entity (Model/Collection)
 um.remove(someModelOrCollection);
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## removeAll
 
@@ -73,7 +73,7 @@ Remove all entities
 um.removeAll();
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## start
 
@@ -85,7 +85,7 @@ Start/resume tracking changes
 um.start();
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## stop
 
@@ -97,7 +97,7 @@ Stop tracking changes
 um.stop();
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## undo
 
@@ -113,7 +113,7 @@ Undo last change
 um.undo();
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## undoAll
 
@@ -125,7 +125,7 @@ Undo all changes
 um.undoAll();
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## redo
 
@@ -141,7 +141,7 @@ Redo last change
 um.redo();
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## redoAll
 
@@ -153,7 +153,7 @@ Redo all changes
 um.redoAll();
 ```
 
-Returns **this** 
+Returns **this** 
 
 ## hasUndo
 
@@ -165,7 +165,7 @@ Checks if exists an available undo
 um.hasUndo();
 ```
 
-Returns **[Boolean][16]** 
+Returns **[Boolean][16]** 
 
 ## hasRedo
 
@@ -177,7 +177,7 @@ Checks if exists an available redo
 um.hasRedo();
 ```
 
-Returns **[Boolean][16]** 
+Returns **[Boolean][16]** 
 
 ## isRegistered
 
@@ -186,10 +186,10 @@ Note: New Components and CSSRules will be added automatically
 
 ### Parameters
 
-*   `obj` **any** 
+*   `obj` **any** 
 *   `entity` **(Model | Collection)** Entity to track
 
-Returns **[Boolean][16]** 
+Returns **[Boolean][16]** 
 
 ## getStack
 
@@ -202,7 +202,7 @@ const stack = um.getStack();
 stack.each(item => ...);
 ```
 
-Returns **Collection** 
+Returns **Collection** 
 
 ## skip
 
@@ -230,7 +230,7 @@ Clear the stack
 um.clear();
 ```
 
-Returns **this** 
+Returns **this** 
 
 [1]: #getconfig
 

package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "@types/backbone": "1.4.15",
     "backbone": "1.4.1",
-    "backbone-undo": "0.2.5",
+    "backbone-undo": "0.2.6",
     "codemirror": "5.63.0",
     "codemirror-formatting": "1.0.0",
     "promise-polyfill": "8.1.3",
@@ -48,7 +48,7 @@
     "@typescript-eslint/parser": "8.0.1",
     "@vuepress/plugin-google-analytics": "1.8.2",
     "@vuepress/types": "1.9.10",
-    "documentation": "13.2.5",
+    "documentation": "14.0.3",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jest": "28.8.0",
@@ -64,7 +64,7 @@
     "sass": "1.42.1",
     "typescript": "5.5.4",
     "vuepress": "1.9.10",
-    "whatwg-fetch": "3.6.2"
+    "whatwg-fetch": "3.6.20"
   },
   "resolutions": {
     "backbone-undo/backbone": "1.3.3",
@@ -83,7 +83,7 @@
   ],
   "scripts": {
     "docs": "vuepress dev docs",
-    "docs:api": "node docs/api.js",
+    "docs:api": "node docs/api.mjs",
     "docs:build-vp": "vuepress build docs",
     "docs:build": "npm run docs:api && npm run docs:build-vp",
     "docs:deploy": "docs/deploy.sh",

src/common/index.ts

@@ -1,4 +1,5 @@
 import Backbone from 'backbone';
+import { HTMLParserOptions } from '../parser/config/config';
 export { default as $ } from '../utils/cash-dom';
 
 interface NOOP {}
@@ -13,6 +14,8 @@ export type DisableOptions = { fromMove?: boolean };
 
 export type LocaleOptions = { locale?: boolean };
 
+export type WithHTMLParserOptions = { parserOptions?: HTMLParserOptions };
+
 export type RemoveOptions = Backbone.Silenceable;
 
 export type EventHandler = Backbone.EventHandler;

src/dom_components/model/Component.ts

@@ -508,6 +508,21 @@ export default class Component extends StyleableModel<ComponentProperties> {
     return result;
   }
 
+  /**
+   * Find the first inner component by component type.
+   * If no component is found, it returns `undefined`.
+   * @param {String} type Component type
+   * @returns {Component|undefined}
+   * @example
+   * const image = component.findFirstType('image');
+   * if (image) {
+   *  console.log(image);
+   * }
+   */
+  findFirstType(type: string): Component | undefined {
+    return this.findType(type).at(0);
+  }
+
   /**
    * Find the closest parent component by query string.
    * **ATTENTION**: this method works only with already rendered component

src/dom_components/model/Components.ts

@@ -1,6 +1,6 @@
 import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, keys } from 'underscore';
 import Component from './Component';
-import { AddOptions, Collection, OptionAsDocument } from '../../common';
+import { AddOptions, Collection } from '../../common';
 import { DomComponentsConfig } from '../config/config';
 import EditorModel from '../../editor/model/Editor';
 import ComponentManager from '..';
@@ -15,7 +15,7 @@ import {
 } from './types';
 import ComponentText from './ComponentText';
 import ComponentWrapper from './ComponentWrapper';
-import { ComponentsEvents } from '../types';
+import { ComponentsEvents, ParseStringOptions } from '../types';
 import { isSymbolInstance, isSymbolRoot, updateSymbolComps } from './SymbolUtils';
 
 export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => {
@@ -252,11 +252,11 @@ Component> {
     return new model(attrs, options) as Component;
   }
 
-  parseString(value: string, opt: AddOptions & OptionAsDocument & { temporary?: boolean; keepIds?: string[] } = {}) {
+  parseString(value: string, opt: ParseStringOptions = {}) {
     const { em, domc, parent } = this;
     const asDocument = opt.asDocument && parent?.is('wrapper');
     const cssc = em.Css;
-    const parsed = em.Parser.parseHtml(value, { asDocument });
+    const parsed = em.Parser.parseHtml(value, { asDocument, ...opt.parserOptions });
     let components = parsed.html;
 
     if (asDocument) {

src/dom_components/types.ts

@@ -1,3 +1,4 @@
+import { AddOptions, OptionAsDocument, WithHTMLParserOptions } from '../common';
 import Component from './model/Component';
 
 export enum ActionLabelComponents {
@@ -16,6 +17,10 @@ export interface SymbolInfo {
   relatives: Component[];
 }
 
+export interface ParseStringOptions extends AddOptions, OptionAsDocument, WithHTMLParserOptions {
+  keepIds?: string[];
+}
+
 export enum ComponentsEvents {
   /**
    * @event `component:add` New component added.

src/dom_components/view/ComponentTextView.ts

@@ -1,5 +1,5 @@
 import { bindAll } from 'underscore';
-import { AddOptions, DisableOptions, ObjectAny } from '../../common';
+import { AddOptions, DisableOptions, ObjectAny, WithHTMLParserOptions } from '../../common';
 import RichTextEditorModule from '../../rich_text_editor';
 import RichTextEditor from '../../rich_text_editor/model/RichTextEditor';
 import { off, on } from '../../utils/dom';
@@ -108,7 +108,7 @@ export default class ComponentTextView<TComp extends ComponentText = ComponentTe
    * Disable element content editing
    * @private
    * */
-  async disableEditing(opts: DisableOptions = {}) {
+  async disableEditing(opts: DisableOptions & WithHTMLParserOptions = {}) {
     const { model, rte, activeRte, em } = this;
     // There are rare cases when disableEditing is called when the view is already removed
     // so, we have to check for the model, this will avoid breaking stuff.

src/utils/Droppable.ts

@@ -215,7 +215,6 @@ export default class Droppable {
     const { dragContent } = this;
     const dt = (ev as DragEvent).dataTransfer;
     const content = this.getContentByData(dt).content;
-    (ev.target as HTMLElement).style.border = '';
     content && dragContent && dragContent(content);
     this.endDrop(!content, ev);
   }

test/specs/dom_components/model/Component.ts

@@ -273,6 +273,32 @@ describe('Component', () => {
     expect(result.class).toEqual(undefined);
   });
 
+  test('findFirstType returns first component of specified type', () => {
+    const image1 = new ComponentImage({}, compOpts);
+    const text = new ComponentText({}, compOpts);
+    const image2 = new ComponentImage({}, compOpts);
+
+    obj.append([image1, text, image2]);
+
+    const result = obj.findFirstType('image');
+    expect(result).toBe(image1);
+    expect(result instanceof ComponentImage).toBe(true);
+  });
+
+  test('findFirstType returns undefined for non-existent type', () => {
+    const text = new ComponentText({}, compOpts);
+
+    obj.append(text);
+
+    const result = obj.findFirstType('image');
+    expect(result).toBeUndefined();
+  });
+
+  test('findFirstType returns undefined for empty component', () => {
+    const result = obj.findFirstType('div');
+    expect(result).toBeUndefined();
+  });
+
   test('setAttributes', () => {
     obj.setAttributes({
       id: 'test',