Skip to content

Commit 3f231b3

Browse files
brendan-kellambrendan-kellam
committed
wip
1 parent c2a3d7a commit 3f231b3

File tree

5 files changed

+100
-187
lines changed

5 files changed

+100
-187
lines changed

‎packages/web/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@
3939
"@tanstack/react-query": "^5.53.3",
4040
"@tanstack/react-table": "^8.20.5",
4141
"@tanstack/react-virtual": "^3.10.8",
42-
"@uiw/codemirror-theme-basic": "^4.23.6",
4342
"@uiw/react-codemirror": "^4.23.0",
4443
"class-variance-authority": "^0.7.0",
4544
"client-only": "^0.0.1",

‎packages/web/src/app/search/components/searchResultsPanel/codePreview.tsx

+58-132
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
'use client';
22

3-
import { useExtensionWithDependency } from "@/hooks/useExtensionWithDependency";
4-
import { syntaxHighlighting as syntaxHighlightingExtension, defaultHighlightStyle } from "@codemirror/language";
5-
import { useSyntaxHighlightingExtension } from "@/hooks/useSyntaxHighlightingExtension";
6-
import { useThemeNormalized } from "@/hooks/useThemeNormalized";
7-
import { lineOffsetExtension } from "@/lib/extensions/lineOffsetExtension";
83
import { SearchResultRange } from "@/lib/types";
9-
import { javascript } from "@codemirror/lang-javascript";
10-
import CodeMirror, { Decoration, DecorationSet, EditorState, EditorView, lineNumbers, ReactCodeMirrorRef, StateField, Transaction, useCodeMirror } from "@uiw/react-codemirror";
11-
import { basicLight, basicDark } from '@uiw/codemirror-theme-basic';
12-
import { useEffect, useMemo, useRef, useState } from "react";
4+
import { EditorState, StateField, Transaction } from "@codemirror/state";
5+
import { Decoration, DecorationSet, EditorView, lineNumbers } from "@codemirror/view";
6+
import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
7+
import { useEffect, useRef } from "react";
8+
import { lineOffsetExtension } from "@/lib/extensions/lineOffsetExtension";
9+
import { getSyntaxHighlightingExtension } from "@/hooks/useSyntaxHighlightingExtension";
10+
import { useThemeNormalized } from "@/hooks/useThemeNormalized";
1311

1412
const markDecoration = Decoration.mark({
1513
class: "cm-searchMatch-selected"
1614
});
1715

