react-diff-viewer-continued 4.2.2 → 4.4.0

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

@@ -3,7 +3,9 @@ import type { ReactElement, RefObject } from "react";
 import type { Change } from "diff";
 import { type Block } from "./compute-hidden-blocks.js";
 import { type DiffInformation, DiffMethod, DiffType, type LineInformation } from "./compute-lines.js";
-import { type ReactDiffViewerStyles, type ReactDiffViewerStylesOverride } from "./styles.js";
+import { type ReactDiffViewerStyles, type ReactDiffViewerStylesOverride, type ReactDiffViewerStylesVariables } from "./styles.js";
+import { type LineTokens } from "./highlight.js";
+import { type HighlightTheme } from "./highlight-theme.js";
 export declare enum LineNumberPrefix {
     LEFT = "L",
     RIGHT = "R"
@@ -75,11 +77,26 @@ export interface ReactDiffViewerProps {
      * Useful when the worker bundle fails to load in certain bundler configurations.
      */
     disableWorker?: boolean;
+    /**
+     * Enable first-party syntax highlighting for the given language (a Prism/
+     * refractor language name or alias, e.g. `"typescript"`, `"json"`, `"html"`).
+     * Each side is highlighted as a whole — so constructs that wrap across lines
+     * tokenise correctly — and the highlighting is merged with word-diff marks on
+     * changed lines. Takes precedence over `renderContent` for line content.
+     * Unknown languages fall back gracefully to no highlighting.
+     */
+    highlightLanguage?: string;
+    /**
+     * Optional overrides for the syntax-highlight colour palette. Merged over the
+     * built-in light/dark theme (selected by `useDarkTheme`). Keys are Prism token
+     * types (`keyword`, `string`, `tag`, ...) plus `default`.
+     */
+    highlightTheme?: HighlightTheme;
 }
 export interface ReactDiffViewerState {
     expandedBlocks: number[];
     noSelect?: "left" | "right";
-    scrollableContainerRef: RefObject<HTMLDivElement | null>;
+    scrollableContainerRef: RefObject<HTMLDivElement>;
     computedDiffResult: Record<string, ComputedDiffResult>;
     isLoading: boolean;
     visibleStartRow: number;
@@ -87,10 +104,16 @@ export interface ReactDiffViewerState {
     charWidth: number | null;
     cumulativeOffsets: number[] | null;
     isScrolling: boolean;
+    highlightResult: {
+        key: string;
+        left: Map<number, LineTokens>;
+        right: Map<number, LineTokens>;
+    } | null;
 }
 declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
     private styles;
     private wordDiffCache;
+    private highlightPrecedenceWarned;
     private contentColumnRef;
     private charMeasureRef;
     private stickyHeaderRef;
@@ -239,6 +262,31 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      * and stores the result in the local component state.
      */
     private memoisedCompute;
+    /**
+     * Extracts the raw text of one side of a line for whole-side highlighting.
+     * Prefers `rawValue` (deferred word diff), then a plain string value, then the
+     * concatenation of word-diff chunk values.
+     */
+    private lineToText;
+    /**
+     * Reconstructs one side's full document from the computed line information and
+     * highlights it in a single pass, returning per-line tokens keyed by line
+     * number. Highlighting the whole side (rather than line-by-line) is what keeps
+     * lexer state correct across line boundaries.
+     */
+    private buildSideTokens;
+    /**
+     * Resolves the active highlight theme (built-in light/dark, with any
+     * `highlightTheme` overrides merged on top).
+     */
+    private resolveHighlightTheme;
+    /**
+     * Computes syntax-highlight tokens for both sides when `highlightLanguage` is
+     * set, storing them in state. Lazily loads the grammar, is memoised by
+     * (diff, language, theme, dark) so it is cheap to call repeatedly, and clears
+     * the result when highlighting is disabled or the language is unavailable.
+     */
+    private updateHighlight;
     private static readonly ESTIMATED_ROW_HEIGHT;
     /**
      * Handles scroll events on the scrollable container.
@@ -258,4 +306,7 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
 export default DiffViewer;
 export { DiffMethod };
 export { default as computeStyles } from "./styles.js";
-export type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles };
+export { defaultLightThemeVariables, defaultDarkThemeVariables, } from "./styles.js";
+export { defaultLightHighlightTheme, defaultDarkHighlightTheme, } from "./highlight-theme.js";
+export type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles, ReactDiffViewerStylesVariables };
+export type { HighlightTheme } from "./highlight-theme.js";

package/lib/cjs/src/index.js

@@ -7,6 +7,56 @@ import { DiffMethod, DiffType, computeLineInformationWorker, computeDiff, } from
 import { Expand } from "./expand.js";
 import computeStyles from "./styles.js";
 import { Fold } from "./fold.js";
+import { ensureLanguage, highlightSide, mergeHighlightWithDiff, renderHighlightedPlain, sliceLineTokens, } from "./highlight.js";
+import { defaultDarkHighlightTheme, defaultLightHighlightTheme, } from "./highlight-theme.js";
+const LEADING_WHITESPACE = /^[ \t]+/;
+/**
+ * Splits a line's leading whitespace off its content so it can be rendered as a
+ * separate fixed-width indent column (see `contentFlex`/`lineIndent`/`lineBody`
+ * styles). Peeling happens *before* the value is highlighted/word-diffed, so the
+ * indent never gets swept into a syntax token or a diff chunk.
+ *
+ * Handles both shapes `renderLine` receives: a raw string, or a word-diff array
+ * whose leading whitespace may span one or more leading chunks (WORDS_WITH_SPACE
+ * isolates indentation as its own chunk) or prefix the first chunk. The remaining
+ * chunks are returned intact so their diff types/colours are preserved.
+ */
+function splitLeadingWhitespace(value) {
+    if (typeof value === "string") {
+        const match = value.match(LEADING_WHITESPACE);
+        return match
+            ? { indent: match[0], rest: value.slice(match[0].length) }
+            : { indent: "", rest: value };
+    }
+    if (Array.isArray(value)) {
+        const chunks = value.map((chunk) => (Object.assign({}, chunk)));
+        let indent = "";
+        let i = 0;
+        for (; i < chunks.length; i++) {
+            const chunkValue = typeof chunks[i].value === "string"
+                ? chunks[i].value
+                : null;
+            if (chunkValue === null)
+                break;
+            const match = chunkValue.match(LEADING_WHITESPACE);
+            if (!match)
+                break;
+            if (match[0].length === chunkValue.length) {
+                // Whole chunk is whitespace — consume it and keep scanning.
+                indent += chunkValue;
+                continue;
+            }
+            // Chunk starts with whitespace then real content — keep the trimmed remainder.
+            indent += match[0];
+            chunks[i] = Object.assign(Object.assign({}, chunks[i]), { value: chunkValue.slice(match[0].length) });
+            break;
+        }
+        return indent
+            ? { indent, rest: chunks.slice(i) }
+            : { indent: "", rest: value };
+    }
+    return { indent: "", rest: value };
+}
 /**
  * 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.
@@ -154,6 +204,8 @@ class DiffViewer extends React.Component {
         super(props);
         // Cache for on-demand word diff computation
         this.wordDiffCache = new Map();
+        // Ensures the highlightLanguage/renderContent precedence warning fires once.
+        this.highlightPrecedenceWarned = false;
         // Refs for measuring content column width and character width
         this.contentColumnRef = React.createRef();
         this.charMeasureRef = React.createRef();
@@ -334,7 +386,7 @@ class DiffViewer extends React.Component {
          * @param additionalPrefix Similar to prefix but for additional line number.
          */
         this.renderLine = (lineNumber, type, prefix, value, additionalLineNumber, additionalPrefix) => {
-            var _a;
+            var _a, _b;
             const lineNumberTemplate = `${prefix}-${lineNumber}`;
             const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
             const highlightLines = (_a = this.props.highlightLines) !== null && _a !== void 0 ? _a : [];
@@ -343,16 +395,56 @@ class DiffViewer extends React.Component {
             const added = type === DiffType.ADDED;
             const removed = type === DiffType.REMOVED;
             const changed = type === DiffType.CHANGED;
+            // Peel the leading whitespace into a separate indent column before any
+            // highlighting/word-diffing runs, so wrapped continuation lines hang-indent
+            // under the line's first character instead of the cell's left edge.
+            const { indent, rest } = splitLeadingWhitespace(value);
+            const hasWordDiff = Array.isArray(rest);
+            // First-party syntax highlighting: look up this line's whole-side tokens and
+            // rebase them past the peeled indent so they line up with the diff body.
+            const highlightMap = this.state.highlightResult
+                ? prefix === LineNumberPrefix.LEFT
+                    ? this.state.highlightResult.left
+                    : this.state.highlightResult.right
+                : null;
+            const sideLineNumber = (_b = lineNumber !== null && lineNumber !== void 0 ? lineNumber : additionalLineNumber) !== null && _b !== void 0 ? _b : undefined;
+            const fullLineTokens = highlightMap && sideLineNumber != null ? highlightMap.get(sideLineNumber) : undefined;
+            const bodyTokens = fullLineTokens ? sliceLineTokens(fullLineTokens, indent.length) : undefined;
+            // Longest body we'll merge char-by-char before falling back to plain colour.
+            const MAX_HIGHLIGHT_MERGE_LENGTH = 500;
             let content;
-            const hasWordDiff = Array.isArray(value);
-            if (hasWordDiff) {
-                content = this.renderWordDiff(value, this.props.renderContent);
+            if (bodyTokens) {
+                if (hasWordDiff) {
+                    const bodyText = rest
+                        .map((chunk) => (typeof chunk.value === "string" ? chunk.value : ""))
+                        .join("");
+                    content =
+                        bodyText.length > MAX_HIGHLIGHT_MERGE_LENGTH
+                            ? renderHighlightedPlain(bodyText, bodyTokens)
+                            : mergeHighlightWithDiff(bodyText, bodyTokens, rest, {
+                                styles: {
+                                    wordDiff: this.styles.wordDiff,
+                                    wordAdded: this.styles.wordAdded,
+                                    wordRemoved: this.styles.wordRemoved,
+                                },
+                                showHighlight: this.shouldHighlightWordDiff(),
+                            });
+                }
+                else if (typeof rest === "string") {
+                    content = renderHighlightedPlain(rest, bodyTokens);
+                }
+                else {
+                    content = rest;
+                }
+            }
+            else if (hasWordDiff) {
+                content = this.renderWordDiff(rest, this.props.renderContent);
             }
-            else if (this.props.renderContent && typeof value === "string") {
-                content = this.props.renderContent(value);
+            else if (this.props.renderContent && typeof rest === "string") {
+                content = this.props.renderContent(rest);
             }
             else {
-                content = value;
+                content = rest;
             }
             let ElementType = "div";
             if (added && !hasWordDiff) {
@@ -361,6 +453,9 @@ class DiffViewer extends React.Component {
             else if (removed && !hasWordDiff) {
                 ElementType = "del";
             }
+            // A line is only "empty" (gets the empty-line background) when it has neither
+            // body content nor peeled indentation — a whitespace-only line is not empty.
+            const isEmpty = !content && !indent;
             return (_jsxs(_Fragment, { children: [!this.props.hideLineNumbers && (_jsx("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: cn(this.styles.gutter, {
                             [this.styles.emptyGutter]: !lineNumber,
                             [this.styles.diffAdded]: added,
@@ -385,13 +480,13 @@ class DiffViewer extends React.Component {
                             styles: this.styles,
                         })
                         : null, _jsx("td", { className: cn(this.styles.marker, {
-                            [this.styles.emptyLine]: !content,
+                            [this.styles.emptyLine]: isEmpty,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
                             [this.styles.diffChanged]: changed,
                             [this.styles.highlightedLine]: highlightLine,
                         }), children: _jsxs("pre", { children: [added && "+", removed && "-"] }) }), _jsx("td", { ref: prefix === LineNumberPrefix.LEFT && !this.state.cumulativeOffsets ? this.contentColumnRef : undefined, className: cn(this.styles.content, {
-                            [this.styles.emptyLine]: !content,
+                            [this.styles.emptyLine]: isEmpty,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
                             [this.styles.diffChanged]: changed,
@@ -416,7 +511,7 @@ class DiffViewer extends React.Component {
                             ? "Added line"
                             : removed && !hasWordDiff
                                 ? "Removed line"
-                                : undefined, children: _jsx(ElementType, { className: this.styles.contentText, children: content }) })] }));
+                                : undefined, children: _jsxs(ElementType, { className: cn(this.styles.contentText, this.styles.contentFlex), children: [indent ? _jsx("span", { className: this.styles.lineIndent, children: indent }) : null, _jsx("span", { className: this.styles.lineBody, children: content })] }) })] }));
         };
         /**
          * Generates lines for split view.
@@ -516,6 +611,7 @@ class DiffViewer extends React.Component {
             const cacheKey = this.getMemoisedKey();
             if (!!this.state.computedDiffResult[cacheKey]) {
                 this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: false })));
+                this.updateHighlight();
                 return;
             }
             // Defer word diff computation when using infinite loading with reasonable container height
@@ -536,6 +632,8 @@ class DiffViewer extends React.Component {
             const { lineBlocks, blocks } = computeHiddenBlocks(lineInformation, diffLines, extraLines);
             this.state.computedDiffResult[cacheKey] = { lineInformation, lineBlocks, blocks };
             this.setState((prev) => (Object.assign(Object.assign({}, prev), { computedDiffResult: this.state.computedDiffResult, isLoading: false })), () => {
+                // Recompute syntax highlighting now that fresh line information exists.
+                this.updateHighlight();
                 // Trigger offset recalculation after diff is computed and rendered
                 // Use requestAnimationFrame to ensure DOM is ready for measurement
                 if (this.props.infiniteLoading) {
@@ -543,6 +641,100 @@ class DiffViewer extends React.Component {
                 }
             });
         };
+        /**
+         * Extracts the raw text of one side of a line for whole-side highlighting.
+         * Prefers `rawValue` (deferred word diff), then a plain string value, then the
+         * concatenation of word-diff chunk values.
+         */
+        this.lineToText = (info) => {
+            if (typeof info.rawValue === "string")
+                return info.rawValue;
+            if (typeof info.value === "string")
+                return info.value;
+            if (Array.isArray(info.value)) {
+                return info.value.map((chunk) => (typeof chunk.value === "string" ? chunk.value : "")).join("");
+            }
+            return "";
+        };
+        /**
+         * Reconstructs one side's full document from the computed line information and
+         * highlights it in a single pass, returning per-line tokens keyed by line
+         * number. Highlighting the whole side (rather than line-by-line) is what keeps
+         * lexer state correct across line boundaries.
+         */
+        this.buildSideTokens = (lineInformation, side, language, theme) => {
+            var _a;
+            const entries = [];
+            for (const line of lineInformation) {
+                const info = line[side];
+                if (!info || info.lineNumber == null)
+                    continue;
+                entries.push({ lineNumber: info.lineNumber, text: this.lineToText(info) });
+            }
+            entries.sort((a, b) => a.lineNumber - b.lineNumber);
+            const result = new Map();
+            if (entries.length === 0)
+                return result;
+            const perLine = highlightSide(entries.map((e) => e.text).join("\n"), language, theme);
+            if (!perLine)
+                return result;
+            for (let i = 0; i < entries.length; i++) {
+                result.set(entries[i].lineNumber, (_a = perLine[i]) !== null && _a !== void 0 ? _a : []);
+            }
+            return result;
+        };
+        /**
+         * Resolves the active highlight theme (built-in light/dark, with any
+         * `highlightTheme` overrides merged on top).
+         */
+        this.resolveHighlightTheme = () => {
+            const base = this.props.useDarkTheme ? defaultDarkHighlightTheme : defaultLightHighlightTheme;
+            return this.props.highlightTheme ? Object.assign(Object.assign({}, base), this.props.highlightTheme) : base;
+        };
+        /**
+         * Computes syntax-highlight tokens for both sides when `highlightLanguage` is
+         * set, storing them in state. Lazily loads the grammar, is memoised by
+         * (diff, language, theme, dark) so it is cheap to call repeatedly, and clears
+         * the result when highlighting is disabled or the language is unavailable.
+         */
+        this.updateHighlight = async () => {
+            var _a, _b, _c, _d;
+            const { highlightLanguage } = this.props;
+            if (!highlightLanguage) {
+                if (this.state.highlightResult)
+                    this.setState({ highlightResult: null });
+                return;
+            }
+            const diffKey = this.getMemoisedKey();
+            const diffResult = this.state.computedDiffResult[diffKey];
+            // Diff not ready yet — memoisedCompute re-invokes updateHighlight when it is.
+            if (!diffResult)
+                return;
+            const dark = (_a = this.props.useDarkTheme) !== null && _a !== void 0 ? _a : false;
+            const key = `${diffKey}::${highlightLanguage}::${dark}::${JSON.stringify((_b = this.props.highlightTheme) !== null && _b !== void 0 ? _b : null)}`;
+            if (((_c = this.state.highlightResult) === null || _c === void 0 ? void 0 : _c.key) === key)
+                return;
+            const canonical = await ensureLanguage(highlightLanguage);
+            // Bail if props changed while the grammar was loading.
+            if (this.props.highlightLanguage !== highlightLanguage || this.getMemoisedKey() !== diffKey)
+                return;
+            if (!canonical) {
+                if (this.state.highlightResult)
+                    this.setState({ highlightResult: null });
+                return;
+            }
+            if (!this.highlightPrecedenceWarned &&
+                this.props.renderContent &&
+                typeof process !== "undefined" &&
+                ((_d = process.env) === null || _d === void 0 ? void 0 : _d.NODE_ENV) !== "production") {
+                this.highlightPrecedenceWarned = true;
+                console.warn("[react-diff-viewer] `highlightLanguage` takes precedence over `renderContent`; `renderContent` is ignored for line content while highlighting is active.");
+            }
+            const theme = this.resolveHighlightTheme();
+            const left = this.buildSideTokens(diffResult.lineInformation, "left", canonical, theme);
+            const right = this.buildSideTokens(diffResult.lineInformation, "right", canonical, theme);
+            this.setState({ highlightResult: { key, left, right } });
+        };
         /**
          * Handles scroll events on the scrollable container.
          *
@@ -855,6 +1047,7 @@ class DiffViewer extends React.Component {
             charWidth: null,
             cumulativeOffsets: null,
             isScrolling: false,
+            highlightResult: null,
         };
     }
     /**
@@ -978,6 +1171,12 @@ class DiffViewer extends React.Component {
             this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: true, visibleStartRow: 0, cumulativeOffsets: null })));
             this.memoisedCompute();
         }
+        else if (prevProps.highlightLanguage !== this.props.highlightLanguage ||
+            prevProps.highlightTheme !== this.props.highlightTheme ||
+            prevProps.useDarkTheme !== this.props.useDarkTheme) {
+            // Highlighting inputs changed but the diff itself did not — just re-tokenise.
+            this.updateHighlight();
+        }
     }
     componentDidMount() {
         this.setState((prev) => (Object.assign(Object.assign({}, prev), { isLoading: true })));
@@ -1021,3 +1220,5 @@ DiffViewer.ESTIMATED_ROW_HEIGHT = 19;
 export default DiffViewer;
 export { DiffMethod };
 export { default as computeStyles } from "./styles.js";
+export { defaultLightThemeVariables, defaultDarkThemeVariables, } from "./styles.js";
+export { defaultLightHighlightTheme, defaultDarkHighlightTheme, } from "./highlight-theme.js";

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

@@ -11,6 +11,9 @@ export interface ReactDiffViewerStyles {
     gutter: string;
     highlightedLine: string;
     lineNumber: string;
+    contentFlex: string;
+    lineIndent: string;
+    lineBody: string;
     marker: string;
     wordDiff: string;
     wordAdded: string;
@@ -98,5 +101,7 @@ export interface ReactDiffViewerStylesOverride {
     splitView?: Interpolation;
     allExpandButton?: Interpolation;
 }
+export declare const defaultLightThemeVariables: Readonly<Required<ReactDiffViewerStylesVariables>>;
+export declare const defaultDarkThemeVariables: Readonly<Required<ReactDiffViewerStylesVariables>>;
 declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean, nonce?: string) => ReactDiffViewerStyles;
 export default _default;