react-diff-viewer-continued 4.3.0 → 4.4.0

package/lib/esm/src/styles.js

@@ -142,6 +142,30 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         textDecoration: "none",
         label: "content-text",
     });
+    // Line content is laid out as two flex items: a fixed indent column carrying the
+    // line's leading whitespace, and a flexible body that wraps. This gives wrapped
+    // continuation lines a hanging indent — they align under the first character of
+    // the line's content instead of falling back to the cell's left edge.
+    const contentFlex = css({
+        display: "flex",
+        alignItems: "baseline",
+        label: "content-flex",
+    });
+    // The indent column. `pre` + `flex-shrink: 0` keep the whitespace intact and
+    // prevent it from ever collapsing or wrapping, so it sizes exactly to the indent.
+    const lineIndent = css({
+        whiteSpace: "pre",
+        wordBreak: "keep-all",
+        flex: "0 0 auto",
+        label: "line-indent",
+    });
+    // The wrapping body. `min-width: 0` is required so a long unbreakable run wraps
+    // within the flex item instead of overflowing the row.
+    const lineBody = css({
+        flex: "1 1 auto",
+        minWidth: 0,
+        label: "line-body",
+    });
     const unselectable = css({
         userSelect: "none",
         label: "unselectable",
@@ -252,14 +276,30 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
     const codeFoldContentContainer = css({
         // Neutralize host `:where(th,td){ padding }` on the fold content cell.
         padding: 0,
+        // Clip the button to the cell box so any residual misalignment can't bleed into the row flow.
+        overflow: "hidden",
+        // `diffContainer`'s `& td` isolation reset pins vertical-align:baseline at specificity
+        // (0,2,0), which out-ranks this single class and drags the fold cell back onto the row
+        // baseline (the ~2-3px offset). Self-chain the selector to (0,3,0) so the fold cell's
+        // middle alignment wins over that reset.
+        "&&&": {
+            verticalAlign: "middle",
+        },
         label: "code-fold-content-container",
     });
     const codeFoldExpandButton = css({
         background: variables.codeFoldBackground,
         cursor: "pointer",
-        display: "inline",
+        // `display: inline` puts the button in the cell's line box, so baseline/line-height
+        // metrics nudge it ~2-3px down from the cell top and it spills past the bottom.
+        // A block box leaves the inline formatting context and sits flush.
+        display: "block",
         margin: 0,
+        padding: 0,
         border: "none",
+        font: "inherit",
+        lineHeight: "inherit",
+        textAlign: "left",
         fill: variables.codeFoldContentColor,
         label: "code-fold-expand-button",
     });
@@ -291,6 +331,14 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         fontWeight: 700,
         cursor: "pointer",
         label: "code-fold",
+        // The fold row has empty/classless placeholder cells (spacer gutters, line-number
+        // stand-ins) that pin no padding of their own. Host `:where(th,td){ padding }`
+        // (daisyui `.table`) inflates their vertical padding and stretches the fold row
+        // out of line with the code rows. Zero block padding on every cell in the row.
+        "& td": {
+            paddingTop: 0,
+            paddingBottom: 0,
+        },
         "&:hover": {
             color: variables.diffViewerColor,
             fill: variables.diffViewerColor,
@@ -424,6 +472,9 @@ export default (styleOverride, useDarkTheme = false, nonce = "") => {
         emptyLine,
         lineNumber,
         contentText,
+        contentFlex,
+        lineIndent,
+        lineBody,
         content,
         column,
         codeFoldContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -39,7 +39,8 @@
     "classnames": "^2.5.1",
     "diff": "^9.0.0",
     "js-yaml": "^4.2.0",
-    "memoize-one": "^6.0.0"
+    "memoize-one": "^6.0.0",
+    "refractor": "^5.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.12",
@@ -47,14 +48,14 @@
     "@testing-library/react": "^16.3.2",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^25.6.0",
-    "@types/react": "^19.2.14",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "esbuild": "^0.28.1",
     "gh-pages": "^6.3.0",
     "happy-dom": "^20.10.6",
     "just-release": "^0.13.5",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "sass": "^1.99.0",
     "ts-node": "^10.9.2",
     "typescript": "^6.0.3",