feat(ui): add token diff support in diff view (#19983)

Signed-off-by: linghaoSu <linghao.su@daocloud.io>

Author: linghaoSu

ui/src/app/applications/components/application-resources-diff/individual-diff-section.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {useState} from 'react';
-import {Diff, Hunk} from 'react-diff-view';
+import {Diff, Hunk, tokenize, markEdits} from 'react-diff-view';
 import 'react-diff-view/style/index.css';
 
 import './application-resources-diff.scss';
@@ -15,6 +15,12 @@ export interface IndividualDiffSectionProps {
 export const IndividualDiffSection = (props: IndividualDiffSectionProps) => {
     const {file, showPath, whiteBox, viewType} = props;
     const [collapsed, setCollapsed] = useState(false);
+    const options = {
+        highlight: false,
+        enhancers: [markEdits(file.hunks, {type: 'block'})]
+    };
+    const token = tokenize(file.hunks, options);
+
     return (
         <div className={`${whiteBox} application-component-diff__diff`}>
             {showPath && (
@@ -24,7 +30,7 @@ export const IndividualDiffSection = (props: IndividualDiffSectionProps) => {
                 </p>
             )}
             {!collapsed && (
-                <Diff viewType={viewType} diffType={file.type} hunks={file.hunks}>
+                <Diff viewType={viewType} diffType={file.type} hunks={file.hunks} tokens={token}>
                     {(hunks: any) => hunks.map((hunk: any) => <Hunk className={'custom-diff-hunk'} key={hunk.content} hunk={hunk} />)}
                 </Diff>
             )}