diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
index e22ade9..5e9a752 100644
--- a/packages/core/index.d.ts
+++ b/packages/core/index.d.ts
@@ -349,7 +349,10 @@ export declare const HiddenBidiCharsRegex: RegExp;
 export declare const _cacheMap: Cache$1<string, File$1>;
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
 export declare const composeLen = 40;
-export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[]) => void;
+export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, }: {
+	getAdditionRaw: (lineNumber: number) => string;
+	getDeletionRaw: (lineNumber: number) => string;
+}) => void;
 export declare const getFile: (raw: string, lang: string, theme: "light" | "dark", fileName?: string, uuid?: string) => File$1;
 export declare const getLang: (fileName: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
diff --git a/packages/core/src/diff-file.ts b/packages/core/src/diff-file.ts
index 9f161f9..f52f385 100644
--- a/packages/core/src/diff-file.ts
+++ b/packages/core/src/diff-file.ts
@@ -383,6 +383,14 @@ export class DiffFile {
   #composeDiff() {
     if (!this.#diffListResults?.length) return;
 
+    const getAdditionRaw = (lineNumber: number) => {
+      return this.#getNewRawLine(lineNumber);
+    };
+
+    const getDeletionRaw = (lineNumber: number) => {
+      return this.#getOldRawLine(lineNumber);
+    };
+
     this.#diffListResults.forEach((item) => {
       const hunks = item.hunks;
       hunks.forEach((hunk) => {
@@ -394,12 +402,12 @@ export class DiffFile {
           } else if (line.type === DiffLineType.Delete) {
             deletions.push(line);
           } else {
-            getDiffRange(additions, deletions);
+            getDiffRange(additions, deletions, { getAdditionRaw, getDeletionRaw });
             additions = [];
             deletions = [];
           }
         });
-        getDiffRange(additions, deletions);
+        getDiffRange(additions, deletions, { getAdditionRaw, getDeletionRaw });
       });
     });
 
