react-diff-viewer-continued 4.0.6 → 4.1.1

package/lib/cjs/src/index.js

@@ -1,60 +1,201 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cn from "classnames";
+import * as React from "react";
+import memoize from "memoize-one";
+import { computeHiddenBlocks } from "./compute-hidden-blocks.js";
+import { DiffMethod, DiffType, computeLineInformationWorker, computeDiff, } from "./compute-lines.js";
+import { Expand } from "./expand.js";
+import computeStyles from "./styles.js";
+import { Fold } from "./fold.js";
+/**
+ * Applies diff styling (ins/del tags) to pre-highlighted HTML by walking through
+ * the HTML and wrapping text portions based on character positions in the diff.
+ */
+function applyDiffToHighlightedHtml(html, diffArray, styles) {
+    const ranges = [];
+    let pos = 0;
+    for (const diff of diffArray) {
+        const value = typeof diff.value === "string" ? diff.value : "";
+        if (value.length > 0) {
+            ranges.push({ start: pos, end: pos + value.length, type: diff.type });
+            pos += value.length;
+        }
+    }
+    const segments = [];
+    let i = 0;
+    while (i < html.length) {
+        if (html[i] === "<") {
+            const tagEnd = html.indexOf(">", i);
+            if (tagEnd === -1) {
+                // Malformed HTML, treat rest as text
+                segments.push({ type: "text", content: html.slice(i) });
+                break;
+            }
+            segments.push({ type: "tag", content: html.slice(i, tagEnd + 1) });
+            i = tagEnd + 1;
+        }
+        else {
+            // Find the next tag or end of string
+            let textEnd = html.indexOf("<", i);
+            if (textEnd === -1)
+                textEnd = html.length;
+            segments.push({ type: "text", content: html.slice(i, textEnd) });
+            i = textEnd;
+        }
+    }
+    // Helper to decode HTML entities for character counting
+    function decodeEntities(text) {
+        return text
+            .replace(/&lt;/g, "<")
+            .replace(/&gt;/g, ">")
+            .replace(/&amp;/g, "&")
+            .replace(/&quot;/g, '"')
+            .replace(/&#39;/g, "'")
+            .replace(/&nbsp;/g, "\u00A0");
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
+    // Helper to get the wrapper tag for a diff type
+    function getWrapper(type) {
+        if (type === DiffType.ADDED) {
+            return {
+                open: `<ins class="${styles.wordDiff} ${styles.wordAdded}">`,
+                close: "</ins>",
+            };
+        }
+        if (type === DiffType.REMOVED) {
+            return {
+                open: `<del class="${styles.wordDiff} ${styles.wordRemoved}">`,
+                close: "</del>",
+            };
+        }
+        return {
+            open: `<span class="${styles.wordDiff}">`,
+            close: "</span>",
         };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DiffMethod = exports.LineNumberPrefix = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const memoize_one_1 = __importDefault(require("memoize-one"));
-const compute_hidden_blocks_js_1 = require("./compute-hidden-blocks.js");
-const compute_lines_js_1 = require("./compute-lines.js");
-Object.defineProperty(exports, "DiffMethod", { enumerable: true, get: function () { return compute_lines_js_1.DiffMethod; } });
-const expand_js_1 = require("./expand.js");
-const styles_js_1 = __importDefault(require("./styles.js"));
-const fold_js_1 = require("./fold.js");
-var LineNumberPrefix;
+    }
+    // Process segments, tracking text position
+    let textPos = 0;
+    let result = "";
+    for (const segment of segments) {
+        if (segment.type === "tag") {
+            result += segment.content;
+        }
+        else {
+            // Text segment - we need to split it according to diff ranges
+            const text = segment.content;
+            const decodedText = decodeEntities(text);
+            // Walk through the text, character by character (in decoded form)
+            // but output the original encoded form
+            let localDecodedPos = 0;
+            let localEncodedPos = 0;
+            while (localDecodedPos < decodedText.length) {
+                const globalPos = textPos + localDecodedPos;
+                // Find the range that covers this position
+                const range = ranges.find((r) => globalPos >= r.start && globalPos < r.end);
+                if (!range) {
+                    // No range covers this position (shouldn't happen, but be safe)
+                    // Just output the character
+                    const char = text[localEncodedPos];
+                    result += char;
+                    localEncodedPos++;
+                    localDecodedPos++;
+                    continue;
+                }
+                // How many decoded characters until the end of this range?
+                const charsUntilRangeEnd = range.end - globalPos;
+                // How many decoded characters until the end of this text segment?
+                const charsUntilTextEnd = decodedText.length - localDecodedPos;
+                // Take the minimum
+                const charsToTake = Math.min(charsUntilRangeEnd, charsUntilTextEnd);
+                // Now we need to find the corresponding encoded substring
+                // Walk through encoded text, counting decoded characters
+                let encodedChunkEnd = localEncodedPos;
+                let decodedCount = 0;
+                while (decodedCount < charsToTake && encodedChunkEnd < text.length) {
+                    if (text[encodedChunkEnd] === "&") {
+                        // Find entity end
+                        const entityEnd = text.indexOf(";", encodedChunkEnd);
+                        if (entityEnd !== -1 && entityEnd - encodedChunkEnd < 10) {
+                            encodedChunkEnd = entityEnd + 1;
+                        }
+                        else {
+                            encodedChunkEnd++;
+                        }
+                    }
+                    else {
+                        encodedChunkEnd++;
+                    }
+                    decodedCount++;
+                }
+                const chunk = text.slice(localEncodedPos, encodedChunkEnd);
+                const wrapper = getWrapper(range.type);
+                if (wrapper) {
+                    result += wrapper.open + chunk + wrapper.close;
+                }
+                else {
+                    result += chunk;
+                }
+                localEncodedPos = encodedChunkEnd;
+                localDecodedPos += charsToTake;
+            }
+            textPos += decodedText.length;
+        }
+    }
+    return result;
+}
+export var LineNumberPrefix;
 (function (LineNumberPrefix) {
     LineNumberPrefix["LEFT"] = "L";
     LineNumberPrefix["RIGHT"] = "R";
-})(LineNumberPrefix || (exports.LineNumberPrefix = LineNumberPrefix = {}));
+})(LineNumberPrefix || (LineNumberPrefix = {}));
 class DiffViewer extends React.Component {
     constructor(props) {
         super(props);
+        // Cache for on-demand word diff computation
+        this.wordDiffCache = new Map();
+        // Refs for measuring content column width and character width
+        this.contentColumnRef = React.createRef();
+        this.charMeasureRef = React.createRef();
+        this.stickyHeaderRef = React.createRef();
+        this.resizeObserver = null;
+        /**
+         * Computes word diff on-demand for a line, with caching.
+         * This is used when word diff was deferred during initial computation.
+         */
+        this.getWordDiffValues = (left, right, lineIndex) => {
+            // Handle empty left/right
+            if (!left || !right) {
+                return { leftValue: left === null || left === void 0 ? void 0 : left.value, rightValue: right === null || right === void 0 ? void 0 : right.value };
+            }
+            // If no raw values, word diff was already computed or disabled
+            // Use explicit undefined check since empty string is a valid raw value
+            if (left.rawValue === undefined || right.rawValue === undefined) {
+                return { leftValue: left.value, rightValue: right.value };
+            }
+            // Check cache
+            const cacheKey = `${lineIndex}-${left.rawValue}-${right.rawValue}`;
+            let cached = this.wordDiffCache.get(cacheKey);
+            if (!cached) {
+                // Compute word diff on-demand
+                // Use CHARS method for on-demand computation since rawValue is always a string
+                // (JSON/YAML methods only work with objects, not the string lines we have here)
+                const compareMethod = (this.props.compareMethod === DiffMethod.JSON || this.props.compareMethod === DiffMethod.YAML)
+                    ? DiffMethod.CHARS
+                    : this.props.compareMethod;
+                const computed = computeDiff(left.rawValue, right.rawValue, compareMethod);
+                cached = { left: computed.left, right: computed.right };
+                this.wordDiffCache.set(cacheKey, cached);
+            }
+            return { leftValue: cached.left, rightValue: cached.right };
+        };
         /**
          * Resets code block expand to the initial stage. Will be exposed to the parent component via
          * refs.
@@ -75,8 +216,28 @@ class DiffViewer extends React.Component {
         this.onBlockExpand = (id) => {
             const prevState = this.state.expandedBlocks.slice();
             prevState.push(id);
-            this.setState({
-                expandedBlocks: prevState,
+            this.setState({ expandedBlocks: prevState }, () => this.recalculateOffsets());
+        };
+        /**
+         * Recalculates cumulative offsets based on current measurements.
+         * Called on resize and when blocks are expanded/collapsed.
+         */
+        this.recalculateOffsets = () => {
+            var _a;
+            if (!this.props.infiniteLoading)
+                return;
+            const columnWidth = this.measureContentColumnWidth();
+            const charWidth = this.measureCharWidth();
+            if (!columnWidth)
+                return;
+            const cacheKey = this.getMemoisedKey();
+            const { lineInformation, lineBlocks, blocks } = (_a = this.state.computedDiffResult[cacheKey]) !== null && _a !== void 0 ? _a : {};
+            if (!lineInformation)
+                return;
+            const offsets = this.buildCumulativeOffsets(lineInformation, lineBlocks, blocks, this.state.expandedBlocks, this.props.showDiffOnly, charWidth, columnWidth, this.props.splitView);
+            this.setState({ cumulativeOffsets: offsets, contentColumnWidth: columnWidth, charWidth }, () => {
+                // Force a scroll position update to recalculate visible rows with new offsets
+                this.onScroll();
             });
         };
         /**
@@ -85,7 +246,7 @@ class DiffViewer extends React.Component {
          *
          * @param styles User supplied style overrides.
          */
-        this.computeStyles = (0, memoize_one_1.default)(styles_js_1.default);
+        this.computeStyles = memoize(computeStyles);
         /**
          * Returns a function with clicked line number in the closure. Returns an no-op function when no
          * onLineNumberClick handler is supplied.
@@ -98,6 +259,19 @@ class DiffViewer extends React.Component {
             }
             return () => { };
         };
+        /**
+         * Checks if the current compare method should show word-level highlighting.
+         * Character, word-level, JSON, and YAML diffs benefit from highlighting individual changes.
+         * JSON/YAML use CHARS internally for word-level diff, so they should be highlighted.
+         */
+        this.shouldHighlightWordDiff = () => {
+            const { compareMethod } = this.props;
+            return (compareMethod === DiffMethod.CHARS ||
+                compareMethod === DiffMethod.WORDS ||
+                compareMethod === DiffMethod.WORDS_WITH_SPACE ||
+                compareMethod === DiffMethod.JSON ||
+                compareMethod === DiffMethod.YAML);
+        };
         /**
          * Maps over the word diff and constructs the required React elements to show word diff.
          *
@@ -105,18 +279,61 @@ class DiffViewer extends React.Component {
          * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
          */
         this.renderWordDiff = (diffArray, renderer) => {
+            var _a, _b;
+            const showHighlight = this.shouldHighlightWordDiff();
+            const { compareMethod } = this.props;
+            // Don't apply syntax highlighting for JSON/YAML - their word diffs are computed
+            // on-demand from raw strings and syntax highlighting creates messy fragmented tokens.
+            const skipSyntaxHighlighting = compareMethod === DiffMethod.JSON || compareMethod === DiffMethod.YAML;
+            // Reconstruct the full line from diff chunks
+            const fullLine = diffArray
+                .map((d) => (typeof d.value === "string" ? d.value : ""))
+                .join("");
+            // For very long lines (>500 chars), skip fancy processing - just render plain text
+            // without word-level highlighting to avoid performance issues
+            const MAX_LINE_LENGTH = 500;
+            if (fullLine.length > MAX_LINE_LENGTH) {
+                return [_jsx("span", { children: fullLine }, "long-line")];
+            }
+            // If we have a renderer and syntax highlighting is enabled, try to highlight
+            // the full line first, then apply diff styling to preserve proper tokenization.
+            if (renderer && !skipSyntaxHighlighting) {
+                // Get the syntax-highlighted content
+                const highlighted = renderer(fullLine);
+                // Check if the renderer uses dangerouslySetInnerHTML (common with Prism, highlight.js, etc.)
+                const htmlContent = (_b = (_a = highlighted === null || highlighted === void 0 ? void 0 : highlighted.props) === null || _a === void 0 ? void 0 : _a.dangerouslySetInnerHTML) === null || _b === void 0 ? void 0 : _b.__html;
+                if (typeof htmlContent === "string") {
+                    // Apply diff styling to the highlighted HTML
+                    const styledHtml = applyDiffToHighlightedHtml(htmlContent, diffArray, {
+                        wordDiff: this.styles.wordDiff,
+                        wordAdded: showHighlight ? this.styles.wordAdded : "",
+                        wordRemoved: showHighlight ? this.styles.wordRemoved : "",
+                    });
+                    // Clone the element with the modified HTML
+                    return [
+                        React.cloneElement(highlighted, {
+                            key: "highlighted-diff",
+                            dangerouslySetInnerHTML: { __html: styledHtml },
+                        }),
+                    ];
+                }
+                // Renderer doesn't use dangerouslySetInnerHTML - fall through to per-chunk rendering
+            }
+            // Fallback: render each chunk separately (used for JSON/YAML or non-HTML renderers)
             return diffArray.map((wordDiff, i) => {
-                const content = renderer
-                    ? renderer(wordDiff.value)
-                    : (typeof wordDiff.value === 'string'
-                        ? wordDiff.value
-                        // If wordDiff.value is DiffInformation, we don't handle it, unclear why. See c0c99f5712.
-                        : undefined);
-                return wordDiff.type === compute_lines_js_1.DiffType.ADDED ? ((0, jsx_runtime_1.jsx)("ins", { className: (0, classnames_1.default)(this.styles.wordDiff, {
-                        [this.styles.wordAdded]: wordDiff.type === compute_lines_js_1.DiffType.ADDED,
-                    }), children: content }, i)) : wordDiff.type === compute_lines_js_1.DiffType.REMOVED ? ((0, jsx_runtime_1.jsx)("del", { className: (0, classnames_1.default)(this.styles.wordDiff, {
-                        [this.styles.wordRemoved]: wordDiff.type === compute_lines_js_1.DiffType.REMOVED,
-                    }), children: content }, i)) : ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.wordDiff), children: content }, i));
+                let content;
+                if (typeof wordDiff.value === "string") {
+                    content = wordDiff.value;
+                }
+                else {
+                    // If wordDiff.value is DiffInformation[], we don't handle it. See c0c99f5712.
+                    content = undefined;
+                }
+                return wordDiff.type === DiffType.ADDED ? (_jsx("ins", { className: cn(this.styles.wordDiff, {
+                        [this.styles.wordAdded]: showHighlight,
+                    }), children: content }, i)) : wordDiff.type === DiffType.REMOVED ? (_jsx("del", { className: cn(this.styles.wordDiff, {
+                        [this.styles.wordRemoved]: showHighlight,
+                    }), children: content }, i)) : (_jsx("span", { className: cn(this.styles.wordDiff), children: content }, i));
             });
         };
         /**
@@ -137,9 +354,9 @@ class DiffViewer extends React.Component {
             const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
             const highlightLine = this.props.highlightLines.includes(lineNumberTemplate) ||
                 this.props.highlightLines.includes(additionalLineNumberTemplate);
-            const added = type === compute_lines_js_1.DiffType.ADDED;
-            const removed = type === compute_lines_js_1.DiffType.REMOVED;
-            const changed = type === compute_lines_js_1.DiffType.CHANGED;
+            const added = type === DiffType.ADDED;
+            const removed = type === DiffType.REMOVED;
+            const changed = type === DiffType.CHANGED;
             let content;
             const hasWordDiff = Array.isArray(value);
             if (hasWordDiff) {
@@ -158,20 +375,20 @@ class DiffViewer extends React.Component {
             else if (removed && !hasWordDiff) {
                 ElementType = "del";
             }
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
+            return (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && (_jsx("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: cn(this.styles.gutter, {
                             [this.styles.emptyGutter]: !lineNumber,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
                             [this.styles.diffChanged]: changed,
                             [this.styles.highlightedGutter]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.lineNumber, children: lineNumber }) })), !this.props.splitView && !this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: additionalLineNumber &&
-                            this.onLineNumberClickProxy(additionalLineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
+                        }), children: _jsx("pre", { className: this.styles.lineNumber, children: lineNumber }) })), !this.props.splitView && !this.props.hideLineNumbers && (_jsx("td", { onClick: additionalLineNumber &&
+                            this.onLineNumberClickProxy(additionalLineNumberTemplate), className: cn(this.styles.gutter, {
                             [this.styles.emptyGutter]: !additionalLineNumber,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
                             [this.styles.diffChanged]: changed,
                             [this.styles.highlightedGutter]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.lineNumber, children: additionalLineNumber }) })), this.props.renderGutter
+                        }), children: _jsx("pre", { className: this.styles.lineNumber, children: additionalLineNumber }) })), this.props.renderGutter
                         ? this.props.renderGutter({
                             lineNumber,
                             type,
@@ -181,13 +398,13 @@ class DiffViewer extends React.Component {
                             additionalPrefix,
                             styles: this.styles,
                         })
-                        : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.marker, {
+                        : null, _jsx("td", { className: cn(this.styles.marker, {
                             [this.styles.emptyLine]: !content,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
                             [this.styles.diffChanged]: changed,
                             [this.styles.highlightedLine]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added && "+", removed && "-"] }) }), (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.content, {
+                        }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { ref: prefix === LineNumberPrefix.LEFT && !this.state.cumulativeOffsets ? this.contentColumnRef : undefined, className: cn(this.styles.content, {
                             [this.styles.emptyLine]: !content,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
@@ -205,7 +422,7 @@ class DiffViewer extends React.Component {
                             ? "Added line"
                             : removed && !hasWordDiff
                                 ? "Removed line"
-                                : undefined, children: (0, jsx_runtime_1.jsx)(ElementType, { className: this.styles.contentText, children: content }) })] }));
+                                : undefined, children: _jsx(ElementType, { className: this.styles.contentText, children: content }) })] }));
         };
         /**
          * Generates lines for split view.
@@ -216,7 +433,9 @@ class DiffViewer extends React.Component {
          * @param index React key for the lines.
          */
         this.renderSplitView = ({ left, right }, index) => {
-            return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.line, children: [this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value), this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)] }, index));
+            // Compute word diff on-demand if deferred
+            const { leftValue, rightValue } = this.getWordDiffValues(left, right, index);
+            return (_jsxs("tr", { className: this.styles.line, children: [this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, leftValue), this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, rightValue)] }, index));
         };
         /**
          * Generates lines for inline view.
@@ -227,20 +446,22 @@ class DiffViewer extends React.Component {
          * @param index React key for the lines.
          */
         this.renderInlineView = ({ left, right }, index) => {
+            // Compute word diff on-demand if deferred
+            const { leftValue, rightValue } = this.getWordDiffValues(left, right, index);
             let content;
-            if (left.type === compute_lines_js_1.DiffType.REMOVED && right.type === compute_lines_js_1.DiffType.ADDED) {
-                return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null) }), (0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber, LineNumberPrefix.RIGHT) })] }, index));
+            if (left.type === DiffType.REMOVED && right.type === DiffType.ADDED) {
+                return (_jsxs(React.Fragment, { children: [_jsx("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, leftValue, null) }), _jsx("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, rightValue, right.lineNumber, LineNumberPrefix.RIGHT) })] }, index));
             }
