@bochenw/react-diff-viewer-continued 4.3.0

package/lib/cjs/src/line-number-prefix.d.ts

@@ -0,0 +1,4 @@
+export declare enum LineNumberPrefix {
+    LEFT = "L",
+    RIGHT = "R"
+}

package/lib/cjs/src/line-number-prefix.js

@@ -0,0 +1,5 @@
+export var LineNumberPrefix;
+(function (LineNumberPrefix) {
+    LineNumberPrefix["LEFT"] = "L";
+    LineNumberPrefix["RIGHT"] = "R";
+})(LineNumberPrefix || (LineNumberPrefix = {}));

package/lib/cjs/src/render-word-diff.d.ts

@@ -0,0 +1,22 @@
+import type { JSX, ReactElement } from "react";
+import { type DiffInformation, DiffMethod } from "./compute-lines.js";
+import type { ReactDiffViewerStyles } from "./styles.js";
+import type { Change } from "diff";
+/**
+ * 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.
+ */
+export declare function applyDiffToHighlightedHtml(html: string, diffArray: DiffInformation[], styles: {
+    wordDiff: string;
+    wordAdded: string;
+    wordRemoved: string;
+}): string;
+/**
+ * Maps over the word diff and constructs the required React elements to show word diff.
+ *
+ * @param diffArray Word diff information derived from line information.
+ * @param styles Computed styles for the diff viewer.
+ * @param compareMethod The diff comparison method being used.
+ * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
+ */
+export declare function renderWordDiff(diffArray: DiffInformation[], styles: ReactDiffViewerStyles, compareMethod: DiffMethod | ((oldStr: string, newStr: string) => Change[]), renderer?: (chunk: string) => JSX.Element): ReactElement[];

package/lib/cjs/src/render-word-diff.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from "classnames";
+import * as React from "react";
+import { DiffMethod, DiffType, } from "./compute-lines.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.
+ */
+export 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(/&#x27;/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;
+}
+/**
+ * Checks if the current compare method should show word-level highlighting.
+ */
+function shouldHighlightWordDiff(compareMethod) {
+    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.
+ *
+ * @param diffArray Word diff information derived from line information.
+ * @param styles Computed styles for the diff viewer.
+ * @param compareMethod The diff comparison method being used.
+ * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
+ */
+export function renderWordDiff(diffArray, styles, compareMethod, renderer) {
+    var _a, _b;
+    const showHighlight = shouldHighlightWordDiff(compareMethod);
+    // 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, try to highlight the full line first,
+    // then apply diff styling to preserve proper tokenization.
+    if (renderer) {
+        // 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: styles.wordDiff,
+                wordAdded: showHighlight ? styles.wordAdded : "",
+                wordRemoved: showHighlight ? 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) => {
+        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(styles.wordDiff, {
+                [styles.wordAdded]: showHighlight,
+            }), children: content }, i)) : wordDiff.type === DiffType.REMOVED ? (_jsx("del", { className: cn(styles.wordDiff, {
+                [styles.wordRemoved]: showHighlight,
+            }), children: content }, i)) : (_jsx("span", { className: cn(styles.wordDiff), children: content }, i));
+    });
+}

