@createiq/htmldiff 1.1.0-beta.0 → 1.1.0

package/dist/HtmlDiff.cjs

@@ -216,6 +216,8 @@ const PLACEHOLDER_SUFFIX = "-->";
 */
 const MAX_TABLE_ROWS = 1500;
 const MAX_TABLE_CELLS_PER_ROW = 200;
+const MAX_COLUMN_DELTA = 6;
+const MAX_COLUMN_SEARCH_WIDTH = 40;
 function makePlaceholderPrefix(oldHtml, newHtml) {
 	for (let attempt = 0; attempt < 8; attempt++) {
 		const prefix = `${PLACEHOLDER_PREFIX_BASE}${Math.floor(Math.random() * 4294967295).toString(16).padStart(8, "0")}_`;
@@ -412,7 +414,7 @@ function diffPositionalTable(oldHtml, newHtml, oldTable, newTable, diffCell) {
 */
 function diffStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, diffCell) {
 	const alignment = orderAlignmentForEmission(pairSimilarUnmatchedRows(lcsAlign(oldTable.rows.map((row) => rowKey(oldHtml, row)), newTable.rows.map((row) => rowKey(newHtml, row))), oldTable, newTable, oldHtml, newHtml));
-	if (newTable.rows.length === 0) return rebuildStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, alignment, diffCell);
+	if (newTable.rows.length === 0) return rebuildStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, alignment);
 	const out = [];
 	out.push(newHtml.slice(newTable.tableStart, newTable.rows[0].rowStart));
 	let cursor = newTable.rows[0].rowStart;
@@ -420,9 +422,9 @@ function diffStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, diff
 		const newRow = newTable.rows[align.newIdx];
 		out.push(newHtml.slice(cursor, newRow.rowStart));
 		if (align.oldIdx !== null) out.push(diffPreservedRow(oldHtml, newHtml, oldTable.rows[align.oldIdx], newRow, diffCell));
-		else out.push(emitFullRow(newHtml, newRow, "ins", diffCell));
+		else out.push(emitFullRow(newHtml, newRow, "ins"));
 		cursor = newRow.rowEnd;
-	} else if (align.oldIdx !== null) out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], "del", diffCell));
+	} else if (align.oldIdx !== null) out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], "del"));
 	out.push(newHtml.slice(cursor, newTable.tableEnd));
 	return out.join("");
 }
@@ -492,11 +494,11 @@ function orderAlignmentForEmission(alignment) {
 	});
 	return decorated.map((d) => d.entry);
 }
-function rebuildStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, alignment, diffCell) {
+function rebuildStructurallyAlignedTable(oldHtml, newHtml, oldTable, newTable, alignment) {
 	const out = [];
 	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));
-	else if (align.newIdx !== null) out.push(emitFullRow(newHtml, newTable.rows[align.newIdx], "ins", diffCell));
+	for (const align of alignment) if (align.oldIdx !== null) out.push(emitFullRow(oldHtml, oldTable.rows[align.oldIdx], "del"));
+	else if (align.newIdx !== null) out.push(emitFullRow(newHtml, newTable.rows[align.newIdx], "ins"));
 	out.push("</table>");
 	return out.join("");
 }
@@ -521,8 +523,6 @@ function diffPreservedRow(oldHtml, newHtml, oldRow, newRow, diffCell) {
 	}
 	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,
@@ -536,7 +536,7 @@ function diffMultiColumnAddRow(oldHtml, newHtml, oldRow, newRow, k, diffCell) {
 	const inserted = new Set(insertedPositions);
 	const out = [rowHeaderSlice(newHtml, newRow)];
 	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));
+	for (let c = 0; c < newRow.cells.length; c++) if (inserted.has(c)) out.push(emitFullCell(newHtml, newRow.cells[c], "ins"));
 	else {
 		out.push(emitDiffedCell(oldHtml, newHtml, oldRow.cells[oldIdx], newRow.cells[c], diffCell));
 		oldIdx++;
@@ -551,7 +551,7 @@ function diffMultiColumnDeleteRow(oldHtml, newHtml, oldRow, newRow, k, diffCell)
 	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));
