Merge branch 'dev' of https://github.com/artf/grapesjs into fix-pages-load

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

@@ -1,7 +1,7 @@
 import CanvasModule from '..';
 import { ModuleModel } from '../../abstract';
 import { Coordinates, CoordinatesTypes, DEFAULT_COORDS, ObjectAny } from '../../common';
-import { evUpdate as evDeviceUpdate } from '../../device_manager';
+import DeviceEvents from '../../device_manager/types';
 import Page from '../../pages/model/Page';
 import PagesEvents from '../../pages/types';
 import Frame from './Frame';
@@ -33,7 +33,7 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     this.on('change:zoom', this.onZoomChange);
     this.on('change:x change:y', this.onCoordsChange);
     this.on('change:pointer change:pointerScreen', this.onPointerChange);
-    this.listenTo(em, `change:device ${evDeviceUpdate}`, this.updateDevice);
+    this.listenTo(em, `change:device ${DeviceEvents.update}`, this.updateDevice);
     this.listenTo(em, PagesEvents.select, this._pageUpdated);
   }
 

packages/core/src/device_manager/index.ts

@@ -39,32 +39,14 @@ import defConfig, { DeviceManagerConfig } from './config/config';
 import Device, { DeviceProperties } from './model/Device';
 import Devices from './model/Devices';
 import DevicesView from './view/DevicesView';
-
-export const evAll = 'device';
-export const evPfx = `${evAll}:`;
-export const evSelect = `${evPfx}select`;
-export const evSelectBefore = `${evSelect}:before`;
-export const evUpdate = `${evPfx}update`;
-export const evAdd = `${evPfx}add`;
-export const evAddBefore = `${evAdd}:before`;
-export const evRemove = `${evPfx}remove`;
-export const evRemoveBefore = `${evRemove}:before`;
-const chnSel = 'change:device';
-const deviceEvents = {
-  all: evAll,
-  select: evSelect,
-  update: evUpdate,
-  add: evAdd,
-  remove: evRemove,
-  removeBefore: evRemoveBefore,
-};
+import DeviceEvents from './types';
 
 export default class DeviceManager extends ItemManagerModule<
   DeviceManagerConfig & { appendTo?: HTMLElement | string },
   Devices
 > {
   devices: Devices;
-  events!: typeof deviceEvents;
+  events!: typeof DeviceEvents;
   view?: DevicesView;
 
   Device = Device;
@@ -74,11 +56,11 @@ export default class DeviceManager extends ItemManagerModule<
   storageKey = '';
 
   constructor(em: EditorModel) {
-    super(em, 'DeviceManager', new Devices(), deviceEvents, defConfig());
+    super(em, 'DeviceManager', new Devices(), DeviceEvents, defConfig());
     this.devices = this.all;
     this.config.devices?.forEach((device) => this.add(device, { silent: true }));
     this.select(this.config.default || this.devices.at(0));
-    em.on(chnSel, this._onSelect, this);
+    em.on('change:device', this._onSelect, this);
     return this;
   }
 

packages/core/src/device_manager/types.ts

@@ -0,0 +1,62 @@
+/**{START_EVENTS}*/
+export enum DeviceEvents {
+  /**
+   * @event `device:add` New device added to the collection. The `Device` is passed as an argument.
+   * @example
+   * editor.on('device:add', ({device}) => { ... });
+   */
+  add = 'device:add',
+
+  /**
+   * @event `device:add:before` Event triggered before a new device is added.
+   * @example
+   * editor.on('device:add:before', ({device}) => { ... });
+   */
+  addBefore = 'device:add:before',
+
+  /**
+   * @event `device:remove` Device removed from the collection. The `Device` is passed as an argument.
+   * @example
+   * editor.on('device:remove', ({device}) => { ... });
+   */
+  remove = 'device:remove',
+
+  /**
+   * @event `device:remove:before` Event triggered before a device is removed.
+   * @example
+   * editor.on('device:remove:before', ({device}) => { ... });
+   */
+  removeBefore = 'device:remove:before',
+
+  /**
+   * @event `device:select` A new device is selected. The `Device` is passed as an argument.
+   * @example
+   * editor.on('device:select', ({device}) => { ... });
+   */
+  select = 'device:select',
+
+  /**
+   * @event `device:select:before` Event triggered before a new device is selected.
+   * @example
+   * editor.on('device:select:before', ({device}) => { ... });
+   */
+  selectBefore = 'device:select:before',
+
+  /**
+   * @event `device:update` Device updated. The `Device` and the object containing changes are passed as arguments.
+   * @example
+   * editor.on('device:update', ({device}) => { ... });
+   */
+  update = 'device:update',
+
+  /**
+   * @event `device` Catch-all event for all the events mentioned above.
+   * @example
+   * editor.on('device', ({ event, model, ... }) => { ... });
+   */
+  all = 'device',
+}
+/**{END_EVENTS}*/
+
+// This is necessary to prevent the TS documentation generator from breaking.
+export default DeviceEvents;

packages/core/src/dom_components/model/Component.ts

@@ -867,10 +867,14 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * Return all component's attributes
    * @return {Object}
    */
-  getAttributes(opts: { noClass?: boolean; noStyle?: boolean } = {}) {
+  getAttributes(opts: { noClass?: boolean; noStyle?: boolean; skipResolve?: boolean } = {}) {
     const { em } = this;
     const classes: string[] = [];
-    const attributes = { ...this.get('attributes') };
+    const dynamicValues = opts.skipResolve ? this.dataResolverWatchers.getDynamicAttributesDefs() : {};
+    const attributes = {
+      ...this.get('attributes'),
+      ...dynamicValues,
+    };
     const sm = em?.Selectors;
     const id = this.getId();
 

packages/core/src/trait_manager/model/Trait.ts

@@ -266,6 +266,7 @@ export default class Trait extends Model<TraitProperties> {
     const getValue = this.get('getValue');
     let value;
 
+    const skipResolve = opts.skipResolve;
     if (getValue) {
       value = getValue({
         editor: em?.getEditor()!,
@@ -274,8 +275,9 @@ export default class Trait extends Model<TraitProperties> {
       });
     } else if (this.changeProp) {
       value = component.get(name);
+      if (skipResolve) value = component.dataResolverWatchers.getPropsDefsOrValues({ [name]: value })[name];
     } else {
-      value = component.getAttributes()[name];
+      value = component.getAttributes({ skipResolve })[name];
     }
 
     if (opts.useType) {

packages/core/src/trait_manager/types.ts

@@ -162,6 +162,13 @@ export interface TraitGetValueOptions {
    * @default false
    */
   useType?: boolean;
+
+  /**
+   * If false, return the value
+   * If true and the value is a data resolver, return the data resolver props
+   * @default false
+   */
+  skipResolve?: boolean;
 }
 
 export interface TraitOption {