@git-diff-view/react 0.1.3 → 0.1.4

package/index.d.ts

@@ -1,10 +1,10 @@
 // Generated by dts-bundle-generator v9.5.1
 
 import { Root } from 'hast';
-import { CSSProperties, ForwardedRef, ReactNode, RefObject } from 'react';
+import { CSSProperties, ForwardedRef, JSX, ReactNode, RefObject } from 'react';
 
 declare class Cache$1<K, V> extends Map<K, V> {
-	name: string;
+	name?: string;
 	get maxLength(): number;
 	setMaxLength(length: number): void;
 	set(key: K, value: V): this;
@@ -277,6 +277,9 @@ export declare class DiffFile {
 		theme: "light" | "dark";
 	};
 	_mergeFullBundle: (data: ReturnType<DiffFile["_getFullBundle"]>, notifyUpdate?: boolean) => void;
+	_getAllListener: () => ((() => void) & {
+		isSyncExternal?: boolean;
+	})[];
 	_destroy: () => void;
 	clear: () => void;
 }
@@ -334,6 +337,48 @@ export declare class DiffLine {
 	equals(other: DiffLine): boolean;
 	clone(text: string): DiffLine;
 }
+/**
+ * Framework-agnostic multi-select manager for diff views
+ * Handles mouse events and selection state management
+ */
+export declare class DiffMultiSelectManager {
+	constructor(container: HTMLElement, diffFile: DiffFileForMultiSelect, options?: MultiSelectOptions);
+	/**
+	 * Get the current selection result with line data from DiffFile
+	 */
+	getSelectionResult(): MultiSelectResult | null;
+	/**
+	 * Get the current selection state
+	 */
+	getState(): MultiSelectState;
+	/**
+	 * Set preselected lines (e.g., from existing comments)
+	 */
+	setPreselectedLines(lines: {
+		old?: number[];
+		new?: number[];
+	}): void;
+	/**
+	 * Clear the current selection
+	 */
+	clearSelection(): void;
+	/**
+	 * Update options
+	 */
+	updateOptions(options: Partial<MultiSelectOptions>): void;
+	/**
+	 * Update the DiffFile instance
+	 */
+	updateDiffFile(diffFile: DiffFileForMultiSelect): void;
+	/**
+	 * Update the container element
+	 */
+	updateContainer(container: HTMLElement): void;
+	/**
+	 * Destroy the manager and cleanup event listeners
+	 */
+	destroy(): void;
+}
 /**
  * A parser for the GNU unified diff format
  *
@@ -462,6 +507,7 @@ export declare class DiffParser {
 	 */
 	parse(text: string): IRawDiff;
 }
+export declare const DEFAULT_SELECTED_CLASS = "diff-multi-select-active";
 /** How many new lines will be added to a diff hunk by default. */
 export declare const DefaultDiffExpansionStep = 40;
 export declare const _cacheMap: Cache$1<string, File$1>;
@@ -497,13 +543,13 @@ export declare const getSplitLines: (diffFile: DiffFile) => DiffSplitLineItem[];
 export declare const getSyntaxDiffTemplate: ({ diffFile, diffLine, syntaxLine, operator, }: {
 	diffFile: DiffFile;
 	diffLine: DiffLine;
-	syntaxLine: SyntaxLine;
+	syntaxLine: SyntaxLine | null;
 	operator: "add" | "del";
 }) => void;
 export declare const getSyntaxDiffTemplateByFastDiff: ({ diffFile, diffLine, syntaxLine, operator, }: {
 	diffFile: DiffFile;
 	diffLine: DiffLine;
-	syntaxLine: SyntaxLine;
+	syntaxLine: SyntaxLine | null;
 	operator: "add" | "del";
 }) => void;
 export declare const getSyntaxLineTemplate: (line: SyntaxLine) => string;
