Ensure rendered editor dom closes markup tags

bustle · Jul 28, 2015 · 12c20af · 12c20af
1 parent f95aa2b
commit 12c20af
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -302,7 +302,8 @@ var sampleMobiledocs = {
       ]],
       [1, "P", [
         [[], 0, "see it "],
-        [[0], 1, "on github."]
+        [[0], 1, "on github"],
+        [[], 0, "."]
       ]]
     ]
   ],

diff --git a/src/js/models/markup.js b/src/js/models/markup.js
@@ -9,6 +9,9 @@ export const VALID_MARKUP_TAGNAMES = [
 ];
 
 export default class Markup {
+  /*
+   * @param {attributes} array flat array of key1,value1,key2,value2,...
+   */
   constructor(tagName, attributes=[]) {
     this.tagName = tagName.toLowerCase();
     this.attributes = attributes;

diff --git a/src/js/renderers/editor-dom.js b/src/js/renderers/editor-dom.js
@@ -5,11 +5,11 @@ import { POST_TYPE } from "../models/post";
 import { MARKUP_SECTION_TYPE } from "../models/markup-section";
 import { IMAGE_SECTION_TYPE } from "../models/image";
 
-function createElementFromMarkerType(doc, markerType) {
-  var element = doc.createElement(markerType.tagName);
-  if (markerType.attributes) {
-    for (var i=0, l=markerType.attributes.length;i<l;i=i+2) {
-      element.setAttribute(markerType.attributes[i], markerType.attributes[i+1]);
+function createElementFromMarkup(doc, markup) {
+  var element = doc.createElement(markup.tagName);
+  if (markup.attributes) {
+    for (var i=0, l=markup.attributes.length;i<l;i=i+2) {
+      element.setAttribute(markup.attributes[i], markup.attributes[i+1]);
     }
   }
   return element;
@@ -20,25 +20,25 @@ function renderMarkupSection(doc, section, markers) {
   var elements = [element];
   var currentElement = element;
   var i, l, j, m, marker, openTypes, closeTypes, text;
-  var markerType;
+  var markup;
   var openedElement;
   for (i=0, l=markers.length;i<l;i++) {
     marker = markers[i];
-    openTypes = marker.markups;
-    closeTypes = marker.close;
+    openTypes = marker.openedMarkups;
+    closeTypes = marker.closedMarkups;
     text = marker.value;
 
     for (j=0, m=openTypes.length;j<m;j++) {
-      markerType = openTypes[j];
-      openedElement = createElementFromMarkerType(doc, markerType);
+      markup = openTypes[j];
+      openedElement = createElementFromMarkup(doc, markup);
       currentElement.appendChild(openedElement);
       elements.push(openedElement);
       currentElement = openedElement;
     }
 
     currentElement.appendChild(doc.createTextNode(text));
 
-    for (j=0, m=closeTypes;j<m;j++) {
+    for (j=0, m=closeTypes.length;j<m;j++) {
       elements.pop();
       currentElement = elements[elements.length-1];
     }

diff --git a/tests/unit/renderers/editor-dom-test.js b/tests/unit/renderers/editor-dom-test.js
@@ -126,6 +126,38 @@ test('renders a post with marker', (assert) => {
   assert.equal(node.element.innerHTML, '<p><strong>Hi</strong></p>');
 });
 
+test('renders a post with multiple markers', (assert) => {
+  let post = builder.generatePost();
+  let section = builder.generateMarkupSection('P');
+  post.appendSection(section);
+
+  let bMarkup = builder.generateMarkup('B');
+  let iMarkup = builder.generateMarkup('I');
+
+  section.appendMarker(builder.generateMarker([], 'hello '));
+  section.appendMarker(
+    builder.generateMarker([
+      bMarkup
+    ], 'bold, ')
+  );
+  section.appendMarker(
+    builder.generateMarker([
+      bMarkup,
+      iMarkup
+    ], 'italic,')
+  );
+  section.appendMarker(
+    builder.generateMarker([], ' world.')
+  );
+
+  let node = new RenderNode(post);
+  let renderTree = new RenderTree(node);
+  node.renderTree = renderTree;
+  render(renderTree);
+  assert.equal(node.element.innerHTML, '<p>hello <b>bold, <i>italic,</i></b> world.</p>');
+});
+
+
 test('renders a post with image', (assert) => {
   let url = DATA_URL;
   let post = builder.generatePost();