Support span as style tag.

Seen in the html editor of Azure DevOps.

Author: Sedeniono

dist/htmldiff.d.ts

@@ -23,10 +23,14 @@
  *   diff('<p>this is some text</p>', '<p>this is some more text</p>', 'diff-class')
  *   == '<p>this is some <ins class="diff-class">more </ins>text</p>'
  */
+type Style = {
+    tag: string;
+    tagWithAttributes: string;
+};
 type Token = {
     str: string;
     key: string;
-    styles: string[];
+    styles: Style[];
     tableTags: string[];
 };
 /**
@@ -37,7 +41,7 @@ type Token = {
  *
  * @return {Object} A token object with a string and key property.
  */
-export declare function createToken(currentWord: string, currentStyleTags: string[], currentTableTags: string[]): Token;
+export declare function createToken(currentWord: string, currentStyleTags: Style[], currentTableTags: string[]): Token;
 type Match = {
     segment: Segment;
     length: number;

dist/htmldiff.js

@@ -98,7 +98,12 @@ function isEndOfAtomicTag(word: string, tag: string){
   return word.substring(word.length - tag.length - 2) === ('</' + tag);
 }
 
-const styleTagsRegExp = /^<(strong|em|b|i|q|cite|mark|dfn|sup|sub|u|s|nobr)(^(?!\w)|>)/;
+const styleTagsRegExp = /^<(strong|em|b|i|q|cite|mark|dfn|sup|sub|u|s|span|nobr)(\s+[^>]*)?(^(?!\w)|>)/;
+
+type Style = {
+  tag: string; // The raw tag, e.g. 'span'
+  tagWithAttributes: string; // E.g. 'span style="font-weight:400"'
+};
 
 /**
  * Checks if the current word is the beginning of a style tag. A style tag is one whose
@@ -110,24 +115,29 @@ const styleTagsRegExp = /^<(strong|em|b|i|q|cite|mark|dfn|sup|sub|u|s|nobr)(^(?!
  * @return {string|null} The name of the atomic tag if the word will be an atomic tag,
  *    null otherwise
  */
-
-function isStartOfStyleTag(word: string) {
+function isStartOfStyleTag(word: string) : Style | null {
     const result = styleTagsRegExp.exec(word);
-    return result && result[1];
+    if (result && result[1]) {
+      return {
+        tag: result[1],
+        tagWithAttributes: result[1] + (result[2] ?? ''),
+      };
+    }
+    return null;
 }
 
 /**
  * Checks if the current word is the end of a style tag (i.e. it has all the characters,
  * except for the end bracket of the closing tag, such as '<strong></strong').
  *
  * @param {string} word The characters of the current token read so far.
- * @param {string} tag The ending tag to look for.
+ * @param {Style} tag The ending tag to look for.
  *
  * @return {boolean} True if the word is now a complete token (including the end tag),
  *    false otherwise.
  */
-function isEndOfStyleTag(word: string, tag: string) {
-    return word.substring(word.length - tag.length - 2) === ('</' + tag);
+function isEndOfStyleTag(word: string, tag: Style) {
+    return word.substring(word.length - tag.tag.length - 2) === ('</' + tag.tag);
 }
 
 const tableTagsRegExp = /^<(table|tbody|thead|tr|th|td|blockquote|ul|ol|li|h[1-6])(^(?!\w)|>)/;
@@ -186,7 +196,7 @@ function isWrappable(token: string): boolean {
 type Token = {
   str: string;
   key: string;
-  styles: string[];
+  styles: Style[];
   tableTags: string[];
 };
 
@@ -198,7 +208,7 @@ type Token = {
  *
  * @return {Object} A token object with a string and key property.
  */
-export function createToken(currentWord: string, currentStyleTags: string[], currentTableTags: string[]): Token {
+export function createToken(currentWord: string, currentStyleTags: Style[], currentTableTags: string[]): Token {
   return {
     str: currentWord,
     key: getKeyForToken(currentWord),
@@ -272,7 +282,7 @@ function splitStringLocaleAware(str: string): string[] {
 }
 
 
-function splitStringLocaleAwareAndCreateTokens(currentWord: string, currentStyleTags: string[], currentTableTags: string[]) : Token[] {
+function splitStringLocaleAwareAndCreateTokens(currentWord: string, currentStyleTags: Style[], currentTableTags: string[]) : Token[] {
   const parts = splitStringLocaleAware(currentWord);
   const tokens: Token[] = [];
   for (const token of parts) {
@@ -295,7 +305,7 @@ export function htmlToTokens(html: string): Token[] {
   let mode: ParseMode = 'char';
   let currentWord = '';
   let currentAtomicTag = '';
-  const currentStyleTags: string[] = [];
+  const currentStyleTags: Style[] = [];
   const currentTableTags: string[] = [];
   const words: Token[] = [];
 
@@ -1090,9 +1100,9 @@ function combineTokenNotes(
   return segments.map(mapFn).join('');
 }
 
-function arrayDiff(a1: string[], a2: string[]) {
-  let beforeArray: string[] = [];
-  let afterArray: string[] = [];
+function arrayDiff(a1: Style[], a2: Style[]) {
+  let beforeArray: Style[] = [];
+  let afterArray: Style[] = [];
   let isDiff = false;
   while (a1.length && a2.length) {
       const curr1 = a1.shift();
@@ -1111,24 +1121,28 @@ function arrayDiff(a1: string[], a2: string[]) {
   });
 }
 
-function closeStyles(p: { content: string, styles: string[] }) {
+function closeStyles(p: { content: string, styles: Style[] }) {
   let currentContent = p.content;
   const styles = [...p.styles];
-  while (styles.length) { currentContent += `</${styles.pop()}>`;}
+  while (styles.length) {
+    currentContent += `</${styles.pop()?.tag}>`;
+  }
   return currentContent;
 }
 
 function reduceTokens(tokens: Token[]) {
-  return closeStyles(tokens.reduce((acc: { content: string, styles: string[] }, curr: Token) => {
+  return closeStyles(tokens.reduce((acc: { content: string, styles: Style[] }, curr: Token) => {
       let currContent = acc.content;
       const { before, after } = arrayDiff([...acc.styles], [...curr.styles]);
       before.forEach(() => {
           const tag = acc.styles.pop();
-          if (tag) currContent += `</${tag}>`;
+          if (tag) {
+            currContent += `</${tag.tag}>`;
+          }
       });
-      after.forEach((tag: string) => {
+      after.forEach((tag: Style) => {
           acc.styles.push(tag);
-          currContent += `<${tag}>`;
+          currContent += `<${tag.tagWithAttributes}>`;
       });
       currContent += curr.str;
       return ({ content: currContent, styles: acc.styles });

dist/htmldiff.js.map

@@ -445,6 +445,51 @@ describe('Diff', function(){
           '<del data-operation-index="0"><b>Hello world</b></del><p data-diff-node="ins" data-operation-index="0"><ins data-operation-index="0">Hello world</ins></p>'
       );
     });
+
+    it('If span is used for formatting, then the style should be preserved (empty original)', function() {
+      expect(diff(
+          '',
+          '<b><span style=\"text-decoration: overline\">TEST</span></b>'))
+      .to.equal(
+          '<ins data-operation-index="0"><b><span style="text-decoration: overline">TEST</span></b></ins>'
+      );
+    });
+
+    it('If span is used for formatting, then the style should be preserved (non-empty original)', function() {
+      expect(diff(
+          'Foo',
+          'Foo <b><span style=\"text-decoration: overline\">TEST</span></b>'))
+      .to.equal(
+          'Foo<ins data-operation-index="1"> <b><span style="text-decoration: overline">TEST</span></b></ins>'
+      );
+    });
+
+    it('If span with no style is used, then span should not be split', function() {
+      expect(diff(
+          'Foo',
+          'Foo <b><span>TEST</span></b>'))
+      .to.equal(
+          'Foo<ins data-operation-index="1"> <b><span>TEST</span></b></ins>'
+      );
+    });
+
+    it('If only part of span formatted content changes then only that should be marked; the deleted and inserted parts should have their individual formatting', function() {
+      expect(diff(
+          '<span style=\"text-decoration: overline\">Hello world</span>',
+          '<span style=\"text-decoration: overline\">Hello code</span>'))
+      .to.equal(
+          '<span style="text-decoration: overline">Hello </span><del data-operation-index="1"><span style="text-decoration: overline">world</span></del><ins data-operation-index="1"><span style="text-decoration: overline">code</span></ins>'
+      );
+    });
+
+    it('If only style in span changes, then whole span should be marked', function() {
+      expect(diff(
+          '<span style=\"text-decoration: overline\">Hello world</span>',
+          '<span style=\"text-decoration: green wavy overline\">Hello world</span>'))
+      .to.equal(
+          '<del data-operation-index="0"><span style="text-decoration: overline">Hello world</span></del><ins data-operation-index="0"><span style="text-decoration: green wavy overline">Hello world</span></ins>'
+      );
+    });
   });
 
 describe('void elements', function(){

src/htmldiff.ts

@@ -247,7 +247,7 @@ describe('The specs from the ruby source project', function(){
           '<span>النص في العلامة</span>',
           '<span>النص الجديد في العلامة</span>'
         )).to.equal(
-          '<span>النص<ins data-operation-index="1"> الجديد</ins> في العلامة</span>'
+          '<span>النص</span><ins data-operation-index="1"><span> الجديد</span></ins><span> في العلامة</span>'
         );
       });