@bochenw/react-diff-viewer-continued 4.3.0

package/lib/esm/src/index.js

@@ -0,0 +1,780 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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";
+import { LineNumberPrefix } from "./line-number-prefix.js";
+import { DiffRow } from "./diff-row.js";
+import { SkippedLineIndicator } from "./skipped-line-indicator.js";
+import { CommentRow } from "./comment-row.js";
+export { LineNumberPrefix } from "./line-number-prefix.js";
+class DiffViewer extends React.Component {
+    styles;
+    // Cache for on-demand word diff computation
+    wordDiffCache = new Map();
+    // Refs for measuring content column width and character width
+    contentColumnRef = React.createRef();
+    charMeasureRef = React.createRef();
+    stickyHeaderRef = React.createRef();
+    resizeObserver = null;
+    // Comment row height measurement for virtualization
+    commentRowObserver = null;
+    commentRowHeights = new Map();
+    commentRowElements = new Map();
+    commentRowRefCache = new Map();
+    pendingOffsetRecalc = false;
+    static ESTIMATED_COMMENT_ROW_HEIGHT = 100;
+    /**
+     * Shallow comparison for string arrays — avoids unnecessary work when
+     * the consumer creates a new array reference with identical contents.
+     */
+    static shallowArrayEqual(a, b) {
+        if (a === b)
+            return true;
+        if (!a || !b || a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; i++) {
+            if (a[i] !== b[i])
+                return false;
+        }
+        return true;
+    }
+    static defaultProps = {
+        oldValue: "",
+        newValue: "",
+        splitView: true,
+        highlightLines: [],
+        disableWordDiff: false,
+        compareMethod: DiffMethod.CHARS,
+        styles: {},
+        hideLineNumbers: false,
+        extraLinesSurroundingDiff: 3,
+        showDiffOnly: true,
+        useDarkTheme: false,
+        linesOffset: 0,
+        nonce: "",
+    };
+    constructor(props) {
+        super(props);
+        this.state = {
+            expandedBlocks: [],
+            noSelect: undefined,
+            scrollableContainerRef: React.createRef(),
+            computedDiffResult: {},
+            isLoading: false,
+            visibleStartRow: 0,
+            contentColumnWidth: null,
+            charWidth: null,
+            cumulativeOffsets: null,
+        };
+    }
+    /**
+     * Memoized conversion of commentLineIds array to Set for O(1) lookups.
+     */
+    getCommentLineIdsSet = memoize((ids) => new Set(ids || []));
+    /**
+     * Memoized conversion of highlightLines array to Set for O(1) lookups.
+     */
+    getHighlightLinesSet = memoize((lines) => new Set(lines || []));
+    /**
+     * Creates a ref callback for a CommentRow's <tr> element.
+     * When mounted, observes it for height changes via ResizeObserver.
+     * Callbacks are cached per lineId to avoid creating new closures on every render.
+     */
+    getCommentRowRef = (lineId) => {
+        let cached = this.commentRowRefCache.get(lineId);
+        if (!cached) {
+            cached = (el) => {
+                if (el) {
+                    this.commentRowElements.set(lineId, el);
+                    this.commentRowObserver?.observe(el);
+                }
+                else {
+                    const prev = this.commentRowElements.get(lineId);
+                    if (prev) {
+                        this.commentRowObserver?.unobserve(prev);
+                    }
+                    this.commentRowElements.delete(lineId);
+                }
+            };
+            this.commentRowRefCache.set(lineId, cached);
+        }
+        return cached;
+    };
+    /**
+     * Debounced offset recalculation — batches multiple ResizeObserver callbacks
+     * into a single requestAnimationFrame.
+     */
+    scheduleOffsetRecalc = () => {
+        if (!this.pendingOffsetRecalc) {
+            this.pendingOffsetRecalc = true;
+            requestAnimationFrame(() => {
+                this.pendingOffsetRecalc = false;
+                this.recalculateOffsets();
+            });
+        }
+    };
+    /**
+     * Initializes the ResizeObserver for measuring comment row heights.
+     */
+    initCommentRowObserver = () => {
+        if (typeof ResizeObserver === "undefined" || this.commentRowObserver)
+            return;
+        this.commentRowObserver = new ResizeObserver((entries) => {
+            let changed = false;
+            for (const entry of entries) {
+                const el = entry.target;
+                const lineId = el.getAttribute("data-comment-line");
+                if (!lineId)
+                    continue;
+                const height = entry.borderBoxSize?.[0]?.blockSize ?? el.offsetHeight;
+                const prev = this.commentRowHeights.get(lineId);
+                if (prev !== height) {
+                    this.commentRowHeights.set(lineId, height);
+                    changed = true;
+                }
+            }
+            if (changed && this.props.infiniteLoading) {
+                this.scheduleOffsetRecalc();
+            }
+        });
+    };
+    /**
+     * 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.
+     */
+    resetCodeBlocks = () => {
+        if (this.state.expandedBlocks.length > 0) {
+            this.setState({
+                expandedBlocks: [],
+            });
+            return true;
+        }
+        return false;
+    };
+    /**
+     * Pushes the target expanded code block to the state. During the re-render,
+     * this value is used to expand/fold unmodified code.
+     */
+    onBlockExpand = (id) => {
+        const prevState = this.state.expandedBlocks.slice();
+        prevState.push(id);
+        this.setState({ expandedBlocks: prevState }, () => this.recalculateOffsets());
+    };
+    /**
+     * Gets the height of the sticky header, if present.
+     */
+    getStickyHeaderHeight() {
+        return this.stickyHeaderRef.current?.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, commentLineIdsSet) {
+        const offsets = [0];
+        const seenBlocks = new Set();
+        const estimatedCommentHeight = this.props.estimatedCommentRowHeight ?? DiffViewer.ESTIMATED_COMMENT_ROW_HEIGHT;
+        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 = line.left?.value ? this.getTextLength(line.left.value) : 0;
+            const rightLen = line.right?.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;
+            let lineHeight = visualRows * DiffViewer.ESTIMATED_ROW_HEIGHT;
+            // Add height for comment rows on this line
+            if (commentLineIdsSet && commentLineIdsSet.size > 0) {
+                const leftId = line.left?.lineNumber ? `L-${line.left.lineNumber}` : null;
+                const rightId = line.right?.lineNumber ? `R-${line.right.lineNumber}` : null;
+                if (leftId && commentLineIdsSet.has(leftId)) {
+                    lineHeight += this.commentRowHeights.get(leftId) ?? estimatedCommentHeight;
+                }
+                if (rightId && rightId !== leftId && commentLineIdsSet.has(rightId)) {
+                    lineHeight += this.commentRowHeights.get(rightId) ?? estimatedCommentHeight;
+                }
+            }
+            offsets.push(offsets[offsets.length - 1] + lineHeight);
+        }
+        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;
+    }
+    /**
+     * Recalculates cumulative offsets based on current measurements.
+     * Called on resize and when blocks are expanded/collapsed.
+     */
+    recalculateOffsets = () => {
+        if (!this.props.infiniteLoading)
+            return;
+        const columnWidth = this.measureContentColumnWidth();
+        const charWidth = this.measureCharWidth();
+        if (!columnWidth)
+            return;
+        const cacheKey = this.getMemoisedKey();
+        const { lineInformation, lineBlocks, blocks } = this.state.computedDiffResult[cacheKey] ?? {};
+        if (!lineInformation)
+            return;
+        const offsets = this.buildCumulativeOffsets(lineInformation, lineBlocks, blocks, this.state.expandedBlocks, this.props.showDiffOnly, charWidth, columnWidth, this.props.splitView, this.getCommentLineIdsSet(this.props.commentLineIds));
+        this.setState({ cumulativeOffsets: offsets, contentColumnWidth: columnWidth, charWidth }, () => {
+            // Force a scroll position update to recalculate visible rows with new offsets
+            this.onScroll();
+        });
+    };
+    /**
+     * Computes final styles for the diff viewer. It combines the default styles with the user
+     * supplied overrides. The computed styles are cached with performance in mind.
+     *
+     * @param styles User supplied style overrides.
+     */
+    computeStyles = memoize(computeStyles);
+    /**
+     *
+     * 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.
+     *
+     */
+    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);
+        this.state.computedDiffResult[cacheKey] = { lineInformation, lineBlocks, blocks };
+        this.setState((prev) => ({
+            ...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());
+            }
+        });
+    };
+    // 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;
+        // 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.
+     */
+    renderDiff = () => {
+        const { splitView, infiniteLoading, showDiffOnly } = this.props;
+        const { computedDiffResult, expandedBlocks, visibleStartRow, scrollableContainerRef, cumulativeOffsets } = this.state;
+        const cacheKey = this.getMemoisedKey();
+        const { lineInformation = [], lineBlocks = [], blocks = [] } = computedDiffResult[cacheKey] ?? {};
+        // Build Set for O(1) comment line lookups
+        const commentLineIdsSet = this.getCommentLineIdsSet(this.props.commentLineIds);
+        const hasComments = commentLineIdsSet.size > 0 && !!this.props.renderComment;
+        const hasRenderGutter = !!this.props.renderGutter;
+        // Build Set for O(1) highlight line lookups
+        const highlightLinesSet = this.getHighlightLinesSet(this.props.highlightLines);
+        // 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 (!expandedBlocks.includes(blockIndex) &&
+                        lastLineOfBlock) {
+                        diffNodes.push(_jsx(SkippedLineIndicator, { num: blocks[blockIndex].lines, blockNumber: blockIndex, leftBlockLineNumber: line.left.lineNumber, rightBlockLineNumber: line.right.lineNumber, hideLineNumbers: this.props.hideLineNumbers, splitView: this.props.splitView, styles: this.styles, onBlockClick: this.onBlockExpand, codeFoldMessageRenderer: this.props.codeFoldMessageRenderer, renderGutter: this.props.renderGutter }, `fold-${lineIndex}`));
+                        continue;
+                    }
+                    if (!expandedBlocks.includes(blockIndex)) {
+                        continue;
+                    }
+                }
+            }
+            // Compute word diff on-demand if deferred
+            const { leftValue, rightValue } = this.getWordDiffValues(line.left, line.right, lineIndex);
+            diffNodes.push(_jsx(DiffRow, { index: lineIndex, leftLineNumber: line.left.lineNumber, leftType: line.left.type, leftValue: leftValue, rightLineNumber: line.right.lineNumber, rightType: line.right.type, rightValue: rightValue, highlightLeft: highlightLinesSet.has(`L-${line.left.lineNumber}`), highlightRight: highlightLinesSet.has(`R-${line.right.lineNumber}`), splitView: splitView, hideLineNumbers: this.props.hideLineNumbers, styles: this.styles, onLineNumberClick: this.props.onLineNumberClick, renderContent: this.props.renderContent, renderGutter: this.props.renderGutter, compareMethod: this.props.compareMethod, contentColumnRef: this.contentColumnRef, hasCumulativeOffsets: !!cumulativeOffsets }, lineIndex));
+            // Inject comment rows after the DiffRow
+            if (hasComments) {
+                const leftLineId = line.left?.lineNumber ? `L-${line.left.lineNumber}` : null;
+                const rightLineId = line.right?.lineNumber ? `R-${line.right.lineNumber}` : null;
+                if (leftLineId && commentLineIdsSet.has(leftLineId)) {
+                    diffNodes.push(_jsx(CommentRow, { lineId: leftLineId, lineNumber: line.left.lineNumber, prefix: LineNumberPrefix.LEFT, splitView: splitView, hideLineNumbers: this.props.hideLineNumbers, hasRenderGutter: hasRenderGutter, styles: this.styles, renderComment: this.props.renderComment, trRef: this.getCommentRowRef(leftLineId) }, `comment-${leftLineId}`));
+                }
+                if (rightLineId && rightLineId !== leftLineId && commentLineIdsSet.has(rightLineId)) {
+                    diffNodes.push(_jsx(CommentRow, { lineId: rightLineId, lineNumber: line.right.lineNumber, prefix: LineNumberPrefix.RIGHT, splitView: splitView, hideLineNumbers: this.props.hideLineNumbers, hasRenderGutter: hasRenderGutter, styles: this.styles, renderComment: this.props.renderComment, trRef: this.getCommentRowRef(rightLineId) }, `comment-${rightLineId}`));
+                }
+            }
+        }
+        // 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: cumulativeOffsets?.length ?? 0,
+                renderedCount: diffNodes.length,
+                scrollTop: scrollableContainerRef.current?.scrollTop ?? 0,
+                headerHeight: this.getStickyHeaderHeight(),
+                contentScrollTop: scrollableContainerRef.current
+                    ? Math.max(0, scrollableContainerRef.current.scrollTop - this.getStickyHeaderHeight())
+                    : 0,
+                clientHeight: scrollableContainerRef.current?.clientHeight ?? 0,
+            }
+        };
+    };
+    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();
+            // Reset scroll position to top
+            const container = this.state.scrollableContainerRef.current;
+            if (container) {
+                container.scrollTop = 0;
+            }
+            this.setState((prev) => ({
+                ...prev,
+                isLoading: true,
+                visibleStartRow: 0,
+                cumulativeOffsets: null,
+            }));
+            this.memoisedCompute();
+        }
+        // Recalculate offsets when commentLineIds change
+        if (!DiffViewer.shallowArrayEqual(prevProps.commentLineIds, this.props.commentLineIds)) {
+            // Clean stale entries from height measurement maps and ref cache
+            const currentSet = this.getCommentLineIdsSet(this.props.commentLineIds);
+            for (const lineId of this.commentRowHeights.keys()) {
+                if (!currentSet.has(lineId)) {
+                    this.commentRowHeights.delete(lineId);
+                    this.commentRowRefCache.delete(lineId);
+                    const el = this.commentRowElements.get(lineId);
+                    if (el) {
+                        this.commentRowObserver?.unobserve(el);
+                        this.commentRowElements.delete(lineId);
+                    }
+                }
+            }
+            if (this.props.infiniteLoading) {
+                this.scheduleOffsetRecalc();
+            }
+        }
+    }
+    componentDidMount() {
+        this.setState((prev) => ({
+            ...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);
+            }
+        }
+        // Initialize comment row observer for height measurement
+        this.initCommentRowObserver();
+    }
+    componentWillUnmount() {
+        this.resizeObserver?.disconnect();
+        this.commentRowObserver?.disconnect();
+    }
+    render = () => {
+        const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
+        if (typeof compareMethod === "string" &&
+            compareMethod !== DiffMethod.JSON) {
+            if (typeof oldValue !== "string" || typeof newValue !== "string") {
+                throw Error('"oldValue" and "newValue" should be strings');
+            }
+        }
+        this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
+        const nodes = this.renderDiff();
+        let colSpanOnSplitView = 3;
+        let colSpanOnInlineView = 4;
+        if (hideLineNumbers) {
+            colSpanOnSplitView -= 1;
+            colSpanOnInlineView -= 1;
+        }
+        if (this.props.renderGutter) {
+            colSpanOnSplitView += 1;
+            colSpanOnInlineView += 1;
+        }
+        let deletions = 0;
+        let additions = 0;
+        for (const l of nodes.lineInformation) {
+            if (l.left.type === DiffType.ADDED) {
+                additions++;
+            }
+            if (l.right.type === DiffType.ADDED) {
+                additions++;
+            }
+            if (l.left.type === DiffType.REMOVED) {
+                deletions++;
+            }
+            if (l.right.type === DiffType.REMOVED) {
+                deletions++;
+            }
+        }
+        const totalChanges = deletions + additions;
+        const percentageAddition = Math.round((additions / totalChanges) * 100);
+        const blocks = [];
+        for (let i = 0; i < 5; i++) {
+            if (percentageAddition > i * 20) {
+                blocks.push(_jsx("span", { className: cn(this.styles.block, this.styles.blockAddition) }, i));
+            }
+            else {
+                blocks.push(_jsx("span", { className: cn(this.styles.block, this.styles.blockDeletion) }, i));
+            }
+        }
+        const allExpanded = this.state.expandedBlocks.length === nodes.blocks.length;
+        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: { ...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: {
+                        height: nodes.totalContentHeight,
+                        position: 'relative',
+                    }, children: _jsx("div", { style: {
+                            position: 'absolute',
+                            top: nodes.topPadding,
+                            left: 0,
+                            right: 0,
+                        }, 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: ", this.state.contentColumnWidth?.toFixed(0) ?? 'N/A', "px"] }), _jsxs("div", { children: ["charWidth: ", this.state.charWidth?.toFixed(2) ?? '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, "]: ", this.state.cumulativeOffsets[nodes.debug.visibleRowEnd]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows - 1, "]: ", this.state.cumulativeOffsets[nodes.debug.totalRows - 1]?.toFixed(0) ?? 'N/A'] }), _jsxs("div", { children: ["offsets[", nodes.debug.totalRows, "]: ", this.state.cumulativeOffsets[nodes.debug.totalRows]?.toFixed(0) ?? '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: ", this.state.scrollableContainerRef.current?.scrollHeight ?? 'N/A'] }), _jsxs("div", { children: ["maxScrollTop: ", (this.state.scrollableContainerRef.current?.scrollHeight ?? 0) - nodes.debug.clientHeight] })] }))] }))] }));
+    };
+}
+export default DiffViewer;
+export { DiffMethod };
+export { default as computeStyles } from "./styles.js";