Add noAssets config option to Asset Manager

index.html

@@ -831,11 +831,6 @@
       fromElement: true,
       clearOnRender: 0,
 
-      storageManager: {
-        autoload: 1,
-        storeComponents: 1,
-        storeStyles: 1,
-      },
 
       commands:     {
           defaults: [{
@@ -1268,7 +1263,6 @@
       command:  function(editor, sender) {
         if(sender) sender.set('active', false);
         if(confirm('Are you sure to clean the canvas?')) {
-          editor.CssComposer.getAll().reset();
           editor.DomComponents.clear();
           setTimeout(function() {
             localStorage.clear();

package.json

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

src/asset_manager/config/config.js

@@ -2,6 +2,10 @@ module.exports =  {
   // Default assets
   assets: [],
 
+  // Content to add where there is no assets to show
+  // eg. 'No <b>assets</b> here, drag to upload'
+  noAssets: '',
+
   // Style prefix
   stylePrefix: 'am-',
 

src/asset_manager/index.js

@@ -249,12 +249,12 @@ module.exports = () => {
 
     /**
      * Render assets
-     * @param  {Boolean} f Force to render, otherwise cached version will be returned
+     * @param  {array} assets Assets to render, without the argument will render
+     *                        all global assets
      * @return {HTMLElement}
-     * @private
      */
-    render(assets = []) {
+    render(assets) {
-      const toRender = assets.length ? assets : this.getAll().models;
+      const toRender = assets || this.getAll().models;
       am.collection.reset(toRender);
       return this.getContainer();
     },

src/asset_manager/view/AssetsView.js

@@ -138,17 +138,15 @@ module.exports = Backbone.View.extend({
   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.collection.each((model) => {
-      this.addAsset(model, fragment);
-    });
-
     this.$el.append(fuRendered).append(this.template(this));
     this.el.className = `${ppfx}asset-manager`;
-    this.$el.find(`.${pfx}assets`).append(fragment);
+    const assetsEl = this.$el.find(`.${pfx}assets`);
+    assetsEl.append(fragment.childNodes.length ? fragment : noAssets);
     return this;
   }
 });