Merge branch 'GrapesJS:dev' into dev

Author: bernesto

docs/api/assets.md

@@ -19,18 +19,71 @@ const assetManager = editor.AssetManager;
 ```
 
 ## Available Events
+* `asset:add` New asset added to the collection. The [Asset] is passed as an argument to the callback.
 
-*   `asset:open` - Asset Manager opened.
-*   `asset:close` - Asset Manager closed.
-*   `asset:add` - Asset added. The [Asset] is passed as an argument to the callback.
-*   `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback.
-*   `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback.
-*   `asset:upload:start` - Before the upload is started.
-*   `asset:upload:end` - After the upload is ended.
-*   `asset:upload:error` - On any error in upload, passes the error as an argument.
-*   `asset:upload:response` - On upload response, passes the result as an argument.
-*   `asset` - 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.
-*   `asset:custom` - Event for handling custom Asset Manager UI.
+```javascript
+editor.on('asset:add', (asset) => { ... });
+```
+
+* `asset:remove` Asset removed from the collection. The [Asset] is passed as an argument to the callback.
+
+```javascript
+editor.on('asset:remove', (asset) => { ... });
+```
+
+* `asset:update` Asset updated. The [Asset] and the object containing changes are passed as arguments to the callback.
+
+```javascript
+editor.on('asset:update', (asset, updatedProps) => { ... });
+```
+
+* `asset:open` Asset Manager opened.
+
+```javascript
+editor.on('asset:open', () => { ... });
+```
+
+* `asset:close` Asset Manager closed.
+
+```javascript
+editor.on('asset:close', () => { ... });
+```
+
+* `asset:upload:start` Asset upload start.
+
+```javascript
+editor.on('asset:upload:start', () => { ... });
+```
+
+* `asset:upload:end` Asset upload end.
+
+```javascript
+editor.on('asset:upload:end', (result) => { ... });
+```
+
+* `asset:upload:error` Asset upload error.
+
+```javascript
+editor.on('asset:upload:error', (error) => { ... });
+```
+
+* `asset:upload:response` Asset upload response.
+
+```javascript
+editor.on('asset:upload:response', (res) => { ... });
+```
+
+* `asset:custom` Event to use in case of [custom Asset Manager UI](https://grapesjs.com/docs/modules/Assets.html#customization).
+
+```javascript
+editor.on('asset:custom', ({ container, assets, ... }) => { ... });
+```
+
+* `asset` 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('asset', ({ event, model, ... }) => { ... });
+```
 
 ## Methods
 
@@ -160,7 +213,7 @@ Remove asset
 ### Parameters
 
 *   `asset` **([String][13] | [Asset])** Asset or asset URL
-*   `opts` **Record<[string][13], any>?** 
+*   `opts` **RemoveOptions?** 
 
 ### Examples
 

src/asset_manager/index.ts

