codex-lens 0.1.17 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/public/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Codex Lens</title>
|
|
7
|
-
<script type="module" crossorigin src="./assets/main-
|
|
7
|
+
<script type="module" crossorigin src="./assets/main-Bno1eqbI.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="./assets/main-7-y-Utze.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React, { useMemo, useRef } from 'react';
|
|
2
2
|
import CodeMirror from '@uiw/react-codemirror';
|
|
3
|
-
import { EditorView } from '@codemirror/view';
|
|
3
|
+
import { EditorView, Decoration, ViewPlugin, ViewUpdate } from '@codemirror/view';
|
|
4
4
|
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
|
5
5
|
import { tags as t } from '@lezer/highlight';
|
|
6
|
+
import { RangeSetBuilder } from '@codemirror/state';
|
|
6
7
|
import { javascript } from '@codemirror/lang-javascript';
|
|
7
8
|
import { python } from '@codemirror/lang-python';
|
|
8
9
|
import { java } from '@codemirror/lang-java';
|
|
@@ -56,6 +57,58 @@ function getLanguageExtension(filePath) {
|
|
|
56
57
|
return LANG_MAP[ext] ? [LANG_MAP[ext]()] : [];
|
|
57
58
|
}
|
|
58
59
|
|
|
60
|
+
const addedLineDecoration = Decoration.line({
|
|
61
|
+
class: 'cm-diff-added-line',
|
|
62
|
+
attributes: { 'data-diff-type': 'added' }
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
const removedLineDecoration = Decoration.line({
|
|
66
|
+
class: 'cm-diff-removed-line',
|
|
67
|
+
attributes: { 'data-diff-type': 'removed' }
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
function createDiffHighlightPlugin(diffData) {
|
|
71
|
+
return ViewPlugin.fromClass(class {
|
|
72
|
+
decorations;
|
|
73
|
+
|
|
74
|
+
constructor(view) {
|
|
75
|
+
this.decorations = this.buildDecorations(view, diffData);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
update(update) {
|
|
79
|
+
if (update.docChanged || update.viewportChanged) {
|
|
80
|
+
this.decorations = this.buildDecorations(update.view, diffData);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
buildDecorations(view, diff) {
|
|
85
|
+
if (!diff || diff.length === 0) {
|
|
86
|
+
return Decoration.none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
const builder = new RangeSetBuilder();
|
|
90
|
+
const doc = view.state.doc;
|
|
91
|
+
|
|
92
|
+
for (let i = 1; i <= doc.lines; i++) {
|
|
93
|
+
const line = doc.line(i);
|
|
94
|
+
const diffLine = diff[i - 1];
|
|
95
|
+
|
|
96
|
+
if (diffLine) {
|
|
97
|
+
if (diffLine.added) {
|
|
98
|
+
builder.add(line.from, line.from, addedLineDecoration);
|
|
99
|
+
} else if (diffLine.removed) {
|
|
100
|
+
builder.add(line.from, line.from, removedLineDecoration);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
return builder.finish();
|
|
106
|
+
}
|
|
107
|
+
}, {
|
|
108
|
+
decorations: v => v.decorations
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
|
|
59
112
|
const darkTheme = EditorView.theme({
|
|
60
113
|
'&': {
|
|
61
114
|
backgroundColor: '#000000',
|
|
@@ -112,6 +165,20 @@ const darkTheme = EditorView.theme({
|
|
|
112
165
|
background: 'rgba(34, 197, 94, 0.4)',
|
|
113
166
|
cursor: 'grabbing',
|
|
114
167
|
},
|
|
168
|
+
'.cm-diff-added-line': {
|
|
169
|
+
backgroundColor: 'rgba(34, 197, 94, 0.15)',
|
|
170
|
+
borderLeft: '3px solid #22c55e',
|
|
171
|
+
},
|
|
172
|
+
'.cm-diff-added-line .cm-gutterElement': {
|
|
173
|
+
color: '#4ade80',
|
|
174
|
+
},
|
|
175
|
+
'.cm-diff-removed-line': {
|
|
176
|
+
backgroundColor: 'rgba(239, 68, 68, 0.15)',
|
|
177
|
+
borderLeft: '3px solid #ef4444',
|
|
178
|
+
},
|
|
179
|
+
'.cm-diff-removed-line .cm-gutterElement': {
|
|
180
|
+
color: '#f87171',
|
|
181
|
+
},
|
|
115
182
|
}, { dark: true });
|
|
116
183
|
|
|
117
184
|
const darkHighlightStyle = HighlightStyle.define([
|
|
@@ -151,8 +218,13 @@ export function CodeViewer({ content, diff, isDiff, filePath }) {
|
|
|
151
218
|
showOverlay: 'always',
|
|
152
219
|
})),
|
|
153
220
|
];
|
|
221
|
+
|
|
222
|
+
if (isDiff && diff && diff.length > 0) {
|
|
223
|
+
exts.push(createDiffHighlightPlugin(diff));
|
|
224
|
+
}
|
|
225
|
+
|
|
154
226
|
return exts;
|
|
155
|
-
}, [filePath]);
|
|
227
|
+
}, [filePath, isDiff, diff]);
|
|
156
228
|
|
|
157
229
|
const code = useMemo(() => {
|
|
158
230
|
if (isDiff && diff) {
|