@git-diff-view/react 0.0.36 → 0.0.38

package/index.d.ts

@@ -28,6 +28,9 @@ declare class File$1 {
 	highlighterName?: DiffHighlighter["name"];
 	highlighterType?: DiffHighlighter["type"];
 	maxLineNumber: number;
+	/**
+	 * @deprecated
+	 */
 	enableTemplate: boolean;
 	static createInstance(data: File$1): File$1;
 	constructor(row: string, lang: DiffHighlighterLang, fileName?: string);
@@ -111,12 +114,9 @@ export declare class DiffFile {
 	initTheme(theme?: "light" | "dark"): void;
 	initRaw(): void;
 	initSyntax({ registerHighlighter }?: {
-		registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
+		registerHighlighter?: DiffFileHighlighter;
 	}): void;
 	init(): void;
-	enableTemplate(): void;
-	disableTemplate(): void;
-	getIsEnableTemplate(): boolean;
 	buildSplitDiffLines(): void;
 	buildUnifiedDiffLines(): void;
 	getSplitLeftLine: (index: number) => SplitLineItem;
@@ -203,11 +203,11 @@ export declare class DiffFile {
 		};
 		version: string;
 		theme: "light" | "dark";
-		enableTemplate: boolean;
 		isFullMerge: boolean;
 	};
 	mergeBundle: (data: ReturnType<DiffFile["getBundle"]>, notifyUpdate?: boolean) => void;
 	_getHighlighterName: () => string;
+	_getHighlighterType: () => string;
 	_getIsPureDiffRender: () => boolean;
 	_getTheme: () => "light" | "dark";
 	_addClonedInstance: (instance: DiffFile) => void;
@@ -265,7 +265,6 @@ export declare class DiffFile {
 		};
 		version: string;
 		theme: "light" | "dark";
-		enableTemplate: boolean;
 	};
 	_mergeFullBundle: (data: ReturnType<DiffFile["_getFullBundle"]>, notifyUpdate?: boolean) => void;
 	_destroy: () => void;
@@ -317,8 +316,9 @@ export declare class DiffLine {
 	plainTemplate?: string;
 	plainTemplateMode?: "fast-diff" | "relative";
 	syntaxTemplate?: string;
+	syntaxTemplateName?: string;
 	syntaxTemplateMode?: "fast-diff" | "relative";
-	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, _diffChanges?: DiffRange, plainTemplate?: string, plainTemplateMode?: "fast-diff" | "relative", syntaxTemplate?: string, syntaxTemplateMode?: "fast-diff" | "relative");
+	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, _diffChanges?: DiffRange, plainTemplate?: string, plainTemplateMode?: "fast-diff" | "relative", syntaxTemplate?: string, syntaxTemplateName?: string, syntaxTemplateMode?: "fast-diff" | "relative");
 	withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
 	isIncludeableLine(): boolean;
 	equals(other: DiffLine): boolean;
