feat: recreate diff viewer components and created new utils

src/components/DiffViewer/components/SearchboxHolder.tsx

@@ -0,0 +1,48 @@
+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>
+      <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>
+    </div>
+  );
+}
+
+export default SearchboxHolder;

src/components/DiffViewer/components/ViewerRow.tsx

@@ -2,8 +2,9 @@ import type { DiffResult, InlineDiffOptions } from "json-diff-kit";
 import type { ListChildComponentProps } from "react-window";
 
 import { Viewer } from "json-diff-kit";
+import { useCallback } from "react";
 
-import type { DiffRowOrCollapsed } from "../types";
+import type { CollapsedLine, DiffRowOrCollapsed } from "../types";
 
 import { DIFF_VIEWER_CLASS, isCollapsed } from "../utils/constants";
 
@@ -22,13 +23,19 @@ function ViewerRow({
   const originalLeftLine = data.leftDiff[index];
   const originalRightLine = data.rightDiff[index];
 
+  const handleExpand = useCallback((originalLeftLine: CollapsedLine) => {
+    if (isCollapsed(originalLeftLine)) {
+      onExpand(originalLeftLine.segmentIndex);
+    }
+  }, [onExpand, originalLeftLine]);
+
   if (isCollapsed(originalLeftLine)) {
     return (
       <div className="collapsed-button" style={style}>
-        <button onClick={() => onExpand(originalLeftLine.segmentIndex)} className="text-blue-500 underline">
+        <button onClick={() => handleExpand(originalLeftLine)} className="text-blue-500 underline">
           Show Hidden Lines
         </button>
-        <button onClick={() => onExpand(originalLeftLine.segmentIndex)} className="text-blue-500 underline">
+        <button onClick={() => handleExpand(originalLeftLine)} className="text-blue-500 underline">
           Show Hidden Lines
         </button>
       </div>

src/components/DiffViewer/components/VirtualDiffTable.tsx

@@ -0,0 +1,105 @@
+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 RowRenderer from "../utils/json-diff/row-renderer";
+
+type VirtualDiffTableProps = {
+  leftDiff: DiffRowOrCollapsed[];
+  rightDiff: DiffRowOrCollapsed[];
+  outerRef: React.RefObject<Node | null>;
+  listRef: React.RefObject<List<any>>;
+  height: number;
+  inlineDiffOptions?: InlineDiffOptions;
+  className?: string;
+  style?: React.CSSProperties;
+  setScrollTop: Dispatch<React.SetStateAction<number>>;
+  onExpand: (segmentIndex: number) => void;
+};
+
+const VirtualDiffTable: React.FC<VirtualDiffTableProps> = ({
+  leftDiff,
+  rightDiff,
+  outerRef,
+  listRef,
+  height,
+  inlineDiffOptions,
+  className,
+  setScrollTop,
+  style,
+  onExpand,
+}) => {
+  // 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,
+  ]
+    .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 (
+    <table
+      className={classes}
+      style={style}
+    >
+      <colgroup>
+        <col style={{ width: "50px" }} />
+        <col />
+        <col style={{ width: "0px" }} />
+        <col />
+      </colgroup>
+      <tbody>
+        <List
+          height={height}
+          width="100%"
+          outerRef={outerRef}
+          ref={listRef}
+          className="virtual-json-diff-list-container"
+          itemCount={Math.max(leftDiff.length, rightDiff.length)}
+          itemSize={dynamicRowHeights}
+          overscanCount={28}
+          itemData={listData}
+          onScroll={({ scrollOffset }: ListOnScrollProps) => setScrollTop(scrollOffset)}
+        >
+          {RowRenderer}
+        </List>
+      </tbody>
+    </table>
+  );
+};
+
+export default VirtualDiffTable;