react-diff-viewer-continued 4.0.5 → 4.1.0

package/lib/esm/src/index.js

@@ -3,10 +3,145 @@ import cn from "classnames";
 import * as React from "react";
 import memoize from "memoize-one";
 import { computeHiddenBlocks } from "./compute-hidden-blocks.js";
-import { DiffMethod, DiffType, computeLineInformation, } from "./compute-lines.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");
+    }
+    // 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>",
+        };
+    }
+    // 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";
@@ -14,6 +149,8 @@ export var LineNumberPrefix;
 })(LineNumberPrefix || (LineNumberPrefix = {}));
 class DiffViewer extends React.Component {
     styles;
+    // Cache for on-demand word diff computation
+    wordDiffCache = new Map();
     static defaultProps = {
         oldValue: "",
         newValue: "",
@@ -34,8 +171,42 @@ class DiffViewer extends React.Component {
         this.state = {
             expandedBlocks: [],
             noSelect: undefined,
+            scrollableContainerRef: React.createRef(),
+            computedDiffResult: {},
+            isLoading: false,
+            visibleStartRow: 0
         };
     }
+    /**
+     * Computes word diff on-demand for a line, with caching.
+     * This is used when word diff was deferred during initial computation.
+     */
+    getWordDiffValues = (left, right, lineIndex) => {
+        // Handle empty left/right
+        if (!left || !right) {
+            return { leftValue: left?.value, rightValue: 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.
@@ -79,6 +250,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.
+     */
+    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.
      *
@@ -86,16 +270,59 @@ class DiffViewer extends React.Component {
      * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
      */
     renderWordDiff = (diffArray, renderer) => {
+        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 = highlighted?.props?.dangerouslySetInnerHTML?.__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)
-                : wordDiff.value;
-            if (typeof content !== "string")
-                return;
+            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]: wordDiff.type === DiffType.ADDED,
+                    [this.styles.wordAdded]: showHighlight,
                 }), children: content }, i)) : wordDiff.type === DiffType.REMOVED ? (_jsx("del", { className: cn(this.styles.wordDiff, {
-                    [this.styles.wordRemoved]: wordDiff.type === DiffType.REMOVED,
+                    [this.styles.wordRemoved]: showHighlight,
                 }), children: content }, i)) : (_jsx("span", { className: cn(this.styles.wordDiff), children: content }, i));
         });
     };
@@ -196,7 +423,9 @@ class DiffViewer extends React.Component {
      * @param index React key for the lines.
      */
     renderSplitView = ({ left, right }, index) => {
-        return (_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.
@@ -207,18 +436,20 @@ class DiffViewer extends React.Component {
      * @param index React key for the lines.
      */
     renderInlineView = ({ left, right }, index) => {
+        // Compute word diff on-demand if deferred
+        const { leftValue, rightValue } = this.getWordDiffValues(left, right, index);
         let content;
         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, left.value, null) }), _jsx("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber, LineNumberPrefix.RIGHT) })] }, index));
+            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 === DiffType.REMOVED) {
-            content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
+            content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, leftValue, null);
         }
         if (left.type === DiffType.DEFAULT) {
-            content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT);
+            content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, leftValue, right.lineNumber, LineNumberPrefix.RIGHT);
         }
         if (right.type === DiffType.ADDED) {
-            content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber);
+            content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, rightValue, right.lineNumber);
         }
         return (_jsx("tr", { className: this.styles.line, children: content }, index));
     };
