Make sure selection mark tags are always cleaned up

lib/index.js

@@ -15,6 +15,7 @@ import {map} from 'immutable-array-methods';
 import {setIn} from 'immutable-object-methods';
 import objectAssign from 'object-assign';
 import patchDom from './patch-dom';
+import {diffChars} from 'diff';
 
 function parseEmbed (type) {
   return (elm) => {
@@ -93,9 +94,15 @@ const setup = ({customTextFormattings, parseFigureProps, customCaption} = {}) =>
         nextElement[id] = next;
       }
 
-      return itemsHasUpdated ||
+      const shouldUpdate = itemsHasUpdated ||
         props.selections !== nextProps.selections ||
         props.contenteditable !== nextProps.contenteditable;
+
+      if (!shouldUpdate) {
+        // To clean up selection mark tags
+        restoreSelection(currentElement[id]);
+      }
+      return shouldUpdate;
     },
     afterRender: ({props: {items, selections = true}, id}, oldArticleElm) => {
       currentElement[id] = oldArticleElm;
@@ -105,11 +112,17 @@ const setup = ({customTextFormattings, parseFigureProps, customCaption} = {}) =>
       assert(newArticleElm, 'newArticleElm must exists');
 
       if (oldArticleElm.innerHTML !== newArticleElm.innerHTML) {
+        console.log('PATCHED:');
+        diffChars(oldArticleElm.innerHTML, newArticleElm.innerHTML).forEach((part) => {
+          if (part.added || part.removed) {
+            console.log(part.added ? 'added: ' : 'removed: ', part.value);
+          }
+        });
         patchDom({oldArticleElm, newArticleElm});
+      }
 
-        if (selections) {
-          restoreSelection(oldArticleElm);
-        }
+      if (selections) {
+        restoreSelection(oldArticleElm);
       }
     }
   };

package.json

@@ -44,6 +44,7 @@
   "dependencies": {
     "article-json-html-render": "^2.5.0",
     "deku": "^1.0.0",
+    "diff": "^3.2.0",
     "dift": "^0.1.12",
     "embeds": "^2.5.1",
     "get-selection-range-from-elm": "^2.0.1",

test/index-test.js

@@ -329,6 +329,7 @@ if (process.browser) {
         markClass: 'selection-end'
       }]
     }];
+
     const app = tree(<ArticleJsonToContenteditable items={initialItems} onUpdate={onUpdate}/>);
     const container = renderAppInContainer(app);
     const secondParagraph = container.querySelectorAll('article p')[1];
@@ -339,11 +340,22 @@ if (process.browser) {
       t.deepEqual(items, expected);
     }
 
+    t.is(container.querySelector('mark.selection-start'), null, 'No selection tag in dom after render');
+    t.is(container.querySelector('mark.selection-end'), null, 'No selection tag in dom after render');
+
     setSelection(secondParagraph, 0, secondParagraph, 1);
     container.querySelector('article').dispatchEvent(mouseup());
     t.ok(onUpdateCalled, 'onUpdate was called');
-    app.unmount();
-    t.end();
+
+    app.mount(<ArticleJsonToContenteditable items={initialItems} onUpdate={onUpdate}/>);
+
+    process.nextTick(() => {
+      t.is(container.querySelector('mark.selection-start'), null, 'No selection tag in dom after update');
+      t.is(container.querySelector('mark.selection-end'), null, 'No selection tag in dom after update');
+
+      app.unmount();
+      t.end();
+    });
   });
 
   test('<ArticleJsonToContenteditable> no saved selections on blur', t => {