@matrixreq/htmldiff 1.1.0 → 1.3.0

package/js/htmldiff.js

@@ -823,7 +823,11 @@
                 data.status = notes[index].isWrappable;
             }
             var status = notes[index].isWrappable;
-            if (status !== data.status){
+
+            // Handling atomic tags wrapping independently
+            // each atomic tag is wrapped with their own ins/del tags
+            var isAtomic = isStartOfAtomicTag(token);
+            if (status !== data.status || (isAtomic && index > data.lastIndex) || data.lastWasAtomic){
                 data.list.push({
                     isWrappable: data.status,
                     tokens: tokens.slice(data.lastIndex, index)
@@ -831,6 +835,9 @@
                 data.lastIndex = index;
                 data.status = status;
             }
+            // tracking if the last token was an atomic tag
+            // if so then we break the segment and wrap them
+            data.lastWasAtomic = isAtomic;
             if (index === tokens.length - 1){
                 data.list.push({
                     isWrappable: data.status,
@@ -838,7 +845,7 @@
                 });
             }
             return data;
-        }, {list: [], status: null, lastIndex: 0}).list;
+        }, {list: [], status: null, lastIndex: 0, lastWasAtomic: false}).list;
 
         return segments.map(mapFn).join('');
     };
@@ -910,7 +917,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);
@@ -919,7 +934,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.1.0",
+    "version": "1.3.0",
     "keywords": [
         "diff",
         "html",

package/test/diff.spec.js

@@ -206,5 +206,54 @@ describe('Diff', function(){
         });
       });
     }); // describe('iframe Differences')
-    
+
+    describe('Adjacent atomic tag combining', function(){
+      it('should wrap each inserted atomic tag independently when multiple are inserted', function(){
+        var result = cut('', '<iframe src="a.html"></iframe><iframe src="b.html"></iframe>');
+        expect(result).to.equal(
+          '<ins data-operation-index="0"><iframe src="a.html"></iframe></ins>' +
+          '<ins data-operation-index="0"><iframe src="b.html"></iframe></ins>'
+        );
+      });
+
+      it('should wrap each deleted atomic tag independently when multiple are deleted', function(){
+        var result = cut('<iframe src="a.html"></iframe><iframe src="b.html"></iframe>', '');
+        expect(result).to.equal(
+          '<del data-operation-index="0"><iframe src="a.html"></iframe></del>' +
+          '<del data-operation-index="0"><iframe src="b.html"></iframe></del>'
+        );
+      });
+
+      it('should not merge atomic tag with adjacent text in same ins/del', function(){
+        var result = cut('hello world', 'hello<iframe src="a.html"></iframe>world');
+        expect(result).to.equal('hello<ins data-operation-index="1"><iframe src="a.html"></iframe></ins>world');
+      });
+
+      it('should wrap inserted <b> content inside the tag, not in a standalone ins', function(){
+        var result = cut('', '<b>hello</b>');
+        expect(result).to.equal(
+          '<b data-diff-node="ins" data-operation-index="0"><ins data-operation-index="0">hello</ins></b>'
+        );
+      });
+
+      it('should mark non-atomic container tags with data-diff-node rather than wrapping with ins', function(){
+        var result = cut('', '<li><div>content</div></li>');
+        expect(result).to.equal(
+          '<li data-diff-node="ins" data-operation-index="0">' +
+            '<div data-diff-node="ins" data-operation-index="0">' +
+              '<ins data-operation-index="0">content</ins>' +
+            '</div>' +
+          '</li>'
+        );
+      });
+
+      it('should keep adjacent inserted <b> tags as separate segments', function(){
+        var result = cut('', '<b>hello</b><b>world</b>');
+        expect(result).to.equal(
+          '<b data-diff-node="ins" data-operation-index="0"><ins data-operation-index="0">hello</ins></b>' +
+          '<b data-diff-node="ins" data-operation-index="0"><ins data-operation-index="0">world</ins></b>'
+        );
+      });
+    }); // describe('Adjacent atomic tag combining')
+
   }); // describe('Diff')

package/test/edge_cases.spec.js

@@ -29,5 +29,13 @@ BNXOISAN'FOSER3154
 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);
+    });
+});

package/test/render_operations.spec.js

@@ -163,14 +163,15 @@ describe('renderOperations', function(){
                     '<ins data-operation-index="0">new<br/></ins> text');
         });
 
-        it('should wrap atomic tags', function(){
+        it('should wrap atomic tags independently', function(){
             var before = tokenize(['old', '<iframe src="source.html"></iframe>', ' ', 'text']);
             var after = tokenize(['new', ' ', 'text']);
 
             res = cut(before, after);
 
             expect(res).to.equal(
-                    '<del data-operation-index="0">old<iframe src="source.html"></iframe></del>' +
+                    '<del data-operation-index="0">old</del>' +
+                    '<del data-operation-index="0"><iframe src="source.html"></iframe></del>' +
                     '<ins data-operation-index="0">new</ins> text');
         });
     });