Style refactors and Safari style support, introducing InlineDiffOptions as Parameter

src/components/DiffViewer/Diff.stories.tsx

@@ -43,6 +43,14 @@ const meta: Meta<StoryProps> = {
         category: "Main Configuration",
       },
     },
+    inlineDiffOptions: {
+      description: "CSS class name for the diff viewer container",
+      control: "text",
+      table: {
+        disable: true,
+        category: "Main Configuration",
+      },
+    },
     className: {
       description: "CSS class name for the diff viewer container",
       control: "text",
@@ -58,6 +66,11 @@ const meta: Meta<StoryProps> = {
       control: "text",
       table: { category: "Main Configuration" },
     },
+    miniMapWidth: {
+      description: "Width of Minimap (default 20)",
+      control: "number",
+      table: { category: "Main Configuration" },
+    },
     hideSearch: {
       description: "Whether to hide the search functionality",
       control: "boolean",
@@ -189,6 +202,7 @@ export const Primary: Story = {
     rightTitle: "Right Title",
     hideSearch: false,
     height: 500,
+    miniMapWidth: 20,
     oldValue: json1,
     newValue: json2,
 

src/components/DiffViewer/components/ViewerRow.tsx

@@ -1,4 +1,4 @@
-import type { DiffResult } from "json-diff-kit";
+import type { DiffResult, InlineDiffOptions } from "json-diff-kit";
 import type { ListChildComponentProps } from "react-window";
 
 import { Viewer } from "json-diff-kit";
@@ -16,8 +16,9 @@ function ViewerRow({
   rightDiff: DiffRowOrCollapsed[];
   onExpand: (segmentIndex: number) => void;
   searchTerm?: string;
+  inlineDiffOptions?: InlineDiffOptions;
 }>) {
-  const { onExpand, searchTerm } = data;
+  const { onExpand, searchTerm, inlineDiffOptions } = data;
   const originalLeftLine = data.leftDiff[index];
   const originalRightLine = data.rightDiff[index];
 
@@ -37,12 +38,12 @@ function ViewerRow({
   return (
     <div style={style}>
       <Viewer
-        indent={1}
+        indent={4}
         className={`${DIFF_VIEWER_CLASS} ${searchTerm ? "has-search" : ""}`}
         lineNumbers
         diff={[[leftLine], [rightLine]]}
         highlightInlineDiff
-        inlineDiffOptions={{ mode: "word" }}
+        inlineDiffOptions={{ mode: "char", ...inlineDiffOptions }}
         syntaxHighlight={{ theme: "monokai" }}
       />
     </div>

src/components/DiffViewer/components/VirtualizedDiffViewer.tsx

@@ -27,6 +27,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
   differOptions,
   className,
   miniMapWidth,
+  inlineDiffOptions,
 }) => {
   const listRef = useRef<List>(null);
   const [scrollTop, setScrollTop] = useState(0);
@@ -149,6 +150,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
       rightDiff: rightView,
       onExpand: handleExpand,
       searchTerm: searchState.term,
+      inlineDiffOptions,
     }),
     [leftView, rightView, handleExpand, searchState.term],
   );

src/components/DiffViewer/styles/JsonDiffCustomTheme.css

@@ -35,25 +35,25 @@
   }
 }
 
-.diff-viewer-container {
-  button {
-    border-radius: 4px;
-    border: 1px solid transparent;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    color: white;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    transition: border-color 0.25s;
-  }
-  button:hover {
-    border-color: #649dffab;
-  }
-  button:focus,
-  button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-  }
+.diff-viewer-container button {
+  border-radius: 4px;
+  border: 1px solid transparent;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  color: white;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+.diff-viewer-container button:hover {
+  border-color: #649dffab;
+}
+
+.diff-viewer-container button:focus,
+diff-viewer-container button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
 }
 
 .json-diff-header {
@@ -145,14 +145,14 @@
   border-radius: 2px;
 }
 
-.json-diff-viewer.json-diff-viewer-theme-custom .line-number {
-  color: #999;
-}
-
 .json-diff-viewer.json-diff-viewer-theme-custom tr td {
-  max-width: 260px;
-  width: 300px !important;
   vertical-align: unset;
+  padding: 0;
+}
+
+.json-diff-viewer.json-diff-viewer-theme-custom tr td.line-number {
+  color: #999;
+  padding: 2px;
 }
 
 .json-diff-viewer.json-diff-viewer-theme-custom tr td pre {
@@ -162,11 +162,23 @@
   overflow: hidden;
   margin: 0;
   font-size: 12px;
+  min-width: 300px;
   line-height: var(--diff-row-height);
   white-space: pre-wrap;
   word-break: break-all;
 }
 
+.json-diff-viewer.json-diff-viewer-theme-custom tr td pre span.inline-diff-add {
+  background: rgba(0, 0, 0, 0.08);
+  text-decoration: underline;
+  word-break: break-all;
+}
+.json-diff-viewer.json-diff-viewer-theme-custom tr td pre span.inline-diff-remove {
+  background: rgba(0, 0, 0, 0.08);
+  text-decoration: line-through;
+  word-break: break-all;
+}
+
 .json-diff-viewer.json-diff-viewer-theme-custom tr:hover {
   background: #53535f54;
 }
@@ -191,7 +203,12 @@
   padding: 0 4px;
   border-left: 0;
   border-bottom: none;
+}
+
+.json-diff-viewer.json-diff-viewer-theme-custom tr td.line-number {
   max-width: 30px;
+  min-width: 30px;
+  width: 30px !important;
 }
 
 .json-diff-viewer.json-diff-viewer-theme-custom tr.expand-line td {

src/components/DiffViewer/types/index.ts

@@ -1,4 +1,4 @@
-import type { DifferOptions, DiffResult } from "json-diff-kit";
+import type { DifferOptions, DiffResult, InlineDiffOptions } from "json-diff-kit";
 
 export type DiffRow = {
   originalIndex: number;
@@ -44,6 +44,7 @@ export type VirtualizedDiffViewerProps = {
   differOptions?: DifferOptions;
   className?: string;
   miniMapWidth?: number;
+  inlineDiffOptions?: InlineDiffOptions;
 };
 
 export type DiffMinimapProps = {