Use diff of prev/next marker's markups instead of assuming consistent…

… order

fixes #51

src/js/models/marker.js

@@ -3,7 +3,10 @@ export const MARKER_TYPE = 'marker';
 import {
   normalizeTagName
 } from '../utils/dom-utils';
-import { detect } from 'content-kit-editor/utils/array-utils';
+import {
+  detect,
+  difference
+} from 'content-kit-editor/utils/array-utils';
 
 const Marker = class Marker {
   constructor(value='', markups=[]) {
@@ -104,31 +107,13 @@ const Marker = class Marker {
   }
 
   get openedMarkups() {
-    if (!this.previousSibling) {
-      return this.markups.slice();
-    }
-    let i;
-    for (i=0; i<this.markups.length; i++) {
-      // FIXME this should iterate everything and return all things that are not
-      // on this marker -- it assumes the markups are always in the same order
-      if (this.markups[i] !== this.previousSibling.markups[i]) {
-        return this.markups.slice(i);
-      }
-    }
-    return [];
+    let previousMarkups = this.previousSibling && this.previousSibling.markups;
+    return difference(this.markups, previousMarkups || []);
   }
 
   get closedMarkups() {
-    if (!this.nextSibling) {
-      return this.markups.slice();
-    }
-    let i;
-    for (i=0; i<this.markups.length; i++) {
-      if (this.markups[i] !== this.nextSibling.markups[i]) {
-        return this.markups.slice(i);
-      }
-    }
-    return [];
+    let nextMarkups = this.nextSibling && this.nextSibling.markups;
+    return difference(this.markups, nextMarkups || []);
   }
 
   // FIXME this should be implemented as a linked list

src/js/utils/array-utils.js

@@ -26,8 +26,24 @@ function forEach(enumerable, callback) {
   }
 }
 
+/**
+ * @return {Array} The things in enumerable that are not in otherEnumerable,
+ * aka the relative complement of `otherEnumerable` in `enumerable`
+ */
+function difference(enumerable, otherEnumerable) {
+  const diff = [];
+  forEach(enumerable, (item) => {
+    if (otherEnumerable.indexOf(item) === -1) {
+      diff.push(item);
+    }
+  });
+
+  return diff;
+}
+
 export {
   detect,
   forEach,
-  any
+  any,
+  difference
 };

tests/unit/renderers/editor-dom-test.js

@@ -386,6 +386,40 @@ test('rerender a marker after removing a markup from it (when both markers have
                '<p>text1<b>text2</b></p>');
 });
 
+test('render when contiguous markers have out-of-order markups', (assert) => {
+  const post = builder.createPost();
+  const section = builder.createMarkupSection('p');
+
+  const b = builder.createMarkup('B'),
+        i = builder.createMarkup('I');
+
+  const markers = [
+    builder.createMarker('bi', [b,i]),
+    builder.createMarker('ib', [i,b]),
+    builder.createMarker('plain', [])
+  ];
+  const m1 = markers[0];
+
+  markers.forEach(m => section.appendMarker(m));
+  post.appendSection(section);
+
+  let node = new RenderNode(post);
+  let renderTree = new RenderTree(node);
+  node.renderTree = renderTree;
+  render(renderTree);
+
+  assert.equal(node.element.innerHTML,
+               '<p><b><i>biib</i></b>plain</p>');
+
+  // remove 'b' from 1st marker, rerender
+  m1.removeMarkup(b);
+  m1.renderNode.markDirty();
+  render(renderTree);
+
+  assert.equal(node.element.innerHTML,
+               '<p><i>bi<b>ib</b></i>plain</p>');
+});
+
 /*
 test("It renders a renderTree with rendered dirty section", (assert) => {
   /*