react-diff-viewer-continued 4.0.1 → 4.0.3

package/.github/workflows/release.yml

@@ -1,12 +1,31 @@
-name: Release
+name: Test & Release
 on:
   push:
-    branches:
-      - master
-      - next
+
 jobs:
+  test:
+    name: Unit tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 'lts/*'
+      - uses: pnpm/action-setup@v2.2.4
+        with:
+          version: latest
+      - name: Install dependencies
+        run: pnpm i
+      - name: Run unit tests
+        run: pnpm run test
   release:
     name: Release
+    needs: test
+    if: github.ref == 'refs/heads/master' || github.ref == 'refs/heads/next'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

package/.idea/react-diff-viewer-continued.iml

@@ -5,4 +5,7 @@
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
+  <component name="SonarLintModuleSettings">
+    <option name="uniqueId" value="5762f64b-7b0e-41a1-a2ec-f15fa70aa6a1" />
+  </component>
 </module>

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [4.0.3](https://github.com/aeolun/react-diff-viewer-continued/compare/v4.0.2...v4.0.3) (2024-05-23)
+
+
+### Reverts
+
+* Revert "refactoring attempt" ([6a9789b](https://github.com/aeolun/react-diff-viewer-continued/commit/6a9789b0af0221bf32be11d1af9d4db3337008f4))
+
+## [4.0.2](https://github.com/aeolun/react-diff-viewer-continued/compare/v4.0.1...v4.0.2) (2024-02-14)
+
+
+### Bug Fixes
+
+* revert back to table based layout, add example image (fixes [#35](https://github.com/aeolun/react-diff-viewer-continued/issues/35), [#15](https://github.com/aeolun/react-diff-viewer-continued/issues/15), [#21](https://github.com/aeolun/react-diff-viewer-continued/issues/21)) ([a1571ab](https://github.com/aeolun/react-diff-viewer-continued/commit/a1571ab9940c8b917c2e845f537780e4b45efb01))
+
 ## [4.0.1](https://github.com/aeolun/react-diff-viewer-continued/compare/v4.0.0...v4.0.1) (2023-11-01)
 
 

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Pranesh Ravi
+Copyright (c) 2023 Bart Riepe
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -12,6 +12,8 @@
 
 A simple and beautiful text diff viewer component made with [Diff](https://github.com/kpdecker/jsdiff) and [React](https://reactjs.org).
 
+![example image](./example.jpg)
+
 Inspired by the Github diff viewer, it includes features like split view, inline view, word diff, line highlight and more. It is highly customizable and it supports almost all languages.
 
 Most credit goes to [Pranesh Ravi](https://praneshravi.in) who created the [original diff viewer](https://github.com/praneshr/react-diff-viewer). I've just made a few modifications and updated the dependencies so they work with modern stacks.
@@ -69,11 +71,11 @@ class Diff extends PureComponent {
 
 | Prop                      | Type                      | Default                        | Description                                                                                                                                                                                                                                                                                                                                                                                                      |
 |---------------------------|---------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| oldValue                  | `string                   | Object`                        | `''`                                                                                                                                                                                                                                                                                                                                                                                                             | Old value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
-| newValue                  | `string                   | Object`                        | `''`                                                                                                                                                                                                                                                                                                                                                                                                             | New value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
+| oldValue                  | `string                   \| Object`                        | `''`                                                                                                                                                                                                                                                                                                                                                                                                             | Old value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
+| newValue                  | `string                   \| Object`                        | `''`                                                                                                                                                                                                                                                                                                                                                                                                             | New value as string (or Object if using `diffJson`).                                                                                                                                                                                                                                                                                                                                                                                             |
 | splitView                 | `boolean`                 | `true`                         | Switch between `unified` and `split` view.                                                                                                                                                                                                                                                                                                                                                                       |
 | disableWordDiff           | `boolean`                 | `false`                        | Show and hide word diff in a diff line.                                                                                                                                                                                                                                                                                                                                                                          |
-| compareMethod             | `DiffMethod`              | `DiffMethod.CHARS`             | JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#text-block-diff-comparison) to use different methods.                                                                                                                                                                                                                          |
+| compareMethod             | `DiffMethod \| (string, string) => diff.Change[]`              | `DiffMethod.CHARS`             | Uses an existing diff method when a `DiffMethod` enum is passed. If a function is passed, that function is used as the diff method. <br /> <br /> JsDiff text diff method used for diffing strings. Check out the [guide](https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#text-block-diff-comparison) to use different methods.                                                                                                                                                                                                                           |
 | renderGutter              | `(diffData) => ReactNode` | `undefined`                    | Function that can be used to render an extra gutter with various information next to the line number.                                                                                                                                                                                                                                                                                                            |
 | hideLineNumbers           | `boolean`                 | `false`                        | Show and hide line numbers.                                                                                                                                                                                                                                                                                                                                                                                      |
 | alwaysShowLines           | `string[]`                | `[]`                          | List of lines to always be shown, regardless of diff status. Line number are prefixed with `L` and `R` for the left and right section of the diff viewer, respectively. For example, `L-20` means 20th line in the left pane. `extraLinesSurroundingDiff` applies to these lines as well.                                                                                                                        |

package/lib/{src → cjs/src}/compute-lines.d.ts

@@ -1,3 +1,4 @@
+import * as diff from 'diff';
 export declare enum DiffType {
     DEFAULT = 0,
     ADDED = 1,
@@ -51,5 +52,5 @@ export interface JsDiffChangeObject {
  * @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;
+declare const computeLineInformation: (oldString: string | Object, newString: string | Object, disableWordDiff?: boolean, lineCompareMethod?: DiffMethod | ((oldStr: string, newStr: string) => diff.Change[]), linesOffset?: number, showLines?: string[]) => ComputedLineInformation;
 export { computeLineInformation };

package/lib/{src → cjs/src}/compute-lines.js

@@ -66,7 +66,8 @@ const constructLines = (value) => {
  * @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 compareFunc = (typeof (compareMethod) === 'string') ? jsDiff[compareMethod] : compareMethod;
+    const diffArray = compareFunc(oldValue, newValue);
     const computedDiff = {
         left: [],
         right: [],

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

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

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

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

package/lib/{src → cjs/src}/index.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ReactElement } from 'react';
 import { DiffInformation, DiffMethod, DiffType, LineInformation } from './compute-lines';
+import { Change } from 'diff';
 import { ReactDiffViewerStyles, ReactDiffViewerStylesOverride } from './styles';
 export declare enum LineNumberPrefix {
     LEFT = "L",
@@ -12,7 +13,7 @@ export interface ReactDiffViewerProps {
     splitView?: boolean;
     linesOffset?: number;
     disableWordDiff?: boolean;
-    compareMethod?: DiffMethod;
+    compareMethod?: DiffMethod | ((oldStr: string, newStr: string) => Change[]);
     extraLinesSurroundingDiff?: number;
     hideLineNumbers?: boolean;
     /**
@@ -45,6 +46,7 @@ export interface ReactDiffViewerProps {
 }
 export interface ReactDiffViewerState {
     expandedBlocks?: number[];
+    noSelect?: 'left' | 'right';
 }
 declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
     private styles;
@@ -112,10 +114,7 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
      * @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) => {
-        left: ReactElement[];
-        right: ReactElement[];
-    };
+    renderInlineView: ({ left, right }: LineInformation, index: number) => ReactElement;
     /**
      * Returns a function with clicked block number in the closure.
      *
@@ -139,4 +138,5 @@ declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiff
     render: () => ReactElement;
 }
 export default DiffViewer;
-export { ReactDiffViewerStylesOverride, DiffMethod };
+export { DiffMethod };
+export type { ReactDiffViewerStylesOverride };

package/lib/{src → cjs/src}/index.js

@@ -35,9 +35,8 @@ Object.defineProperty(exports, "DiffMethod", { enumerable: true, get: function (
 const styles_1 = __importDefault(require("./styles"));
 const compute_hidden_blocks_1 = require("./compute-hidden-blocks");
 const expand_1 = require("./expand");
+const memoize_one_1 = __importDefault(require("memoize-one"));
 const fold_1 = require("./fold");
-const m = require('memoize-one');
-const memoize = m.default || m;
 var LineNumberPrefix;
 (function (LineNumberPrefix) {
     LineNumberPrefix["LEFT"] = "L";
@@ -76,7 +75,7 @@ class DiffViewer extends React.Component {
          *
          * @param styles User supplied style overrides.
          */
-        this.computeStyles = memoize(styles_1.default);
+        this.computeStyles = (0, memoize_one_1.default)(styles_1.default);
         /**
          * Returns a function with clicked line number in the closure. Returns an no-op function when no
          * onLineNumberClick handler is supplied.
@@ -98,6 +97,8 @@ class DiffViewer extends React.Component {
         this.renderWordDiff = (diffArray, renderer) => {
             return diffArray.map((wordDiff, i) => {
                 const content = renderer ? renderer(wordDiff.value) : wordDiff.value;
+                if (typeof content !== 'string')
+                    return;
                 return wordDiff.type === compute_lines_1.DiffType.ADDED ?
                     (0, jsx_runtime_1.jsx)("ins", { className: (0, classnames_1.default)(this.styles.wordDiff, {
                             [this.styles.wordAdded]: wordDiff.type === compute_lines_1.DiffType.ADDED,
@@ -146,13 +147,13 @@ class DiffViewer extends React.Component {
             else if (removed && !hasWordDiff) {
                 ElementType = 'del';
             }
-            return ((0, jsx_runtime_1.jsxs)(ElementType, { className: this.styles.line, role: 'row', title: added && !hasWordDiff ? "Added line" : removed && !hasWordDiff ? "Removed line" : undefined, children: [!this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("div", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
+            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.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)("div", { onClick: additionalLineNumber &&
+                        }), 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,
@@ -169,19 +170,27 @@ class DiffViewer extends React.Component {
                             additionalPrefix,
                             styles: this.styles,
                         })
-                        : null, (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(this.styles.marker, {
+                        : 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)("div", { className: (0, classnames_1.default)(this.styles.lineContent, {
+                        }), 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 }) })] }));
+                            left: prefix === LineNumberPrefix.LEFT,
+                            right: prefix === LineNumberPrefix.RIGHT,
+                        }), onMouseDown: () => {
+                            const elements = document.getElementsByClassName(prefix === LineNumberPrefix.LEFT ? 'right' : 'left');
+                            for (let i = 0; i < elements.length; i++) {
+                                const element = elements.item(i);
+                                element.classList.add(this.styles.noSelect);
+                            }
+                        }, title: added && !hasWordDiff ? "Added line" : removed && !hasWordDiff ? "Removed line" : undefined, children: (0, jsx_runtime_1.jsx)(ElementType, { className: this.styles.contentText, children: content }) })] }));
         };
         /**
          * Generates lines for split view.
@@ -192,14 +201,7 @@ class DiffViewer extends React.Component {
          * @param index React key for the lines.
          */
         this.renderSplitView = ({ left, right }, index) => {
-            return {
-                left: [
-                    this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value)
-                ],
-                right: [
-                    this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)
-                ]
-            };
+            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.
@@ -212,42 +214,18 @@ class DiffViewer extends React.Component {
         this.renderInlineView = ({ left, right }, index) => {
             let content;
             if (left.type === compute_lines_1.DiffType.REMOVED && right.type === compute_lines_1.DiffType.ADDED) {
-                return {
-                    left: [
-                        this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null),
-                        this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber)
-                    ],
-                    right: []
-                };
+                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) {
-                return {
-                    left: [
-                        this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null)
-                    ],
-                    right: []
-                };
+                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
             }
             if (left.type === compute_lines_1.DiffType.DEFAULT) {
-                return {
-                    left: [
-                        this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT)
-                    ],
-                    right: []
-                };
+                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT);
             }
             if (right.type === compute_lines_1.DiffType.ADDED) {
-                return {
-                    left: [
-                        this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber)
-                    ],
-                    right: []
-                };
+                content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber);
             }
-            return {
-                left: [],
-                right: []
-            };
+            return ((0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: content }, index));
         };
         /**
          * Returns a function with clicked block number in the closure.
@@ -267,14 +245,11 @@ class DiffViewer extends React.Component {
         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)("div", { className: this.styles.codeFoldContentContainer, children: (0, jsx_runtime_1.jsx)("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
+            const content = ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldContentContainer, children: (0, jsx_runtime_1.jsx)("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
             const isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
-            return {
-                left: [(0, jsx_runtime_1.jsxs)("div", { className: this.styles.codeFold, children: [!hideLineNumbers && (0, jsx_runtime_1.jsx)("div", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? ((0, jsx_runtime_1.jsx)("div", { className: this.styles.codeFoldGutter })) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)({
-                                    [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
-                                }) }), isUnifiedViewWithoutLineNumbers ? ((0, jsx_runtime_1.jsx)(React.Fragment, { children: content })) : ((0, jsx_runtime_1.jsx)(React.Fragment, { children: content }))] }, this.props.splitView ? `${leftBlockLineNumber}` : `${leftBlockLineNumber}-${rightBlockLineNumber}`)],
-                right: this.props.splitView ? [(0, jsx_runtime_1.jsx)("div", { className: this.styles.codeFold }, `${rightBlockLineNumber}`)] : []
-            };
+            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", {}), !hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", {}) : null] }))] }, `${leftBlockLineNumber}-${rightBlockLineNumber}`));
         };
         /**
          * Generates the entire diff view.
@@ -286,40 +261,48 @@ class DiffViewer extends React.Component {
                 ? 0
                 : Math.round(this.props.extraLinesSurroundingDiff);
             const { lineBlocks, blocks } = (0, compute_hidden_blocks_1.computeHiddenBlocks)(lineInformation, diffLines, extraLines);
-            const leftLines = [];
-            const rightLines = [];
-            lineInformation.forEach((line, lineIndex) => {
+            const diffNodes = 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) {
-                            const { left, right } = this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber);
-                            leftLines.push(...left);
-                            rightLines.push(...right);
+                            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 { left, right } = splitView
+                return splitView
                     ? this.renderSplitView(line, lineIndex)
                     : this.renderInlineView(line, lineIndex);
-                leftLines.push(...left);
-                rightLines.push(...right);
             });
-            return { leftLines, rightLines, lineInformation, blocks };
+            return {
+                diffNodes,
+                blocks,
+                lineInformation
+            };
         };
         this.render = () => {
-            const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, nonce, } = this.props;
-            if (this.props.compareMethod !== compute_lines_1.DiffMethod.JSON) {
+            const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, compareMethod, hideLineNumbers, nonce, } = this.props;
+            if (typeof (compareMethod) === 'string' && 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();
+            let colSpanOnSplitView = 3;
+            let colSpanOnInlineView = 4;
+            if (hideLineNumbers) {
+                colSpanOnSplitView -= 1;
+                colSpanOnInlineView -= 1;
+            }
+            if (this.props.renderGutter) {
+                colSpanOnSplitView += 1;
+                colSpanOnInlineView += 1;
+            }
             let deletions = 0, additions = 0;
             nodes.lineInformation.forEach((l) => {
                 if (l.left.type === compute_lines_1.DiffType.ADDED) {
@@ -351,12 +334,24 @@ class DiffViewer extends React.Component {
                                     this.setState({
                                         expandedBlocks: allExpanded ? [] : nodes.blocks.map(b => b.index)
                                     });
-                                }, children: allExpanded ? (0, jsx_runtime_1.jsx)(fold_1.Fold, {}) : (0, jsx_runtime_1.jsx)(expand_1.Expand, {}) }), " ", totalChanges, " ", (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '1px' }, children: blocks }), " ", this.props.summary ? (0, jsx_runtime_1.jsx)("span", { children: this.props.summary }) : null] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(this.styles.diffContainer, {
+                                }, children: allExpanded ? (0, jsx_runtime_1.jsx)(fold_1.Fold, {}) : (0, jsx_runtime_1.jsx)(expand_1.Expand, {}) }), " ", totalChanges, (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', gap: '1px' }, children: blocks }), this.props.summary ? (0, jsx_runtime_1.jsx)("span", { children: this.props.summary }) : null] }), (0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
                             [this.styles.splitView]: splitView,
-                        }), children: [(0, jsx_runtime_1.jsxs)("div", { className: this.styles.column, role: 'table', title: `Diff information for ${leftTitle}`, children: [leftTitle ? (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(this.styles.titleBlock, this.styles.column), role: 'columnheader', children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: leftTitle }) }) : null, nodes.leftLines] }), nodes.rightLines.length > 0 ? (0, jsx_runtime_1.jsxs)("div", { className: this.styles.column, role: 'table', title: `Diff information for ${rightTitle}`, children: [rightTitle ? (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(this.styles.titleBlock, this.styles.column), role: 'columnheader', children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: rightTitle }) }) : null, nodes.rightLines] }) : null] })] }));
+                        }), onMouseUp: () => {
+                            const elements = document.getElementsByClassName('right');
+                            for (let i = 0; i < elements.length; i++) {
+                                const element = elements.item(i);
+                                element.classList.remove(this.styles.noSelect);
+                            }
+                            const elementsLeft = document.getElementsByClassName('left');
+                            for (let i = 0; i < elementsLeft.length; i++) {
+                                const element = elementsLeft.item(i);
+                                element.classList.remove(this.styles.noSelect);
+                            }
+                        }, children: (0, jsx_runtime_1.jsxs)("tbody", { children: [(0, jsx_runtime_1.jsxs)("tr", { children: [!this.props.hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", { width: '50px' }) : null, !splitView && !this.props.hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", { width: '50px' }) : null, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", { width: '50px' }) : null, (0, jsx_runtime_1.jsx)("td", { width: '28px' }), (0, jsx_runtime_1.jsx)("td", { width: '100%' }), splitView ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!this.props.hideLineNumbers ? (0, jsx_runtime_1.jsx)("td", { width: '50px' }) : null, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", { width: '50px' }) : null, (0, jsx_runtime_1.jsx)("td", { width: '28px' }), (0, jsx_runtime_1.jsx)("td", { width: '100%' })] }) : null] }), leftTitle || rightTitle ? (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView), className: (0, classnames_1.default)(this.styles.titleBlock, this.styles.column), role: 'columnheader', children: leftTitle ? (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: leftTitle }) : null }), splitView ? (0, jsx_runtime_1.jsx)("td", { colSpan: colSpanOnSplitView, className: (0, classnames_1.default)(this.styles.titleBlock, this.styles.column), role: 'columnheader', children: rightTitle ? (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: rightTitle }) : null }) : null] }) : null, nodes.diffNodes] }) })] }));
         };
         this.state = {
             expandedBlocks: [],
+            noSelect: undefined,
         };
     }
 }

package/lib/{src → cjs/src}/styles.d.ts

@@ -24,6 +24,7 @@ export interface ReactDiffViewerStyles {
     titleBlock?: string;
     content?: string;
     column?: string;
+    noSelect?: string;
     splitView?: string;
     [key: string]: string | undefined;
 }
@@ -79,6 +80,7 @@ export interface ReactDiffViewerStylesOverride {
     codeFold?: CSSInterpolation;
     emptyLine?: CSSInterpolation;
     content?: CSSInterpolation;
+    noSelect?: CSSInterpolation;
     column?: CSSInterpolation;
     titleBlock?: CSSInterpolation;
     splitView?: CSSInterpolation;

package/lib/{src → cjs/src}/styles.js

@@ -62,7 +62,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
             gutterBackgroundDark: '#262933',
             highlightBackground: '#2a3967',
             highlightGutterBackground: '#2d4077',
-            codeFoldGutterBackground: '#21232b',
+            codeFoldGutterBackground: '#262831',
             codeFoldBackground: '#262831',
             emptyLineBackground: '#363946',
             gutterColor: '#666c87',
@@ -77,9 +77,8 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
     const { css, cx } = (0, create_instance_1.default)({ key: 'react-diff', nonce });
     const content = css({
-        width: '100%',
+        width: 'auto',
         label: 'content',
-        flex: 1
     });
     const splitView = css({
         label: 'split-view',
@@ -98,6 +97,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
         width: '100%',
         minWidth: '1000px',
         overflowX: 'auto',
+        tableLayout: 'fixed',
         background: variables.diffViewerBackground,
         pre: {
             margin: 0,
@@ -107,7 +107,6 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
         },
         label: 'diff-container',
         borderCollapse: 'collapse',
-        display: 'flex'
     });
     const lineContent = css({
         overflow: 'hidden',
@@ -115,14 +114,22 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     });
     const contentText = css({
         color: variables.diffViewerColor,
+        whiteSpace: 'pre-wrap',
+        fontFamily: 'monospace',
+        textDecoration: 'none',
         label: 'content-text',
     });
+    const unselectable = css({
+        userSelect: 'none',
+        label: 'unselectable',
+    });
     const titleBlock = css({
         background: variables.diffViewerTitleBackground,
         padding: '0.5em',
         lineHeight: '1.4em',
         height: "2.4em",
         overflow: 'hidden',
+        width: '50%',
         borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
         label: 'title-block',
         ':last-child': {
@@ -185,7 +192,8 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     const codeFoldGutter = css({
         backgroundColor: variables.codeFoldGutterBackground,
         label: 'code-fold-gutter',
-        minWidth: '50px'
+        minWidth: '50px',
+        width: '50px'
     });
     const codeFoldContentContainer = css({
         padding: '8px 16px'
@@ -213,7 +221,6 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
         backgroundColor: variables.codeFoldBackground,
         height: 40,
         fontSize: 14,
-        display: 'flex',
         alignItems: 'center',
         userSelect: 'none',
         fontWeight: 700,
@@ -229,7 +236,6 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     const emptyLine = css({
         backgroundColor: variables.emptyLineBackground,
         label: 'empty-line',
-        flex: 1,
     });
     const marker = css({
         width: 28,
@@ -261,6 +267,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     const gutter = css({
         userSelect: 'none',
         minWidth: 50,
+        width: '50px',
         padding: '0 10px',
         whiteSpace: 'nowrap',
         label: 'gutter',
@@ -299,13 +306,9 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     const line = css({
         verticalAlign: 'baseline',
         label: 'line',
-        height: '1.6em',
-        display: 'flex',
         textDecoration: 'none'
     });
-    const column = css({
-        flex: 1
-    });
+    const column = css({});
     const defaultStyles = {
         diffContainer,
         diffRemoved,
@@ -325,6 +328,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
         blockAddition,
         blockDeletion,
         wordRemoved,
+        noSelect: unselectable,
         codeFoldGutter,
         codeFoldContentContainer,
         codeFold,

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

@@ -0,0 +1,35 @@
+export 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
+    };
+}