react-diff-viewer-continued 3.2.0

package/lib/compute-lines.js

@@ -0,0 +1,178 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.computeLineInformation = exports.DiffMethod = exports.DiffType = void 0;
+const diff = 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 = exports.DiffType || (exports.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 = exports.DiffMethod || (exports.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 compareMethod JsDiff text diff method from https://github.com/kpdecker/jsdiff/tree/v4.0.1#api
+ * @param linesOffset line number to start counting from
+ */
+const computeLineInformation = (oldString, newString, disableWordDiff = false, compareMethod = DiffMethod.CHARS, linesOffset = 0) => {
+    const diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
+        newlineIsToken: false,
+        ignoreWhitespace: false,
+        ignoreCase: false,
+    });
+    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) {
+                if (!diffLines.includes(counter)) {
+                    diffLines.push(counter);
+                }
+                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;
+                            right.type = type;
+                            // Do word 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, compareMethod);
+                                right.value = computedDiff.right;
+                                left.value = computedDiff.left;
+                            }
+                        }
+                    }
+                }
+                else {
+                    rightLineNumber += 1;
+                    right.lineNumber = rightLineNumber;
+                    right.type = DiffType.ADDED;
+                    right.value = line;
+                }
+            }
+            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;
+            }
+            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/index.d.ts

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { LineInformation, DiffInformation, DiffType, DiffMethod } from './compute-lines';
+import { ReactDiffViewerStyles, ReactDiffViewerStylesOverride } from './styles';
+export declare enum LineNumberPrefix {
+    LEFT = "L",
+    RIGHT = "R"
+}
+export interface ReactDiffViewerProps {
+    oldValue: string;
+    newValue: string;
+    splitView?: boolean;
+    linesOffset?: number;
+    disableWordDiff?: boolean;
+    compareMethod?: DiffMethod;
+    extraLinesSurroundingDiff?: number;
+    hideLineNumbers?: boolean;
+    showDiffOnly?: boolean;
+    renderContent?: (source: string) => JSX.Element;
+    codeFoldMessageRenderer?: (totalFoldedLines: number, leftStartLineNumber: number, rightStartLineNumber: number) => JSX.Element;
+    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;
+    }) => JSX.Element;
+    highlightLines?: string[];
+    styles?: ReactDiffViewerStylesOverride;
+    useDarkTheme?: boolean;
+    leftTitle?: string | JSX.Element;
+    rightTitle?: string | JSX.Element;
+}
+export interface ReactDiffViewerState {
+    expandedBlocks?: number[];
+}
+declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
+    private styles;
+    static defaultProps: ReactDiffViewerProps;
+    static propTypes: {
+        oldValue: PropTypes.Validator<string>;
+        newValue: PropTypes.Validator<string>;
+        splitView: PropTypes.Requireable<boolean>;
+        disableWordDiff: PropTypes.Requireable<boolean>;
+        compareMethod: PropTypes.Requireable<DiffMethod>;
+        renderContent: PropTypes.Requireable<(...args: any[]) => any>;
+        renderGutter: PropTypes.Requireable<(...args: any[]) => any>;
+        onLineNumberClick: PropTypes.Requireable<(...args: any[]) => any>;
+        extraLinesSurroundingDiff: PropTypes.Requireable<number>;
+        styles: PropTypes.Requireable<object>;
+        hideLineNumbers: PropTypes.Requireable<boolean>;
+        showDiffOnly: PropTypes.Requireable<boolean>;
+        highlightLines: PropTypes.Requireable<string[]>;
+        leftTitle: PropTypes.Requireable<string | PropTypes.ReactElementLike>;
+        rightTitle: PropTypes.Requireable<string | PropTypes.ReactElementLike>;
+        linesOffset: PropTypes.Requireable<number>;
+    };
+    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) => JSX.Element;
+    /**
+     * 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: () => JSX.Element;
+}
+export default DiffViewer;
+export { ReactDiffViewerStylesOverride, DiffMethod };

package/lib/index.js

@@ -0,0 +1,331 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiffMethod = exports.LineNumberPrefix = void 0;
+const React = require("react");
+const PropTypes = require("prop-types");
+const classnames_1 = 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 = require("./styles");
+const m = require('memoize-one');
+const memoize = m.default || m;
+var LineNumberPrefix;
+(function (LineNumberPrefix) {
+    LineNumberPrefix["LEFT"] = "L";
+    LineNumberPrefix["RIGHT"] = "R";
+})(LineNumberPrefix = exports.LineNumberPrefix || (exports.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 (React.createElement("span", { key: i, 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,
+                    }) }, renderer ? renderer(wordDiff.value) : wordDiff.value));
+            });
+        };
+        /**
+         * 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;
+            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 (React.createElement(React.Fragment, null,
+                !this.props.hideLineNumbers && (React.createElement("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.highlightedGutter]: highlightLine,
+                    }) },
+                    React.createElement("pre", { className: this.styles.lineNumber }, lineNumber))),
+                !this.props.splitView && !this.props.hideLineNumbers && (React.createElement("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.highlightedGutter]: highlightLine,
+                    }) },
+                    React.createElement("pre", { className: this.styles.lineNumber }, additionalLineNumber))),
+                this.props.renderGutter
+                    ? this.props.renderGutter({
+                        lineNumber,
+                        type,
+                        prefix,
+                        value,
+                        additionalLineNumber,
+                        additionalPrefix,
+                        styles: this.styles,
+                    })
+                    : null,
+                React.createElement("td", { className: (0, classnames_1.default)(this.styles.marker, {
+                        [this.styles.emptyLine]: !content,
+                        [this.styles.diffAdded]: added,
+                        [this.styles.diffRemoved]: removed,
+                        [this.styles.highlightedLine]: highlightLine,
+                    }) },
+                    React.createElement("pre", null,
+                        added && '+',
+                        removed && '-')),
+                React.createElement("td", { className: (0, classnames_1.default)(this.styles.content, {
+                        [this.styles.emptyLine]: !content,
+                        [this.styles.diffAdded]: added,
+                        [this.styles.diffRemoved]: removed,
+                        [this.styles.highlightedLine]: highlightLine,
+                    }) },
+                    React.createElement("pre", { className: this.styles.contentText }, 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 (React.createElement("tr", { key: index, className: this.styles.line },
+                this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value),
+                this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)));
+        };
+        /**
+         * 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 (React.createElement(React.Fragment, { key: index },
+                    React.createElement("tr", { className: this.styles.line }, this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null)),
+                    React.createElement("tr", { className: this.styles.line }, this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber))));
+            }
+            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 (React.createElement("tr", { key: index, className: this.styles.line }, content));
+        };
+        /**
+         * 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)) : (React.createElement("pre", { className: this.styles.codeFoldContent },
+                "Expand ",
+                num,
+                " lines ..."));
+            const content = (React.createElement("td", null,
+                React.createElement("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0 }, message)));
+            const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
+            return (React.createElement("tr", { key: `${leftBlockLineNumber}-${rightBlockLineNumber}`, className: this.styles.codeFold },
+                !hideLineNumbers && React.createElement("td", { className: this.styles.codeFoldGutter }),
+                this.props.renderGutter ? (React.createElement("td", { className: this.styles.codeFoldGutter })) : null,
+                React.createElement("td", { className: (0, classnames_1.default)({
+                        [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
+                    }) }),
+                isUnifiedViewWithoutLineNumbers ? (React.createElement(React.Fragment, null,
+                    React.createElement("td", null),
+                    content)) : (React.createElement(React.Fragment, null,
+                    content,
+                    this.props.renderGutter ? React.createElement("td", null) : null,
+                    React.createElement("td", null))),
+                React.createElement("td", null),
+                React.createElement("td", null)));
+        };
+        /**
+         * 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);
+            const extraLines = this.props.extraLinesSurroundingDiff < 0
+                ? 0
+                : this.props.extraLinesSurroundingDiff;
+            let skippedLines = [];
+            return lineInformation.map((line, i) => {
+                const diffBlockStart = diffLines[0];
+                const currentPosition = diffBlockStart - i;
+                if (this.props.showDiffOnly) {
+                    if (currentPosition === -extraLines) {
+                        skippedLines = [];
+                        diffLines.shift();
+                    }
+                    if (line.left.type === compute_lines_1.DiffType.DEFAULT &&
+                        (currentPosition > extraLines ||
+                            typeof diffBlockStart === 'undefined') &&
+                        !this.state.expandedBlocks.includes(diffBlockStart)) {
+                        skippedLines.push(i + 1);
+                        if (i === lineInformation.length - 1 && skippedLines.length > 1) {
+                            return this.renderSkippedLineIndicator(skippedLines.length, diffBlockStart, line.left.lineNumber, line.right.lineNumber);
+                        }
+                        return null;
+                    }
+                }
+                const diffNodes = splitView
+                    ? this.renderSplitView(line, i)
+                    : this.renderInlineView(line, i);
+                if (currentPosition === extraLines && skippedLines.length > 0) {
+                    const { length } = skippedLines;
+                    skippedLines = [];
+                    return (React.createElement(React.Fragment, { key: i },
+                        this.renderSkippedLineIndicator(length, diffBlockStart, line.left.lineNumber, line.right.lineNumber),
+                        diffNodes));
+                }
+                return diffNodes;
+            });
+        };
+        this.render = () => {
+            const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, } = this.props;
+            if (typeof oldValue !== 'string' || typeof newValue !== 'string') {
+                throw Error('"oldValue" and "newValue" should be strings');
+            }
+            this.styles = this.computeStyles(this.props.styles, useDarkTheme);
+            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) && (React.createElement("tr", null,
+                React.createElement("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView) +
+                        columnExtension, className: this.styles.titleBlock },
+                    React.createElement("pre", { className: this.styles.contentText }, leftTitle)),
+                splitView && (React.createElement("td", { colSpan: colSpanOnSplitView + columnExtension, className: this.styles.titleBlock },
+                    React.createElement("pre", { className: this.styles.contentText }, rightTitle)))));
+            return (React.createElement("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
+                    [this.styles.splitView]: splitView,
+                }) },
+                React.createElement("tbody", null,
+                    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,
+};
+DiffViewer.propTypes = {
+    oldValue: PropTypes.string.isRequired,
+    newValue: PropTypes.string.isRequired,
+    splitView: PropTypes.bool,
+    disableWordDiff: PropTypes.bool,
+    compareMethod: PropTypes.oneOf(Object.values(compute_lines_1.DiffMethod)),
+    renderContent: PropTypes.func,
+    renderGutter: PropTypes.func,
+    onLineNumberClick: PropTypes.func,
+    extraLinesSurroundingDiff: PropTypes.number,
+    styles: PropTypes.object,
+    hideLineNumbers: PropTypes.bool,
+    showDiffOnly: PropTypes.bool,
+    highlightLines: PropTypes.arrayOf(PropTypes.string),
+    leftTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    rightTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    linesOffset: PropTypes.number,
+};
+exports.default = DiffViewer;