Browse Source

Fix events output in API reference

pull/6452/head
Artur Arseniev 11 months ago
parent
commit
8d57ae5ec2
  1. 1
      docs/api/canvas.md
  2. 14
      docs/api/commands.md
  3. 3
      docs/api/component.md
  4. 64
      docs/api/editor.md
  5. 30
      docs/api/pages.md
  6. 38
      docs/api/parser.md
  7. 3
      packages/core/src/editor/types.ts
  8. 3
      packages/core/src/parser/types.ts

1
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

14
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]

3
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]>)**&#x20;
* `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

64
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

30
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]**&#x20;
[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

38
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 += '<div>Extra content</div>';
});
```
* `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

3
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;

3
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;

Loading…
Cancel
Save