chore(code/find): reintroduce match highlighting

packages/codemirror/src/find_replace.ts

@@ -0,0 +1,45 @@
+import { EditorView, Decoration, MatchDecorator, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import { StateEffect, Compartment } from "@codemirror/state";
+
+const searchMatchDecoration = Decoration.mark({ class: "cm-searchMatch" });
+
+export function createSearchHighlighter(view: EditorView, searchTerm: string, matchCase: boolean, wholeWord: boolean) {
+    // Escape the search term for use in RegExp
+    const escapedTerm = searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const wordBoundary = wholeWord ? "\\b" : "";
+    const flags = matchCase ? "g" : "gi";
+    const regex = new RegExp(`${wordBoundary}${escapedTerm}${wordBoundary}`, flags);
+
+    const matcher = new MatchDecorator({
+        regexp: regex,
+        decoration: searchMatchDecoration,
+    });
+
+    return ViewPlugin.fromClass(class SearchHighlighter {
+        matches = matcher.createDeco(view);
+
+        constructor(public view: EditorView) { }
+
+        update(update: ViewUpdate) {
+            if (update.docChanged || update.viewportChanged) {
+                this.matches = matcher.createDeco(update.view);
+            }
+        }
+
+        destroy() {
+            // Do nothing.
+        }
+
+        static deco = (v: SearchHighlighter) => v.matches;
+    }, {
+        decorations: v => v.matches
+    });
+}
+
+
+export const searchMatchHighlightTheme = EditorView.baseTheme({
+    ".cm-searchMatch": {
+        backgroundColor: "rgba(255, 255, 0, 0.4)",
+        borderRadius: "2px"
+    }
+});

packages/codemirror/src/index.ts

@@ -7,6 +7,7 @@ import { vim } from "@replit/codemirror-vim";
 import byMimeType from "./syntax_highlighting.js";
 import smartIndentWithTab from "./extensions/custom_tab.js";
 import type { ThemeDefinition } from "./color_themes.js";
+import { createSearchHighlighter, searchMatchHighlightTheme } from "./find_replace.js";
 
 export { default as ColorThemes, type ThemeDefinition, getThemeById } from "./color_themes.js";
 
@@ -29,12 +30,14 @@ export default class CodeMirror extends EditorView {
     private historyCompartment: Compartment;
     private themeCompartment: Compartment;
     private lineWrappingCompartment: Compartment;
+    private searchHighlightCompartment: Compartment;
 
     constructor(config: EditorConfig) {
         const languageCompartment = new Compartment();
         const historyCompartment = new Compartment();
         const themeCompartment = new Compartment();
         const lineWrappingCompartment = new Compartment();
+        const searchHighlightCompartment = new Compartment();
 
         let extensions: Extension[] = [];
 
@@ -49,6 +52,10 @@ export default class CodeMirror extends EditorView {
             themeCompartment.of([
                 syntaxHighlighting(defaultHighlightStyle, { fallback: true })
             ]),
+
+            searchMatchHighlightTheme,
+            searchHighlightCompartment.of([]),
+
             highlightActiveLine(),
             highlightSelectionMatches(),
             bracketMatching(),
@@ -92,6 +99,7 @@ export default class CodeMirror extends EditorView {
         this.historyCompartment = historyCompartment;
         this.themeCompartment = themeCompartment;
         this.lineWrappingCompartment = lineWrappingCompartment;
+        this.searchHighlightCompartment = searchHighlightCompartment;
     }
 
     #onDocumentUpdated(v: ViewUpdate) {
@@ -163,6 +171,13 @@ export default class CodeMirror extends EditorView {
         });
     }
 
+    async performFind(searchTerm: string, matchCase: boolean, wholeWord: boolean) {
+        const plugin = createSearchHighlighter(this, searchTerm, matchCase, wholeWord);
+        this.dispatch({
+            effects: this.searchHighlightCompartment.reconfigure(plugin)
+        });
+    }
+
     async setMimeType(mime: string) {
         let newExtension: Extension[] = [];