react-diff-viewer-continued 3.3.1 → 4.0.1

package/.github/workflows/release.yml

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

package/CHANGELOG.md

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

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

@@ -1,5 +1,5 @@
 import { LineInformation } from "./compute-lines";
-interface Block {
+export interface Block {
     index: number;
     startLine: number;
     endLine: number;

package/lib/src/compute-lines.js

@@ -112,7 +112,7 @@ const computeLineInformation = (oldString, newString, disableWordDiff = false, l
     let diffArray = [];
     // Use diffLines for strings, and diffJson for objects...
     if (typeof oldString === 'string' && typeof newString === 'string') {
-        diffArray = diff.diffLines(oldString.trimRight(), newString.trimRight(), {
+        diffArray = diff.diffLines(oldString, newString, {
             newlineIsToken: false,
             ignoreWhitespace: false,
             ignoreCase: false,

package/lib/src/expand.d.ts

@@ -0,0 +1 @@
+export declare function Expand(): JSX.Element;

package/lib/src/expand.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Expand = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Expand() {
+    return (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("path", { d: "m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" }) });
+}
+exports.Expand = Expand;

package/lib/src/fold.d.ts

@@ -0,0 +1 @@
+export declare function Fold(): JSX.Element;

package/lib/src/fold.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Fold = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function Fold() {
+    return (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", children: (0, jsx_runtime_1.jsx)("path", { d: "M10.896 2H8.75V.75a.75.75 0 0 0-1.5 0V2H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0l2.896-2.896A.25.25 0 0 0 10.896 2ZM8.75 15.25a.75.75 0 0 1-1.5 0V14H5.104a.25.25 0 0 1-.177-.427l2.896-2.896a.25.25 0 0 1 .354 0l2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25Zm-6.5-6.5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" }) });
+}
+exports.Fold = Fold;

package/lib/src/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { ReactElement } from 'react';
 import { DiffInformation, DiffMethod, DiffType, LineInformation } from './compute-lines';
 import { ReactDiffViewerStyles, ReactDiffViewerStylesOverride } from './styles';
-import { ReactElement } from "react";
 export declare enum LineNumberPrefix {
     LEFT = "L",
     RIGHT = "R"
@@ -35,6 +35,10 @@ export interface ReactDiffViewerProps {
     highlightLines?: string[];
     styles?: ReactDiffViewerStylesOverride;
     useDarkTheme?: boolean;
+    /**
+     * Used to describe the thing being diffed
+     */
+    summary?: string | ReactElement;
     leftTitle?: string | ReactElement;
     rightTitle?: string | ReactElement;
     nonce?: string;
@@ -108,7 +112,10 @@ 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) => ReactElement;
+    renderInlineView: ({ left, right }: LineInformation, index: number) => {
+        left: ReactElement[];
+        right: ReactElement[];
+    };
     /**
      * Returns a function with clicked block number in the closure.
      *

package/lib/src/index.js

@@ -34,6 +34,8 @@ const compute_lines_1 = require("./compute-lines");
 Object.defineProperty(exports, "DiffMethod", { enumerable: true, get: function () { return compute_lines_1.DiffMethod; } });
 const styles_1 = __importDefault(require("./styles"));
 const compute_hidden_blocks_1 = require("./compute-hidden-blocks");
+const expand_1 = require("./expand");
+const fold_1 = require("./fold");
 const m = require('memoize-one');
 const memoize = m.default || m;
 var LineNumberPrefix;
@@ -95,10 +97,14 @@ class DiffViewer extends React.Component {
          */
         this.renderWordDiff = (diffArray, renderer) => {
             return diffArray.map((wordDiff, i) => {
-                return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.wordDiff, {
-                        [this.styles.wordAdded]: wordDiff.type === compute_lines_1.DiffType.ADDED,
-                        [this.styles.wordRemoved]: wordDiff.type === compute_lines_1.DiffType.REMOVED,
-                    }), children: renderer ? renderer(wordDiff.value) : wordDiff.value }, i));
+                const content = renderer ? renderer(wordDiff.value) : wordDiff.value;
+                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,
+                        }), children: content }, i)
+                    : wordDiff.type === compute_lines_1.DiffType.REMOVED ? (0, jsx_runtime_1.jsx)("del", { className: (0, classnames_1.default)(this.styles.wordDiff, {
+                            [this.styles.wordRemoved]: wordDiff.type === compute_lines_1.DiffType.REMOVED,
+                        }), children: content }, i) : (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.wordDiff), children: content }, i);
             });
         };
         /**
@@ -123,7 +129,8 @@ class DiffViewer extends React.Component {
             const removed = type === compute_lines_1.DiffType.REMOVED;
             const changed = type === compute_lines_1.DiffType.CHANGED;
             let content;
-            if (Array.isArray(value)) {
+            const hasWordDiff = Array.isArray(value);
+            if (hasWordDiff) {
                 content = this.renderWordDiff(value, this.props.renderContent);
             }
             else if (this.props.renderContent) {
@@ -132,13 +139,20 @@ class DiffViewer extends React.Component {
             else {
                 content = value;
             }
-            return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [!this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: lineNumber && this.onLineNumberClickProxy(lineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
+            let ElementType = 'div';
+            if (added && !hasWordDiff) {
+                ElementType = 'ins';
+            }
+            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, {
                             [this.styles.emptyGutter]: !lineNumber,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
                             [this.styles.diffChanged]: changed,
                             [this.styles.highlightedGutter]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.lineNumber, children: lineNumber }) })), !this.props.splitView && !this.props.hideLineNumbers && ((0, jsx_runtime_1.jsx)("td", { onClick: additionalLineNumber &&
+                        }), 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 &&
                             this.onLineNumberClickProxy(additionalLineNumberTemplate), className: (0, classnames_1.default)(this.styles.gutter, {
                             [this.styles.emptyGutter]: !additionalLineNumber,
                             [this.styles.diffAdded]: added,
@@ -155,13 +169,13 @@ class DiffViewer extends React.Component {
                             additionalPrefix,
                             styles: this.styles,
                         })
-                        : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.marker, {
+                        : null, (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(this.styles.marker, {
                             [this.styles.emptyLine]: !content,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
                             [this.styles.diffChanged]: changed,
                             [this.styles.highlightedLine]: highlightLine,
-                        }), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added && '+', removed && '-'] }) }), (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)(this.styles.content, {
+                        }), children: (0, jsx_runtime_1.jsxs)("pre", { children: [added && '+', removed && '-'] }) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(this.styles.lineContent, {
                             [this.styles.emptyLine]: !content,
                             [this.styles.diffAdded]: added,
                             [this.styles.diffRemoved]: removed,
@@ -178,7 +192,14 @@ class DiffViewer extends React.Component {
          * @param index React key for the lines.
          */
         this.renderSplitView = ({ left, right }, index) => {
-            return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.line, children: [this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value), this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)] }, index));
+            return {
+                left: [
+                    this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value)
+                ],
+                right: [
+                    this.renderLine(right.lineNumber, right.type, LineNumberPrefix.RIGHT, right.value)
+                ]
+            };
         };
         /**
          * Generates lines for inline view.
@@ -191,18 +212,42 @@ 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 ((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));
+                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: []
+                };
             }
             if (left.type === compute_lines_1.DiffType.REMOVED) {
-                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null);
+                return {
+                    left: [
+                        this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, null)
+                    ],
+                    right: []
+                };
             }
             if (left.type === compute_lines_1.DiffType.DEFAULT) {
-                content = this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT);
+                return {
+                    left: [
+                        this.renderLine(left.lineNumber, left.type, LineNumberPrefix.LEFT, left.value, right.lineNumber, LineNumberPrefix.RIGHT)
+                    ],
+                    right: []
+                };
             }
             if (right.type === compute_lines_1.DiffType.ADDED) {
-                content = this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber);
+                return {
+                    left: [
+                        this.renderLine(null, right.type, LineNumberPrefix.RIGHT, right.value, right.lineNumber)
+                    ],
+                    right: []
+                };
             }
-            return ((0, jsx_runtime_1.jsx)("tr", { className: this.styles.line, children: content }, index));
+            return {
+                left: [],
+                right: []
+            };
         };
         /**
          * Returns a function with clicked block number in the closure.
@@ -222,11 +267,14 @@ 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)("td", { children: (0, jsx_runtime_1.jsx)("a", { onClick: this.onBlockClickProxy(blockNumber), tabIndex: 0, children: message }) }));
+            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 isUnifiedViewWithoutLineNumbers = !splitView && !hideLineNumbers;
-            return ((0, jsx_runtime_1.jsxs)("tr", { className: this.styles.codeFold, children: [!hideLineNumbers && (0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter }), this.props.renderGutter ? ((0, jsx_runtime_1.jsx)("td", { className: this.styles.codeFoldGutter })) : null, (0, jsx_runtime_1.jsx)("td", { className: (0, classnames_1.default)({
-                            [this.styles.codeFoldGutter]: isUnifiedViewWithoutLineNumbers,
-                        }) }), isUnifiedViewWithoutLineNumbers ? ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("td", {}), content] })) : ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [content, this.props.renderGutter ? (0, jsx_runtime_1.jsx)("td", {}) : null, (0, jsx_runtime_1.jsx)("td", {})] })), (0, jsx_runtime_1.jsx)("td", {}), (0, jsx_runtime_1.jsx)("td", {})] }, `${leftBlockLineNumber}-${rightBlockLineNumber}`));
+            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}`)] : []
+            };
         };
         /**
          * Generates the entire diff view.
@@ -238,24 +286,30 @@ class DiffViewer extends React.Component {
                 ? 0
                 : Math.round(this.props.extraLinesSurroundingDiff);
             const { lineBlocks, blocks } = (0, compute_hidden_blocks_1.computeHiddenBlocks)(lineInformation, diffLines, extraLines);
-            return lineInformation.map((line, lineIndex) => {
+            const leftLines = [];
+            const rightLines = [];
+            lineInformation.forEach((line, lineIndex) => {
                 if (this.props.showDiffOnly) {
                     const blockIndex = lineBlocks[lineIndex];
                     if (blockIndex !== undefined) {
                         const lastLineOfBlock = blocks[blockIndex].endLine === lineIndex;
                         if (!this.state.expandedBlocks.includes(blockIndex) && lastLineOfBlock) {
-                            return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber) }, lineIndex));
+                            const { left, right } = this.renderSkippedLineIndicator(blocks[blockIndex].lines, blockIndex, line.left.lineNumber, line.right.lineNumber);
+                            leftLines.push(...left);
+                            rightLines.push(...right);
                         }
                         else if (!this.state.expandedBlocks.includes(blockIndex)) {
                             return null;
                         }
                     }
                 }
-                const diffNodes = splitView
+                const { left, right } = splitView
                     ? this.renderSplitView(line, lineIndex)
                     : this.renderInlineView(line, lineIndex);
-                return diffNodes;
+                leftLines.push(...left);
+                rightLines.push(...right);
             });
+            return { leftLines, rightLines, lineInformation, blocks };
         };
         this.render = () => {
             const { oldValue, newValue, useDarkTheme, leftTitle, rightTitle, splitView, hideLineNumbers, nonce, } = this.props;
@@ -266,14 +320,40 @@ class DiffViewer extends React.Component {
             }
             this.styles = this.computeStyles(this.props.styles, useDarkTheme, nonce);
             const nodes = this.renderDiff();
-            const colSpanOnSplitView = hideLineNumbers ? 2 : 3;
-            const colSpanOnInlineView = hideLineNumbers ? 2 : 4;
-            let columnExtension = this.props.renderGutter ? 1 : 0;
-            const title = (leftTitle || rightTitle) && ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { colSpan: (splitView ? colSpanOnSplitView : colSpanOnInlineView) +
-                            columnExtension, className: this.styles.titleBlock, children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: leftTitle }) }), splitView && ((0, jsx_runtime_1.jsx)("td", { colSpan: colSpanOnSplitView + columnExtension, className: this.styles.titleBlock, children: (0, jsx_runtime_1.jsx)("pre", { className: this.styles.contentText, children: rightTitle }) }))] }));
-            return ((0, jsx_runtime_1.jsx)("table", { className: (0, classnames_1.default)(this.styles.diffContainer, {
-                    [this.styles.splitView]: splitView,
-                }), children: (0, jsx_runtime_1.jsxs)("tbody", { children: [title, nodes] }) }));
+            let deletions = 0, additions = 0;
+            nodes.lineInformation.forEach((l) => {
+                if (l.left.type === compute_lines_1.DiffType.ADDED) {
+                    additions++;
+                }
+                if (l.right.type === compute_lines_1.DiffType.ADDED) {
+                    additions++;
+                }
+                if (l.left.type === compute_lines_1.DiffType.REMOVED) {
+                    deletions++;
+                }
+                if (l.right.type === compute_lines_1.DiffType.REMOVED) {
+                    deletions++;
+                }
+            });
+            const totalChanges = deletions + additions;
+            const percentageAddition = Math.round((additions / totalChanges) * 100);
+            const blocks = [];
+            for (let i = 0; i < 5; i++) {
+                if (percentageAddition > i * 20) {
+                    blocks.push((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.block, this.styles.blockAddition) }, i));
+                }
+                else {
+                    blocks.push((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)(this.styles.block, this.styles.blockDeletion) }, i));
+                }
+            }
+            const allExpanded = this.state.expandedBlocks.length === nodes.blocks.length;
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: this.styles.summary, role: 'banner', children: [(0, jsx_runtime_1.jsx)("a", { style: { cursor: 'pointer' }, onClick: () => {
+                                    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, {
+                            [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] })] }));
         };
         this.state = {
             expandedBlocks: [],

package/lib/src/styles.d.ts

@@ -7,6 +7,7 @@ export interface ReactDiffViewerStyles {
     line?: string;
     highlightedGutter?: string;
     contentText?: string;
+    lineContent?: string;
     gutter?: string;
     highlightedLine?: string;
     lineNumber?: string;
@@ -15,11 +16,14 @@ export interface ReactDiffViewerStyles {
     wordAdded?: string;
     wordRemoved?: string;
     codeFoldGutter?: string;
+    summary?: string;
+    codeFoldContentContainer?: string;
     emptyGutter?: string;
     emptyLine?: string;
     codeFold?: string;
     titleBlock?: string;
     content?: string;
+    column?: string;
     splitView?: string;
     [key: string]: string | undefined;
 }
@@ -71,9 +75,11 @@ export interface ReactDiffViewerStylesOverride {
     wordAdded?: CSSInterpolation;
     wordRemoved?: CSSInterpolation;
     codeFoldGutter?: CSSInterpolation;
+    codeFoldContentContainer?: CSSInterpolation;
     codeFold?: CSSInterpolation;
     emptyLine?: CSSInterpolation;
     content?: CSSInterpolation;
+    column?: CSSInterpolation;
     titleBlock?: CSSInterpolation;
     splitView?: CSSInterpolation;
 }

package/lib/src/styles.js

@@ -70,7 +70,7 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
             removedGutterColor: '#8c8c8c',
             codeFoldContentColor: '#656a8b',
             diffViewerTitleBackground: '#2f323e',
-            diffViewerTitleColor: '#555a7b',
+            diffViewerTitleColor: '#757a9b',
             diffViewerTitleBorderColor: '#353846',
         }, (overrideVariables.dark || {})),
     };
@@ -79,27 +79,39 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     const content = css({
         width: '100%',
         label: 'content',
+        flex: 1
     });
     const splitView = css({
-        [`.${content}`]: {
-            width: '50%',
-        },
         label: 'split-view',
     });
+    const summary = css({
+        background: variables.diffViewerTitleBackground,
+        color: variables.diffViewerTitleColor,
+        padding: '0.5em 1em',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5em',
+        fontFamily: "monospace",
+        fill: variables.diffViewerTitleColor,
+    });
     const diffContainer = css({
         width: '100%',
+        minWidth: '1000px',
+        overflowX: 'auto',
         background: variables.diffViewerBackground,
         pre: {
             margin: 0,
             whiteSpace: 'pre-wrap',
-            lineHeight: '25px',
+            lineHeight: '1.6em',
+            width: 'fit-content'
         },
         label: 'diff-container',
         borderCollapse: 'collapse',
+        display: 'flex'
     });
-    const codeFoldContent = css({
-        color: variables.codeFoldContentColor,
-        label: 'code-fold-content',
+    const lineContent = css({
+        overflow: 'hidden',
+        width: '100%'
     });
     const contentText = css({
         color: variables.diffViewerColor,
@@ -107,7 +119,10 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     });
     const titleBlock = css({
         background: variables.diffViewerTitleBackground,
-        padding: 10,
+        padding: '0.5em',
+        lineHeight: '1.4em',
+        height: "2.4em",
+        overflow: 'hidden',
         borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
         label: 'title-block',
         ':last-child': {
@@ -159,20 +174,48 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     });
     const wordAdded = css({
         background: variables.wordAddedBackground,
+        textDecoration: 'none',
         label: 'word-added',
     });
     const wordRemoved = css({
         background: variables.wordRemovedBackground,
+        textDecoration: 'none',
         label: 'word-removed',
     });
     const codeFoldGutter = css({
         backgroundColor: variables.codeFoldGutterBackground,
         label: 'code-fold-gutter',
+        minWidth: '50px'
+    });
+    const codeFoldContentContainer = css({
+        padding: '8px 16px'
+    });
+    const codeFoldContent = css({
+        color: variables.codeFoldContentColor,
+        label: 'code-fold-content',
+    });
+    const block = css({
+        display: 'block',
+        width: '10px',
+        height: '10px',
+        backgroundColor: '#ddd',
+        borderWidth: '1px',
+        borderStyle: 'solid',
+        borderColor: variables.diffViewerTitleBorderColor
+    });
+    const blockAddition = css({
+        backgroundColor: variables.wordAddedBackground
+    });
+    const blockDeletion = css({
+        backgroundColor: variables.wordRemovedBackground
     });
     const codeFold = css({
         backgroundColor: variables.codeFoldBackground,
         height: 40,
         fontSize: 14,
+        display: 'flex',
+        alignItems: 'center',
+        userSelect: 'none',
         fontWeight: 700,
         label: 'code-fold',
         a: {
@@ -186,9 +229,10 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
     const emptyLine = css({
         backgroundColor: variables.emptyLineBackground,
         label: 'empty-line',
+        flex: 1,
     });
     const marker = css({
-        width: 25,
+        width: 28,
         paddingLeft: 10,
         paddingRight: 10,
         userSelect: 'none',
@@ -255,6 +299,12 @@ 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 defaultStyles = {
         diffContainer,
@@ -267,16 +317,23 @@ exports.default = (styleOverride, useDarkTheme = false, nonce = '') => {
         highlightedLine,
         gutter,
         line,
+        lineContent,
         wordDiff,
         wordAdded,
+        summary,
+        block,
+        blockAddition,
+        blockDeletion,
         wordRemoved,
         codeFoldGutter,
+        codeFoldContentContainer,
         codeFold,
         emptyGutter,
         emptyLine,
         lineNumber,
         contentText,
         content,
+        column,
         codeFoldContent,
         titleBlock,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "3.3.1",
+  "version": "4.0.1",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [

package/release.config.js

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