react-diff-viewer-continued 4.2.2 → 4.4.0

package/lib/esm/src/highlight.js

@@ -0,0 +1,311 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * First-party syntax highlighting for the diff viewer.
+ *
+ * The problem this solves: highlighting a diff line-by-line loses lexer state
+ * across line boundaries (a tag or string that wraps onto the next line is
+ * mis-tokenised), and highlighting that runs *after* the diff can't be merged
+ * with the word-level change marks on a changed line. So instead we highlight
+ * each whole side once — lexer state carries across every line — then express
+ * both the highlight tokens and the diff chunks as `[start, end)` intervals over
+ * the same line string and intersect them. Every resulting atom carries one
+ * colour (from the grammar) and one diff status (default / added / removed).
+ *
+ * Grammars are loaded lazily per language via `ensureLanguage`, tokenisation is
+ * synchronous (`refractor.highlight`), and colours are applied inline
+ * (`style={{ color }}`) so they never collide with host-page CSS.
+ */
+import cn from "classnames";
+import { refractor } from "refractor/core";
+import { DiffType } from "./compute-lines.js";
+import { resolveTokenColor } from "./highlight-theme.js";
+/**
+ * Lazy grammar loaders. A static map (not `import(`refractor/${name}`)`) so a
+ * bundler can see every possible chunk and code-split them individually — only
+ * the grammar a consumer actually asks for is fetched. Covers refractor's
+ * "common" language set.
+ */
+const LANGUAGE_LOADERS = {
+    arduino: () => import("refractor/arduino"),
+    bash: () => import("refractor/bash"),
+    basic: () => import("refractor/basic"),
+    c: () => import("refractor/c"),
+    clike: () => import("refractor/clike"),
+    cpp: () => import("refractor/cpp"),
+    csharp: () => import("refractor/csharp"),
+    css: () => import("refractor/css"),
+    diff: () => import("refractor/diff"),
+    go: () => import("refractor/go"),
+    ini: () => import("refractor/ini"),
+    java: () => import("refractor/java"),
+    javascript: () => import("refractor/javascript"),
+    json: () => import("refractor/json"),
+    kotlin: () => import("refractor/kotlin"),
+    less: () => import("refractor/less"),
+    lua: () => import("refractor/lua"),
+    makefile: () => import("refractor/makefile"),
+    markdown: () => import("refractor/markdown"),
+    markup: () => import("refractor/markup"),
+    "markup-templating": () => import("refractor/markup-templating"),
+    objectivec: () => import("refractor/objectivec"),
+    perl: () => import("refractor/perl"),
+    php: () => import("refractor/php"),
+    python: () => import("refractor/python"),
+    r: () => import("refractor/r"),
+    regex: () => import("refractor/regex"),
+    ruby: () => import("refractor/ruby"),
+    rust: () => import("refractor/rust"),
+    sass: () => import("refractor/sass"),
+    scss: () => import("refractor/scss"),
+    sql: () => import("refractor/sql"),
+    swift: () => import("refractor/swift"),
+    typescript: () => import("refractor/typescript"),
+    vbnet: () => import("refractor/vbnet"),
+    yaml: () => import("refractor/yaml"),
+};
+/**
+ * Friendly names → canonical loader keys. refractor also registers a grammar's
+ * own aliases on `register` (e.g. `markup` enables `html`/`xml`/`svg`, and
+ * `typescript` enables `ts`), but we still need to know *which* loader to run
+ * when a consumer passes the alias, so map the common ones here.
+ */
+const LANGUAGE_ALIASES = {
+    html: "markup",
+    xml: "markup",
+    svg: "markup",
+    mathml: "markup",
+    ssml: "markup",
+    atom: "markup",
+    rss: "markup",
+    js: "javascript",
+    jsx: "javascript",
+    node: "javascript",
+    ts: "typescript",
+    tsx: "typescript",
+    py: "python",
+    rb: "ruby",
+    yml: "yaml",
+    md: "markdown",
+    sh: "bash",
+    shell: "bash",
+    zsh: "bash",
+    "c++": "cpp",
+    objc: "objectivec",
+    cs: "csharp",
+    dotnet: "csharp",
+    kt: "kotlin",
+    rs: "rust",
+    golang: "go",
+};
+/** Languages we've tried and failed to load — never retried. */
+const negativeCache = new Set();
+/** In-flight loads, deduped so concurrent requests share one import. */
+const inflight = new Map();
+/** Resolve a requested language name to its canonical (registerable) key. */
+const canonicalName = (language) => {
+    const requested = language.toLowerCase();
+    return LANGUAGE_ALIASES[requested] ?? requested;
+};
+/**
+ * Ensures the grammar for `language` is registered, loading it lazily if needed.
+ * Resolves with the canonical language name to hand to `highlightSide`, or
+ * `null` if the language is unknown or failed to load (caller falls back to no
+ * highlighting). Safe to call repeatedly — registered/negative/in-flight are
+ * all cached.
+ */
+export const ensureLanguage = async (language) => {
+    const canonical = canonicalName(language);
+    if (refractor.registered(canonical))
+        return canonical;
+    if (negativeCache.has(canonical))
+        return null;
+    const loader = LANGUAGE_LOADERS[canonical];
+    if (!loader) {
+        negativeCache.add(canonical);
+        return null;
+    }
+    let load = inflight.get(canonical);
+    if (!load) {
+        load = loader()
+            .then((mod) => {
+            refractor.register(mod.default);
+        })
+            .catch(() => {
+            negativeCache.add(canonical);
+        })
+            .finally(() => {
+            inflight.delete(canonical);
+        });
+        inflight.set(canonical, load);
+    }
+    await load;
+    return refractor.registered(canonical) ? canonical : null;
+};
+/**
+ * Walks the hast tree in document order, assigning each text leaf a character
+ * range and the colour of its innermost token class. Offsets are contiguous, so
+ * the leaves losslessly tile the input string.
+ */
+const collectLeaves = (nodes, theme, color, offset, out) => {
+    let pos = offset;
+    for (const node of nodes) {
+        if (node.type === "text") {
+            const value = node.value ?? "";
+            if (value.length > 0) {
+                out.push({ start: pos, end: pos + value.length, color, text: value });
+                pos += value.length;
+            }
+        }
+        else if (node.children) {
+            const className = node.properties?.className;
+            const nextColor = Array.isArray(className)
+                ? resolveTokenColor(theme, className)
+                : color;
+            pos = collectLeaves(node.children, theme, nextColor, pos, out);
+        }
+    }
+    return pos;
+};
+/** Splits contiguous leaves into per-line token arrays, rebased to line-start. */
+const tokensByLine = (leaves, lineCount) => {
+    const lines = Array.from({ length: lineCount }, () => []);
+    let line = 0;
+    let lineStart = 0;
+    for (const leaf of leaves) {
+        let segStart = leaf.start;
+        for (let i = 0; i < leaf.text.length; i++) {
+            if (leaf.text[i] === "\n") {
+                const segEnd = leaf.start + i;
+                if (segEnd > segStart && lines[line]) {
+                    lines[line].push({
+                        start: segStart - lineStart,
+                        end: segEnd - lineStart,
+                        color: leaf.color,
+                    });
+                }
+                line += 1;
+                lineStart = leaf.start + i + 1;
+                segStart = lineStart;
+            }
+        }
+        if (leaf.end > segStart && lines[line]) {
+            lines[line].push({
+                start: segStart - lineStart,
+                end: leaf.end - lineStart,
+                color: leaf.color,
+            });
+        }
+    }
+    return lines;
+};
+/**
+ * Highlights an entire side and returns per-line token arrays (index `i` is the
+ * `i`-th line of `text`). Lexer state carries across lines because the whole
+ * string is tokenised in one pass. `language` must be a canonical name from
+ * `ensureLanguage`; returns `null` if tokenisation fails.
+ */
+export const highlightSide = (text, language, theme) => {
+    if (text.length === 0)
+        return [];
+    let root;
+    try {
+        root = refractor.highlight(text, language);
+    }
+    catch {
+        return null;
+    }
+    const leaves = [];
+    collectLeaves(root.children ?? [], theme, theme.default, 0, leaves);
+    const lineCount = text.split("\n").length;
+    return tokensByLine(leaves, lineCount);
+};
+/**
+ * Re-bases a line's tokens to a sub-range starting at `from` (used to drop the
+ * peeled leading-whitespace indent so body tokens align with the diff body).
+ */
+export const sliceLineTokens = (tokens, from) => {
+    if (from <= 0)
+        return tokens;
+    const out = [];
+    for (const token of tokens) {
+        if (token.end <= from)
+            continue;
+        out.push({
+            start: Math.max(token.start, from) - from,
+            end: token.end - from,
+            color: token.color,
+        });
+    }
+    return out;
+};
+const renderAtom = (text, color, type, { styles, showHighlight }, key) => {
+    const style = color ? { color } : undefined;
+    if (type === DiffType.ADDED) {
+        return (_jsx("ins", { className: cn(styles.wordDiff, { [styles.wordAdded]: showHighlight }), style: style, children: text }, key));
+    }
+    if (type === DiffType.REMOVED) {
+        return (_jsx("del", { className: cn(styles.wordDiff, { [styles.wordRemoved]: showHighlight }), style: style, children: text }, key));
+    }
+    return (_jsx("span", { className: styles.wordDiff, style: style, children: text }, key));
+};
+/**
+ * Intersects a changed line's highlight tokens with its word-diff chunks. Both
+ * are contiguous partitions of the same body string, so a two-pointer walk over
+ * their union of boundaries yields atoms that each carry one colour and one diff
+ * status — preserving syntax colour *and* the `<ins>`/`<del>` word marks.
+ */
+export const mergeHighlightWithDiff = (bodyText, bodyTokens, diffArray, options) => {
+    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 ?? DiffType.DEFAULT,
+            });
+            pos += value.length;
+        }
+    }
+    const total = bodyText.length;
+    const out = [];
+    let ti = 0;
+    let ri = 0;
+    let cur = 0;
+    let key = 0;
+    while (cur < total) {
+        const token = bodyTokens[ti];
+        const range = ranges[ri];
+        const tokenEnd = token ? token.end : total;
+        const rangeEnd = range ? range.end : total;
+        const end = Math.min(tokenEnd, rangeEnd, total);
+        if (end <= cur) {
+            // Zero-width or stale interval — advance past it to guarantee progress.
+            if (tokenEnd <= cur)
+                ti += 1;
+            else if (rangeEnd <= cur)
+                ri += 1;
+            else
+                break;
+            continue;
+        }
+        out.push(renderAtom(bodyText.slice(cur, end), token?.color, range ? range.type : DiffType.DEFAULT, options, key++));
+        cur = end;
+        if (tokenEnd <= cur)
+            ti += 1;
+        if (rangeEnd <= cur)
+            ri += 1;
+    }
+    return out;
+};
+/**
+ * Renders a non-changed (context / fully-added / fully-removed) line as coloured
+ * spans, with no word-diff wrapping.
+ */
+export const renderHighlightedPlain = (bodyText, bodyTokens) => {
+    if (bodyTokens.length === 0) {
+        return [_jsx("span", { children: bodyText }, 0)];
+    }
+    return bodyTokens.map((token, i) => (_jsx("span", { style: { color: token.color }, children: bodyText.slice(token.start, token.end) }, i)));
+};

