@bochenw/react-diff-viewer-continued 4.3.0

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

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

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

@@ -0,0 +1,211 @@
+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) {
+    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 = highlighted?.props?.dangerouslySetInnerHTML?.__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/esm/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/esm/src/styles.js

@@ -0,0 +1,431 @@
+import createEmotion from "@emotion/css/create-instance";
+export default (styleOverride, useDarkTheme = false, nonce = "") => {
+    const { variables: overrideVariables = {}, ...styles } = styleOverride;
+    const themeVariables = {
+        light: {
+            ...{
+                diffViewerBackground: "#fff",
+                diffViewerColor: "#212529",
+                addedBackground: "#e6ffed",
+                addedColor: "#24292e",
+                removedBackground: "#ffeef0",
+                removedColor: "#24292e",
+                changedBackground: "#fffbdd",
+                wordAddedBackground: "#acf2bd",
+                wordRemovedBackground: "#fdb8c0",
+                addedGutterBackground: "#cdffd8",
+                removedGutterBackground: "#ffdce0",
+                gutterBackground: "#f7f7f7",
+                gutterBackgroundDark: "#f3f1f1",
+                highlightBackground: "#fffbdd",
+                highlightGutterBackground: "#fff5b1",
+                codeFoldGutterBackground: "#dbedff",
+                codeFoldBackground: "#f1f8ff",
+                emptyLineBackground: "#fafbfc",
+                gutterColor: "#212529",
+                addedGutterColor: "#212529",
+                removedGutterColor: "#212529",
+                codeFoldContentColor: "#212529",
+                diffViewerTitleBackground: "#fafbfc",
+                diffViewerTitleColor: "#212529",
+                diffViewerTitleBorderColor: "#eee",
+            },
+            ...(overrideVariables.light || {}),
+        },
+        dark: {
+            ...{
+                diffViewerBackground: "#2e303c",
+                diffViewerColor: "#FFF",
+                addedBackground: "#2ea04326",
+                addedColor: "white",
+                removedBackground: "#f851491a",
+                removedColor: "white",
+                changedBackground: "#3e302c",
+                wordAddedBackground: "#2ea04366",
+                wordRemovedBackground: "#f8514966",
+                addedGutterBackground: "#3fb9504d",
+                removedGutterBackground: "#f851494d",
+                gutterBackground: "#2c2f3a",
+                gutterBackgroundDark: "#262933",
+                highlightBackground: "#2a3967",
+                highlightGutterBackground: "#2d4077",
+                codeFoldGutterBackground: "#262831",
+                codeFoldBackground: "#262831",
+                emptyLineBackground: "#363946",
+                gutterColor: "#f0f6fc",
+                addedGutterColor: "#f0f6fc",
+                removedGutterColor: "#f0f6fc",
+                codeFoldContentColor: "#9198a1",
+                diffViewerTitleBackground: "#2f323e",
+                diffViewerTitleColor: "#f0f6fc",
+                diffViewerTitleBorderColor: "#353846",
+            },
+            ...(overrideVariables.dark || {}),
+        },
+    };
+    const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
+    const { css, cx } = createEmotion({ key: "react-diff", nonce });
+    const content = css({
+        width: "auto",
+        overflow: "hidden",
+        label: "content",
+    });
+    const splitView = css({
+        label: "split-view",
+    });
+    const stickyHeader = css({
+        position: "sticky",
+        top: 0,
+        zIndex: 2,
+        label: "sticky-header",
+    });
+    const summary = css({
+        background: variables.diffViewerTitleBackground,
+        color: variables.diffViewerTitleColor,
+        padding: "0.5em 1em",
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5em",
+        fontFamily: "monospace",
+        fontSize: 12,
+        fill: variables.diffViewerTitleColor,
+    });
+    const columnHeaders = css({
+        display: "flex",
+        label: "column-headers",
+    });
+    const diffContainer = css({
+        width: "100%",
+        minWidth: "1000px",
+        overflowX: "auto",
+        tableLayout: "fixed",
+        fontSize: 12,
+        background: variables.diffViewerBackground,
+        pre: {
+            margin: 0,
+            whiteSpace: "pre-wrap",
+            lineHeight: "1.6em",
+            width: "fit-content",
+        },
+        label: "diff-container",
+        borderCollapse: "collapse",
+        "@media (max-width: 768px)": {
+            minWidth: "unset",
+        },
+    });
+    const lineContent = css({
+        overflow: "hidden",
+        width: "100%",
+    });
+    const contentText = css({
+        color: variables.diffViewerColor,
+        whiteSpace: "pre-wrap",
+        fontFamily: "monospace",
+        lineBreak: "anywhere",
+        textDecoration: "none",
+        label: "content-text",
+    });
+    const unselectable = css({
+        userSelect: "none",
+        label: "unselectable",
+    });
+    const noWrap = css({
+        label: "no-wrap",
+        pre: {
+            whiteSpace: "pre",
+        },
+        [`.${contentText}`]: {
+            whiteSpace: "pre",
+            lineBreak: "auto",
+        },
+    });
+    const allExpandButton = css({
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: 0,
+        label: "all-expand-button",
+        ":hover": {
+            fill: variables.addedGutterColor,
+        },
+        ":focus": {
+            outline: `1px ${variables.addedGutterColor} solid`,
+        },
+    });
+    const titleBlock = css({
+        background: variables.diffViewerTitleBackground,
+        padding: "0.5em",
+        lineHeight: "1.4em",
+        height: "2.4em",
+        overflow: "hidden",
+        width: "50%",
+        borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        boxSizing: "border-box",
+        fontSize: 12,
+        label: "title-block",
+        ":only-child": {
+            width: "100%",
+        },
+        ":last-child:not(:only-child)": {
+            borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        },
+        [`.${contentText}`]: {
+            color: variables.diffViewerTitleColor,
+        },
+    });
+    const lineNumber = css({
+        color: variables.gutterColor,
+        label: "line-number",
+    });
+    const diffRemoved = css({
+        background: variables.removedBackground,
+        color: variables.removedColor,
+        pre: {
+            color: variables.removedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.removedGutterColor,
+        },
+        label: "diff-removed",
+    });
+    const diffAdded = css({
+        background: variables.addedBackground,
+        color: variables.addedColor,
+        pre: {
+            color: variables.addedColor,
+        },
+        [`.${lineNumber}`]: {
+            color: variables.addedGutterColor,
+        },
+        label: "diff-added",
+    });
+    const diffChanged = css({
+        background: variables.changedBackground,
+        [`.${lineNumber}`]: {
+            color: variables.gutterColor,
+        },
+        label: "diff-changed",
+    });
+    const wordDiff = css({
+        display: "inline",
+        textDecoration: "none",
+        label: "word-diff",
+    });
+    const wordAdded = css({
+        background: variables.wordAddedBackground,
+        label: "word-added",
+    });
+    const wordRemoved = css({
+        background: variables.wordRemovedBackground,
+        label: "word-removed",
+    });
+    const codeFoldGutter = css({
+        backgroundColor: variables.codeFoldGutterBackground,
+        label: "code-fold-gutter",
+        minWidth: "50px",
+        width: "50px",
+        textAlign: "center",
+        fill: variables.codeFoldContentColor,
+    });
+    const codeFoldContentContainer = css({
+        padding: "",
+    });
+    const codeFoldExpandButton = css({
+        background: variables.codeFoldBackground,
+        cursor: "pointer",
+        display: "inline",
+        margin: 0,
+        border: "none",
+        fill: variables.codeFoldContentColor,
+        label: "code-fold-expand-button",
+    });
+    const codeFoldContent = css({
+        color: variables.codeFoldContentColor,
+        fontFamily: "monospace",
+        label: "code-fold-content",
+    });
+    const block = css({
+        display: "block",
+        width: "10px",
+        height: "10px",
+        backgroundColor: "#ddd",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: variables.diffViewerTitleBorderColor,
+    });
+    const blockAddition = css({
+        backgroundColor: variables.wordAddedBackground,
+    });
+    const blockDeletion = css({
+        backgroundColor: variables.wordRemovedBackground,
+    });
+    const codeFold = css({
+        backgroundColor: variables.codeFoldBackground,
+        fontSize: 12,
+        alignItems: "center",
+        userSelect: "none",
+        fontWeight: 700,
+        cursor: "pointer",
+        label: "code-fold",
+        "&:hover": {
+            color: variables.diffViewerColor,
+            fill: variables.diffViewerColor,
+            "& *": {
+                color: variables.diffViewerColor,
+                fill: variables.diffViewerColor,
+            },
+        },
+        a: {
+            textDecoration: "underline !important",
+            cursor: "pointer",
+            pre: {
+                display: "inline",
+            },
+        },
+    });
+    const emptyLine = css({
+        backgroundColor: variables.emptyLineBackground,
+        label: "empty-line",
+    });
+    const commentRow = css({
+        label: "comment-row",
+        borderTop: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        backgroundColor: variables.diffViewerBackground,
+    });
+    const commentCell = css({
+        label: "comment-cell",
+        padding: 0,
+    });
+    const marker = css({
+        width: 28,
+        paddingLeft: 10,
+        paddingRight: 10,
+        userSelect: "none",
+        label: "marker",
+        [`&.${diffAdded}`]: {
+            pre: {
+                color: variables.addedColor,
+            },
+        },
+        [`&.${diffRemoved}`]: {
+            pre: {
+                color: variables.removedColor,
+            },
+        },
+    });
+    const highlightedLine = css({
+        background: variables.highlightBackground,
+        label: "highlighted-line",
+        [`.${wordAdded}, .${wordRemoved}`]: {
+            backgroundColor: "initial",
+        },
+    });
+    const highlightedGutter = css({
+        label: "highlighted-gutter",
+    });
+    const gutter = css({
+        userSelect: "none",
+        minWidth: 50,
+        width: "50px",
+        padding: "0 10px",
+        whiteSpace: "nowrap",
+        label: "gutter",
+        textAlign: "center",
+        color: variables.gutterColor,
+        background: variables.gutterBackground,
+        "&:hover": {
+            cursor: "pointer",
+            background: variables.gutterBackgroundDark,
+            pre: {
+                opacity: 1,
+            },
+        },
+        pre: {
+            opacity: 0.5,
+            textAlign: "center",
+            width: "100%",
+        },
+        [`&.${diffAdded}`]: {
+            background: variables.addedGutterBackground,
+        },
+        [`&.${diffRemoved}`]: {
+            background: variables.removedGutterBackground,
+        },
+        [`&.${highlightedGutter}`]: {
+            background: variables.highlightGutterBackground,
+            "&:hover": {
+                background: variables.highlightGutterBackground,
+            },
+        },
+    });
+    const emptyGutter = css({
+        "&:hover": {
+            background: variables.gutterBackground,
+            cursor: "initial",
+        },
+        label: "empty-gutter",
+    });
+    const line = css({
+        verticalAlign: "baseline",
+        label: "line",
+        textDecoration: "none",
+    });
+    const column = css({});
+    const defaultStyles = {
+        diffContainer,
+        diffRemoved,
+        diffAdded,
+        diffChanged,
+        splitView,
+        marker,
+        highlightedGutter,
+        highlightedLine,
+        gutter,
+        line,
+        lineContent,
+        wordDiff,
+        wordAdded,
+        summary,
+        block,
+        blockAddition,
+        blockDeletion,
+        wordRemoved,
+        noSelect: unselectable,
+        noWrap,
+        codeFoldGutter,
+        codeFoldExpandButton,
+        codeFoldContentContainer,
+        codeFold,
+        emptyGutter,
+        emptyLine,
+        lineNumber,
+        contentText,
+        content,
+        column,
+        codeFoldContent,
+        stickyHeader,
+        columnHeaders,
+        titleBlock,
+        allExpandButton,
+        commentRow,
+        commentCell,
+    };
+    const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => ({
+        ...acc,
+        ...{
+            [key]: css(styles[key]),
+        },
+    }), {});
+    return Object.keys(defaultStyles).reduce((acc, key) => ({
+        ...acc,
+        ...{
+            [key]: computerOverrideStyles[key]
+                ? cx(defaultStyles[key], computerOverrideStyles[key])
+                : defaultStyles[key],
+        },
+    }), {});
+};