Enable diffing of video, math, widgets, iframes, imgs, svgs. This commit is basically a copy of PR inkling#10 from @ian97531. See https://github.com/inkling/htmldiff.js/pull/10/commits.

mn4367 · mn4367 · commit 004844a1b351 · 2018-03-25T03:35:40.000+02:00
diff --git a/js/htmldiff.d.ts b/js/htmldiff.d.ts
@@ -11,7 +11,7 @@
  *     'tag1|tag2|tag3|...' e. g. 'head|script|style|...'. An atomic tag is one whose child 
  *     nodes should not be compared - the entire tag should be treated as one token. This is 
  *     useful for tags where it does not make sense to insert <ins> and <del> tags.
- *     If not used, the default list 'iframe|object|math|svg|script|head|style' will be used.
+ *     If not used, the default list 'iframe|object|math|svg|script|video|head|style' will be used.
  *
  * @return {string} The combined HTML content with differences wrapped in <ins> and <del> tags.
  */
diff --git a/js/htmldiff.js b/js/htmldiff.js
@@ -70,7 +70,7 @@
      */
     var atomicTagsRegExp;
     // Added head and style (for style tags inside the body)
-    var defaultAtomicTagsRegExp = new RegExp('^<(iframe|object|math|svg|script|head|style)');
+    var defaultAtomicTagsRegExp = new RegExp('^<(iframe|object|math|svg|script|video|head|style)');
     
     /**
      * Checks if the current word is the beginning of an atomic tag. An atomic tag is one whose
@@ -120,7 +120,8 @@
      * @return {boolean} True if the token can be wrapped inside a tag, false otherwise.
      */
     function isWrappable(token){
-        return isntTag(token) || isStartOfAtomicTag(token) || isVoidTag(token);
+        var is_img = /^<img[\s>]/.test(token);
+        return is_img|| isntTag(token) || isStartOfAtomicTag(token) || isVoidTag(token);
     }
 
     /**
@@ -281,11 +282,48 @@
      * @return {string} The identifying key that should be used to match before and after tokens.
      */
     function getKeyForToken(token){
+        // If the token is an image element, grab it's src attribute to include in the key.
+        var img = /^<img.*src=['"]([^"']*)['"].*>$/.exec(token);
+        if (img) {
+            return '<img src="' + img[1] + '">';
+        }
+
+        // If the token is an object element, grab it's data attribute to include in the key.
+        var object = /^<object.*data=['"]([^"']*)['"]/.exec(token);
+        if (object) {
+            return '<object src="' + object[1] + '"></object>';
+        }
+
+        // If it's a video, math or svg element, the entire token should be compared except the
+        // data-uuid.
+        if(/^<(svg|math|video)[\s>]/.test(token)) {
+            var uuid = token.indexOf('data-uuid="');
+            if (uuid !== -1) {
+                var start = token.slice(0, uuid);
+                var end = token.slice(uuid + 44);
+                return start + end;
+            } else {
+                return token;
+            } 
+        }
+
+        // If the token is an iframe element, grab it's src attribute to include in it's key.
+        var iframe = /^<iframe.*src=['"]([^"']*)['"].*>/.exec(token);
+        if (iframe) {
+            return '<iframe src="' + iframe[1] + '"></iframe>';
+        }
+
+        // If the token is any other element, just grab the tag name.
         var tagName = /<([^\s>]+)[\s>]/.exec(token);
         if (tagName){
             return '<' + (tagName[1].toLowerCase()) + '>';
         }
-        return token && token.replace(/(\s+|&nbsp;|&#160;)/g, ' ');
+
+        // Otherwise, the token is text, collapse the whitespace.
+        if (token) {
+            return token.replace(/(\s+|&nbsp;|&#160;)/g, ' ');
+        }
+        return token;
     }
 
     /**
@@ -907,7 +945,7 @@
      *      operation index data attribute will be named `data-${dataPrefix-}operation-index`.
      * @param {string} atomicTags (Optional) List of atomic tag names. The list has to be in the 
      *     form 'tag1|tag2|tag3|...' e. g. 'head|script|style|...'. If not used, the default list 
-     *     'iframe|object|math|svg|script|head|style' will be used.
+     *     'iframe|object|math|svg|script|video|head|style' will be used.
      *
      * @return {string} The combined HTML content with differences wrapped in <ins> and <del> tags.
      */
diff --git a/test/diff.spec.js b/test/diff.spec.js
@@ -1,56 +1,210 @@
 describe('Diff', function(){
-    var cut, res;
-
+    var cut, res, html_to_tokens, calculate_operations;
+  
     beforeEach(function(){
-        cut = require('../js/htmldiff');
+      cut = require('../js/htmldiff');
+      html_to_tokens = cut.htmlToTokens;
+      calculate_operations = cut.calculateOperations;
     });
-
+  
     describe('When both inputs are the same', function(){
-        beforeEach(function(){
-            res = cut('input text', 'input text');
+      beforeEach(function(){
+        res = cut('input text', 'input text');
+      });
+  
+      it('should return the text', function(){
+        expect(res).equal('input text');
+      });
+    }); // describe('When both inputs are the same')
+  
+    describe('When a letter is added', function(){
+      beforeEach(function(){
+        res = cut('input', 'input 2');
+      });
+  
+      it('should mark the new letter', function(){
+        expect(res).to.equal('input<ins data-operation-index="1"> 2</ins>');
+      });
+    }); // describe('When a letter is added')
+  
+    describe('Whitespace differences', function(){
+      it('should collapse adjacent whitespace', function(){
+        expect(cut('Much \n\t    spaces', 'Much spaces')).to.equal('Much spaces');
+      });
+  
+      it('should consider non-breaking spaces as equal', function(){
+        expect(cut('Hello&nbsp;world', 'Hello&#160;world')).to.equal('Hello&#160;world');
+      });
+  
+      it('should consider non-breaking spaces and non-adjacent regular spaces as equal', function(){
+        expect(cut('Hello&nbsp;world', 'Hello world')).to.equal('Hello world');
+      });
+    }); // describe('Whitespace differences')
+  
+    describe('When a class name is specified', function(){
+      it('should include the class in the wrapper tags', function(){
+        expect(cut('input', 'input 2', 'diff-result')).to.equal(
+          'input<ins data-operation-index="1" class="diff-result"> 2</ins>');
+      });
+    }); // describe('When a class name is specified')
+  
+    describe('Image Differences', function(){
+      it('show two images as different if their src attributes are different', function() {
+        var before = html_to_tokens('<img src="a.jpg">');
+        var after = html_to_tokens('<img src="b.jpg">');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-
-        it('should return the text', function(){
-            expect(res).equal('input text');
+      });
+  
+      it('should show two images are the same if their src attributes are the same', function() {
+        var before = html_to_tokens('<img src="a.jpg">');
+        var after = html_to_tokens('<img src="a.jpg" alt="hey!">');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-    });
-
-    describe('When a letter is added', function(){
-        beforeEach(function(){
-            res = cut('input', 'input 2');
+      });
+    }); // describe('Image Differences')
+    
+    describe('Widget Differences', function(){
+      it('show two widgets as different if their data attributes are different', function() {
+        var before = html_to_tokens('<object data="a.jpg"></object>');
+        var after = html_to_tokens('<object data="b.jpg"></object>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-
-        it('should mark the new letter', function(){
-            expect(res).to.equal('input<ins data-operation-index="1"> 2</ins>');
+      });
+  
+      it('should show two widgets are the same if their data attributes are the same', function() {
+        var before = html_to_tokens('<object data="a.jpg"><param>yo!</param></object>');
+        var after = html_to_tokens('<object data="a.jpg"></object>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-    });
-
-    describe('Whitespace differences', function(){
-        it('should collapse adjacent whitespace', function(){
-            expect(cut('Much \n\t    spaces', 'Much spaces')).to.equal('Much spaces');
+      });
+    }); // describe('Widget Differences')
+  
+      describe('Math Differences', function(){
+      it('should show two math elements as different if their contents are different', function() {
+        var before = html_to_tokens('<math data-uuid="55784cd906504787a8e459e80e3bb554"><msqrt>' +
+          '<msup><mi>b</mi><mn>2</mn></msup></msqrt></math>');
+        var after = html_to_tokens('<math data-uuid="55784cd906504787a8e459e80e3bb554"><msqrt>' +
+          '<msup><mn>b</mn><mn>5</mn></msup></msqrt></math>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-
-        it('should consider non-breaking spaces equal', function(){
-            expect(cut('Hello&nbsp;world', 'Hello&#160;world')).to.equal('Hello&#160;world');
+      });
+  
+      it('should show two math elements as the same if their contents are the same', function() {
+        var before = html_to_tokens('<math data-uuid="15568cd906504876548459e80e356878"><msqrt>' +
+          '<msup><mi>b</mi><mn>2</mn></msup></msqrt></math>');
+        var after = html_to_tokens('<math data-uuid="55784cd906504787a8e459e80e3bb554"><msqrt>' +
+          '<msup><mi>b</mi><mn>2</mn></msup></msqrt></math>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-
-        it('should consider non-breaking spaces and non-adjacent regular spaces equal', function(){
-            expect(cut('Hello&nbsp;world', 'Hello world')).to.equal('Hello world');
+      });
+    }); // describe('Math Differences')
+  
+    describe('Video Differences', function(){
+      it('show two widgets as different if their data attributes are different', function() {
+        var before = html_to_tokens('<video data-uuid="0787866ab5494d88b4b1ee423453224b">' +
+          '<source src="inkling-video:///big_buck_bunny/webm_high" type="video/webm" /></video>');
+        var after = html_to_tokens('<video data-uuid="0787866ab5494d88b4b1ee423453224b">' +
+          '<source src="inkling-video:///big_buck_rabbit/mp4" type="video/webm" /></video>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-    });
-
-    describe('When a class name is specified', function(){
-        it('should include the class in the wrapper tags', function(){
-            expect(cut('input', 'input 2', 'diff-result')).to.equal(
-                    'input<ins data-operation-index="1" class="diff-result"> 2</ins>');
+  
+      });
+  
+      it('should show two widgets are the same if their data attributes are the same', function() {
+        var before = html_to_tokens('<video data-uuid="65656565655487787484545454548494">' +
+          '<source src="inkling-video:///big_buck_bunny/webm_high" type="video/webm" /></video>');
+        var after = html_to_tokens('<video data-uuid="0787866ab5494d88b4b1ee423453224b">' +
+          '<source src="inkling-video:///big_buck_bunny/webm_high" type="video/webm" /></video>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-    });
-
-    describe('When a data prefix is specified', function(){
-        it('should include the data prefix in data attributes', function(){
-            expect(cut('input', 'input <b>2</b>', 'diff-result', 'prefix')).to.equal(
-                    'input<b data-diff-node="ins" data-prefix-operation-index="1">' +
-                    '<ins data-prefix-operation-index="1" class="diff-result">2</ins></b>');
+      });
+    }); // describe('Video Differences')
+  
+    describe('iframe Differences', function(){
+      it('show two widgets as different if their data attributes are different', function() {
+        var before = html_to_tokens('<iframe src="a.jpg"></iframe>');
+        var after = html_to_tokens('<iframe src="b.jpg"></iframe>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'replace',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
         });
-    });
-});
+      });
+  
+      it('should show two widgets are the same if their data attributes are the same', function() {
+        var before = html_to_tokens('<iframe src="a.jpg"></iframe>');
+        var after = html_to_tokens('<iframe src="a.jpg" class="foo"></iframe>');
+        var ops = calculate_operations(before, after);
+        expect(ops.length).to.equal(1);
+        expect(ops[0]).to.eql({
+          action: 'equal',
+          startInBefore: 0,
+          endInBefore: 0,
+          startInAfter: 0,
+          endInAfter: 0
+        });
+      });
+    }); // describe('iframe Differences')
+    
+  }); // describe('Diff')

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`* 'tag1\|tag2\|tag3\|...' e. g. 'head\|script\|style\|...'. An atomic tag is one whose child`
`12`	`12`	`* nodes should not be compared - the entire tag should be treated as one token. This is`
`13`	`13`	`* useful for tags where it does not make sense to insert <ins> and <del> tags.`
`14`		`- * If not used, the default list 'iframe\|object\|math\|svg\|script\|head\|style' will be used.`
	`14`	`+ * If not used, the default list 'iframe\|object\|math\|svg\|script\|video\|head\|style' will be used.`
`15`	`15`	`*`
`16`	`16`	`* @return {string} The combined HTML content with differences wrapped in <ins> and <del> tags.`
`17`	`17`	`*/`