@git-diff-view/react 0.0.30 → 0.0.31

package/index.d.ts

@@ -1,5 +1,6 @@
 // Generated by dts-bundle-generator v9.5.1
 
+import { Root } from 'hast';
 import { CSSProperties, ForwardedRef, ReactNode, RefObject } from 'react';
 
 declare class Cache$1<K, V> extends Map<K, V> {
@@ -276,8 +277,10 @@ export declare class DiffLine {
 	changes?: IRange;
 	diffChanges?: DiffRange;
 	plainTemplate?: string;
+	plainTemplateMode?: "fast-diff" | "relative";
 	syntaxTemplate?: string;
-	constructor(text: string, type: DiffLineType, originalLineNumber: number | null, oldLineNumber: number | null, newLineNumber: number | null, noTrailingNewLine?: boolean, changes?: IRange, diffChanges?: DiffRange, plainTemplate?: string, 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, plainTemplate?: string, plainTemplateMode?: "fast-diff" | "relative", syntaxTemplate?: string, syntaxTemplateMode?: "fast-diff" | "relative");
 	withNoTrailingNewLine(noTrailingNewLine: boolean): DiffLine;
 	isIncludeableLine(): boolean;
 	equals(other: DiffLine): boolean;
@@ -426,6 +429,7 @@ export declare const checkCurrentLineIsHidden: (diffFile: DiffFile, lineNumber:
 	unified: boolean;
 };
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
+export declare const defaultTransform: (content: string) => string;
 export declare const disableCache: () => void;
 export declare const getCurrentComposeLength: () => number;
 export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, getAdditionSyntax, getDeletionSyntax, }: {
@@ -434,12 +438,18 @@ export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[]
 	getAdditionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
 	getDeletionSyntax: (lineNumber: number) => SyntaxLineWithTemplate;
 }) => void;
+export declare const getEnableFastDiffTemplate: () => boolean;
 export declare const getLang: (fileName: string) => string;
 export declare const getPlainDiffTemplate: ({ diffLine, rawLine, operator, }: {
 	diffLine: DiffLine;
 	rawLine: string;
 	operator: "add" | "del";
 }) => void;
+export declare const getPlainDiffTemplateByFastDiff: ({ diffLine, rawLine, operator, }: {
+	diffLine: DiffLine;
+	rawLine: string;
+	operator: "add" | "del";
+}) => void;
 export declare const getPlainLineTemplate: (line: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
 export declare const getSplitLines: (diffFile: DiffFile) => DiffSplitLineItem[];
@@ -448,6 +458,11 @@ export declare const getSyntaxDiffTemplate: ({ diffLine, syntaxLine, operator, }
 	syntaxLine: SyntaxLineWithTemplate;
 	operator: "add" | "del";
 }) => void;
+export declare const getSyntaxDiffTemplateByFastDiff: ({ diffLine, syntaxLine, operator, }: {
+	diffLine: DiffLine;
+	syntaxLine: SyntaxLineWithTemplate;
+	operator: "add" | "del";
+}) => void;
 export declare const getSyntaxLineTemplate: (line: SyntaxLine) => string;
 export declare const getUnifiedContentLine: (diffFile: DiffFile) => DiffUnifiedContentLineItem[];
 export declare const getUnifiedLines: (diffFile: DiffFile) => DiffUnifiedLineItem[];
@@ -496,6 +511,7 @@ export declare const processTransformForFile: (content: string) => string;
  */
 export declare const processTransformTemplateContent: (content: string) => string;
 export declare const resetDefaultComposeLength: () => void;
+export declare const resetEnableFastDiffTemplate: () => void;
 /**
  * Resets all transformation functions to their default state and disables transformation.
  *
@@ -505,6 +521,7 @@ export declare const resetDefaultComposeLength: () => void;
  * ```
  */
 export declare const resetTransform: () => void;
