@git-diff-view/react 0.1.2 → 0.1.4

package/src/components/DiffViewWithMultiSelect.tsx

@@ -0,0 +1,321 @@
+import { useCallback, useEffect, useMemo, useRef, useImperativeHandle, forwardRef } from "react";
+
+import { multiSelectClassNames, createDiffMultiSelectManager } from "..";
+import { useCallbackRef } from "../hooks/useCallbackRef";
+import { useUpdateEffect } from "../hooks/useUpdateEffect";
+
+import { DiffModeEnum, DiffView, SplitSide } from "./DiffView";
+
+import type {
+  MultiSelectResult,
+  LineRange,
+  MultiSelectState,
+  DiffFile,
+  DiffMultiSelectManager,
+  MultiSelectOptions,
+  extendDataToPreselectedLines,
+} from "..";
+import type { DiffViewProps } from "./DiffView";
+import type { ForwardedRef, ReactNode } from "react";
+
+export interface DiffViewWithMultiSelectProps<T = unknown> extends Omit<
+  DiffViewProps<T>,
+  "renderWidgetLine" | "onAddWidgetClick"
+> {
+  /**
+   * Enable multi-select feature
+   * @default true
+   */
+  enableMultiSelect?: boolean;
+
+  /**
+   * Callback when multi-line selection is complete
+   * Use this to open a comment dialog or handle the selection
+   */
+  onMultiSelectComplete?: (result: MultiSelectResult) => void;
+
+  /**
+   * Callback when selection changes (during drag)
+   */
+  onMultiSelectChange?: (range: LineRange | null, state: MultiSelectState) => void;
+
+  /**
+   * Custom function to scope selection to one hunk
+   * Return the scoped range or null to cancel selection
+   */
+  scopeMultiSelectToHunk?: (range: LineRange) => LineRange | null;
+
+  onAddWidgetClick?: (props: { lineNumber: number; fromLineNumber?: number; side: SplitSide }) => void;
+
+  renderWidgetLine?: (props: {
+    lineNumber: number;
+    fromLineNumber: number;
+    side: SplitSide;
+    diffFile: DiffFile;
+    onClose: () => void;
+  }) => ReactNode;
+}
+
+export interface DiffViewWithMultiSelectRef {
+  getDiffFileInstance: () => DiffFile | null;
+  getSelectionResult: () => MultiSelectResult | null;
+  getSelectionState: () => MultiSelectState;
+  clearSelection: () => void;
+  setPreselectedLines: (lines: { old: number[]; new: number[] }) => void;
+}
+
+type MultiResult = ReturnType<typeof extendDataToPreselectedLines>;
+
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+const InternalDiffViewWithMultiSelect = <T extends unknown>(
+  props: DiffViewWithMultiSelectProps<T>,
+  ref: ForwardedRef<DiffViewWithMultiSelectRef>
+) => {
+  const {
+    enableMultiSelect = true,
+    extendData,
+    onMultiSelectComplete,
+    onMultiSelectChange,
+    scopeMultiSelectToHunk,
+    renderWidgetLine,
+    onAddWidgetClick,
+    diffViewMode = DiffModeEnum.SplitGitHub,
+    ...restProps
+  } = props;
+
+  const memoSelectChange = useCallbackRef(onMultiSelectChange);
+
+  const memoSelectComplete = useCallbackRef(onMultiSelectComplete);
+
+  const memoScopeSelectToHunk = useCallbackRef(scopeMultiSelectToHunk);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const diffViewRef = useRef<{ getDiffFileInstance: () => DiffFile | null }>(null);
+  const managerRef = useRef<DiffMultiSelectManager | null>(null);
+
+  const multiResultRef = useRef<MultiResult>(undefined);
+
+  const isUnifiedMode = !(diffViewMode & DiffModeEnum.Split);
+
+  const updateMultiResult = useCallback((result?: MultiResult) => {
+    multiResultRef.current = result;
+    managerRef.current?.setPreselectedLines(result || { old: [], new: [] });
+  }, []);
+
+  useUpdateEffect(() => {
+    updateMultiResult(undefined);
+  }, [props.diffViewWrap, diffViewMode]);
+
+  const getDiffFile = useCallback(() => {
+    return diffViewRef.current?.getDiffFileInstance() ?? null;
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const diffFile = getDiffFile();
+
+    if (!container || !diffFile || !enableMultiSelect) {
+      managerRef.current?.destroy();
+      managerRef.current = null;
+      return;
+    }
+
+    const managerOptions: MultiSelectOptions = {
+      enabled: enableMultiSelect,
+      isUnifiedMode,
+      selectedClassName: multiSelectClassNames.selected,
+      onSelectionChange: (range, state) => {
+        if (state.isSelecting) {
+          containerRef.current?.classList.add(multiSelectClassNames.selecting);
+        } else {
+          containerRef.current?.classList.remove(multiSelectClassNames.selecting);
+        }
+        if (state.isSelecting && multiResultRef.current) {
+          updateMultiResult(undefined);
+        }
+        memoSelectChange?.(range, state);
+      },
+      onSelectionComplete: (result) => {
+        containerRef.current?.classList.remove(multiSelectClassNames.selecting);
+        if (result && result.lines.length > 0) {
+          memoSelectComplete?.(result);
+          const finalResult = {
+            [result.range.side as "old" | "new"]: [result.range.startLineNumber, result.range.endLineNumber],
+          } as MultiResult;
+          updateMultiResult(finalResult);
+        } else {
+          updateMultiResult(undefined);
+        }
+      },
+      scopeToHunk: memoScopeSelectToHunk,
+    };
+
+    if (managerRef.current) {
+      managerRef.current.updateContainer(container);
+      managerRef.current.updateDiffFile(diffFile);
+      managerRef.current.updateOptions(managerOptions);
+    } else {
+      managerRef.current = createDiffMultiSelectManager(container, diffFile, managerOptions);
+    }
+
+    return () => {
+      managerRef.current?.destroy();
+      managerRef.current = null;
+    };
+  }, [
+    enableMultiSelect,
+    isUnifiedMode,
+    memoScopeSelectToHunk,
+    memoSelectChange,
+    memoSelectComplete,
+    getDiffFile,
+    updateMultiResult,
+  ]);
+
+  const convertedExtendData = useMemo(() => {
+    if (!extendData) return undefined;
+
+    const result: { oldFile?: Record<string, { data: T }>; newFile?: Record<string, { data: T }> } = {};
+
+    if (extendData.oldFile) {
+      result.oldFile = {};
+      for (const [key, value] of Object.entries(extendData.oldFile)) {
+        result.oldFile[key] = { data: value.data };
+      }
+    }
+
+    if (extendData.newFile) {
+      result.newFile = {};
+      for (const [key, value] of Object.entries(extendData.newFile)) {
+        result.newFile[key] = { data: value.data };
+      }
+    }
+
+    return result;
+  }, [extendData]);
+
+  const internalRenderWidgetLine = useCallback(
+    ({
+      lineNumber,
+      side,
+      diffFile,
+      onClose,
+    }: {
+      lineNumber: number;
+      side: SplitSide;
+      diffFile: DiffFile;
+      onClose: () => void;
+    }) => {
+      if (!renderWidgetLine) return null;
+
+      const sideKey = side === SplitSide.old ? "old" : "new";
+      const multiResultItem = multiResultRef.current?.[sideKey] as number[];
+      const fromLineNumber = multiResultItem ? Math.min(...multiResultItem) : lineNumber;
+      const toLineNumber = multiResultItem ? Math.max(...multiResultItem) : lineNumber;
+
+      return renderWidgetLine({
+        lineNumber: toLineNumber,
+        fromLineNumber,
+        side,
+        diffFile,
+        onClose,
+      });
+    },
+    [renderWidgetLine]
+  );
+
+  const getSelectionResult = useCallback(() => {
+    return managerRef.current?.getSelectionResult() ?? null;
+  }, []);
+
+  const getSelectionState = useCallback(() => {
+    return (
+      managerRef.current?.getState() ?? {
+        isSelecting: false,
+        startInfo: null,
+        currentRange: null,
+      }
+    );
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    managerRef.current?.clearSelection();
+  }, []);
+
+  const setPreselectedLines = updateMultiResult;
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getDiffFileInstance: getDiffFile,
+      getSelectionResult,
+      getSelectionState,
+      clearSelection,
+      setPreselectedLines,
+    }),
+    [getDiffFile, getSelectionResult, getSelectionState, clearSelection, setPreselectedLines]
+  );
+
+  return (
+    <div ref={containerRef} className="diff-multiselect-wrapper">
+      <DiffView
+        ref={diffViewRef}
+        {...restProps}
+        diffViewMode={diffViewMode}
+        extendData={convertedExtendData}
+        onAddWidgetClick={(lineNum: number, side: SplitSide) => {
+          managerRef.current?.clearSelection();
+          const multiResult = multiResultRef.current;
+          if (multiResult) {
+            const currentSide = SplitSide[side] as unknown as "new" | "old";
+            const currentMultiResult = multiResult[currentSide] as number[];
+            const otherSide = currentSide === "new" ? "old" : "new";
+            const otherMultiResult = multiResult[otherSide] as number[];
+            if (currentMultiResult?.length) {
+              const max = Math.max(...currentMultiResult);
+              if (max === lineNum) {
+                const finalResult = { [currentSide]: currentMultiResult };
+                updateMultiResult(finalResult as MultiResult);
+                onAddWidgetClick?.({ lineNumber: max, fromLineNumber: Math.min(...currentMultiResult), side });
+                return;
+              }
+            }
+            if (isUnifiedMode && otherMultiResult?.length) {
+              const max = Math.max(...otherMultiResult);
+              const diffFile = getDiffFile();
+              const index = diffFile.getUnifiedLineIndexByLineNumber(lineNum, side);
+              const unifiedItem = diffFile.getUnifiedLine(index);
+              const otherSideLineNum = side === SplitSide.old ? unifiedItem.newLineNumber : unifiedItem.oldLineNumber;
+              if (max === otherSideLineNum) {
+                const finalResult = { [otherSide]: otherMultiResult };
+                updateMultiResult(finalResult as MultiResult);
+                onAddWidgetClick?.({
+                  lineNumber: max,
+                  fromLineNumber: Math.min(...otherMultiResult),
+                  side: otherSide === "old" ? SplitSide.old : SplitSide.new,
+                });
+                return;
+              }
+            }
+            updateMultiResult(undefined);
+            onAddWidgetClick?.({ lineNumber: lineNum, fromLineNumber: lineNum, side });
+          } else {
+            updateMultiResult(undefined);
+            onAddWidgetClick?.({ lineNumber: lineNum, fromLineNumber: lineNum, side });
+          }
+        }}
+        renderWidgetLine={renderWidgetLine ? internalRenderWidgetLine : undefined}
+      />
+    </div>
+  );
+};
+
+// type helper function
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function ReactDiffView<T>(
+  _props: DiffViewWithMultiSelectProps<T> & { ref?: ForwardedRef<DiffViewWithMultiSelectRef> }
+) {
+  return <></>;
+}
+
+export const DiffViewWithMultiSelect = forwardRef(InternalDiffViewWithMultiSelect) as typeof ReactDiffView;

