fix: review notes applied

Author: utkuakyuz

demo/src/App.tsx

@@ -36,6 +36,7 @@ export default function App() {
     ignoreCaseForKey: false,
     recursiveEqual: false,
     preserveKeyOrder: undefined as DifferOptions["preserveKeyOrder"],
+    inlineDiffMode: "word",
   });
 
   const updateConfig = (key: keyof Config, value: (Config)[keyof Config]) => {
@@ -218,6 +219,7 @@ export default function App() {
             height={config.height}
             miniMapWidth={config.miniMapWidth}
             hideSearch={config.hideSearch}
+            inlineDiffOptions={{ mode: config.inlineDiffMode }}
             oldValue={parsedOldValue}
             newValue={parsedNewValue}
             differOptions={differOptions}

demo/src/components/Sidebar.tsx

@@ -152,6 +152,20 @@ function Sidebar(props: Props) {
           </label>
         </div>
 
+        <div className="form-group">
+          <label className="form-label">
+            Inline Diff Method
+            <select
+              className="form-select"
+              value={config.inlineDiffMode}
+              onChange={e => updateConfig("inlineDiffMode", e.target.value)}
+            >
+              <option value="char">Character</option>
+              <option value="word">Word</option>
+            </select>
+          </label>
+        </div>
+
         <div className="form-group">
           <label className="form-label">
             Array Diff Method

demo/src/types/index.ts

@@ -19,4 +19,5 @@ export type Config = {
   ignoreCaseForKey: boolean;
   recursiveEqual: boolean;
   preserveKeyOrder: DifferOptions["preserveKeyOrder"];
+  inlineDiffMode: "word" | "char";
 };

src/components/DiffViewer/components/DiffMinimap.tsx

@@ -4,7 +4,7 @@ import type { DiffMinimapProps } from "../types";
 
 import { useDragScroll } from "../hooks/useDragScroll";
 import { useMinimapDraw } from "../hooks/useMinimapDraw";
-import { getRowHeightFromCSS } from "../utils/constants";
+import { DEFAULT_HEIGHT, DEFAULT_MINIMAP_WIDTH, getRowHeightFromCSS } from "../utils/constants";
 
 const MINIMAP_HOVER_SCROLL_COLOR = "#7B7B7Bcc";
 
@@ -37,7 +37,7 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({
   }, [height, leftDiff.length, rightDiff.length]);
 
   const { handleMouseDown, isDragging } = useDragScroll({
-    height: height || 380,
+    height: height || DEFAULT_HEIGHT,
     totalLines,
     viewportHeight,
     ROW_HEIGHT,
@@ -48,8 +48,8 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({
   const { drawMinimap, drawScrollBox } = useMinimapDraw({
     canvasRef,
     containerRef,
-    height: height || 380,
-    miniMapWidth: miniMapWidth || 20,
+    height: height || DEFAULT_HEIGHT,
+    miniMapWidth: miniMapWidth || DEFAULT_MINIMAP_WIDTH,
     leftDiff,
     rightDiff,
     currentScrollTop,

src/components/DiffViewer/components/SearchboxHolder.tsx

@@ -14,33 +14,31 @@ function SearchboxHolder({ searchState, handleSearch, navigateMatch, hideSearch
     return null;
 
   return (
-    <div>
-      <div className="search-container">
-        <div className="search-input-container">
-          <span role="img" aria-label="search"><SearchIcon /></span>
-          <input
-            type="text"
-            placeholder="Search in JSON..."
-            value={searchState.term}
-            onChange={e => handleSearch(e.target.value)}
-          />
-        </div>
-        {searchState.results.length > 0 && (
-          <div className="search-results">
-            <span>
-              {searchState.currentIndex + 1}
-              {" "}
-              of
-              {" "}
-              {searchState.results.length}
-              {" "}
-              matches
-            </span>
-            <button onClick={() => navigateMatch("prev")}>Previous</button>
-            <button onClick={() => navigateMatch("next")}>Next</button>
-          </div>
-        )}
+    <div className="search-container">
+      <div className="search-input-container">
+        <span role="img" aria-label="search"><SearchIcon /></span>
+        <input
+          type="text"
+          placeholder="Search in JSON..."
+          value={searchState.term}
+          onChange={e => handleSearch(e.target.value)}
+        />
       </div>
+      {searchState.results.length > 0 && (
+        <div className="search-results">
+          <span>
+            {searchState.currentIndex + 1}
+            {" "}
+            of
+            {" "}
+            {searchState.results.length}
+            {" "}
+            matches
+          </span>
+          <button onClick={() => navigateMatch("prev")}>Previous</button>
+          <button onClick={() => navigateMatch("next")}>Next</button>
+        </div>
+      )}
     </div>
   );
 }

src/components/DiffViewer/components/VirtualDiffGrid.tsx

@@ -12,16 +12,24 @@ import { useRowHeights } from "../hooks/useRowHeights";
 import { COLLAPSED_ROW_HEIGHT, getRowHeightFromCSS, isCollapsed } from "../utils/constants";
 import RowRendererGrid from "../utils/json-diff/row-renderer-grid";
 
+type ListDataType = {
+  leftDiff: DiffRowOrCollapsed[];
+  rightDiff: DiffRowOrCollapsed[];
+  onExpand: (segmentIndex: number) => void;
+  inlineDiffOptions?: InlineDiffOptions;
+};
+
 type VirtualDiffGridProps = {
   leftDiff: DiffRowOrCollapsed[];
   rightDiff: DiffRowOrCollapsed[];
   outerRef: React.RefObject<Node | null>;
-  listRef: React.RefObject<List<any>>;
+  listRef: React.RefObject<List<ListDataType>>;
   height: number;
   inlineDiffOptions?: InlineDiffOptions;
   className?: string;
   setScrollTop: Dispatch<React.SetStateAction<number>>;
   onExpand: (segmentIndex: number) => void;
+  overScanCount?: number;
 };
 
 const VirtualDiffGrid: React.FC<VirtualDiffGridProps> = ({
@@ -34,6 +42,7 @@ const VirtualDiffGrid: React.FC<VirtualDiffGridProps> = ({
   className,
   setScrollTop,
   onExpand,
+  overScanCount = 10,
 }) => {
   // Virtual List Data
   const listData = useMemo(
@@ -82,7 +91,7 @@ const VirtualDiffGrid: React.FC<VirtualDiffGridProps> = ({
         className="virtual-json-diff-list-container"
         itemCount={Math.max(leftDiff.length, rightDiff.length)}
         itemSize={dynamicRowHeights}
-        overscanCount={28}
+        overscanCount={overScanCount}
         itemData={listData}
         onScroll={({ scrollOffset }: ListOnScrollProps) => setScrollTop(scrollOffset)}
       >

src/components/DiffViewer/components/VirtualizedDiffViewer.tsx

@@ -27,6 +27,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
   className,
   miniMapWidth,
   inlineDiffOptions,
+  overScanCount,
 }) => {
   const outerRef = useRef<Node>(null);
   const listRef = useRef<List>(null);
@@ -121,6 +122,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
           leftDiff={leftView}
           rightDiff={rightView}
           height={height}
+          overScanCount={overScanCount}
           setScrollTop={setScrollTop}
           onExpand={handleExpand}
           className="virtual-json-diff-list-container"

src/components/DiffViewer/types/index.ts

@@ -46,6 +46,7 @@ export type VirtualizedDiffViewerProps = {
   className?: string;
   miniMapWidth?: number;
   inlineDiffOptions?: InlineDiffOptions;
+  overScanCount?: number;
 };
 
 export type DiffMinimapProps = {

src/components/DiffViewer/utils/constants.ts

@@ -4,6 +4,10 @@ export const DIFF_VIEWER_CLASS = "json-diff-viewer-theme-custom";
 
 export const DEFAULT_ROW_HEIGHT = 20; // safe fallback
 
+export const DEFAULT_HEIGHT = 380;
+
+export const DEFAULT_MINIMAP_WIDTH = 20;
+
 export function getRowHeightFromCSS(): number {
   if (typeof document === "undefined") {
     return DEFAULT_ROW_HEIGHT;
@@ -31,10 +35,5 @@ export function isCollapsed(line: any): line is { type: "collapsed"; segmentInde
 // Observe DOM changes in the diff viewer and update cells with the "empty-equal-cell" class
 // whenever new rows are rendered, ensuring virtualized/scroll-loaded cells are handled.
 export function equalEmptyLine(cell: DiffRow) {
-  if (cell.type === "equal" && cell.text.trim() === "") {
-    return "empty-equal-cell";
-  }
-  else {
-    return "";
-  }
+  return (cell.type === "equal" && cell.text.trim() === "") ? "empty-equal-cell" : "";
 }

src/components/DiffViewer/utils/json-diff/row-renderer-grid.tsx

@@ -23,17 +23,17 @@ ListChildComponentProps<{
   const { onExpand, inlineDiffOptions, leftDiff, rightDiff } = data;
 
   const leftPart = leftDiff[index];
-  const RightPart = rightDiff[index];
+  const rightPart = rightDiff[index];
 
   // Collapsed special row -> we will render as a grid-row with two expand cells
-  if (isCollapsed(leftPart) || isCollapsed(RightPart)) {
+  if (isCollapsed(leftPart) || isCollapsed(rightPart)) {
     const originalLeftLine = leftDiff[index];
 
     const handleExpand = useCallback((originalLeftLine: CollapsedLine) => {
       if (isCollapsed(originalLeftLine)) {
         onExpand(originalLeftLine.segmentIndex);
       }
-    }, [onExpand, originalLeftLine]);
+    }, [onExpand]);
 
     return (
       <div
@@ -67,12 +67,12 @@ ListChildComponentProps<{
   }
 
   const [lDiff, rDiff]
-    = leftPart.type === "modify" && RightPart.type === "modify"
-      ? getInlineDiff(leftPart.text, RightPart.text, inlineDiffOptions ?? { mode: "char" })
+    = leftPart.type === "modify" && rightPart.type === "modify"
+      ? getInlineDiff(leftPart.text, rightPart.text, inlineDiffOptions ?? { mode: "char" })
       : [[], []];
 
   const lTokens = syntaxHighlightLine(true, leftPart.text, 0);
-  const rTokens = syntaxHighlightLine(true, RightPart.text, 0);
+  const rTokens = syntaxHighlightLine(true, rightPart.text, 0);
 
   const lResult = mergeSegments(lTokens, lDiff);
   const rResult = mergeSegments(rTokens, rDiff);
@@ -119,14 +119,14 @@ ListChildComponentProps<{
         </pre>
       </div>
 
-      <div className={`cell line-${RightPart.type} line-number`} role="cell">
-        {RightPart.lineNumber}
+      <div className={`cell line-${rightPart.type} line-number`} role="cell">
+        {rightPart.lineNumber}
       </div>
 
-      <div className={`cell line-${RightPart.type} ${equalEmptyLine(RightPart)}`} role="cell">
+      <div className={`cell line-${rightPart.type} ${equalEmptyLine(rightPart)}`} role="cell">
         <pre>
-          {RightPart.text && indentChar.repeat(RightPart.level * indentSize)}
-          {renderInlineResult(RightPart.text, rResult, RightPart.comma)}
+          {rightPart.text && indentChar.repeat(rightPart.level * indentSize)}
+          {renderInlineResult(rightPart.text, rResult, rightPart.comma)}
         </pre>
       </div>
     </div>