diff --git a/src/asset_manager/index.ts b/src/asset_manager/index.ts index fb119b53e..ef6a6cdeb 100644 --- a/src/asset_manager/index.ts +++ b/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) @@ -51,61 +40,12 @@ import Asset from './model/Asset'; import Assets from './model/Assets'; 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, -}; +import AssetsEvents, { AssetOpenOptions } from './types'; // TODO type AssetProps = Record; -type OpenOptions = { - select?: (asset: Asset, complete: boolean) => void; - types?: string[]; - accept?: string; - target?: any; -}; +const assetCmd = 'open-assets'; export default class AssetManager extends ItemManagerModule { storageKey = 'assets'; @@ -115,7 +55,7 @@ export default class AssetManager extends ItemManagerModule 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; diff --git a/src/asset_manager/view/FileUploader.ts b/src/asset_manager/view/FileUploader.ts index b37fc4c8c..2df181131 100644 --- a/src/asset_manager/view/FileUploader.ts +++ b/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 }); diff --git a/src/editor/index.ts b/src/editor/index.ts index 184a98e2d..4e3d8b188 100644 --- a/src/editor/index.ts +++ b/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';