tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'dev' into feature/data-sources

feature/data-sources
danstarns 2 years ago
parent
02596a44e3 727797cda3
commit
31eb7b8ff8
47 changed files with 1561 additions and 2075 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      docs/api.mjs
  2. 8
      docs/api/asset.md
  3. 16
      docs/api/assets.md
  4. 10
      docs/api/block.md
  5. 20
      docs/api/block_manager.md
  6. 60
      docs/api/canvas.md
  7. 4
      docs/api/canvas_spot.md
  8. 22
      docs/api/commands.md
  9. 111
      docs/api/component.md
  10. 16
      docs/api/components.md
  11. 8
      docs/api/css_composer.md
  12. 14
      docs/api/css_rule.md
  13. 6
      docs/api/device_manager.md
  14. 68
      docs/api/editor.md
  15. 12
      docs/api/i18n.md
  16. 6
      docs/api/keymaps.md
  17. 12
      docs/api/layer.md
  18. 26
      docs/api/layer_manager.md
  19. 18
      docs/api/modal_dialog.md
  20. 10
      docs/api/page.md
  21. 14
      docs/api/pages.md
  22. 8
      docs/api/panels.md
  23. 2
      docs/api/parser.md
  24. 26
      docs/api/property.md
  25. 16
      docs/api/property_composite.md
  26. 12
      docs/api/property_number.md
  27. 2
      docs/api/property_select.md
  28. 20
      docs/api/property_stack.md
  29. 10
      docs/api/rich_text_editor.md
  30. 12
      docs/api/sector.md
  31. 8
      docs/api/selector.md
  32. 34
      docs/api/selector_manager.md
  33. 4
      docs/api/state.md
  34. 46
      docs/api/storage_manager.md
  35. 20
      docs/api/style_manager.md
  36. 16
      docs/api/trait.md
  37. 14
      docs/api/trait_manager.md
  38. 32
      docs/api/undo_manager.md
  39. 8
      package.json
  40. 3
      src/common/index.ts
  41. 15
      src/dom_components/model/Component.ts
  42. 8
      src/dom_components/model/Components.ts
  43. 5
      src/dom_components/types.ts
  44. 4
      src/dom_components/view/ComponentTextView.ts
  45. 1
      src/utils/Droppable.ts
  46. 26
      test/specs/dom_components/model/Component.ts
  47. 2785
      yarn.lock

38
docs/api.js → docs/api.mjs
View File

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

8
docs/api/asset.md
View File

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

16
docs/api/assets.md
View File

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

10
docs/api/block.md
View File

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

20
docs/api/block_manager.md
View File

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

60
docs/api/canvas.md
View File