-            if (left.type === compute_lines_js_1.DiffType.REMOVED) {
-                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
+            if (left.type === DiffType.REMOVED) {
+                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, leftValue, null);
             }
-            if (left.type === compute_lines_js_1.DiffType.DEFAULT) {
-                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT);
+            if (left.type === DiffType.DEFAULT) {
+                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, leftValue, right.lineNumber, LineNumberPrefix.RIGHT);
             }
-            if (right.type === compute_lines_js_1.DiffType.ADDED) {
-                content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber);
+            if (right.type === DiffType.ADDED) {
+                content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, rightValue, right.lineNumber);
             }
-            return ((0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: content }, index));
+            return (_jsx("tr", { className: this.styles.line, children: content }, index));
         };
         /**
          * Returns a function with clicked block number in the closure.
@@ -259,51 +480,257 @@ class DiffViewer extends React.Component {
          */
         this.renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => {
             const { hideLineNumbers, splitView } = this.props;
-            const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : ((0, jsx_runtime_1.jsxs)("span", { className: this.styles.codeFoldContent, children: ["Expand ", num, " lines ..."] }));
-            const content = ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldContentContainer, children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: this.styles.codeFoldExpandButton, onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
+            const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : (_jsxs("span", { className: this.styles.codeFoldContent, children: ["@@ -", leftBlockLineNumber - num, ",", num, " +", rightBlockLineNumber - num, ",", num, " @@"] }));
+            const content = (_jsx("td", { className: this.styles.codeFoldContentContainer, children: _jsx("button", { type: "button", className: this.styles.codeFoldExpandButton, onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
             const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
-            return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.codeFold, children: [!hideLineNumbers && (0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter })) : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)({
+            const expandGutter = (_jsx("td", { className: this.styles.codeFoldGutter, children: _jsx(Expand, {}) }));
+            return (_jsxs("tr", { className: this.styles.codeFold, onClick: this.onBlockClickProxy(blockNumber), role: "button", tabIndex: 0, children: [!hideLineNumbers && expandGutter, this.props.renderGutter ? (_jsx("td", { className: this.styles.codeFoldGutter })) : null, _jsx("td", { className: cn({
                             [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
-                        }) }), isUnifiedViewWithoutLineNumbers ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("td", {}), content] })) : ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [content, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", {}) : null, (0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsx)("td", {}), !hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", {}) : null] }))] }, `${leftBlockLineNumber}-${rightBlockLineNumber}`));
+                        }) }), isUnifiedViewWithoutLineNumbers ? (_jsxs(React.Fragment, { children: [_jsx("td", {}), content] })) : (_jsxs(React.Fragment, { children: [content, this.props.renderGutter ? _jsx("td", {}) : null, _jsx("td", {}), _jsx("td", {}), !hideLineNumbers ? _jsx("td", {}) : null] }))] }, `${leftBlockLineNumber}-${rightBlockLineNumber}`));
         };
         /**
-         * Generates the entire diff view.
+         *
+         * Generates a unique cache key based on the current props used in diff computation.
+         *
+         * This key is used to memoize results and avoid recomputation for the same inputs.
+         * @returns A stringified JSON key representing the current diff settings and input values.
+         *
          */
