Add getTypes method and improve the parserHtml method

src/dom_components/index.js

@@ -20,6 +20,9 @@
  * * [clear](#clear)
  * * [load](#load)
  * * [store](#store)
+ * * [addType](#addtype)
+ * * [getType](#gettype)
+ * * [getTypes](#gettypes)
  * * [render](#render)
  *
  * @module DomComponents
@@ -506,9 +509,11 @@ module.exports = () => {
     },
 
     /**
-     * Add new component type
-     * @param {string} type
-     * @param {Object} methods
+     * Add new component type.
+     * Read more about this in [Define New Component](https://grapesjs.com/docs/modules/Components.html#define-new-component)
+     * @param {string} type Component ID
+     * @param {Object} methods Component methods
+     * @return {this}
      */
     addType(type, methods) {
       const compType = this.getType(type);
@@ -519,15 +524,18 @@ module.exports = () => {
 
       // 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 || {}),
+        methods.model = modelToExt.extend(
+          {
+            ...model,
+            defaults: {
+              ...modelToExt.prototype.defaults,
+              ...(model.defaults || {})
+            }
           },
-        }, {
-          isComponent: isComponent || (() => 0),
-        });
+          {
+            isComponent: isComponent || (() => 0)
+          }
+        );
       }
 
       if (typeof view === 'object') {
@@ -541,11 +549,15 @@ module.exports = () => {
         methods.id = type;
         componentTypes.unshift(methods);
       }
+
+      return this;
     },
 
     /**
-     * Get component type
-     * @param {string} type
+     * Get component type.
+     * Read more about this in [Define New Component](https://grapesjs.com/docs/modules/Components.html#define-new-component)
+     * @param {string} type Component ID
+     * @return {Object} Component type defintion, eg. `{ model: ..., view: ... }`
      */
     getType(type) {
       var df = componentTypes;
@@ -559,6 +571,14 @@ module.exports = () => {
       return;
     },
 
+    /**
+     * Return the array of all types
+     * @return {Array}
+     */
+    getTypes() {
+      return componentTypes;
+    },
+
     selectAdd(component, opts = {}) {
       if (component) {
         component.set({

src/parser/index.js

@@ -47,6 +47,7 @@ module.exports = () => {
       conf.Parser = this;
       pHtml = new parserHtml(conf);
       pCss = new parserCss(conf);
+      this.em = conf.em;
       return this;
     },
 
@@ -56,7 +57,8 @@ module.exports = () => {
      * @return {Object}
      */
     parseHtml(str) {
-      pHtml.compTypes = this.compTypes;
+      const { em, compTypes } = this;
+      pHtml.compTypes = em ? em.get('DomComponents').getTypes() : compTypes;
       return pHtml.parse(str, pCss);
     },
 

src/parser/model/ParserHtml.js

@@ -81,8 +81,15 @@ module.exports = config => {
             // Iterate over all available Component Types and
             // the first with a valid result will be that component
             for (let it = 0; it < ct.length; it++) {
-              obj = ct[it].model.isComponent(node);
-              if (obj) break;
+              const compType = ct[it];
+              obj = compType.model.isComponent(node);
+
+              if (obj) {
+                if (typeof obj !== 'object') {
+                  obj = { type: compType.id };
+                }
+                break;
+              }
             }
 
             model = obj;

test/specs/dom_components/index.js

@@ -179,7 +179,7 @@ describe('DOM Components', () => {
       obj.addType(id, {
         model: {
           defaults: {
-            testProp,
+            testProp
           }
         }
       });
@@ -189,6 +189,22 @@ describe('DOM Components', () => {
       expect(comp.get('type')).toEqual(id);
       expect(comp.get('testProp')).toEqual(testProp);
     });
+
+    test('Add new component type with custom isComponent', () => {
+      obj = em.get('DomComponents');
+      const id = 'test-type';
+      const testProp = 'testValue';
+      obj.addType(id, {
+        isComponent: el => {
+          return el.getAttribute('test-prop') === testProp;
+        }
+      });
+      expect(obj.componentTypes[0].id).toEqual(id);
+      obj.addComponent(`<div test-prop="${testProp}"></div>`);
+      const comp = obj.getComponents().at(0);
+      expect(comp.get('type')).toEqual(id);
+      expect(comp.getAttributes()['test-prop']).toEqual(testProp);
+    });
   });
 
   ComponentModels.run();