@@ -523,6 +569,13 @@ export declare const highlighter: DiffHighlighter;
  * ```
  */
 export declare const isTransformEnabled: () => boolean;
+/**
+ * CSS class names used for multi-select styling
+ */
+export declare const multiSelectClassNames: {
+	readonly selected: "diff-multi-select-active";
+	readonly selecting: "diff-multi-selecting";
+};
 export declare const parseInstance: DiffParser;
 export declare const processAST: (ast: DiffAST) => {
 	syntaxFileObject: Record<number, SyntaxLine>;
@@ -635,18 +688,81 @@ export declare enum SplitSide {
 }
 export declare function _getAST(raw: string, fileName?: string, lang?: DiffHighlighterLang, theme?: "light" | "dark"): DiffAST;
 export declare function _getAST(raw: string, fileName?: string, lang?: string, theme?: "light" | "dark"): DiffAST;
+/**
+ * Factory function to create a multi-select manager
+ */
+export declare function createDiffMultiSelectManager(container: HTMLElement, diffFile: DiffFileForMultiSelect, options?: MultiSelectOptions): DiffMultiSelectManager;
 export declare function diffChanges(addition: DiffLine, deletion: DiffLine): {
 	addRange: DiffRange;
 	delRange: DiffRange;
 };
 export declare function escapeHtml(string: unknown): string;
+/**
+ * Convert extendData to preselected lines format
+ * Use this when you have existing comments/annotations on lines
+ */
+export declare function extendDataToPreselectedLines<T>(extendData?: {
+	oldFile?: Record<string, {
+		data: T;
+		fromLine?: number;
+	}>;
+	newFile?: Record<string, {
+		data: T;
+		fromLine?: number;
+	}>;
+}): {
+	old: number[] | undefined;
+	new: number[] | undefined;
+};
 export declare function getFile(raw: string, lang: DiffHighlighterLang, theme: "light" | "dark", fileName?: string, uuid?: string): File$1;
 export declare function getFile(raw: string, lang: string, theme: "light" | "dark", fileName?: string, uuid?: string): File$1;
+/**
+ * Get line number from a split mode line number cell element
+ */
+export declare function getLineNumberFromElement_Split(el: HTMLElement | null): number | null;
+/**
+ * Get line numbers from a unified mode element
+ */
+export declare function getLineNumbersFromElement_Unified(el: HTMLElement | null): {
+	old?: number;
+	new?: number;
+} | null;
+/**
+ * Find the number holder element from a target element in split mode
+ */
+export declare function getNumberHolderElement_Split(el: HTMLElement | null, inMouseDown?: boolean): HTMLElement | null;
+/**
+ * Get selected lines data from DiffFile for split mode
+ */
+export declare function getSelectedLinesFromDiffFile_Split(diffFile: DiffFileForMultiSelect, range: LineRange): SelectedLine[];
+/**
+ * Get selected lines data from DiffFile for unified mode
+ */
+export declare function getSelectedLinesFromDiffFile_Unified(diffFile: DiffFileForMultiSelect, range: LineRange): SelectedLine[];
+/**
+ * Get side (old/new) from a split mode element
+ */
+export declare function getSideFromElement_Split(el: HTMLElement | null): MultiSelectSide | null;
+/**
+ * Ensure start <= end in a range
+ */
+export declare function normalizeRange<T extends {
+	startLineNumber: number;
+	endLineNumber: number;
+}>(range: T): T;
 /** Get the changed ranges in the strings, relative to each other. */
 export declare function relativeChanges(addition: DiffLine, deletion: DiffLine): {
 	addRange: IRange;
 	delRange: IRange;
 };
+/**
+ * Update visual selection state for split mode
+ */
+export declare function updateSelectionVisual_Split(container: HTMLElement | null, selectedRange: LineRange | null, diffFile: DiffFile | null, preselectedLines?: PreselectedLineType, className?: string): void;
+/**
+ * Update visual selection state for unified mode
+ */
+export declare function updateSelectionVisual_Unified(container: HTMLElement | null, selectedRange: LineRange | null, diffFile: DiffFile | null, preselectedLines?: PreselectedLineType, className?: string): void;
 export declare let composeLen: number;
 export interface DiffHunkItem extends DiffLineItem {
 	isFirst: boolean;
@@ -714,6 +830,63 @@ export interface IRawDiff {
 	/** Whether or not the diff has invisible bidi characters */
 	readonly hasHiddenBidiChars: boolean;
 }
+export interface LineRange {
+	side: MultiSelectSide;
+	startLineNumber: number;
+	endLineNumber: number;
+}
+export interface MultiSelectOptions {
+	/**
+	 * Enable multi-select feature
+	 * @default true
+	 */
+	enabled?: boolean;
+	/**
+	 * Callback when selection changes (for visual updates)
+	 */
+	onSelectionChange?: (range: LineRange | null, state: MultiSelectState) => void;
+	/**
+	 * Callback when selection is complete (mouseup)
+	 * Provides the selected range and line data from DiffFile
+	 */
+	onSelectionComplete?: (result: MultiSelectResult | null) => void;
+	/**
+	 * Custom function to scope selection to one hunk
+	 * Return the scoped range or null to cancel selection
+	 */
+	scopeToHunk?: (range: LineRange) => LineRange | null;
+	/**
+	 * CSS class to add to selected cells
+	 * @default "diff-multi-select-active"
+	 */
+	selectedClassName?: string;
+	/**
+	 * Whether it's unified mode
+	 * @default false
+	 */
+	isUnifiedMode?: boolean;
+}
+export interface MultiSelectResult {
+	range: LineRange;
+	lines: SelectedLine[];
+}
+export interface MultiSelectState {
+	isSelecting: boolean;
+	startInfo: {
+		lineNumber: number;
+		side: MultiSelectSide;
+	} | null;
+	currentRange: LineRange | null;
+}
+export interface SelectedLine {
+	index: number;
+	lineNumber: number;
+	value?: string;
+	isHide?: boolean;
+	isDelete?: boolean;
+	isAdd?: boolean;
+	isContext?: boolean;
+}
 export interface SplitLineItem {
 	lineNumber?: number;
 	value?: string;
@@ -730,6 +903,10 @@ export interface UnifiedLineItem {
 	_isHidden?: boolean;
 }
 export type DiffAST = Root;
+/**
+ * Type alias for DiffFile used by multi-select
+ */
+export type DiffFileForMultiSelect = DiffFile;
 export type DiffFileHighlighter = Omit<DiffHighlighter, "getHighlighterEngine">;
 export type DiffHighlighter = {
 	name: string;
@@ -790,6 +967,11 @@ export type HunkLineInfo = {
 	_endHiddenIndex: number;
 	_plainText: string;
 };
+export type MultiSelectSide = "old" | "new";
+export type PreselectedLineType = {
+	old?: number[];
+	new?: number[];
+};
 export type SyntaxLine = {
 	value: string;
 	lineNumber: number;
@@ -873,7 +1055,7 @@ declare const createDiffConfigStore: (props: DiffViewProps<any> & {
 			};
 		};
 	}>;
-	setExtendData: (_extendData: DiffViewProps<any>["extendData"]) => void;
+	setExtendData: (__extendData: DiffViewProps<any>["extendData"]) => void;
 	renderWidgetLine: import("reactivity-store").Ref<({ diffFile, side, lineNumber, onClose, }: {
 		lineNumber: number;
 		side: SplitSide;
@@ -1023,16 +1205,63 @@ export type DiffViewProps_2<T> = Omit<DiffViewProps<T>, "data"> & {
 };
 declare function ReactDiffView<T>(props: DiffViewProps_1<T> & {
 	ref?: ForwardedRef<{
-		getDiffFileInstance: () => DiffFile;
+		getDiffFileInstance: () => DiffFile | null;
 	}>;
 }): JSX.Element;
 declare function ReactDiffView<T>(props: DiffViewProps_2<T> & {
 	ref?: ForwardedRef<{
-		getDiffFileInstance: () => DiffFile;
+		getDiffFileInstance: () => DiffFile | null;
 	}>;
 }): JSX.Element;
 export declare const DiffView: typeof ReactDiffView;
 export declare const version: string;
+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;
+}
+declare function ReactDiffView$1<T>(_props: DiffViewWithMultiSelectProps<T> & {
+	ref?: ForwardedRef<DiffViewWithMultiSelectRef>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const DiffViewWithMultiSelect: typeof ReactDiffView$1;
 
 export {
 	File$1 as File,

package/package.json

@@ -3,7 +3,7 @@
   "description": "@git-diff-view/react",
   "author": "MrWangJustToDo",
   "license": "MIT",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "index.js",
   "types": "index.d.ts",
   "files": [
@@ -61,7 +61,7 @@
     "react diff component"
   ],
   "dependencies": {
-    "@git-diff-view/core": "^0.1.3",
+    "@git-diff-view/core": "^0.1.4",
     "@types/hast": "^3.0.0",
     "fast-diff": "^1.3.0",
     "highlight.js": "^11.11.0",

package/src/_com.css

@@ -167,6 +167,11 @@ td {
   display: block;
 }
 
+.diff-line-extend-wrapper,
+.diff-line-widget-wrapper {
+  display: flow-root;
+}
+
 .diff-line-extend-wrapper * {
   color: initial;
 }
@@ -174,3 +179,97 @@ td {
 .diff-line-widget-wrapper * {
   color: initial;
 }
+
+/* Multi-select styles for line range selection */
+.diff-multi-select-active.diff-line-new-num,
+.diff-multi-select-active.diff-line-old-num,
+.diff-multi-select-active.diff-line-num {
+  z-index: 2;
+}
+
+.diff-multi-select-active.diff-line-content,
+.diff-multi-select-active.diff-line-new-content,
+.diff-multi-select-active.diff-line-old-content {
+  position: relative;
+}
+
+.diff-multi-select-active.diff-line-new-num::after,
+.diff-multi-select-active.diff-line-old-num::after,
+.diff-multi-select-active.diff-line-num::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  opacity: 0.15;
+  background-color: var(--diff-multi-select-bg, #f0c000);
+  pointer-events: none;
+}
+
+.diff-multi-select-active.diff-line-new-num::before,
+.diff-multi-select-active.diff-line-old-num::before,
+.diff-multi-select-active.diff-line-num::before {
+  content: "";
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -2px;
+  width: 4px;
+  background-color: var(--diff-multi-select-border, #2588fa);
+}
+
+.diff-multi-select-active.diff-line-new-content::after,
+.diff-multi-select-active.diff-line-old-content::after,
+.diff-multi-select-active.diff-line-content::after {
+  content: "";
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  opacity: 0.15;
+  background-color: var(--diff-multi-select-bg, #f0c000);
+  pointer-events: none;
+}
+
+/* Multi-select: ensure proper positioning for line number cells */
+.diff-multi-selecting .diff-line-old-num,
+.diff-multi-selecting .diff-line-new-num,
+.diff-multi-selecting .diff-line-num {
+  user-select: none;
+}
+
+.diff-multi-selecting .diff-line-old-content,
+.diff-multi-selecting .diff-line-new-content,
+.diff-multi-selecting .diff-line-content {
+  user-select: none;
+}
+
+/* Prevent text selection during multi-line selection */
+.diff-multi-selecting {
+  user-select: none;
+}
+
+.diff-multi-selecting * {
+  user-select: none;
+}
+
+/* Hide addWidget button during active dragging selection */
+.diff-multi-selecting .diff-add-widget-wrapper {
+  display: none;
+}
+
+/* Ensure addWidget button is above selection overlay */
+.diff-multiselect-wrapper .diff-add-widget-wrapper {
+  z-index: 10 !important;
+}
+
+/* Line number span should not interfere with click events */
+.diff-line-new-num span[data-line-num],
+.diff-line-old-num span[data-line-num] {
+  pointer-events: none;
+}
+
+.diff-multiselect-wrapper .diff-line-old-num,
+.diff-multiselect-wrapper .diff-line-new-num,
+.diff-multiselect-wrapper .diff-line-num {
+  cursor: pointer;
+}

package/src/components/DiffAddWidget.tsx

@@ -1,5 +1,4 @@
 import { addWidgetBGName, addWidgetColorName, diffFontSizeName } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { SplitSide } from "./DiffView";
 
@@ -39,7 +38,8 @@ export const DiffSplitAddWidget = ({
           color: `var(${addWidgetColorName})`,
           backgroundColor: `var(${addWidgetBGName})`,
         }}
-        onClick={() => {
+        onMouseDown={(e) => {
+          e.stopPropagation();
           onOpenAddWidget(lineNumber, side);
           onWidgetClick?.(lineNumber, side);
         }}
@@ -79,7 +79,8 @@ export const DiffUnifiedAddWidget = ({
           color: `var(${addWidgetColorName})`,
           backgroundColor: `var(${addWidgetBGName})`,
         }}
-        onClick={() => {
+        onMouseDown={(e) => {
+          e.stopPropagation();
           onOpenAddWidget(lineNumber, side);
           onWidgetClick?.(lineNumber, side);
         }}

package/src/components/DiffContent.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import {
   DiffLineType,
   getSyntaxDiffTemplate,
@@ -7,7 +6,6 @@ import {
   getPlainLineTemplate,
 } from "@git-diff-view/core";
 import { memoFunc, diffFontSizeName, NewLineSymbol } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { DiffNoNewLine } from "./DiffNoNewLine";
 
@@ -30,7 +28,7 @@ const formatStringToCamelCase = (str: string) => {
 
 export const getStyleObjectFromString = memoFunc((str: string) => {
   if (!str) return temp;
-  const style = {};
+  const style: Record<string, string> = {};
   str.split(";").forEach((el) => {
     const [property, value] = el.split(":");
     if (!property) return;
@@ -60,7 +58,7 @@ const DiffString = ({
     const isNewLineSymbolChanged = changes.newLineSymbol;
 
     if (!diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
-      getPlainDiffTemplate({ diffLine, rawLine, operator });
+      getPlainDiffTemplate({ diffLine: diffLine!, rawLine, operator: operator! });
     }
 
     if (diffLine?.plainTemplate) {
@@ -85,6 +83,7 @@ const DiffString = ({
   }
 
   if (plainLine && !plainLine?.template) {
+    // eslint-disable-next-line react-hooks/immutability
     plainLine.template = getPlainLineTemplate(plainLine.value);
   }
 
@@ -124,7 +123,7 @@ const DiffSyntax = ({
     const isNewLineSymbolChanged = changes.newLineSymbol;
 
     if (!diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
-      getSyntaxDiffTemplate({ diffFile, diffLine, syntaxLine, operator });
+      getSyntaxDiffTemplate({ diffFile, diffLine: diffLine!, syntaxLine, operator: operator! });
     }
 
     if (diffLine?.syntaxTemplate) {
@@ -149,6 +148,7 @@ const DiffSyntax = ({
   }
 
   if (!syntaxLine.template) {
+    // eslint-disable-next-line react-hooks/immutability
     syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
   }
 
@@ -198,7 +198,7 @@ export const DiffContent = ({
 
   const isDelete = diffLine?.type === DiffLineType.Delete;
 
-  const isMaxLineLengthToIgnoreSyntax = syntaxLine?.nodeList?.length > 150;
+  const isMaxLineLengthToIgnoreSyntax = syntaxLine && syntaxLine?.nodeList?.length > 150;
 
   return (
     <div

package/src/components/DiffExpand.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 export const ExpandDown = ({ className }: { className?: string }) => {
   return (
     <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" className={className}>

package/src/components/DiffNoNewLine.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 export const DiffNoNewLine = () => {
   return (
     <svg aria-label="No newline at end of file" role="img" viewBox="0 0 16 16" version="1.1" fill="currentColor">

package/src/components/DiffSplitContentLineNormal.tsx

@@ -7,7 +7,6 @@ import {
   emptyBGName,
   expandLineNumberColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { SplitSide } from "..";
 
@@ -63,9 +62,9 @@ const InternalDiffSplitLine = ({
 
   const lineNumberBG = getLineNumberBG(isAdded, isDelete, hasDiff);
 
-  const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber);
+  const syntaxLine = getCurrentSyntaxLine(currentLine.lineNumber ?? -1);
 
-  const plainLine = getCurrentPlainLine(currentLine.lineNumber);
+  const plainLine = getCurrentPlainLine(currentLine.lineNumber ?? -1);
 
   return (
     <tr
@@ -89,7 +88,7 @@ const InternalDiffSplitLine = ({
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget
                 index={index}
-                lineNumber={currentLine.lineNumber}
+                lineNumber={currentLine.lineNumber ?? -1}
                 side={side}
                 diffFile={diffFile}
                 onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}

package/src/components/DiffSplitContentLineWrap.tsx

@@ -7,7 +7,6 @@ import {
   borderColorName,
   expandLineNumberColorName,
 } from "@git-diff-view/utils";
-import * as React from "react";
 
 import { SplitSide } from "..";
 
@@ -33,13 +32,13 @@ const InternalDiffSplitLine = ({
 
   const newLine = diffFile.getSplitRightLine(index);
 
-  const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine?.lineNumber);
+  const oldSyntaxLine = diffFile.getOldSyntaxLine(oldLine?.lineNumber ?? -1);
 
-  const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber);
+  const oldPlainLine = diffFile.getOldPlainLine(oldLine.lineNumber ?? -1);
 
-  const newSyntaxLine = diffFile.getNewSyntaxLine(newLine?.lineNumber);
+  const newSyntaxLine = diffFile.getNewSyntaxLine(newLine?.lineNumber ?? -1);
 
-  const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber);
+  const newPlainLine = diffFile.getNewPlainLine(newLine.lineNumber ?? -1);
 
   const hasDiff = !!oldLine?.diff || !!newLine?.diff;
 
@@ -84,7 +83,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)}
@@ -104,7 +103,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)}
@@ -115,7 +114,7 @@ const InternalDiffSplitLine = ({
             <DiffContent
               enableWrap={true}
               diffFile={diffFile}
-              rawLine={oldLine.value}
+              rawLine={oldLine.value || ""}
               diffLine={oldLine.diff}
               plainLine={oldPlainLine}
               syntaxLine={oldSyntaxLine}
@@ -148,7 +147,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)}
@@ -168,7 +167,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)}