codex-lens 0.1.17 → 0.1.19
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-CEqXetbU.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,72 @@ 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
|
+
const addedMarkDecoration = Decoration.mark({
|
|
71
|
+
class: 'cm-diff-added-mark'
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
const removedMarkDecoration = Decoration.mark({
|
|
75
|
+
class: 'cm-diff-removed-mark'
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
function createDiffHighlightPlugin(diffData) {
|
|
79
|
+
return ViewPlugin.fromClass(class {
|
|
80
|
+
decorations;
|
|
81
|
+
|
|
82
|
+
constructor(view) {
|
|
83
|
+
this.decorations = this.buildDecorations(view, diffData);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
update(update) {
|
|
87
|
+
if (update.docChanged || update.viewportChanged) {
|
|
88
|
+
this.decorations = this.buildDecorations(update.view, diffData);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
buildDecorations(view, diff) {
|
|
93
|
+
if (!diff || diff.length === 0) {
|
|
94
|
+
return Decoration.none;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
const builder = new RangeSetBuilder();
|
|
98
|
+
const doc = view.state.doc;
|
|
99
|
+
|
|
100
|
+
for (let i = 1; i <= doc.lines; i++) {
|
|
101
|
+
const line = doc.line(i);
|
|
102
|
+
const diffLine = diff[i - 1];
|
|
103
|
+
|
|
104
|
+
if (diffLine) {
|
|
105
|
+
if (diffLine.added) {
|
|
106
|
+
builder.add(line.from, line.from, addedLineDecoration);
|
|
107
|
+
if (line.length > 0) {
|
|
108
|
+
builder.add(line.from, line.from + 1, addedMarkDecoration);
|
|
109
|
+
}
|
|
110
|
+
} else if (diffLine.removed) {
|
|
111
|
+
builder.add(line.from, line.from, removedLineDecoration);
|
|
112
|
+
if (line.length > 0) {
|
|
113
|
+
builder.add(line.from, line.from + 1, removedMarkDecoration);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
return builder.finish();
|
|
120
|
+
}
|
|
121
|
+
}, {
|
|
122
|
+
decorations: v => v.decorations
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
|
|
59
126
|
const darkTheme = EditorView.theme({
|
|
60
127
|
'&': {
|
|
61
128
|
backgroundColor: '#000000',
|
|
@@ -112,6 +179,20 @@ const darkTheme = EditorView.theme({
|
|
|
112
179
|
background: 'rgba(34, 197, 94, 0.4)',
|
|
113
180
|
cursor: 'grabbing',
|
|
114
181
|
},
|
|
182
|
+
'.cm-diff-added-line': {
|
|
183
|
+
backgroundColor: 'rgba(34, 197, 94, 0.15)',
|
|
184
|
+
},
|
|
185
|
+
'.cm-diff-added-mark': {
|
|
186
|
+
color: '#4ade80',
|
|
187
|
+
fontWeight: 'bold',
|
|
188
|
+
},
|
|
189
|
+
'.cm-diff-removed-line': {
|
|
190
|
+
backgroundColor: 'rgba(239, 68, 68, 0.15)',
|
|
191
|
+
},
|
|
192
|
+
'.cm-diff-removed-mark': {
|
|
193
|
+
color: '#f87171',
|
|
194
|
+
fontWeight: 'bold',
|
|
195
|
+
},
|
|
115
196
|
}, { dark: true });
|
|
116
197
|
|
|
117
198
|
const darkHighlightStyle = HighlightStyle.define([
|
|
@@ -151,12 +232,24 @@ export function CodeViewer({ content, diff, isDiff, filePath }) {
|
|
|
151
232
|
showOverlay: 'always',
|
|
152
233
|
})),
|
|
153
234
|
];
|
|
235
|
+
|
|
236
|
+
if (isDiff && diff && diff.length > 0) {
|
|
237
|
+
exts.push(createDiffHighlightPlugin(diff));
|
|
238
|
+
}
|
|
239
|
+
|
|
154
240
|
return exts;
|
|
155
|
-
}, [filePath]);
|
|
241
|
+
}, [filePath, isDiff, diff]);
|
|
156
242
|
|
|
157
243
|
const code = useMemo(() => {
|
|
158
244
|
if (isDiff && diff) {
|
|
159
|
-
return diff.map(line =>
|
|
245
|
+
return diff.map(line => {
|
|
246
|
+
if (line.added) {
|
|
247
|
+
return '+' + line.content;
|
|
248
|
+
} else if (line.removed) {
|
|
249
|
+
return '-' + line.content;
|
|
250
|
+
}
|
|
251
|
+
return ' ' + line.content;
|
|
252
|
+
}).join('\n');
|
|
160
253
|
}
|
|
161
254
|
return content || '';
|
|
162
255
|
}, [content, diff, isDiff]);
|