@matrixreq/htmldiff 1.2.0 → 1.4.0

package/js/htmldiff.js

@@ -89,17 +89,30 @@
     }
 
     /**
-     * Checks if the current word is the end of an atomic tag (i.e. it has all the characters,
-     * except for the end bracket of the closing tag, such as '<iframe></iframe').
-     *
-     * @param {string} word The characters of the current token read so far.
-     * @param {string} tag The ending tag to look for.
-     *
-     * @return {boolean} True if the word is now a complete token (including the end tag),
-     *    false otherwise.
+     * Inspects the last tag in the given string its slice from the final '<'. A '>' before the slice's end
+     * means text follows e.g. "a > b" in a <script>, not a clean tag, so returns false.
+     * @return {boolean} True if word ends with an opening (non-self-closing) tag for the given
+     *    tag name.
      */
-    function isEndOfAtomicTag(word, tag){
-        return word.substring(word.length - tag.length - 2) === ('</' + tag);
+    function isOpeningTagOf(word, tag){
+        var tagText = word.substring(word.lastIndexOf('<'));
+        if (tagText.indexOf('>') !== tagText.length - 1) {
+            return false;
+        }
+        return new RegExp('^<' + tag + '(\\s|>)').test(tagText) && !/\/>$/.test(tagText);
+    }
+
+    /**
+     * Inspects the last tag in the given string its slice from the final '<'. A '>' before the slice's end
+     * means text follows e.g. "a > b" in a <script>, not a clean tag, so returns false.
+     * @return {boolean} True if word ends with a closing tag for the given tag name.
+     */
+    function isClosingTagOf(word, tag){
+        var tagText = word.substring(word.lastIndexOf('<'));
+        if (tagText.indexOf('>') !== tagText.length - 1) {
+            return false;
+        }
+        return new RegExp('^</' + tag + '(\\s|>)').test(tagText);
     }
 
     /**
@@ -175,6 +188,7 @@
         var mode = 'char';
         var currentWord = '';
         var currentAtomicTag = '';
+        var currentAtomicTagDepth = 0;
         var words = [];
         for (var i = 0; i < html.length; i++){
             var char = html[i];
@@ -184,6 +198,8 @@
                     if (atomicTag){
                         mode = 'atomic_tag';
                         currentAtomicTag = atomicTag;
+                        // skip standalone tags like <script> and <style>
+                        currentAtomicTagDepth = isEndOfTag(char) ? 1 : 0;
                         currentWord += char;
                     } else if (isStartofHTMLComment(currentWord)){
                         mode = 'html_comment';
@@ -202,14 +218,22 @@
                     }
                     break;
                 case 'atomic_tag':
-                    if (isEndOfTag(char) && isEndOfAtomicTag(currentWord, currentAtomicTag)){
-                        currentWord += '>';
-                        words.push(createToken(currentWord));
-                        currentWord = '';
-                        currentAtomicTag = '';
-                        mode = 'char';
-                    } else {
-                        currentWord += char;
+                    currentWord += char;
+                    // track the same name nested tags depth; 
+                    // end the atomic token only when it returns to 0.
+                    if (isEndOfTag(char)){
+                        if (isClosingTagOf(currentWord, currentAtomicTag)){
+                            currentAtomicTagDepth--;
+                            if (currentAtomicTagDepth <= 0){
+                                words.push(createToken(currentWord));
+                                currentWord = '';
+                                currentAtomicTag = '';
+                                currentAtomicTagDepth = 0;
+                                mode = 'char';
+                            }
+                        } else if (isOpeningTagOf(currentWord, currentAtomicTag)){
+                            currentAtomicTagDepth++;
+                        }
                     }
                     break;
                 case 'html_comment':
@@ -823,7 +847,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 +859,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 +869,7 @@
                 });
             }
             return data;
-        }, {list: [], status: null, lastIndex: 0}).list;
+        }, {list: [], status: null, lastIndex: 0, lastWasAtomic: false}).list;
 
         return segments.map(mapFn).join('');
     };

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.2.0",
+    "version": "1.4.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/html_to_tokens.spec.js

@@ -124,5 +124,42 @@ describe('htmlToTokens', function(){
                 ]
             ));
         });
+
+        describe('nested atomic tags wrapping', function(){
+            it('should keep a data-htmldiff-id wrapper with nested same-tag children as one token', function(){
+                var atomic = '<span data-htmldiff-id="u1">' +
+                        '<span class="tooltip"><span class="avatar">AB</span></span>' +
+                        'Name</span>';
+                expect(cut('<div>' + atomic + '</div>')).eql(
+                        tokenize(['<div>', atomic, '</div>']));
+            });
+
+            it('should not close early on the first inner closing tag', function(){
+                var atomic = '<span data-htmldiff-id="1"><span>a</span><span>b</span></span>';
+                expect(cut(atomic)).eql(tokenize([atomic]));
+            });
+
+            it('should not treat a stray ">" in script content as a tag boundary', function(){
+                var atomic = '<script>if (a > b) { return a > 0; }</script>';
+                expect(cut('<p>' + atomic + '</p>')).eql(
+                        tokenize(['<p>', atomic, '</p>']));
+            });
+
+            it('should ignore self-closing same-named children when counting depth', function(){
+                var atomic = '<span data-htmldiff-id="1">x<span/>y</span>';
+                expect(cut(atomic)).eql(tokenize([atomic]));
+            });
+
+            it('should ignore self-closing same-named children written with a space (<span />)', function(){
+                var atomic = '<span data-htmldiff-id="1">x<span />y</span>';
+                expect(cut(atomic)).eql(tokenize([atomic]));
+            });
+
+            it('should not bump depth on differently-named tags that share a prefix', function(){
+                // a tag must not be matched by an atomic tag named "a" appearing as <article>.
+                var atomic = '<a href="x"><article>hi</article></a>';
+                expect(cut(atomic)).eql(tokenize([atomic]));
+            });
+        });
     });
 });

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