From 7f20a6c6fb1a0fe8ee4d4758c4add13cec5615e2 Mon Sep 17 00:00:00 2001
From: ragool <ragool@matrixreq.com>
Date: Mon, 29 Jun 2026 16:48:52 +0200
Subject: [PATCH 1/3] Update version to 1.4.0; enhance atomic tag handling to
 correctly manage nested tags and improve test coverage for edge cases

---
 js/htmldiff.js              | 57 ++++++++++++++++++++++++++-----------
 package.json                |  2 +-
 test/html_to_tokens.spec.js | 33 +++++++++++++++++++++
 3 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/js/htmldiff.js b/js/htmldiff.js
index 7310ba0..c01cf5f 100644
--- a/js/htmldiff.js
+++ b/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').
+     * Returns the just-closed tag (substring from the last '<') only when it is a clean
+     * single tag, so a stray '>' in text (e.g. "a > b" in a <script>) is not seen as a tag.
      *
-     * @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.
+     * @param {string} word The atomic token read so far, ending in '>'.
+     * @return {string|null} The tag text, or null if not a clean tag.
+     */
+    function lastClosedTag(word){
+        var tagText = word.substring(word.lastIndexOf('<'));
+        return tagText.indexOf('>') === tagText.length - 1 ? tagText : null;
+    }
+
+    /**
+     * @return {boolean} True if tagText is a closing tag for the given atomic tag name.
+     */
+    function isClosingTagOf(tagText, tag){
+        return new RegExp('^</' + tag + '(\\s|>)').test(tagText);
+    }
+
+    /**
+     * @return {boolean} True if tagText is an opening (non-self-closing) tag for the given
+     *    atomic tag name.
      */
-    function isEndOfAtomicTag(word, tag){
-        return word.substring(word.length - tag.length - 2) === ('</' + tag);
+    function isOpeningTagOf(tagText, tag){
+        return new RegExp('^<' + tag + '(\\s|>)').test(tagText) && !/\/>$/.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,21 @@
                     }
                     break;
                 case 'atomic_tag':
-                    if (isEndOfTag(char) && isEndOfAtomicTag(currentWord, currentAtomicTag)){
-                        currentWord += '>';
-                        words.push(createToken(currentWord));
-                        currentWord = '';
-                        currentAtomicTag = '';
-                        mode = 'char';
-                    } else {
-                        currentWord += char;
+                    currentWord += char;
+                    if (isEndOfTag(char)){
+                        var closedTag = lastClosedTag(currentWord);
+                        if (closedTag && isClosingTagOf(closedTag, currentAtomicTag)){
+                            currentAtomicTagDepth--;
+                            if (currentAtomicTagDepth <= 0){
+                                words.push(createToken(currentWord));
+                                currentWord = '';
+                                currentAtomicTag = '';
+                                currentAtomicTagDepth = 0;
+                                mode = 'char';
+                            }
+                        } else if (closedTag && isOpeningTagOf(closedTag, currentAtomicTag)){
+                            currentAtomicTagDepth++;
+                        }
                     }
                     break;
                 case 'html_comment':
diff --git a/package.json b/package.json
index ca27589..552c229 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "name": "@matrixreq/htmldiff",
     "description": "Diff and markup HTML with <ins> and <del> tags",
     "companyname": "Matrix Requirements",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "keywords": [
         "diff",
         "html",
diff --git a/test/html_to_tokens.spec.js b/test/html_to_tokens.spec.js
index d3a422b..aa7e36c 100644
--- a/test/html_to_tokens.spec.js
+++ b/test/html_to_tokens.spec.js
@@ -124,5 +124,38 @@ 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 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]));
+            });
+        });
     });
 });

From f25c8a824f5ab05680f5bfded1afcd88d1ca36e2 Mon Sep 17 00:00:00 2001
From: ragool <ragool@matrixreq.com>
Date: Mon, 29 Jun 2026 17:38:33 +0200
Subject: [PATCH 2/3] Enhance atomic tag handling by tracking nested tag depth;
 ensure atomic tokens close correctly when depth returns to zero.

---
 js/htmldiff.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/js/htmldiff.js b/js/htmldiff.js
