react-diff-viewer-continued 3.2.4 → 3.2.6

package/.all-contributorsrc

@@ -23,6 +23,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "KimBiYam",
+      "name": "Chang Hyun Kim",
+      "avatar_url": "https://avatars.githubusercontent.com/u/59679962?v=4",
+      "profile": "http://kimbiyam.me",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.2.6](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.5...v3.2.6) (2023-03-02)
+
+
+### Bug Fixes
+
+* release for chore fix ([9775afa](https://github.com/aeolun/react-diff-viewer-continued/commit/9775afac2388942d97c839954186eb5b4fd64c3c))
+
+## [3.2.5](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.4...v3.2.5) (2023-01-23)
+
+
+### Bug Fixes
+
+* correctly break strings for long values so size remains within bounds ([cfa5de1](https://github.com/aeolun/react-diff-viewer-continued/commit/cfa5de1905644c34152dc8a692191d1e32410353))
+
 ## [3.2.4](https://github.com/aeolun/react-diff-viewer-continued/compare/v3.2.3...v3.2.4) (2022-12-23)
 
 

package/README.md

@@ -3,7 +3,7 @@
 <br/>
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [![npm version](https://img.shields.io/npm/v/react-diff-viewer-continued)](https://www.npmjs.com/package/react-diff-viewer-continued)
@@ -376,8 +376,9 @@ Check package.json for more build scripts.
 <table>
   <tbody>
     <tr>
-      <td align="center"><a href="https://github.com/ericmorgan1"><img src="https://avatars.githubusercontent.com/u/10346191?v=4?s=100" width="100px;" alt="Eric M."/><br /><sub><b>Eric M.</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=ericmorgan1" title="Code">💻</a></td>
-      <td align="center"><a href="https://github.com/spyroid"><img src="https://avatars.githubusercontent.com/u/844495?v=4?s=100" width="100px;" alt="Andrei Kovalevsky"/><br /><sub><b>Andrei Kovalevsky</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=spyroid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/ericmorgan1"><img src="https://avatars.githubusercontent.com/u/10346191?v=4?s=100" width="100px;" alt="Eric M."/><br /><sub><b>Eric M.</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=ericmorgan1" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/spyroid"><img src="https://avatars.githubusercontent.com/u/844495?v=4?s=100" width="100px;" alt="Andrei Kovalevsky"/><br /><sub><b>Andrei Kovalevsky</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=spyroid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://kimbiyam.me"><img src="https://avatars.githubusercontent.com/u/59679962?v=4?s=100" width="100px;" alt="Chang Hyun Kim"/><br /><sub><b>Chang Hyun Kim</b></sub></a><br /><a href="https://github.com/Aeolun/react-diff-viewer-continued/commits?author=KimBiYam" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/lib/styles.d.ts

@@ -1,4 +1,4 @@
-import { Interpolation } from 'emotion';
+import { CSSInterpolation } from '@emotion/css';
 export interface ReactDiffViewerStyles {
     diffContainer?: string;
     diffRemoved?: string;
@@ -55,27 +55,27 @@ export interface ReactDiffViewerStylesOverride {
         dark?: ReactDiffViewerStylesVariables;
         light?: ReactDiffViewerStylesVariables;
     };
-    diffContainer?: Interpolation;
-    diffRemoved?: Interpolation;
-    diffAdded?: Interpolation;
-    diffChanged?: Interpolation;
-    marker?: Interpolation;
-    emptyGutter?: Interpolation;
-    highlightedLine?: Interpolation;
-    lineNumber?: Interpolation;
-    highlightedGutter?: Interpolation;
-    contentText?: Interpolation;
-    gutter?: Interpolation;
-    line?: Interpolation;
-    wordDiff?: Interpolation;
-    wordAdded?: Interpolation;
-    wordRemoved?: Interpolation;
-    codeFoldGutter?: Interpolation;
-    codeFold?: Interpolation;
-    emptyLine?: Interpolation;
-    content?: Interpolation;
-    titleBlock?: Interpolation;
-    splitView?: Interpolation;
+    diffContainer?: CSSInterpolation;
+    diffRemoved?: CSSInterpolation;
+    diffAdded?: CSSInterpolation;
+    diffChanged?: CSSInterpolation;
+    marker?: CSSInterpolation;
+    emptyGutter?: CSSInterpolation;
+    highlightedLine?: CSSInterpolation;
+    lineNumber?: CSSInterpolation;
+    highlightedGutter?: CSSInterpolation;
+    contentText?: CSSInterpolation;
+    gutter?: CSSInterpolation;
+    line?: CSSInterpolation;
+    wordDiff?: CSSInterpolation;
+    wordAdded?: CSSInterpolation;
+    wordRemoved?: CSSInterpolation;
+    codeFoldGutter?: CSSInterpolation;
+    codeFold?: CSSInterpolation;
+    emptyLine?: CSSInterpolation;
+    content?: CSSInterpolation;
+    titleBlock?: CSSInterpolation;
+    splitView?: CSSInterpolation;
 }
 declare const _default: (styleOverride: ReactDiffViewerStylesOverride, useDarkTheme?: boolean) => ReactDiffViewerStyles;
 export default _default;

package/lib/styles.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const emotion_1 = require("emotion");
+const css_1 = require("@emotion/css");
 // eslint-disable-next-line import/no-anonymous-default-export
 exports.default = (styleOverride, useDarkTheme = false) => {
     const { variables: overrideVariables = {} } = styleOverride, styles = __rest(styleOverride, ["variables"]);
@@ -72,17 +72,17 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         }, (overrideVariables.dark || {})),
     };
     const variables = useDarkTheme ? themeVariables.dark : themeVariables.light;
-    const content = (0, emotion_1.css)({
+    const content = (0, css_1.css)({
         width: '100%',
         label: 'content',
     });
-    const splitView = (0, emotion_1.css)({
+    const splitView = (0, css_1.css)({
         [`.${content}`]: {
             width: '50%',
         },
         label: 'split-view',
     });
-    const diffContainer = (0, emotion_1.css)({
+    const diffContainer = (0, css_1.css)({
         width: '100%',
         background: variables.diffViewerBackground,
         pre: {
@@ -93,15 +93,15 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         label: 'diff-container',
         borderCollapse: 'collapse',
     });
-    const codeFoldContent = (0, emotion_1.css)({
+    const codeFoldContent = (0, css_1.css)({
         color: variables.codeFoldContentColor,
         label: 'code-fold-content',
     });
-    const contentText = (0, emotion_1.css)({
+    const contentText = (0, css_1.css)({
         color: variables.diffViewerColor,
         label: 'content-text',
     });
-    const titleBlock = (0, emotion_1.css)({
+    const titleBlock = (0, css_1.css)({
         background: variables.diffViewerTitleBackground,
         padding: 10,
         borderBottom: `1px solid ${variables.diffViewerTitleBorderColor}`,
@@ -113,11 +113,11 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             color: variables.diffViewerTitleColor,
         },
     });
-    const lineNumber = (0, emotion_1.css)({
+    const lineNumber = (0, css_1.css)({
         color: variables.gutterColor,
         label: 'line-number',
     });
-    const diffRemoved = (0, emotion_1.css)({
+    const diffRemoved = (0, css_1.css)({
         background: variables.removedBackground,
         color: variables.removedColor,
         pre: {
@@ -128,7 +128,7 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         },
         label: 'diff-removed',
     });
-    const diffAdded = (0, emotion_1.css)({
+    const diffAdded = (0, css_1.css)({
         background: variables.addedBackground,
         color: variables.addedColor,
         pre: {
@@ -139,32 +139,33 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         },
         label: 'diff-added',
     });
-    const diffChanged = (0, emotion_1.css)({
+    const diffChanged = (0, css_1.css)({
         background: variables.changedBackground,
         [`.${lineNumber}`]: {
             color: variables.gutterColor,
         },
         label: 'diff-changed',
     });
-    const wordDiff = (0, emotion_1.css)({
+    const wordDiff = (0, css_1.css)({
         padding: 2,
         display: 'inline-flex',
-        borderRadius: 1,
+        borderRadius: 4,
+        wordBreak: 'break-all',
         label: 'word-diff',
     });
-    const wordAdded = (0, emotion_1.css)({
+    const wordAdded = (0, css_1.css)({
         background: variables.wordAddedBackground,
         label: 'word-added',
     });
-    const wordRemoved = (0, emotion_1.css)({
+    const wordRemoved = (0, css_1.css)({
         background: variables.wordRemovedBackground,
         label: 'word-removed',
     });
-    const codeFoldGutter = (0, emotion_1.css)({
+    const codeFoldGutter = (0, css_1.css)({
         backgroundColor: variables.codeFoldGutterBackground,
         label: 'code-fold-gutter',
     });
-    const codeFold = (0, emotion_1.css)({
+    const codeFold = (0, css_1.css)({
         backgroundColor: variables.codeFoldBackground,
         height: 40,
         fontSize: 14,
@@ -178,11 +179,11 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             },
         },
     });
-    const emptyLine = (0, emotion_1.css)({
+    const emptyLine = (0, css_1.css)({
         backgroundColor: variables.emptyLineBackground,
         label: 'empty-line',
     });
-    const marker = (0, emotion_1.css)({
+    const marker = (0, css_1.css)({
         width: 25,
         paddingLeft: 10,
         paddingRight: 10,
@@ -199,17 +200,17 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             },
         },
     });
-    const highlightedLine = (0, emotion_1.css)({
+    const highlightedLine = (0, css_1.css)({
         background: variables.highlightBackground,
         label: 'highlighted-line',
         [`.${wordAdded}, .${wordRemoved}`]: {
             backgroundColor: 'initial',
         },
     });
-    const highlightedGutter = (0, emotion_1.css)({
+    const highlightedGutter = (0, css_1.css)({
         label: 'highlighted-gutter',
     });
-    const gutter = (0, emotion_1.css)({
+    const gutter = (0, css_1.css)({
         userSelect: 'none',
         minWidth: 50,
         padding: '0 10px',
@@ -240,14 +241,14 @@ exports.default = (styleOverride, useDarkTheme = false) => {
             },
         },
     });
-    const emptyGutter = (0, emotion_1.css)({
+    const emptyGutter = (0, css_1.css)({
         '&:hover': {
             background: variables.gutterBackground,
             cursor: 'initial',
         },
         label: 'empty-gutter',
     });
-    const line = (0, emotion_1.css)({
+    const line = (0, css_1.css)({
         verticalAlign: 'baseline',
         label: 'line',
     });
@@ -276,11 +277,11 @@ exports.default = (styleOverride, useDarkTheme = false) => {
         titleBlock,
     };
     const computerOverrideStyles = Object.keys(styles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
-        [key]: (0, emotion_1.css)(styles[key]),
+        [key]: (0, css_1.css)(styles[key]),
     })), {});
     return Object.keys(defaultStyles).reduce((acc, key) => (Object.assign(Object.assign({}, acc), {
         [key]: computerOverrideStyles[key]
-            ? (0, emotion_1.cx)(defaultStyles[key], computerOverrideStyles[key])
+            ? (0, css_1.cx)(defaultStyles[key], computerOverrideStyles[key])
             : defaultStyles[key],
     })), {});
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-diff-viewer-continued",
-  "version": "3.2.4",
+  "version": "3.2.6",
   "private": false,
   "description": "Continuation of a simple and beautiful text diff viewer component made with diff and React",
   "keywords": [
@@ -35,9 +35,9 @@
     "prettier": "prettier --write ."
   },
   "dependencies": {
+    "@emotion/css": "^11.10.5",
     "classnames": "^2.3.1",
     "diff": "^5.1.0",
-    "emotion": "^10.0.27",
     "memoize-one": "^6.0.0",
     "prop-types": "^15.8.1"
   },