Update TypeableCollection and refactor EditorView

index.html

@@ -1310,21 +1310,6 @@
     });
     */
 
-    var am = editor.AssetManager;
-
-    am.addType('svg-icon', {
-      // `value` is for example the argument passed in `am.add(VALUE);`
-      isType(value) {
-        // The condition is intentionally simple
-        if (value.substring(0, 5) == '<svg ') {
-          return {
-            type: 'svg-icon',
-            svgContent: value
-          };
-        }
-      }
-    })
-
 
     // Store and load events
     editor.on('storage:load', function(e) {
@@ -1342,6 +1327,7 @@
       //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
     });
 
+
     editor.render();
     </script>
   </body>

src/asset_manager/index.js

@@ -226,7 +226,6 @@ module.exports = () => {
         this.getAll().reset(assets);
       }
 
-      this.lastLoad = assets;
       return assets;
     },
 
@@ -316,15 +315,12 @@ module.exports = () => {
       return fu;
     },
 
+    onLoad() {
+      this.getAll().reset(c.assets);
+    },
+
     postRender(editorView) {
       c.dropzone && fu.initDropzone(editorView);
-
-      // Reset assets for custom types
-      const last = this.lastLoad || {};
-      const assets = last.length ? last : c.assets;
-      const all = this.getAll();
-      all.reset();
-      all.add(assets, {silent: 1});
     },
 
     /**

src/domain_abstract/model/TypeableCollection.js

@@ -6,20 +6,23 @@ export default {
 
   initialize(models, opts) {
     this.model = (attrs = {}, options = {}) => {
-      let Model, type;
+      let Model, View, type;
 
       if (attrs && attrs.type) {
+        const baseType = this.getBaseType();
         type = this.getType(attrs.type);
-        Model = type ? type.model : this.getBaseType().model;
+        Model = type ? type.model : baseType.model;
+        View = type ? type.view : baseType.view;
       } else {
         const typeFound = this.recognizeType(attrs);
         type = typeFound.type;
         Model = type.model;
+        View = type.view;
         attrs = typeFound.attributes;
       }
 
       const model = new Model(attrs, options);
-      model.typeView = type.view;
+      model.typeView = View;
       return model;
     };
     const init = this.init && this.init.bind(this);

src/editor/view/EditorView.js

@@ -1,43 +1,35 @@
-var Backbone = require('backbone');
-
 module.exports = Backbone.View.extend({
 
   initialize() {
-    this.model.view = this;
+    const model = this.model;
-    this.pn = this.model.get('Panels');
+    model.view = this;
-    this.conf = this.model.config;
+    this.conf = model.config;
-    this.className = this.conf.stylePrefix + 'editor';
+    this.pn = model.get('Panels');
-    this.model.on('loaded', () => {
+    model.on('loaded', () => {
       this.pn.active();
-      this.model.runDefault();
+      model.runDefault();
-      setTimeout(() => this.model.trigger('load'), 0);
+      setTimeout(() => model.trigger('load'), 0);
     });
   },
 
   render() {
-    var model = this.model;
+    const model = this.model;
-    var um = model.get('UndoManager');
+    const el = this.$el;
-    var dComps = model.get('DomComponents');
+    const conf = this.conf;
-    var config = model.get('Config');
+    const contEl = $(conf.el || `body ${conf.container}`);
-
+    const pfx = conf.stylePrefix;
-    var conf = this.conf;
+    el.empty();
-    var contEl = $(conf.el || ('body ' + conf.container));
+
-    this.$el.empty();
+    if (conf.width)
-
-    if(conf.width)
       contEl.css('width', conf.width);
 
-    if(conf.height)
+    if (conf.height)
       contEl.css('height', conf.height);
 
-    // Canvas
+    el.append(model.get('Canvas').render());
-    this.$el.append(model.get('Canvas').render());
+    el.append(this.pn.render());
-
+    el.attr('class', `${pfx}editor`);
-    // Panels
+    contEl.addClass(`${pfx}editor-cont`).empty().append(el);
-    this.$el.append(this.pn.render());
-    this.$el.attr('class', this.className);
-    contEl.addClass(conf.stylePrefix + 'editor-cont');
-    contEl.empty().append(this.$el);
 
     return this;
   }

src/grapesjs/index.js

@@ -1,13 +1,11 @@
-import { isUndefined } from 'underscore';
+import { isUndefined, defaults } from 'underscore';
 
-module.exports = (config => {
+module.exports = (() => {
-  var c = config || {},
+  const defaultConfig = require('./config/config');
-  defaults = require('./config/config'),
+  const Editor = require('editor');
-  Editor = require('editor'),
+  const PluginManager = require('plugin_manager');
-  PluginManager = require('plugin_manager');
+  const plugins = new PluginManager();
-
+  const editors = [];
-  var plugins = new PluginManager();
-  var editors = [];
 
   return {
 
@@ -33,35 +31,28 @@ module.exports = (config => {
      *   style: '.hello{color: red}',
      * })
      */
-    init(config) {
+    init(config = {}) {
-      var c = config || {};
+      const els = config.container;
-      var els = c.container;
 
       // Make a missing $ more verbose
       if (isUndefined($)) {
         throw 'jQuery not found';
       }
 
-      // Set default options
-      for (var name in defaults) {
-        if (!(name in c))
-          c[name] = defaults[name];
-      }
-
       if (!els) {
         throw new Error("'container' is required");
       }
 
-      c.el = document.querySelector(els);
+      defaults(config, defaultConfig);
-      var editor = new Editor(c).init();
+      config.el = document.querySelector(els);
+      const editor = new Editor(config).init();
 
       // Load plugins
-      var plugs = plugins.getAll();
+      config.plugins.forEach(pluginId => {
-      c.plugins.forEach((pluginId) => {
+        const plugin = plugins.get(pluginId);
-        let plugin = plugins.get(pluginId);
 
         if (plugin) {
-          plugin(editor, c.pluginsOpts[pluginId] || {});
+          plugin(editor, config.pluginsOpts[pluginId] || {});
         } else {
           console.warn(`Plugin ${pluginId} not found`);
         }
@@ -72,7 +63,7 @@ module.exports = (config => {
       // is a good point to load stuff like components, css rules, etc.
       editor.getModel().loadOnStart();
 
-      c.autorender && editor.render();
+      config.autorender && editor.render();
 
       editors.push(editor);
       return editor;