react-diff-viewer-continued 3.3.1 → 4.0.0

package/.github/workflows/release.yml

@@ -3,6 +3,7 @@ on:
   push:
     branches:
       - master
+      - next
 jobs:
   release:
     name: Release

package/CHANGELOG.md

@@ -1,9 +1,24 @@
-## [3.3.1](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.3.0...v3.3.1) (2023-10-18)
+# [4.0.0](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.3.0...v4.0.0) (2023-10-19)
 
 
 ### Bug Fixes
 
-* correct imports (fixes [#31](https://github.com/aeolun/react-diff-viewer-continued/issues/31)) ([64a05a9](https://github.com/aeolun/react-diff-viewer-continued/commit/64a05a99e4cbde494597d923b73b9740cb1661cb))
+* do not trim trailing newlines (fixes [#27](https://github.com/aeolun/react-diff-viewer-continued/issues/27)) ([ee4d53f](https://github.com/aeolun/react-diff-viewer-continued/commit/ee4d53f8e2ba3e374b51bffef3a00d3fe6206d02))
+* use semantic elements for diff elements (fixes [#23](https://github.com/aeolun/react-diff-viewer-continued/issues/23)) ([a6222c7](https://github.com/aeolun/react-diff-viewer-continued/commit/a6222c7af151e7dc29046c8eac916271866b4899))
+
+
+* feat!: diff/flexbox based layout, text selectable per side (fixes #15) ([9f6c4d5](https://github.com/aeolun/react-diff-viewer-continued/commit/9f6c4d59e84ecb44761c39e172ffab6a689d5779)), closes [#15](https://github.com/aeolun/react-diff-viewer-continued/issues/15)
+
+
+### Features
+
+* add summary element and fold expansion/folding (fixes [#22](https://github.com/aeolun/react-diff-viewer-continued/issues/22), [#21](https://github.com/aeolun/react-diff-viewer-continued/issues/21)) ([e47cbe1](https://github.com/aeolun/react-diff-viewer-continued/commit/e47cbe1286a2143b0f8078a683e96edea0ed967b))
+
+
+### BREAKING CHANGES
+
+* This completely modifies the way react-diff-viewer-continued is rendered. The overall
+layout should be more or less the same, but with the new layout probably come new bugs.
 
 # [3.3.0](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.6...v3.3.0) (2023-10-17)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "3.3.1",
+  "version": "4.0.0",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -19,8 +19,8 @@
     "Pranesh Ravi<praneshpranesh@gmail.com>",
     "Bart Riepe <bart@serial-experiments.com>"
   ],
-  "main": "lib/src/index",
-  "typings": "lib/src/index",
+  "main": "lib/index",
+  "typings": "lib/index",
   "scripts": {
     "build": "tsc --outDir lib/",
     "build:examples": "webpack --progress",

package/release.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  branches: ['master'],
   plugins: [
     '@semantic-release/commit-analyzer',
     '@semantic-release/release-notes-generator',

package/lib/src/compute-hidden-blocks.d.ts

@@ -1,13 +0,0 @@
-import { LineInformation } from "./compute-lines";
-interface Block {
-    index: number;
-    startLine: number;
-    endLine: number;
-    lines: number;
-}
-interface HiddenBlocks {
-    lineBlocks: Record<number, number>;
-    blocks: Block[];
-}
-export declare function computeHiddenBlocks(lineInformation: LineInformation[], diffLines: number[], extraLines: number): HiddenBlocks;
-export {};

package/lib/src/compute-hidden-blocks.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeHiddenBlocks = void 0;
-function computeHiddenBlocks(lineInformation, diffLines, extraLines) {
-    let newBlockIndex = 0;
-    let currentBlock;
-    let lineBlocks = {};
-    let blocks = [];
-    lineInformation.forEach((line, lineIndex) => {
-        const isDiffLine = diffLines.some(diffLine => diffLine >= lineIndex - extraLines && diffLine <= lineIndex + extraLines);
-        if (!isDiffLine && currentBlock == undefined) {
-            // block begins
-            currentBlock = {
-                index: newBlockIndex,
-                startLine: lineIndex,
-                endLine: lineIndex,
-                lines: 1
-            };
-            blocks.push(currentBlock);
-            lineBlocks[lineIndex] = currentBlock.index;
-            newBlockIndex++;
-        }
-        else if (!isDiffLine) {
-            // block continues
-            currentBlock.endLine = lineIndex;
-            currentBlock.lines++;
-            lineBlocks[lineIndex] = currentBlock.index;
-        }
-        else {
-            // not a block anymore
-            currentBlock = undefined;
-        }
-    });
-    return {
-        lineBlocks,
-        blocks: blocks
-    };
-}
-exports.computeHiddenBlocks = computeHiddenBlocks;

package/lib/src/compute-lines.d.ts

@@ -1,55 +0,0 @@
-export declare enum DiffType {
-    DEFAULT = 0,
-    ADDED = 1,
-    REMOVED = 2,
-    CHANGED = 3
-}
-export declare enum DiffMethod {
-    CHARS = "diffChars",
-    WORDS = "diffWords",
-    WORDS_WITH_SPACE = "diffWordsWithSpace",
-    LINES = "diffLines",
-    TRIMMED_LINES = "diffTrimmedLines",
-    SENTENCES = "diffSentences",
-    CSS = "diffCss",
-    JSON = "diffJson"
-}
-export interface DiffInformation {
-    value?: string | DiffInformation[];
-    lineNumber?: number;
-    type?: DiffType;
-}
-export interface LineInformation {
-    left?: DiffInformation;
-    right?: DiffInformation;
-}
-export interface ComputedLineInformation {
-    lineInformation: LineInformation[];
-    diffLines: number[];
-}
-export interface ComputedDiffInformation {
-    left?: DiffInformation[];
-    right?: DiffInformation[];
-}
-export interface JsDiffChangeObject {
-    added?: boolean;
-    removed?: boolean;
-    value?: string;
-}
-/**
- * [TODO]: Think about moving common left and right value assignment to a
- * common place. Better readability?
- *
- * Computes line wise information based in the js diff information passed. Each
- * line contains information about left and right section. Left side denotes
- * deletion and right side denotes addition.
- *
- * @param oldString Old string to compare.
- * @param newString New string to compare with old string.
- * @param disableWordDiff Flag to enable/disable word diff.
- * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
- * @param linesOffset line number to start counting from
- * @param showLines lines that are always shown, regardless of diff
- */
-declare const computeLineInformation: (oldString: string | Object, newString: string | Object, disableWordDiff?: boolean, lineCompareMethod?: string, linesOffset?: number, showLines?: string[]) => ComputedLineInformation;
-export { computeLineInformation };

package/lib/src/compute-lines.js

@@ -1,228 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.computeLineInformation = exports.DiffMethod = exports.DiffType = void 0;
-const diff = __importStar(require("diff"));
-const jsDiff = diff;
-var DiffType;
-(function (DiffType) {
-    DiffType[DiffType["DEFAULT"] = 0] = "DEFAULT";
-    DiffType[DiffType["ADDED"] = 1] = "ADDED";
-    DiffType[DiffType["REMOVED"] = 2] = "REMOVED";
-    DiffType[DiffType["CHANGED"] = 3] = "CHANGED";
-})(DiffType || (exports.DiffType = DiffType = {}));
-// See https://github.com/kpdecker/jsdiff/tree/v4.0.1#api for more info on the below JsDiff methods
-var DiffMethod;
-(function (DiffMethod) {
-    DiffMethod["CHARS"] = "diffChars";
-    DiffMethod["WORDS"] = "diffWords";
-    DiffMethod["WORDS_WITH_SPACE"] = "diffWordsWithSpace";
-    DiffMethod["LINES"] = "diffLines";
-    DiffMethod["TRIMMED_LINES"] = "diffTrimmedLines";
-    DiffMethod["SENTENCES"] = "diffSentences";
-    DiffMethod["CSS"] = "diffCss";
-    DiffMethod["JSON"] = "diffJson";
-})(DiffMethod || (exports.DiffMethod = DiffMethod = {}));
-/**
- * Splits diff text by new line and computes final list of diff lines based on
- * conditions.
- *
- * @param value Diff text from the js diff module.
- */
-const constructLines = (value) => {
-    if (value === '')
-        return [];
-    const lines = value.replace(/\n$/, '').split('\n');
-    return lines;
-};
-/**
- * Computes word diff information in the line.
- * [TODO]: Consider adding options argument for JsDiff text block comparison
- *
- * @param oldValue Old word in the line.
- * @param newValue New word in the line.
- * @param compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
- */
-const computeDiff = (oldValue, newValue, compareMethod = DiffMethod.CHARS) => {
-    const diffArray = jsDiff[compareMethod](oldValue, newValue);
-    const computedDiff = {
-        left: [],
-        right: [],
-    };
-    diffArray.forEach(({ added, removed, value }) => {
-        const diffInformation = {};
-        if (added) {
-            diffInformation.type = DiffType.ADDED;
-            diffInformation.value = value;
-            computedDiff.right.push(diffInformation);
-        }
-        if (removed) {
-            diffInformation.type = DiffType.REMOVED;
-            diffInformation.value = value;
-            computedDiff.left.push(diffInformation);
-        }
-        if (!removed && !added) {
-            diffInformation.type = DiffType.DEFAULT;
-            diffInformation.value = value;
-            computedDiff.right.push(diffInformation);
-            computedDiff.left.push(diffInformation);
-        }
-        return diffInformation;
-    });
-    return computedDiff;
-};
-/**
- * [TODO]: Think about moving common left and right value assignment to a
- * common place. Better readability?
- *
- * Computes line wise information based in the js diff information passed. Each
- * line contains information about left and right section. Left side denotes
- * deletion and right side denotes addition.
- *
- * @param oldString Old string to compare.
- * @param newString New string to compare with old string.
- * @param disableWordDiff Flag to enable/disable word diff.
- * @param lineCompareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
- * @param linesOffset line number to start counting from
- * @param showLines lines that are always shown, regardless of diff
- */
-const computeLineInformation = (oldString, newString, disableWordDiff = false, lineCompareMethod = DiffMethod.CHARS, linesOffset = 0, showLines = []) => {
-    let diffArray = [];
-    // Use diffLines for strings, and diffJson for objects...
-    if (typeof oldString === 'string' && typeof newString === 'string') {
-        diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
-            newlineIsToken: false,
-            ignoreWhitespace: false,
-            ignoreCase: false,
-        });
-    }
-    else {
-        diffArray = diff.diffJson(oldString, newString);
-    }
-    let rightLineNumber = linesOffset;
-    let leftLineNumber = linesOffset;
-    let lineInformation = [];
-    let counter = 0;
-    const diffLines = [];
-    const ignoreDiffIndexes = [];
-    const getLineInformation = (value, diffIndex, added, removed, evaluateOnlyFirstLine) => {
-        const lines = constructLines(value);
-        return lines
-            .map((line, lineIndex) => {
-            const left = {};
-            const right = {};
-            if (ignoreDiffIndexes.includes(`${diffIndex}-${lineIndex}`) ||
-                (evaluateOnlyFirstLine && lineIndex !== 0)) {
-                return undefined;
-            }
-            if (added || removed) {
-                let countAsChange = true;
-                if (removed) {
-                    leftLineNumber += 1;
-                    left.lineNumber = leftLineNumber;
-                    left.type = DiffType.REMOVED;
-                    left.value = line || ' ';
-                    // When the current line is of type REMOVED, check the next item in
-                    // the diff array whether it is of type ADDED. If true, the current
-                    // diff will be marked as both REMOVED and ADDED. Meaning, the
-                    // current line is a modification.
-                    const nextDiff = diffArray[diffIndex + 1];
-                    if (nextDiff && nextDiff.added) {
-                        const nextDiffLines = constructLines(nextDiff.value)[lineIndex];
-                        if (nextDiffLines) {
-                            const nextDiffLineInfo = getLineInformation(nextDiffLines, diffIndex, true, false, true);
-                            const { value: rightValue, lineNumber, type, } = nextDiffLineInfo[0].right;
-                            // When identified as modification, push the next diff to ignore
-                            // list as the next value will be added in this line computation as
-                            // right and left values.
-                            ignoreDiffIndexes.push(`${diffIndex + 1}-${lineIndex}`);
-                            right.lineNumber = lineNumber;
-                            if (left.value === rightValue) {
-                                // The new value is exactly the same as the old
-                                countAsChange = false;
-                                right.type = 0;
-                                left.type = 0;
-                                right.value = rightValue;
-                            }
-                            else {
-                                right.type = type;
-                                // Do char level diff and assign the corresponding values to the
-                                // left and right diff information object.
-                                if (disableWordDiff) {
-                                    right.value = rightValue;
-                                }
-                                else {
-                                    const computedDiff = computeDiff(line, rightValue, lineCompareMethod);
-                                    right.value = computedDiff.right;
-                                    left.value = computedDiff.left;
-                                }
-                            }
-                        }
-                    }
-                }
-                else {
-                    rightLineNumber += 1;
-                    right.lineNumber = rightLineNumber;
-                    right.type = DiffType.ADDED;
-                    right.value = line;
-                }
-                if (countAsChange && !evaluateOnlyFirstLine) {
-                    if (!diffLines.includes(counter)) {
-                        diffLines.push(counter);
-                    }
-                }
-            }
-            else {
-                leftLineNumber += 1;
-                rightLineNumber += 1;
-                left.lineNumber = leftLineNumber;
-                left.type = DiffType.DEFAULT;
-                left.value = line;
-                right.lineNumber = rightLineNumber;
-                right.type = DiffType.DEFAULT;
-                right.value = line;
-            }
-            if ((showLines === null || showLines === void 0 ? void 0 : showLines.includes(`L-${left.lineNumber}`)) || (showLines === null || showLines === void 0 ? void 0 : showLines.includes(`R-${right.lineNumber}`)) && !diffLines.includes(counter)) {
-                diffLines.push(counter);
-            }
-            if (!evaluateOnlyFirstLine) {
-                counter += 1;
-            }
-            return { right, left };
-        })
-            .filter(Boolean);
-    };
-    diffArray.forEach(({ added, removed, value }, index) => {
-        lineInformation = [
-            ...lineInformation,
-            ...getLineInformation(value, index, added, removed),
-        ];
-    });
-    return {
-        lineInformation,
-        diffLines,
-    };
-};
-exports.computeLineInformation = computeLineInformation;

package/lib/src/index.d.ts

@@ -1,135 +0,0 @@
-import * as React from 'react';
-import { DiffInformation, DiffMethod, DiffType, LineInformation } from './compute-lines';
-import { ReactDiffViewerStyles, ReactDiffViewerStylesOverride } from './styles';
-import { ReactElement } from "react";
-export declare enum LineNumberPrefix {
-    LEFT = "L",
-    RIGHT = "R"
-}
-export interface ReactDiffViewerProps {
-    oldValue: string | Object;
-    newValue: string | Object;
-    splitView?: boolean;
-    linesOffset?: number;
-    disableWordDiff?: boolean;
-    compareMethod?: DiffMethod;
-    extraLinesSurroundingDiff?: number;
-    hideLineNumbers?: boolean;
-    /**
-     * Show the lines indicated here. Specified as L20 or R18 for respectively line 20 on the left or line 18 on the right.
-     */
-    alwaysShowLines?: string[];
-    showDiffOnly?: boolean;
-    renderContent?: (source: string) => ReactElement;
-    codeFoldMessageRenderer?: (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => ReactElement;
-    onLineNumberClick?: (lineId: string, event: React.MouseEvent<HTMLTableCellElement>) => void;
-    renderGutter?: (data: {
-        lineNumber: number;
-        type: DiffType;
-        prefix: LineNumberPrefix;
-        value: string | DiffInformation[];
-        additionalLineNumber: number;
-        additionalPrefix: LineNumberPrefix;
-        styles: ReactDiffViewerStyles;
-    }) => ReactElement;
-    highlightLines?: string[];
-    styles?: ReactDiffViewerStylesOverride;
-    useDarkTheme?: boolean;
-    leftTitle?: string | ReactElement;
-    rightTitle?: string | ReactElement;
-    nonce?: string;
-}
-export interface ReactDiffViewerState {
-    expandedBlocks?: number[];
-}
-declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
-    private styles;
-    static defaultProps: ReactDiffViewerProps;
-    constructor(props: ReactDiffViewerProps);
-    /**
-     * Resets code block expand to the initial stage. Will be exposed to the parent component via
-     * refs.
-     */
-    resetCodeBlocks: () => boolean;
-    /**
-     * Pushes the target expanded code block to the state. During the re-render,
-     * this value is used to expand/fold unmodified code.
-     */
-    private onBlockExpand;
-    /**
-     * Computes final styles for the diff viewer. It combines the default styles with the user
-     * supplied overrides. The computed styles are cached with performance in mind.
-     *
-     * @param styles User supplied style overrides.
-     */
-    private computeStyles;
-    /**
-     * Returns a function with clicked line number in the closure. Returns an no-op function when no
-     * onLineNumberClick handler is supplied.
-     *
-     * @param id Line id of a line.
-     */
-    private onLineNumberClickProxy;
-    /**
-     * Maps over the word diff and constructs the required React elements to show word diff.
-     *
-     * @param diffArray Word diff information derived from line information.
-     * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
-     */
-    private renderWordDiff;
-    /**
-     * Maps over the line diff and constructs the required react elements to show line diff. It calls
-     * renderWordDiff when encountering word diff. This takes care of both inline and split view line
-     * renders.
-     *
-     * @param lineNumber Line number of the current line.
-     * @param type Type of diff of the current line.
-     * @param prefix Unique id to prefix with the line numbers.
-     * @param value Content of the line. It can be a string or a word diff array.
-     * @param additionalLineNumber Additional line number to be shown. Useful for rendering inline
-     *  diff view. Right line number will be passed as additionalLineNumber.
-     * @param additionalPrefix Similar to prefix but for additional line number.
-     */
-    private renderLine;
-    /**
-     * Generates lines for split view.
-     *
-     * @param obj Line diff information.
-     * @param obj.left Life diff information for the left pane of the split view.
-     * @param obj.right Life diff information for the right pane of the split view.
-     * @param index React key for the lines.
-     */
-    private renderSplitView;
-    /**
-     * Generates lines for inline view.
-     *
-     * @param obj Line diff information.
-     * @param obj.left Life diff information for the added section of the inline view.
-     * @param obj.right Life diff information for the removed section of the inline view.
-     * @param index React key for the lines.
-     */
-    renderInlineView: ({ left, right }: LineInformation, index: number) => ReactElement;
-    /**
-     * Returns a function with clicked block number in the closure.
-     *
-     * @param id Cold fold block id.
-     */
-    private onBlockClickProxy;
-    /**
-     * Generates cold fold block. It also uses the custom message renderer when available to show
-     * cold fold messages.
-     *
-     * @param num Number of skipped lines between two blocks.
-     * @param blockNumber Code fold block id.
-     * @param leftBlockLineNumber First left line number after the current code fold block.
-     * @param rightBlockLineNumber First right line number after the current code fold block.
-     */
-    private renderSkippedLineIndicator;
-    /**
-     * Generates the entire diff view.
-     */
-    private renderDiff;
-    render: () => ReactElement;
-}
-export default DiffViewer;
-export { ReactDiffViewerStylesOverride, DiffMethod };

package/lib/src/index.js

@@ -1,298 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DiffMethod = exports.LineNumberPrefix = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
-const compute_lines_1 = require("./compute-lines");
-Object.defineProperty(exports, "DiffMethod", { enumerable: true, get: function () { return compute_lines_1.DiffMethod; } });
-const styles_1 = __importDefault(require("./styles"));
-const compute_hidden_blocks_1 = require("./compute-hidden-blocks");
-const m = require('memoize-one');
-const memoize = m.default || m;
-var LineNumberPrefix;
-(function (LineNumberPrefix) {
-    LineNumberPrefix["LEFT"] = "L";
-    LineNumberPrefix["RIGHT"] = "R";
-})(LineNumberPrefix || (exports.LineNumberPrefix = LineNumberPrefix = {}));
-class DiffViewer extends React.Component {
-    constructor(props) {
-        super(props);
-        /**
-         * Resets code block expand to the initial stage. Will be exposed to the parent component via
-         * refs.
-         */
-        this.resetCodeBlocks = () => {
-            if (this.state.expandedBlocks.length > 0) {
-                this.setState({
-                    expandedBlocks: [],
-                });
-                return true;
-            }
-            return false;
-        };
-        /**
-         * Pushes the target expanded code block to the state. During the re-render,
-         * this value is used to expand/fold unmodified code.
-         */
-        this.onBlockExpand = (id) => {
-            const prevState = this.state.expandedBlocks.slice();
-            prevState.push(id);
-            this.setState({
-                expandedBlocks: prevState,
-            });
-        };
-        /**
-         * Computes final styles for the diff viewer. It combines the default styles with the user
-         * supplied overrides. The computed styles are cached with performance in mind.
-         *
-         * @param styles User supplied style overrides.
-         */
-        this.computeStyles = memoize(styles_1.default);
-        /**
-         * Returns a function with clicked line number in the closure. Returns an no-op function when no
-         * onLineNumberClick handler is supplied.
-         *
-         * @param id Line id of a line.
-         */
-        this.onLineNumberClickProxy = (id) => {
-            if (this.props.onLineNumberClick) {
-                return (e) => this.props.onLineNumberClick(id, e);
-            }
-            return () => { };
-        };
-        /**
-         * Maps over the word diff and constructs the required React elements to show word diff.
-         *
-         * @param diffArray Word diff information derived from line information.
-         * @param renderer Optional renderer to format diff words. Useful for syntax highlighting.
-         */
-        this.renderWordDiff = (diffArray, renderer) => {
-            return diffArray.map((wordDiff, i) => {
-                return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.wordDiff, {
-                        [this.styles.wordAdded]: wordDiff.type === compute_lines_1.DiffType.ADDED,
-                        [this.styles.wordRemoved]: wordDiff.type === compute_lines_1.DiffType.REMOVED,
-                    }), children: renderer ? renderer(wordDiff.value) : wordDiff.value }, i));
-            });
-        };
-        /**
-         * Maps over the line diff and constructs the required react elements to show line diff. It calls
-         * renderWordDiff when encountering word diff. This takes care of both inline and split view line
-         * renders.
-         *
-         * @param lineNumber Line number of the current line.
-         * @param type Type of diff of the current line.
-         * @param prefix Unique id to prefix with the line numbers.
-         * @param value Content of the line. It can be a string or a word diff array.
-         * @param additionalLineNumber Additional line number to be shown. Useful for rendering inline
-         *  diff view. Right line number will be passed as additionalLineNumber.
-         * @param additionalPrefix Similar to prefix but for additional line number.
-         */
-        this.renderLine = (lineNumber, type, prefix, value, additionalLineNumber, additionalPrefix) => {
-            const lineNumberTemplate = `${prefix}-${lineNumber}`;
-            const additionalLineNumberTemplate = `${additionalPrefix}-${additionalLineNumber}`;
-            const highlightLine = this.props.highlightLines.includes(lineNumberTemplate) ||
-                this.props.highlightLines.includes(additionalLineNumberTemplate);
-            const added = type === compute_lines_1.DiffType.ADDED;
-            const removed = type === compute_lines_1.DiffType.REMOVED;
-            const changed = type === compute_lines_1.DiffType.CHANGED;
-            let content;
-            if (Array.isArray(value)) {
-                content = this.renderWordDiff(value, this.props.renderContent);
-            }
-            else if (this.props.renderContent) {
-                content = this.props.renderContent(value);
-            }
-            else {
-                content = value;
-            }
-            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
-                            [this.styles.emptyGutter]: !lineNumber,
-                            [this.styles.diffAdded]: added,
-                            [this.styles.diffRemoved]: removed,
-                            [this.styles.diffChanged]: changed,
-                            [this.styles.highlightedGutter]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.lineNumber, children: lineNumber }) })), !this.props.splitView && !this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: additionalLineNumber &&
-                            this.onLineNumberClickProxy(additionalLineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
-                            [this.styles.emptyGutter]: !additionalLineNumber,
-                            [this.styles.diffAdded]: added,
-                            [this.styles.diffRemoved]: removed,
-                            [this.styles.diffChanged]: changed,
-                            [this.styles.highlightedGutter]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.lineNumber, children: additionalLineNumber }) })), this.props.renderGutter
-                        ? this.props.renderGutter({
-                            lineNumber,
-                            type,
-                            prefix,
-                            value,
-                            additionalLineNumber,
-                            additionalPrefix,
-                            styles: this.styles,
-                        })
-                        : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.marker, {
-                            [this.styles.emptyLine]: !content,
-                            [this.styles.diffAdded]: added,
-                            [this.styles.diffRemoved]: removed,
-                            [this.styles.diffChanged]: changed,
-                            [this.styles.highlightedLine]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added && '+', removed && '-'] }) }), (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.content, {
-                            [this.styles.emptyLine]: !content,
-                            [this.styles.diffAdded]: added,
-                            [this.styles.diffRemoved]: removed,
-                            [this.styles.diffChanged]: changed,
-                            [this.styles.highlightedLine]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: content }) })] }));
-        };
-        /**
-         * Generates lines for split view.
-         *
-         * @param obj Line diff information.
-         * @param obj.left Life diff information for the left pane of the split view.
-         * @param obj.right Life diff information for the right pane of the split view.
-         * @param index React key for the lines.
-         */
-        this.renderSplitView = ({ left, right }, index) => {
-            return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.line, children: [this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value), this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)] }, index));
-        };
-        /**
-         * Generates lines for inline view.
-         *
-         * @param obj Line diff information.
-         * @param obj.left Life diff information for the added section of the inline view.
-         * @param obj.right Life diff information for the removed section of the inline view.
-         * @param index React key for the lines.
-         */
-        this.renderInlineView = ({ left, right }, index) => {
-            let content;
-            if (left.type === compute_lines_1.DiffType.REMOVED && right.type === compute_lines_1.DiffType.ADDED) {
-                return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null) }), (0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber) })] }, index));
-            }
-            if (left.type === compute_lines_1.DiffType.REMOVED) {
-                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
-            }
-            if (left.type === compute_lines_1.DiffType.DEFAULT) {
-                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT);
-            }
-            if (right.type === compute_lines_1.DiffType.ADDED) {
-                content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber);
-            }
-            return ((0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: content }, index));
-        };
-        /**
-         * Returns a function with clicked block number in the closure.
-         *
-         * @param id Cold fold block id.
-         */
-        this.onBlockClickProxy = (id) => () => this.onBlockExpand(id);
-        /**
-         * Generates cold fold block. It also uses the custom message renderer when available to show
-         * cold fold messages.
-         *
-         * @param num Number of skipped lines between two blocks.
-         * @param blockNumber Code fold block id.
-         * @param leftBlockLineNumber First left line number after the current code fold block.
-         * @param rightBlockLineNumber First right line number after the current code fold block.
-         */
-        this.renderSkippedLineIndicator = (num, blockNumber, leftBlockLineNumber, rightBlockLineNumber) => {
-            const { hideLineNumbers, splitView } = this.props;
-            const message = this.props.codeFoldMessageRenderer ? (this.props.codeFoldMessageRenderer(num, leftBlockLineNumber, rightBlockLineNumber)) : ((0, jsx_runtime_1.jsxs)("pre", { className: this.styles.codeFoldContent, children: ["Expand ", num, " lines ..."] }));
-            const content = ((0, jsx_runtime_1.jsx)("td", { children: (0, jsx_runtime_1.jsx)("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
-            const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
-            return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.codeFold, children: [!hideLineNumbers && (0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter })) : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)({
-                            [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
-                        }) }), isUnifiedViewWithoutLineNumbers ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("td", {}), content] })) : ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [content, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", {}) : null, (0, jsx_runtime_1.jsx)("td", {})] })), (0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsx)("td", {})] }, `${leftBlockLineNumber}-${rightBlockLineNumber}`));
-        };
-        /**
-         * Generates the entire diff view.
-         */
-        this.renderDiff = () => {
-            const { oldValue, newValue, splitView, disableWordDiff, compareMethod, linesOffset, } = this.props;
-            const { lineInformation, diffLines } = (0, compute_lines_1.computeLineInformation)(oldValue, newValue, disableWordDiff, compareMethod, linesOffset, this.props.alwaysShowLines);
-            const extraLines = this.props.extraLinesSurroundingDiff < 0
-                ? 0
-                : Math.round(this.props.extraLinesSurroundingDiff);
-            const { lineBlocks, blocks } = (0, compute_hidden_blocks_1.computeHiddenBlocks)(lineInformation, diffLines, extraLines);
-            return lineInformation.map((line, lineIndex) => {
-                if (this.props.showDiffOnly) {
-                    const blockIndex = lineBlocks[lineIndex];
-                    if (blockIndex !== undefined) {
-                        const lastLineOfBlock = blocks[blockIndex].endLine === lineIndex;
-                        if (!this.state.expandedBlocks.includes(blockIndex) && lastLineOfBlock) {
-                            return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
-                        }
-                        else if (!this.state.expandedBlocks.includes(blockIndex)) {
-                            return null;
-                        }
-                    }
-                }
-                const diffNodes = splitView
-                    ? this.renderSplitView(line, lineIndex)
-                    : this.renderInlineView(line, lineIndex);
-                return diffNodes;
-            });
-        };
-        this.render = () => {
-            const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, nonce, } = this.props;
-            if (this.props.compareMethod !== compute_lines_1.DiffMethod.JSON) {
-                if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
-                    throw Error('"oldValue" and "newValue" should be strings');
-                }
-            }
-            this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
-            const nodes = this.renderDiff();
-            const colSpanOnSplitView = hideLineNumbers ? 2 : 3;
-            const colSpanOnInlineView = hideLineNumbers ? 2 : 4;
-            let columnExtension = this.props.renderGutter ? 1 : 0;
-            const title = (leftTitle || rightTitle) && ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView) +
-                            columnExtension, className: this.styles.titleBlock, children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: leftTitle }) }), splitView && ((0, jsx_runtime_1.jsx)("td", { colSpan: colSpanOnSplitView + columnExtension, className: this.styles.titleBlock, children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: rightTitle }) }))] }));
-            return ((0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
-                    [this.styles.splitView]: splitView,
-                }), children: (0, jsx_runtime_1.jsxs)("tbody", { children: [title, nodes] }) }));
-        };
-        this.state = {
-            expandedBlocks: [],
-        };
-    }
-}
-DiffViewer.defaultProps = {
-    oldValue: '',
-    newValue: '',
-    splitView: true,
-    highlightLines: [],
-    disableWordDiff: false,
-    compareMethod: compute_lines_1.DiffMethod.CHARS,
-    styles: {},
-    hideLineNumbers: false,
-    extraLinesSurroundingDiff: 3,
-    showDiffOnly: true,
-    useDarkTheme: false,
-    linesOffset: 0,
-    nonce: '',
-};
-exports.default = DiffViewer;

