react-diff-viewer-continued 4.0.1 → 4.0.2

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,10 @@
+## [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.

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

@@ -45,6 +45,7 @@ export interface ReactDiffViewerProps {
 }
 export interface ReactDiffViewerState {
     expandedBlocks?: number[];
+    noSelect?: 'left' | 'right';
 }
 declare class DiffViewer extends React.Component<ReactDiffViewerProps, ReactDiffViewerState> {
     private styles;
@@ -112,10 +113,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 +137,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,30 +261,28 @@ 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;
@@ -320,6 +293,16 @@ class DiffViewer extends React.Component {
             }
             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
+    };
+}