Render multiple spaces with nbsps to preserve whitespaces

fixes #8

lib/dom-renderer.js

@@ -1,7 +1,8 @@
 import {
   createElement,
   appendChild,
-  createTextNode
+  createTextNode,
+  setAttribute
 } from "./utils";
 import ImageCard from "./cards/image";
 
@@ -20,7 +21,7 @@ function createElementFromMarkerType([tagName, attributes]=['', []]){
   for (let i=0,l=attributes.length; i<l; i=i+2) {
     let propName = attributes[i],
         propValue = attributes[i+1];
-    element.setAttribute(propName, propValue);
+    setAttribute(element, propName, propValue);
   }
   return element;
 }

lib/utils.js

@@ -6,6 +6,15 @@ export function appendChild(target, child) {
   target.appendChild(child);
 }
 
+function addHTMLSpaces(text) {
+  let nbsp = '\u00A0';
+  return text.replace(/  /g, ' ' + nbsp);
+}
+
 export function createTextNode(text) {
-  return document.createTextNode(text);
+  return document.createTextNode(addHTMLSpaces(text));
+}
+
+export function setAttribute(node, propName, value) {
+  node.setAttribute(propName, value);
 }

tests/unit/dom-renderer-test.js

@@ -277,3 +277,41 @@ test('renders mobiledoc with lists', (assert) => {
   assert.equal(items[1].childNodes[0].textContent, 'second item',
                'correct text node for item 2');
 });
+
+test('multiple spaces should preserve whitespace with nbsps', (assert) => {
+  let space = ' ';
+  let repeat = (str, count) => {
+    let result = '';
+    while (count--) {
+      result += str;
+    }
+    return result;
+  };
+  let text = [
+    repeat(space, 4), 'some',
+    repeat(space, 5), 'text',
+    repeat(space, 6)
+  ].join('');
+  let mobiledoc = {
+    version: MOBILEDOC_VERSION,
+    sections: [
+      [], // markers
+      [   // sections
+        [1, 'P', [
+          [[], 0, text]]
+        ]
+      ]
+    ]
+  };
+
+  let nbsp = '\u00A0';
+  let sn = ' ' + nbsp;
+  let expectedText = [
+    repeat(sn, 2), 'some',
+    repeat(sn, 2), ' ', 'text',
+    repeat(sn, 3)
+  ].join('');
+  let rendered = renderer.render(mobiledoc);
+  let textNode = rendered.firstChild.firstChild;
+  assert.equal(textNode.textContent, expectedText, 'renders the text');
+});