Improve search result highlighting

Author: brendan-kellam

src/app/globals.css

@@ -76,4 +76,13 @@
 .cm-editor .cm-lineNumbers .cm-gutterElement {
   padding-left: 0.5;
   text-align: left;
+}
+
+.cm-editor .cm-searchMatch {
+  border: dotted;
+  background: transparent;
+}
+
+.cm-editor .cm-searchMatch-selected {
+  border: solid;
 }

src/app/search/components/searchResultsPanel/codePreview.tsx

@@ -9,16 +9,7 @@ import CodeMirror, { Decoration, DecorationSet, EditorState, EditorView, ReactCo
 import { useMemo, useRef } from "react";
 
 const markDecoration = Decoration.mark({
-    class: "cm-searchMatch"
-});
-
-const cmTheme = EditorView.baseTheme({
-    "&light .cm-searchMatch": {
-        border: "1px #6b7280ff",
-    },
-    "&dark .cm-searchMatch": {
-        border: "1px #d1d5dbff",
-    },
+    class: "cm-searchMatch-selected"
 });
 
 interface CodePreviewProps {
@@ -79,7 +70,6 @@ export const CodePreview = ({
                 },
                 provide: (field) => EditorView.decorations.from(field),
             }),
-            cmTheme
         ];
     }, [ranges, lineOffset]);
 

src/lib/extensions/searchResultHighlightExtension.ts

@@ -46,26 +46,10 @@ const matchHighlighter = StateField.define<DecorationSet>({
 });
 
 const matchMark = Decoration.mark({
-    class: "tq-searchMatch"
+    class: "cm-searchMatch"
 });
 const selectedMatchMark = Decoration.mark({
-    class: "tq-searchMatch-selected"
-});
-
-const highlightTheme = EditorView.baseTheme({
-    "&light .tq-searchMatch": {
-        border: "1px dotted #6b7280ff",
-    },
-    "&light .tq-searchMatch-selected": {
-        backgroundColor: "#00ff00aa"
-    },
-
-    "&dark .tq-searchMatch": {
-        border: "1px dotted #d1d5dbff",
-    },
-    "&dark .tq-searchMatch-selected": {
-        backgroundColor: "#00ff007a",
-    }
+    class: "cm-searchMatch-selected"
 });
 
 export const highlightRanges = (selectedMatchIndex: number, ranges: SearchResultRange[], view: EditorView) => {
@@ -90,7 +74,6 @@ export const highlightRanges = (selectedMatchIndex: number, ranges: SearchResult
 
 export const searchResultHighlightExtension = (): Extension => {
     return [
-        highlightTheme,
         matchHighlighter,
     ]
 }