package/lib/esm/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) => ({ ...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] = { ...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.
@@ -152,6 +202,8 @@ class DiffViewer extends React.Component {
     styles;
     // Cache for on-demand word diff computation
     wordDiffCache = new Map();
+    // Ensures the highlightLanguage/renderContent precedence warning fires once.
+    highlightPrecedenceWarned = false;
     // Refs for measuring content column width and character width
     contentColumnRef = React.createRef();
     charMeasureRef = React.createRef();
@@ -187,6 +239,7 @@ class DiffViewer extends React.Component {
             charWidth: null,
             cumulativeOffsets: null,
             isScrolling: false,
+            highlightResult: null,
         };
     }
     /**
@@ -470,16 +523,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 = lineNumber ?? additionalLineNumber ?? 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) {
@@ -488,6 +581,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,
@@ -512,13 +608,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,
@@ -542,7 +638,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.
@@ -644,6 +740,7 @@ class DiffViewer extends React.Component {
                 ...prev,
                 isLoading: false
             }));
+            this.updateHighlight();
             return;
         }
         // Defer word diff computation when using infinite loading with reasonable container height
@@ -668,6 +765,8 @@ class DiffViewer extends React.Component {
             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) {
@@ -675,6 +774,98 @@ 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.
+     */
+    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.
+     */
+    buildSideTokens = (lineInformation, side, language, theme) => {
+        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, perLine[i] ?? []);
+        }
+        return result;
+    };
+    /**
+     * Resolves the active highlight theme (built-in light/dark, with any
+     * `highlightTheme` overrides merged on top).
+     */
+    resolveHighlightTheme = () => {
+        const base = this.props.useDarkTheme ? defaultDarkHighlightTheme : defaultLightHighlightTheme;
+        return this.props.highlightTheme ? { ...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.
+     */
+    updateHighlight = async () => {
+        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 = this.props.useDarkTheme ?? false;
+        const key = `${diffKey}::${highlightLanguage}::${dark}::${JSON.stringify(this.props.highlightTheme ?? null)}`;
+        if (this.state.highlightResult?.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" &&
+            process.env?.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 } });
+    };
     // Estimated row height based on lineHeight: 1.6em with 12px base font
     static ESTIMATED_ROW_HEIGHT = 19;
     /**
@@ -890,6 +1081,12 @@ class DiffViewer extends React.Component {
             }));
             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) => ({
@@ -1025,3 +1222,5 @@ class DiffViewer extends React.Component {
 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";