mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-27 18:12:29 +08:00
chore(code/find): reintroduce highlight for active item
This commit is contained in:
parent
77fe100591
commit
690337ee40
@ -1,7 +1,8 @@
|
|||||||
import { EditorView, Decoration, MatchDecorator, ViewPlugin, ViewUpdate } from "@codemirror/view";
|
import { EditorView, Decoration, MatchDecorator, ViewPlugin, ViewUpdate } from "@codemirror/view";
|
||||||
import { RangeSet, RangeSetBuilder } from "@codemirror/state";
|
import { Range, RangeSet } from "@codemirror/state";
|
||||||
|
|
||||||
const searchMatchDecoration = Decoration.mark({ class: "cm-searchMatch" });
|
const searchMatchDecoration = Decoration.mark({ class: "cm-searchMatch" });
|
||||||
|
const activeMatchDecoration = Decoration.mark({ class: "cm-activeMatch" });
|
||||||
|
|
||||||
interface Match {
|
interface Match {
|
||||||
from: number;
|
from: number;
|
||||||
@ -10,6 +11,8 @@ interface Match {
|
|||||||
|
|
||||||
export class SearchHighlighter {
|
export class SearchHighlighter {
|
||||||
matches: RangeSet<Decoration>;
|
matches: RangeSet<Decoration>;
|
||||||
|
activeMatch?: Range<Decoration>;
|
||||||
|
|
||||||
currentFound: number;
|
currentFound: number;
|
||||||
totalFound: number;
|
totalFound: number;
|
||||||
matcher?: MatchDecorator;
|
matcher?: MatchDecorator;
|
||||||
@ -19,6 +22,7 @@ export class SearchHighlighter {
|
|||||||
this.parsedMatches = [];
|
this.parsedMatches = [];
|
||||||
this.currentFound = 0;
|
this.currentFound = 0;
|
||||||
this.totalFound = 0;
|
this.totalFound = 0;
|
||||||
|
|
||||||
this.matches = RangeSet.empty;
|
this.matches = RangeSet.empty;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -49,6 +53,7 @@ export class SearchHighlighter {
|
|||||||
|
|
||||||
const match = this.parsedMatches[matchIndex];
|
const match = this.parsedMatches[matchIndex];
|
||||||
this.currentFound = matchIndex + 1;
|
this.currentFound = matchIndex + 1;
|
||||||
|
this.activeMatch = activeMatchDecoration.range(match.from, match.to);
|
||||||
this.view.dispatch({
|
this.view.dispatch({
|
||||||
effects: EditorView.scrollIntoView(match.from, { y: "center" }),
|
effects: EditorView.scrollIntoView(match.from, { y: "center" }),
|
||||||
scrollIntoView: true
|
scrollIntoView: true
|
||||||
@ -102,7 +107,13 @@ export class SearchHighlighter {
|
|||||||
|
|
||||||
export function createSearchHighlighter() {
|
export function createSearchHighlighter() {
|
||||||
return ViewPlugin.fromClass(SearchHighlighter, {
|
return ViewPlugin.fromClass(SearchHighlighter, {
|
||||||
decorations: v => v.matches,
|
decorations: v => {
|
||||||
|
if (v.activeMatch) {
|
||||||
|
return v.matches.update({ add: [v.activeMatch] });
|
||||||
|
} else {
|
||||||
|
return v.matches;
|
||||||
|
}
|
||||||
|
},
|
||||||
provide: (plugin) => plugin
|
provide: (plugin) => plugin
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -111,5 +122,10 @@ export const searchMatchHighlightTheme = EditorView.baseTheme({
|
|||||||
".cm-searchMatch": {
|
".cm-searchMatch": {
|
||||||
backgroundColor: "rgba(255, 255, 0, 0.4)",
|
backgroundColor: "rgba(255, 255, 0, 0.4)",
|
||||||
borderRadius: "2px"
|
borderRadius: "2px"
|
||||||
|
},
|
||||||
|
".cm-activeMatch": {
|
||||||
|
backgroundColor: "rgba(255, 165, 0, 0.6)",
|
||||||
|
borderRadius: "2px",
|
||||||
|
outline: "2px solid orange"
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user