diff --git a/lib/index.js b/lib/index.js index 421a284..6d648b7 100644 --- a/lib/index.js +++ b/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); } } }; diff --git a/package.json b/package.json index f932630..7079899 100644 --- a/package.json +++ b/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", diff --git a/test/index-test.js b/test/index-test.js index 4419e31..9530aec 100644 --- a/test/index-test.js +++ b/test/index-test.js @@ -329,6 +329,7 @@ if (process.browser) { markClass: 'selection-end' }] }]; + const app = tree(); 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(); + + 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(' no saved selections on blur', t => {