@createiq/htmldiff 1.0.5-beta.3 → 1.0.5-beta.4

package/package.json

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

package/src/TableDiff.ts

@@ -379,20 +379,25 @@ function diffStructurallyAlignedTable(
   const oldKeys = oldTable.rows.map(row => rowKey(oldHtml, row))
   const newKeys = newTable.rows.map(row => rowKey(newHtml, row))
   const exactAlignment = lcsAlign(oldKeys, newKeys)
-  const alignment = pairSimilarUnmatchedRows(exactAlignment, oldTable, newTable, oldHtml, newHtml)
+  const paired = pairSimilarUnmatchedRows(exactAlignment, oldTable, newTable, oldHtml, newHtml)
+  // Reorder so unpaired deleted rows appear at their *natural old-side
+  // position* — immediately after the preserved/paired row that came
+  // before them in old. Without this, runs of unpaired dels at low
+  // alignment indices end up emitted before any preserved row (the
+  // "deleted rows out of order" bug).
+  const alignment = orderAlignmentForEmission(paired)
 
   // Walk new's tableStart→tableEnd, substituting rows with their diffed
   // form so `<thead>`/`<tbody>` wrappers and inter-row whitespace are
   // preserved verbatim. Deleted rows (no position in new) are injected
-  // inline at their alignment position. If new has no rows at all, fall
-  // back to a from-scratch reconstruction so we still emit deleted rows.
+  // inline at the cursor's current position, which now corresponds to
+  // their natural old-side slot thanks to the reordering above. If new
+  // 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)
   }
 
-  // Emit the table header (`<table>` + any `<thead>`/`<tbody>` opening
-  // text up to the first row) up-front so a leading run of deleted-only
-  // alignments doesn't slip in before the table opens.
   const out: string[] = []
   out.push(newHtml.slice(newTable.tableStart, newTable.rows[0].rowStart))
   let cursor = newTable.rows[0].rowStart
@@ -407,8 +412,6 @@ function diffStructurallyAlignedTable(
       }
       cursor = newRow.rowEnd
     } else if (align.oldIdx !== null) {
-      // Deleted row: inject inline at the current cursor (between the
-      // previously emitted row and the next one in new).
       out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], 'del', diffCell))
     }
   }
@@ -416,6 +419,79 @@ function diffStructurallyAlignedTable(
   return out.join('')
 }
 
