Start improve addType

src/dom_components/index.js

@@ -509,10 +509,31 @@ module.exports = () => {
      * Add new component type
      * @param {string} type
      * @param {Object} methods
-     * @private
      */
     addType(type, methods) {
-      var compType = this.getType(type);
+      const compType = this.getType(type);
+      const typeToExtend = compType ? compType : this.getType('default');
+      const modelToExt = typeToExtend.model;
+      const viewToExt = typeToExtend.view;
+      const { model = {}, view = {}, isComponent } = methods;
+
+      // If the model/view is a simple object I need to extend it
+      if (typeof model === 'object') {
+        methods.model = modelToExt.extend({
+          ...model,
+          defaults: {
+            ...modelToExt.prototype.defaults,
+            ...(model.defaults || {}),
+          },
+        }, {
+          isComponent: isComponent || (() => 0),
+        });
+      }
+
+      if (typeof view === 'object') {
+        methods.view = viewToExt.extend({ ...view });
+      }
+
       if (compType) {
         compType.model = methods.model;
         compType.view = methods.view;
@@ -525,7 +546,6 @@ module.exports = () => {
     /**
      * Get component type
      * @param {string} type
-     * @private
      */
     getType(type) {
       var df = componentTypes;

test/specs/dom_components/index.js

@@ -9,7 +9,7 @@ const Editor = require('editor/model/Editor');
 const utils = require('./../test_utils.js');
 
 describe('DOM Components', () => {
-  describe('Main', () => {
+  describe.only('Main', () => {
     var em;
     var obj;
     var config;
@@ -170,6 +170,25 @@ describe('DOM Components', () => {
         margin: '10px'
       });
     });
+
+    test('Add new component type with simple model', () => {
+      obj = em.get('DomComponents');
+      const id = 'test-type';
+      const testProp = 'testValue';
+      const initialTypes = obj.componentTypes.length;
+      obj.addType(id, {
+        model: {
+          defaults: {
+            testProp,
+          }
+        }
+      });
+      expect(obj.componentTypes.length).toEqual(initialTypes + 1);
+      obj.addComponent(`<div data-gjs-type="${id}"></div>`);
+      const comp = obj.getComponents().at(0);
+      expect(comp.get('type')).toEqual(id);
+      expect(comp.get('testProp')).toEqual(testProp);
+    });
   });
 
   ComponentModels.run();