Merge pull request #19 from appcues/fix/entities

Unescape HTML entities that are in element attribute values.

src/strings.js

@@ -1,6 +1,6 @@
 import parse from 'html-parse-stringify2/lib/parse';
 import h from 'snabbdom/h';
-import { createTextVNode, transformName } from './utils';
+import { createTextVNode, transformName, unescapeEntities } from './utils';
 
 export default function(html, options = {}) {
 
@@ -53,21 +53,21 @@ function toVNode(node, createdVNodes, context) {
         newNode = createTextVNode(node.content, context);
     }
     else {
-        newNode = h(node.name, buildVNodeData(node), convertNodes(node.children, createdVNodes, context));
+        newNode = h(node.name, buildVNodeData(node, context), convertNodes(node.children, createdVNodes, context));
     }
     createdVNodes.push(newNode);
     return newNode;
 }
 
-function buildVNodeData(node) {
+function buildVNodeData(node, context) {
     const data = {};
     if (!node.attrs) {
         return data;
     }
 
     const attrs = Object.keys(node.attrs).reduce((memo, name) => {
         if (name !== 'style' && name !== 'class') {
-            const val = node.attrs[name];
+            const val = unescapeEntities(node.attrs[name], context);
             memo ? memo[name] = val : memo = { [name]: val };
         }
         return memo;

src/utils.js

@@ -1,7 +1,7 @@
 import VNode from 'snabbdom/vnode';
 
 export function createTextVNode(text, context) {
-    return VNode(undefined, undefined, undefined, unescape(text, context));
+    return VNode(undefined, undefined, undefined, unescapeEntities(text, context));
 }
 
 export function transformName(name) {
@@ -19,7 +19,7 @@ const entityRegex = new RegExp('&[a-z0-9]+;', 'gi')
 // Element for setting innerHTML for transforming entities.
 let el = null;
 
-function unescape(text, context) {
+export function unescapeEntities(text, context) {
     // Create the element using the context if it doesn't exist.
     if (!el) {
         el = context.createElement('div');

test/tests/strings_test.js

@@ -107,6 +107,15 @@ describe("#virtualizeString", () => {
         expect(virtualizeString("<div>&amp; is an ampersand! and &frac12; is 1/2!</div>")).to.deep.equal(
             h('div', [ '& is an ampersand! and ½ is 1/2!' ])
         );
+        expect(virtualizeString("<a href='http://example.com?test=true&amp;something=false'>Test</a>")).to.deep.equal(
+            h('a', {
+                attrs: {
+                    href: 'http://example.com?test=true&something=false'
+                }
+            },[
+                'Test'
+            ])
+        );
     });
 
     it("should call the 'create' hook for each VNode that was created after the virtualization process is complete", () => {