react-diff-viewer-continued 4.0.6 → 4.1.1

package/lib/esm/src/styles.js

@@ -36,15 +36,15 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
             ...{
                 diffViewerBackground: "#2e303c",
                 diffViewerColor: "#FFF",
-                addedBackground: "#044B53",
+                addedBackground: "#2ea04326",
                 addedColor: "white",
-                removedBackground: "#632F34",
+                removedBackground: "#f851491a",
                 removedColor: "white",
                 changedBackground: "#3e302c",
-                wordAddedBackground: "#055d67",
-                wordRemovedBackground: "#7d383f",
-                addedGutterBackground: "#034148",
-                removedGutterBackground: "#632b30",
+                wordAddedBackground: "#2ea04366",
+                wordRemovedBackground: "#f8514966",
+                addedGutterBackground: "#3fb9504d",
+                removedGutterBackground: "#f851494d",
                 gutterBackground: "#2c2f3a",
                 gutterBackgroundDark: "#262933",
                 highlightBackground: "#2a3967",
@@ -52,12 +52,12 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
                 codeFoldGutterBackground: "#262831",
                 codeFoldBackground: "#262831",
                 emptyLineBackground: "#363946",
-                gutterColor: "#666c87",
-                addedGutterColor: "#8c8c8c",
-                removedGutterColor: "#8c8c8c",
-                codeFoldContentColor: "#656a8b",
+                gutterColor: "#f0f6fc",
+                addedGutterColor: "#f0f6fc",
+                removedGutterColor: "#f0f6fc",
+                codeFoldContentColor: "#9198a1",
                 diffViewerTitleBackground: "#2f323e",
-                diffViewerTitleColor: "#757a9b",
+                diffViewerTitleColor: "#f0f6fc",
                 diffViewerTitleBorderColor: "#353846",
             },
             ...(overrideVariables.dark || {}),
@@ -67,11 +67,18 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const { css, cx } = createEmotion({ key: "react-diff", nonce });
     const content = css({
         width: "auto",
+        overflow: "hidden",
         label: "content",
     });
     const splitView = css({
         label: "split-view",
     });
+    const stickyHeader = css({
+        position: "sticky",
+        top: 0,
+        zIndex: 2,
+        label: "sticky-header",
+    });
     const summary = css({
         background: variables.diffViewerTitleBackground,
         color: variables.diffViewerTitleColor,
@@ -80,13 +87,19 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         alignItems: "center",
         gap: "0.5em",
         fontFamily: "monospace",
+        fontSize: 12,
         fill: variables.diffViewerTitleColor,
     });
+    const columnHeaders = css({
+        display: "flex",
+        label: "column-headers",
+    });
     const diffContainer = css({
         width: "100%",
         minWidth: "1000px",
         overflowX: "auto",
         tableLayout: "fixed",
+        fontSize: 12,
         background: variables.diffViewerBackground,
         pre: {
             margin: 0,
@@ -96,6 +109,9 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         },
         label: "diff-container",
         borderCollapse: "collapse",
+        "@media (max-width: 768px)": {
+            minWidth: "unset",
+        },
     });
     const lineContent = css({
         overflow: "hidden",
@@ -113,6 +129,16 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         userSelect: "none",
         label: "unselectable",
     });