@@ -239,47 +470,217 @@ class DiffViewer extends React.Component {
      */
     renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => {
         const { hideLineNumbers, splitView } = this.props;
-        const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : (_jsxs("span", { className: this.styles.codeFoldContent, children: ["Expand ", num, " lines ..."] }));
+        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 (_jsxs("tr", { className: this.styles.codeFold, children: [!hideLineNumbers && _jsx("td", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? (_jsx("td", { className: this.styles.codeFoldGutter })) : null, _jsx("td", { className: cn({
+        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 ? (_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.
+     *
      */
-    renderDiff = () => {
-        const { oldValue, newValue, splitView, disableWordDiff, compareMethod, linesOffset, } = this.props;
-        const { lineInformation, diffLines } = computeLineInformation(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines);
+    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.
+     */
+    memoisedCompute = async () => {
+        const { oldValue, newValue, disableWordDiff, compareMethod, linesOffset } = this.props;
+        const cacheKey = this.getMemoisedKey();
+        if (!!this.state.computedDiffResult[cacheKey]) {
+            this.setState((prev) => ({
+                ...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 = this.props.infiniteLoading?.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 } = await 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 } = computeHiddenBlocks(lineInformation, diffLines, extraLines);
-        const diffNodes = lineInformation.map((line, lineIndex) => {
-            if (this.props.showDiffOnly) {
+        this.state.computedDiffResult[cacheKey] = { lineInformation, lineBlocks, blocks };
+        this.setState((prev) => ({
+            ...prev,
+            computedDiffResult: this.state.computedDiffResult,
+            isLoading: false,
+        }));
+    };
+    // Estimated row height based on lineHeight: 1.6em with 12px base font
+    static ESTIMATED_ROW_HEIGHT = 19;
+    /**
+     * Handles scroll events on the scrollable container.
+     *
+     * Updates the visible start row for virtualization.
+     */
+    onScroll = () => {
+        const container = this.state.scrollableContainerRef.current;
+        if (!container || !this.props.infiniteLoading)
+            return;
+        const newStartRow = Math.floor(container.scrollTop / 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.
+     */
+    renderDiff = () => {
+        const { splitView, infiniteLoading, showDiffOnly } = this.props;
+        const { computedDiffResult, expandedBlocks, visibleStartRow, scrollableContainerRef } = this.state;
+        const cacheKey = this.getMemoisedKey();
+        const { lineInformation = [], lineBlocks = [], blocks = [] } = computedDiffResult[cacheKey] ?? {};
+        // 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;
+            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;
+        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 = rowIndex * DiffViewer.ESTIMATED_ROW_HEIGHT;
+                firstVisibleFound = true;
+            }
+            // 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 (_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));
+        }
         return {
             diffNodes,
             blocks,
             lineInformation,
+            totalRenderedRows,
+            topPadding,
         };
     };
+    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) => ({
+                ...prev,
+                isLoading: true,
+                visibleStartRow: 0
+            }));
+            this.memoisedCompute();
+        }
+    }
+    componentDidMount() {
+        this.setState((prev) => ({
+            ...prev,
+            isLoading: true
+        }));
+        this.memoisedCompute();
+    }
     render = () => {
         const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
         if (typeof compareMethod === "string" &&
@@ -328,26 +729,34 @@ class DiffViewer extends React.Component {
             }
         }
         const allExpanded = this.state.expandedBlocks.length === nodes.blocks.length;
-        return (_jsxs("div", { children: [_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),
-                                });
-                            }, 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] }), _jsx("table", { className: cn(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: _jsxs("tbody", { children: [_jsxs("tr", { children: [!this.props.hideLineNumbers ? _jsx("td", { width: "50px" }) : null, !splitView && !this.props.hideLineNumbers ? (_jsx("td", { width: "50px" })) : null, this.props.renderGutter ? _jsx("td", { width: "50px" }) : null, _jsx("td", { width: "28px" }), _jsx("td", { width: "100%" }), splitView ? (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers ? _jsx("td", { width: "50px" }) : null, this.props.renderGutter ? _jsx("td", { width: "50px" }) : null, _jsx("td", { width: "28px" }), _jsx("td", { width: "100%" })] })) : null] }), leftTitle || rightTitle ? (_jsxs("tr", { children: [_jsx("th", { colSpan: splitView ? colSpanOnSplitView : colSpanOnInlineView, className: cn(this.styles.titleBlock, this.styles.column), children: leftTitle ? (_jsx("pre", { className: this.styles.contentText, children: leftTitle })) : null }), splitView ? (_jsx("th", { colSpan: colSpanOnSplitView, className: cn(this.styles.titleBlock, this.styles.column), children: rightTitle ? (_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
+        } : {};
+        const totalContentHeight = nodes.totalRenderedRows * DiffViewer.ESTIMATED_ROW_HEIGHT;
+        const tableElement = (_jsxs("table", { className: cn(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: [_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: { ...scrollDivStyle, position: 'relative' }, onScroll: this.onScroll, ref: this.state.scrollableContainerRef, children: [(!this.props.hideSummary || leftTitle || rightTitle) && (_jsxs("div", { 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),
+                                        });
+                                    }, 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: { minHeight: totalContentHeight, paddingTop: nodes.topPadding }, children: tableElement })) : (tableElement)] }));
     };
 }
 export default DiffViewer;