@ -30,7 +30,9 @@ canvas.setCoords(...);
* `canvas:dragend` When a drag operation is ended, `DataTransfer` instance passed as an argument. * `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.&#xA;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. * `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,&#xA;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 ```javascript
editor.on('canvas:refresh', (canvasRefreshOptions) => { editor.on('canvas:refresh', (canvasRefreshOptions) => {
@ -98,7 +102,9 @@ editor.on('canvas:refresh', (canvasRefreshOptions) => {
}); });
``` ```
* `canvas:frame:load` Frame loaded in canvas.&#xA;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 ```javascript
editor.on('canvas:frame:load', ({ window }) => { 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.&#xA;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 ```javascript
editor.on('canvas:frame:load:head', ({ window }) => { 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.&#xA;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 ```javascript
editor.on('canvas:frame:load:body', ({ window }) => { editor.on('canvas:frame:load:body', ({ window }) => {
@ -132,37 +142,37 @@ editor.on('canvas:frame:load:body', ({ window }) => {
Get configuration object Get configuration object
Returns **[Object][2]** Returns **[Object][2]**&#x20;
## getElement ## getElement
Get the canvas element Get the canvas element
Returns **[HTMLElement][3]** Returns **[HTMLElement][3]**&#x20;
## getFrameEl ## getFrameEl
Get the main frame element of the canvas Get the main frame element of the canvas
Returns **[HTMLIFrameElement][4]** Returns **[HTMLIFrameElement][4]**&#x20;
## getWindow ## getWindow
Get the main frame window instance Get the main frame window instance
Returns **[Window][5]** Returns **[Window][5]**&#x20;
## getDocument ## getDocument
Get the main frame document element Get the main frame document element
Returns **HTMLDocument** Returns **HTMLDocument**&#x20;
## getBody ## getBody
Get the main frame body element Get the main frame body element
Returns **[HTMLBodyElement][6]** Returns **[HTMLBodyElement][6]**&#x20;
## setCustomBadgeLabel ## setCustomBadgeLabel
@ -170,7 +180,7 @@ Set custom badge naming strategy
### Parameters ### Parameters
* `f` **[Function][7]** * `f` **[Function][7]**&#x20;
### Examples ### Examples
@ -184,13 +194,13 @@ canvas.setCustomBadgeLabel(function(component){
Get canvas rectangular data Get canvas rectangular data
Returns **[Object][2]** Returns **[Object][2]**&#x20;
## hasFocus ## hasFocus
Check if the canvas is focused Check if the canvas is focused
Returns **[Boolean][8]** Returns **[Boolean][8]**&#x20;
## scrollTo ## scrollTo
@ -201,7 +211,7 @@ passed to it. For instance, you can scroll smoothly by using
### Parameters ### Parameters
* `el` **([HTMLElement][3] | [Component])** * `el` **([HTMLElement][3] | [Component])**&#x20;
* `opts` **[Object][2]** Options, same as options for `scrollIntoView` (optional, default `{}`) * `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`) * `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% canvas.setZoom(50); // set zoom to 50%
``` ```
Returns **this** Returns **this**&#x20;
## getZoom ## getZoom
@ -243,7 +253,7 @@ canvas.setZoom(50); // set zoom to 50%
const zoom = canvas.getZoom(); // 50 const zoom = canvas.getZoom(); // 50
``` ```
Returns **[Number][9]** Returns **[Number][9]**&#x20;
## setCoords ## setCoords
@ -261,7 +271,7 @@ Set canvas position coordinates
canvas.setCoords(100, 100); canvas.setCoords(100, 100);
``` ```
Returns **this** Returns **this**&#x20;
## getCoords ## getCoords
@ -281,7 +291,7 @@ Returns **[Object][2]** Object containing coordinates
Get the last created Component from a drag & drop to the canvas. Get the last created Component from a drag & drop to the canvas.
Returns **([Component] | [undefined][10])** Returns **([Component] | [undefined][10])**&#x20;
## addSpot ## addSpot
@ -313,7 +323,7 @@ canvas.addSpot({
}); });
``` ```
Returns **[CanvasSpot]** Returns **[CanvasSpot]**&#x20;
## getSpots ## getSpots
@ -339,7 +349,7 @@ const allSelectSpots = canvas.getSpots({ type: 'select' });
allSelectSpots.length; // 2 allSelectSpots.length; // 2
``` ```
Returns **[Array][11]<[CanvasSpot]>** Returns **[Array][11]<[CanvasSpot]>**&#x20;
## removeSpots ## removeSpots
@ -367,7 +377,7 @@ canvas.removeSpots(filteredSpots);
canvas.removeSpots(); canvas.removeSpots();
``` ```
Returns **[Array][11]<[CanvasSpot]>** Returns **[Array][11]<[CanvasSpot]>**&#x20;
## hasCustomSpot ## hasCustomSpot
@ -392,7 +402,7 @@ canvas.hasCustomSpot('select'); // false
canvas.hasCustomSpot('target'); // true canvas.hasCustomSpot('target'); // true
``` ```
Returns **[Boolean][8]** Returns **[Boolean][8]**&#x20;
## getWorldRectToScreen ## getWorldRectToScreen
@ -400,9 +410,9 @@ Transform a box rect from the world coordinate system to the screen one.
### Parameters ### Parameters
* `boxRect` **[Object][2]** * `boxRect` **[Object][2]**&#x20;
Returns **[Object][2]** Returns **[Object][2]**&#x20;
## refresh ## refresh

4
docs/api/canvas_spot.md
View File

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

22
docs/api/commands.md
View File

@ -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 ```javascript
editor.on('command:run:my-command', ({ result, options }) => { ... }); 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 ```javascript
editor.on('command:run:before:my-command', ({ options }) => { ... }); 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 ```javascript
editor.on('command:abort:my-command', ({ options }) => { ... }); 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 ```javascript
editor.on('command:run:my-command', ({ result, options }) => { ... }); 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 ```javascript
editor.on('command:stop:before:my-command', ({ options }) => { ... }); editor.on('command:stop:before:my-command', ({ options }) => { ... });
@ -114,7 +114,7 @@ commands.add('myCommand', {
commands.add('myCommand2', editor => { ... }); commands.add('myCommand2', editor => { ... });
``` ```
Returns **this** Returns **this**&#x20;
## get ## get
@ -153,7 +153,7 @@ commands.extend('old-command', {
}); });
``` ```
Returns **this** Returns **this**&#x20;
## has ## has
@ -163,13 +163,13 @@ Check if command exists
* `id` **[string][11]** Command's ID * `id` **[string][11]** Command's ID
Returns **[Boolean][14]** Returns **[Boolean][14]**&#x20;
## getAll ## getAll
Get an object containing all the commands Get an object containing all the commands
Returns **[Object][12]** Returns **[Object][12]**&#x20;
## run ## run
@ -227,7 +227,7 @@ commands.isActive(cId);
// -> false // -> false
``` ```
Returns **[Boolean][14]** Returns **[Boolean][14]**&#x20;
## getActive ## getActive
@ -240,7 +240,7 @@ console.log(commands.getActive());
// -> { someCommand: itsLastReturn, anotherOne: ... }; // -> { someCommand: itsLastReturn, anotherOne: ... };
``` ```
Returns **[Object][12]** Returns **[Object][12]**&#x20;
[1]: https://github.com/GrapesJS/grapesjs/blob/master/src/commands/config/config.ts [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/commands/config/config.ts

111
docs/api/component.md
View File

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

16
docs/api/components.md
View File

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

8
docs/api/css_composer.md
View File

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

14
docs/api/css_rule.md
View File

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

6
docs/api/device_manager.md
View File

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

68
docs/api/editor.md
View File

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

12
docs/api/i18n.md
View File

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

6
docs/api/keymaps.md
View File

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

12
docs/api/layer.md
View File

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

26
docs/api/layer_manager.md
View File

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

18
docs/api/modal_dialog.md
View File

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

10
docs/api/page.md
View File

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

14
docs/api/pages.md
View File

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

8
docs/api/panels.md
View File

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

2
docs/api/parser.md
View File

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

26
docs/api/property.md
View File

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

16
docs/api/property_composite.md
View File

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

12
docs/api/property_number.md
View File

@ -15,31 +15,31 @@
Get property units. Get property units.
Returns **[Array][1]<[String][2]>** Returns **[Array][1]<[String][2]>**&#x20;
### getUnit ### getUnit
Get property unit value. Get property unit value.
Returns **[String][2]** Returns **[String][2]**&#x20;
### getMin ### getMin
Get min value. Get min value.
Returns **[Number][3]** Returns **[Number][3]**&#x20;
### getMax ### getMax
Get max value. Get max value.
Returns **[Number][3]** Returns **[Number][3]**&#x20;
### getStep ### getStep
Get step value. Get step value.
Returns **[Number][3]** Returns **[Number][3]**&#x20;
### upUnit ### 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`) * `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 [1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

2
docs/api/property_select.md
View File

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

20
docs/api/property_stack.md
View File

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

10
docs/api/rich_text_editor.md
View File

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

12
docs/api/sector.md
View File

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

8
docs/api/selector.md
View File

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

34
docs/api/selector_manager.md
View File

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

4
docs/api/state.md
View File

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

46
docs/api/storage_manager.md
View File

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

20
docs/api/style_manager.md
View File

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

16
docs/api/trait.md
View File

@ -17,19 +17,19 @@
Get the trait id. Get the trait id.
Returns **[String][1]** Returns **[String][1]**&#x20;
## getType ## getType
Get the trait type. Get the trait type.
Returns **[String][1]** Returns **[String][1]**&#x20;
## getName ## getName
Get the trait name. Get the trait name.
Returns **[String][1]** Returns **[String][1]**&#x20;
## getLabel ## getLabel
@ -41,7 +41,7 @@ Get the trait label.
* `opts.locale` **[Boolean][2]** Use the locale string from i18n module. (optional, default `true`) * `opts.locale` **[Boolean][2]** Use the locale string from i18n module. (optional, default `true`)
Returns **[String][1]** Returns **[String][1]**&#x20;
## getValue ## 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`) * `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**&#x20;
## setValue ## setValue
@ -76,7 +76,7 @@ Get default value.
Get trait options. Get trait options.
Returns **[Array][4]\<TraitOption>** Returns **[Array][4]\<TraitOption>**&#x20;
## getOption ## getOption
@ -86,7 +86,7 @@ Get current selected option or by id.
* `id` **[String][1]?** Option id. * `id` **[String][1]?** Option id.
Returns **([Object][3] | null)** Returns **([Object][3] | null)**&#x20;
## getOptionId ## getOptionId
@ -121,7 +121,7 @@ Get category label.
* `opts.locale` **[Boolean][2]** Use the locale string from i18n module. (optional, default `true`) * `opts.locale` **[Boolean][2]** Use the locale string from i18n module. (optional, default `true`)
Returns **[String][1]** Returns **[String][1]**&#x20;
## runCommand ## runCommand

14
docs/api/trait_manager.md
View File

@ -42,7 +42,7 @@ editor.on('trait:value', ({ trait, component, value }) => { ... });
editor.on('trait:category:update', ({ category, changes }) => { ... }); 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 ```javascript
editor.on('trait:custom', ({ container }) => { ... }); editor.on('trait:custom', ({ container }) => { ... });
@ -62,7 +62,7 @@ editor.on('trait', ({ event, model, ... }) => { ... });
Get configuration object Get configuration object
Returns **[Object][2]** Returns **[Object][2]**&#x20;
## select ## select
@ -70,7 +70,7 @@ Select traits from a component.
### Parameters ### Parameters
* `component` **[Component]** * `component` **[Component]**&#x20;
### Examples ### Examples
@ -88,7 +88,7 @@ Get trait categories from the currently selected component.
const traitCategories: Category[] = tm.getCategories(); const traitCategories: Category[] = tm.getCategories();
``` ```
Returns **[Array][3]\<Category>** Returns **[Array][3]\<Category>**&#x20;
## getTraits ## getTraits
@ -100,7 +100,7 @@ Get traits from the currently selected component.
const currentTraits: Trait[] = tm.getTraits(); const currentTraits: Trait[] = tm.getTraits();
``` ```
Returns **[Array][3]<[Trait]>** Returns **[Array][3]<[Trait]>**&#x20;
## getTraitsByCategory ## getTraitsByCategory
@ -108,7 +108,7 @@ Get traits by category from the currently selected component.
### Parameters ### Parameters
* `traits` **[Array][3]\<Trait>?** * `traits` **[Array][3]\<Trait>?**&#x20;
### Examples ### Examples
@ -124,7 +124,7 @@ const myFilteredTraits: Trait[] = [...];
tm.getTraitsByCategory(myFilteredTraits); tm.getTraitsByCategory(myFilteredTraits);
``` ```
Returns **[Array][3]\<TraitsByCategory>** Returns **[Array][3]\<TraitsByCategory>**&#x20;
## getComponent ## getComponent

32
docs/api/undo_manager.md
View File

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

8
package.json
View File

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

3
src/common/index.ts
View File

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

15
src/dom_components/model/Component.ts
View File

@ -508,6 +508,21 @@ export default class Component extends StyleableModel<ComponentProperties> {
return result; 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. * Find the closest parent component by query string.
* **ATTENTION**: this method works only with already rendered component * **ATTENTION**: this method works only with already rendered component

8
src/dom_components/model/Components.ts
View File

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

5
src/dom_components/types.ts
View File

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

4
src/dom_components/view/ComponentTextView.ts
View File

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

1
src/utils/Droppable.ts
View File

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

26
test/specs/dom_components/model/Component.ts
View File

@ -273,6 +273,32 @@ describe('Component', () => {
expect(result.class).toEqual(undefined); 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', () => { test('setAttributes', () => {
obj.setAttributes({ obj.setAttributes({
id: 'test', id: 'test',

2785
yarn.lock
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save