From 4fd99b091c9554c2bccdb58590f9452e2b3eda63 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 17 Sep 2021 16:24:18 +0200
Subject: [PATCH] Update how custom asset event is triggered

---
 docs/modules/Assets.md          |  2 +-
 src/asset_manager/index.js      | 12 +++++++-----
 src/commands/view/OpenAssets.js | 18 +++++++++++++++---
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/docs/modules/Assets.md b/docs/modules/Assets.md
index fa3f36e8f..b9feb3f49 100644
--- a/docs/modules/Assets.md
+++ b/docs/modules/Assets.md
@@ -345,7 +345,7 @@ editor.on('asset:custom', props => {
 
 Here an example of using custom Asset Manager with a Vue component.
 
-<demo-viewer value="x70amv3f" height="500" darkcode/>
+<demo-viewer value="wbj4tmqk" height="500" darkcode/>
 
 
 <!--
diff --git a/src/asset_manager/index.js b/src/asset_manager/index.js
index f22d763df..aea16c3af 100644
--- a/src/asset_manager/index.js
+++ b/src/asset_manager/index.js
@@ -113,11 +113,11 @@ export default () => {
       this.getAll().trigger(ev, ...data);
     },
 
-    __onAllEvent() {
+    __onAllEvent: debounce(function() {
       this.__trgCustom();
-    },
+    }),
 
-    __trgCustom: debounce(function() {
+    __trgCustom() {
       const bhv = this.__getBehaviour();
       if (!bhv.container && !this.getConfig('custom').open) {
         return;
@@ -133,9 +133,11 @@ export default () => {
         select: (asset, complete) => {
           const res = this.add(asset);
           isFunction(bhv.select) && bhv.select(res, complete);
-        }
+        },
+        // extra
+        options: bhv.options || {}
       });
-    }),
+    },
 
     /**
      * Open the asset manager.
diff --git a/src/commands/view/OpenAssets.js b/src/commands/view/OpenAssets.js
index 0846a1a98..fe330b66e 100644
--- a/src/commands/view/OpenAssets.js
+++ b/src/commands/view/OpenAssets.js
@@ -1,13 +1,22 @@
+import { isFunction } from 'underscore';
 import { createEl } from '../../utils/dom';
 
 export default {
   open(content) {
-    const { editor, title } = this;
+    const { editor, title, config } = this;
+    const { custom } = config;
+    if (isFunction(custom.open)) {
+      return custom.open(content);
+    }
     const { Modal } = editor;
     Modal.open({ title, content }).onceClose(() => editor.stopCommand(this.id));
   },
 
-  close() {
+  close(content) {
+    const { custom } = this.config;
+    if (isFunction(custom.close)) {
+      return custom.close(content);
+    }
     const { Modal } = this.editor;
     Modal && Modal.close();
   },
@@ -18,6 +27,7 @@ export default {
     const { types = [], accept, select } = opts;
     this.title = opts.modalTitle || editor.t('assetManager.modalTitle') || '';
     this.editor = editor;
+    this.config = config;
 
     am.setTarget(opts.target);
     am.onClick(opts.onClick);
@@ -25,11 +35,13 @@ export default {
     am.onSelect(opts.onSelect);
     am.__behaviour({
       select,
-      types
+      types,
+      options: opts
     });
 
     if (config.custom) {
       this.rendered = this.rendered || createEl('div');
+      this.rendered.className = `${config.stylePrefix}custom-wrp`;
       am.__behaviour({ container: this.rendered });
       am.__trgCustom();
     } else {