package/lib/cjs/src/skipped-line-indicator.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { ReactElement } from "react";
+import { type DiffInformation, DiffType } from "./compute-lines.js";
+import type { ReactDiffViewerStyles } from "./styles.js";
+import { LineNumberPrefix } from "./line-number-prefix.js";
+export interface SkippedLineIndicatorProps {
+    num: number;
+    blockNumber: number;
+    leftBlockLineNumber: number;
+    rightBlockLineNumber: number;
+    hideLineNumbers: boolean;
+    splitView: boolean;
+    styles: ReactDiffViewerStyles;
+    onBlockClick: (id: number) => void;
+    codeFoldMessageRenderer?: (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement;
+    renderGutter?: (data: {
+        lineNumber: number;
+        type: DiffType;
+        prefix: LineNumberPrefix;
+        value: string | DiffInformation[];
+        additionalLineNumber: number;
+        additionalPrefix: LineNumberPrefix;
+        styles: ReactDiffViewerStyles;
+    }) => ReactElement;
+}
+/**
+ * Memoized component that renders the code fold / skipped line indicator row.
+ */
+export declare const SkippedLineIndicator: React.NamedExoticComponent<SkippedLineIndicatorProps>;

package/lib/cjs/src/skipped-line-indicator.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import cn from "classnames";
+import * as React from "react";
+import { Expand } from "./expand.js";
+/**
+ * Custom equality function for React.memo — skips comparing callback/render props.
+ */
+function skippedLineIndicatorPropsAreEqual(prev, next) {
+    return (prev.num === next.num &&
+        prev.blockNumber === next.blockNumber &&
+        prev.leftBlockLineNumber === next.leftBlockLineNumber &&
+        prev.rightBlockLineNumber === next.rightBlockLineNumber &&
+        prev.hideLineNumbers === next.hideLineNumbers &&
+        prev.splitView === next.splitView &&
+        prev.styles === next.styles);
+}
+/**
+ * Memoized component that renders the code fold / skipped line indicator row.
+ */
+export const SkippedLineIndicator = React.memo(function SkippedLineIndicator({ num, blockNumber, leftBlockLineNumber, rightBlockLineNumber, hideLineNumbers, splitView, styles, onBlockClick, codeFoldMessageRenderer, renderGutter, }) {
+    const handleClick = () => onBlockClick(blockNumber);
+    const message = codeFoldMessageRenderer ? (codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : (_jsxs("span", { className: styles.codeFoldContent, children: ["@@ -", leftBlockLineNumber - num, ",", num, " +", rightBlockLineNumber - num, ",", num, " @@"] }));
+    const content = (_jsx("td", { className: styles.codeFoldContentContainer, children: _jsx("button", { type: "button", className: styles.codeFoldExpandButton, onClick: handleClick, tabIndex: 0, children: message }) }));
+    const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
+    const expandGutter = (_jsx("td", { className: styles.codeFoldGutter, children: _jsx(Expand, {}) }));
+    return (_jsxs("tr", { className: styles.codeFold, onClick: handleClick, role: "button", tabIndex: 0, children: [!hideLineNumbers && expandGutter, renderGutter ? (_jsx("td", { className: styles.codeFoldGutter })) : null, _jsx("td", { className: cn({
+                    [styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
+                }) }), isUnifiedViewWithoutLineNumbers ? (_jsxs(React.Fragment, { children: [_jsx("td", {}), content] })) : (_jsxs(React.Fragment, { children: [content, renderGutter ? _jsx("td", {}) : null, _jsx("td", {}), _jsx("td", {}), !hideLineNumbers ? _jsx("td", {}) : null] }))] }, `${leftBlockLineNumber}-${rightBlockLineNumber}`));
+}, skippedLineIndicatorPropsAreEqual);

package/lib/cjs/src/styles.d.ts

@@ -0,0 +1,102 @@
+import type { Interpolation } from "@emotion/react";
+export interface ReactDiffViewerStyles {
+    diffContainer?: string;
+    diffRemoved?: string;
+    diffAdded?: string;
+    diffChanged?: string;
+    line?: string;
+    highlightedGutter?: string;
+    contentText?: string;
+    lineContent?: string;
+    gutter?: string;
+    highlightedLine?: string;
+    lineNumber?: string;
+    marker?: string;
+    wordDiff?: string;
+    wordAdded?: string;
+    wordRemoved?: string;
+    codeFoldGutter?: string;
+    codeFoldExpandButton?: string;
+    summary?: string;
+    codeFoldContentContainer?: string;
+    emptyGutter?: string;
+    emptyLine?: string;
+    codeFold?: string;
+    stickyHeader?: string;
+    columnHeaders?: string;
+    titleBlock?: string;
+    content?: string;
+    column?: string;
+    noSelect?: string;
+    noWrap?: string;
+    splitView?: string;
+    allExpandButton?: string;
+    commentRow?: string;
+    commentCell?: string;
+    [key: string]: string | undefined;
+}
+export interface ReactDiffViewerStylesVariables {
+    diffViewerBackground?: string;
+    diffViewerTitleBackground?: string;
+    diffViewerColor?: string;
+    diffViewerTitleColor?: string;
+    diffViewerTitleBorderColor?: string;
+    addedBackground?: string;
+    addedColor?: string;
+    removedBackground?: string;
+    removedColor?: string;
+    changedBackground?: string;
+    wordAddedBackground?: string;
+    wordRemovedBackground?: string;
+    addedGutterBackground?: string;
+    removedGutterBackground?: string;
+    gutterBackground?: string;
+    gutterBackgroundDark?: string;
+    highlightBackground?: string;
+    highlightGutterBackground?: string;
+    codeFoldGutterBackground?: string;
+    codeFoldBackground?: string;
+    emptyLineBackground?: string;
+    gutterColor?: string;
+    addedGutterColor?: string;
+    removedGutterColor?: string;
+    codeFoldContentColor?: string;
+}
+export interface ReactDiffViewerStylesOverride {
+    variables?: {
+        dark?: ReactDiffViewerStylesVariables;
+        light?: ReactDiffViewerStylesVariables;
+    };
+    diffContainer?: Interpolation;
+    diffRemoved?: Interpolation;
+    diffAdded?: Interpolation;
+    diffChanged?: Interpolation;
+    marker?: Interpolation;
+    emptyGutter?: Interpolation;
+    highlightedLine?: Interpolation;
+    lineNumber?: Interpolation;
+    highlightedGutter?: Interpolation;
+    contentText?: Interpolation;
+    gutter?: Interpolation;
+    lineContent?: Interpolation;
+    line?: Interpolation;
+    wordDiff?: Interpolation;
+    wordAdded?: Interpolation;
+    wordRemoved?: Interpolation;
+    codeFoldGutter?: Interpolation;
+    codeFoldExpandButton?: Interpolation;
+    summary?: Interpolation;
+    codeFoldContentContainer?: Interpolation;
+    codeFold?: Interpolation;
+    emptyLine?: Interpolation;
+    content?: Interpolation;
+    noSelect?: Interpolation;
+    column?: Interpolation;
+    titleBlock?: Interpolation;
+    splitView?: Interpolation;
+    allExpandButton?: Interpolation;
+    commentRow?: Interpolation;
+    commentCell?: Interpolation;
+}
+declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean, nonce?: string) => ReactDiffViewerStyles;
+export default _default;