react 实现2个Json比对差异 （ codemirror + diff-match-patch）_codemirror diff

先上效果

有本地和远程，不同的位置会有背景色并且颜色标识
接下来上代码

第一步：安装插件

npm install codemirror
yarn add codemirror
1
2

第二步：直接上代码啦

import { useEffect, useRef } from 'react';
import CodeMirror from 'codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/addon/merge/merge.js';
import 'codemirror/addon/merge/merge.css';
import DiffMatchPatch from 'diff-match-patch';
import styles from './index.less';

export default function CodeMirrorComps(props: any) {
  const { firstValue, secondValue } = props;
  window.diff_match_patch = DiffMatchPatch;
  window.DIFF_DELETE = -1;
  window.DIFF_INSERT = 1;
  window.DIFF_EQUAL = 0;

  useEffect(() => {
    initUI();
  }, [firstValue, secondValue]);

  const codeMirror = useRef(null);
  const initUI = () => {
    const target: any = codeMirror.current;
    target.innerHTML = '';
    CodeMirror.MergeView(target, {
      value: firstValue ?? '',
      origLeft: null,
      orig: secondValue ?? '',
      lineNumbers: true, // 显示行号
      mode: 'text/html',
      highlightDifferences: true,
      connect: 'align',
      readOnly: true, // 只读 不可修改
    });
  };
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div
        ref={codeMirror}
        className={styles['code-contrast']}
        style={{ width: '100%', height: '100%' }}
      ></div>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

第三步：上样式啦

.CodeMirror-merge-r-chunk {
  background: rgba(30, 144, 255, 0.5);
}
.CodeMirror-merge-r-chunk-start {
  border-top: 1px solid dodgerblue;
}
.CodeMirror-merge-r-chunk-end {
  border-bottom: 1px solid dodgerblue;
}
.CodeMirror-merge-r-connect {
  fill: rgba(30, 144, 255, 0.5);
  stroke: rgba(30, 144, 255, 0.5);
  stroke-width: 1px;
}

.CodeMirror-merge-l-chunk {
  background: rgba(30, 144, 255, 0.5);
}
.CodeMirror-merge-l-chunk-start {
  border-top: 1px solid dodgerblue;
}
.CodeMirror-merge-l-chunk-end {
  border-bottom: 1px solid dodgerblue;
}
.CodeMirror-merge-l-connect {
  fill: rgba(30, 144, 255, 0.5);
  stroke: rgba(30, 144, 255, 0.5);
  stroke-width: 1px;
}

.CodeMirror-merge-l-chunk {
  background: rgba(30, 144, 255, 0.5);
}
.CodeMirror-merge-r-chunk {
  background: rgba(30, 144, 255, 0.5);
}
.CodeMirror-merge-l-chunk-start {
  border-top: 1px solid dodgerblue;
}
.CodeMirror-merge-r-chunk-start {
  border-top: 1px solid dodgerblue;
}
.CodeMirror-merge-l-chunk-end {
  border-bottom: 1px solid dodgerblue;
}
.CodeMirror-merge-r-chunk-end {
  border-bottom: 1px solid dodgerblue;
}

.code-contrast .CodeMirror-merge-copy,
.CodeMirror-merge-scrolllock-wrap {
  display: none !important;
}

.code-contrast {
  :global {
    .CodeMirror-merge {
      border: none;
    }
    .CodeMirror-merge {
      height: 100% !important;
    }
    .CodeMirror-merge .CodeMirror {
      height: 100% !important;
    }
    .CodeMirror-merge-gap {
      width: 2%;
      height: 0px !important;
    }
    .CodeMirror-merge-2pane .CodeMirror-merge-pane {
      border-radius: 2px;
      border: 1px solid #edeef6;
      width: 49%;
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

样式可以根据自己的需求再去调整

其实就是根据 CodeMirror这个插件来做的，这个插件库很强大，有时间再跟大家讲下其他功能