+/**
+ * Reorders the alignment so emission produces rows in the visually-
+ * correct order. Each entry is assigned a fractional "position" in
+ * new's flow:
+ *
+ *   • Preserved/paired (oldIdx, newIdx): position = newIdx.
+ *   • Pure insert (null, newIdx): position = newIdx.
+ *   • Pure delete (oldIdx, null): position = newIdx-of-preserved-just-
+ *     before-this-oldIdx + 0.5. Dels at the same gap sort by oldIdx so
+ *     they appear in old's row order. The +0.5 places dels BEFORE any
+ *     insert at the same gap (insert at newIdx N1+1 has position N1+1
+ *     which is > N1+0.5), giving the natural "delete first, insert
+ *     second" reading order at a replaced position.
+ *
+ * This handles the full range:
+ *   • Run of unpaired dels at the start (no preserved predecessor):
+ *     position -0.5, sorted by oldIdx.
+ *   • Dels in the middle: positioned right after their preceding
+ *     preserved row.
+ *   • Dels at the end (no preserved successor): positioned after the
+ *     last preserved row.
+ *
+ * Without this reordering, a run of unpaired deletes at low alignment
+ * indices got emitted at cursor = first-new-row position — putting
+ * all deletes before any preserved row in the output, regardless of
+ * where they came from in old.
+ */
+function orderAlignmentForEmission(alignment: Alignment[]): Alignment[] {
+  const preserved: Array<{ oldIdx: number; newIdx: number }> = []
+  for (const a of alignment) {
+    if (a.oldIdx !== null && a.newIdx !== null) {
+      preserved.push({ oldIdx: a.oldIdx, newIdx: a.newIdx })
+    }
+  }
+  preserved.sort((a, b) => a.oldIdx - b.oldIdx)
+
+  // For a deleted row with oldIdx K, return the newIdx of the preserved
+  // entry with the largest oldIdx less than K, or -1 if none.
+  function newIdxOfPreservedBefore(oldIdx: number): number {
+    let result = -1
+    for (const p of preserved) {
+      if (p.oldIdx >= oldIdx) break
+      result = p.newIdx
+    }
+    return result
+  }
+
+  // Decorate each alignment with a fractional position. We use
+  // (primary, secondary) tuples so dels at the same gap sort by oldIdx
+  // (in old's row order) and inserts at the same newIdx stay stable.
+  const decorated = alignment.map((a, i) => {
+    let primary: number
+    let secondary: number
+    if (a.newIdx !== null) {
+      primary = a.newIdx
+      secondary = a.oldIdx === null ? 1 : 0 // preserved before pure-insert at same newIdx (rare)
+    } else {
+      // Pure delete
+      primary = newIdxOfPreservedBefore(a.oldIdx as number) + 0.5
+      secondary = a.oldIdx as number
+    }
+    return { entry: a, primary, secondary, originalIdx: i }
+  })
+
+  decorated.sort((a, b) => {
+    if (a.primary !== b.primary) return a.primary - b.primary
+    if (a.secondary !== b.secondary) return a.secondary - b.secondary
+    return a.originalIdx - b.originalIdx // stable
+  })
+
+  return decorated.map(d => d.entry)
+}
+
 function rebuildStructurallyAlignedTable(
   oldHtml: string,
   newHtml: string,

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

@@ -56,6 +56,36 @@ describe('HtmlDiff — table operations matrix', () => {
   })
 
   describe('user-reported regression scenarios', () => {
+    it('multiple deleted rows including the last appear in old-order, AFTER preserved header (regression for "deleted rows out of order")', () => {
+      // The user's exact scenario: column added + multiple rows deleted
+      // including the last row, with content edits that prevent fuzzy
+      // pairing of some rows. Before the fix, all deletes ended up at
+      // the START of the output (above the header) because they were
+      // emitted at cursor=row-0-start, regardless of where they came
+      // from in old.
+      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</td><td>(i) Upon execution.</td></tr>' +
+        '<tr><td>Party B</td><td>IRS Form W-9, as applicable (or any successor thereto).</td><td>(i) Upon execution.</td></tr>' +
+        '<tr><td>Party A and Party B</td><td>Any document required.</td><td>Promptly upon reasonable demand.</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. Here's some extra content</td><td>(i) Upon execution.</td></tr>" +
+        '<tr><td>Party B</td><td>A</td><td>IRS Form W</td><td>Yeah OK</td></tr>' +
+        '</table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      assertStructurallyValid(result, oldHtml, newHtml, 'multiple deleted rows out of order')
+      // The header (preserved with column added) MUST come first.
+      const headerIdx = result.indexOf('<tr><th>Party</th>')
+      const firstDelIdx = result.indexOf("<tr class='diffdel'>")
+      expect(headerIdx).toBeGreaterThanOrEqual(0)
+      expect(firstDelIdx).toBeGreaterThan(headerIdx)
+    })
+
     it('column added + empty row inserted in middle (regression for issue with blank row)', () => {
       const oldHtml =
         '<table>' +
@@ -126,6 +156,16 @@ function allSingleOperations(): Op[] {
           })
         ),
     },
+    {
+      name: 'delete-multiple-rows-from-end',
+      apply: t =>
+        renderTable(
+          mutate(t, m => {
+            m.deleteRow(t.rows.length - 1)
+            m.deleteRow(t.rows.length - 1)
+          })
+        ),
+    },
     {
       name: 'add-column-start',
       apply: t => renderTable(mutate(t, m => m.addColumnAt(0, ['NewHeader', 'newA', 'newB', 'newC']))),

package/test/HtmlDiff.tables.spec.ts

@@ -802,6 +802,86 @@ describe('HtmlDiff — tables', () => {
       )
     })
 
+    it('preserves data-* attributes on a <tr> in an inserted row alongside the injected class', () => {
+      // The frontend uses `data-behaviour` (and similar `data-*` attrs)
+      // on `<tr>` to drive table semantics. The diff must keep these
+      // attributes verbatim AND add `class='diffins'` for the structural
+      // change. (Whether downstream DOMPurify allows `data-*` is a
+      // separate concern — htmldiff's job is to not lose them.)
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" class=\'diffins\'>' +
+          "<td class='diffins'><ins class='diffins'>B</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves data-* attributes on a <tr> in a deleted row alongside the injected class', () => {
+      const oldHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" class=\'diffdel\'>' +
+          "<td class='diffdel'><del class='diffdel'>B</del></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves multiple data-* attributes on a <tr> in an inserted row', () => {
+      const oldHtml = '<table><tr><td>A</td></tr></table>'
+      const newHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data" id="row2" data-x="y"><td>B</td></tr></table>'
+
+      expect(HtmlDiff.execute(oldHtml, newHtml)).toEqual(
+        '<table>' +
+          '<tr><td>A</td></tr>' +
+          '<tr data-behaviour="data" id="row2" data-x="y" class=\'diffins\'>' +
+          "<td class='diffins'><ins class='diffins'>B</ins></td>" +
+          '</tr>' +
+          '</table>'
+      )
+    })
+
+    it('preserves data-* attribute on a <tr> when the row passes through column-add path (preserved row)', () => {
+      // The row exists in both old and new but cell counts differ
+      // (column added) — goes through diffPreservedRow → multi-column
+      // detection path. Attribute should still be preserved verbatim
+      // via rowHeaderSlice.
+      const oldHtml = '<table><tr><td>A</td></tr><tr data-behaviour="data"><td>B</td><td>C</td></tr></table>'
+      const newHtml =
+        '<table><tr><td>A</td><td>X</td></tr><tr data-behaviour="data"><td>B</td><td>EXTRA</td><td>C</td></tr></table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      expect(result).toContain('<tr data-behaviour="data">')
+    })
+
+    it('preserves data-* attribute on a <tr> when the row passes through fuzzy-matching with content edit', () => {
+      // The row gets fuzzy-matched after exact LCS misses the content
+      // edit. Goes through diffStructurallyAlignedTable → fuzzy pair →
+      // diffPreservedRow. Attribute should still flow through.
+      const oldHtml =
+        '<table>' +
+        '<tr><td>A</td></tr>' +
+        '<tr data-behaviour="data"><td>The quick brown fox jumps over.</td></tr>' +
+        '</table>'
+      const newHtml =
+        '<table>' +
+        '<tr><td>A</td></tr>' +
+        '<tr data-behaviour="data"><td>The quick brown fox jumps over the lazy dog.</td></tr>' +
+        '<tr><td>NEW</td></tr>' +
+        '</table>'
+
+      const result = HtmlDiff.execute(oldHtml, newHtml)
+      expect(result).toContain('<tr data-behaviour="data">')
+    })
+
     it('preserves <table> attributes verbatim from new (no diff marker on attribute changes)', () => {
       const oldHtml = '<table border="1"><tr><td>A</td></tr></table>'
       const newHtml = '<table border="2" style="width:100%"><tr><td>A</td></tr></table>'