16+
1817
interface CodePreviewProps {
1918
content: string,
2019
language: string,
@@ -29,151 +28,78 @@ export const CodePreview = ({
2928
lineOffset,
3029
}: CodePreviewProps) => {
3130

32-
// const editor = useRef<HTMLDivElement | null>(null);
33-
// const { setContainer } = useCodeMirror({
34-
// container: editor.current,
35-
// extensions,
36-
// value: content,
37-
// theme: "dark"
38-
// });
39-
40-
// useEffect(() => {
41-
// if (editor.current) {
42-
// setContainer(editor.current);
43-
// }
44-
// }, [editor.current]);
45-
46-
// return <div ref={editor} />;
47-
48-
// const editorRef = useRef<ReactCodeMirrorRef>(null);
49-
// const { theme } = useThemeNormalized();
50-
51-
52-
// const rangeHighlighting = useExtensionWithDependency(editorRef.current?.view ?? null, () => {
53-
// return [
54-
// StateField.define<DecorationSet>({
55-
// create(editorState: EditorState) {
56-
// const document = editorState.doc;
57-
58-
// const decorations = ranges
59-
// .sort((a, b) => {
60-
// return a.Start.ByteOffset - b.Start.ByteOffset;
61-
// })
62-
// .filter(({ Start, End }) => {
63-
// const startLine = Start.LineNumber - lineOffset;
64-
// const endLine = End.LineNumber - lineOffset;
65-
66-
// if (
67-
// startLine < 1 ||
68-
// endLine < 1 ||
69-
// startLine > document.lines ||
70-
// endLine > document.lines
71-
// ) {
72-
// return false;
73-
// }
74-
// return true;
75-
// })
76-
// .map(({ Start, End }) => {
77-
// const startLine = Start.LineNumber - lineOffset;
78-
// const endLine = End.LineNumber - lineOffset;
79-
80-
// const from = document.line(startLine).from + Start.Column - 1;
81-
// const to = document.line(endLine).from + End.Column - 1;
82-
// return markDecoration.range(from, to);
83-
// });
84-
85-
// return Decoration.set(decorations);
86-
// },
87-
// update(highlights: DecorationSet, _transaction: Transaction) {
88-
// return highlights;
89-
// },
90-
// provide: (field) => EditorView.decorations.from(field),
91-
// }),
92-
// ];
93-
// }, [ranges, lineOffset]);
94-
95-
// const extensions = useMemo(() => {
96-
// return [
97-
// syntaxHighlighting,
98-
// // EditorView.lineWrapping,
99-
// lineOffsetExtension(lineOffset),
100-
// rangeHighlighting,
101-
// ];
102-
// }, [syntaxHighlighting, lineOffset, rangeHighlighting]);
103-
104-
105-
const editorRef2 = useRef<HTMLDivElement>(null);
106-
// const syntaxHighlighting = useSyntaxHighlightingExtension(language, editorRef2.current?.view);
31+
const containerRef = useRef<HTMLDivElement | null>(null);
32+
const { theme } = useThemeNormalized();
10733

10834
useEffect(() => {
35+
if (!containerRef.current) {
36+
return;
37+
}
38+
10939
const state = EditorState.create({
11040
doc: content,
11141
extensions: [
11242
EditorView.editable.of(false),
113-
// EditorView.lineWrapping,
114-
basicDark,
115-
syntaxHighlightingExtension(defaultHighlightStyle),
116-
javascript(),
11743
lineNumbers(),
11844
lineOffsetExtension(lineOffset),
119-
// rangeHighlighting,
45+
syntaxHighlighting(defaultHighlightStyle),
46+
getSyntaxHighlightingExtension(language),
47+
StateField.define<DecorationSet>({
48+
create(editorState: EditorState) {
49+
const document = editorState.doc;
50+
51+
const decorations = ranges
52+
.sort((a, b) => {
53+
return a.Start.ByteOffset - b.Start.ByteOffset;
54+
})
55+
.filter(({ Start, End }) => {
56+
const startLine = Start.LineNumber - lineOffset;
57+
const endLine = End.LineNumber - lineOffset;
58+
59+
if (
60+
startLine < 1 ||
61+
endLine < 1 ||
62+
startLine > document.lines ||
63+
endLine > document.lines
64+
) {
65+
return false;
66+
}
67+
return true;
68+
})
69+
.map(({ Start, End }) => {
70+
const startLine = Start.LineNumber - lineOffset;
71+
const endLine = End.LineNumber - lineOffset;
72+
73+
const from = document.line(startLine).from + Start.Column - 1;
74+
const to = document.line(endLine).from + End.Column - 1;
75+
return markDecoration.range(from, to);
76+
});
77+
78+
return Decoration.set(decorations);
79+
},
80+
update(highlights: DecorationSet, _transaction: Transaction) {
81+
return highlights;
82+
},
83+
provide: (field) => EditorView.decorations.from(field),
84+
}),
85+
getSyntaxHighlightingExtension(language),
12086
],
12187
});
12288

12389
const view = new EditorView({
12490
state,
125-
parent: editorRef2.current!,
91+
parent: containerRef.current,
12692
});
12793

12894
return () => {
12995
view.destroy();
13096
}
131-
}, [lineOffset]);
97+
}, [content, language, lineOffset, theme]);
13298

13399
return (
134100
<div
135-
ref={editorRef2}
101+
ref={containerRef}
136102
/>
137103
)
138104

139-
// return (
140-
// <CodeMirror
141-
// ref={editorRef}
142-
// readOnly={true}
143-
// editable={false}
144-
// value={content}
145-
// theme={theme === "dark" ? "dark" : "light"}
146-
// basicSetup={{
147-
// lineNumbers: true,
148-
// syntaxHighlighting: true,
149-
150-
// // Disable all this other stuff...
151-
// ... {
152-
// foldGutter: false,
153-
// highlightActiveLineGutter: false,
154-
// highlightSpecialChars: false,
155-
// history: false,
156-
// drawSelection: false,
157-
// dropCursor: false,
158-
// allowMultipleSelections: false,
159-
// indentOnInput: false,
160-
// bracketMatching: false,
161-
// closeBrackets: false,
162-
// autocompletion: false,
163-
// rectangularSelection: false,
164-
// crosshairCursor: false,
165-
// highlightActiveLine: false,
166-
// highlightSelectionMatches: false,
167-
// closeBracketsKeymap: false,
168-
// defaultKeymap: false,
169-
// searchKeymap: false,
170-
// historyKeymap: false,
171-
// foldKeymap: false,
172-
// completionKeymap: false,
173-
// lintKeymap: false,
174-
// }
175-
// }}
176-
// extensions={extensions}
177-
// />
178-
// )
179105
}