+export declare const setEnableFastDiffTemplate: (enable: boolean) => void;
 /**
  * ⚠️ **WARNING: DANGEROUS OPERATION** ⚠️
  *
@@ -617,7 +634,8 @@ export interface DiffRange {
 	readonly range: {
 		type: 1 | -1 | 0;
 		str: string;
-		location: number;
+		startIndex: number;
+		endIndex: number;
 		length: number;
 	}[];
 	readonly hasLineChange?: boolean;
@@ -682,7 +700,7 @@ export interface UnifiedLineItem {
 	isHidden?: boolean;
 	_isHidden?: boolean;
 }
-export type DiffAST = ReturnType<typeof lowlight.highlight>;
+export type DiffAST = Root;
 export type DiffHighlighter = {
 	name: string;
 	type: "class" | "style" | string;
@@ -780,7 +798,6 @@ export type SyntaxLine = {
 export type SyntaxLineWithTemplate = SyntaxLine & {
 	template?: string;
 };
-// Generated by dts-bundle-generator v9.5.1
 export type SyntaxNode = {
 	type: string;
 	value: string;

package/package.json

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

package/src/_com.css

@@ -71,6 +71,10 @@ td {
   text-align: left;
 }
 
+td {
+  padding: 0;
+}
+
 .diff-line-old-num,
 .diff-line-new-num,
 .diff-line-num {

package/src/components/DiffSplitContentLineNormal.tsx

@@ -13,7 +13,6 @@ import { SplitSide } from "..";
 
 import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
-// import { DiffContent_v2 } from "./DiffContent_v2";
 import { useDiffViewContext } from "./DiffViewContext";
 import { useDiffWidgetContext } from "./DiffWidgetContext";
 

package/src/components/DiffSplitContentLineWrap.tsx

@@ -13,7 +13,6 @@ import { SplitSide } from "..";
 
 import { DiffSplitAddWidget } from "./DiffAddWidget";
 import { DiffContent } from "./DiffContent";
-// import { DiffContent_v2 } from "./DiffContent_v2";
 import { useDiffViewContext } from "./DiffViewContext";
 import { useDiffWidgetContext } from "./DiffWidgetContext";
 
@@ -77,7 +76,10 @@ const InternalDiffSplitLine = ({
           <td
             className="diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top"
             data-side={SplitSide[SplitSide.old]}
-            style={{ backgroundColor: oldLineNumberBG, color: `var(${plainLineNumberColorName})` }}
+            style={{
+              backgroundColor: oldLineNumberBG,
+              color: `var(${hasDiff ? plainLineNumberColorName : expandLineNumberColorName})`,
+            }}
           >
             {hasDiff && enableAddWidget && (
               <DiffSplitAddWidget

package/src/components/DiffSplitViewNormal.tsx

@@ -51,7 +51,7 @@ const DiffSplitViewTable = ({
           <th scope="col">{SplitSide[side]} line content</th>
         </tr>
       </thead>
-      <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+      <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
         {lines.map((line) => (
           <Fragment key={line.index}>
             <DiffSplitHunkLine index={line.index} side={side} lineNumber={line.lineNumber} diffFile={diffFile} />

package/src/components/DiffSplitViewWrap.tsx

@@ -119,7 +119,7 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
               <th scope="col">new line content</th>
             </tr>
           </thead>
-          <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+          <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
             {lines.map((line) => (
               <Fragment key={line.index}>
                 <DiffSplitHunkLine index={line.index} lineNumber={line.lineNumber} diffFile={diffFile} />

package/src/components/DiffUnifiedView.tsx

@@ -135,7 +135,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
                 <th scope="col">line content</th>
               </tr>
             </thead>
-            <tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
+            <tbody className="diff-table-body leading-[1.6]" onMouseDownCapture={onMouseDown}>
               {lines.map((item) => (
                 <Fragment key={item.index}>
                   <DiffUnifiedHunkLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />

package/src/components/DiffView.tsx

@@ -299,19 +299,23 @@ const DiffViewWithRef = <T extends unknown>(
   useEffect(() => {
     if (!diffFile) return;
     diffFile.initTheme(diffViewTheme);
+
     diffFile.initRaw();
+
     diffFile.buildSplitDiffLines();
+
     diffFile.buildUnifiedDiffLines();
   }, [diffFile, diffViewTheme]);
 
   useEffect(() => {
     if (!diffFile) return;
-    
+
     if (props.diffViewHighlight) {
       diffFile.initSyntax({ registerHighlighter });
-      diffFile.notifyAll();
     }
-  }, [diffFile, props.diffViewHighlight, registerHighlighter]);
+
+    diffFile.notifyAll();
+  }, [diffFile, props.diffViewHighlight, registerHighlighter, diffViewTheme]);
 
   useEffect(() => {
     if (!diffFile) return;
@@ -326,7 +330,7 @@ const DiffViewWithRef = <T extends unknown>(
     const cb = diffFile.subscribe(init);
 
     return cb;
-  }, [diffFile, diffViewTheme]);
+  }, [diffFile]);
 
   // fix react strict mode error
   useUnmount(() => (__DEV__ ? diffFile?._destroy?.() : diffFile?.clear?.()), [diffFile]);

package/src/components/v2/DiffSplitViewNormal_v2.tsx

@@ -55,6 +55,8 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
 
   const ref = useRef<HTMLStyleElement>();
 
+  const tempRef = useRef<SplitSide>();
+
   const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
 
   const { useDiffContext } = useDiffViewContext();
@@ -105,13 +107,19 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
       const state = ele.getAttribute("data-state");
       const side = ele.getAttribute("data-side");
       if (side) {
-        setStyle(SplitSide[side]);
-        removeAllSelection();
+        if (tempRef.current !== SplitSide[side]) {
+          tempRef.current = SplitSide[side];
+          setStyle(SplitSide[side]);
+          removeAllSelection();
+        }
       }
       if (state) {
         if (state === "extend" || state === "hunk" || state === "widget") {
-          setStyle(undefined);
-          removeAllSelection();
+          if (tempRef.current !== undefined) {
+            tempRef.current = undefined;
+            setStyle(undefined);
+            removeAllSelection();
+          }
           return;
         } else {
           return;
@@ -125,6 +133,16 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
   return (
     <div className="split-diff-view split-diff-view-normal flex w-full basis-[50%]">
       <style data-select-style ref={ref} />
+      <style>
+        {`
+.diff-tailwindcss-wrapper .diff-add-widget-wrapper.diff-add-widget-wrapper.diff-add-widget-wrapper {
+  transform: translate(-50%, -50%) !important;
+}
+.diff-tailwindcss-wrapper .diff-add-widget-wrapper.diff-add-widget-wrapper.diff-add-widget-wrapper:hover {
+  transform: translate(-50%, -50%) scale(1.1) !important;
+}
+        `}
+      </style>
       <div
         className="old-diff-table-wrapper diff-table-scroll-container w-full overflow-x-auto overflow-y-hidden"
         ref={ref1}

package/styles/diff-view-pure.css

@@ -155,6 +155,9 @@
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.diff-tailwindcss-wrapper .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .diff-tailwindcss-wrapper .cursor-pointer {
   cursor: pointer;
 }
@@ -247,9 +250,6 @@
 .diff-tailwindcss-wrapper .text-\[1\.2em\] {
   font-size: 1.2em;
 }
-.diff-tailwindcss-wrapper .leading-\[1\.4\] {
-  line-height: 1.4;
-}
 .diff-tailwindcss-wrapper .leading-\[1\.6\] {
   line-height: 1.6;
 }
@@ -260,9 +260,6 @@
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;
 }
-.diff-tailwindcss-wrapper .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .diff-tailwindcss-wrapper .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -335,6 +332,9 @@
   border-width: 0px;
   text-align: left;
 }
+.diff-tailwindcss-wrapper td {
+  padding: 0;
+}
 .diff-tailwindcss-wrapper .diff-line-old-num,
 .diff-tailwindcss-wrapper .diff-line-new-num,
 .diff-tailwindcss-wrapper .diff-line-num {

package/styles/diff-view.css

@@ -661,6 +661,9 @@ video {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.diff-tailwindcss-wrapper .transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .diff-tailwindcss-wrapper .cursor-pointer {
   cursor: pointer;
 }
@@ -753,9 +756,6 @@ video {
 .diff-tailwindcss-wrapper .text-\[1\.2em\] {
   font-size: 1.2em;
 }
-.diff-tailwindcss-wrapper .leading-\[1\.4\] {
-  line-height: 1.4;
-}
 .diff-tailwindcss-wrapper .leading-\[1\.6\] {
   line-height: 1.6;
 }
@@ -766,9 +766,6 @@ video {
 .diff-tailwindcss-wrapper .opacity-\[0\.5\] {
   opacity: 0.5;
 }
-.diff-tailwindcss-wrapper .filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .diff-tailwindcss-wrapper .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -841,6 +838,9 @@ video {
   border-width: 0px;
   text-align: left;
 }
+.diff-tailwindcss-wrapper td {
+  padding: 0;
+}
 .diff-tailwindcss-wrapper .diff-line-old-num,
 .diff-tailwindcss-wrapper .diff-line-new-num,
 .diff-tailwindcss-wrapper .diff-line-num {

package/src/components/DiffContent_v2.tsx

@@ -1,338 +0,0 @@
-import { DiffLineType, type DiffFile, type DiffLine, type diffChanges, type SyntaxLine } from "@git-diff-view/core";
-import {
-  addContentHighlightBGName,
-  delContentHighlightBGName,
-  diffFontSizeName,
-  getSymbol,
-  NewLineSymbol,
-} from "@git-diff-view/utils";
-import * as React from "react";
-
-import { getStyleObjectFromString } from "./DiffContent";
-import { DiffNoNewLine } from "./DiffNoNewLine";
-
-const RenderRange = ({
-  str,
-  startIndex,
-  endIndex,
-  ranges,
-  isAdd,
-  indexRef,
-}: {
-  str: string;
-  startIndex: number;
-  endIndex: number;
-  isAdd: boolean;
-  ranges: ReturnType<typeof diffChanges>["addRange"]["range"];
-  indexRef: { current: number };
-}) => {
-  if (!str) return null;
-
-  const index = indexRef.current;
-
-  const range = ranges[index];
-
-  if (!range || endIndex < range.location || range.location + range.length < startIndex) return str.replace("\n", "");
-
-  const index1 = range.location - startIndex;
-  const index2 = index1 < 0 ? 0 : index1;
-  const str1 = str.slice(0, index2);
-  const str2 = str.slice(index2, index1 + range.length);
-  const str3 = str.slice(index1 + range.length);
-  const isStart = str1.length || range.location === startIndex;
-
-  const isEnd = str3.length || endIndex === range.location + range.length - 1;
-
-  if (isEnd && str3.length) indexRef.current++;
-
-  const isLast = str2.includes("\n");
-
-  const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
-
-  return (
-    <span
-      data-range-start={range.location}
-      data-range-end={range.location + range.length}
-      data-total={ranges.length}
-      data-index={index}
-    >
-      <span data-start={startIndex} data-end={endIndex}>
-        {str1}
-        <span
-          data-diff-highlight
-          style={{
-            backgroundColor: isAdd ? `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,
-          }}
-        >
-          {_str2}
-        </span>
-        {/* 可能会出现一个node跨越多个range的情况 */}
-        {RenderRange({
-          str: str3,
-          startIndex: startIndex + str1.length + str2.length,
-          endIndex,
-          ranges,
-          isAdd,
-          indexRef,
-        })}
-      </span>
-    </span>
-  );
-};
-
-// TODO
-const DiffSyntax = ({
-  rawLine,
-  diffLine,
-  operator,
-  syntaxLine,
-  enableWrap,
-}: {
-  rawLine: string;
-  diffLine?: DiffLine;
-  syntaxLine?: SyntaxLine;
-  operator?: "add" | "del";
-  enableWrap?: boolean;
-}) => {
-  if (!syntaxLine) {
-    return <DiffString rawLine={rawLine} diffLine={diffLine} operator={operator} />;
-  }
-
-  const diffRange = diffLine?.diffChanges;
-
-  if (diffRange?.hasLineChange) {
-    const isAdd = operator === "add";
-
-    const targetRange = diffRange.range.filter((i) => i.type === (isAdd ? 1 : -1));
-
-    const isNewLineSymbolChanged = diffRange.newLineSymbol;
-
-    const newLineSymbol = getSymbol(isNewLineSymbolChanged);
-
-    const hasNoTrailingNewLine = isNewLineSymbolChanged === NewLineSymbol.NEWLINE;
-
-    const rangeIndexRef = { current: 0 };
-
-    return (
-      <span className="diff-line-syntax-raw">
-        {syntaxLine.nodeList?.map(({ node, wrapper }, index) => {
-          const range = targetRange[rangeIndexRef.current];
-          if (!range || 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.replace("\n", "")}
-              </span>
-            );
-          } else {
-            return (
-              <span
-                key={index}
-                data-start={node.startIndex}
-                data-end={node.endIndex}
-                className={wrapper?.properties?.className?.join(" ")}
-                style={getStyleObjectFromString(wrapper?.properties?.style || "")}
-              >
-                {/* 将组件转换为函数调用，避免同级渲染时后续组件的index没有正确更新的问题 */}
-                {RenderRange({
-                  str: node.value,
-                  startIndex: node.startIndex,
-                  endIndex: node.endIndex,
-                  ranges: targetRange,
-                  isAdd,
-                  indexRef: rangeIndexRef,
-                })}
-              </span>
-            );
-          }
-        })}
-
-        {newLineSymbol && (
-          <span
-            data-newline-symbol
-            data-diff-highlight
-            className="rounded-[0.2em]"
-            style={{
-              backgroundColor: isAdd ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-            }}
-          >
-            {newLineSymbol}
-          </span>
-        )}
-
-        {hasNoTrailingNewLine && (
-          <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>
-    );
-  }
-
-  return (
-    <span className="diff-line-syntax-raw">
-      {syntaxLine?.nodeList?.map(({ node, wrapper }, index) => (
-        <span
-          key={index}
-          data-start={node.startIndex}
-          data-end={node.endIndex}
-          className={wrapper?.properties?.className?.join(" ")}
-          style={getStyleObjectFromString(wrapper?.properties?.style || "")}
-        >
-          {node.value}
-        </span>
-      ))}
-    </span>
-  );
-};
-
-// TODO
-const DiffString = ({
-  rawLine,
-  diffLine,
-  operator,
-  enableWrap,
-}: {
-  rawLine: string;
-  diffLine?: DiffLine;
-  operator?: "add" | "del";
-  enableWrap?: boolean;
-}) => {
-  const diffRange = diffLine?.diffChanges;
-
-  const isAdd = operator === "add";
-
-  if (diffRange?.hasLineChange) {
-    const targetRange = diffRange.range;
-
-    const isNewLineSymbolChanged = diffRange.newLineSymbol;
-
-    const newLineSymbol = getSymbol(isNewLineSymbolChanged);
-
-    const hasNoTrailingNewLine = isNewLineSymbolChanged === NewLineSymbol.NEWLINE;
-
-    return (
-      <span className="diff-line-content-raw">
-        {targetRange.map(({ type, str, location, length }, index) => {
-          if (type === 0) {
-            return <span key={index}>{str}</span>;
-          } else {
-            return (
-              <span key={index} data-range-start={location} data-range-end={location + length}>
-                <span
-                  data-diff-highlight
-                  className="rounded-[0.2em]"
-                  style={{
-                    backgroundColor: isAdd ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-                  }}
-                >
-                  {str}
-                </span>
-              </span>
-            );
-          }
-        })}
-
-        {newLineSymbol && (
-          <span
-            data-newline-symbol
-            data-diff-highlight
-            className="rounded-[0.2em]"
-            style={{
-              backgroundColor: isAdd ? `var(${addContentHighlightBGName})` : `var(${delContentHighlightBGName})`,
-            }}
-          >
-            {newLineSymbol}
-          </span>
-        )}
-
-        {hasNoTrailingNewLine && (
-          <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>
-    );
-  } else {
-    return <span className="diff-line-content-raw">{rawLine}</span>;
-  }
-};
-
-// TODO
-export const DiffContent_v2 = ({
-  diffLine,
-  rawLine,
-  syntaxLine,
-  enableWrap,
-  enableHighlight,
-}: {
-  rawLine: string;
-  syntaxLine?: SyntaxLine;
-  diffLine?: DiffLine;
-  diffFile: DiffFile;
-  enableWrap: boolean;
-  enableHighlight: boolean;
-}) => {
-  const isAdded = diffLine?.type === DiffLineType.Add;
-
-  const isDelete = diffLine?.type === DiffLineType.Delete;
-
-  const isMaxLineLengthToIgnoreSyntax = syntaxLine?.nodeList?.length > 150;
-
-  return (
-    <div
-      className="diff-line-content-item pl-[2.0em]"
-      // data-val={rawLine}
-      style={{
-        whiteSpace: enableWrap ? "pre-wrap" : "pre",
-        wordBreak: enableWrap ? "break-all" : "initial",
-      }}
-    >
-      <span
-        data-operator={isAdded ? "+" : isDelete ? "-" : undefined}
-        className="diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]"
-      >
-        {isAdded ? "+" : isDelete ? "-" : " "}
-      </span>
-      {enableHighlight && syntaxLine && !isMaxLineLengthToIgnoreSyntax ? (
-        <DiffSyntax
-          operator={isAdded ? "add" : isDelete ? "del" : undefined}
-          rawLine={rawLine}
-          diffLine={diffLine}
-          syntaxLine={syntaxLine}
-          enableWrap={enableWrap}
-        />
-      ) : (
-        <DiffString
-          operator={isAdded ? "add" : isDelete ? "del" : undefined}
-          rawLine={rawLine}
-          diffLine={diffLine}
-          enableWrap={enableWrap}
-        />
-      )}
-    </div>
-  );
-};