Refactor asset events

src/asset_manager/index.ts

@@ -14,18 +14,7 @@
  * const assetManager = editor.AssetManager;
  * ```
  *
- * ## Available Events
+ * {REPLACE_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.
  *
  * ## Methods
  * * [open](#open)
@@ -51,61 +40,12 @@ import Asset from './model/Asset';
 import Assets from './model/Assets';
 import AssetsView from './view/AssetsView';
 import FileUploaderView from './view/FileUploader';
-
+import AssetsEvents, { AssetOpenOptions } from './types';
-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 = {
+const assetCmd = 'open-assets';
-  select?: (asset: Asset, complete: boolean) => void;
-  types?: string[];
-  accept?: string;
-  target?: any;
-};
 
 export default class AssetManager extends ItemManagerModule<AssetManagerConfig, Assets> {
   storageKey = 'assets';
@@ -115,7 +55,7 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
   am?: AssetsView;
   fu?: FileUploaderView;
   _bhv?: any;
-  events!: typeof assetEvents;
+  events = AssetsEvents;
 
   /**
    * Initialize module
@@ -124,11 +64,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}`;
@@ -197,7 +136,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'],

src/asset_manager/types.ts

@@ -0,0 +1,95 @@
+import Asset from './model/Asset';
+
+export type AssetEvent = `${AssetsEvents}`;
+
+export interface AssetOpenOptions {
+  select?: (asset: Asset, complete: boolean) => void;
+  types?: string[];
+  accept?: string;
+  target?: any;
+}
+
+/**{START_EVENTS}*/
+export enum AssetsEvents {
+  /**
+   * @event `asset:add` New asset added to the collection. The [Asset] is passed as an argument to the callback.
+   * @example
+   * editor.on('asset:add', (asset) => { ... });
+   */
+  add = 'asset:add',
+
+  /**
+   * @event `asset:remove` Asset removed from the collection. The [Asset] is passed as an argument to the callback.
+   * @example
+   * editor.on('asset:remove', (asset) => { ... });
+   */
+  remove = 'asset:remove',
+  removeBefore = 'asset:remove:before',
+
+  /**
+   * @event `asset:update` Asset updated. The [Asset] and the object containing changes are passed as arguments to the callback.
+   * @example
+   * editor.on('asset:update', (asset, updatedProps) => { ... });
+   */
+  update = 'asset:update',
+
+  /**
+   * @event `asset:open` Asset Manager opened.
+   * @example
+   * editor.on('asset:open', () => { ... });
+   */
+  open = 'asset:open',
+
+  /**
+   * @event `asset:close` Asset Manager closed.
+   * @example
+   * editor.on('asset:close', () => { ... });
+   */
+  close = 'asset:close',
+
+  /**
+   * @event `asset:upload:start` Asset upload start.
+   * @example
+   * editor.on('asset:upload:start', () => { ... });
+   */
+  uploadStart = 'asset:upload:start',
+
+  /**
+   * @event `asset:upload:end` Asset upload end.
+   * @example
+   * editor.on('asset:upload:end', (result) => { ... });
+   */
+  uploadEnd = 'asset:upload:end',
+
+  /**
+   * @event `asset:upload:error` Asset upload error.
+   * @example
+   * editor.on('asset:upload:error', (error) => { ... });
+   */
+  uploadError = 'asset:upload:error',
+
+  /**
+   * @event `asset:upload:response` Asset upload response.
+   * @example
+   * editor.on('asset:upload:response', (res) => { ... });
+   */
+  uploadResponse = 'asset:upload:response',
+
+  /**
+   * @event `asset:custom` Event to use in case of [custom Asset Manager UI](https://grapesjs.com/docs/modules/Assets.html#customization).
+   * @example
+   * editor.on('asset:custom', ({ container, assets, ... }) => { ... });
+   */
+  custom = 'asset:custom',
+
+  /**
+   * @event `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.
+   * @example
+   * editor.on('asset', ({ event, model, ... }) => { ... });
+   */
+  all = 'asset',
+}
+/**{END_EVENTS}*/
+
+// need this to avoid the TS documentation generator to break
+export default AssetsEvents;

src/asset_manager/view/FileUploader.ts

@@ -1,3 +1,4 @@
+import AssetManager from '..';
 import { View } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import fetch from '../../utils/fetch';
@@ -18,7 +19,7 @@ export default class FileUploaderView extends View {
   pfx: string;
   ppfx: string;
   em: EditorModel;
-  module: any;
+  module: AssetManager;
   target: any;
   uploadId: string;
   disabled: boolean;
@@ -80,7 +81,7 @@ export default class FileUploaderView extends View {
    */
   onUploadStart() {
     const { module } = this;
-    module && module.__propEv('asset:upload:start');
+    module?.__propEv(module.events.uploadStart);
   }
 
   /**
@@ -90,7 +91,7 @@ export default class FileUploaderView extends View {
    */
   onUploadEnd(res: any) {
     const { $el, module } = this;
-    module && module.__propEv('asset:upload:end', res);
+    module?.__propEv(module.events.uploadEnd, res);
     const input = $el.find('input');
     input && input.val('');
   }
@@ -104,7 +105,7 @@ export default class FileUploaderView extends View {
     const { module } = this;
     console.error(err);
     this.onUploadEnd(err);
-    module && module.__propEv('asset:upload:error', err);
+    module?.__propEv(module.events.uploadError, err);
   }
 
   /**
@@ -121,7 +122,7 @@ export default class FileUploaderView extends View {
       json = text;
     }
 
-    module && module.__propEv('asset:upload:response', json);
+    module?.__propEv(module.events.uploadResponse, json);
 
     if (config.autoAdd && target) {
       target.add(json.data, { at: 0 });

src/editor/index.ts

@@ -55,7 +55,8 @@
  * @module docsjs.Editor
  */
 import { IBaseModule } from '../abstract/Module';
-import AssetManager, { AssetEvent } from '../asset_manager';
+import AssetManager from '../asset_manager';
+import { AssetEvent } from '../asset_manager/types';
 import BlockManager, { BlockEvent } from '../block_manager';
 import CanvasModule, { CanvasEvent } from '../canvas';
 import CodeManagerModule from '../code_manager';