Improve highlighting for search results

This commit is contained in:
bkellam 2024-09-02 19:39:14 -07:00
parent dd80630f74
commit c64b457cbc

View file

@ -3,10 +3,10 @@ import { Decoration, DecorationSet, EditorView } from "@codemirror/view";
import { ZoektMatch } from "../types"; import { ZoektMatch } from "../types";
const matchMark = Decoration.mark({ const matchMark = Decoration.mark({
class: "cm-searchMatch" class: "tq-searchMatch"
}); });
const selectedMatchMark = Decoration.mark({ const selectedMatchMark = Decoration.mark({
class: "cm-searchMatch cm-searchMatch-selected" class: "tq-searchMatch-selected"
}); });
const setMatchState = StateEffect.define<{ const setMatchState = StateEffect.define<{
@ -50,10 +50,20 @@ const matchHighlighter = StateField.define<DecorationSet>({
}); });
const highlightTheme = EditorView.baseTheme({ const highlightTheme = EditorView.baseTheme({
"&light .cm-searchMatch": { backgroundColor: "#ffff0054" }, "&light .tq-searchMatch": {
"&dark .cm-searchMatch": { backgroundColor: "#00ffff8a" }, border: "1px dotted #6b7280ff",
"&light .cm-searchMatch-selected": { backgroundColor: "#ff6a0054" }, },
"&dark .cm-searchMatch-selected": { backgroundColor: "#ff00ff8a" } "&light .tq-searchMatch-selected": {
backgroundColor: "#00ff00aa"
},
"&dark .tq-searchMatch": {
border: "1px dotted #d1d5dbff",
},
"&dark .tq-searchMatch-selected": {
backgroundColor: "#00ff007a",
}
}); });
export const markMatches = (selectedMatchIndex: number, matches: ZoektMatch[], view: EditorView) => { export const markMatches = (selectedMatchIndex: number, matches: ZoektMatch[], view: EditorView) => {