Do not combine adjacent atomic tags while diffing

js/htmldiff.js

@@ -823,22 +823,29 @@
                 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)
                 });
                 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,
                     tokens: tokens.slice(data.lastIndex, index + 1)
                 });
             }
             return data;
-        }, {list: [], status: null, lastIndex: 0}).list;
+        }, {list: [], status: null, lastIndex: 0, lastWasAtomic: false}).list;
 
         return segments.map(mapFn).join('');
     };

package.json

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

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')

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');
         });
     });