(fix) Fix issue with match highlighting not appearing when first clicking on a search result. Fixes #255

Author: brendan-kellam

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [3.0.1] - 2025-04-01
+
+### Fixes
+- Fix issue with match highlighting not appearing when first clicking on a search result. ([#255](https://github.com/sourcebot-dev/sourcebot/issues/255))
+
 ## [3.0.0] - 2025-04-01
 
 Sourcebot v3 is here and brings a number of structural changes to the tool's foundation, including a SQL database, parallelized indexing, authentication support, multitenancy, and more. Checkout the [migration guide](https://docs.sourcebot.dev/self-hosting/upgrade/v2-to-v3-guide) for information on upgrading your instance to v3.

packages/web/src/app/[domain]/search/components/codePreviewPanel/codePreview.tsx

@@ -16,7 +16,7 @@ import { Scrollbar } from "@radix-ui/react-scroll-area";
 import CodeMirror, { ReactCodeMirrorRef, SelectionRange } from '@uiw/react-codemirror';
 import clsx from "clsx";
 import { ArrowDown, ArrowUp } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 export interface CodePreviewFile {
     content: string;
@@ -42,13 +42,13 @@ export const CodePreview = ({
     onSelectedMatchIndexChange,
     onClose,
 }: CodePreviewProps) => {
-    const editorRef = useRef<ReactCodeMirrorRef>(null);
+    const [editorRef, setEditorRef] = useState<ReactCodeMirrorRef | null>(null);
 
     const [gutterWidth, setGutterWidth] = useState(0);
     const theme = useCodeMirrorTheme();
 
-    const keymapExtension = useKeymapExtension(editorRef.current?.view);
-    const syntaxHighlighting = useSyntaxHighlightingExtension(file?.language ?? '', editorRef.current?.view);
+    const keymapExtension = useKeymapExtension(editorRef?.view);
+    const syntaxHighlighting = useSyntaxHighlightingExtension(file?.language ?? '', editorRef?.view);
     const [currentSelection, setCurrentSelection] = useState<SelectionRange>();
 
     const extensions = useMemo(() => {
@@ -89,12 +89,12 @@ export const CodePreview = ({
     }, [file]);
 
     useEffect(() => {
-        if (!file || !editorRef.current?.view) {
+        if (!file || !editorRef?.view) {
             return;
         }
 
-        highlightRanges(selectedMatchIndex, ranges, editorRef.current.view);
-    }, [ranges, selectedMatchIndex, file]);
+        highlightRanges(selectedMatchIndex, ranges, editorRef.view);
+    }, [ranges, selectedMatchIndex, file, editorRef]);
 
     const onUpClicked = useCallback(() => {
         onSelectedMatchIndexChange(selectedMatchIndex - 1);
@@ -174,21 +174,21 @@ export const CodePreview = ({
             </div>
             <ScrollArea className="h-full overflow-auto flex-1">
                 <CodeMirror
-                    ref={editorRef}
+                    ref={setEditorRef}
                     className="relative"
                     readOnly={true}
                     value={file?.content}
                     extensions={extensions}
                     theme={theme}
                 >
                     {
-                        editorRef.current?.view &&
+                        editorRef?.view &&
                         file?.filepath &&
                         repoName &&
                         currentSelection &&
                         (
                             <EditorContextMenu
-                                view={editorRef.current.view}
+                                view={editorRef.view}
                                 path={file?.filepath}
                                 repoName={repoName}
                                 selection={currentSelection}