+    const noWrap = css({
+        label: "no-wrap",
+        pre: {
+            whiteSpace: "pre",
+        },
+        [`.${contentText}`]: {
+            whiteSpace: "pre",
+            lineBreak: "auto",
+        },
+    });
     const allExpandButton = css({
         background: "transparent",
         border: "none",
@@ -137,8 +163,13 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         overflow: "hidden",
         width: "50%",
         borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
+        boxSizing: "border-box",
+        fontSize: 12,
         label: "title-block",
-        ":last-child": {
+        ":only-child": {
+            width: "100%",
+        },
+        ":last-child:not(:only-child)": {
             borderLeft: `1px solid ${variables.diffViewerTitleBorderColor}`,
         },
         [`.${contentText}`]: {
@@ -179,20 +210,16 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         label: "diff-changed",
     });
     const wordDiff = css({
-        padding: 2,
-        display: "inline-flex",
-        borderRadius: 4,
-        wordBreak: "break-all",
+        display: "inline",
+        textDecoration: "none",
         label: "word-diff",
     });
     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({
@@ -200,6 +227,8 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         label: "code-fold-gutter",
         minWidth: "50px",
         width: "50px",
+        textAlign: "center",
+        fill: variables.codeFoldContentColor,
     });
     const codeFoldContentContainer = css({
         padding: "",
@@ -210,6 +239,7 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         display: "inline",
         margin: 0,
         border: "none",
+        fill: variables.codeFoldContentColor,
         label: "code-fold-expand-button",
     });
     const codeFoldContent = css({
@@ -234,12 +264,20 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
     });
     const codeFold = css({
         backgroundColor: variables.codeFoldBackground,
-        height: 40,
-        fontSize: 14,
+        fontSize: 12,
         alignItems: "center",
         userSelect: "none",
         fontWeight: 700,
+        cursor: "pointer",
         label: "code-fold",
+        "&:hover": {
+            color: variables.diffViewerColor,
+            fill: variables.diffViewerColor,
+            "& *": {
+                color: variables.diffViewerColor,
+                fill: variables.diffViewerColor,
+            },
+        },
         a: {
             textDecoration: "underline !important",
             cursor: "pointer",
@@ -286,7 +324,8 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         padding: "0 10px",
         whiteSpace: "nowrap",
         label: "gutter",
-        textAlign: "right",
+        textAlign: "center",
+        color: variables.gutterColor,
         background: variables.gutterBackground,
         "&:hover": {
             cursor: "pointer",
@@ -297,6 +336,8 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         },
         pre: {
             opacity: 0.5,
+            textAlign: "center",
+            width: "100%",
         },
         [`&.${diffAdded}`]: {
             background: variables.addedGutterBackground,
@@ -344,6 +385,7 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         blockDeletion,
         wordRemoved,
         noSelect: unselectable,
+        noWrap,
         codeFoldGutter,
         codeFoldExpandButton,
         codeFoldContentContainer,
@@ -355,6 +397,8 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         content,
         column,
         codeFoldContent,
+        stickyHeader,
+        columnHeaders,
         titleBlock,
         allExpandButton,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "4.0.6",
+  "version": "4.1.1",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -13,7 +13,7 @@
     "react-component",
     "ui"
   ],
-  "repository": "git@github.com:aeolun/react-diff-viewer-continued.git",
+  "repository": "https://github.com/Aeolun/react-diff-viewer-continued",
   "license": "MIT",
   "authors": [
     "Pranesh Ravi<praneshpranesh@gmail.com>",
@@ -30,43 +30,32 @@
   "main": "lib/cjs/src/index",
   "module": "lib/esm/src/index",
   "typings": "lib/cjs/src/index",
-  "scripts": {
-    "build": "tsc --project tsconfig.json && tsc --project tsconfig.esm.json",
-    "build:examples": "vite build examples",
-    "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",
-    "check": "biome check src/ test/",
-    "check:fix": "biome check --write --unsafe src/ test/"
-  },
   "dependencies": {
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "classnames": "^2.5.1",
-    "diff": "^5.2.0",
+    "diff": "^8.0.3",
+    "js-yaml": "^4.1.1",
     "memoize-one": "^6.0.0"
   },
   "devDependencies": {
-    "@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.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",
+    "@biomejs/biome": "^2.3.14",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.11",
+    "@types/react-dom": "^19.2.3",
+    "gh-pages": "^6.3.0",
+    "happy-dom": "^20.5.0",
+    "just-release": "^0.7.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "sass": "^1.97.3",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.3",
-    "vite": "^5.4.14",
-    "vitest": "^3.0.4"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -74,5 +63,16 @@
   },
   "engines": {
     "node": ">= 16"
+  },
+  "scripts": {
+    "build": "tsc --project tsconfig.json && tsc --project tsconfig.esm.json && sed -i 's/computeWorker\\.ts/computeWorker.js/g' lib/cjs/src/compute-lines.js lib/esm/src/compute-lines.js",
+    "build:examples": "vite build examples",
+    "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",
+    "check": "biome check src/ test/",
+    "check:fix": "biome check --write --unsafe src/ test/"
   }
-}
+}