diff --git a/docs/.vuepress/theme/layouts/StudioSdkBannerSidebar.vue b/docs/.vuepress/theme/layouts/StudioSdkBannerSidebar.vue index 726258c1a..2036df118 100644 --- a/docs/.vuepress/theme/layouts/StudioSdkBannerSidebar.vue +++ b/docs/.vuepress/theme/layouts/StudioSdkBannerSidebar.vue @@ -1,22 +1,23 @@ diff --git a/docs/.vuepress/theme/layouts/utils.js b/docs/.vuepress/theme/layouts/utils.js index a216ed46a..74ef1996b 100644 --- a/docs/.vuepress/theme/layouts/utils.js +++ b/docs/.vuepress/theme/layouts/utils.js @@ -1,7 +1,7 @@ export const getSdkUtmParams = (medium = '') => { - return `utm_source=grapesjs-docs&utm_medium=${medium}`; -} + return `utm_source=grapesjs-docs&utm_medium=${medium}`; +}; export const getSdkDocsLink = (medium = '') => { - return `https://app.grapesjs.com/docs-sdk/overview/getting-started?${getSdkUtmParams(medium)}`; -} \ No newline at end of file + return `https://app.grapesjs.com/docs-sdk/overview/getting-started?${getSdkUtmParams(medium)}`; +}; diff --git a/docs/api/canvas.md b/docs/api/canvas.md index 18d8be4d5..415ec65c9 100644 --- a/docs/api/canvas.md +++ b/docs/api/canvas.md @@ -257,6 +257,7 @@ Set canvas zoom value ### Parameters * `value` **[Number][9]** The zoom value, from 0 to 100 +* `opts` **SetZoomOptions** (optional, default `{}`) ### Examples diff --git a/docs/api/commands.md b/docs/api/commands.md index 6b9ac74c4..20491ad7c 100644 --- a/docs/api/commands.md +++ b/docs/api/commands.md @@ -77,6 +77,20 @@ editor.on('command:run:my-command', ({ result, options }) => { ... }); editor.on('command:stop:before:my-command', ({ options }) => { ... }); ``` +* `command:call` Triggered on run or stop of a command. + +```javascript +editor.on('command:call', ({ id, result, options, type }) => { + console.log('Command id', id, 'command result', result, 'call type', type); +}); +``` + +* `command:call:COMMAND-ID` Triggered on run or stop of a specific command. + +```javascript +editor.on('command:call:my-command', ({ result, options, type }) => { ... }); +``` + ## Methods * [add][2] diff --git a/docs/api/component.md b/docs/api/component.md index ee151e510..9dab1b1cc 100644 --- a/docs/api/component.md +++ b/docs/api/component.md @@ -137,6 +137,7 @@ By setting override to specific properties, changes of those properties will be ### Parameters * `value` **([Boolean][3] | [String][1] | [Array][5]<[String][1]>)** +* `options` **DynamicWatchersOptions** (optional, default `{}`) ### Examples @@ -280,7 +281,7 @@ Update attributes of the component ### Parameters * `attrs` **[Object][2]** Key value attributes -* `opts` **SetAttrOptions** (optional, default `{}`) +* `opts` **SetAttrOptions** (optional, default `{skipWatcherUpdates:false,fromDataSource:false}`) * `options` **[Object][2]** Options for the model update ### Examples diff --git a/docs/api/editor.md b/docs/api/editor.md index 92db6bdde..64a1c8c0d 100644 --- a/docs/api/editor.md +++ b/docs/api/editor.md @@ -12,19 +12,65 @@ const editor = grapesjs.init({ ``` ## Available Events +* `update` Event triggered on any change of the project (eg. component added/removed, style changes, etc.) -You can make use of available events in this way +```javascript +editor.on('update', () => { ... }); +``` -```js -editor.on('EVENT-NAME', (some, argument) => { - // do something -}) +* `undo` Undo executed. + +```javascript +editor.on('undo', () => { ... }); +``` + +* `redo` Redo executed. + +```javascript +editor.on('redo', () => { ... }); +``` + +* `load` Editor is loaded. At this stage, the project is loaded in the editor and elements in the canvas are rendered. + +```javascript +editor.on('load', () => { ... }); +``` + +* `project:load` Project JSON loaded in the editor. The event is triggered on the initial load and on the `editor.loadProjectData` method. + +```javascript +editor.on('project:load', ({ project, initial }) => { ... }); +``` + +* `project:get` Event triggered on request of the project data. This can be used to extend the project with custom data. + +```javascript +editor.on('project:get', ({ project }) => { project.myCustomKey = 'value' }); +``` + +* `log` Log message triggered. + +```javascript +editor.on('log', (msg, opts) => { ... }); +``` + +* `telemetry:init` Initial telemetry data are sent. + +```javascript +editor.on('telemetry:init', () => { ... }); ``` -* `update` - The structure of the template is updated (its HTML/CSS) -* `undo` - Undo executed -* `redo` - Redo executed -* `load` - Editor is loaded +* `destroy` Editor started destroy (on `editor.destroy()`). + +```javascript +editor.on('destroy', () => { ... }); +``` + +* `destroyed` Editor destroyed. + +```javascript +editor.on('destroyed', () => { ... }); +``` ### Components diff --git a/docs/api/pages.md b/docs/api/pages.md index a59317b29..3cfdff8bc 100644 --- a/docs/api/pages.md +++ b/docs/api/pages.md @@ -113,6 +113,32 @@ pageManager.remove(somePage); Returns **[Page]** Removed Page +## move + +Move a page to a specific index in the pages collection. +If the index is out of bounds, the page will not be moved. + +### Parameters + +* `page` **([string][3] | [Page])** Page or page id to move. +* `opts` **[Object][2]?** Move options (optional, default `{}`) + + * `opts.at` **[number][4]?** The target index where the page should be moved. + +### Examples + +```javascript +// Move a page to index 2 +const movedPage = pageManager.move('page-id', { at: 2 }); +if (movedPage) { + console.log('Page moved successfully:', movedPage); +} else { + console.log('Page could not be moved.'); +} +``` + +Returns **(Page | [undefined][5])** The moved page, or `undefined` if the page does not exist or the index is out of bounds. + ## get Get page by id @@ -192,3 +218,7 @@ Returns **[Page]** [2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object [3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String + +[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number + +[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined diff --git a/docs/api/parser.md b/docs/api/parser.md index 2e48d361b..df9d92993 100644 --- a/docs/api/parser.md +++ b/docs/api/parser.md @@ -19,9 +19,43 @@ const { Parser } = editor; ``` ## Available Events +* `parse:html` On HTML parse, an object containing the input and the output of the parser is passed as an argument. -* `parse:html` - On HTML parse, an object containing the input and the output of the parser is passed as an argument -* `parse:css` - On CSS parse, an object containing the input and the output of the parser is passed as an argument +```javascript +editor.on('parse:html', ({ input, output }) => { ... }); +``` + +* `parse:html:before` Event triggered before the HTML parsing starts. An object containing the input is passed as an argument. + +```javascript +editor.on('parse:html:before', (options) => { + console.log('Parser input', options.input); + // You can also process the input and update `options.input` + options.input += '
Extra content
'; +}); +``` + +* `parse:css` On CSS parse, an object containing the input and the output of the parser is passed as an argument. + +```javascript +editor.on('parse:css', ({ input, output }) => { ... }); +``` + +* `parse:css:before` Event triggered before the CSS parsing starts. An object containing the input is passed as an argument. + +```javascript +editor.on('parse:css:before', (options) => { + console.log('Parser input', options.input); + // You can also process the input and update `options.input` + options.input += '.my-class { color: red; }'; +}); +``` + +* `parse` Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback. + +```javascript +editor.on('parse', ({ event, ... }) => { ... }); +``` ## Methods diff --git a/packages/core/src/editor/types.ts b/packages/core/src/editor/types.ts index 4dba074be..112a3c2f4 100644 --- a/packages/core/src/editor/types.ts +++ b/packages/core/src/editor/types.ts @@ -71,3 +71,6 @@ export enum EditorEvents { destroyed = 'destroyed', } /**{END_EVENTS}*/ + +// need this to avoid the TS documentation generator to break +export default EditorEvents; diff --git a/packages/core/src/parser/types.ts b/packages/core/src/parser/types.ts index b9f3839d1..f69a78324 100644 --- a/packages/core/src/parser/types.ts +++ b/packages/core/src/parser/types.ts @@ -45,3 +45,6 @@ export enum ParserEvents { all = 'parse', } /**{END_EVENTS}*/ + +// need this to avoid the TS documentation generator to break +export default ParserEvents;