react-diff-viewer-continued 4.3.0 → 4.4.0

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 })));
@@ -1022,3 +1221,4 @@ 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;

package/lib/cjs/src/styles.js

@@ -147,6 +147,30 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         textDecoration: "none",
         label: "content-text",
     });
+    // Line content is laid out as two flex items: a fixed indent column carrying the
+    // line's leading whitespace, and a flexible body that wraps. This gives wrapped
+    // continuation lines a hanging indent — they align under the first character of
+    // the line's content instead of falling back to the cell's left edge.
+    const contentFlex = css({
+        display: "flex",
+        alignItems: "baseline",
+        label: "content-flex",
+    });
+    // The indent column. `pre` + `flex-shrink: 0` keep the whitespace intact and
+    // prevent it from ever collapsing or wrapping, so it sizes exactly to the indent.
+    const lineIndent = css({
+        whiteSpace: "pre",
+        wordBreak: "keep-all",
+        flex: "0 0 auto",
+        label: "line-indent",
+    });
+    // The wrapping body. `min-width: 0` is required so a long unbreakable run wraps
+    // within the flex item instead of overflowing the row.
+    const lineBody = css({
+        flex: "1 1 auto",
+        minWidth: 0,
+        label: "line-body",
+    });
     const unselectable = css({
         userSelect: "none",
         label: "unselectable",
@@ -257,14 +281,30 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const codeFoldContentContainer = css({
         // Neutralize host `:where(th,td){ padding }` on the fold content cell.
         padding: 0,
+        // Clip the button to the cell box so any residual misalignment can't bleed into the row flow.
+        overflow: "hidden",
+        // `diffContainer`'s `& td` isolation reset pins vertical-align:baseline at specificity
+        // (0,2,0), which out-ranks this single class and drags the fold cell back onto the row
+        // baseline (the ~2-3px offset). Self-chain the selector to (0,3,0) so the fold cell's
+        // middle alignment wins over that reset.
+        "&&&": {
+            verticalAlign: "middle",
+        },
         label: "code-fold-content-container",
     });
     const codeFoldExpandButton = css({
         background: variables.codeFoldBackground,
         cursor: "pointer",
-        display: "inline",
+        // `display: inline` puts the button in the cell's line box, so baseline/line-height
+        // metrics nudge it ~2-3px down from the cell top and it spills past the bottom.
+        // A block box leaves the inline formatting context and sits flush.
+        display: "block",
         margin: 0,
+        padding: 0,
         border: "none",
+        font: "inherit",
+        lineHeight: "inherit",
+        textAlign: "left",
         fill: variables.codeFoldContentColor,
         label: "code-fold-expand-button",
     });
@@ -296,6 +336,14 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         fontWeight: 700,
         cursor: "pointer",
         label: "code-fold",
+        // The fold row has empty/classless placeholder cells (spacer gutters, line-number
+        // stand-ins) that pin no padding of their own. Host `:where(th,td){ padding }`
+        // (daisyui `.table`) inflates their vertical padding and stretches the fold row
+        // out of line with the code rows. Zero block padding on every cell in the row.
+        "& td": {
+            paddingTop: 0,
+            paddingBottom: 0,
+        },
         "&:hover": {
             color: variables.diffViewerColor,
             fill: variables.diffViewerColor,
@@ -429,6 +477,9 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         emptyLine,
         lineNumber,
         contentText,
+        contentFlex,
+        lineIndent,
+        lineBody,
         content,
         column,
         codeFoldContent,

package/lib/esm/src/highlight-theme.js

@@ -0,0 +1,99 @@
+/**
+ * Syntax-highlighting colour themes for the first-party `highlightLanguage`
+ * feature. Colours are applied inline (`style={{ color }}`) on token spans, so
+ * they never collide with host-page CSS and require no stylesheet import —
+ * matching the way the rest of the diff viewer pins its own presentation.
+ *
+ * Keys are Prism token types (the class Prism emits after the leading `token`,
+ * e.g. `keyword`, `attr-name`). The special `default` key colours text that
+ * carries no token type. Unknown token types fall back to `default`.
+ */
+/**
+ * Light palette, harmonised with the GitHub-light diff theme used by
+ * `defaultLightThemeVariables` in `styles.ts`.
+ */
+export const defaultLightHighlightTheme = {
+    default: "#24292e",
+    comment: "#6a737d",
+    prolog: "#6a737d",
+    doctype: "#6a737d",
+    cdata: "#6a737d",
+    punctuation: "#24292e",
+    property: "#005cc5",
+    tag: "#22863a",
+    boolean: "#005cc5",
+    number: "#005cc5",
+    constant: "#005cc5",
+    symbol: "#005cc5",
+    deleted: "#b31d28",
+    selector: "#6f42c1",
+    "attr-name": "#6f42c1",
+    string: "#032f62",
+    char: "#032f62",
+    builtin: "#005cc5",
+    inserted: "#22863a",
+    operator: "#d73a49",
+    entity: "#22863a",
+    url: "#032f62",
+    "attr-value": "#032f62",
+    keyword: "#d73a49",
+    atrule: "#d73a49",
+    "class-name": "#6f42c1",
+    function: "#6f42c1",
+    regex: "#032f62",
+    important: "#e36209",
+    variable: "#e36209",
+};
+/**
+ * Dark palette, tuned to the Dracula-family colours the diff viewer's dark
+ * theme already leans on (and what consumers previously paired with
+ * `useDarkTheme`).
+ */
+export const defaultDarkHighlightTheme = {
+    default: "#f8f8f2",
+    comment: "#6272a4",
+    prolog: "#6272a4",
+    doctype: "#6272a4",
+    cdata: "#6272a4",
+    punctuation: "#f8f8f2",
+    property: "#8be9fd",
+    tag: "#ff79c6",
+    boolean: "#bd93f9",
+    number: "#bd93f9",
+    constant: "#bd93f9",
+    symbol: "#bd93f9",
+    deleted: "#ff5555",
+    selector: "#50fa7b",
+    "attr-name": "#50fa7b",
+    string: "#f1fa8c",
+    char: "#f1fa8c",
+    builtin: "#8be9fd",
+    inserted: "#50fa7b",
+    operator: "#f8f8f2",
+    entity: "#ff79c6",
+    url: "#f1fa8c",
+    "attr-value": "#f1fa8c",
+    keyword: "#ff79c6",
+    atrule: "#ff79c6",
+    "class-name": "#8be9fd",
+    function: "#50fa7b",
+    regex: "#ffb86c",
+    important: "#ffb86c",
+    variable: "#f8f8f2",
+};
+/**
+ * Resolve the colour for a token whose Prism class list is `classNames`
+ * (e.g. `["token", "attr-value"]` or `["token", "punctuation", "attr-equals"]`).
+ * Picks the most specific class present in the theme, walking from the most
+ * specific class back toward the generic ones; falls back to `default`.
+ */
+export const resolveTokenColor = (theme, classNames) => {
+    for (let i = classNames.length - 1; i >= 0; i--) {
+        const name = classNames[i];
+        if (name === "token")
+            continue;
+        if (theme[name])
+            return theme[name];
+    }
+    return theme.default;
+};