style

Author: MrWangJustToDo

packages/react/src/components/DiffContent.tsx

@@ -1,5 +1,11 @@
 import { DiffLineType, NewLineSymbol, type DiffFile, type DiffLine, type SyntaxLine } from "@git-diff-view/core";
-import { memoFunc, addContentHighlightBGName, delContentHighlightBGName, diffFontSizeName } from "@git-diff-view/utils";
+import {
+  memoFunc,
+  addContentHighlightBGName,
+  delContentHighlightBGName,
+  diffFontSizeName,
+  getSymbol,
+} from "@git-diff-view/utils";
 import * as React from "react";
 
 import { DiffNoNewLine } from "./DiffNoNewLine";
@@ -32,19 +38,6 @@ export const getStyleObjectFromString = memoFunc((str: string) => {
   return style;
 });
 
-export const getSymbol = (symbol: NewLineSymbol) => {
-  switch (symbol) {
-    case NewLineSymbol.LF:
-      return "␊";
-    case NewLineSymbol.CR:
-      return "␍";
-    case NewLineSymbol.CRLF:
-      return "␍␊";
-    default:
-      return "";
-  }
-};
-
 const DiffString = ({
   rawLine,
   diffLine,

packages/react/src/components/DiffContent_v2.tsx

@@ -6,10 +6,15 @@ import {
   type diffChanges,
   type SyntaxLine,
 } from "@git-diff-view/core";
-import { addContentHighlightBGName, delContentHighlightBGName, diffFontSizeName } from "@git-diff-view/utils";
+import {
+  addContentHighlightBGName,
+  delContentHighlightBGName,
+  diffFontSizeName,
+  getSymbol,
+} from "@git-diff-view/utils";
 import * as React from "react";
 
-import { getStyleObjectFromString, getSymbol } from "./DiffContent";
+import { getStyleObjectFromString } from "./DiffContent";
 import { DiffNoNewLine } from "./DiffNoNewLine";
 
 const RenderRange = ({

packages/react/src/components/DiffSplitHunkLineWrap.tsx

@@ -274,7 +274,7 @@ const DiffSplitHunkLineGitLab = ({
         )}
       </td>
       <td
-        className="diff-line-hunk-content pr-[10px] align-middle"
+        className="diff-line-hunk-content relative pr-[10px] align-middle"
         style={{ backgroundColor: `var(${hunkContentBGName})` }}
       >
         <div

packages/react/src/components/DiffSplitViewNormal.tsx

@@ -1,6 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { getSplitContentLines, type DiffFile } from "@git-diff-view/core";
-import { removeAllSelection, syncScroll, diffFontSizeName, borderColorName, diffAsideWidthName } from "@git-diff-view/utils";
+import {
+  removeAllSelection,
+  syncScroll,
+  diffFontSizeName,
+  borderColorName,
+  diffAsideWidthName,
+} from "@git-diff-view/utils";
 import { Fragment, memo, useEffect, useRef } from "react";
 import * as React from "react";
 import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";

packages/react/src/components/v2/DiffSplitHunkLineWrap_v2.tsx

@@ -206,7 +206,7 @@ const DiffSplitHunkLineGitLab = ({
       </div>
       <div className="diff-split-line w-[1px] flex-shrink-0" style={{ backgroundColor: `var(${borderColorName})` }} />
       <div
-        className="diff-line-hunk-action flex w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
+        className="diff-line-hunk-action flex relative w-[1%] min-w-[40px] select-none flex-col items-center justify-center p-[1px]"
         style={{
           backgroundColor: `var(${hunkLineNumberBGName})`,
           color: `var(${plainLineNumberColorName})`,
@@ -268,7 +268,7 @@ const DiffSplitHunkLineGitLab = ({
         )}
       </div>
       <div
-        className="diff-line-hunk-content flex w-full items-center px-[10px]"
+        className="diff-line-hunk-content flex relative w-full items-center px-[10px]"
         style={{ backgroundColor: `var(${hunkContentBGName})`, color: `var(${hunkContentColorName})` }}
       >
         {currentHunk.splitInfo?.plainText || currentHunk.text}

packages/utils/index.d.ts

@@ -34,5 +34,14 @@ export declare const syncScroll: (left: HTMLElement, right: HTMLElement) => () =
 export declare const diffFontSizeName = "--diff-font-size--";
 export declare const diffAsideWidthName = "--diff-aside-width--";
 export declare const memoFunc: <T extends Function>(func: T) => T;
+declare enum NewLineSymbol {
+	CRLF = 1,
+	CR = 2,
+	LF = 3,
+	NEWLINE = 4,
+	NORMAL = 5,
+	NULL = 6
+}
+export declare const getSymbol: (symbol: NewLineSymbol) => "" | "\u240A" | "\u240D" | "\u240D\u240A";
 
 export {};

packages/utils/package.json

@@ -40,5 +40,6 @@
     ]
   },
   "dependencies": {
+    "@git-diff-view/core": "^0.0.23"
   }
 }

packages/utils/src/index.ts

@@ -3,3 +3,4 @@ export * from "./color";
 export * from "./dom";
 export * from "./size";
 export * from "./utils";
+export * from "./symbol";

packages/utils/src/symbol.ts

@@ -0,0 +1,14 @@
+import { NewLineSymbol } from "@git-diff-view/core";
+
+export const getSymbol = (symbol: NewLineSymbol) => {
+  switch (symbol) {
+    case NewLineSymbol.LF:
+      return "␊";
+    case NewLineSymbol.CR:
+      return "␍";
+    case NewLineSymbol.CRLF:
+      return "␍␊";
+    default:
+      return "";
+  }
+};

packages/vue/src/components/DiffContent.tsx

@@ -1,21 +1,13 @@
 import { DiffLineType, NewLineSymbol, type DiffFile, type DiffLine, type SyntaxLine } from "@git-diff-view/core";
-import { addContentHighlightBGName, delContentHighlightBGName, diffFontSizeName } from "@git-diff-view/utils";
+import {
+  addContentHighlightBGName,
+  delContentHighlightBGName,
+  diffFontSizeName,
+  getSymbol,
+} from "@git-diff-view/utils";
 
 import { DiffNoNewLine } from "./DiffNoNewLine";
 
-const getSymbol = (symbol: NewLineSymbol) => {
-  switch (symbol) {
-    case NewLineSymbol.LF:
-      return "␊";
-    case NewLineSymbol.CR:
-      return "␍";
-    case NewLineSymbol.CRLF:
-      return "␍␊";
-    default:
-      return "";
-  }
-};
-
 const DiffString = ({
   rawLine,
   diffLine,