Update docs

docs/api.mjs

@@ -97,7 +97,8 @@ async function generateDocs() {
         throw `File not found '${filePath}'`;
       }
 
-      return build([filePath], { shallow: true })
+      try {
+        return build([filePath], { shallow: true })
         .then((cm) => formats.md(cm /*{ markdownToc: true }*/))
         .then(async (output) => {
           let addLogs = [];
@@ -114,16 +115,25 @@ async function generateDocs() {
 
           // Search for module event documentation
           if (result.indexOf(REPLACE_EVENTS) >= 0) {
-            const eventsMd = await getEventsMdFromTypes(filePath);
-            if (eventsMd && result.indexOf(REPLACE_EVENTS) >= 0) {
-              addLogs.push('replaced events');
+            try {
+              const eventsMd = await getEventsMdFromTypes(filePath);
+              if (eventsMd && result.indexOf(REPLACE_EVENTS) >= 0) {
+                addLogs.push('replaced events');
+              }
+              result = eventsMd ? result.replace(REPLACE_EVENTS, `## Available Events\n${eventsMd}`) : result;
+            } catch (err) {
+              console.error(`Failed getting events: ${file[0]}`)
+              throw err;
             }
-            result = eventsMd ? result.replace(REPLACE_EVENTS, `## Available Events\n${eventsMd}`) : result;
           }
 
           writeFileSync(`${docRoot}/api/${file[1]}`, result);
           log('Created', file[1], addLogs.length ? `(${addLogs.join(', ')})` : '');
         });
+      } catch (err) {
+        console.error(`Build failed: ${file[0]}`)
+        throw err;
+      }
     }),
   );
 

docs/api/block_manager.md

@@ -84,6 +84,8 @@ editor.on('block:custom', ({ container, blocks, ... }) => { ... });
 editor.on('block', ({ event, model, ... }) => { ... });
 ```
 
+* BlocksEventCallback
+
 [Block]: block.html
 
 [Component]: component.html

docs/api/canvas.md

@@ -122,6 +122,14 @@ editor.on('canvas:frame:load:body', ({ window }) => {
 });
 ```
 
+* `canvas:frame:unload` Frame is unloading from the canvas.
+
+```javascript
+editor.on('canvas:frame:unload', ({ frame }) => {
+ console.log('Unloading frame', frame);
+});
+```
+
 [Component]: component.html
 
 [Frame]: frame.html

docs/api/component.md

@@ -137,7 +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 `{}`)
+*   `options` **DataWatchersOptions**  (optional, default `{}`)
 
 ### Examples
 
@@ -335,8 +335,7 @@ Get the style of the component
 
 ### Parameters
 
-*   `options` **any**  (optional, default `{}`)
-*   `optsAdd` **any**  (optional, default `{}`)
+*   `opts` **GetComponentStyleOpts?**&#x20;
 
 Returns **[Object][2]**&#x20;
 
@@ -363,7 +362,7 @@ Return all component's attributes
 
 ### Parameters
 
-*   `opts` **{noClass: [boolean][3]?, noStyle: [boolean][3]?}**  (optional, default `{}`)
+*   `opts` **{noClass: [boolean][3]?, noStyle: [boolean][3]?, skipResolve: [boolean][3]?}**  (optional, default `{}`)
 
 Returns **[Object][2]**&#x20;
 

docs/api/datasource.md

@@ -31,6 +31,44 @@ dataSource.addRecord({ id: 'id3', name: 'value3' });
 *   `props` **DataSourceProps** Properties to initialize the data source.
 *   `opts` **DataSourceOptions** Options to initialize the data source.
 
+### hasProvider
+
+Indicates if the data source has a provider for records.
+
+### getResolvedRecords
+
+Retrieves all records from the data source with resolved relations based on the schema.
+
+### upSchema
+
+Update the schema.
+
+#### Parameters
+
+*   `schema` **Partial\<any>**&#x20;
+*   `opts` **SetOptions?**&#x20;
+
+#### Examples
+
+```javascript
+dataSource.upSchema({ name: { type: 'string' } });
+```
+
+### getSchemaField
+
+Get schema field definition.
+
+#### Parameters
+
+*   `fieldKey` **any**&#x20;
+
+#### Examples
+
+```javascript
+const fieldSchema = dataSource.getSchemaField('name');
+fieldSchema.type; // 'string'
+```
+
 ## defaults
 
 Returns the default properties for the data source.
