Improve HTML parser, add the possibility to parse Array/Object attributes

src/dom_components/model/Component.js

@@ -98,6 +98,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     toolbar: null,
   },
 
+
   initialize(props = {}, opt = {}) {
     const em = opt.sm || opt.em || {};
 
@@ -205,6 +206,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return this;
   },
 
+
   initComponents() {
     let comps = new Components(this.get('components'), this.opt);
     comps.parent = this;
@@ -212,6 +214,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return this;
   },
 
+
   /**
    * Initialize callback
    */
@@ -260,6 +263,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     }
   },
 
+
   /**
    * Script updated
    */
@@ -267,6 +271,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.set('scriptUpdated', 1);
   },
 
+
   /**
    * Once traits are updated I have to populates model's attributes
    */
@@ -293,6 +298,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     found && this.set('attributes', attrs);
   },
 
+
   /**
    * Init toolbar
    */
@@ -328,6 +334,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     }
   },
 
+
   /**
    * Load traits
    * @param  {Array} traits
@@ -346,6 +353,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return this;
   },
 
+
   /**
    * Normalize input classes from array to array of objects
    * @param {Array} arr
@@ -376,6 +384,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return res;
   },
 
+
   /**
    * Override original clone method
    * @private
@@ -409,6 +418,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return new this.constructor(attr, this.opt);
   },
 
+
   /**
    * Get the name of the component
    * @return {string}
@@ -422,6 +432,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return customName || name;
   },
 
+
   /**
    * Get the icon string
    * @return {string}
@@ -431,6 +442,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return icon ? icon + ' ' : '';
   },
 
+
   /**
    * Return HTML string of the component
    * @param {Object} opts Options
@@ -479,6 +491,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return code;
   },
 
+
   /**
    * Returns object of attributes for HTML
    * @return {Object}
@@ -490,6 +503,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return attr;
   },
 
+
   /**
    * Return a shallow copy of the model's attributes for JSON
    * stringification.
@@ -508,6 +522,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return obj;
   },
 
+
   /**
    * Return model id
    * @return {string}
@@ -517,6 +532,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     return attrs.id || this.cid;
   },
 
+
   /**
    * Return script in string format, cleans 'function() {..' from scripts
    * if it's a function

src/parser/model/ParserHtml.js

@@ -107,13 +107,19 @@ module.exports = config => {
             model.classes = this.parseClass(nodeValue);
           else if (nodeName == 'contenteditable')
             continue;
-          else if(nodeName.indexOf(modelAttrStart) === 0){
-            var modelAttr = nodeName.replace(modelAttrStart, '');
+          else if (nodeName.indexOf(modelAttrStart) === 0) {
+            const modelAttr = nodeName.replace(modelAttrStart, '');
+            const valueLen = nodeValue.length;
+            const firstChar = nodeValue && nodeValue.substr(0, 1);
+            const lastChar = nodeValue && nodeValue.substr(valueLen - 1);
             nodeValue = nodeValue === 'true' ? true : nodeValue;
             nodeValue = nodeValue === 'false' ? false : nodeValue;
+            nodeValue = (firstChar == '{' && lastChar == '}') ||
+              (firstChar == '[' && lastChar == ']') ? JSON.parse(nodeValue) : nodeValue;
             model[modelAttr] = nodeValue;
-          }else
+          } else {
             model.attributes[nodeName] = nodeValue;
+          }
         }
 
 

test/specs/dom_components/model/Component.js

@@ -17,7 +17,7 @@ module.exports = {
       let compOpts;
       let em;
 
-      describe.only('Component', () => {
+      describe('Component', () => {
 
         beforeEach(() => {
           em = new Editor({});

test/specs/parser/model/ParserHtml.js

@@ -5,7 +5,7 @@ const DomComponents = require('dom_components');
 module.exports = {
   run() {
 
-    describe('ParserHtml', () => {
+    describe.only('ParserHtml', () => {
       var obj;
 
       beforeEach(() => {
@@ -382,6 +382,34 @@ module.exports = {
         expect(obj.parse(str).html).toEqual(result);
       });
 
+      it('Parse attributes with object inside', () => {
+        var str = `<div data-gjs-test='{ "prop1": "value1", "prop2": 10, "prop3": true}'>test2 </div>`;
+        var result = {
+          tagName: 'div',
+          attributes: {},
+          type: 'text',
+          test: {
+            prop1: 'value1',
+            prop2: 10,
+            prop3: true,
+          },
+          content: 'test2 ',
+        };
+        expect(obj.parse(str).html).toEqual(result);
+      });
+
+      it('Parse attributes with arrays inside', () => {
+        var str = `<div data-gjs-test='["value1", "value2"]'>test2 </div>`;
+        var result = {
+          tagName: 'div',
+          attributes: {},
+          type: 'text',
+          test: ['value1', 'value2'],
+          content: 'test2 ',
+        };
+        expect(obj.parse(str).html).toEqual(result);
+      });
+
     });
 
   }