Use is attribute to ignore attribute whitelist. Fixes #21

revivek · Jan 27, 2016 · f0ab93b · f0ab93b
1 parent 1a0ed71
commit f0ab93b
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 72 deletions.
diff --git a/lib/Oy.js b/lib/Oy.js
@@ -43,9 +43,7 @@ exports['default'] = {
   },
 
   renderTemplate: function renderTemplate(options, generateCustomTemplate) {
-    var rawHTML = generateCustomTemplate ? generateCustomTemplate(options) : _utilsHTML42['default'].generateDefaultTemplate(options);
-
-    return _utilsHTML42['default'].replaceWhitelistedAttributes(rawHTML);
+    return generateCustomTemplate ? generateCustomTemplate(options) : _utilsHTML42['default'].generateDefaultTemplate(options);
   }
 };
 module.exports = exports['default'];
diff --git a/lib/__tests__/Oy-test.js b/lib/__tests__/Oy-test.js
@@ -14,6 +14,16 @@ describe('Oy', function () {
     expect(_Oy2['default'].renderTemplate).toBeDefined();
   });
 
+  it('should render data-background in the body', function () {
+    var rawHTML = _Oy2['default'].renderTemplate({
+      title: 'Foo bar',
+      bodyContent: '<h1>Foobar data-background</h1>',
+      previewText: 'Baz qux'
+    });
+
+    expect(rawHTML.indexOf('<h1>Foobar data-background</h1>') !== -1).toEqual(true);
+  });
+
   it('should use provided base template generator by default', function () {
     var shouldThrow = function shouldThrow() {
       _Oy2['default'].renderTemplate({

diff --git a/lib/components/OyImg.js b/lib/components/OyImg.js
@@ -22,8 +22,9 @@ exports['default'] = _react2['default'].createClass({
 
   render: function render() {
     return _react2['default'].createElement('img', _extends({}, this.props, {
-      'data-border': this.props.border,
-      'data-align': this.props.align }));
+      is: true,
+      border: this.props.border,
+      align: this.props.align }));
   }
 });
 module.exports = exports['default'];
diff --git a/lib/components/OyTD.js b/lib/components/OyTD.js
@@ -26,10 +26,11 @@ exports['default'] = _react2['default'].createClass({
     return _react2['default'].createElement(
       'td',
       _extends({}, this.props, {
-        'data-align': this.props.align,
-        'data-valign': this.props.vAlign,
-        'data-background': this.props.background,
-        'data-bgcolor': this.props.bgColor }),
+        is: true,
+        align: this.props.align,
+        valign: this.props.vAlign,
+        background: this.props.background,
+        bgcolor: this.props.bgColor }),
       this.props.children
     );
   }

diff --git a/lib/components/OyTable.js b/lib/components/OyTable.js
@@ -25,9 +25,10 @@ exports['default'] = _react2['default'].createClass({
     return _react2['default'].createElement(
       'table',
       _extends({}, this.props, {
-        'data-align': this.props.align,
-        'data-bgcolor': this.props.bgColor,
-        'data-valign': this.props.vAlign }),
+        is: true,
+        align: this.props.align,
+        bgcolor: this.props.bgColor,
+        valign: this.props.vAlign }),
       this.props.children
     );
   }

