@matrixreq/htmldiff 1.0.0 → 1.2.0

package/js/htmldiff.js

@@ -332,9 +332,12 @@
             return '<' + (tagName[1].toLowerCase()) + '>';
         }
 
-        // Otherwise, the token is text, collapse the whitespace.
+        // Otherwise, the token is text, collapse the whitespace
+        // (except new lines, see https://matrixreq.atlassian.net/browse/MATRIX-7880)
+        // potentially, this also causing the problems with prettified HTML (with "\n" between the tags),
+        // so it's required to "flatten" html before passing it to the diffing function
         if (token) {
-            return token.replace(/(\s+|&nbsp;|&#160;)/g, ' ');
+            return token.replace(/([^\S\r\n]+|&nbsp;|&#160;)/g, ' ');
         }
         return token;
     }
@@ -907,7 +910,15 @@
             var val = tokens.map(function(token){
                 return token.string;
             });
-            return wrap('ins', val, opIndex, dataPrefix, className);
+
+            const res = wrap('ins', val, opIndex, dataPrefix, className);
+
+            // handling inserted tags, see https://matrixreq.atlassian.net/browse/MATRIX-7876
+            if (/^<[^.\/]+?>$/.exec(res)) {
+                return `${res.slice(0, res.length - 1)} data-inserted="true">`;
+            }
+
+            return res;
         },
         'delete': function(op, beforeTokens, afterTokens, opIndex, dataPrefix, className){
             var tokens = beforeTokens.slice(op.startInBefore, op.endInBefore + 1);
@@ -916,7 +927,7 @@
             });
             const res = wrap("del", val, opIndex, dataPrefix, className);
 
-            // handling cases like deleted </p><p>
+            // handling cases like deleted </p><p>, see https://matrixreq.atlassian.net/browse/MATRIX-7688
             if (/^<\/.+?><.+?>$/.exec(res) && !res.includes("del")) {
                 return `<del>${val.slice(1, val.length - 1).join("")}</del>`;
             }

package/package.json

@@ -2,7 +2,7 @@
     "name": "@matrixreq/htmldiff",
     "description": "Diff and markup HTML with <ins> and <del> tags",
     "companyname": "Matrix Requirements",
-    "version": "1.0.0",
+    "version": "1.2.0",
     "keywords": [
         "diff",
         "html",

package/test/diff.spec.js

@@ -29,9 +29,9 @@ describe('Diff', function(){
   
     describe('Whitespace differences', function(){
       it('should collapse adjacent whitespace', function(){
-        expect(cut('Much \n\t    spaces', 'Much spaces')).to.equal('Much spaces');
+        expect(cut('Much \t    spaces', 'Much spaces')).to.equal('Much spaces');
       });
-  
+
       it('should consider non-breaking spaces as equal', function(){
         expect(cut('Hello world', 'Hello world')).to.equal('Hello world');
       });

package/test/edge_cases.spec.js

@@ -2,30 +2,40 @@ const diff = require('../js/htmldiff');
 
 describe('Edge cases', () => {
     it('removes deleted closing-opening tag pair', () => {
-        const before = `
-            <div>
-                <p><img src="img1.jpg" /></p>
-                <p><img src="img2.jpg" /></p>
-                <p>something</p>
-            </div>
-        `;
-        const after = `
-            <div>
-                <p>
-                    <img src="img1.jpg" />
-                    <img src="img2.jpg" />
-                </p>
-                <p>something</p>
-            </div>
-        `;
-        const res = `
-            <div>
-                <p><img src="img1.jpg" /><del>
-                </del><img src="img2.jpg" /></p>
-                <p>something</p>
-            </div>
-        `;
+        const before = `<div><p><img src="img1.jpg" /></p><p><img src="img2.jpg" /></p><p>something</p></div>`;
+        const after = `<div><p><img src="img1.jpg" /><img src="img2.jpg" /></p><p>something</p></div>`;
+        const res = `<div><p><img src="img1.jpg" /><del></del><img src="img2.jpg" /></p><p>something</p></div>`;
 
         expect(diff(before, after)).to.eql(res);
     });
-});
+
+    it('preserves new lines', () => {
+        const before = `<div>this isain text control Donec ullamcorper tortor quis augue egestas ultricies. Aenean vehicula molestie ex. Praesent id dolor at mauris efficitur ultrices. Vestibulum rutrum sit amet odio quis gravida. Praesent id augue maximus, faucibus tellus in, mattis augue. Pellentesque ullamcorper, ante et vestibulum tempus, libero nisl consequat massa, vel aliquam massa nibh in sapie</div>`;
+        const after = `<div>this isain text control Donec ullamcorper tortor quis augue egestas ultricies. Aenean vehicula molestie ex. Praesent id do at mauris efficitur ultrices. Vestibulum rutrum sit amet odio quis gravida. Praesent id augue maximus, faucibus tellus in, mattisugue. Pellentesque ullamcorper, ante et  tempus, libero nisl consequat massa, vel aliquam massa nibh 
+
+jndfoewnf[owe 1123123242
+%^&amp;*()(*&amp;^%$#@#$%^&amp;*()
+
+BNXOISAN'FOSER3154
+65+
+5SSDC</div>`;
+        const res = `<div>this isain text control Donec ullamcorper tortor quis augue egestas ultricies. Aenean vehicula molestie ex. Praesent id <del data-operation-index="1">dolor</del><ins data-operation-index="1">do</ins> at mauris efficitur ultrices. Vestibulum rutrum sit amet odio quis gravida. Praesent id augue maximus, faucibus tellus in, <del data-operation-index="3">mattis augue.</del><ins data-operation-index="3">mattisugue.</ins> Pellentesque ullamcorper, ante et<del data-operation-index="5"> vestibulum</del>  tempus, libero nisl consequat massa, vel aliquam massa nibh<del data-operation-index="7"> in sapie</del><ins data-operation-index="7"> 
+
+jndfoewnf[owe 1123123242
+%^&amp;*()(*&amp;^%$#@#$%^&amp;*()
+
+BNXOISAN'FOSER3154
+65+
+5SSDC</ins></div>`;
+
+        expect(diff(before, after)).to.eql(res);
+    });
+
+    it('adds data-inserted="true" to inserted tags', () => {
+        const before = `<div>some content</div>`;
+        const after = `<div><strong>some content</strong></div>`;
+        const res = `<div><strong data-inserted="true">some content</strong></div>`;
+
+        expect(diff(before, after)).to.eql(res);
+    });
+});