@createiq/htmldiff 1.1.0-beta.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@createiq/htmldiff",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0",
   "description": "TypeScript port of htmldiff.net",
   "type": "module",
   "author": "Mathew Mannion <mathew.mannion@linklaters.com>",
@@ -23,17 +23,17 @@
     "node": ">=20.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.14",
+    "@biomejs/biome": "2.4.15",
     "@cyclonedx/cyclonedx-npm": "4.2.1",
     "@tsconfig/recommended": "1.0.13",
-    "@types/node": "24.12.3",
-    "@vitest/coverage-v8": "4.1.5",
-    "@vitest/ui": "4.1.5",
+    "@types/node": "24.12.4",
+    "@vitest/coverage-v8": "4.1.6",
+    "@vitest/ui": "4.1.6",
     "husky": "9.1.7",
-    "lint-staged": "17.0.2",
+    "lint-staged": "17.0.4",
     "tsdown": "0.22.0",
     "typescript": "6.0.3",
-    "vitest": "4.1.5"
+    "vitest": "4.1.6"
   },
   "scripts": {
     "prepare": "husky",

package/src/TableDiff.ts

@@ -1,3 +1,5 @@
+import { wrapText } from './Utils'
+
 /**
  * Table-aware preprocessing for HtmlDiff.
  *
@@ -73,6 +75,13 @@ const PLACEHOLDER_SUFFIX = '-->'
 const MAX_TABLE_ROWS = 1500
 const MAX_TABLE_CELLS_PER_ROW = 200
 
+// Caps for the per-row combinatorial column-position search in
+// findBestColumnInsertPositions / findBestColumnDeletePositions. Worst
+// case is C(MAX_COLUMN_SEARCH_WIDTH, MAX_COLUMN_DELTA) ≈ 3.8M combos at
+// the caps below; wider or more-skewed rows fall through to cell-LCS.
+const MAX_COLUMN_DELTA = 6
+const MAX_COLUMN_SEARCH_WIDTH = 40
+
 function makePlaceholderPrefix(oldHtml: string, newHtml: string): string {
   // 4 random bytes → 8 hex chars → 16^8 ≈ 4.3 billion combinations. We
   // also retry if the generated nonce happens to occur in either input.
@@ -395,7 +404,7 @@ function diffStructurallyAlignedTable(
   // has no rows at all, fall back to a from-scratch reconstruction so
   // we still emit deleted rows.
   if (newTable.rows.length === 0) {
-    return rebuildStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, alignment, diffCell)
+    return rebuildStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, alignment)
   }
 
   const out: string[] = []
@@ -408,11 +417,11 @@ function diffStructurallyAlignedTable(
       if (align.oldIdx !== null) {
         out.push(diffPreservedRow(oldHtml, newHtml, oldTable.rows[align.oldIdx], newRow, diffCell))
       } else {
-        out.push(emitFullRow(newHtml, newRow, 'ins', diffCell))
+        out.push(emitFullRow(newHtml, newRow, 'ins'))
       }
       cursor = newRow.rowEnd
     } else if (align.oldIdx !== null) {
-      out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], 'del', diffCell))
+      out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], 'del'))
     }
   }
   out.push(newHtml.slice(cursor, newTable.tableEnd))
@@ -497,8 +506,7 @@ function rebuildStructurallyAlignedTable(
   newHtml: string,
   oldTable: TableRange,
   newTable: TableRange,
-  alignment: Alignment[],
-  diffCell: DiffCellFn
+  alignment: Alignment[]
 ): string {
   // Used when new has no rows but old does — we lose the per-row
   // wrappers from new (there are none), so reconstruct from old's frame.
@@ -506,9 +514,9 @@ function rebuildStructurallyAlignedTable(
   out.push(headerSlice(newHtml, newTable, oldHtml, oldTable))
   for (const align of alignment) {
     if (align.oldIdx !== null) {
-      out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], 'del', diffCell))
+      out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], 'del'))
     } else if (align.newIdx !== null) {
-      out.push(emitFullRow(newHtml, newTable.rows[align.newIdx], 'ins', diffCell))
+      out.push(emitFullRow(newHtml, newTable.rows[align.newIdx], 'ins'))
     }
   }
   out.push('</table>')
@@ -548,21 +556,15 @@ function diffPreservedRow(
   // on each affected cell.
   const colspanAligned = diffColspanChangedRow(oldHtml, newHtml, oldRow, newRow, diffCell)
   if (colspanAligned !== null) return colspanAligned
-  // For a single-column add/delete (cell count differs by exactly 1),
-  // detect the position via positional similarity scan and align the
-  // remaining cells positionally. This handles the case where a column
-  // was added AND a different cell got an unrelated content edit — the
-  // edited cell still aligns by position rather than getting orphaned by
-  // the cell-LCS exact-match.
-  const delta = newRow.cells.length - oldRow.cells.length
   // For column add/delete (cell counts differ), find the best insertion
   // or deletion positions via positional similarity scan and align the
   // remaining cells positionally. This handles content-edit alongside
   // column-add by keeping the edited cell in its column position rather
   // than orphaning it via the cell-LCS exact match.
   // Guardrail: combinatorial search is C(newCount, k); we cap to avoid
-  // explosion on very wide tables. The cap is generous for real legal
-  // schedules; anything above falls through to cell-LCS.
+  // explosion on very wide tables. Worst case at the caps is C(40, 6) ≈
+  // 3.8M combos; above that we fall through to cell-LCS.
+  const delta = newRow.cells.length - oldRow.cells.length
   const absDelta = Math.abs(delta)
   if (
     absDelta > 0 &&
@@ -575,9 +577,6 @@ function diffPreservedRow(
   return diffStructurallyAlignedRow(oldHtml, newHtml, oldRow, newRow, diffCell)
 }
 
-const MAX_COLUMN_DELTA = 6
-const MAX_COLUMN_SEARCH_WIDTH = 40
-
 /**
  * For a row where new has K more cells than old, find the K column
  * positions in new where cells were inserted by scanning all C(newCount,
@@ -600,7 +599,7 @@ function diffMultiColumnAddRow(
   let oldIdx = 0
   for (let c = 0; c < newRow.cells.length; c++) {
     if (inserted.has(c)) {
-      out.push(emitFullCell(newHtml, newRow.cells[c], 'ins', diffCell))
+      out.push(emitFullCell(newHtml, newRow.cells[c], 'ins'))
     } else {
       out.push(emitDiffedCell(oldHtml, newHtml, oldRow.cells[oldIdx], newRow.cells[c], diffCell))
       oldIdx++
@@ -624,7 +623,7 @@ function diffMultiColumnDeleteRow(
   let newIdx = 0
   for (let oldIdx = 0; oldIdx < oldRow.cells.length; oldIdx++) {
     if (deleted.has(oldIdx)) {
-      out.push(emitFullCell(oldHtml, oldRow.cells[oldIdx], 'del', diffCell))
+      out.push(emitFullCell(oldHtml, oldRow.cells[oldIdx], 'del'))
       continue
     }
     out.push(emitDiffedCell(oldHtml, newHtml, oldRow.cells[oldIdx], newRow.cells[newIdx], diffCell))
@@ -641,6 +640,11 @@ function findBestColumnInsertPositions(
   oldHtml: string,
   newHtml: string
 ): number[] {
+  // Pre-compute cell texts once instead of letting textSimilarity
+  // recompute them inside every combo iteration — C(N, K) combos times
+  // ~N text extractions each is a lot of wasted string work.
+  const oldTexts = oldRow.cells.map(c => cellText(oldHtml, c))
+  const newTexts = newRow.cells.map(c => cellText(newHtml, c))
   let bestPositions: number[] = []
   let bestScore = -1
   for (const combo of combinationsOfRange(newRow.cells.length, k)) {
@@ -649,7 +653,7 @@ function findBestColumnInsertPositions(
     let oldIdx = 0
     for (let newIdx = 0; newIdx < newRow.cells.length; newIdx++) {
       if (inserted.has(newIdx)) continue
-      score += cellSimilarity(oldRow.cells[oldIdx], newRow.cells[newIdx], oldHtml, newHtml)
+      score += textSimilarity(oldTexts[oldIdx], newTexts[newIdx])
       oldIdx++
     }
     if (score > bestScore) {
@@ -667,6 +671,8 @@ function findBestColumnDeletePositions(
   oldHtml: string,
   newHtml: string
 ): number[] {
+  const oldTexts = oldRow.cells.map(c => cellText(oldHtml, c))
+  const newTexts = newRow.cells.map(c => cellText(newHtml, c))
   let bestPositions: number[] = []
   let bestScore = -1
   for (const combo of combinationsOfRange(oldRow.cells.length, k)) {
@@ -675,7 +681,7 @@ function findBestColumnDeletePositions(
     let newIdx = 0
     for (let oldIdx = 0; oldIdx < oldRow.cells.length; oldIdx++) {
       if (deleted.has(oldIdx)) continue
-      score += cellSimilarity(oldRow.cells[oldIdx], newRow.cells[newIdx], oldHtml, newHtml)
+      score += textSimilarity(oldTexts[oldIdx], newTexts[newIdx])
       newIdx++
     }
     if (score > bestScore) {
@@ -864,9 +870,9 @@ function diffStructurallyAlignedRow(
       const newCell = newRow.cells[align.newIdx]
       out.push(emitDiffedCell(oldHtml, newHtml, oldCell, newCell, diffCell))
     } else if (align.newIdx !== null) {
-      out.push(emitFullCell(newHtml, newRow.cells[align.newIdx], 'ins', diffCell))
+      out.push(emitFullCell(newHtml, newRow.cells[align.newIdx], 'ins'))
     } else if (align.oldIdx !== null) {
-      out.push(emitFullCell(oldHtml, oldRow.cells[align.oldIdx], 'del', diffCell))
+      out.push(emitFullCell(oldHtml, oldRow.cells[align.oldIdx], 'del'))
     }
   }
 
@@ -888,7 +894,7 @@ function cellKey(html: string, cell: CellRange): string {
  * each `<td>`, with an `<ins>`/`<del>` wrapper around any cell content
  * (empty cells get the class but no wrapper).
  */
-function emitFullRow(html: string, row: RowRange, kind: 'ins' | 'del', diffCell: DiffCellFn): string {
+function emitFullRow(html: string, row: RowRange, kind: 'ins' | 'del'): string {
   const cls = kind === 'ins' ? 'diffins' : 'diffdel'
   const trOpening = parseOpeningTagAt(html, row.rowStart)
   if (!trOpening) return html.slice(row.rowStart, row.rowEnd)
@@ -898,7 +904,7 @@ function emitFullRow(html: string, row: RowRange, kind: 'ins' | 'del', diffCell:
   let cursor = trOpening.end
   for (const cell of row.cells) {
     out.push(html.slice(cursor, cell.cellStart))
-    out.push(emitFullCell(html, cell, kind, diffCell))
+    out.push(emitFullCell(html, cell, kind))
     cursor = cell.cellEnd
   }
   out.push(html.slice(cursor, row.rowEnd))
@@ -913,7 +919,7 @@ function emitFullRow(html: string, row: RowRange, kind: 'ins' | 'del', diffCell:
  * the full recursive diff would produce for newly-inserted formatting.
  * Empty cells get the class on the `<td>` but no inner wrapping.
  */
-function emitFullCell(html: string, cell: CellRange, kind: 'ins' | 'del', _diffCell: DiffCellFn): string {
+function emitFullCell(html: string, cell: CellRange, kind: 'ins' | 'del'): string {
   const cls = kind === 'ins' ? 'diffins' : 'diffdel'
   const tdOpening = parseOpeningTagAt(html, cell.cellStart)
   if (!tdOpening) return html.slice(cell.cellStart, cell.cellEnd)
@@ -954,7 +960,7 @@ function wrapInlineTextRuns(content: string, kind: 'ins' | 'del'): string {
     while (j < content.length && content[j] !== '<') j++
     const text = content.slice(i, j)
     if (text.trim().length > 0) {
-      out.push(`<${tag} class='${cls}'>${text}</${tag}>`)
+      out.push(wrapText(text, tag, cls))
     } else {
       out.push(text)
     }
@@ -1024,8 +1030,13 @@ function pairSimilarUnmatchedRows(
   oldHtml: string,
   newHtml: string
 ): Alignment[] {
+  // Pre-compute row texts once; the similarity callback is invoked
+  // O(D × I) times per unmatched run (every del × every ins), and
+  // rowText walks every cell.
+  const oldTexts = oldTable.rows.map(r => rowText(oldHtml, r))
+  const newTexts = newTable.rows.map(r => rowText(newHtml, r))
   return pairSimilarUnmatched(alignment, ROW_FUZZY_THRESHOLD, (oldIdx, newIdx) =>
-    rowSimilarity(oldTable.rows[oldIdx], newTable.rows[newIdx], oldHtml, newHtml)
+    textSimilarity(oldTexts[oldIdx], newTexts[newIdx])
   )
 }
 
@@ -1036,8 +1047,10 @@ function pairSimilarUnmatchedCells(
   oldHtml: string,
   newHtml: string
 ): Alignment[] {
+  const oldTexts = oldRow.cells.map(c => cellText(oldHtml, c))
+  const newTexts = newRow.cells.map(c => cellText(newHtml, c))
   return pairSimilarUnmatched(alignment, CELL_FUZZY_THRESHOLD, (oldIdx, newIdx) =>
-    cellSimilarity(oldRow.cells[oldIdx], newRow.cells[newIdx], oldHtml, newHtml)
+    textSimilarity(oldTexts[oldIdx], newTexts[newIdx])
   )
 }
 
@@ -1135,14 +1148,6 @@ function pairSimilarUnmatched(
  * sufficient for the full range of legal-doc edits we see in
  * production tables.
  */
-function rowSimilarity(oldRow: RowRange, newRow: RowRange, oldHtml: string, newHtml: string): number {
-  return textSimilarity(rowText(oldHtml, oldRow), rowText(newHtml, newRow))
-}
-
-function cellSimilarity(oldCell: CellRange, newCell: CellRange, oldHtml: string, newHtml: string): number {
-  return textSimilarity(cellText(oldHtml, oldCell), cellText(newHtml, newCell))
-}
-
 function textSimilarity(a: string, b: string): number {
   if (a === b) return 1
   if (a.length === 0 || b.length === 0) return 0
@@ -1215,29 +1220,28 @@ function lcsAlign(oldKeys: string[], newKeys: string[]): Alignment[] {
     }
   }
 
+  // Backtrack and push; reverse at the end. `unshift` is O(n) per call
+  // so the naive version was O(n²); push+reverse is O(n) total.
   const result: Alignment[] = []
   let i = m
   let j = n
   while (i > 0 || j > 0) {
     if (i > 0 && j > 0 && oldKeys[i - 1] === newKeys[j - 1]) {
-      result.unshift({ oldIdx: i - 1, newIdx: j - 1 })
+      result.push({ oldIdx: i - 1, newIdx: j - 1 })
       i--
       j--
     } else if (j > 0 && (i === 0 || dp[i][j - 1] >= dp[i - 1][j])) {
-      result.unshift({ oldIdx: null, newIdx: j - 1 })
+      result.push({ oldIdx: null, newIdx: j - 1 })
       j--
     } else {
-      result.unshift({ oldIdx: i - 1, newIdx: null })
+      result.push({ oldIdx: i - 1, newIdx: null })
       i--
     }
   }
+  result.reverse()
   return result
 }
 
-/**
- * Returns the opening tag string with the given class injected. Existing
- * `class` attributes are preserved and the new class appended.
- */
 /**
  * Returns the opening tag with the given class injected. Locates the real
  * `class` attribute via attribute-aware walking (NOT a flat regex — that

package/test/HtmlDiff.tables.matrix.spec.ts

@@ -108,9 +108,14 @@ describe('HtmlDiff — table operations matrix', () => {
       // still drifts.
       const rowCount = countMatches(result, /<tr[\s>]/g)
       expect(rowCount).toBe(4) // header + Party A + empty + Party B
-      expect(result).toContain(
-        "<tr class='diffins'><td class='diffins'></td><td class='diffins'></td><td class='diffins'></td><td class='diffins'></td></tr>"
-      )
+      // The inserted empty row must be emitted with diffins on the <tr>
+      // and 4 empty diffins-marked cells. Asserted via regex (quote-
+      // agnostic, whitespace-tolerant) so an incidental change in
+      // attribute-quote style isn't flagged as a regression.
+      const emptyInsertedRow = result.match(/<tr class=['"]diffins['"]>(.*?)<\/tr>/)
+      expect(emptyInsertedRow).not.toBeNull()
+      const emptyCellCount = countMatches(emptyInsertedRow?.[1] ?? '', /<td class=['"]diffins['"]><\/td>/g)
+      expect(emptyCellCount).toBe(4)
     })
   })
 })