@@ -539,10 +547,10 @@ export class DiffFile {
 
   initRaw() {
     if (this.#hasInitRaw) return;
-    this.#doDiff();
-    this.#composeDiff();
     this.#doFile();
     this.#composeRaw();
+    this.#doDiff();
+    this.#composeDiff();
     this.#composeFile();
     this.#hasInitRaw = true;
   }
diff --git a/packages/core/src/parse/change-range.ts b/packages/core/src/parse/change-range.ts
index d79a214..443add5 100644
--- a/packages/core/src/parse/change-range.ts
+++ b/packages/core/src/parse/change-range.ts
@@ -108,7 +108,7 @@ function checkNewLineSymbolChange(
   };
 }
 
-// TODO maybe could use the original content line
+// TODO maybe could use the original content line.  fixed
 /** Get the changed ranges in the strings, relative to each other. */
 export function relativeChanges(addition: DiffLine, deletion: DiffLine): { addRange: IRange; delRange: IRange } {
   const stringA = addition.text;
diff --git a/packages/core/src/parse/diff-tool.ts b/packages/core/src/parse/diff-tool.ts
index e97b8ff..20995bd 100644
--- a/packages/core/src/parse/diff-tool.ts
+++ b/packages/core/src/parse/diff-tool.ts
@@ -91,17 +91,31 @@ export const getLang = (fileName: string) => {
   return extension;
 };
 
-export const getDiffRange = (additions: DiffLine[], deletions: DiffLine[]) => {
+export const getDiffRange = (
+  additions: DiffLine[],
+  deletions: DiffLine[],
+  {
+    getAdditionRaw,
+    getDeletionRaw,
+  }: {
+    getAdditionRaw: (lineNumber: number) => string;
+    getDeletionRaw: (lineNumber: number) => string;
+  }
+) => {
   if (additions.length === deletions.length) {
     const len = additions.length;
     for (let i = 0; i < len; i++) {
       const addition = additions[i];
       const deletion = deletions[i];
-      const { addRange, delRange } = relativeChanges(addition, deletion);
+      // use the original text content to computed diff range
+      // fix: get diff with ignoreWhiteSpace config
+      const _addition = addition.clone(getAdditionRaw(addition.newLineNumber) || addition.text || '');
+      const _deletion = deletion.clone(getDeletionRaw(deletion.oldLineNumber) || deletion.text || '');
+      const { addRange, delRange } = relativeChanges(_addition, _deletion);
       addition.changes = addRange;
       deletion.changes = delRange;
       // full diff
-      // const { addRange: _addRange, delRange: _delRange } = diffChanges(addition, deletion);
+      // const { addRange: _addRange, delRange: _delRange } = diffChanges(_addition, _deletion);
       // addition.diffChanges = _addRange;
       // deletion.diffChanges = _delRange;
     }
diff --git a/packages/file/index.d.ts b/packages/file/index.d.ts
index 8835548..9c9b90d 100644
--- a/packages/file/index.d.ts
+++ b/packages/file/index.d.ts
@@ -348,7 +348,10 @@ export declare const HiddenBidiCharsRegex: RegExp;
 export declare const _cacheMap: Cache$1<string, File$1>;
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
 export declare const composeLen = 40;
-export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[]) => void;
+export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, }: {
+	getAdditionRaw: (lineNumber: number) => string;
+	getDeletionRaw: (lineNumber: number) => string;
+}) => void;
 export declare const getFile: (raw: string, lang: string, theme: "light" | "dark", fileName?: string, uuid?: string) => File$1;
 export declare const getLang: (fileName: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
diff --git a/packages/react/index.d.ts b/packages/react/index.d.ts
index b5b6ccc..1efd9e8 100644
--- a/packages/react/index.d.ts
+++ b/packages/react/index.d.ts
@@ -348,7 +348,10 @@ export declare const HiddenBidiCharsRegex: RegExp;
 export declare const _cacheMap: Cache$1<string, File$1>;
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
 export declare const composeLen = 40;
-export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[]) => void;
+export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, }: {
+	getAdditionRaw: (lineNumber: number) => string;
+	getDeletionRaw: (lineNumber: number) => string;
+}) => void;
 export declare const getFile: (raw: string, lang: string, theme: "light" | "dark", fileName?: string, uuid?: string) => File$1;
 export declare const getLang: (fileName: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
diff --git a/packages/vue/index.d.ts b/packages/vue/index.d.ts
index 23c5f4b..60d49f3 100644
--- a/packages/vue/index.d.ts
+++ b/packages/vue/index.d.ts
@@ -348,7 +348,10 @@ export declare const HiddenBidiCharsRegex: RegExp;
 export declare const _cacheMap: Cache$1<string, File$1>;
 export declare const checkDiffLineIncludeChange: (diffLine?: DiffLine) => boolean;
 export declare const composeLen = 40;
-export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[]) => void;
+export declare const getDiffRange: (additions: DiffLine[], deletions: DiffLine[], { getAdditionRaw, getDeletionRaw, }: {
+	getAdditionRaw: (lineNumber: number) => string;
+	getDeletionRaw: (lineNumber: number) => string;
+}) => void;
 export declare const getFile: (raw: string, lang: string, theme: "light" | "dark", fileName?: string, uuid?: string) => File$1;
 export declare const getLang: (fileName: string) => string;
 export declare const getSplitContentLines: (diffFile: DiffFile) => DiffSplitContentLineItem[];
diff --git a/ui/react-example/src/components/PlayGroundContent.tsx b/ui/react-example/src/components/PlayGroundContent.tsx
index bad085e..9701396 100644
--- a/ui/react-example/src/components/PlayGroundContent.tsx
+++ b/ui/react-example/src/components/PlayGroundContent.tsx
@@ -125,7 +125,9 @@ const _PlayGroundFileDiff = ({ onClick }: { onClick: () => void }) => {
         setDiffInstance(undefined);
         return;
       }
-      const data = generateDiffFile(`foo.${lang1}`, file1, `foo.${lang2}`, file2, lang1, lang2);
+      const data = generateDiffFile(`foo.${lang1}`, file1, `foo.${lang2}`, file2, lang1, lang2, {
+        ignoreWhitespace: true,
+      });
       try {
         data?.init();
         data?.buildSplitDiffLines();