Add css mount events (#6540)

* Add component:input to ComponentsEvents

* Add additional `data:path` events

* Add CssRule mount event

* Switch to a new pathSource event.

The `data:path:SOURCE_ID` doesn't work as it triggers rebuilds of symbols in ComponentDataCollection

* Up comment

* Up data_sources docs

* Up data_sources jsdoc

* Up Module.events TS

* Export types data components

* More TS export

* Up TS

* Up docs API

Author: artf

docs/api/datasources.md

@@ -3,40 +3,62 @@
 ## DataSources
 
 This module manages data sources within the editor.
-You can initialize the module with the editor by passing an instance of `EditorModel`.
+Once the editor is instantiated, you can use the following API to manage data sources:
 
 ```js
-const editor = new EditorModel();
-const dsm = new DataSourceManager(editor);
+const editor = grapesjs.init({ ... });
+const dsm = editor.DataSources;
 ```
 
-Once the editor is instantiated, you can use the following API to manage data sources:
+## Available Events
+* `data:add` Added new data source.
 
-```js
-const dsm = editor.DataSources;
+```javascript
+editor.on('data:add', (dataSource) => { ... });
 ```
 
-*   [add][1] - Add a new data source.
-*   [get][2] - Retrieve a data source by its ID.
-*   [getAll][3] - Retrieve all data sources.
-*   [remove][4] - Remove a data source by its ID.
-*   [clear][5] - Remove all data sources.
+* `data:remove` Data source removed.
 
-Example of adding a data source:
+```javascript
+editor.on('data:remove', (dataSource) => { ... });
+```
 
-```js
-const ds = dsm.add({
-  id: 'my_data_source_id',
-  records: [
-    { id: 'id1', name: 'value1' },
-    { id: 'id2', name: 'value2' }
-  ]
+* `data:update` Data source updated.
+
+```javascript
+editor.on('data:update', (dataSource, changes) => { ... });
+```
+
+* `data:path` Data record path update.
+
+```javascript
+editor.on('data:path:SOURCE_ID.RECORD_ID.PROP_NAME', ({ dataSource, dataRecord, path }) => { ... });
+editor.on('data:path', ({ dataSource, dataRecord, path }) => {
+ console.log('Path update in any data source')
 });
 ```
 
-### Parameters
+* `data:pathSource` Data record path update per source.
+
+```javascript
+editor.on('data:pathSource:SOURCE_ID', ({ dataSource, dataRecord, path }) => { ... });
+```
+
+* `data` Catch-all event for all the events mentioned above.
+
+```javascript
+editor.on('data', ({ event, model, ... }) => { ... });
+```
+
+## Methods
+
+*   [add][1] - Add a new data source.
+*   [get][2] - Retrieve a data source by its ID.
+*   [getAll][3] - Retrieve all data sources.
+*   [remove][4] - Remove a data source by its ID.
+*   [clear][5] - Remove all data sources.
 
-*   `em` **EditorModel** Editor model.
+[DataSource]: datasource.html
 
 ## add
 

packages/core/src/abstract/Module.ts

@@ -44,7 +44,7 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig> impl
   collections: Collection[] = [];
   cls: any[] = [];
   state?: Model;
-  events: any;
+  events: object = {};
   model?: any;
   view?: any;
 
@@ -129,18 +129,19 @@ export abstract class ItemManagerModule<
   cls: any[] = [];
   all: TCollection;
   view?: View;
+  events!: Record<string, string>;
 
   constructor(
     em: EditorModel,
     moduleName: string,
     all: any,
-    events?: any,
+    events?: Record<string, string>,
     defaults?: TConf,
     opts: { skipListen?: boolean } = {},
   ) {
     super(em, moduleName, defaults);
     this.all = all;
-    this.events = events;
+    if (events) this.events = events;
     !opts.skipListen && this.__initListen();
   }
 

packages/core/src/canvas/model/CanvasSpots.ts

@@ -17,7 +17,7 @@ export default class CanvasSpots extends ModuleCollection<CanvasSpot> {
     const { em } = this;
     this.refreshDbn = debounce(() => this.refresh(), 0);
 
-    const evToRefreshDbn = `${ComponentsEvents.resize} styleable:change component:input ${ComponentsEvents.update} frame:updated undo redo`;
+    const evToRefreshDbn = `${ComponentsEvents.resize} styleable:change ${ComponentsEvents.input} ${ComponentsEvents.update} frame:updated undo redo`;
     this.listenTo(em, evToRefreshDbn, () => this.refreshDbn());
   }
 

packages/core/src/code_manager/model/CssGenerator.ts

@@ -172,7 +172,7 @@ export default class CssGenerator extends Model {
     });
 
     if ((selectorStrNoAdd && found) || selectorsAdd || singleAtRule || !model) {
-      const block = rule.getDeclaration({ body: 1 });
+      const block = rule.getDeclaration();
       block && (opts.json ? (result = rule) : (result += block));
     } else {
       dump.push(rule);

packages/core/src/commands/view/SelectComponent.ts

@@ -96,7 +96,7 @@ export default {
     methods[method](listenToEl, 'scroll', this.onContainerChange);
     em[method](`component:toggled ${eventCmpUpdate} undo redo`, this.onSelect, this);
     em[method]('change:componentHovered', this.onHovered, this);
-    em[method](`${ComponentsEvents.resize} styleable:change component:input`, this.updateGlobalPos, this);
+    em[method](`${ComponentsEvents.resize} styleable:change ${ComponentsEvents.input}`, this.updateGlobalPos, this);
     em[method](`${eventCmpUpdate}:toolbar`, this._upToolbar, this);
     em[method]('frame:updated', this.onFrameUpdated, this);
     em[method]('canvas:updateTools', this.onFrameUpdated, this);

packages/core/src/css_composer/index.ts

@@ -40,6 +40,8 @@ import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
 import { ObjectAny, PrevToNewIdMap } from '../common';
 import { UpdateStyleOptions } from '../domain_abstract/model/StyleableModel';
+import { CssEvents } from './types';
+import CssRuleView from './view/CssRuleView';
 
 /** @private */
 interface RuleOptions {
@@ -72,8 +74,15 @@ export interface GetSetRuleOptions extends UpdateStyleOptions {
 type CssRuleStyle = Required<CssRuleProperties>['style'];
 
 export default class CssComposer extends ItemManagerModule<CssComposerConfig & { pStylePrefix?: string }> {
+  classes = {
+    CssRule,
+    CssRules,
+    CssRuleView,
+    CssRulesView,
+  };
   rules: CssRules;
   rulesView?: CssRulesView;
+  events = CssEvents;
 
   Selectors = Selectors;
 
@@ -85,7 +94,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * @private
    */
   constructor(em: EditorModel) {
-    super(em, 'CssComposer', null, {}, defConfig());
+    super(em, 'CssComposer', null, CssEvents, defConfig());
     const { config } = this;
 
     const ppfx = config.pStylePrefix;

packages/core/src/css_composer/model/CssRule.ts

@@ -1,13 +1,20 @@
 import { isEmpty, forEach, isString, isArray } from 'underscore';
-import { Model, ObjectAny, View } from '../../common';
-import StyleableModel from '../../domain_abstract/model/StyleableModel';
+import { Model, ObjectAny } from '../../common';
+import StyleableModel, { StyleProps } from '../../domain_abstract/model/StyleableModel';
 import Selectors from '../../selector_manager/model/Selectors';
 import { getMediaLength } from '../../code_manager/model/CssGenerator';
 import { isEmptyObj, hasWin } from '../../utils/mixins';
 import Selector, { SelectorProps } from '../../selector_manager/model/Selector';
 import EditorModel from '../../editor/model/Editor';
 import CssRuleView from '../view/CssRuleView';
 
+export interface ToCssOptions {
+  important?: boolean | string[];
+  allowEmpty?: boolean;
+  style?: StyleProps;
+  inline?: boolean;
+}
+
 /** @private */
 export interface CssRuleProperties {
   /**
@@ -214,7 +221,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
    * });
    * cssRule.getDeclaration() // ".class1{color:red;}"
    */
-  getDeclaration(opts: ObjectAny = {}) {
+  getDeclaration(opts: ToCssOptions = {}) {
     let result = '';
     const { important } = this.attributes;
     const selectors = this.selectorsToString(opts);
@@ -285,7 +292,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
    * });
    * cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"
    */
-  toCSS(opts: ObjectAny = {}) {
+  toCSS(opts: ToCssOptions = {}) {
     let result = '';
     const atRule = this.getAtRule();
     const block = this.getDeclaration(opts);

packages/core/src/css_composer/types.ts

@@ -0,0 +1,9 @@
+export enum CssEvents {
+  /**
+   * @event `css:mount` CSS rule is mounted in the canvas.
+   * @example
+   * editor.on('css:mount', ({ rule }) => { ... });
+   */
+  mount = 'css:mount',
+  mountBefore = 'css:mount:before',
+}

packages/core/src/css_composer/view/CssRuleView.ts

@@ -1,6 +1,8 @@
 import FrameView from '../../canvas/view/FrameView';
 import { View } from '../../common';
+import EditorModel from '../../editor/model/Editor';
 import CssRule from '../model/CssRule';
+import { CssEvents } from '../types';
 
 export default class CssRuleView extends View<CssRule> {
   config: any;
@@ -19,6 +21,10 @@ export default class CssRuleView extends View<CssRule> {
     return this.config.frameView;
   }
 
+  get em(): EditorModel {
+    return this.model.em!;
+  }
+
   remove() {
     super.remove();
     this.model.removeView(this);
@@ -35,9 +41,13 @@ export default class CssRuleView extends View<CssRule> {
   }
 
   render() {
-    const { model, el } = this;
+    const { model, el, em } = this;
     const important = model.get('important');
-    el.innerHTML = model.toCSS({ important });
+    const css = model.toCSS({ important });
+    const mountProps = { rule: model, ruleView: this, css };
+    em?.trigger(CssEvents.mountBefore, mountProps);
+    el.innerHTML = mountProps.css;
+    em?.trigger(CssEvents.mount, mountProps);
     return this;
   }
 }

packages/core/src/data_sources/index.ts

@@ -1,38 +1,24 @@
 /**
  * This module manages data sources within the editor.
- * You can initialize the module with the editor by passing an instance of `EditorModel`.
- *
- * ```js
- * const editor = new EditorModel();
- * const dsm = new DataSourceManager(editor);
- * ```
- *
  * Once the editor is instantiated, you can use the following API to manage data sources:
  *
  * ```js
+ * const editor = grapesjs.init({ ... });
  * const dsm = editor.DataSources;
  * ```
  *
+ * {REPLACE_EVENTS}
+ *
+ * ## Methods
  * * [add](#add) - Add a new data source.
  * * [get](#get) - Retrieve a data source by its ID.
  * * [getAll](#getall) - Retrieve all data sources.
  * * [remove](#remove) - Remove a data source by its ID.
  * * [clear](#clear) - Remove all data sources.
  *
- * Example of adding a data source:
- *
- * ```js
- * const ds = dsm.add({
- *   id: 'my_data_source_id',
- *   records: [
- *     { id: 'id1', name: 'value1' },
- *     { id: 'id2', name: 'value2' }
- *   ]
- * });
- * ```
+ * [DataSource]: datasource.html
  *
  * @module DataSources
- * @param {EditorModel} em - Editor model.
  */
 
 import { ItemManagerModule, ModuleConfig } from '../abstract/Module';