@createiq/htmldiff 1.0.4 → 1.0.5-beta.1

package/src/HtmlDiff.ts

@@ -2,6 +2,7 @@ import Action from './Action'
 import Match from './Match'
 import MatchFinder from './MatchFinder'
 import Operation from './Operation'
+import { preprocessTables, restoreTablePlaceholders } from './TableDiff'
 import Utils from './Utils'
 import WordSplitter from './WordSplitter'
 
@@ -64,9 +65,21 @@ export default class HtmlDiff {
     'span',
   ])
 
+  /**
+   * Hard cap on nested `HtmlDiff.execute` calls (table preprocessing
+   * recurses through `diffCell` for cell content). Each level allocates
+   * fresh DP matrices and word arrays; without a guard a maliciously
+   * nested table-in-cell-in-table-in-cell input could blow stack and
+   * memory. Set high enough to comfortably handle real legal documents
+   * (tables nested 2-3 deep at most), low enough to short-circuit
+   * pathological input.
+   */
+  private static MaxTablePreprocessDepth = 8
+
   private content: string[] = []
   private newText: string
   private oldText: string
+  private readonly tablePreprocessDepth: number
 
   private specialTagDiffStack: string[] = []
   private newWords: string[] = []
@@ -80,8 +93,17 @@ export default class HtmlDiff {
   /** Maps content-word index → original word index */
   private oldContentToOriginal: number[] | null = null
   private newContentToOriginal: number[] | null = null
-  /** Tracks the last original old word index output, so equal operations can include leading structural tags */
+  /**
+   * Tracks the next unwritten word index in oldWords/newWords. Mutated only by
+   * {@link sliceOriginalWordsForOp} (each op reads a slice and advances its cursor).
+   * Advances monotonically. Used so:
+   *   - subsequent equal/delete ops know where in old to resume from
+   *   - subsequent insert ops know where in new to resume from
+   * The two cursors are independent: equal/delete output from old and advance the old
+   * cursor; insert outputs from new and advances the new cursor.
+   */
   private lastOriginalOldOutputIndex = 0
+  private lastOriginalNewOutputIndex = 0
   private matchGranularity = 0
   private blockExpressions: RegExp[] = []
 
@@ -125,14 +147,18 @@ export default class HtmlDiff {
    * Initializes a new instance of the class.
    * @param oldText The old text.
    * @param newText The new text.
+   * @param tablePreprocessDepth Internal: nested-call depth for table
+   *   preprocessing. Callers should leave at default (0); the recursive
+   *   `diffCell` callback in TableDiff bumps it.
    */
-  constructor(oldText: string, newText: string) {
+  constructor(oldText: string, newText: string, tablePreprocessDepth = 0) {
     this.oldText = oldText
     this.newText = newText
+    this.tablePreprocessDepth = tablePreprocessDepth
   }
 
-  static execute(oldText: string, newText: string) {
-    return new HtmlDiff(oldText, newText).build()
+  static execute(oldText: string, newText: string, tablePreprocessDepth = 0) {
+    return new HtmlDiff(oldText, newText, tablePreprocessDepth).build()
   }
 
   /**
@@ -145,6 +171,34 @@ export default class HtmlDiff {
       return this.newText
     }
 
+    // Table preprocessing: when both sides have matching `<table>` structures,
+    // diff cells positionally so cross-cell content shifts produce one
+    // independent del/ins per cell rather than cell-misaligned output.
+    // Recursion guarded by MaxTablePreprocessDepth to bound work on
+    // deeply-nested table-in-cell-in-table inputs. Caller-configured
+    // settings (block expressions, accuracy thresholds) are propagated to
+    // the recursive cell diff so cell-level output is consistent with the
+    // top-level configuration.
+    const blockExpressions = this.blockExpressions
+    const repeatingWordsAccuracy = this.repeatingWordsAccuracy
+    const orphanMatchThreshold = this.orphanMatchThreshold
+    const ignoreWhitespaceDifferences = this.ignoreWhitespaceDifferences
+    const tablePreprocess =
+      this.tablePreprocessDepth >= HtmlDiff.MaxTablePreprocessDepth
+        ? null
+        : preprocessTables(this.oldText, this.newText, (oldCell, newCell) => {
+            const inner = new HtmlDiff(oldCell, newCell, this.tablePreprocessDepth + 1)
+            for (const expr of blockExpressions) inner.addBlockExpression(expr)
+            inner.repeatingWordsAccuracy = repeatingWordsAccuracy
+            inner.orphanMatchThreshold = orphanMatchThreshold
+            inner.ignoreWhitespaceDifferences = ignoreWhitespaceDifferences
+            return inner.build()
+          })
+    if (tablePreprocess) {
+      this.oldText = tablePreprocess.modifiedOld
+      this.newText = tablePreprocess.modifiedNew
+    }
+
     this.splitInputsToWords()
     this.buildContentProjections()
 
@@ -161,7 +215,8 @@ export default class HtmlDiff {
       this.performOperation(op)
     }
 
-    return this.content.join('')
+    const result = this.content.join('')
+    return tablePreprocess ? restoreTablePlaceholders(result, tablePreprocess.placeholderToDiff) : result
   }
 
   /**
@@ -185,23 +240,18 @@ export default class HtmlDiff {
   }
 
   /**
-   * Checks whether the two word arrays have structural HTML differences (different non-formatting tags
-   * or different whitespace between structural tags). When they do, builds "content projections" that
-   * strip structural noise so the diff algorithm only sees meaningful content and formatting changes.
+   * Builds "content projections" — word arrays with structural wrapper tags stripped — when
+   * structural normalization is appropriate for these inputs. The diff algorithm operates on
+   * the projections so wrapper-tag differences (e.g. `<p>` vs `<div>`) don't appear as content
+   * changes; structural tags are then folded back in at output time.
    */
   private buildContentProjections() {
-    // Only use projections if the structural tags actually differ.
-    // If structural tags are the same, the normal diff works fine and is simpler.
-    if (!HtmlDiff.hasStructuralDifferences(this.oldWords, this.newWords)) {
-      return
-    }
+    if (!HtmlDiff.hasStructuralDifferences(this.oldWords, this.newWords)) return
 
     const oldProjection = HtmlDiff.createContentProjection(this.oldWords)
     const newProjection = HtmlDiff.createContentProjection(this.newWords)
 
-    // Don't activate structural normalization when one side has no content —
-    // that's a genuine addition/deletion, not a re-wrapping scenario.
-    if (oldProjection.contentWords.length === 0 || newProjection.contentWords.length === 0) {
+    if (!HtmlDiff.shouldUseContentProjections(this.oldWords, this.newWords, oldProjection, newProjection)) {
       return
     }
 
@@ -211,6 +261,32 @@ export default class HtmlDiff {
     this.newContentToOriginal = newProjection.contentToOriginal
   }
 
+  /**
+   * Decides whether structural normalization should be activated for this pair of inputs.
+   * Each clause is a distinct correctness or fitness check — extend by adding a named
+   * sub-predicate rather than chaining ad-hoc conditions.
+   */
+  private static shouldUseContentProjections(
+    oldWords: string[],
+    newWords: string[],
+    oldProjection: { contentWords: string[]; contentToOriginal: number[] },
+    newProjection: { contentWords: string[]; contentToOriginal: number[] }
+  ): boolean {
+    // One side has no content at all: that's a genuine addition/deletion, not a wrapper rename.
+    // Normalization would mis-attribute the wrappers as part of the diff.
+    if (oldProjection.contentWords.length === 0 || newProjection.contentWords.length === 0) return false
+
+    // Asymmetric structural state: one side has no structural wrappers at all (e.g. plain text
+    // vs. wrapped HTML). Normalization would force the equal output to use the unwrapped side's
+    // (missing) structure and emit dangling closing tags from the wrapped side. The plain
+    // word-level diff handles this correctly without normalization.
+    const oldHasStructuralTags = oldProjection.contentWords.length < oldWords.length
+    const newHasStructuralTags = newProjection.contentWords.length < newWords.length
+    if (oldHasStructuralTags !== newHasStructuralTags) return false
+
+    return true
+  }
+
   /**
    * Tags that commonly serve as content wrappers and may change structurally
    * without affecting the actual content. Only these tags are stripped during
@@ -224,6 +300,11 @@ export default class HtmlDiff {
     return HtmlDiff.WrapperTags.has(tagName)
   }
 
+  /** True when the word is a structural opening tag (e.g. `<p>`, `<div>`). */
+  private static isOpeningStructuralTag(word: string): boolean {
+    return HtmlDiff.isStructuralTag(word) && !word.startsWith('</')
+  }
+
   /**
    * Returns true if words between structural tags are just whitespace (indentation).
    */
@@ -303,84 +384,90 @@ export default class HtmlDiff {
   }
 
   private processInsertOperation(operation: Operation, cssClass: string) {
-    const words = this.oldContentWords
-      ? this.getOriginalNewWords(operation.startInNew, operation.endInNew)
+    const words = this.usingContentProjections()
+      ? this.sliceOriginalWordsForOp('new', operation.startInNew, operation.endInNew)
       : this.newWords.slice(operation.startInNew, operation.endInNew)
     this.insertTag(HtmlDiff.InsTag, cssClass, words)
   }
 
   private processDeleteOperation(operation: Operation, cssClass: string) {
-    const words = this.oldContentWords
-      ? this.getOriginalOldWords(operation.startInOld, operation.endInOld)
+    const words = this.usingContentProjections()
+      ? this.sliceOriginalWordsForOp('old', operation.startInOld, operation.endInOld)
       : this.oldWords.slice(operation.startInOld, operation.endInOld)
     this.insertTag(HtmlDiff.DelTag, cssClass, words)
-
-    // Advance the tracking index past the deleted range so subsequent equal operations
-    // don't re-include structural tags from the deleted section.
-    if (this.oldContentToOriginal && operation.endInOld > 0) {
-      const lastDeletedOrigIdx = this.oldContentToOriginal[operation.endInOld - 1]
-      this.lastOriginalOldOutputIndex = Math.max(this.lastOriginalOldOutputIndex, lastDeletedOrigIdx + 1)
-    }
   }
 
   private processEqualOperation(operation: Operation) {
-    if (this.oldContentWords) {
-      // When using content projections, output from old original words to preserve old structure
-      const result = this.getOriginalOldWordsWithStructure(operation.startInOld, operation.endInOld)
+    if (this.usingContentProjections()) {
+      // Output from old to preserve old's HTML structure for the matched content.
+      const result = this.sliceOriginalWordsForOp('old', operation.startInOld, operation.endInOld)
       this.content.push(result.join(''))
+
+      // Advance new-side tracking past the equivalent range in new so the next insert op
+      // resumes from the correct position. We compute new's range with the same rule used
+      // for old (rather than mirroring old's count) so the two sides are independently sound
+      // when their structural tags don't perfectly parallel each other.
+      this.sliceOriginalWordsForOp('new', operation.startInNew, operation.endInNew)
     } else {
       const result = this.newWords.slice(operation.startInNew, operation.endInNew)
       this.content.push(result.join(''))
     }
   }
 
-  /**
-   * Gets original old words for a content-index range, including only content and formatting tags
-   * (used for delete/replace operations where we don't want structural tags).
-   */
-  private getOriginalOldWords(contentStart: number, contentEnd: number): string[] {
-    if (!this.oldContentToOriginal) return this.oldWords.slice(contentStart, contentEnd)
-    const result: string[] = []
-    for (let i = contentStart; i < contentEnd; i++) {
-      result.push(this.oldWords[this.oldContentToOriginal[i]])
-    }
-    return result
+  /** True when content projections are active for both sides — i.e. structural normalization is in effect. */
+  private usingContentProjections(): boolean {
+    return this.oldContentToOriginal !== null && this.newContentToOriginal !== null
   }
 
   /**
-   * Gets original new words for a content-index range, including only content and formatting tags
-   * (used for insert/replace operations where we don't want structural tags).
+   * Returns the slice of original (old or new) words covering a content-index range,
+   * including the structural tags that surround the content. Advances the side's cursor
+   * past the slice so the next op resumes correctly.
+   *
+   * The slice extends:
+   *   - LEADING: from the side's cursor (or the first content word's original index,
+   *     whichever is smaller) so structural tags that precede the first content word
+   *     are picked up by this op rather than left orphaned.
+   *   - TRAILING (non-last range): from just after the last content word, including
+   *     closing structural tags that close *this* op's paragraphs, but stopping at
+   *     the first opening structural tag — that opening tag belongs to the next
+   *     op's paragraph and would otherwise be emitted twice.
+   *   - TRAILING (last range): all the way to the end of words, since there is no next
+   *     op to claim the trailing tags.
    */
-  private getOriginalNewWords(contentStart: number, contentEnd: number): string[] {
-    if (!this.newContentToOriginal) return this.newWords.slice(contentStart, contentEnd)
-    const result: string[] = []
-    for (let i = contentStart; i < contentEnd; i++) {
-      result.push(this.newWords[this.newContentToOriginal[i]])
-    }
-    return result
-  }
+  private sliceOriginalWordsForOp(side: 'old' | 'new', contentStart: number, contentEnd: number): string[] {
+    const words = side === 'old' ? this.oldWords : this.newWords
+    const contentToOriginal = side === 'old' ? this.oldContentToOriginal : this.newContentToOriginal
 
-  /**
-   * Gets original old words for a content-index range, INCLUDING structural tags and whitespace
-   * between the content words (used for equal operations to preserve old HTML structure).
-   */
-  private getOriginalOldWordsWithStructure(contentStart: number, contentEnd: number): string[] {
-    if (!this.oldContentToOriginal) return this.oldWords.slice(contentStart, contentEnd)
+    if (!contentToOriginal) return words.slice(contentStart, contentEnd)
     if (contentStart >= contentEnd) return []
 
-    // Start from where we last left off in the original array (or the first content word's
-    // original index, whichever is smaller) to include any structural tags that precede
-    // the content words in this range.
-    const firstContentOrigIdx = this.oldContentToOriginal[contentStart]
-    const origStart = Math.min(this.lastOriginalOldOutputIndex, firstContentOrigIdx)
+    const firstContentOrigIdx = contentToOriginal[contentStart]
+    const lastContentOrigIdx = contentToOriginal[contentEnd - 1]
+    const cursor = side === 'old' ? this.lastOriginalOldOutputIndex : this.lastOriginalNewOutputIndex
+    const origStart = Math.min(cursor, firstContentOrigIdx)
+
+    let origEnd: number
+    if (contentEnd < contentToOriginal.length) {
+      // Non-last range: walk trailing tags after the last content word, stopping at the
+      // first opening structural tag so it can be emitted by the next op.
+      const limit = contentToOriginal[contentEnd]
+      origEnd = lastContentOrigIdx + 1
+      while (origEnd < limit && !HtmlDiff.isOpeningStructuralTag(words[origEnd])) {
+        origEnd++
+      }
+    } else {
+      // Last range: include everything to the end.
+      origEnd = words.length
+    }
 
-    // Include up to (but not including) the next content word's original index,
-    // or to the end of oldWords if this is the last content range
-    const origEnd =
-      contentEnd < this.oldContentToOriginal.length ? this.oldContentToOriginal[contentEnd] : this.oldWords.length
+    if (side === 'old') {
+      this.lastOriginalOldOutputIndex = origEnd
+    } else {
+      this.lastOriginalNewOutputIndex = origEnd
+    }
 
-    this.lastOriginalOldOutputIndex = origEnd
-    return this.oldWords.slice(origStart, origEnd)
+    return words.slice(origStart, origEnd)
   }
 
   /**
@@ -476,7 +563,7 @@ export default class HtmlDiff {
         const openingAndClosingTagsMatch =
           !!openingTag && Utils.getTagName(openingTag) === Utils.getTagName(words[tagIndexToCompare])
 
-        if (!!openingTag && openingAndClosingTagsMatch) {
+        if (openingTag && openingAndClosingTagsMatch) {
           specialCaseTagInjection = '</ins>'
           specialCaseTagInjectionIsBefore = true
         }