@@ -561,6 +561,8 @@ function diffMultiColumnDeleteRow(oldHtml, newHtml, oldRow, newRow, k, diffCell)
 	return out.join("");
 }
 function findBestColumnInsertPositions(oldRow, newRow, k, oldHtml, newHtml) {
+	const oldTexts = oldRow.cells.map((c) => cellText(oldHtml, c));
+	const newTexts = newRow.cells.map((c) => cellText(newHtml, c));
 	let bestPositions = [];
 	let bestScore = -1;
 	for (const combo of combinationsOfRange(newRow.cells.length, k)) {
@@ -569,7 +571,7 @@ function findBestColumnInsertPositions(oldRow, newRow, k, oldHtml, newHtml) {
 		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) {
@@ -580,6 +582,8 @@ function findBestColumnInsertPositions(oldRow, newRow, k, oldHtml, newHtml) {
 	return bestPositions;
 }
 function findBestColumnDeletePositions(oldRow, newRow, k, oldHtml, newHtml) {
+	const oldTexts = oldRow.cells.map((c) => cellText(oldHtml, c));
+	const newTexts = newRow.cells.map((c) => cellText(newHtml, c));
 	let bestPositions = [];
 	let bestScore = -1;
 	for (const combo of combinationsOfRange(oldRow.cells.length, k)) {
@@ -588,7 +592,7 @@ function findBestColumnDeletePositions(oldRow, newRow, k, oldHtml, newHtml) {
 		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) {
@@ -717,8 +721,8 @@ function diffStructurallyAlignedRow(oldHtml, newHtml, oldRow, newRow, diffCell)
 		const oldCell = oldRow.cells[align.oldIdx];
 		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));
-	else if (align.oldIdx !== null) out.push(emitFullCell(oldHtml, oldRow.cells[align.oldIdx], "del", diffCell));
+	} else if (align.newIdx !== null) out.push(emitFullCell(newHtml, newRow.cells[align.newIdx], "ins"));
+	else if (align.oldIdx !== null) out.push(emitFullCell(oldHtml, oldRow.cells[align.oldIdx], "del"));
 	out.push("</tr>");
 	return out.join("");
 }
@@ -731,7 +735,7 @@ function cellKey(html, cell) {
 * each `<td>`, with an `<ins>`/`<del>` wrapper around any cell content
 * (empty cells get the class but no wrapper).
 */
-function emitFullRow(html, row, kind, diffCell) {
+function emitFullRow(html, row, kind) {
 	const cls = kind === "ins" ? "diffins" : "diffdel";
 	const trOpening = parseOpeningTagAt(html, row.rowStart);
 	if (!trOpening) return html.slice(row.rowStart, row.rowEnd);
@@ -739,7 +743,7 @@ function emitFullRow(html, row, kind, 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));
@@ -753,7 +757,7 @@ function emitFullRow(html, row, kind, 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, cell, kind, _diffCell) {
+function emitFullCell(html, cell, kind) {
 	const cls = kind === "ins" ? "diffins" : "diffdel";
 	const tdOpening = parseOpeningTagAt(html, cell.cellStart);
 	if (!tdOpening) return html.slice(cell.cellStart, cell.cellEnd);
@@ -789,7 +793,7 @@ function wrapInlineTextRuns(content, kind) {
 		let j = i;
 		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}>`);
+		if (text.trim().length > 0) out.push(wrapText(text, tag, cls));
 		else out.push(text);
 		i = j;
 	}
@@ -827,10 +831,14 @@ const CELL_FUZZY_THRESHOLD = .5;
 * expect from a typical track-changes view.
 */
 function pairSimilarUnmatchedRows(alignment, oldTable, newTable, oldHtml, newHtml) {
-	return pairSimilarUnmatched(alignment, ROW_FUZZY_THRESHOLD, (oldIdx, newIdx) => rowSimilarity(oldTable.rows[oldIdx], newTable.rows[newIdx], oldHtml, newHtml));
+	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) => textSimilarity(oldTexts[oldIdx], newTexts[newIdx]));
 }
 function pairSimilarUnmatchedCells(alignment, oldRow, newRow, oldHtml, newHtml) {
-	return pairSimilarUnmatched(alignment, CELL_FUZZY_THRESHOLD, (oldIdx, newIdx) => cellSimilarity(oldRow.cells[oldIdx], newRow.cells[newIdx], oldHtml, newHtml));
+	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) => textSimilarity(oldTexts[oldIdx], newTexts[newIdx]));
 }
 /**
 * Identify pairings inside each unmatched-only run, then build the output
@@ -916,12 +924,6 @@ function pairSimilarUnmatched(alignment, threshold, similarity) {
 * sufficient for the full range of legal-doc edits we see in
 * production tables.
 */
-function rowSimilarity(oldRow, newRow, oldHtml, newHtml) {
-	return textSimilarity(rowText(oldHtml, oldRow), rowText(newHtml, newRow));
-}
-function cellSimilarity(oldCell, newCell, oldHtml, newHtml) {
-	return textSimilarity(cellText(oldHtml, oldCell), cellText(newHtml, newCell));
-}
 function textSimilarity(a, b) {
 	if (a === b) return 1;
 	if (a.length === 0 || b.length === 0) return 0;
@@ -968,32 +970,29 @@ function lcsAlign(oldKeys, newKeys) {
 	let i = m;
 	let j = n;
 	while (i > 0 || j > 0) if (i > 0 && j > 0 && oldKeys[i - 1] === newKeys[j - 1]) {
-		result.unshift({
+		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({
+		result.push({
 			oldIdx: null,
 			newIdx: j - 1
 		});
 		j--;
 	} else {
-		result.unshift({
+		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
 * would mis-match inside a foreign attribute value like