-        this.renderDiff = () => {
-            const { oldValue, newValue, splitView, disableWordDiff, compareMethod, linesOffset, } = this.props;
-            const { lineInformation, diffLines } = (0, compute_lines_js_1.computeLineInformation)(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines);
+        this.getMemoisedKey = () => {
+            const { oldValue, newValue, disableWordDiff, compareMethod, linesOffset, alwaysShowLines, extraLinesSurroundingDiff, } = this.props;
+            return JSON.stringify({
+                oldValue,
+                newValue,
+                disableWordDiff,
+                compareMethod,
+                linesOffset,
+                alwaysShowLines,
+                extraLinesSurroundingDiff,
+            });
+        };
+        /**
+         * Computes and memoizes the diff result between `oldValue` and `newValue`.
+         *
+         * If a memoized result exists for the current input configuration, it uses that.
+         * Otherwise, it runs the diff logic in a Web Worker to avoid blocking the UI.
+         * It also computes hidden line blocks for collapsing unchanged sections,
+         * and stores the result in the local component state.
+         */
+        this.memoisedCompute = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const { oldValue, newValue, disableWordDiff, compareMethod, linesOffset } = this.props;
+            const cacheKey = this.getMemoisedKey();
+            if (!!this.state.computedDiffResult[cacheKey]) {
+                this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: false })));
+                return;
+            }
+            // Defer word diff computation when using infinite loading with reasonable container height
+            // This significantly improves initial render time for large diffs
+            const containerHeight = (_a = this.props.infiniteLoading) === null || _a === void 0 ? void 0 : _a.containerHeight;
+            const containerHeightPx = containerHeight
+                ? typeof containerHeight === 'number'
+                    ? containerHeight
+                    : parseInt(containerHeight, 10) || 0
+                : 0;
+            const shouldDeferWordDiff = !disableWordDiff &&
+                !!this.props.infiniteLoading &&
+                containerHeightPx > 0 &&
+                containerHeightPx < 2000;
+            const { lineInformation, diffLines } = yield computeLineInformationWorker(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines, shouldDeferWordDiff);
             const extraLines = this.props.extraLinesSurroundingDiff < 0
                 ? 0
                 : Math.round(this.props.extraLinesSurroundingDiff);
