feat: recreate diff viewer components and created new utils

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";
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "virtual-react-json-diff",
   "type": "module",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Fast, virtualized React component for visually comparing large JSON objects. Includes search, theming, and minimap.",
   "author": {
     "name": "Utku Akyüz"

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: height || DEFAULT_HEIGHT,
     totalLines,
     viewportHeight,
     ROW_HEIGHT,
@@ -48,8 +48,8 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({
   const { drawMinimap, drawScrollBox } = useMinimapDraw({
     canvasRef,
     containerRef,
-    height,
-    miniMapWidth,
+    height: height || DEFAULT_HEIGHT,
+    miniMapWidth: miniMapWidth || DEFAULT_MINIMAP_WIDTH,
     leftDiff,
     rightDiff,
     currentScrollTop,

src/components/DiffViewer/components/SearchboxHolder.tsx

@@ -0,0 +1,46 @@
+import type { SearchState } from "../types";
+
+import { SearchIcon } from "../../SearchIcon";
+
+type Props = {
+  searchState: SearchState;
+  handleSearch: (term: string) => void;
+  navigateMatch: (direction: "next" | "prev") => void;
+  hideSearch?: boolean;
+};
+
+function SearchboxHolder({ searchState, handleSearch, navigateMatch, hideSearch }: Props) {
+  if (hideSearch)
+    return null;
+
+  return (
+    <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>
+  );
+}
+
+export default SearchboxHolder;

src/components/DiffViewer/components/VirtualDiffGrid.tsx

@@ -0,0 +1,104 @@
+// VirtualDiffGrid.tsx
+import type { InlineDiffOptions } from "json-diff-kit";
+import type { Dispatch } from "react";
+import type { ListOnScrollProps } from "react-window";
+
+import React, { useCallback, useEffect, useMemo } from "react";
+import { VariableSizeList as List } from "react-window";
+
+import type { DiffRowOrCollapsed } from "../types";
+
+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<ListDataType>>;
+  height: number;
+  inlineDiffOptions?: InlineDiffOptions;
+  className?: string;
+  setScrollTop: Dispatch<React.SetStateAction<number>>;
+  onExpand: (segmentIndex: number) => void;
+  overScanCount?: number;
+};
+
+const VirtualDiffGrid: React.FC<VirtualDiffGridProps> = ({
+  leftDiff,
+  rightDiff,
+  outerRef,
+  listRef,
+  height,
+  inlineDiffOptions,
+  className,
+  setScrollTop,
+  onExpand,
+  overScanCount = 10,
+}) => {
+  // Virtual List Data
+  const listData = useMemo(
+    () => ({
+      leftDiff,
+      rightDiff,
+      onExpand,
+      inlineDiffOptions,
+    }),
+    [leftDiff, rightDiff, onExpand, inlineDiffOptions],
+  );
+
+  const classes = [
+    "json-diff-viewer",
+    `json-diff-viewer-theme-custom`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  // ROW HEIGHT CALCULATION
+  const ROW_HEIGHT = useMemo(() => getRowHeightFromCSS(), []);
+  const rowHeights = useRowHeights(leftDiff);
+  const dynamicRowHeights = useCallback(
+    (index: number) => {
+      const leftLine = leftDiff[index];
+      if (isCollapsed(leftLine))
+        return COLLAPSED_ROW_HEIGHT;
+      return (rowHeights[index] ?? 1) * ROW_HEIGHT;
+    },
+    [leftDiff, rowHeights],
+  );
+
+  useEffect(() => {
+    listRef.current?.resetAfterIndex(0, true);
+  }, [rowHeights]);
+
+  return (
+    <div className={classes}>
+      <List
+        height={height}
+        width="100%"
+        style={{ alignItems: "start" }}
+        outerRef={outerRef}
+        ref={listRef}
+        className="virtual-json-diff-list-container"
+        itemCount={Math.max(leftDiff.length, rightDiff.length)}
+        itemSize={dynamicRowHeights}
+        overscanCount={overScanCount}
+        itemData={listData}
+        onScroll={({ scrollOffset }: ListOnScrollProps) => setScrollTop(scrollOffset)}
+      >
+        {RowRendererGrid}
+      </List>
+    </div>
+  );
+};
+
+export default VirtualDiffGrid;