@createiq/htmldiff 1.0.5-beta.1 → 1.0.5-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@createiq/htmldiff",
-  "version": "1.0.5-beta.1",
+  "version": "1.0.5-beta.2",
   "description": "TypeScript port of htmldiff.net",
   "type": "module",
   "author": "Mathew Mannion <mathew.mannion@linklaters.com>",

package/src/TableDiff.ts

@@ -619,7 +619,12 @@ function diffStructurallyAlignedRow(
 ): string {
   const oldKeys = oldRow.cells.map(cell => cellKey(oldHtml, cell))
   const newKeys = newRow.cells.map(cell => cellKey(newHtml, cell))
-  const alignment = lcsAlign(oldKeys, newKeys)
+  const exactAlignment = lcsAlign(oldKeys, newKeys)
+  // After exact LCS, fuzzy-pair adjacent unmatched old/new cells whose
+  // content is similar enough — so a content-edit cell alongside a
+  // column-add in the same row produces a content diff for the edited
+  // cell rather than a phantom delete + insert + extra cell.
+  const alignment = pairSimilarUnmatchedCells(exactAlignment, oldRow, newRow, oldHtml, newHtml)
 
   const out: string[] = []
   // Use new's <tr> if it exists; otherwise old's.
@@ -765,9 +770,17 @@ interface Alignment {
   newIdx: number | null
 }
 
-/** Jaccard similarity threshold above which we treat two rows as "the same row, edited". */
+/** Character-level similarity threshold above which we treat two rows as "the same row, edited". */
 const ROW_FUZZY_THRESHOLD = 0.5
 
+/**
+ * Threshold for "this cell is a content-edit of that cell." Tuned the same
+ * as ROW_FUZZY_THRESHOLD; cells in legal docs that share most of their
+ * content typically ARE the same logical cell with a body edit, so 0.5
+ * works for both granularities in practice.
+ */
+const CELL_FUZZY_THRESHOLD = 0.5
+
 /**
  * After exact LCS, scan the alignment for runs of "old deleted, then new
  * inserted" (or vice versa) and pair entries whose content is similar
@@ -783,14 +796,42 @@ function pairSimilarUnmatchedRows(
   oldHtml: string,
   newHtml: string
 ): Alignment[] {
-  // Identify pairings inside each unmatched-only run, then build the
-  // output by walking the alignment and substituting paired entries at
-  // the *ins position* (not the del position). This keeps the result
-  // alignment monotonic in newIdx — critical because the cursor-based
-  // emission downstream walks new's html in order. Emitting at the del
-  // position would be fine when del<ins in the alignment array (the
-  // typical case), but can violate monotonicity when there are mixed
-  // unpaired entries in between (column-add + row-add together, etc.).
+  return pairSimilarUnmatched(alignment, ROW_FUZZY_THRESHOLD, (oldIdx, newIdx) =>
+    rowSimilarity(oldTable.rows[oldIdx], newTable.rows[newIdx], oldHtml, newHtml)
+  )
+}
+
+function pairSimilarUnmatchedCells(
+  alignment: Alignment[],
+  oldRow: RowRange,
+  newRow: RowRange,
+  oldHtml: string,
+  newHtml: string
+): Alignment[] {
+  return pairSimilarUnmatched(alignment, CELL_FUZZY_THRESHOLD, (oldIdx, newIdx) =>
+    cellSimilarity(oldRow.cells[oldIdx], newRow.cells[newIdx], oldHtml, newHtml)
+  )
+}
+
+/**
+ * Identify pairings inside each unmatched-only run, then build the output
+ * alignment by walking the original and substituting paired entries at
+ * the *ins position* (not the del position). This keeps the result
+ * monotonic in newIdx — critical because the cursor-based emission
+ * downstream walks new's html in order. Emitting at the del position
+ * would be fine when del<ins in the alignment array (the typical case),
+ * but can violate monotonicity when there are mixed unpaired entries in
+ * between (column-add + row-add together, content-edit + column-add,
+ * etc.).
+ *
+ * Generic over what's being paired — works for both rows (by full row
+ * content similarity) and cells (by per-cell content similarity).
+ */
+function pairSimilarUnmatched(
+  alignment: Alignment[],
+  threshold: number,
+  similarity: (oldIdx: number, newIdx: number) => number
+): Alignment[] {
   const pairs = new Map<number, number>() // del-alignment-idx → ins-alignment-idx
   let i = 0
   while (i < alignment.length) {
@@ -812,15 +853,10 @@ function pairSimilarUnmatchedRows(
     const usedIns = new Set<number>()
     for (const di of delIndices) {
       let bestIi = -1
-      let bestSim = ROW_FUZZY_THRESHOLD
+      let bestSim = threshold
       for (const ii of insIndices) {
         if (usedIns.has(ii)) continue
-        const sim = rowSimilarity(
-          oldTable.rows[alignment[di].oldIdx as number],
-          newTable.rows[alignment[ii].newIdx as number],
-          oldHtml,
-          newHtml
-        )
+        const sim = similarity(alignment[di].oldIdx as number, alignment[ii].newIdx as number)
         if (sim > bestSim) {
           bestSim = sim
           bestIi = ii
@@ -887,6 +923,43 @@ function rowText(html: string, row: RowRange): string {
   return parts.join(' ').replace(/\s+/g, ' ').trim().toLowerCase()
 }
 
+/**
+ * Character-level prefix+suffix similarity for a single cell's text
+ * content. Same metric as rowSimilarity, scoped to one cell so we can
+ * fuzzy-pair unmatched cells (e.g. a cell with a content edit alongside
+ * a column add in the same row).
+ */
+function cellSimilarity(oldCell: CellRange, newCell: CellRange, oldHtml: string, newHtml: string): number {
+  const a = cellText(oldHtml, oldCell)
+  const b = cellText(newHtml, newCell)
+  if (a === b) return 1
+  if (a.length === 0 || b.length === 0) return 0
+
+  let prefix = 0
+  const minLen = Math.min(a.length, b.length)
+  while (prefix < minLen && a[prefix] === b[prefix]) prefix++
+
+  let suffix = 0
+  while (
+    suffix < a.length - prefix &&
+    suffix < b.length - prefix &&
+    a[a.length - 1 - suffix] === b[b.length - 1 - suffix]
+  ) {
+    suffix++
+  }
+
+  return (prefix + suffix) / Math.max(a.length, b.length)
+}
+
+function cellText(html: string, cell: CellRange): string {
+  return html
+    .slice(cell.contentStart, cell.contentEnd)
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .toLowerCase()
+}
+
 /**
  * Standard LCS alignment: walks both sequences and emits a list of pairs
  * where `(oldIdx, newIdx)` are both set for matching positions, and one

package/test/HtmlDiff.tables.spec.ts

@@ -1268,6 +1268,45 @@ describe('HtmlDiff — tables', () => {
       )
     })
 
+    it('handles column-add alongside content edit in the SAME row (cell-level fuzzy matching)', () => {
+      // Real-world scenario: a column was inserted at position 1 AND
+      // one of the existing cells got new content appended. Without
+      // cell-level fuzzy matching, the cell-LCS exact-match misses the
+      // "IRS Forms…" pairing, producing a 5-cell row (phantom delete +
+      // two inserts) instead of 4 cells with one inline content edit.
+      const oldHtml =
+        '<table>' +
+        '<tr><th>Party</th><th>Form</th><th>Date</th></tr>' +
+        '<tr><td>Party A</td><td>IRS Forms W-8BEN-E and W-8ECI (or any successors thereto).</td><td>Upon execution.</td></tr>' +
+        '<tr><td>Party B</td><td>IRS Form W-9, as applicable.</td><td>Upon execution.</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><th>Party</th><th>Extra column</th><th>Form</th><th>Date</th></tr>' +
+        "<tr><td>Party A</td><td>Yes</td><td>IRS Forms W-8BEN-E and W-8ECI (or any successors thereto). Here's some extra content</td><td>Upon execution.</td></tr>" +
+        '<tr><td>Party B</td><td>A</td><td>IRS Form W-9, as applicable.</td><td>Upon execution.</td></tr>' +
+        '</table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          // Header row: extra column inserted at position 1
+          '<tr><th>Party</th>' +
+          "<th class='diffins'><ins class='diffins'>Extra column</ins></th>" +
+          '<th>Form</th><th>Date</th></tr>' +
+          // Party A row: extra column cell + content edit on the IRS Forms cell
+          '<tr><td>Party A</td>' +
+          "<td class='diffins'><ins class='diffins'>Yes</ins></td>" +
+          "<td>IRS Forms W-8BEN-E and W-8ECI (or any successors thereto).<ins class='diffins'>&nbsp;Here's some extra content</ins></td>" +
+          '<td>Upon execution.</td></tr>' +
+          // Party B row: extra column cell, IRS Form W-9 cell unchanged
+          '<tr><td>Party B</td>' +
+          "<td class='diffins'><ins class='diffins'>A</ins></td>" +
+          '<td>IRS Form W-9, as applicable.</td>' +
+          '<td>Upon execution.</td></tr>' +
+          '</table>'
+      )
+    })
+
     it('handles a rowspan cell sharing a row with normal cells (column-add adjacency)', () => {
       // The rowspan'd cell occupies row 0 col 0 and row 1's col 0 slot
       // (absorbed). Old has rowspan=2 in col 0 + col 1 in row 0 + col