package/src/components/DiffWidgetContext.ts

@@ -5,11 +5,13 @@ import type { Ref, UseSelectorWithStore } from "reactivity-store";
 
 export const DiffWidgetContext = createContext<{
   useWidget: UseSelectorWithStore<{
-    widgetSide: Ref<SplitSide>;
-    widgetLineNumber: Ref<number>;
+    widgetSide: Ref<SplitSide | undefined>;
+    widgetLineNumber: Ref<number | undefined>;
 
     setWidget: (props: { side?: SplitSide; lineNumber?: number }) => void;
   }>;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
 }>(null);
 
 DiffWidgetContext.displayName = "DiffWidgetContext";

package/src/components/tools.ts

@@ -42,7 +42,8 @@ export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: b
       newFile: { ...props.extendData?.newFile },
     });
 
-    const setExtendData = (_extendData: DiffViewProps<any>["extendData"]) => {
+    const setExtendData = (__extendData: DiffViewProps<any>["extendData"]) => {
+      const _extendData = __extendData || {};
       const existOldKeys = Object.keys(extendData.value.oldFile || {});
       const inComingOldKeys = Object.keys(_extendData.oldFile || {});
       for (const key of existOldKeys) {
@@ -51,7 +52,7 @@ export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: b
         }
       }
       for (const key of inComingOldKeys) {
-        extendData.value.oldFile[key] = _extendData.oldFile[key];
+        extendData.value.oldFile[key] = _extendData.oldFile![key];
       }
       const existNewKeys = Object.keys(extendData.value.newFile || {});
       const inComingNewKeys = Object.keys(_extendData.newFile || {});
@@ -61,7 +62,7 @@ export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: b
         }
       }
       for (const key of inComingNewKeys) {
-        extendData.value.newFile[key] = _extendData.newFile[key];
+        extendData.value.newFile[key] = _extendData.newFile![key];
       }
     };
 
