M3X-1605: Fix slow table redlining for documents with many tables

package.json

@@ -2,7 +2,7 @@
     "name": "@matrixreq/htmldiff",
     "description": "Diff and markup HTML with <ins> and <del> tags",
     "companyname": "Matrix Requirements",
-    "version": "2.0.0",
+    "version": "2.0.1",
     "keywords": [
         "diff",
         "html",

src/tables/html.spec.ts

@@ -98,5 +98,35 @@ describe("html", () => {
                 ]),
             ).to.equal("0YY3456X9");
         });
+
+        it("applies adjacent replacements", () => {
+            expect(
+                replaceRanges("aabbcc", [
+                    { start: 2, end: 4, html: "B" },
+                    { start: 0, end: 2, html: "A" },
+                ]),
+            ).to.equal("ABcc");
+        });
+
+        it("inserts at an empty range", () => {
+            expect(replaceRanges("abcd", [{ start: 2, end: 2, html: "X" }])).to.equal("abXcd");
+        });
+
+        it("returns the html when there are no replacements", () => {
+            expect(replaceRanges("abcd", [])).to.equal("abcd");
+        });
+
+        it("replaces every table and keeps the html between them", () => {
+            const html = "<p>a</p><table>1</table><p>b</p><table>2</table><p>c</p><table>3</table>";
+            const replacements = findElements(html, ["table"]).map((table, index) => ({
+                start: table.start,
+                end: table.end,
+                html: `<table id="${index}"></table>`,
+            }));
+
+            expect(replaceRanges(html, replacements)).to.equal(
+                '<p>a</p><table id="0"></table><p>b</p><table id="1"></table><p>c</p><table id="2"></table>',
+            );
+        });
     });
 });

src/tables/html.ts

@@ -183,14 +183,22 @@ export function decodeEntities(text: string): string {
 }
 
 /**
- * Applies replacements to the html, from the back so the positions stay valid.
+ * Applies replacements to the html in one pass: the kept parts and the replacements are joined
+ * once, so a document with many tables is not copied whole for every table.
  * @param html The html.
  * @param replacements Non overlapping replacements.
  * @returns The html with the replacements applied.
  */
 export function replaceRanges(html: string, replacements: Replacement[]): string {
-    return replacements
+    const parts: string[] = [];
+    let position = 0;
+    replacements
         .slice()
-        .sort((first, second) => second.start - first.start)
-        .reduce((result, replacement) => result.slice(0, replacement.start) + replacement.html + result.slice(replacement.end), html);
+        .sort((first, second) => first.start - second.start)
+        .forEach((replacement) => {
+            parts.push(html.slice(position, replacement.start), replacement.html);
+            position = replacement.end;
+        });
+    parts.push(html.slice(position));
+    return parts.join("");
 }