@@ -55,6 +93,12 @@ Retrieves the collection of records associated with this data source.
 
 Returns **DataRecords\<DRProps>** The collection of data records.
 
+## records
+
+Retrieves the collection of records associated with this data source.
+
+Returns **DataRecords\<DRProps>** The collection of data records.
+
 ## em
 
 Retrieves the editor model associated with this data source.

docs/api/datasources.md

@@ -44,12 +44,26 @@ editor.on('data:path', ({ dataSource, dataRecord, path }) => {
 editor.on('data:pathSource:SOURCE_ID', ({ dataSource, dataRecord, path }) => { ... });
 ```
 
+* `data:provider:load` Data source provider load.
+
+```javascript
+editor.on('data:provider:load', ({ dataSource, result }) => { ... });
+```
+
+* `data:provider:loadAll` Load of all data source providers (eg. on project load).
+
+```javascript
+editor.on('data:provider:loadAll', () => { ... });
+```
+
 * `data` Catch-all event for all the events mentioned above.
 
 ```javascript
 editor.on('data', ({ event, model, ... }) => { ... });
 ```
 
+* DataSourcesEventCallback
+
 ## Methods
 
 *   [add][1] - Add a new data source.
@@ -101,15 +115,32 @@ Returns **[DataSource]** Data source.
 
 ## getValue
 
-Get value from data sources by key
+Get value from data sources by path.
 
 ### Parameters
 
-*   `key` **[String][7]** Path to value.
-*   `defValue` **any** 
+*   `path` **[String][7]** Path to value.
+*   `defValue` **any** Default value if the path is not found.
 
 Returns **any** const value = dsm.getValue('ds\_id.record\_id.propName', 'defaultValue');
 
+## setValue
+
+Set value in data sources by path.
+
+### Parameters
+
+*   `path` **[String][7]** Path to value in format 'dataSourceId.recordId.propName'
+*   `value` **any** Value to set
+
+### Examples
+
+```javascript
+dsm.setValue('ds_id.record_id.propName', 'new value');
+```
+
+Returns **[Boolean][8]** Returns true if the value was set successfully
+
 ## remove
 
 Remove data source.
@@ -152,7 +183,7 @@ data record, and optional property path.
 
 Store data sources to a JSON object.
 
-Returns **[Array][8]** Stored data sources.
+Returns **[Array][9]** Stored data sources.
 
 ## load
 
@@ -178,4 +209,6 @@ Returns **[Object][6]** Loaded data sources.
 
 [7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

docs/api/editor.md

@@ -42,6 +42,15 @@ editor.on('load', () => { ... });
 editor.on('project:load', ({ project, initial }) => { ... });
 ```
 
+* `project:loaded` Similar to `project:load`, but triggers only if the project is loaded successfully.
+
+```javascript
+editor.on('project:loaded', ({ project, initial }) => { ... });
+
+// Loading an empty project, won't trigger this event.
+editor.loadProjectData({});
+```
+
 * `project:get` Event triggered on request of the project data. This can be used to extend the project with custom data.
 
 ```javascript
@@ -516,6 +525,7 @@ Load data from the JSON project
 ### Parameters
 
 *   `data` **[Object][16]** Project to load
+*   `options` **[Object][16]?** Custom options that could be passed to the project load events. (optional, default `{}`)
 
 ### Examples
 
@@ -722,7 +732,7 @@ Trigger event
 ### Parameters
 
 *   `event` **[string][18]** Event to trigger
-*   `args` **...[Array][19]\<any>**&#x20;
+*   `args` **...any**&#x20;
 
 Returns **this**&#x20;
 

docs/api/keymaps.md

@@ -19,23 +19,30 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance.
 
 ```js
-// Listen to events
-editor.on('keymap:add', () => { ... });
-
-// Use the API
 const keymaps = editor.Keymaps;
-keymaps.add(...);
 ```
 
 ## Available Events
+* `keymap:add` New keymap added. The new keymap object is passed as an argument to the callback.
+
+```javascript
+editor.on('keymap:add', (keymap) => { ... });
+```
+
+* `keymap:remove` Keymap removed. The removed keymap object is passed as an argument to the callback.
 
-*   `keymap:add` - New keymap added. The new keyamp object is passed as an argument
-*   `keymap:remove` - Keymap removed. The removed keyamp object is passed as an argument
-*   `keymap:emit` - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
-*   `keymap:emit:{keymapId}` - `keymapId` emitted, in arguments you get keymapId, shortcutUsed, Event
+```javascript
+editor.on('keymap:remove', (keymap) => { ... });
+```
+
+* `keymap:emit` Some keymap emitted. The keymapId, shortcutUsed, and Event are passed as arguments to the callback.
+
+```javascript
+editor.on('keymap:emit', (keymapId, shortcutUsed, event) => { ... });
+```
 
 ## Methods
 

docs/api/layer_manager.md

@@ -13,16 +13,30 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance.
 
 ```js
 const layers = editor.Layers;
 ```
 
 ## Available Events
+* `layer:root` Root layer changed. The new root component is passed as an argument to the callback.
 
-*   `layer:root` - Root layer changed. The new root component is passed as an argument to the callback.
-*   `layer:component` - Component layer is updated. The updated component is passed as an argument to the callback.
+```javascript
+editor.on('layer:root', (component) => { ... });
+```
+
+* `layer:component` Component layer is updated. The updated component is passed as an argument to the callback.
+
+```javascript
+editor.on('layer:component', (component, opts) => { ... });
+```
+
+* `layer:custom` Custom layer event. Object with container and root is passed as an argument to the callback.
+
+```javascript
+editor.on('layer:custom', ({ container, root }) => { ... });
+```
 
 ## Methods
 

docs/api/modal_dialog.md

@@ -19,10 +19,23 @@ const modal = editor.Modal;
 ```
 
 ## Available Events
+* `modal:open` Modal is opened
 
-*   `modal:open` - Modal is opened
-*   `modal:close` - Modal is closed
-*   `modal` - Event triggered on any change related to the modal. An object containing all the available data about the triggered event is passed as an argument to the callback.
+```javascript
+editor.on('modal:open', () => { ... });
+```
+
+* `modal:close` Modal is closed
+
+```javascript
+editor.on('modal:close', () => { ... });
+```
+
+* `modal` Event triggered on any change related to the modal. An object containing all the available data about the triggered event is passed as an argument to the callback.
+
+```javascript
+editor.on('modal', ({ open, title, content, ... }) => { ... });
+```
 
 ## Methods
 

docs/api/parser.md

@@ -81,6 +81,12 @@ Parse HTML string and return the object containing the Component Definition
     *   `options.htmlType` **[String][6]?** [HTML mime type][7] to parse
     *   `options.allowScripts` **[Boolean][8]** Allow `<script>` tags (optional, default `false`)
     *   `options.allowUnsafeAttr` **[Boolean][8]** Allow unsafe HTML attributes (eg. `on*` inline event handlers) (optional, default `false`)
+    *   `options.allowUnsafeAttrValue` **[Boolean][8]** Allow unsafe HTML attribute values (eg. `src="javascript:..."`) (optional, default `false`)
+    *   `options.keepEmptyTextNodes` **[Boolean][8]** Keep whitespaces regardless of whether they are meaningful (optional, default `false`)
+    *   `options.asDocument` **[Boolean][8]?** Treat the HTML string as document
+    *   `options.detectDocument` **([Boolean][8] | [Function][9])?** Indicate if or how to detect if the HTML string should be treated as document
+    *   `options.preParser` **[Function][9]?** How to pre-process the HTML string before parsing
+    *   `options.convertDataGjsAttributesHyphens` **[Boolean][8]** Convert `data-gjs-*` attributes from hyphenated to camelCase (eg. `data-gjs-my-component` to `data-gjs-myComponent`) (optional, default `false`)
 
 ### Examples
 
@@ -113,7 +119,7 @@ const res = Parser.parseCss('.cls { color: red }');
 // [{ ... }]
 ```
 
-Returns **[Array][9]<[Object][5]>** Array containing the result
+Returns **[Array][10]<[Object][5]>** Array containing the result
 
 [1]: https://github.com/GrapesJS/grapesjs/blob/master/src/parser/config/config.ts
 
@@ -131,4 +137,6 @@ Returns **[Array][9]<[Object][5]>** Array containing the result
 
 [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+
+[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array

docs/api/rich_text_editor.md

@@ -15,21 +15,30 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance.
 
 ```js
-// Listen to events
-editor.on('rte:enable', () => { ... });
-
-// Use the API
 const rte = editor.RichTextEditor;
-rte.add(...);
 ```
 
 ## Available Events
+* `rte:enable` RTE enabled. The view, on which RTE is enabled, and the RTE instance are passed as arguments.
+
+```javascript
+editor.on('rte:enable', (view, rte) => { ... });
+```
+
+* `rte:disable` RTE disabled. The view, on which RTE is disabled, and the RTE instance are passed as arguments.
 
-*   `rte:enable` - RTE enabled. The view, on which RTE is enabled, is passed as an argument
-*   `rte:disable` - RTE disabled. The view, on which RTE is disabled, is passed as an argument
+```javascript
+editor.on('rte:disable', (view, rte) => { ... });
+```
+
+* `rte:custom` Custom RTE event. Object with enabled status, container, and actions is passed as an argument.
+
+```javascript
+editor.on('rte:custom', ({ enabled, container, actions }) => { ... });
+```
 
 ## Methods
 

docs/api/selector_manager.md

@@ -35,24 +35,56 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance.
 
 ```js
-// Listen to events
-editor.on('selector:add', (selector) => { ... });
-
-// Use the API
 const sm = editor.Selectors;
-sm.add(...);
 ```
 
 ## Available Events
+* `selector:add` Selector added. The Selector is passed as an argument to the callback.
+
+```javascript
+editor.on('selector:add', (selector) => { ... });
+```
+
+* `selector:remove` Selector removed. The Selector is passed as an argument to the callback.
+
+```javascript
+editor.on('selector:remove', (selector) => { ... });
+```
+
+* `selector:remove:before` Before selector remove. The Selector is passed as an argument to the callback.
+
+```javascript
+editor.on('selector:remove:before', (selector) => { ... });
+```
+
+* `selector:update` Selector updated. The Selector and the object containing changes are passed as arguments to the callback.
+
+```javascript
+editor.on('selector:update', (selector, changes) => { ... });
+```
+
+* `selector:state` States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.
+
+```javascript
+editor.on('selector:state', (state) => { ... });
+```
+
+* `selector:custom` Custom selector event. An object containing states, selected selectors, and container is passed as an argument.
+
+```javascript
+editor.on('selector:custom', ({ states, selected, container }) => { ... });
+```
+
+* `selector` 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('selector', ({ event, selector, changes, ... }) => { ... });
+```
 
-*   `selector:add` - Selector added. The [Selector] is passed as an argument to the callback.
-*   `selector:remove` - Selector removed. The [Selector] is passed as an argument to the callback.
-*   `selector:update` - Selector updated. The [Selector] and the object containing changes are passed as arguments to the callback.
-*   `selector:state` - States changed. An object containing all the available data about the triggered event is passed as an argument to the callback.
-*   `selector` - 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.
+* SelectorStringObject
 
 ## Methods
 

docs/api/style_manager.md

@@ -13,32 +13,72 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance.
 
 ```js
-// Listen to events
-editor.on('style:sector:add', (sector) => { ... });
-
-// Use the API
 const styleManager = editor.StyleManager;
-styleManager.addSector(...);
 ```
 
 ## Available Events
+* `style:sector:add` Sector added. The Sector is passed as an argument to the callback.
+
+```javascript
+editor.on('style:sector:add', (sector) => { ... });
+```
+
+* `style:sector:remove` Sector removed. The Sector is passed as an argument to the callback.
+
+```javascript
+editor.on('style:sector:remove', (sector) => { ... });
+```
+
+* `style:sector:update` Sector updated. The Sector and the object containing changes are passed as arguments to the callback.
 
-*   `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
-*   `style:sector:remove` - Sector removed. The [Sector] is passed as an argument to the callback.
-*   `style:sector:update` - Sector updated. The [Sector] and the object containing changes are passed as arguments to the callback.
-*   `style:property:add` - Property added. The [Property] is passed as an argument to the callback.
-*   `style:property:remove` - Property removed. The [Property] is passed as an argument to the callback.
-*   `style:property:update` - Property updated. The [Property] and the object containing changes are passed as arguments to the callback.
-*   `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback.
-
-<!--
-* `styleManager:update:target` - The target (Component or CSSRule) is changed
-* `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
-* `styleManager:change:{propertyName}` - As above but for a specific style property
--->
+```javascript
+editor.on('style:sector:update', (sector, changes) => { ... });
+```
+
+* `style:property:add` Property added. The Property is passed as an argument to the callback.
+
+```javascript
+editor.on('style:property:add', (property) => { ... });
+```
+
+* `style:property:remove` Property removed. The Property is passed as an argument to the callback.
+
+```javascript
+editor.on('style:property:remove', (property) => { ... });
+```
+
+* `style:property:update` Property updated. The Property and the object containing changes are passed as arguments to the callback.
+
+```javascript
+editor.on('style:property:update', (property, changes) => { ... });
+```
+
+* `style:target` Target selection changed. The target (or null in case the target is deselected) is passed as an argument to the callback.
+
+```javascript
+editor.on('style:target', (target) => { ... });
+```
+
+* `style:layer:select` Layer selected. Object containing layer data is passed as an argument.
+
+```javascript
+editor.on('style:layer:select', (data) => { ... });
+```
+
+* `style:custom` Custom style event. Object containing all custom data is passed as an argument.
+
+```javascript
+editor.on('style:custom', ({ container }) => { ... });
+```
+
+* `style` 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('style', ({ event, sector, property, ... }) => { ... });
+```
 
 ## Methods
 

packages/core/src/selector_manager/index.ts

@@ -79,7 +79,7 @@ import State from './model/State';
 import { SelectorEvents, SelectorStringObject } from './types';
 import ClassTagsView from './view/ClassTagsView';
 
-export type { SelectorEvent } from './types';
+export type SelectorEvent = `${SelectorEvents}`;
 
 const isId = (str: string) => isString(str) && str[0] == '#';
 const isClass = (str: string) => isString(str) && str[0] == '.';

packages/core/src/selector_manager/types.ts

@@ -51,8 +51,6 @@ export enum SelectorEvents {
 }
 /**{END_EVENTS}*/
 
-export type SelectorEvent = `${SelectorEvents}`;
-
 export type SelectorStringObject = string | { name?: string; label?: string; type?: number };
 
 // need this to avoid the TS documentation generator to break

packages/core/src/style_manager/index.ts

@@ -68,7 +68,9 @@ import { PropertyTypes, StyleManagerEvents, StyleTarget } from './types';
 import { CustomPropertyView } from './view/PropertyView';
 import SectorsView from './view/SectorsView';
 
-export type { PropertyTypes, StyleManagerEvent, StyleModuleParam, StyleTarget } from './types';
+export type { PropertyTypes, StyleModuleParam, StyleTarget } from './types';
+
+export type StyleManagerEvent = `${StyleManagerEvents}`;
 
 const propDef = (value: any) => value || value === 0;
 

packages/core/src/style_manager/types.ts

@@ -84,7 +84,5 @@ export enum StyleManagerEvents {
 }
 /**{END_EVENTS}*/
 
-export type StyleManagerEvent = `${StyleManagerEvents}`;
-
 // need this to avoid the TS documentation generator to break
 export default StyleManagerEvents;