Refactor the initialization and the loading, make it a bit clearer

In src/grapesjs/index.js you can see now `editor.getModel().loadOnStart()`
does the work and load Components/Styles after plugins.
This will allow also to attach custom types easier in all modules

src/asset_manager/index.js

@@ -327,7 +327,7 @@ module.exports = () => {
       c.dropzone && fu.initDropzone(editorView);
 
       // Reset assets for custom types
-      const last = this.lastLoad;
+      const last = this.lastLoad || {};
       const assets = last.length ? last : c.assets;
       const all = this.getAll();
       all.reset();

src/css_composer/index.js

@@ -79,7 +79,6 @@ module.exports = () => {
 
         c.sm = c.em; // TODO Refactor
         rules = new CssRules([], c);
-        rules.add(c.rules);
 
         rulesView = new CssRulesView({
           collection: rules,
@@ -93,8 +92,16 @@ module.exports = () => {
        * @private
        */
       onLoad() {
-        if(c.stm && c.stm.isAutosave())
-          c.em.listenRules(this.getAll());
+        rules.add(c.rules);
+      },
+
+      /**
+       * Do stuff after load
+       * @param  {Editor} em
+       * @private
+       */
+      postLoad(em) {
+        em.listenRules(this.getAll());
       },
 
       /**
@@ -106,19 +113,25 @@ module.exports = () => {
        */
       load(data) {
         var d = data || '';
-        if(!d && c.stm)
+
+        if (!d && c.stm) {
           d = c.em.getCacheLoad();
-        var obj = '';
+        }
+
+        var obj = d.styles || '';
+
         if(d.styles) {
-          try{
+          try {
             obj =  JSON.parse(d.styles);
-          }catch(err){}
+          } catch (err) {}
         } else if (d.css) {
           obj = c.em.get('Parser').parseCss(d.css);
         }
 
-        if(obj)
+        if (obj) {
           rules.reset(obj);
+        }
+
         return obj;
       },
 

src/dom_components/index.js

@@ -184,6 +184,7 @@ module.exports = () => {
         // Have to put back the real object of components
         if (em) {
           em.config.components = components;
+          c.components = components;
         }
       }
 
@@ -194,10 +195,6 @@ module.exports = () => {
       });
       component.set({ attributes: {id: 'wrapper'}});
 
-      if(em && !em.config.loadCompsOnRender) {
-        component.get('components').add(components);
-      }
-
       componentView = new ComponentView({
         model: component,
         config: c,
@@ -211,10 +208,16 @@ module.exports = () => {
      * @private
      */
     onLoad() {
-      if(c.stm && c.stm.isAutosave()){
-        c.em.initUndoManager();
-        c.em.initChildrenComp(this.getWrapper());
-      }
+      this.getComponents().reset(c.components);
+    },
+
+    /**
+     * Do stuff after load
+     * @param  {Editor} em
+     * @private
+     */
+    postLoad(em) {
+      em.initChildrenComp(this.getWrapper());
     },
 
     /**

src/editor/config/config.js

@@ -20,9 +20,6 @@ module.exports = {
   // Show paddings and margins on selected component
   showOffsetsSelected: false,
 
-  // Clear the canvas when editor.render() is called
-  clearOnRender: false,
-
   // On creation of a new Component (via object), if the 'style' attribute is not
   // empty, all those roles will be moved in its new class
   forceClass: true,
@@ -65,10 +62,6 @@ module.exports = {
   // Ending tag for variable inside scripts in Components
   tagVarEnd: ' ]}',
 
-  // This option makes available custom component types also for loaded
-  // elements inside canvas
-  loadCompsOnRender: 1,
-
   // Return JS of components inside HTML from 'editor.getHtml()'
   jsInHtml: true,
 

src/editor/index.js

@@ -560,7 +560,7 @@ module.exports = config => {
       // Do post render stuff after the iframe is loaded otherwise it'll
       // be empty during tests
       em.on('loaded', () => {
-        em.get('modules').forEach((module) => {
+        em.get('modules').forEach(module => {
           module.postRender && module.postRender(editorView);
         });
       });

src/editor/model/Editor.js

@@ -30,7 +30,7 @@ module.exports = Backbone.Model.extend({
     designerMode: false,
     selectedComponent: null,
     previousModel: null,
-    changesCount:  0,
+    changesCount: 0,
     storables: [],
     modules: [],
     toLoad: [],
@@ -51,12 +51,6 @@ module.exports = Backbone.Model.extend({
       this.loadModule(name);
     }, this);
 
-    // Call modules with onLoad callback
-    this.get('toLoad').forEach(M => {
-      M.onLoad();
-    });
-
-    this.loadOnStart();
     this.initUndoManager();
 
     this.on('change:selectedComponent', this.componentSelected, this);
@@ -64,14 +58,36 @@ module.exports = Backbone.Model.extend({
   },
 
   /**
-   * Load on start if it was requested
+   * Should be called after all modules and plugins are loaded
+   * @param {Function} clb
    * @private
    */
-  loadOnStart() {
+  loadOnStart(clb = null) {
     const sm = this.get('StorageManager');
 
+    // Generally, with `onLoad`, the module will try to load the data from
+    // its configurations
+    this.get('toLoad').forEach(module => {
+      module.onLoad();
+    });
+
+    // Stuff to do post load (eg. init undo manager for loaded components)
+    const postLoad = () => {
+      // I've initialized undo manager in initialize() because otherwise the
+      // editor will unable to fetch the instance via 'editor.UndoManager' but
+      // I need to cleare the stack now as it was dirtied by 'onLoad' method
+      this.um.clear();
+      this.initUndoManager();
+      this.get('modules').forEach(module =>
+        module.postLoad && module.postLoad(this)
+      );
+      clb && clb();
+    };
+
     if (sm && sm.getConfig().autoload) {
-      this.load();
+      this.load(postLoad);
+    } else {
+      postLoad();
     }
   },
 
@@ -154,28 +170,27 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   listenRule(model) {
-    this.stopListening(model, 'change:style', this.componentsUpdated);
-    this.listenTo(model, 'change:style', this.componentsUpdated);
+    this.stopListening(model, 'change:style', this.handleUpdates);
+    this.listenTo(model, 'change:style', this.handleUpdates);
   },
 
   /**
-   * Triggered when something in components is changed
-   * @param  {Object}  model
-   * @param  {Mixed}    val  Value
-   * @param  {Object}  opt  Options
+   * This method handles updates on the editor and tries to store them
+   * if requested and if the changesCount is exceeded
+   * @param  {Object} model
+   * @param  {any} val  Value
+   * @param  {Object} opt  Options
    * @private
    * */
-  componentsUpdated(model, val, opt) {
-    var temp = opt ? opt.temporary : 0;
-    if (temp) {
-      //component has been added temporarily - do not update storage or record changes
+  handleUpdates(model, val, opt = {}) {
+    // Component has been added temporarily - do not update storage or record changes
+    if (opt.temporary) {
       return;
     }
 
     timedInterval && clearInterval(timedInterval);
     timedInterval = setTimeout(() => {
       var count = this.get('changesCount') + 1;
-      var avoidStore = opt ? opt.avoidStore : 0;
       var stm = this.get('StorageManager');
       this.set('changesCount', count);
 
@@ -183,7 +198,7 @@ module.exports = Backbone.Model.extend({
         return;
       }
 
-      if (!avoidStore) {
+      if (!opt.avoidStore) {
         this.store();
       }
     }, 0);
@@ -194,10 +209,11 @@ module.exports = Backbone.Model.extend({
    * @private
    * */
   initUndoManager() {
-    if(this.um)
+    if (this.um) {
       return;
+    }
     var cmp = this.get('DomComponents');
-    if(cmp && this.config.undoManager){
+    if(cmp && this.config.undoManager) {
       var that = this;
       this.um = new UndoManager({
           register: [cmp.getComponents(), this.get('CssComposer').getAll()],
@@ -286,15 +302,15 @@ module.exports = Backbone.Model.extend({
     this.listenTo(comps, 'add', this.updateComponents);
     this.listenTo(comps, 'remove', this.rmComponents);
 
-    this.stopListening(classes, 'add remove', this.componentsUpdated);
-    this.listenTo(classes, 'add remove', this.componentsUpdated);
+    this.stopListening(classes, 'add remove', this.handleUpdates);
+    this.listenTo(classes, 'add remove', this.handleUpdates);
 
     var evn = 'change:style change:content change:attributes';
-    this.stopListening(model, evn, this.componentsUpdated);
-    this.listenTo(model, evn, this.componentsUpdated);
+    this.stopListening(model, evn, this.handleUpdates);
+    this.listenTo(model, evn, this.handleUpdates);
 
     if(!avSt)
-      this.componentsUpdated(model, val, opt);
+      this.handleUpdates(model, val, opt);
   },
 
   /**
@@ -323,7 +339,7 @@ module.exports = Backbone.Model.extend({
     var avSt  = opt ? opt.avoidStore : 0;
 
     if(!avSt)
-      this.componentsUpdated(model, val, opt);
+      this.handleUpdates(model, val, opt);
   },
 
   /**
@@ -476,15 +492,14 @@ module.exports = Backbone.Model.extend({
   /**
    * Load data from the current storage
    * @param {Function} clb Callback function
-   * @return {Object} Loaded data
    * @private
    */
-  load(clb) {
-    var result = this.getCacheLoad(1, clb);
-    this.get('storables').forEach(m => {
-      m.load(result);
+  load(clb = null) {
+    this.getCacheLoad(1, (res) => {
+      console.log('LOADED in em.load', res);
+      this.get('storables').forEach(module => module.load(res));
+      clb && clb(res);
     });
-    return result;
   },
 
   /**
@@ -513,11 +528,11 @@ module.exports = Backbone.Model.extend({
       });
     });
 
-    this.cacheLoad = sm.load(load, (loaded) => {
-      clb && clb(loaded);
-      this.trigger('storage:load', loaded);
+    sm.load(load, res => {
+      this.cacheLoad = res;
+      clb && clb(res);
+      this.trigger('storage:load', res);
     });
-    return this.cacheLoad;
   },
 
   /**

src/editor/view/EditorView.js

@@ -20,17 +20,6 @@ module.exports = Backbone.View.extend({
     var dComps = model.get('DomComponents');
     var config = model.get('Config');
 
-    if(config.loadCompsOnRender) {
-      if (config.clearOnRender) {
-        dComps.clear();
-      }
-      dComps.getComponents().reset(config.components);
-      model.loadOnStart();
-      um.clear();
-      // This will init loaded components
-      dComps.onLoad();
-    }
-
     var conf = this.conf;
     var contEl = $(conf.el || ('body ' + conf.container));
     this.$el.empty();

src/grapesjs/index.js

@@ -46,15 +46,15 @@
           c[name] = defaults[name];
       }
 
-      if(!els)
+      if (!els) {
         throw new Error("'container' is required");
+      }
 
       c.el = document.querySelector(els);
       var editor = new Editor(c).init();
 
-      // Execute plugins
+      // Load plugins
       var plugs = plugins.getAll();
-
       c.plugins.forEach((pluginId) => {
         let plugin = plugins.get(pluginId);
 
@@ -65,8 +65,12 @@
         }
       });
 
-      if(c.autorender)
-        editor.render();
+      // Execute `onLoad` on modules once all plugins are initialized.
+      // A plugin might have extended/added some custom type so this
+      // is a good point to load stuff like components, css rules, etc.
+      editor.getModel().loadOnStart();
+
+      c.autorender && editor.render();
 
       editors.push(editor);
       return editor;

src/storage_manager/index.js

@@ -197,12 +197,13 @@ module.exports = () => {
      * Load resource from the current storage by keys
      * @param  {string|Array<string>} keys Keys to load
      * @param {Function} clb Callback function
-     * @return {Object|null} Loaded resources
      * @example
-     * var data = storageManager.load(['item1', 'item2']);
-     * // data -> {item1: value1, item2: value2}
-     * var data2 = storageManager.load('item1');
-     * // data2 -> {item1: value1}
+     * storageManager.load(['item1', 'item2'], res => {
+     *  // res -> {item1: value1, item2: value2}
+     * });
+     * storageManager.load('item1', res => {
+     * // res -> {item1: value1}
+     * });
      * */
     load(keys, clb) {
       var st = this.get(this.getCurrent());
@@ -215,16 +216,16 @@ module.exports = () => {
       for (var i = 0, len = keys.length; i < len; i++)
         keysF.push(c.id + keys[i]);
 
-      var loaded = st ? st.load(keysF, clb) : {};
-
-      // Restore keys name
-      for (var itemKey in loaded){
-        var reg = new RegExp('^' + c.id + '');
-        var itemKeyR = itemKey.replace(reg, '');
-        result[itemKeyR] = loaded[itemKey];
-      }
+      st && st.load(keysF, res => {
+        // Restore keys name
+        for (var itemKey in res) {
+          var reg = new RegExp('^' + c.id + '');
+          var itemKeyR = itemKey.replace(reg, '');
+          result[itemKeyR] = res[itemKey];
+        }
 
-      return result;
+        clb && clb(result);
+      });
     },
 
     /**