-            const { lineBlocks, blocks } = (0, compute_hidden_blocks_js_1.computeHiddenBlocks)(lineInformation, diffLines, extraLines);
-            const diffNodes = lineInformation.map((line, lineIndex) => {
-                if (this.props.showDiffOnly) {
+            const { lineBlocks, blocks } = computeHiddenBlocks(lineInformation, diffLines, extraLines);
+            this.state.computedDiffResult[cacheKey] = { lineInformation, lineBlocks, blocks };
+            this.setState((prev) => (Object.assign(Object.assign({}, prev), { computedDiffResult: this.state.computedDiffResult, isLoading: false })), () => {
+                // Trigger offset recalculation after diff is computed and rendered
+                // Use requestAnimationFrame to ensure DOM is ready for measurement
+                if (this.props.infiniteLoading) {
+                    requestAnimationFrame(() => this.recalculateOffsets());
+                }
+            });
+        });
+        /**
+         * Handles scroll events on the scrollable container.
+         *
+         * Updates the visible start row for virtualization.
+         */
+        this.onScroll = () => {
+            const container = this.state.scrollableContainerRef.current;
+            if (!container || !this.props.infiniteLoading)
+                return;
+            // Account for sticky header height in scroll calculations
+            const headerHeight = this.getStickyHeaderHeight();
+            const contentScrollTop = Math.max(0, container.scrollTop - headerHeight);
+            const { cumulativeOffsets } = this.state;
+            const newStartRow = cumulativeOffsets
+                ? this.findLineAtOffset(contentScrollTop, cumulativeOffsets)
+                : Math.floor(contentScrollTop / DiffViewer.ESTIMATED_ROW_HEIGHT);
+            // Only update state if the start row changed (avoid unnecessary re-renders)
+            if (newStartRow !== this.state.visibleStartRow) {
+                this.setState({ visibleStartRow: newStartRow });
+            }
+        };
+        /**
+         * Generates the entire diff view with virtualization support.
+         */
+        this.renderDiff = () => {
+            var _a, _b, _c, _d, _e, _f;
+            const { splitView, infiniteLoading, showDiffOnly } = this.props;
+            const { computedDiffResult, expandedBlocks, visibleStartRow, scrollableContainerRef, cumulativeOffsets } = this.state;
+            const cacheKey = this.getMemoisedKey();
+            const { lineInformation = [], lineBlocks = [], blocks = [] } = (_a = computedDiffResult[cacheKey]) !== null && _a !== void 0 ? _a : {};
+            // Calculate visible range for virtualization
+            let visibleRowStart = 0;
+            let visibleRowEnd = Infinity;
+            const buffer = 5; // render extra rows above/below viewport
+            if (infiniteLoading && scrollableContainerRef.current) {
+                const container = scrollableContainerRef.current;
+                // Account for sticky header height in scroll calculations
+                const headerHeight = this.getStickyHeaderHeight();
+                const contentScrollTop = Math.max(0, container.scrollTop - headerHeight);
+                if (cumulativeOffsets) {
+                    // Variable height mode: use binary search to find visible range
+                    const totalHeight = cumulativeOffsets[cumulativeOffsets.length - 1] || 0;
+                    const lastRowIndex = cumulativeOffsets.length - 2;
+                    visibleRowStart = Math.max(0, this.findLineAtOffset(contentScrollTop, cumulativeOffsets) - buffer);
+                    visibleRowEnd = this.findLineAtOffset(contentScrollTop + container.clientHeight, cumulativeOffsets) + buffer;
+                    // IMPORTANT: The calculated offsets may overestimate row heights (based on char count),
+                    // but actual CSS rendering might produce shorter rows. To prevent empty space,
+                    // ensure we render at least enough rows to fill the viewport using ESTIMATED_ROW_HEIGHT
+                    // as a conservative minimum.
+                    const minRowsToFillViewport = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
+                    visibleRowEnd = Math.max(visibleRowEnd, visibleRowStart + minRowsToFillViewport + buffer);
+                    // Also ensure we render all rows when near the bottom
+                    if (contentScrollTop + container.clientHeight >= totalHeight - buffer * DiffViewer.ESTIMATED_ROW_HEIGHT) {
+                        visibleRowEnd = lastRowIndex + buffer;
+                    }
+                }
+                else {
+                    // Fixed height fallback
+                    const viewportRows = Math.ceil(container.clientHeight / DiffViewer.ESTIMATED_ROW_HEIGHT);
+                    visibleRowStart = Math.max(0, visibleStartRow - buffer);
+                    visibleRowEnd = visibleStartRow + viewportRows + buffer;
+                }
+            }
+            // First pass: build a map of lineIndex -> renderedRowIndex
+            // This accounts for code folding where some lines don't render or render as fold indicators
+            const lineToRowMap = new Map();
+            const seenBlocks = new Set();
+            let currentRow = 0;
+            for (let i = 0; i < lineInformation.length; i++) {
+                const blockIndex = lineBlocks[i];
+                if (showDiffOnly && blockIndex !== undefined) {
+                    if (!expandedBlocks.includes(blockIndex)) {
+                        // Line is in a collapsed block
+                        const lastLineOfBlock = blocks[blockIndex].endLine === i;
+                        if (!seenBlocks.has(blockIndex) && lastLineOfBlock) {
+                            // This line renders as a fold indicator
+                            seenBlocks.add(blockIndex);
+                            lineToRowMap.set(i, currentRow);
+                            currentRow++;
+                        }
+                        // Other lines in collapsed block don't render
+                    }
+                    else {
+                        // Block is expanded, line renders normally
+                        lineToRowMap.set(i, currentRow);
+                        currentRow++;
+                    }
+                }
+                else {
+                    // Not in a block or showDiffOnly is false, line renders normally
+                    lineToRowMap.set(i, currentRow);
+                    currentRow++;
+                }
+            }
+            const totalRenderedRows = currentRow;
+            // Second pass: render only lines in the visible range
+            const diffNodes = [];
+            let topPadding = 0;
+            let firstVisibleFound = false;
+            let lastRenderedRowIndex = -1;
+            seenBlocks.clear();
+            for (let lineIndex = 0; lineIndex < lineInformation.length; lineIndex++) {
+                const line = lineInformation[lineIndex];
+                const rowIndex = lineToRowMap.get(lineIndex);
+                // Skip lines that don't render (hidden in collapsed blocks)
+                if (rowIndex === undefined)
+                    continue;
+                // Skip lines before visible range
+                if (rowIndex < visibleRowStart) {
+                    continue;
+                }
+                // Stop after visible range
+                if (rowIndex > visibleRowEnd) {
+                    break;
+                }
+                // Calculate top padding from the first visible row
+                if (!firstVisibleFound) {
+                    topPadding = cumulativeOffsets
+                        ? cumulativeOffsets[rowIndex] || 0
+                        : rowIndex * DiffViewer.ESTIMATED_ROW_HEIGHT;
+                    firstVisibleFound = true;
+                }
+                // Track the last rendered row for bottom padding calculation
+                lastRenderedRowIndex = rowIndex;
+                // Render the line
+                if (showDiffOnly) {
                     const blockIndex = lineBlocks[lineIndex];
                     if (blockIndex !== undefined) {
                         const lastLineOfBlock = blocks[blockIndex].endLine === lineIndex;
-                        if (!this.state.expandedBlocks.includes(blockIndex) &&
+                        if (!expandedBlocks.includes(blockIndex) &&
                             lastLineOfBlock) {
-                            return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
+                            diffNodes.push(_jsx(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
+                            continue;
                         }
-                        if (!this.state.expandedBlocks.includes(blockIndex)) {
-                            return null;
+                        if (!expandedBlocks.includes(blockIndex)) {
+                            continue;
                         }
                     }
                 }
-                return splitView
+                diffNodes.push(splitView
                     ? this.renderSplitView(line, lineIndex)
-                    : this.renderInlineView(line, lineIndex);
-            });
+                    : this.renderInlineView(line, lineIndex));
+            }
+            // Calculate total content height
+            const totalContentHeight = cumulativeOffsets
+                ? cumulativeOffsets[cumulativeOffsets.length - 1] || 0
+                : totalRenderedRows * DiffViewer.ESTIMATED_ROW_HEIGHT;
+            // Calculate bottom padding: space after the last rendered row
+            const bottomPadding = cumulativeOffsets && lastRenderedRowIndex >= 0
+                ? totalContentHeight - (cumulativeOffsets[lastRenderedRowIndex + 1] || totalContentHeight)
+                : 0;
             return {
                 diffNodes,
                 blocks,
                 lineInformation,
+                totalRenderedRows,
+                topPadding,
+                bottomPadding,
+                totalContentHeight,
+                renderedCount: diffNodes.length,
+                // Debug info
+                debug: {
+                    visibleRowStart,
+                    visibleRowEnd,
+                    totalRows: totalRenderedRows,
+                    offsetsLength: (_b = cumulativeOffsets === null || cumulativeOffsets === void 0 ? void 0 : cumulativeOffsets.length) !== null && _b !== void 0 ? _b : 0,
+                    renderedCount: diffNodes.length,
+                    scrollTop: (_d = (_c = scrollableContainerRef.current) === null || _c === void 0 ? void 0 : _c.scrollTop) !== null && _d !== void 0 ? _d : 0,
+                    headerHeight: this.getStickyHeaderHeight(),
+                    contentScrollTop: scrollableContainerRef.current
+                        ? Math.max(0, scrollableContainerRef.current.scrollTop - this.getStickyHeaderHeight())
+                        : 0,
+                    clientHeight: (_f = (_e = scrollableContainerRef.current) === null || _e === void 0 ? void 0 : _e.clientHeight) !== null && _f !== void 0 ? _f : 0,
+                }
             };
         };
         this.render = () => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
             if (typeof compareMethod === "string" &&
-                compareMethod !== compute_lines_js_1.DiffMethod.JSON) {
+                compareMethod !== DiffMethod.JSON) {
                 if (typeof oldValue !== "string" || typeof newValue !== "string") {
                     throw Error('"oldValue" and "newValue" should be strings');
                 }
@@ -323,16 +750,16 @@ class DiffViewer extends React.Component {
             let deletions = 0;
             let additions = 0;
             for (const l of nodes.lineInformation) {
-                if (l.left.type === compute_lines_js_1.DiffType.ADDED) {
+                if (l.left.type === DiffType.ADDED) {
                     additions++;
                 }
-                if (l.right.type === compute_lines_js_1.DiffType.ADDED) {
+                if (l.right.type === DiffType.ADDED) {
                     additions++;
                 }
-                if (l.left.type === compute_lines_js_1.DiffType.REMOVED) {
+                if (l.left.type === DiffType.REMOVED) {
                     deletions++;
                 }
-                if (l.right.type === compute_lines_js_1.DiffType.REMOVED) {
+                if (l.right.type === DiffType.REMOVED) {
                     deletions++;
                 }
             }
@@ -341,39 +768,216 @@ class DiffViewer extends React.Component {
             const blocks = [];
             for (let i = 0; i < 5; i++) {
                 if (percentageAddition > i * 20) {
-                    blocks.push((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.block, this.styles.blockAddition) }, i));
+                    blocks.push(_jsx("span", { className: cn(this.styles.block, this.styles.blockAddition) }, i));
                 }
                 else {
-                    blocks.push((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.block, this.styles.blockDeletion) }, i));
+                    blocks.push(_jsx("span", { className: cn(this.styles.block, this.styles.blockDeletion) }, i));
                 }
             }
             const allExpanded = this.state.expandedBlocks.length === nodes.blocks.length;
-            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: this.styles.summary, role: "banner", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
-                                    this.setState({
-                                        expandedBlocks: allExpanded
-                                            ? []
-                                            : nodes.blocks.map((b) => b.index),
-                                    });
-                                }, children: allExpanded ? (0, jsx_runtime_1.jsx)(fold_js_1.Fold, {}) : (0, jsx_runtime_1.jsx)(expand_js_1.Expand, {}) }), " ", totalChanges, (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? (0, jsx_runtime_1.jsx)("span", { children: this.props.summary }) : null] }), (0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
-                            [this.styles.splitView]: splitView,
-                        }), onMouseUp: () => {
-                            const elements = document.getElementsByClassName("right");
-                            for (let i = 0; i < elements.length; i++) {
-                                const element = elements.item(i);
-                                element.classList.remove(this.styles.noSelect);
-                            }
-                            const elementsLeft = document.getElementsByClassName("left");
-                            for (let i = 0; i < elementsLeft.length; i++) {
-                                const element = elementsLeft.item(i);
-                                element.classList.remove(this.styles.noSelect);
-                            }
-                        }, children: (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [!this.props.hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", { width: "50px" }) : null, !splitView && !this.props.hideLineNumbers ? ((0, jsx_runtime_1.jsx)("td", { width: "50px" })) : null, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", { width: "50px" }) : null, (0, jsx_runtime_1.jsx)("td", { width: "28px" }), (0, jsx_runtime_1.jsx)("td", { width: "100%" }), splitView ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!this.props.hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", { width: "50px" }) : null, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", { width: "50px" }) : null, (0, jsx_runtime_1.jsx)("td", { width: "28px" }), (0, jsx_runtime_1.jsx)("td", { width: "100%" })] })) : null] }), leftTitle || rightTitle ? ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { colSpan: splitView ? colSpanOnSplitView : colSpanOnInlineView, className: (0, classnames_1.default)(this.styles.titleBlock, this.styles.column), children: leftTitle ? ((0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView ? ((0, jsx_runtime_1.jsx)("th", { colSpan: colSpanOnSplitView, className: (0, classnames_1.default)(this.styles.titleBlock, this.styles.column), children: rightTitle ? ((0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: rightTitle })) : null })) : null] })) : null, nodes.diffNodes] }) })] }));
+            const LoadingElement = this.props.loadingElement;
+            const scrollDivStyle = this.props.infiniteLoading ? {
+                overflowY: 'scroll',
+                overflowX: 'hidden',
+                height: this.props.infiniteLoading.containerHeight
+            } : {};
+            // Only apply noWrap when infiniteLoading is enabled but we don't have cumulative offsets yet
+            // Once offsets are calculated, we enable pre-wrap for proper text wrapping
+            const shouldNoWrap = !!this.props.infiniteLoading && !this.state.cumulativeOffsets;
+            const tableElement = (_jsxs("table", { className: cn(this.styles.diffContainer, {
+                    [this.styles.splitView]: splitView,
+                    [this.styles.noWrap]: shouldNoWrap,
+                }), onMouseUp: () => {
+                    const elements = document.getElementsByClassName("right");
+                    for (let i = 0; i < elements.length; i++) {
+                        const element = elements.item(i);
+                        element.classList.remove(this.styles.noSelect);
+                    }
+                    const elementsLeft = document.getElementsByClassName("left");
+                    for (let i = 0; i < elementsLeft.length; i++) {
+                        const element = elementsLeft.item(i);
+                        element.classList.remove(this.styles.noSelect);
+                    }
+                }, children: [_jsxs("colgroup", { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), !splitView && !this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" }), splitView && (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && _jsx("col", { width: "50px" }), this.props.renderGutter && _jsx("col", { width: "50px" }), _jsx("col", { width: "28px" }), _jsx("col", { width: "auto" })] }))] }), _jsx("tbody", { children: nodes.diffNodes })] }));
+            return (_jsxs("div", { style: Object.assign(Object.assign({}, scrollDivStyle), { position: 'relative' }), onScroll: this.onScroll, ref: this.state.scrollableContainerRef, children: [(!this.props.hideSummary || leftTitle || rightTitle) && (_jsxs("div", { ref: this.stickyHeaderRef, className: this.styles.stickyHeader, children: [!this.props.hideSummary && (_jsxs("div", { className: this.styles.summary, role: "banner", children: [_jsx("button", { type: "button", className: this.styles.allExpandButton, onClick: () => {
+                                            this.setState({
+                                                expandedBlocks: allExpanded
+                                                    ? []
+                                                    : nodes.blocks.map((b) => b.index),
+                                            }, () => this.recalculateOffsets());
+                                        }, children: allExpanded ? _jsx(Fold, {}) : _jsx(Expand, {}) }), " ", totalChanges, _jsx("div", { style: { display: "flex", gap: "1px" }, children: blocks }), this.props.summary ? _jsx("span", { children: this.props.summary }) : null] })), (leftTitle || rightTitle) && (_jsxs("div", { className: this.styles.columnHeaders, children: [_jsx("div", { className: this.styles.titleBlock, children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView && (_jsx("div", { className: this.styles.titleBlock, children: rightTitle ? (_jsx("pre", { className: this.styles.contentText, children: rightTitle })) : null }))] }))] })), this.state.isLoading && LoadingElement && _jsx(LoadingElement, {}), this.props.infiniteLoading ? (_jsx("div", { style: {
+                            paddingTop: nodes.topPadding,
+                            paddingBottom: nodes.bottomPadding,
+                        }, children: tableElement })) : (tableElement), _jsx("span", { ref: this.charMeasureRef, style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: '-9999px',
+                            visibility: 'hidden',
+                            whiteSpace: 'pre',
+                            fontFamily: 'monospace',
+                            fontSize: 12,
+                        }, "aria-hidden": "true", children: "M" }), this.props.infiniteLoading && this.props.showDebugInfo && (_jsxs("div", { style: {
+                            position: 'fixed',
+                            top: 10,
+                            right: 10,
+                            background: 'rgba(0,0,0,0.85)',
+                            color: '#0f0',
+                            padding: '10px',
+                            fontFamily: 'monospace',
+                            fontSize: '11px',
+                            zIndex: 9999,
+                            borderRadius: '4px',
+                            maxWidth: '300px',
+                            lineHeight: 1.4,
+                        }, children: [_jsx("div", { style: { fontWeight: 'bold', marginBottom: '5px', color: '#fff' }, children: "Debug Info" }), _jsxs("div", { children: ["scrollTop: ", nodes.debug.scrollTop] }), _jsxs("div", { children: ["headerHeight: ", nodes.debug.headerHeight] }), _jsxs("div", { children: ["contentScrollTop: ", nodes.debug.contentScrollTop] }), _jsxs("div", { children: ["clientHeight: ", nodes.debug.clientHeight] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["visibleRowStart: ", nodes.debug.visibleRowStart] }), _jsxs("div", { children: ["visibleRowEnd: ", nodes.debug.visibleRowEnd] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["totalRows: ", nodes.debug.totalRows] }), _jsxs("div", { children: ["offsetsLength: ", nodes.debug.offsetsLength] }), _jsxs("div", { children: ["renderedCount: ", nodes.debug.renderedCount] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px' }, children: [_jsxs("div", { children: ["topPadding: ", nodes.topPadding.toFixed(0)] }), _jsxs("div", { children: ["bottomPadding: ", nodes.bottomPadding.toFixed(0)] }), _jsxs("div", { children: ["totalContentHeight: ", nodes.totalContentHeight.toFixed(0)] })] }), _jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#ff0' }, children: [_jsxs("div", { children: ["cumulativeOffsets: ", this.state.cumulativeOffsets ? 'SET' : 'NULL'] }), _jsxs("div", { children: ["columnWidth: ", (_b = (_a = this.state.contentColumnWidth) === null || _a === void 0 ? void 0 : _a.toFixed(0)) !== null && _b !== void 0 ? _b : 'N/A', "px"] }), _jsxs("div", { children: ["charWidth: ", (_d = (_c = this.state.charWidth) === null || _c === void 0 ? void 0 : _c.toFixed(2)) !== null && _d !== void 0 ? _d : 'N/A', "px"] }), _jsxs("div", { children: ["charsPerRow: ", this.state.contentColumnWidth && this.state.charWidth ? Math.floor(this.state.contentColumnWidth / this.state.charWidth) : 'N/A'] })] }), this.state.cumulativeOffsets && (_jsxs("div", { style: { marginTop: '5px', borderTop: '1px solid #444', paddingTop: '5px', color: '#0ff', fontSize: '10px' }, children: [_jsxs("div", { children: ["offsets[", nodes.debug.visibleRowEnd, "]: ", (_f = (_e = this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]) === null || _e === void 0 ? void 0 : _e.toFixed(0)) !== null && _f !== void 0 ? _f : 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows - 1, "]: ", (_h = (_g = this.state.cumulativeOffsets[nodes.debug.totalRows - 1]) === null || _g === void 0 ? void 0 : _g.toFixed(0)) !== null && _h !== void 0 ? _h : 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows, "]: ", (_k = (_j = this.state.cumulativeOffsets[nodes.debug.totalRows]) === null || _j === void 0 ? void 0 : _j.toFixed(0)) !== null && _k !== void 0 ? _k : 'N/A'] }), _jsxs("div", { style: { marginTop: '3px' }, children: ["viewportEnd: ", (nodes.debug.contentScrollTop + nodes.debug.clientHeight).toFixed(0)] }), _jsxs("div", { style: { marginTop: '3px', color: '#f0f' }, children: ["scrollHeight: ", (_m = (_l = this.state.scrollableContainerRef.current) === null || _l === void 0 ? void 0 : _l.scrollHeight) !== null && _m !== void 0 ? _m : 'N/A'] }), _jsxs("div", { children: ["maxScrollTop: ", ((_p = (_o = this.state.scrollableContainerRef.current) === null || _o === void 0 ? void 0 : _o.scrollHeight) !== null && _p !== void 0 ? _p : 0) - nodes.debug.clientHeight] })] }))] }))] }));
         };
         this.state = {
             expandedBlocks: [],
             noSelect: undefined,
+            scrollableContainerRef: React.createRef(),
+            computedDiffResult: {},
+            isLoading: false,
+            visibleStartRow: 0,
+            contentColumnWidth: null,
+            charWidth: null,
+            cumulativeOffsets: null,
         };
     }
+    /**
+     * Gets the height of the sticky header, if present.
+     */
+    getStickyHeaderHeight() {
+        var _a;
+        return ((_a = this.stickyHeaderRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+    }
+    /**
+     * Measures the width of a single character in the monospace font.
+     * Falls back to 7.2px if measurement fails.
+     */
+    measureCharWidth() {
+        const span = this.charMeasureRef.current;
+        if (!span)
+            return 7.2; // fallback
+        return span.getBoundingClientRect().width || 7.2;
+    }
+    /**
+     * Measures the available width for content in a content column.
+     * Falls back to estimating from container width if direct measurement fails.
+     */
+    measureContentColumnWidth() {
+        // Try direct measurement first
+        const cell = this.contentColumnRef.current;
+        if (cell && cell.clientWidth > 0) {
+            const style = window.getComputedStyle(cell);
+            const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
+            const width = cell.clientWidth - padding;
+            if (width > 0)
+                return width;
+        }
+        // Fallback: estimate from container width
+        // In split view: container has 2 content columns + gutters (50px each) + markers (28px each)
+        // In unified view: 1 content column + 2 gutters + 1 marker
+        const container = this.state.scrollableContainerRef.current;
+        if (!container || container.clientWidth <= 0)
+            return null;
+        const containerWidth = container.clientWidth;
+        const gutterWidth = this.props.hideLineNumbers ? 0 : 50;
+        const markerWidth = 28;
+        const gutterCount = this.props.splitView ? 2 : 2; // left gutter(s)
+        const markerCount = this.props.splitView ? 2 : 1;
+        const contentColumns = this.props.splitView ? 2 : 1;
+        const fixedWidth = gutterCount * gutterWidth + markerCount * markerWidth;
+        const availableWidth = containerWidth - fixedWidth;
+        return Math.max(100, availableWidth / contentColumns); // minimum 100px
+    }
+    /**
+     * Gets the text length from a value that may be a string or DiffInformation array.
+     */
+    getTextLength(value) {
+        if (!value)
+            return 0;
+        if (typeof value === 'string')
+            return value.length;
+        return value.reduce((sum, d) => sum + (typeof d.value === 'string' ? d.value.length : 0), 0);
+    }
+    /**
+     * Builds cumulative vertical offsets for each line based on character count and column width.
+     * This allows accurate scroll position calculations with variable row heights.
+     */
+    buildCumulativeOffsets(lineInformation, lineBlocks, blocks, expandedBlocks, showDiffOnly, charWidth, columnWidth, splitView) {
+        var _a, _b;
+        const offsets = [0];
+        const seenBlocks = new Set();
+        for (let i = 0; i < lineInformation.length; i++) {
+            const line = lineInformation[i];
+            if (showDiffOnly) {
+                const blockIndex = lineBlocks[i];
+                if (blockIndex !== undefined && !expandedBlocks.includes(blockIndex)) {
+                    const isLastLine = blocks[blockIndex].endLine === i;
+                    if (!seenBlocks.has(blockIndex) && isLastLine) {
+                        seenBlocks.add(blockIndex);
+                        offsets.push(offsets[offsets.length - 1] + DiffViewer.ESTIMATED_ROW_HEIGHT);
+                    }
+                    continue;
+                }
+            }
+            // Calculate visual rows for this line
+            const leftLen = ((_a = line.left) === null || _a === void 0 ? void 0 : _a.value) ? this.getTextLength(line.left.value) : 0;
+            const rightLen = ((_b = line.right) === null || _b === void 0 ? void 0 : _b.value) ? this.getTextLength(line.right.value) : 0;
+            const maxLen = splitView ? Math.max(leftLen, rightLen) : (leftLen || rightLen);
+            const charsPerRow = Math.floor(columnWidth / charWidth);
+            const visualRows = charsPerRow > 0 ? Math.max(1, Math.ceil(maxLen / charsPerRow)) : 1;
+            offsets.push(offsets[offsets.length - 1] + visualRows * DiffViewer.ESTIMATED_ROW_HEIGHT);
+        }
+        return offsets;
+    }
+    /**
+     * Binary search to find the line index at a given scroll offset.
+     */
+    findLineAtOffset(scrollTop, offsets) {
+        let low = 0;
+        let high = offsets.length - 2;
+        while (low < high) {
+            const mid = Math.floor((low + high + 1) / 2);
+            if (offsets[mid] <= scrollTop) {
+                low = mid;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        return low;
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.oldValue !== this.props.oldValue ||
+            prevProps.newValue !== this.props.newValue ||
+            prevProps.compareMethod !== this.props.compareMethod ||
+            prevProps.disableWordDiff !== this.props.disableWordDiff ||
+            prevProps.linesOffset !== this.props.linesOffset) {
+            // Clear word diff cache when diff changes
+            this.wordDiffCache.clear();
+            this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: true, visibleStartRow: 0, cumulativeOffsets: null })));
+            this.memoisedCompute();
+        }
+    }
+    componentDidMount() {
+        this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: true })));
+        this.memoisedCompute();
+        // Set up ResizeObserver for recalculating offsets on container resize
+        if (typeof ResizeObserver !== 'undefined' && this.props.infiniteLoading) {
+            this.resizeObserver = new ResizeObserver(() => {
+                requestAnimationFrame(() => this.recalculateOffsets());
+            });
+            const container = this.state.scrollableContainerRef.current;
+            if (container) {
+                this.resizeObserver.observe(container);
+            }
+        }
+    }
+    componentWillUnmount() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
 }
 DiffViewer.defaultProps = {
     oldValue: "",
@@ -381,7 +985,7 @@ DiffViewer.defaultProps = {
     splitView: true,
     highlightLines: [],
     disableWordDiff: false,
-    compareMethod: compute_lines_js_1.DiffMethod.CHARS,
+    compareMethod: DiffMethod.CHARS,
     styles: {},
     hideLineNumbers: false,
     extraLinesSurroundingDiff: 3,
@@ -390,4 +994,7 @@ DiffViewer.defaultProps = {
     linesOffset: 0,
     nonce: "",
 };
-exports.default = DiffViewer;
+// Estimated row height based on lineHeight: 1.6em with 12px base font
+DiffViewer.ESTIMATED_ROW_HEIGHT = 19;
+export default DiffViewer;
+export { DiffMethod };