react-diff-viewer-continued 4.0.2 → 4.0.4

package/lib/esm/src/styles.js

@@ -1,128 +1,144 @@
-import createEmotion from '@emotion/css/create-instance';
-// eslint-disable-next-line import/no-anonymous-default-export
-export default (styleOverride, useDarkTheme = false, nonce = '') => {
+import createEmotion from "@emotion/css/create-instance";
+export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const { variables: overrideVariables = {}, ...styles } = styleOverride;
     const themeVariables = {
         light: {
             ...{
-                diffViewerBackground: '#fff',
-                diffViewerColor: '#212529',
-                addedBackground: '#e6ffed',
-                addedColor: '#24292e',
-                removedBackground: '#ffeef0',
-                removedColor: '#24292e',
-                changedBackground: '#fffbdd',
-                wordAddedBackground: '#acf2bd',
-                wordRemovedBackground: '#fdb8c0',
-                addedGutterBackground: '#cdffd8',
-                removedGutterBackground: '#ffdce0',
-                gutterBackground: '#f7f7f7',
-                gutterBackgroundDark: '#f3f1f1',
-                highlightBackground: '#fffbdd',
-                highlightGutterBackground: '#fff5b1',
-                codeFoldGutterBackground: '#dbedff',
-                codeFoldBackground: '#f1f8ff',
-                emptyLineBackground: '#fafbfc',
-                gutterColor: '#212529',
-                addedGutterColor: '#212529',
-                removedGutterColor: '#212529',
-                codeFoldContentColor: '#212529',
-                diffViewerTitleBackground: '#fafbfc',
-                diffViewerTitleColor: '#212529',
-                diffViewerTitleBorderColor: '#eee',
+                diffViewerBackground: "#fff",
+                diffViewerColor: "#212529",
+                addedBackground: "#e6ffed",
+                addedColor: "#24292e",
+                removedBackground: "#ffeef0",
+                removedColor: "#24292e",
+                changedBackground: "#fffbdd",
+                wordAddedBackground: "#acf2bd",
+                wordRemovedBackground: "#fdb8c0",
+                addedGutterBackground: "#cdffd8",
+                removedGutterBackground: "#ffdce0",
+                gutterBackground: "#f7f7f7",
+                gutterBackgroundDark: "#f3f1f1",
+                highlightBackground: "#fffbdd",
+                highlightGutterBackground: "#fff5b1",
+                codeFoldGutterBackground: "#dbedff",
+                codeFoldBackground: "#f1f8ff",
+                emptyLineBackground: "#fafbfc",
+                gutterColor: "#212529",
+                addedGutterColor: "#212529",
+                removedGutterColor: "#212529",
+                codeFoldContentColor: "#212529",
+                diffViewerTitleBackground: "#fafbfc",
+                diffViewerTitleColor: "#212529",
+                diffViewerTitleBorderColor: "#eee",
             },
             ...(overrideVariables.light || {}),
         },
         dark: {
             ...{
-                diffViewerBackground: '#2e303c',
-                diffViewerColor: '#FFF',
-                addedBackground: '#044B53',
-                addedColor: 'white',
-                removedBackground: '#632F34',
-                removedColor: 'white',
-                changedBackground: '#3e302c',
-                wordAddedBackground: '#055d67',
-                wordRemovedBackground: '#7d383f',
-                addedGutterBackground: '#034148',
-                removedGutterBackground: '#632b30',
-                gutterBackground: '#2c2f3a',
-                gutterBackgroundDark: '#262933',
-                highlightBackground: '#2a3967',
-                highlightGutterBackground: '#2d4077',
-                codeFoldGutterBackground: '#262831',
-                codeFoldBackground: '#262831',
-                emptyLineBackground: '#363946',
-                gutterColor: '#666c87',
-                addedGutterColor: '#8c8c8c',
-                removedGutterColor: '#8c8c8c',
-                codeFoldContentColor: '#656a8b',
-                diffViewerTitleBackground: '#2f323e',
-                diffViewerTitleColor: '#757a9b',
-                diffViewerTitleBorderColor: '#353846',
+                diffViewerBackground: "#2e303c",
+                diffViewerColor: "#FFF",
+                addedBackground: "#044B53",
+                addedColor: "white",
+                removedBackground: "#632F34",
+                removedColor: "white",
+                changedBackground: "#3e302c",
+                wordAddedBackground: "#055d67",
+                wordRemovedBackground: "#7d383f",
+                addedGutterBackground: "#034148",
+                removedGutterBackground: "#632b30",
+                gutterBackground: "#2c2f3a",
+                gutterBackgroundDark: "#262933",
+                highlightBackground: "#2a3967",
+                highlightGutterBackground: "#2d4077",
+                codeFoldGutterBackground: "#262831",
+                codeFoldBackground: "#262831",
+                emptyLineBackground: "#363946",
+                gutterColor: "#666c87",
+                addedGutterColor: "#8c8c8c",
+                removedGutterColor: "#8c8c8c",
+                codeFoldContentColor: "#656a8b",
+                diffViewerTitleBackground: "#2f323e",
+                diffViewerTitleColor: "#757a9b",
+                diffViewerTitleBorderColor: "#353846",
             },
             ...(overrideVariables.dark || {}),
         },
     };
     const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
-    const { css, cx } = createEmotion({ key: 'react-diff', nonce });
+    const { css, cx } = createEmotion({ key: "react-diff", nonce });
     const content = css({
-        width: 'auto',
-        label: 'content',
+        width: "auto",
+        label: "content",
     });
     const splitView = css({
-        label: 'split-view',
+        label: "split-view",
     });
     const summary = css({
         background: variables.diffViewerTitleBackground,
         color: variables.diffViewerTitleColor,
-        padding: '0.5em 1em',
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.5em',
+        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',
-        tableLayout: 'fixed',
+        width: "100%",
+        minWidth: "1000px",
+        overflowX: "auto",
+        tableLayout: "fixed",
         background: variables.diffViewerBackground,
         pre: {
             margin: 0,
-            whiteSpace: 'pre-wrap',
-            lineHeight: '1.6em',
-            width: 'fit-content'
+            whiteSpace: "pre-wrap",
+            lineHeight: "1.6em",
+            width: "fit-content",
         },
-        label: 'diff-container',
-        borderCollapse: 'collapse',
+        label: "diff-container",
+        borderCollapse: "collapse",
     });
     const lineContent = css({
-        overflow: 'hidden',
-        width: '100%'
+        overflow: "hidden",
+        width: "100%",
     });
     const contentText = css({
         color: variables.diffViewerColor,
-        whiteSpace: 'pre-wrap',
-        fontFamily: 'monospace',
-        textDecoration: 'none',
-        label: 'content-text',
+        whiteSpace: "pre-wrap",
+        fontFamily: "monospace",
+        lineBreak: "anywhere",
+        textDecoration: "none",
+        label: "content-text",
     });
     const unselectable = css({
-        userSelect: 'none',
-        label: 'unselectable',
+        userSelect: "none",
+        label: "unselectable",
+    });
+    const allExpandButton = css({
+        background: "transparent",
+        border: "none",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: 0,
+        label: "all-expand-button",
+        ":hover": {
+            fill: variables.addedGutterColor,
+        },
+        ":focus": {
+            outline: `1px ${variables.addedGutterColor} solid`,
+        },
     });
     const titleBlock = css({
         background: variables.diffViewerTitleBackground,
-        padding: '0.5em',
-        lineHeight: '1.4em',
+        padding: "0.5em",
+        lineHeight: "1.4em",
         height: "2.4em",
-        overflow: 'hidden',
-        width: '50%',
+        overflow: "hidden",
+        width: "50%",
         borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
-        label: 'title-block',
-        ':last-child': {
+        label: "title-block",
+        ":last-child": {
             borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
         },
         [`.${contentText}`]: {
@@ -131,7 +147,7 @@ export default (styleOverride, useDarkTheme = false, nonce = '') => {
     });
     const lineNumber = css({
         color: variables.gutterColor,
-        label: 'line-number',
+        label: "line-number",
     });
     const diffRemoved = css({
         background: variables.removedBackground,
@@ -142,7 +158,7 @@ export default (styleOverride, useDarkTheme = false, nonce = '') => {
         [`.${lineNumber}`]: {
             color: variables.removedGutterColor,
         },
-        label: 'diff-removed',
+        label: "diff-removed",
     });
     const diffAdded = css({
         background: variables.addedBackground,
@@ -153,86 +169,95 @@ export default (styleOverride, useDarkTheme = false, nonce = '') => {
         [`.${lineNumber}`]: {
             color: variables.addedGutterColor,
         },
-        label: 'diff-added',
+        label: "diff-added",
     });
     const diffChanged = css({
         background: variables.changedBackground,
         [`.${lineNumber}`]: {
             color: variables.gutterColor,
         },
-        label: 'diff-changed',
+        label: "diff-changed",
     });
     const wordDiff = css({
         padding: 2,
-        display: 'inline-flex',
+        display: "inline-flex",
         borderRadius: 4,
-        wordBreak: 'break-all',
-        label: 'word-diff',
+        wordBreak: "break-all",
+        label: "word-diff",
     });
     const wordAdded = css({
         background: variables.wordAddedBackground,
-        textDecoration: 'none',
-        label: 'word-added',
+        textDecoration: "none",
+        label: "word-added",
     });
     const wordRemoved = css({
         background: variables.wordRemovedBackground,
-        textDecoration: 'none',
-        label: 'word-removed',
+        textDecoration: "none",
+        label: "word-removed",
     });
     const codeFoldGutter = css({
         backgroundColor: variables.codeFoldGutterBackground,
-        label: 'code-fold-gutter',
-        minWidth: '50px',
-        width: '50px'
+        label: "code-fold-gutter",
+        minWidth: "50px",
+        width: "50px",
     });
     const codeFoldContentContainer = css({
-        padding: '8px 16px'
+        padding: "",
+    });
+    const codeFoldExpandButton = css({
+        background: variables.codeFoldBackground,
+        cursor: "pointer",
+        display: "inline",
+        margin: 0,
+        border: "none",
+        label: "code-fold-expand-button",
     });
     const codeFoldContent = css({
         color: variables.codeFoldContentColor,
-        label: 'code-fold-content',
+        fontFamily: "monospace",
+        label: "code-fold-content",
     });
     const block = css({
-        display: 'block',
-        width: '10px',
-        height: '10px',
-        backgroundColor: '#ddd',
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: variables.diffViewerTitleBorderColor
+        display: "block",
+        width: "10px",
+        height: "10px",
+        backgroundColor: "#ddd",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: variables.diffViewerTitleBorderColor,
     });
     const blockAddition = css({
-        backgroundColor: variables.wordAddedBackground
+        backgroundColor: variables.wordAddedBackground,
     });
     const blockDeletion = css({
-        backgroundColor: variables.wordRemovedBackground
+        backgroundColor: variables.wordRemovedBackground,
     });
     const codeFold = css({
         backgroundColor: variables.codeFoldBackground,
         height: 40,
         fontSize: 14,
-        alignItems: 'center',
-        userSelect: 'none',
+        alignItems: "center",
+        userSelect: "none",
         fontWeight: 700,
-        label: 'code-fold',
+        label: "code-fold",
         a: {
-            textDecoration: 'underline !important',
-            cursor: 'pointer',
+            textDecoration: "underline !important",
+            cursor: "pointer",
             pre: {
-                display: 'inline',
+                display: "inline",
             },
         },
     });
     const emptyLine = css({
         backgroundColor: variables.emptyLineBackground,
-        label: 'empty-line',
+        label: "empty-line",
     });
     const marker = css({
         width: 28,
         paddingLeft: 10,
         paddingRight: 10,
-        userSelect: 'none',
-        label: 'marker',
+        userSelect: "none",
+        label: "marker",
         [`&.${diffAdded}`]: {
             pre: {
                 color: variables.addedColor,
@@ -246,25 +271,25 @@ export default (styleOverride, useDarkTheme = false, nonce = '') => {
     });
     const highlightedLine = css({
         background: variables.highlightBackground,
-        label: 'highlighted-line',
+        label: "highlighted-line",
         [`.${wordAdded}, .${wordRemoved}`]: {
-            backgroundColor: 'initial',
+            backgroundColor: "initial",
         },
     });
     const highlightedGutter = css({
-        label: 'highlighted-gutter',
+        label: "highlighted-gutter",
     });
     const gutter = css({
-        userSelect: 'none',
+        userSelect: "none",
         minWidth: 50,
-        width: '50px',
-        padding: '0 10px',
-        whiteSpace: 'nowrap',
-        label: 'gutter',
-        textAlign: 'right',
+        width: "50px",
+        padding: "0 10px",
+        whiteSpace: "nowrap",
+        label: "gutter",
+        textAlign: "right",
         background: variables.gutterBackground,
-        '&:hover': {
-            cursor: 'pointer',
+        "&:hover": {
+            cursor: "pointer",
             background: variables.gutterBackgroundDark,
             pre: {
                 opacity: 1,
@@ -281,22 +306,22 @@ export default (styleOverride, useDarkTheme = false, nonce = '') => {
         },
         [`&.${highlightedGutter}`]: {
             background: variables.highlightGutterBackground,
-            '&:hover': {
+            "&:hover": {
                 background: variables.highlightGutterBackground,
             },
         },
     });
     const emptyGutter = css({
-        '&:hover': {
+        "&:hover": {
             background: variables.gutterBackground,
-            cursor: 'initial',
+            cursor: "initial",
         },
-        label: 'empty-gutter',
+        label: "empty-gutter",
     });
     const line = css({
-        verticalAlign: 'baseline',
-        label: 'line',
-        textDecoration: 'none'
+        verticalAlign: "baseline",
+        label: "line",
+        textDecoration: "none",
     });
     const column = css({});
     const defaultStyles = {
@@ -320,6 +345,7 @@ export default (styleOverride, useDarkTheme = false, nonce = '') => {
         wordRemoved,
         noSelect: unselectable,
         codeFoldGutter,
+        codeFoldExpandButton,
         codeFoldContentContainer,
         codeFold,
         emptyGutter,
@@ -330,6 +356,7 @@ export default (styleOverride, useDarkTheme = false, nonce = '') => {
         column,
         codeFoldContent,
         titleBlock,
+        allExpandButton,
     };
     const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => ({
         ...acc,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -19,6 +19,14 @@
     "Pranesh Ravi<praneshpranesh@gmail.com>",
     "Bart Riepe <bart@serial-experiments.com>"
   ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/cjs/src/index.d.ts",
+      "import": "./lib/esm/src/index.js",
+      "require": "./lib/cjs/src/index.js"
+    }
+  },
   "main": "lib/cjs/src/index",
   "module": "lib/esm/src/index",
   "typings": "lib/cjs/src/index",
@@ -28,43 +36,43 @@
     "publish:examples": "NODE_ENV=production pnpm run build:examples && gh-pages -d examples/dist -r $GITHUB_REPO_URL",
     "publish:examples:local": "NODE_ENV=production pnpm run build:examples && gh-pages -d examples/dist",
     "start:examples": "vite examples",
+    "dev": "vite dev examples",
     "test": "vitest",
-    "lint": "biome lint src/ test/",
-    "lint:fix": "biome lint --apply-unsafe src/ test/",
-    "prettier": "prettier --write ."
+    "check": "biome check src/ test/",
+    "check:fix": "biome check --write --unsafe src/ test/"
   },
   "dependencies": {
-    "@emotion/css": "^11.11.2",
-    "classnames": "^2.3.2",
+    "@emotion/css": "^11.13.5",
+    "@emotion/react": "^11.14.0",
+    "classnames": "^2.5.1",
     "diff": "^5.2.0",
     "memoize-one": "^6.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.5.3",
+    "@biomejs/biome": "^1.9.4",
     "@semantic-release/changelog": "6.0.1",
     "@semantic-release/git": "10.0.1",
     "@testing-library/react": "^13.4.0",
-    "@types/diff": "^5.0.6",
-    "@types/memoize-one": "^5.1.2",
-    "@types/node": "^20.11.17",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
-    "gh-pages": "^4.0.0",
-    "happy-dom": "^13.3.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "sass": "^1.70.0",
-    "semantic-release": "^19.0.5",
-    "ts-node": "^10.9.1",
-    "typescript": "^5.2.2",
-    "vite": "^5.1.1",
-    "vitest": "^1.2.2"
+    "@types/diff": "^5.2.3",
+    "@types/node": "^20.17.16",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "gh-pages": "^5.0.0",
+    "happy-dom": "^13.10.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.83.4",
+    "semantic-release": "^24.2.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14",
+    "vitest": "^3.0.4"
   },
   "peerDependencies": {
-    "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {
-    "node": ">= 8"
+    "node": ">= 16"
   }
 }

package/release.config.js

@@ -1,21 +1,21 @@
-module.exports = {
+export default {
   plugins: [
-    '@semantic-release/commit-analyzer',
-    '@semantic-release/release-notes-generator',
-    '@semantic-release/npm',
-    '@semantic-release/changelog',
-    '@semantic-release/github',
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    "@semantic-release/changelog",
+    "@semantic-release/github",
     [
-      '@semantic-release/git',
+      "@semantic-release/git",
       {
         message:
-          'chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
+          "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
         assets: [
-          'CHANGELOG.md',
-          'package.json',
-          'package-lock.json',
-          'pnpm-lock.yaml',
-          'npm-shrinkwrap.json',
+          "CHANGELOG.md",
+          "package.json",
+          "package-lock.json",
+          "pnpm-lock.yaml",
+          "npm-shrinkwrap.json",
         ],
       },
     ],

package/.travis.yml

@@ -1,13 +0,0 @@
-language: node_js
-node_js: 12
-before_script: yarn build
-after_success: './publish-examples.sh'
-deploy:
-  skip_cleanup: true
-  provider: npm
-  email: praneshpranesh@gmail.com
-  api_key:
-    secure: ytHogDV6wWZKY3eCgdJ5TFCz57llxTe6W1EuLBbg3TvHfpAmcL5XzT77T0lNTYY95XmABwGpf4qvqui1fXVoFqqSXVPSVt9I1aQ4gxBzxPKHGPV++wwgVOBfZErIlYPW4kcYJQvfemBDBfAMQS2u/0si5mZbeyVkvlnhHLnylsc1sJUGGnq9PJxwCagBd/DAhYYCU5d4a9psOwo6GnAwzs37rgVIb5oNhbtex0r1u5D4irweVz4V1TkwhMczw3v8t0d+I2REqjGkqLdKJOt9Q/Uqc7v34wIAy4Xng8zla7PKlzVNDlsA19en4DezJ/YRU3o6JxsMICRDyIRcwaebX2S7S35cif2gJRSF+LRCq2XdHvDAXPt6trQoeo9mSdq6+dL4/uYbhliUOyhzw84CRdY3+VrST1h7h8LAGODQzYJbQs20PkVL2527Bk+eS+tNCNpr/jSWG/iDO477j9jTGNVloF2IRHikbnZDFcF4ZrKE5RHEWSbQzyHkOOTgo5k+p6Doyv4jSgdLlnck2+f5n4Ocs/xh1c0UAphdW/mw/8lAv0+gpoL8f3rfN4AD5LYjjQ7xK5yO6RfIzsmAOqs7WCyY0ewXaPaP6Nz+Ne5Q2CKwVZiqj3qvd4o3aJodnquJ1iKzxbNHd/LFScEQxYSslyRluHrM+7DASPfccA7ePnE=
-  on:
-    tags: true
-    repo: praneshr/react-diff-viewer