@@ -119,9 +120,9 @@ export const createDiffConfigStore = (props: DiffViewProps<any> & { isMounted: b
 
 export const createDiffWidgetStore = (useDiffContextRef: RefObject<ReturnType<typeof createDiffConfigStore>>) => {
   return createStore(() => {
-    const widgetSide = ref<SplitSide>(undefined);
+    const widgetSide = ref<SplitSide | undefined>(undefined);
 
-    const widgetLineNumber = ref<number>(undefined);
+    const widgetLineNumber = ref<number | undefined>(undefined);
 
     const setWidget = ({ side, lineNumber }: { side?: SplitSide; lineNumber?: number }) => {
       const { renderWidgetLine } = useDiffContextRef.current?.getReadonlyState?.() || {};

package/src/components/v2/DiffSplitContentLineNormal_v2.tsx

@@ -7,7 +7,6 @@ import {
   diffAsideWidthName,
   expandLineNumberColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { DiffSplitAddWidget } from "../DiffAddWidget";
 import { DiffContent } from "../DiffContent";
@@ -62,9 +61,9 @@ const InternalDiffSplitLine = ({
 
   const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
 
-  const plainLine = getCurrentPlainLine(currentLine.lineNumber);
+  const plainLine = getCurrentPlainLine(currentLine.lineNumber ?? -1);
 
-  const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
+  const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber ?? -1);
 
   return (
     <div
@@ -88,7 +87,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={currentLine.lineNumber}
+                lineNumber={currentLine.lineNumber ?? -1}
                 side={side}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
@@ -115,7 +114,7 @@ const InternalDiffSplitLine = ({
               diffLine={currentLine.diff}
               plainLine={plainLine}
               syntaxLine={syntaxLine}
-              enableHighlight={enableHighlight}
+              enableHighlight={!!enableHighlight}
             />
           </div>
         </>

package/src/components/v2/DiffSplitContentLineWrap_v2.tsx

@@ -8,7 +8,6 @@ import {
   diffAsideWidthName,
   expandLineNumberColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { DiffSplitAddWidget } from "../DiffAddWidget";
 import { DiffContent } from "../DiffContent";
@@ -29,13 +28,13 @@ const InternalDiffSplitLine = ({
 
   const newLine = diffFile.getSplitRightLine(index);
 
-  const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine?.lineNumber);
+  const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine?.lineNumber ?? -1);
 
-  const newSyntaxLine = diffFile.getNewSyntaxLine(newLine?.lineNumber);
+  const newSyntaxLine = diffFile.getNewSyntaxLine(newLine?.lineNumber ?? -1);
 
-  const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber);
+  const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber ?? -1);
 
-  const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber);
+  const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber ?? -1);
 
   const hasDiff = !!oldLine?.diff || !!newLine?.diff;
 
@@ -87,7 +86,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={oldLine.lineNumber}
+                lineNumber={oldLine.lineNumber ?? -1}
                 side={SplitSide.old}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
@@ -111,7 +110,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={oldLine.lineNumber}
+                lineNumber={oldLine.lineNumber ?? -1}
                 side={SplitSide.old}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
@@ -122,11 +121,11 @@ const InternalDiffSplitLine = ({
             <DiffContent
               enableWrap={true}
               diffFile={diffFile}
-              rawLine={oldLine.value}
+              rawLine={oldLine.value || ""}
               diffLine={oldLine.diff}
               plainLine={oldPlainLine}
               syntaxLine={oldSyntaxLine}
-              enableHighlight={enableHighlight}
+              enableHighlight={!!enableHighlight}
             />
           </div>
         </>
@@ -170,7 +169,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={newLine.lineNumber}
+                lineNumber={newLine.lineNumber ?? -1}
                 side={SplitSide.new}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
@@ -194,7 +193,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={newLine.lineNumber}
+                lineNumber={newLine.lineNumber ?? -1}
                 side={SplitSide.new}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
@@ -209,7 +208,7 @@ const InternalDiffSplitLine = ({
               diffLine={newLine.diff}
               plainLine={newPlainLine}
               syntaxLine={newSyntaxLine}
-              enableHighlight={enableHighlight}
+              enableHighlight={!!enableHighlight}
             />
           </div>
         </>

package/src/components/v2/DiffSplitExtendLineNormal_v2.tsx

@@ -77,7 +77,7 @@ const InternalDiffSplitExtendLine = ({
               renderExtendLine?.({
                 diffFile,
                 side,
-                lineNumber: currentLineNumber,
+                lineNumber: currentLineNumber ?? -1,
                 data: currentExtend?.data,
                 onUpdate: diffFile.notifyAll,
               })}
@@ -115,8 +115,8 @@ export const DiffSplitExtendLine = ({
   const { oldLineExtend, newLineExtend } = useDiffContext(
     React.useCallback(
       (s) => ({
-        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber],
-        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber],
+        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber ?? -1],
+        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber ?? -1],
       }),
       [oldLine?.lineNumber, newLine?.lineNumber]
     )

package/src/components/v2/DiffSplitExtendLineWrap_v2.tsx

@@ -35,7 +35,7 @@ const InternalDiffSplitExtendLine = ({
     renderExtendLine?.({
       diffFile,
       side: SplitSide.old,
-      lineNumber: oldLine.lineNumber,
+      lineNumber: oldLine.lineNumber ?? -1,
       data: oldLineExtend.data,
       onUpdate: diffFile.notifyAll,
     });
@@ -45,7 +45,7 @@ const InternalDiffSplitExtendLine = ({
     renderExtendLine?.({
       diffFile,
       side: SplitSide.new,
-      lineNumber: newLine.lineNumber,
+      lineNumber: newLine.lineNumber ?? -1,
       data: newLineExtend.data,
       onUpdate: diffFile.notifyAll,
     });
@@ -95,8 +95,8 @@ export const DiffSplitExtendLine = ({
   const { oldLineExtend, newLineExtend } = useDiffContext(
     React.useCallback(
       (s) => ({
-        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber],
-        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber],
+        oldLineExtend: s.extendData?.oldFile?.[oldLine?.lineNumber ?? -1],
+        newLineExtend: s.extendData?.newFile?.[newLine?.lineNumber ?? -1],
       }),
       [oldLine?.lineNumber, newLine?.lineNumber]
     )

package/src/components/v2/DiffSplitHunkLineNormal_v2.tsx

@@ -6,7 +6,6 @@ import {
   hunkContentColorName,
   diffAsideWidthName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { useSyncHeight } from "../../hooks/useSyncHeight";
 import { ExpandUp, ExpandDown, ExpandAll } from "../DiffExpand";

package/src/components/v2/DiffSplitHunkLineWrap_v2.tsx

@@ -7,7 +7,6 @@ import {
   hunkContentColorName,
   borderColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { ExpandUp, ExpandDown, ExpandAll } from "../DiffExpand";
 import { DiffModeEnum } from "../DiffView";

package/src/components/v2/DiffSplitViewLineNormal_v2.tsx

@@ -1,5 +1,4 @@
 import { DiffFileLineType } from "@git-diff-view/core";
-import * as React from "react";
 
 import { DiffSplitContentLine } from "./DiffSplitContentLineNormal_v2";
 import { DiffSplitExtendLine } from "./DiffSplitExtendLineNormal_v2";

package/src/components/v2/DiffSplitViewLineWrap_v2.tsx

@@ -1,5 +1,4 @@
 import { DiffFileLineType } from "@git-diff-view/core";
-import * as React from "react";
 
 import { DiffSplitContentLine } from "./DiffSplitContentLineWrap_v2";
 import { DiffSplitExtendLine } from "./DiffSplitExtendLineWrap_v2";

package/src/components/v2/DiffSplitViewNormal_v2.tsx

@@ -9,6 +9,7 @@ import {
 } from "@git-diff-view/utils";
 import { memo, useEffect, useRef } from "react";
 import * as React from "react";
+// @ts-ignore
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 
 import { useTextWidth } from "../../hooks/useTextWidth";
@@ -53,9 +54,9 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
   const ref2 = useRef<HTMLDivElement>(null);
 
-  const ref = useRef<HTMLStyleElement>();
+  const ref = useRef<HTMLStyleElement>(null);
 
-  const tempRef = useRef<SplitSide>();
+  const tempRef = useRef<SplitSide>(undefined);
 
   const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
 
@@ -84,7 +85,7 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
   const width = Math.max(40, _width + 25);
 
-  const setStyle = (side: SplitSide) => {
+  const setStyle = (side?: SplitSide) => {
     if (!ref.current) return;
     if (!side) {
       ref.current.textContent = "";
@@ -95,7 +96,7 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
   };
 
   const onMouseDown: MouseEventHandler<HTMLTableSectionElement> = (e) => {
-    let ele = e.target;
+    let ele: Element | null = e.target as Element;
 
     // need remove all the selection
     if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
@@ -105,11 +106,11 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
     while (ele && ele instanceof HTMLElement) {
       const state = ele.getAttribute("data-state");
-      const side = ele.getAttribute("data-side");
+      const side = ele.getAttribute("data-side") as unknown as SplitSide;
       if (side) {
-        if (tempRef.current !== SplitSide[side]) {
-          tempRef.current = SplitSide[side];
-          setStyle(SplitSide[side]);
+        if (tempRef.current !== (SplitSide[side] as unknown as SplitSide)) {
+          tempRef.current = SplitSide[side] as unknown as SplitSide;
+          setStyle(SplitSide[side] as unknown as SplitSide);
           removeAllSelection();
         }
       }

package/src/components/v2/DiffSplitViewWrap_v2.tsx

@@ -2,8 +2,8 @@
 import { type DiffFile, getSplitLines } from "@git-diff-view/core";
 import { removeAllSelection, diffFontSizeName, diffAsideWidthName } from "@git-diff-view/utils";
 import { memo, useMemo, useRef } from "react";
-import * as React from "react";
 // SEE https://github.com/facebook/react/pull/25231
+// @ts-ignore
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 
 import { useTextWidth } from "../../hooks/useTextWidth";
@@ -36,7 +36,7 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
 
   const lines = getSplitLines(diffFile);
 
-  const setStyle = (side: SplitSide) => {
+  const setStyle = (side?: SplitSide) => {
     if (!ref.current) return;
     if (!side) {
       ref.current.textContent = "";
@@ -48,7 +48,7 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
   };
 
   const onMouseDown: MouseEventHandler<HTMLTableSectionElement> = (e) => {
-    let ele = e.target;
+    let ele: Element | null = e.target as Element;
 
     // need remove all the selection
     if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
@@ -58,9 +58,9 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
 
     while (ele && ele instanceof HTMLElement) {
       const state = ele.getAttribute("data-state");
-      const side = ele.getAttribute("data-side");
+      const side = ele.getAttribute("data-side") as unknown as SplitSide;
       if (side) {
-        setStyle(SplitSide[side]);
+        setStyle(SplitSide[side] as unknown as SplitSide);
         removeAllSelection();
       }
       if (state) {

package/src/components/v2/DiffSplitView_v2.tsx

@@ -1,5 +1,4 @@
 import { memo, useEffect, useMemo, useRef } from "react";
-import * as React from "react";
 
 import { useDiffViewContext } from "../DiffViewContext";
 import { DiffWidgetContext } from "../DiffWidgetContext";