Clean up components module

index.html

@@ -831,7 +831,7 @@
       fromElement: true,
       clearOnRender: 0,
 
-      storageManager:{
+      storageManager: {
         autoload: 1,
         storeComponents: 1,
         storeStyles: 1,

src/dom_components/config/config.js

@@ -7,8 +7,6 @@ module.exports = {
 
   // Default wrapper configuration
   wrapper: {
-    // Need this property for exports
-    wrapper: 1,
     style: {margin: 0},
     removable: false,
     copyable: false,

src/dom_components/index.js

@@ -34,13 +34,12 @@
  */
 module.exports = () => {
   var c = {},
-  componentTypes = {},
   defaults = require('./config/config'),
   Component = require('./model/Component'),
   ComponentView = require('./view/ComponentView');
 
   var component, componentView;
-  var defaultTypes = [
+  var componentTypes = [
     {
       id: 'cell',
       model: require('./model/ComponentTableCell'),
@@ -105,7 +104,7 @@ module.exports = () => {
 
   return {
 
-    componentTypes: defaultTypes,
+    componentTypes,
 
     /**
      * Name of the module
@@ -166,27 +165,42 @@ module.exports = () => {
         c.rte = em.get('rte') || '';
         c.modal = em.get('Modal') || '';
         c.am = em.get('AssetManager') || '';
-        em.get('Parser').compTypes = defaultTypes;
+        em.get('Parser').compTypes = componentTypes;
         em.on('change:selectedComponent', this.componentChanged, this);
       }
 
-      c.wrapper['custom-name'] = c.wrapperName;
+      // Build wrapper
-      component = new Component(c.wrapper, {
+      let components = c.components;
+      let wrapper = Object.assign({}, c.wrapper);
+      wrapper['custom-name'] = c.wrapperName;
+      wrapper.wrapper = 1;
+
+      // Components might be a wrapper
+      if (components && components.constructor === Object && components.wrapper) {
+        wrapper = Object.assign({}, components);
+        components = components.components || [];
+        wrapper.components = [];
+
+        // Have to put back the real object of components
+        if (em) {
+          em.config.components = components;
+        }
+      }
+
+      component = new Component(wrapper, {
         sm: em,
         config: c,
-        defaultTypes,
         componentTypes,
       });
       component.set({ attributes: {id: 'wrapper'}});
 
       if(em && !em.config.loadCompsOnRender) {
-        component.get('components').add(c.components);
+        component.get('components').add(components);
       }
 
       componentView = new ComponentView({
         model: component,
         config: c,
-        defaultTypes,
         componentTypes,
       });
       return this;
@@ -198,7 +212,6 @@ module.exports = () => {
      */
     onLoad() {
       if(c.stm && c.stm.isAutosave()){
-        //console.log('OnLoad', this.getWrapper().get('components'));
         c.em.initUndoManager();
         c.em.initChildrenComp(this.getWrapper());
       }
@@ -405,7 +418,7 @@ module.exports = () => {
         compType.view = methods.view;
       } else {
         methods.id = type;
-        defaultTypes.unshift(methods);
+        componentTypes.unshift(methods);
       }
     },
 
@@ -415,7 +428,7 @@ module.exports = () => {
      * @private
      */
     getType(type) {
-      var df = defaultTypes;
+      var df = componentTypes;
 
       for (var it = 0; it < df.length; it++) {
         var dfId = df[it].id;

src/dom_components/model/Components.js

@@ -21,13 +21,10 @@ module.exports = Backbone.Collection.extend({
       if(opt && opt.config)
         options.config = opt.config;
 
-      if(opt && opt.defaultTypes)
-          options.defaultTypes = opt.defaultTypes;
-
       if(opt && opt.componentTypes)
           options.componentTypes = opt.componentTypes;
 
-      var df = opt.defaultTypes;
+      var df = opt.componentTypes;
 
       for (var it = 0; it < df.length; it++) {
         var dfId = df[it].id;

src/dom_components/view/ComponentView.js

@@ -302,7 +302,6 @@ module.exports = Backbone.View.extend({
     var view = new ComponentsView({
       collection: this.model.get('components'),
       config: this.config,
-      defaultTypes: this.opts.defaultTypes,
       componentTypes: this.opts.componentTypes,
     });
 

src/dom_components/view/ComponentsView.js

@@ -44,8 +44,7 @@ module.exports = Backbone.View.extend({
     viewObject  = this.compView;
     //console.log('Add to collection', model, 'Index',i);
 
-    var dt = this.opts.defaultTypes;
+    var dt = this.opts.componentTypes;
-    var ct = this.opts.componentTypes;
 
     var type = model.get('type');
 
@@ -61,8 +60,7 @@ module.exports = Backbone.View.extend({
     var view = new viewObject({
       model,
       config: this.config,
-      defaultTypes: dt,
+      componentTypes: dt,
-      componentTypes: ct,
     });
     var rendered  = view.render().el;
     if(view.model.get('type') == 'textnode')

src/domain_abstract/model/Typeable.js → src/domain_abstract/model/TypeableCollection.js

@@ -14,6 +14,26 @@ export default {
     init && init();
   },
 
+  /**
+   * Recognize type by any value
+   * @param  {mixed} value
+   * @return {Object} Found type
+   */
+  recognizeType(value) {
+    const types = this.getTypes();
+
+    for (let i = 0; i < types.length; i++) {
+      const type = types[i];
+      let typeFound = type.isType(value);
+      typeFound = typeof typeFound == 'boolean' && typeFound ?
+        {type: type.id} : typeFound;
+
+      if (typeFound) {
+        return typeFound;
+      }
+    }
+  },
+
   /**
    * Returns the base type (last object in the stack)
    * @return {Object}

src/editor/view/EditorView.js

@@ -7,11 +7,11 @@ module.exports = Backbone.View.extend({
     this.pn = this.model.get('Panels');
     this.conf = this.model.config;
     this.className = this.conf.stylePrefix + 'editor';
-    this.model.on('loaded', function(){
+    this.model.on('loaded', () => {
       this.pn.active();
       this.model.runDefault();
-      this.model.trigger('load');
+      setTimeout(() => this.model.trigger('load'), 0);
-    }, this);
+    });
   },
 
   render() {

test/specs/code_manager/model/CodeModels.js

@@ -14,7 +14,7 @@ module.exports = {
           obj = new HtmlGenerator();
           var dcomp = new DomComponents();
           comp = new Component({}, {
-            defaultTypes: dcomp.componentTypes,
+            componentTypes: dcomp.componentTypes,
           });
         });
 
@@ -64,7 +64,7 @@ module.exports = {
           obj  = new CssGenerator();
           var dcomp = new DomComponents();
           comp = new Component({}, {
-            defaultTypes: dcomp.componentTypes,
+            componentTypes: dcomp.componentTypes,
           });
         });
 

test/specs/dom_components/model/Component.js

@@ -19,7 +19,7 @@ module.exports = {
           obj = new Component();
           dcomp = new DomComponents();
           compOpts = {
-            defaultTypes: dcomp.componentTypes,
+            componentTypes: dcomp.componentTypes,
           };
         });
 
@@ -254,7 +254,7 @@ module.exports = {
         beforeEach(() => {
           dcomp = new DomComponents();
           compOpts = {
-            defaultTypes: dcomp.componentTypes,
+            componentTypes: dcomp.componentTypes,
           }
         });
 

test/specs/dom_components/view/ComponentV.js

@@ -23,7 +23,7 @@ module.exports = {
         beforeEach(() => {
           dcomp = new DomComponents();
           compOpts = {
-            defaultTypes: dcomp.componentTypes,
+            componentTypes: dcomp.componentTypes,
           };
           model = new Component();
           view = new ComponentView({
@@ -129,7 +129,7 @@ module.exports = {
           }, compOpts);
           view = new ComponentView({
             model,
-            defaultTypes: dcomp.componentTypes,
+            componentTypes: dcomp.componentTypes,
           });
           expect(view.render().$el.html()).toEqual('<span data-highlightable="1"></span><div title="test" data-highlightable="1"></div>');
         });

test/specs/dom_components/view/ComponentsView.js

@@ -21,12 +21,12 @@ module.exports = {
         beforeEach(() => {
           dcomp = new DomComponents();
           compOpts = {
-            defaultTypes: dcomp.componentTypes,
+            componentTypes: dcomp.componentTypes,
           };
           model = new Components([], compOpts);
           view = new ComponentsView({
             collection: model,
-            defaultTypes: dcomp.componentTypes,
+            componentTypes: dcomp.componentTypes,
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);