diff --git a/docs/modules/Assets.md b/docs/modules/Assets.md index ac1911dad..2f50bdeec 100644 --- a/docs/modules/Assets.md +++ b/docs/modules/Assets.md @@ -362,6 +362,12 @@ const editor = grapesjs.init({ // `props` are the same used in `asset:custom` event // ... // Init and open your external Asset Manager + // ... + // IMPORTANT: + // When the external library is closed you have to comunicate + // this state back to the editor, otherwise GrapesJS will think + // the Asset Manager is still open. + // example: myAssetManager.on('close', () => props.close()) }, close(props) { // Close the external Asset Manager diff --git a/src/asset_manager/index.js b/src/asset_manager/index.js index aea16c3af..b39d3ae2f 100644 --- a/src/asset_manager/index.js +++ b/src/asset_manager/index.js @@ -122,7 +122,12 @@ export default () => { if (!bhv.container && !this.getConfig('custom').open) { return; } - this.em.trigger(this.events.custom, { + this.em.trigger(this.events.custom, this.__customData()); + }, + + __customData() { + const bhv = this.__getBehaviour(); + return { am: this, open: this.isOpen(), assets: this.getAll().models, @@ -136,7 +141,7 @@ export default () => { }, // extra options: bhv.options || {} - }); + }; }, /** diff --git a/src/commands/view/OpenAssets.js b/src/commands/view/OpenAssets.js index fe330b66e..0c18d9f5e 100644 --- a/src/commands/view/OpenAssets.js +++ b/src/commands/view/OpenAssets.js @@ -3,19 +3,19 @@ import { createEl } from '../../utils/dom'; export default { open(content) { - const { editor, title, config } = this; + const { editor, title, config, am } = this; const { custom } = config; if (isFunction(custom.open)) { - return custom.open(content); + return custom.open(am.__customData()); } const { Modal } = editor; Modal.open({ title, content }).onceClose(() => editor.stopCommand(this.id)); }, - close(content) { + close() { const { custom } = this.config; if (isFunction(custom.close)) { - return custom.close(content); + return custom.close(this.am.__customData()); } const { Modal } = this.editor; Modal && Modal.close(); @@ -28,6 +28,7 @@ export default { this.title = opts.modalTitle || editor.t('assetManager.modalTitle') || ''; this.editor = editor; this.config = config; + this.am = am; am.setTarget(opts.target); am.onClick(opts.onClick);