@@ -14,18 +14,7 @@
  * const assetManager = editor.AssetManager;
  * ```
  *
- * ## Available Events
- * * `asset:open` - Asset Manager opened.
- * * `asset:close` - Asset Manager closed.
- * * `asset:add` - Asset added. The [Asset] is passed as an argument to the callback.
- * * `asset:remove` - Asset removed. The [Asset] is passed as an argument to the callback.
- * * `asset:update` - Asset updated. The updated [Asset] and the object containing changes are passed as arguments to the callback.
- * * `asset:upload:start` - Before the upload is started.
- * * `asset:upload:end` - After the upload is ended.
- * * `asset:upload:error` - On any error in upload, passes the error as an argument.
- * * `asset:upload:response` - On upload response, passes the result as an argument.
- * * `asset` - 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.
- * * `asset:custom` - Event for handling custom Asset Manager UI.
+ * {REPLACE_EVENTS}
  *
  * ## Methods
  * * [open](#open)
@@ -45,67 +34,20 @@
 
 import { debounce, isFunction } from 'underscore';
 import { ItemManagerModule } from '../abstract/Module';
+import { AddOptions, RemoveOptions } from '../common';
 import EditorModel from '../editor/model/Editor';
+import { ProjectData } from '../storage_manager';
 import defaults, { AssetManagerConfig } from './config/config';
 import Asset from './model/Asset';
 import Assets from './model/Assets';
+import AssetsEvents, { AssetOpenOptions } from './types';
 import AssetsView from './view/AssetsView';
 import FileUploaderView from './view/FileUploader';
 
-export type AssetEvent =
-  | 'asset'
-  | 'asset:open'
-  | 'asset:close'
-  | 'asset:add'
-  | 'asset:remove'
-  | 'asset:update'
-  | 'asset:custom'
-  | 'asset:upload:start'
-  | 'asset:upload:end'
-  | 'asset:upload:error'
-  | 'asset:upload:response';
-
-export const evAll = 'asset';
-export const evPfx = `${evAll}:`;
-export const evSelect = `${evPfx}select`;
-export const evUpdate = `${evPfx}update`;
-export const evAdd = `${evPfx}add`;
-export const evRemove = `${evPfx}remove`;
-export const evRemoveBefore = `${evRemove}:before`;
-export const evCustom = `${evPfx}custom`;
-export const evOpen = `${evPfx}open`;
-export const evClose = `${evPfx}close`;
-export const evUpload = `${evPfx}upload`;
-export const evUploadStart = `${evUpload}:start`;
-export const evUploadEnd = `${evUpload}:end`;
-export const evUploadError = `${evUpload}:error`;
-export const evUploadRes = `${evUpload}:response`;
-const assetCmd = 'open-assets';
-const assetEvents = {
-  all: evAll,
-  select: evSelect,
-  update: evUpdate,
-  add: evAdd,
-  remove: evRemove,
-  removeBefore: evRemoveBefore,
-  custom: evCustom,
-  open: evOpen,
-  close: evClose,
-  uploadStart: evUploadStart,
-  uploadEnd: evUploadEnd,
-  uploadError: evUploadError,
-  uploadResponse: evUploadRes,
-};
-
 // TODO
 type AssetProps = Record<string, any>;
 
-type OpenOptions = {
-  select?: (asset: Asset, complete: boolean) => void;
-  types?: string[];
-  accept?: string;
-  target?: any;
-};
+const assetCmd = 'open-assets';
 
 export default class AssetManager extends ItemManagerModule<AssetManagerConfig, Assets> {
   storageKey = 'assets';
@@ -115,7 +57,7 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
   am?: AssetsView;
   fu?: FileUploaderView;
   _bhv?: any;
-  events!: typeof assetEvents;
+  events = AssetsEvents;
 
   /**
    * Initialize module
@@ -124,11 +66,10 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
    */
   constructor(em: EditorModel) {
     // @ts-ignore
-    super(em, 'AssetManager', new Assets([], em), assetEvents, defaults);
+    super(em, 'AssetManager', new Assets([], em), AssetsEvents, defaults);
     const { all, config } = this;
     // @ts-ignore
     this.assetsVis = new Assets([]);
-    // @ts-ignore
     const ppfx = config.pStylePrefix;
     if (ppfx) {
       config.stylePrefix = `${ppfx}${config.stylePrefix}`;
@@ -143,40 +84,6 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
     return this;
   }
 
-  __propEv(ev: string, ...data: any[]) {
-    this.em.trigger(ev, ...data);
-    this.getAll().trigger(ev, ...data);
-  }
-
-  __trgCustom() {
-    const bhv = this.__getBehaviour();
-    const custom = this.getConfig().custom;
-
-    if (!bhv.container && !(custom as any).open) {
-      return;
-    }
-    this.em.trigger(this.events.custom, this.__customData());
-  }
-
-  __customData() {
-    const bhv = this.__getBehaviour();
-    return {
-      am: this as AssetManager,
-      open: this.isOpen(),
-      assets: this.getAll().models,
-      types: bhv.types || [],
-      container: bhv.container,
-      close: () => this.close(),
-      remove: (asset: string | Asset, opts?: Record<string, any>) => this.remove(asset, opts),
-      select: (asset: Asset, complete: boolean) => {
-        const res = this.add(asset);
-        isFunction(bhv.select) && bhv.select(res, complete);
-      },
-      // extra
-      options: bhv.options || {},
-    };
-  }
-
   /**
    * Open the asset manager.
    * @param {Object} [options] Options for the asset manager.
@@ -197,7 +104,7 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
    * // with your custom types (you should have assets with those types declared)
    * assetManager.open({ types: ['doc'], ... });
    */
-  open(options: OpenOptions = {}) {
+  open(options: AssetOpenOptions = {}) {
     const cmd = this.em.Commands;
     cmd.run(assetCmd, {
       types: ['image'],
@@ -246,7 +153,7 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
    * });
    * assetManager.add([{ src: 'img2.jpg' }, { src: 'img2.png' }]);
    */
-  add(asset: string | AssetProps | (string | AssetProps)[], opts: Record<string, any> = {}) {
+  add(asset: string | AssetProps | (string | AssetProps)[], opts: AddOptions = {}) {
     // Put the model at the beginning
     if (typeof opts.at == 'undefined') {
       opts.at = 0;
@@ -292,15 +199,15 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
    * const asset = assetManager.get('http://img.jpg');
    * assetManager.remove(asset);
    */
-  remove(asset: string | Asset, opts?: Record<string, any>) {
+  remove(asset: string | Asset, opts?: RemoveOptions) {
     return this.__remove(asset, opts);
   }
 
   store() {
     return this.getProjectData();
   }
 
-  load(data: Record<string, any>) {
+  load(data: ProjectData) {
     return this.loadProjectData(data);
   }
 
@@ -462,6 +369,40 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
     this.config.onDblClick = func;
   }
 
+  __propEv(ev: string, ...data: any[]) {
+    this.em.trigger(ev, ...data);
+    this.getAll().trigger(ev, ...data);
+  }
+
+  __trgCustom() {
+    const bhv = this.__getBehaviour();
+    const custom = this.getConfig().custom;
+
+    if (!bhv.container && !(custom as any).open) {
+      return;
+    }
+    this.em.trigger(this.events.custom, this.__customData());
+  }
+
+  __customData() {
+    const bhv = this.__getBehaviour();
+    return {
+      am: this as AssetManager,
+      open: this.isOpen(),
+      assets: this.getAll().models,
+      types: bhv.types || [],
+      container: bhv.container,
+      close: () => this.close(),
+      remove: (asset: string | Asset, opts?: Record<string, any>) => this.remove(asset, opts),
+      select: (asset: Asset, complete: boolean) => {
+        const res = this.add(asset);
+        isFunction(bhv.select) && bhv.select(res, complete);
+      },
+      // extra
+      options: bhv.options || {},
+    };
+  }
+
   __behaviour(opts = {}) {
     return (this._bhv = {
       ...(this._bhv || {}),