package/lib/src/styles.d.ts

@@ -1,81 +0,0 @@
-import { CSSInterpolation } from '@emotion/css';
-export interface ReactDiffViewerStyles {
-    diffContainer?: string;
-    diffRemoved?: string;
-    diffAdded?: string;
-    diffChanged?: string;
-    line?: string;
-    highlightedGutter?: string;
-    contentText?: string;
-    gutter?: string;
-    highlightedLine?: string;
-    lineNumber?: string;
-    marker?: string;
-    wordDiff?: string;
-    wordAdded?: string;
-    wordRemoved?: string;
-    codeFoldGutter?: string;
-    emptyGutter?: string;
-    emptyLine?: string;
-    codeFold?: string;
-    titleBlock?: string;
-    content?: string;
-    splitView?: string;
-    [key: string]: string | undefined;
-}
-export interface ReactDiffViewerStylesVariables {
-    diffViewerBackground?: string;
-    diffViewerTitleBackground?: string;
-    diffViewerColor?: string;
-    diffViewerTitleColor?: string;
-    diffViewerTitleBorderColor?: string;
-    addedBackground?: string;
-    addedColor?: string;
-    removedBackground?: string;
-    removedColor?: string;
-    changedBackground?: string;
-    wordAddedBackground?: string;
-    wordRemovedBackground?: string;
-    addedGutterBackground?: string;
-    removedGutterBackground?: string;
-    gutterBackground?: string;
-    gutterBackgroundDark?: string;
-    highlightBackground?: string;
-    highlightGutterBackground?: string;
-    codeFoldGutterBackground?: string;
-    codeFoldBackground?: string;
-    emptyLineBackground?: string;
-    gutterColor?: string;
-    addedGutterColor?: string;
-    removedGutterColor?: string;
-    codeFoldContentColor?: string;
-}
-export interface ReactDiffViewerStylesOverride {
-    variables?: {
-        dark?: ReactDiffViewerStylesVariables;
-        light?: ReactDiffViewerStylesVariables;
-    };
-    diffContainer?: CSSInterpolation;
-    diffRemoved?: CSSInterpolation;
-    diffAdded?: CSSInterpolation;
-    diffChanged?: CSSInterpolation;
-    marker?: CSSInterpolation;
-    emptyGutter?: CSSInterpolation;
-    highlightedLine?: CSSInterpolation;
-    lineNumber?: CSSInterpolation;
-    highlightedGutter?: CSSInterpolation;
-    contentText?: CSSInterpolation;
-    gutter?: CSSInterpolation;
-    line?: CSSInterpolation;
-    wordDiff?: CSSInterpolation;
-    wordAdded?: CSSInterpolation;
-    wordRemoved?: CSSInterpolation;
-    codeFoldGutter?: CSSInterpolation;
-    codeFold?: CSSInterpolation;
-    emptyLine?: CSSInterpolation;
-    content?: CSSInterpolation;
-    titleBlock?: CSSInterpolation;
-    splitView?: CSSInterpolation;
-}
-declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean, nonce?: string) => ReactDiffViewerStyles;
-export default _default;

