Fix events output in API reference docs (#6452)

* Fix events output in API reference

* Format

docs/.vuepress/theme/layouts/StudioSdkBannerSidebar.vue

@@ -1,22 +1,23 @@
 <template>
   <a class="banner-sdk-sidebar" :href="getSdkDocsLink()">
     <h2 class="banner-sdk-sidebar__title">Supercharge Your GrapesJS Development 🚀</h2>
-    <img class="banner-sdk-sidebar__image" :src="$withBase('/studio-banner.jpg')" alt="Studio SDK">
+    <img class="banner-sdk-sidebar__image" :src="$withBase('/studio-banner.jpg')" alt="Studio SDK" />
     <p class="banner-sdk-sidebar__content">
-       Studio SDK is the next-level visual builder with advanced features, custom plugins, and seamless integration. Save time and build faster!
+      Studio SDK is the next-level visual builder with advanced features, custom plugins, and seamless integration. Save
+      time and build faster!
     </p>
   </a>
 </template>
 
 <script>
-import {  getSdkDocsLink } from './utils';
+import { getSdkDocsLink } from './utils';
 
 export default {
   methods: {
     getSdkDocsLink() {
       return getSdkDocsLink('sidebar');
-    }
+    },
-  }
+  },
 };
 </script>
 

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)}`;
+  return `https://app.grapesjs.com/docs-sdk/overview/getting-started?${getSdkUtmParams(medium)}`;
-}
+};

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
 

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]

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

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
+* `undo` Undo executed.
-editor.on('EVENT-NAME', (some, argument) => {
+
-   // do something
+```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)
+* `destroy` Editor started destroy (on `editor.destroy()`).
-*   `undo` - Undo executed
+
-*   `redo` - Redo executed
+```javascript
-*   `load` - Editor is loaded
+editor.on('destroy', () => { ... });
+```
+
+* `destroyed` Editor destroyed.
+
+```javascript
+editor.on('destroyed', () => { ... });
+```
 
 ### Components
 

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

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
+```javascript
-*   `parse:css` - On CSS parse, an object containing the input and the output of the parser is passed as an argument
+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
 

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;

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;