react-diff-viewer-continued 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 4.4.0 (2026-07-14)
+
+### Features
+
+- first-party syntax highlighting via highlightLanguage
+
+### Bug Fixes
+
+- build declarations against the React 18 peer floor
+
+### Tests
+
+- add regression repros for reported issues
+
 ## 4.3.0 (2026-07-10)
 
 ### Features

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

@@ -1 +1 @@
-export declare function Expand(): import("react/jsx-runtime").JSX.Element;
+export declare function Expand(): import("react").JSX.Element;

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

@@ -1 +1 @@
-export declare function Fold(): import("react/jsx-runtime").JSX.Element;
+export declare function Fold(): import("react").JSX.Element;

package/lib/cjs/src/highlight-theme.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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`.
+ */
+export type HighlightTheme = Record<string, string>;
+/**
+ * Light palette, harmonised with the GitHub-light diff theme used by
+ * `defaultLightThemeVariables` in `styles.ts`.
+ */
+export declare const defaultLightHighlightTheme: HighlightTheme;
+/**
+ * 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 declare const defaultDarkHighlightTheme: HighlightTheme;
+/**
+ * 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 declare const resolveTokenColor: (theme: HighlightTheme, classNames: readonly string[]) => string;

package/lib/cjs/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;
+};

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

@@ -0,0 +1,69 @@
+/**
+ * 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 type { ReactElement } from "react";
+import { type DiffInformation } from "./compute-lines.js";
+import { type HighlightTheme } from "./highlight-theme.js";
+/** A coloured run over a single line, in that line's character coordinate space. */
+export interface HighlightToken {
+    start: number;
+    end: number;
+    color: string;
+}
+/** Contiguous coloured runs for one line (covers the whole line, no gaps). */
+export type LineTokens = HighlightToken[];
+/**
+ * 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 declare const ensureLanguage: (language: string) => Promise<string | null>;
+/**
+ * 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 declare const highlightSide: (text: string, language: string, theme: HighlightTheme) => LineTokens[] | null;
+/**
+ * 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 declare const sliceLineTokens: (tokens: LineTokens, from: number) => LineTokens;
+interface MergeStyles {
+    wordDiff: string;
+    wordAdded: string;
+    wordRemoved: string;
+}
+interface MergeOptions {
+    styles: MergeStyles;
+    showHighlight: boolean;
+}
+/**
+ * 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 declare const mergeHighlightWithDiff: (bodyText: string, bodyTokens: LineTokens, diffArray: readonly DiffInformation[], options: MergeOptions) => ReactElement[];
+/**
+ * Renders a non-changed (context / fully-added / fully-removed) line as coloured
+ * spans, with no word-diff wrapping.
+ */
+export declare const renderHighlightedPlain: (bodyText: string, bodyTokens: LineTokens) => ReactElement[];
+export {};

package/lib/cjs/src/highlight.js

@@ -0,0 +1,315 @@
+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) => {
+    var _a;
+    const requested = language.toLowerCase();
+    return (_a = LANGUAGE_ALIASES[requested]) !== null && _a !== void 0 ? _a : 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) => {
+    var _a, _b;
+    let pos = offset;
+    for (const node of nodes) {
+        if (node.type === "text") {
+            const value = (_a = node.value) !== null && _a !== void 0 ? _a : "";
+            if (value.length > 0) {
+                out.push({ start: pos, end: pos + value.length, color, text: value });
+                pos += value.length;
+            }
+        }
+        else if (node.children) {
+            const className = (_b = node.properties) === null || _b === void 0 ? void 0 : _b.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) => {
+    var _a;
+    if (text.length === 0)
+        return [];
+    let root;
+    try {
+        root = refractor.highlight(text, language);
+    }
+    catch (_b) {
+        return null;
+    }
+    const leaves = [];
+    collectLeaves((_a = root.children) !== null && _a !== void 0 ? _a : [], 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) => {
+    var _a;
+    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: (_a = diff.type) !== null && _a !== void 0 ? _a : 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 === null || token === void 0 ? void 0 : 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/cjs/src/index.d.ts

@@ -4,6 +4,8 @@ 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, 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.
@@ -259,4 +307,6 @@ 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";
 export type { ReactDiffViewerStylesOverride, ReactDiffViewerStyles, ReactDiffViewerStylesVariables };
+export type { HighlightTheme } from "./highlight-theme.js";