@@ -484,12 +484,14 @@ export declare const getPlainDiffTemplateByFastDiff: ({ diffLine, rawLine, opera
 export declare const getPlainLineTemplate: (line: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
 export declare const getSplitLines: (diffFile: DiffFile) => DiffSplitLineItem[];
-export declare const getSyntaxDiffTemplate: ({ diffLine, syntaxLine, operator, }: {
+export declare const getSyntaxDiffTemplate: ({ diffFile, diffLine, syntaxLine, operator, }: {
+	diffFile: DiffFile;
 	diffLine: DiffLine;
 	syntaxLine: SyntaxLine;
 	operator: "add" | "del";
 }) => void;
-export declare const getSyntaxDiffTemplateByFastDiff: ({ diffLine, syntaxLine, operator, }: {
+export declare const getSyntaxDiffTemplateByFastDiff: ({ diffFile, diffLine, syntaxLine, operator, }: {
+	diffFile: DiffFile;
 	diffLine: DiffLine;
 	syntaxLine: SyntaxLine;
 	operator: "add" | "del";
@@ -716,6 +718,7 @@ export interface UnifiedLineItem {
 	_isHidden?: boolean;
 }
 export type DiffAST = Root;
+export type DiffFileHighlighter = Omit<DiffHighlighter, "getHighlighterEngine">;
 export type DiffHighlighter = {
 	name: string;
 	type: "class" | "style" | string;

package/package.json

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

package/src/components/DiffContent.tsx

@@ -6,14 +6,7 @@ import {
   getPlainDiffTemplate,
   getPlainLineTemplate,
 } from "@git-diff-view/core";
-import {
-  memoFunc,
-  addContentHighlightBGName,
-  delContentHighlightBGName,
-  diffFontSizeName,
-  getSymbol,
-  NewLineSymbol,
-} from "@git-diff-view/utils";
+import { memoFunc, diffFontSizeName, NewLineSymbol } from "@git-diff-view/utils";
 import * as React from "react";
 
 import { DiffNoNewLine } from "./DiffNoNewLine";
@@ -54,25 +47,23 @@ const DiffString = ({
   operator,
   plainLine,
   enableWrap,
-  enableTemplate,
 }: {
   rawLine: string;
   diffLine?: DiffLine;
   operator?: "add" | "del";
   plainLine?: File["plainFile"][number];
   enableWrap?: boolean;
-  enableTemplate?: boolean;
 }) => {
   const changes = diffLine?.changes;
 
   if (changes?.hasLineChange) {
     const isNewLineSymbolChanged = changes.newLineSymbol;
 
-    if (enableTemplate && !diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
+    if (!diffLine?.plainTemplate && typeof getPlainDiffTemplate === "function") {
       getPlainDiffTemplate({ diffLine, rawLine, operator });
     }
 
-    if (enableTemplate && diffLine?.plainTemplate) {
+    if (diffLine?.plainTemplate) {
       return (
         <span className="diff-line-content-raw">
           <span data-template dangerouslySetInnerHTML={{ __html: diffLine.plainTemplate }} />
@@ -90,59 +81,14 @@ const DiffString = ({
           )}
         </span>
       );
-    } else {
-      // TODO remove
-      const range = changes.range;
-      const str1 = rawLine.slice(0, range.location);
-      const str2 = rawLine.slice(range.location, range.location + range.length);
-      const str3 = rawLine.slice(range.location + range.length);
-      const isLast = str2.includes("\n");
-      const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
-      return (
-        <span className="diff-line-content-raw">
-          <span data-range-start={range.location} data-range-end={range.location + range.length}>
-            {str1}
-            <span
-              data-diff-highlight
-              className="rounded-[0.2em]"
-              style={{
-                backgroundColor:
-                  operator === "add" ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-              }}
-            >
-              {isLast ? (
-                <>
-                  {_str2}
-                  <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
-                </>
-              ) : (
-                str2
-              )}
-            </span>
-            {str3}
-          </span>
-          {isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (
-            <span
-              data-no-newline-at-end-of-file-symbol
-              className={enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
-              style={{
-                width: `var(${diffFontSizeName})`,
-                height: `var(${diffFontSizeName})`,
-              }}
-            >
-              <DiffNoNewLine />
-            </span>
-          )}
-        </span>
-      );
     }
   }
 
-  if (enableTemplate && plainLine && !plainLine?.template) {
+  if (plainLine && !plainLine?.template) {
     plainLine.template = getPlainLineTemplate(plainLine.value);
   }
 
-  if (enableTemplate && plainLine?.template) {
+  if (plainLine?.template) {
     return (
       <span className="diff-line-content-raw">
         <span data-template dangerouslySetInnerHTML={{ __html: plainLine.template }} />
@@ -155,29 +101,21 @@ const DiffString = ({
 
 const DiffSyntax = ({
   rawLine,
+  diffFile,
   diffLine,
   operator,
   syntaxLine,
   enableWrap,
-  enableTemplate,
 }: {
   rawLine: string;
+  diffFile: DiffFile;
   diffLine?: DiffLine;
   syntaxLine?: File["syntaxFile"][number];
   operator?: "add" | "del";
   enableWrap?: boolean;
-  enableTemplate?: boolean;
 }) => {
   if (!syntaxLine) {
-    return (
-      <DiffString
-        rawLine={rawLine}
-        diffLine={diffLine}
-        operator={operator}
-        enableWrap={enableWrap}
-        enableTemplate={enableTemplate}
-      />
-    );
+    return <DiffString rawLine={rawLine} diffLine={diffLine} operator={operator} enableWrap={enableWrap} />;
   }
 
   const changes = diffLine?.changes;
@@ -185,11 +123,11 @@ const DiffSyntax = ({
   if (changes?.hasLineChange) {
     const isNewLineSymbolChanged = changes.newLineSymbol;
 
-    if (enableTemplate && !diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
-      getSyntaxDiffTemplate({ diffLine, syntaxLine, operator });
+    if (!diffLine?.syntaxTemplate && typeof getSyntaxDiffTemplate === "function") {
+      getSyntaxDiffTemplate({ diffFile, diffLine, syntaxLine, operator });
     }
 
-    if (enableTemplate && diffLine?.syntaxTemplate) {
+    if (diffLine?.syntaxTemplate) {
       return (
         <span className="diff-line-syntax-raw">
           <span data-template dangerouslySetInnerHTML={{ __html: diffLine.syntaxTemplate }} />
@@ -207,95 +145,14 @@ const DiffSyntax = ({
           )}
         </span>
       );
-    } else {
-      // TODO remove
-      const range = changes.range;
-
-      return (
-        <span className="diff-line-syntax-raw">
-          <span data-range-start={range.location} data-range-end={range.location + range.length}>
-            {syntaxLine.nodeList?.map(({ node, wrapper }, index) => {
-              if (node.endIndex < range.location || range.location + range.length < node.startIndex) {
-                return (
-                  <span
-                    key={index}
-                    data-start={node.startIndex}
-                    data-end={node.endIndex}
-                    className={wrapper?.properties?.className?.join(" ")}
-                    style={getStyleObjectFromString(wrapper?.properties?.style || "")}
-                  >
-                    {node.value}
-                  </span>
-                );
-              } else {
-                const index1 = range.location - node.startIndex;
-                const index2 = index1 < 0 ? 0 : index1;
-                const str1 = node.value.slice(0, index2);
-                const str2 = node.value.slice(index2, index1 + range.length);
-                const str3 = node.value.slice(index1 + range.length);
-                const isStart = str1.length || range.location === node.startIndex;
-                const isEnd = str3.length || node.endIndex === range.location + range.length - 1;
-                const isLast = str2.includes("\n");
-                const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
-                return (
-                  <span
-                    key={index}
-                    data-start={node.startIndex}
-                    data-end={node.endIndex}
-                    className={wrapper?.properties?.className?.join(" ")}
-                    style={getStyleObjectFromString(wrapper?.properties?.style || "")}
-                  >
-                    {str1}
-                    <span
-                      data-diff-highlight
-                      style={{
-                        backgroundColor:
-                          operator === "add"
-                            ? `var(${addContentHighlightBGName})`
-                            : `var(${delContentHighlightBGName})`,
-                        borderTopLeftRadius: isStart ? "0.2em" : undefined,
-                        borderBottomLeftRadius: isStart ? "0.2em" : undefined,
-                        borderTopRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                        borderBottomRightRadius: isEnd || isLast ? "0.2em" : undefined,
-                      }}
-                    >
-                      {isLast ? (
-                        <>
-                          {_str2}
-                          <span data-newline-symbol>{getSymbol(isNewLineSymbolChanged)}</span>
-                        </>
-                      ) : (
-                        str2
-                      )}
-                    </span>
-                    {str3}
-                  </span>
-                );
-              }
-            })}
-          </span>
-          {isNewLineSymbolChanged === NewLineSymbol.NEWLINE && (
-            <span
-              data-no-newline-at-end-of-file-symbol
-              className={enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
-              style={{
-                width: `var(${diffFontSizeName})`,
-                height: `var(${diffFontSizeName})`,
-              }}
-            >
-              <DiffNoNewLine />
-            </span>
-          )}
-        </span>
-      );
     }
   }
 
-  if (enableTemplate && !syntaxLine.template) {
+  if (!syntaxLine.template) {
     syntaxLine.template = getSyntaxLineTemplate(syntaxLine);
   }
 
-  if (enableTemplate && syntaxLine?.template) {
+  if (syntaxLine?.template) {
     return (
       <span className="diff-line-syntax-raw">
         <span data-template dangerouslySetInnerHTML={{ __html: syntaxLine.template }} />
@@ -321,8 +178,8 @@ const DiffSyntax = ({
 };
 
 export const DiffContent = ({
-  diffLine,
   diffFile,
+  diffLine,
   rawLine,
   plainLine,
   syntaxLine,
@@ -343,8 +200,6 @@ export const DiffContent = ({
 
   const isMaxLineLengthToIgnoreSyntax = syntaxLine?.nodeList?.length > 150;
 
-  const isEnableTemplate = diffFile.getIsEnableTemplate?.() ?? true;
-
   return (
     <div
       className="diff-line-content-item pl-[2.0em]"
@@ -364,10 +219,10 @@ export const DiffContent = ({
         <DiffSyntax
           operator={isAdded ? "add" : isDelete ? "del" : undefined}
           rawLine={rawLine}
+          diffFile={diffFile}
           diffLine={diffLine}
           syntaxLine={syntaxLine}
           enableWrap={enableWrap}
-          enableTemplate={isEnableTemplate}
         />
       ) : (
         <DiffString
@@ -376,7 +231,6 @@ export const DiffContent = ({
           diffLine={diffLine}
           plainLine={plainLine}
           enableWrap={enableWrap}
-          enableTemplate={isEnableTemplate}
         />
       )}
     </div>

package/src/components/DiffUnifiedContentLine.tsx

@@ -12,7 +12,6 @@ import {
   expandLineNumberColorName,
 } from "@git-diff-view/utils";
 import * as React from "react";
-import { memo } from "react";
 
 import { SplitSide } from "..";
 
@@ -167,148 +166,144 @@ const DiffUnifiedNewLine = ({
   );
 };
 
-const _DiffUnifiedLine = memo(
-  ({
-    index,
-    diffFile,
-    lineNumber,
-    enableWrap,
-    enableAddWidget,
-    enableHighlight,
-  }: {
-    index: number;
-    diffFile: DiffFile;
-    lineNumber: number;
-    enableWrap: boolean;
-    enableHighlight: boolean;
-    enableAddWidget: boolean;
-  }) => {
-    const unifiedLine = diffFile.getUnifiedLine(index);
+const InternalDiffUnifiedLine = ({
+  index,
+  diffFile,
+  lineNumber,
+  enableWrap,
+  enableAddWidget,
+  enableHighlight,
+}: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  enableWrap: boolean;
+  enableHighlight: boolean;
+  enableAddWidget: boolean;
+}) => {
+  const unifiedLine = diffFile.getUnifiedLine(index);
 
-    const { useDiffContext } = useDiffViewContext();
+  const { useDiffContext } = useDiffViewContext();
 
-    const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
+  const onAddWidgetClick = useDiffContext.getReadonlyState().onAddWidgetClick;
 
-    const { useWidget } = useDiffWidgetContext();
+  const { useWidget } = useDiffWidgetContext();
 
-    const setWidget = useWidget.getReadonlyState().setWidget;
+  const setWidget = useWidget.getReadonlyState().setWidget;
 
-    const hasDiff = unifiedLine.diff;
+  const hasDiff = unifiedLine.diff;
 
-    const hasChange = checkDiffLineIncludeChange(unifiedLine.diff);
+  const hasChange = checkDiffLineIncludeChange(unifiedLine.diff);
 
-    const rawLine = unifiedLine.value || "";
+  const rawLine = unifiedLine.value || "";
 
-    const diffLine = unifiedLine.diff;
+  const diffLine = unifiedLine.diff;
 
-    const newLineNumber = unifiedLine.newLineNumber;
+  const newLineNumber = unifiedLine.newLineNumber;
 
-    const oldLinenumber = unifiedLine.oldLineNumber;
+  const oldLinenumber = unifiedLine.oldLineNumber;
 
-    const syntaxLine = newLineNumber
-      ? diffFile.getNewSyntaxLine(newLineNumber)
-      : oldLinenumber
-        ? diffFile.getOldSyntaxLine(oldLinenumber)
-        : undefined;
+  const syntaxLine = newLineNumber
+    ? diffFile.getNewSyntaxLine(newLineNumber)
+    : oldLinenumber
+      ? diffFile.getOldSyntaxLine(oldLinenumber)
+      : undefined;
 
-    const plainLine = newLineNumber
-      ? diffFile.getNewPlainLine(newLineNumber)
-      : oldLinenumber
-        ? diffFile.getOldPlainLine(oldLinenumber)
-        : undefined;
+  const plainLine = newLineNumber
+    ? diffFile.getNewPlainLine(newLineNumber)
+    : oldLinenumber
+      ? diffFile.getOldPlainLine(oldLinenumber)
+      : undefined;
 
-    if (hasChange) {
-      if (unifiedLine.oldLineNumber) {
-        return (
-          <DiffUnifiedOldLine
-            index={lineNumber}
+  if (hasChange) {
+    if (unifiedLine.oldLineNumber) {
+      return (
+        <DiffUnifiedOldLine
+          index={lineNumber}
+          enableWrap={enableWrap}
+          diffFile={diffFile}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          setWidget={setWidget}
+          plainLine={plainLine}
+          syntaxLine={syntaxLine}
+          enableHighlight={enableHighlight}
+          enableAddWidget={enableAddWidget}
+          lineNumber={unifiedLine.oldLineNumber}
+          onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+        />
+      );
+    } else {
+      return (
+        <DiffUnifiedNewLine
+          index={lineNumber}
+          enableWrap={enableWrap}
+          rawLine={rawLine}
+          diffLine={diffLine}
+          diffFile={diffFile}
+          setWidget={setWidget}
+          plainLine={plainLine}
+          syntaxLine={syntaxLine}
+          enableHighlight={enableHighlight}
+          enableAddWidget={enableAddWidget}
+          lineNumber={unifiedLine.newLineNumber!}
+          onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+        />
+      );
+    }
+  } else {
+    return (
+      <tr data-line={lineNumber} data-state={unifiedLine.diff ? "diff" : "plain"} className="diff-line group">
+        <td
+          className="diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
+          style={{
+            color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+            width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+            maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+            minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
+            backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
+          }}
+        >
+          {enableAddWidget && hasDiff && (
+            <DiffUnifiedAddWidget
+              index={index}
+              diffFile={diffFile}
+              lineNumber={unifiedLine.newLineNumber}
+              side={SplitSide.new}
+              onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
+              onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber, side })}
+            />
+          )}
+          <div className="flex opacity-[0.5]">
+            <span data-line-old-num={unifiedLine.oldLineNumber} className="inline-block w-[50%]">
+              {unifiedLine.oldLineNumber}
+            </span>
+            <span className="w-[10px] shrink-0" />
+            <span data-line-new-num={unifiedLine.newLineNumber} className="inline-block w-[50%]">
+              {unifiedLine.newLineNumber}
+            </span>
+          </div>
+        </td>
+        <td
+          className="diff-line-content pr-[10px] align-top"
+          style={{
+            backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
+          }}
+        >
+          <DiffContent
             enableWrap={enableWrap}
             diffFile={diffFile}
-            rawLine={rawLine}
-            diffLine={diffLine}
-            setWidget={setWidget}
-            plainLine={plainLine}
-            syntaxLine={syntaxLine}
             enableHighlight={enableHighlight}
-            enableAddWidget={enableAddWidget}
-            lineNumber={unifiedLine.oldLineNumber}
-            onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
-          />
-        );
-      } else {
-        return (
-          <DiffUnifiedNewLine
-            index={lineNumber}
-            enableWrap={enableWrap}
             rawLine={rawLine}
             diffLine={diffLine}
-            diffFile={diffFile}
-            setWidget={setWidget}
             plainLine={plainLine}
             syntaxLine={syntaxLine}
-            enableHighlight={enableHighlight}
-            enableAddWidget={enableAddWidget}
-            lineNumber={unifiedLine.newLineNumber!}
-            onAddWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
           />
-        );
-      }
-    } else {
-      return (
-        <tr data-line={lineNumber} data-state={unifiedLine.diff ? "diff" : "plain"} className="diff-line group">
-          <td
-            className="diff-line-num sticky left-0 z-[1] w-[1%] min-w-[100px] select-none whitespace-nowrap pl-[10px] pr-[10px] text-right align-top"
-            style={{
-              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
-              width: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-              maxWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-              minWidth: `calc(calc(var(${diffAsideWidthName}) + 5px) * 2)`,
-              backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
-            }}
-          >
-            {enableAddWidget && hasDiff && (
-              <DiffUnifiedAddWidget
-                index={index}
-                diffFile={diffFile}
-                lineNumber={unifiedLine.newLineNumber}
-                side={SplitSide.new}
-                onWidgetClick={(...props) => onAddWidgetClick.current?.(...props)}
-                onOpenAddWidget={(lineNumber, side) => setWidget({ lineNumber, side })}
-              />
-            )}
-            <div className="flex opacity-[0.5]">
-              <span data-line-old-num={unifiedLine.oldLineNumber} className="inline-block w-[50%]">
-                {unifiedLine.oldLineNumber}
-              </span>
-              <span className="w-[10px] shrink-0" />
-              <span data-line-new-num={unifiedLine.newLineNumber} className="inline-block w-[50%]">
-                {unifiedLine.newLineNumber}
-              </span>
-            </div>
-          </td>
-          <td
-            className="diff-line-content pr-[10px] align-top"
-            style={{
-              backgroundColor: hasDiff ? `var(${plainContentBGName})` : `var(${expandContentBGName})`,
-            }}
-          >
-            <DiffContent
-              enableWrap={enableWrap}
-              diffFile={diffFile}
-              enableHighlight={enableHighlight}
-              rawLine={rawLine}
-              diffLine={diffLine}
-              plainLine={plainLine}
-              syntaxLine={syntaxLine}
-            />
-          </td>
-        </tr>
-      );
-    }
+        </td>
+      </tr>
+    );
   }
-);
-
-_DiffUnifiedLine.displayName = "_DiffUnifiedLine";
+};
 
 export const DiffUnifiedContentLine = ({
   index,
@@ -330,7 +325,7 @@ export const DiffUnifiedContentLine = ({
   if (unifiedLine?.isHidden) return null;
 
   return (
-    <_DiffUnifiedLine
+    <InternalDiffUnifiedLine
       index={index}
       diffFile={diffFile}
       lineNumber={lineNumber}