package/lib/src/styles.js

@@ -1,291 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const create_instance_1 = __importDefault(require("@emotion/css/create-instance"));
-// eslint-disable-next-line import/no-anonymous-default-export
-exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
-    const { variables: overrideVariables = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
-    const themeVariables = {
-        light: Object.assign({
-            diffViewerBackground: '#fff',
-            diffViewerColor: '#212529',
-            addedBackground: '#e6ffed',
-            addedColor: '#24292e',
-            removedBackground: '#ffeef0',
-            removedColor: '#24292e',
-            changedBackground: '#fffbdd',
-            wordAddedBackground: '#acf2bd',
-            wordRemovedBackground: '#fdb8c0',
-            addedGutterBackground: '#cdffd8',
-            removedGutterBackground: '#ffdce0',
-            gutterBackground: '#f7f7f7',
-            gutterBackgroundDark: '#f3f1f1',
-            highlightBackground: '#fffbdd',
-            highlightGutterBackground: '#fff5b1',
-            codeFoldGutterBackground: '#dbedff',
-            codeFoldBackground: '#f1f8ff',
-            emptyLineBackground: '#fafbfc',
-            gutterColor: '#212529',
-            addedGutterColor: '#212529',
-            removedGutterColor: '#212529',
-            codeFoldContentColor: '#212529',
-            diffViewerTitleBackground: '#fafbfc',
-            diffViewerTitleColor: '#212529',
-            diffViewerTitleBorderColor: '#eee',
-        }, (overrideVariables.light || {})),
-        dark: Object.assign({
-            diffViewerBackground: '#2e303c',
-            diffViewerColor: '#FFF',
-            addedBackground: '#044B53',
-            addedColor: 'white',
-            removedBackground: '#632F34',
-            removedColor: 'white',
-            changedBackground: '#3e302c',
-            wordAddedBackground: '#055d67',
-            wordRemovedBackground: '#7d383f',
-            addedGutterBackground: '#034148',
-            removedGutterBackground: '#632b30',
-            gutterBackground: '#2c2f3a',
-            gutterBackgroundDark: '#262933',
-            highlightBackground: '#2a3967',
-            highlightGutterBackground: '#2d4077',
-            codeFoldGutterBackground: '#21232b',
-            codeFoldBackground: '#262831',
-            emptyLineBackground: '#363946',
-            gutterColor: '#666c87',
-            addedGutterColor: '#8c8c8c',
-            removedGutterColor: '#8c8c8c',
-            codeFoldContentColor: '#656a8b',
-            diffViewerTitleBackground: '#2f323e',
-            diffViewerTitleColor: '#555a7b',
-            diffViewerTitleBorderColor: '#353846',
-        }, (overrideVariables.dark || {})),
-    };
-    const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
-    const { css, cx } = (0, create_instance_1.default)({ key: 'react-diff', nonce });
-    const content = css({
-        width: '100%',
-        label: 'content',
-    });
-    const splitView = css({
-        [`.${content}`]: {
-            width: '50%',
-        },
-        label: 'split-view',
-    });
-    const diffContainer = css({
-        width: '100%',
-        background: variables.diffViewerBackground,
-        pre: {
-            margin: 0,
-            whiteSpace: 'pre-wrap',
-            lineHeight: '25px',
-        },
-        label: 'diff-container',
-        borderCollapse: 'collapse',
-    });
-    const codeFoldContent = css({
-        color: variables.codeFoldContentColor,
-        label: 'code-fold-content',
-    });
-    const contentText = css({
-        color: variables.diffViewerColor,
-        label: 'content-text',
-    });
-    const titleBlock = css({
-        background: variables.diffViewerTitleBackground,
-        padding: 10,
-        borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
-        label: 'title-block',
-        ':last-child': {
-            borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
-        },
-        [`.${contentText}`]: {
-            color: variables.diffViewerTitleColor,
-        },
-    });
-    const lineNumber = css({
-        color: variables.gutterColor,
-        label: 'line-number',
-    });
-    const diffRemoved = css({
-        background: variables.removedBackground,
-        color: variables.removedColor,
-        pre: {
-            color: variables.removedColor,
-        },
-        [`.${lineNumber}`]: {
-            color: variables.removedGutterColor,
-        },
-        label: 'diff-removed',
-    });
-    const diffAdded = css({
-        background: variables.addedBackground,
-        color: variables.addedColor,
-        pre: {
-            color: variables.addedColor,
-        },
-        [`.${lineNumber}`]: {
-            color: variables.addedGutterColor,
-        },
-        label: 'diff-added',
-    });
-    const diffChanged = css({
-        background: variables.changedBackground,
-        [`.${lineNumber}`]: {
-            color: variables.gutterColor,
-        },
-        label: 'diff-changed',
-    });
-    const wordDiff = css({
-        padding: 2,
-        display: 'inline-flex',
-        borderRadius: 4,
-        wordBreak: 'break-all',
-        label: 'word-diff',
-    });
-    const wordAdded = css({
-        background: variables.wordAddedBackground,
-        label: 'word-added',
-    });
-    const wordRemoved = css({
-        background: variables.wordRemovedBackground,
-        label: 'word-removed',
-    });
-    const codeFoldGutter = css({
-        backgroundColor: variables.codeFoldGutterBackground,
-        label: 'code-fold-gutter',
-    });
-    const codeFold = css({
-        backgroundColor: variables.codeFoldBackground,
-        height: 40,
-        fontSize: 14,
-        fontWeight: 700,
-        label: 'code-fold',
-        a: {
-            textDecoration: 'underline !important',
-            cursor: 'pointer',
-            pre: {
-                display: 'inline',
-            },
-        },
-    });
-    const emptyLine = css({
-        backgroundColor: variables.emptyLineBackground,
-        label: 'empty-line',
-    });
-    const marker = css({
-        width: 25,
-        paddingLeft: 10,
-        paddingRight: 10,
-        userSelect: 'none',
-        label: 'marker',
-        [`&.${diffAdded}`]: {
-            pre: {
-                color: variables.addedColor,
-            },
-        },
-        [`&.${diffRemoved}`]: {
-            pre: {
-                color: variables.removedColor,
-            },
-        },
-    });
-    const highlightedLine = css({
-        background: variables.highlightBackground,
-        label: 'highlighted-line',
-        [`.${wordAdded}, .${wordRemoved}`]: {
-            backgroundColor: 'initial',
-        },
-    });
-    const highlightedGutter = css({
-        label: 'highlighted-gutter',
-    });
-    const gutter = css({
-        userSelect: 'none',
-        minWidth: 50,
-        padding: '0 10px',
-        whiteSpace: 'nowrap',
-        label: 'gutter',
-        textAlign: 'right',
-        background: variables.gutterBackground,
-        '&:hover': {
-            cursor: 'pointer',
-            background: variables.gutterBackgroundDark,
-            pre: {
-                opacity: 1,
-            },
-        },
-        pre: {
-            opacity: 0.5,
-        },
-        [`&.${diffAdded}`]: {
-            background: variables.addedGutterBackground,
-        },
-        [`&.${diffRemoved}`]: {
-            background: variables.removedGutterBackground,
-        },
-        [`&.${highlightedGutter}`]: {
-            background: variables.highlightGutterBackground,
-            '&:hover': {
-                background: variables.highlightGutterBackground,
-            },
-        },
-    });
-    const emptyGutter = css({
-        '&:hover': {
-            background: variables.gutterBackground,
-            cursor: 'initial',
-        },
-        label: 'empty-gutter',
-    });
-    const line = css({
-        verticalAlign: 'baseline',
-        label: 'line',
-    });
-    const defaultStyles = {
-        diffContainer,
-        diffRemoved,
-        diffAdded,
-        diffChanged,
-        splitView,
-        marker,
-        highlightedGutter,
-        highlightedLine,
-        gutter,
-        line,
-        wordDiff,
-        wordAdded,
-        wordRemoved,
-        codeFoldGutter,
-        codeFold,
-        emptyGutter,
-        emptyLine,
-        lineNumber,
-        contentText,
-        content,
-        codeFoldContent,
-        titleBlock,
-    };
-    const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
-        [key]: css(styles[key]),
-    })), {});
-    return Object.keys(defaultStyles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
-        [key]: computerOverrideStyles[key]
-            ? cx(defaultStyles[key], computerOverrideStyles[key])
-            : defaultStyles[key],
-    })), {});
-};