index c01cf5f..98d286b 100644
--- a/js/htmldiff.js
+++ b/js/htmldiff.js
@@ -219,6 +219,8 @@
                     break;
                 case 'atomic_tag':
                     currentWord += char;
+                    // track the same name nested tags depth; 
+                    // end the atomic token only when it returns to 0.
                     if (isEndOfTag(char)){
                         var closedTag = lastClosedTag(currentWord);
                         if (closedTag && isClosingTagOf(closedTag, currentAtomicTag)){

From 6929c959712cdbda5102356456d0edf4852bb116 Mon Sep 17 00:00:00 2001
From: ragool <ragool@matrixreq.com>
Date: Fri, 3 Jul 2026 14:18:10 +0200
Subject: [PATCH 3/3] Refactor tag handling functions in htmldiff.js for
 clarity and accuracy; improve test coverage for self-closing tags in
 html_to_tokens.spec.js.

---
 js/htmldiff.js              | 34 ++++++++++++++--------------------
 test/html_to_tokens.spec.js |  6 +++++-
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/js/htmldiff.js b/js/htmldiff.js
index 98d286b..a76a3d7 100644
--- a/js/htmldiff.js
+++ b/js/htmldiff.js
@@ -88,33 +88,28 @@
         return result && result[1];
     }
 
+    // inspect the last tag in word (from its opening '<'); to an earlier '>' in that
+    // slice means loose text e.g. "a > b" in a <script>, not a tag, so they bail out.
+
     /**
-     * Returns the just-closed tag (substring from the last '<') only when it is a clean
-     * single tag, so a stray '>' in text (e.g. "a > b" in a <script>) is not seen as a tag.
-     *
-     * @param {string} word The atomic token read so far, ending in '>'.
-     * @return {string|null} The tag text, or null if not a clean tag.
+     * @return {boolean} True if word ends with an opening (non-self-closing) tag for the given
+     *    atomic tag name.
      */
-    function lastClosedTag(word){
+    function isOpeningTagOf(word, tag){
         var tagText = word.substring(word.lastIndexOf('<'));
-        return tagText.indexOf('>') === tagText.length - 1 ? tagText : null;
+        if (tagText.indexOf('>') !== tagText.length - 1) return false;
+        return new RegExp('^<' + tag + '(\\s|>)').test(tagText) && !/\/>$/.test(tagText);
     }
 
     /**
-     * @return {boolean} True if tagText is a closing tag for the given atomic tag name.
+     * @return {boolean} True if word ends with a closing tag for the given atomic tag name.
      */
-    function isClosingTagOf(tagText, tag){
+    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);
     }
 
-    /**
-     * @return {boolean} True if tagText is an opening (non-self-closing) tag for the given
-     *    atomic tag name.
-     */
-    function isOpeningTagOf(tagText, tag){
-        return new RegExp('^<' + tag + '(\\s|>)').test(tagText) && !/\/>$/.test(tagText);
-    }
-
     /**
      * Checks if a tag is a void tag.
      *
@@ -222,8 +217,7 @@
                     // track the same name nested tags depth; 
                     // end the atomic token only when it returns to 0.
                     if (isEndOfTag(char)){
-                        var closedTag = lastClosedTag(currentWord);
-                        if (closedTag && isClosingTagOf(closedTag, currentAtomicTag)){
+                        if (isClosingTagOf(currentWord, currentAtomicTag)){
                             currentAtomicTagDepth--;
                             if (currentAtomicTagDepth <= 0){
                                 words.push(createToken(currentWord));
@@ -232,7 +226,7 @@
                                 currentAtomicTagDepth = 0;
                                 mode = 'char';
                             }
-                        } else if (closedTag && isOpeningTagOf(closedTag, currentAtomicTag)){
+                        } else if (isOpeningTagOf(currentWord, currentAtomicTag)){
                             currentAtomicTagDepth++;
                         }
                     }
diff --git a/test/html_to_tokens.spec.js b/test/html_to_tokens.spec.js
index aa7e36c..c2041f2 100644
--- a/test/html_to_tokens.spec.js
+++ b/test/html_to_tokens.spec.js
@@ -135,7 +135,6 @@ describe('htmlToTokens', function(){
             });
 
             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]));
             });
@@ -151,6 +150,11 @@ describe('htmlToTokens', function(){
                 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>';