‎packages/web/src/app/search/components/searchResultsPanel/fileMatch.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const FileMatch = ({
2929
return (
3030
<div
3131
tabIndex={0}
32-
className="cursor-pointer p-1 focus:ring-inset focus:ring-4 bg-white dark:bg-[#282c34]"
32+
className="cursor-pointer focus:ring-inset focus:ring-4 bg-white dark:bg-[#282c34]"
3333
onKeyDown={(e) => {
3434
if (e.key !== "Enter") {
3535
return;

‎packages/web/src/hooks/useSyntaxHighlightingExtension.ts

+41-37
Original file line numberDiff line numberDiff line change
@@ -21,46 +21,50 @@ export const useSyntaxHighlightingExtension = (language: string, view: EditorVie
2121
const extension = useExtensionWithDependency(
2222
view ?? null,
2323
() => {
24-
switch (language.toLowerCase()) {
25-
case "c":
26-
case "c++":
27-
return cpp();
28-
case "c#":
29-
return csharp();
30-
case "json":
31-
return json();
32-
case "java":
33-
return java();
34-
case "rust":
35-
return rust();
36-
case "go":
37-
return go();
38-
case "sql":
39-
return sql();
40-
case "php":
41-
return php();
42-
case "html":
43-
return html();
44-
case "css":
45-
return css();
46-
case "jsx":
47-
case "tsx":
48-
case "typescript":
49-
case "javascript":
50-
return javascript({
51-
jsx: true,
52-
typescript: true,
53-
});
54-
case "python":
55-
return python();
56-
case "markdown":
57-
return markdown();
58-
default:
59-
return [];
60-
}
24+
return getSyntaxHighlightingExtension(language);
6125
},
6226
[language]
6327
);
6428

6529
return extension;
30+
}
31+
32+
export const getSyntaxHighlightingExtension = (language: string) => {
33+
switch (language.toLowerCase()) {
34+
case "c":
35+
case "c++":
36+
return cpp();
37+
case "c#":
38+
return csharp();
39+
case "json":
40+
return json();
41+
case "java":
42+
return java();
43+
case "rust":
44+
return rust();
45+
case "go":
46+
return go();
47+
case "sql":
48+
return sql();
49+
case "php":
50+
return php();
51+
case "html":
52+
return html();
53+
case "css":
54+
return css();
55+
case "jsx":
56+
case "tsx":
57+
case "typescript":
58+
case "javascript":
59+
return javascript({
60+
jsx: true,
61+
typescript: true,
62+
});
63+
case "python":
64+
return python();
65+
case "markdown":
66+
return markdown();
67+
default:
68+
return [];
69+
}
6670
}

‎yarn.lock

-16
Original file line numberDiff line numberDiff line change
@@ -1521,22 +1521,6 @@
15211521
"@codemirror/state" "^6.0.0"
15221522
"@codemirror/view" "^6.0.0"
15231523

1524-
"@uiw/codemirror-theme-basic@^4.23.6":
1525-
version "4.23.6"
1526-
resolved "https://registry.yarnpkg.com/@uiw/codemirror-theme-basic/-/codemirror-theme-basic-4.23.6.tgz#8099d9dfa17d749d169e56f2e11cba85f841fde6"
1527-
integrity sha512-davfdPZV5xRIRSxM1Z1CQmR/rRfWyqdv9WS2hzIcwgjdeH7018I88+mGKyx5tWvgjHhjyTTTkLzDVo4+ygarVQ==
1528-
dependencies:
1529-
"@uiw/codemirror-themes" "4.23.6"
1530-
1531-
"@uiw/codemirror-themes@4.23.6":
1532-
version "4.23.6"
1533-
resolved "https://registry.yarnpkg.com/@uiw/codemirror-themes/-/codemirror-themes-4.23.6.tgz#47a101733a9c4aa382696178bc4b7bc0ecf0e5fa"
1534-
integrity sha512-0dpuLQW+V6zrKvfvor/eo71V3tpr2L2Hsu8QZAdtSzksjWABxTOzH3ShaBRxCEsrz6sU9sa9o7ShwBMMDz59bQ==
1535-
dependencies:
1536-
"@codemirror/language" "^6.0.0"
1537-
"@codemirror/state" "^6.0.0"
1538-
"@codemirror/view" "^6.0.0"
1539-
15401524
"@uiw/react-codemirror@^4.23.0":
15411525
version "4.23.5"
15421526
resolved "https://registry.yarnpkg.com/@uiw/react-codemirror/-/react-codemirror-4.23.5.tgz#6a16c23062067732cba105ac33ad69cf8e5c2111"

0 commit comments

Comments
 (0)