diff --git a/lib/utils/HTML4.js b/lib/utils/HTML4.js
@@ -3,27 +3,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var attributeWhitelist = [{
-  regex: /data-align/g,
-  replacement: 'align'
-}, {
-  regex: /data-valign/g,
-  replacement: 'valign'
-}, {
-  regex: /data-background/g,
-  replacement: 'background'
-}, {
-  regex: /data-bgcolor/g,
-  replacement: 'bgcolor'
-}];
-
 exports['default'] = {
-  replaceWhitelistedAttributes: function replaceWhitelistedAttributes(html) {
-    return attributeWhitelist.reduce(function (previousHTML, attribute) {
-      return previousHTML.replace(attribute.regex, attribute.replacement);
-    }, html);
-  },
-
   generateDefaultTemplate: function generateDefaultTemplate(_ref) {
     var title = _ref.title;
     var bodyContent = _ref.bodyContent;

diff --git a/src/Oy.js b/src/Oy.js
@@ -33,10 +33,8 @@ export default {
   },
 
   renderTemplate: (options, generateCustomTemplate) => {
-    const rawHTML = (
-      generateCustomTemplate ? generateCustomTemplate(options) : HTML4.generateDefaultTemplate(options)
-    );
-
-    return HTML4.replaceWhitelistedAttributes(rawHTML);
+    return generateCustomTemplate ? (
+      generateCustomTemplate(options)
+    ) : HTML4.generateDefaultTemplate(options);
   }
 };
diff --git a/src/__tests__/Oy-test.js b/src/__tests__/Oy-test.js
@@ -9,6 +9,17 @@ describe('Oy', function() {
     expect(Oy.renderTemplate).toBeDefined();
   });
 
+  it('should render data-background in the body', function() {
+    const rawHTML = Oy.renderTemplate({
+      title: 'Foo bar',
+      bodyContent: '<h1>Foobar data-background</h1>',
+      previewText: 'Baz qux',
+    });
+
+    expect(rawHTML.indexOf('<h1>Foobar data-background</h1>') !== -1)
+      .toEqual(true);
+  });
+
   it('should use provided base template generator by default', function() {
     const shouldThrow = () => {
       Oy.renderTemplate({

diff --git a/src/components/OyImg.jsx b/src/components/OyImg.jsx
@@ -12,8 +12,9 @@ export default React.createClass({
   render: function() {
     return (
       <img {...this.props}
-        data-border={this.props.border}
-        data-align={this.props.align} />
+        is
+        border={this.props.border}
+        align={this.props.align} />
     );
   }
 });
diff --git a/src/components/OyTD.jsx b/src/components/OyTD.jsx
@@ -14,10 +14,11 @@ export default React.createClass({
   render: function() {
     return (
       <td {...this.props}
-        data-align={this.props.align}
-        data-valign={this.props.vAlign}
-        data-background={this.props.background}
-        data-bgcolor={this.props.bgColor}>
+        is
+        align={this.props.align}
+        valign={this.props.vAlign}
+        background={this.props.background}
+        bgcolor={this.props.bgColor}>
         {this.props.children}
       </td>
     );

diff --git a/src/components/OyTable.jsx b/src/components/OyTable.jsx
@@ -13,9 +13,10 @@ export default React.createClass({
   render: function() {
     return (
       <table {...this.props}
-        data-align={this.props.align}
-        data-bgcolor={this.props.bgColor}
-        data-valign={this.props.vAlign}>
+        is
+        align={this.props.align}
+        bgcolor={this.props.bgColor}
+        valign={this.props.vAlign}>
         {this.props.children}
       </table>
     );

diff --git a/src/utils/HTML4.js b/src/utils/HTML4.js
@@ -1,30 +1,4 @@
-const attributeWhitelist = [
-  {
-    regex: /data-align/g,
-    replacement: 'align'
-  },
-  {
-    regex: /data-valign/g,
-    replacement: 'valign'
-  },
-  {
-    regex: /data-background/g,
-    replacement: 'background'
-  },
-  {
-    regex: /data-bgcolor/g,
-    replacement: 'bgcolor'
-  }
-];
-
-
 export default {
-  replaceWhitelistedAttributes: (html) => {
-    return attributeWhitelist.reduce((previousHTML, attribute) => {
-      return previousHTML.replace(attribute.regex, attribute.replacement)
-    }, html);
-  },
-
   generateDefaultTemplate: ({title, bodyContent, previewText, headCSS=''}) => {
     if (!title) {
       throw new Error('`title` is a required option for `renderTemplate`');