Update Asset Manager modal and do not rerender it

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.9.37",
+  "version": "0.9.38",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/asset_manager/config/config.js

@@ -1,10 +1,16 @@
 module.exports =  {
   // Default assets
+  // eg. [
+  //  'https://...image1.png',
+  //  'https://...image2.png',
+  //  {type: 'image', src: 'https://...image3.png', someOtherCustomProp: 1},
+  //  ..
+  // ]
   assets: [],
 
   // Content to add where there is no assets to show
   // eg. 'No <b>assets</b> here, drag to upload'
-  noAssets: 'No assets',
+  noAssets: '',
 
   // Style prefix
   stylePrefix: 'am-',
@@ -67,4 +73,7 @@ module.exports =  {
 
   // Any dropzone content to append inside dropzone element
   dropzoneContent: '',
+
+  // Default title for the asset manager modal
+  modalTitle: 'Select Image',
 };

src/asset_manager/index.js

@@ -255,6 +255,11 @@ module.exports = () => {
      */
     render(assets) {
       const toRender = assets || this.getAll().models;
+
+      if (!am.rendered) {
+        am.render();
+      }
+
       am.collection.reset(toRender);
       return this.getContainer();
     },

src/asset_manager/model/AssetImage.js

@@ -2,11 +2,11 @@ const Asset = require('./Asset');
 
 module.exports = Asset.extend({
 
-  defaults: _.extend({}, Asset.prototype.defaults, {
-    type:     'image',
-    unitDim:  'px',
-    height:    0,
-    width:    0,
+  defaults: Object.assign({}, Asset.prototype.defaults, {
+    type: 'image',
+    unitDim: 'px',
+    height: 0,
+    width: 0,
   }),
 
 });

src/asset_manager/view/AssetImageView.js

@@ -57,13 +57,15 @@ module.exports = require('./AssetView').extend({
    * @private
    * */
   handleDblClick() {
+    const em = this.em;
     var onDblClick = this.config.onDblClick;
     var model = this.model;
 
     if (typeof onDblClick === 'function') {
       onDblClick(model);
     } else {
       this.updateTarget(model.get('src'));
+      em && em.get('Modal').close();
     }
 
     var onSelect = this.collection.onSelect;

src/asset_manager/view/AssetView.js

@@ -3,9 +3,11 @@ module.exports = Backbone.View.extend({
   initialize(o = {}) {
     this.options = o;
     this.collection = o.collection;
-    this.config = o.config || {};
-    this.pfx = this.config.stylePrefix || '';
-    this.ppfx = this.config.pStylePrefix || '';
+    const config = o.config || {};
+    this.config = config;
+    this.pfx = config.stylePrefix || '';
+    this.ppfx = config.pStylePrefix || '';
+    this.em = config.em;
     this.className = this.pfx + 'asset';
     this.listenTo(this.model, 'destroy remove', this.remove);
     const init = this.init && this.init.bind(this);

src/asset_manager/view/AssetsView.js

@@ -38,7 +38,7 @@ module.exports = Backbone.View.extend({
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
     const coll = this.collection;
-    this.listenTo(coll, 'reset', this.render);
+    this.listenTo(coll, 'reset', this.renderAssets);
     this.listenTo(coll, 'add', this.addToAsset);
     this.listenTo(coll, 'remove', this.removedAsset);
     this.listenTo(coll, 'deselectAll', this.deselectAll);
@@ -166,18 +166,22 @@ module.exports = Backbone.View.extend({
     this.$el.find(`.${pfx}highlight`).removeClass(`${pfx}highlight`);
   },
 
+  renderAssets() {
+    const fragment = document.createDocumentFragment();
+    const assets = this.$el.find(`.${this.pfx}assets`);
+    assets.empty();
+    this.toggleNoAssets(this.collection.length);
+    this.collection.each((model) => this.addAsset(model, fragment));
+    assets.append(fragment);
+  },
+
   render() {
-    const pfx = this.pfx;
-    const ppfx = this.ppfx;
-    //const noAssets = this.config.noAssets;
     const fuRendered = this.options.fu.render().el;
-    const fragment = document.createDocumentFragment();
     this.$el.empty();
-    this.collection.each((model) => this.addAsset(model, fragment));
     this.$el.append(fuRendered).append(this.template(this));
-    this.el.className = `${ppfx}asset-manager`;
-    this.toggleNoAssets(this.collection.length);
-    this.$el.find(`.${pfx}assets`).append(fragment);
+    this.el.className = `${this.ppfx}asset-manager`;
+    this.renderAssets();
+    this.rendered = 1;
     return this;
   }
 });

src/commands/view/OpenAssets.js

@@ -1,21 +1,24 @@
 module.exports = {
 
-  run(editor, sender, opts) {
-    var opt = opts || {};
-    var config = editor.getConfig();
-    var modal = editor.Modal;
-    var assetManager = editor.AssetManager;
+  run(editor, sender, opts = {}) {
+    const modal = editor.Modal;
+    const am = editor.AssetManager;
+    const config = am.getConfig();
+    const title = opts.modalTitle || config.modalTitle || '';
 
-    assetManager.onClick(opt.onClick);
-    assetManager.onDblClick(opt.onDblClick);
+    am.setTarget(opts.target);
+    am.onClick(opts.onClick);
+    am.onDblClick(opts.onDblClick);
+    am.onSelect(opts.onSelect);
 
-    // old API
-    assetManager.setTarget(opt.target);
-    assetManager.onSelect(opt.onSelect);
-    assetManager.render();
+    if (!this.rendered) {
+      console.log('render now');
+      am.render();
+      this.rendered = 1;
+    }
 
-    modal.setTitle(opt.modalTitle || 'Select image');
-    modal.setContent(assetManager.getContainer());
+    modal.setTitle(title);
+    modal.setContent(am.getContainer());
     modal.open();
   },
 

src/style_manager/view/PropertyFileView.js

@@ -125,7 +125,7 @@ module.exports = PropertyView.extend({
 
     if(editor) {
       this.modal.setTitle('Select image');
-      this.modal.setContent(this.am.render());
+      this.modal.setContent(this.am.getContainer());
       this.am.setTarget(null);
       editor.runCommand('open-assets', {
         target: this.model,