diff --git a/apps/webapp/app/components/code/CodeBlock.tsx b/apps/webapp/app/components/code/CodeBlock.tsx index d2e844297..d83a4f340 100644 --- a/apps/webapp/app/components/code/CodeBlock.tsx +++ b/apps/webapp/app/components/code/CodeBlock.tsx @@ -2,7 +2,7 @@ import { ArrowsPointingOutIcon } from "@heroicons/react/20/solid"; import { Clipboard, ClipboardCheck } from "lucide-react"; import type { Language, PrismTheme } from "prism-react-renderer"; import { Highlight, Prism } from "prism-react-renderer"; -import { forwardRef, ReactNode, useCallback, useEffect, useState } from "react"; +import { forwardRef, ReactNode, useCallback, useEffect, useRef, useState } from "react"; import { TextWrapIcon } from "~/assets/icons/TextWrapIcon"; import { cn } from "~/utils/cn"; import { highlightSearchText } from "~/utils/logUtils"; @@ -217,6 +217,8 @@ export const CodeBlock = forwardRef( const [isModalOpen, setIsModalOpen] = useState(false); const [isWrapped, setIsWrapped] = useState(false); + const restoreRef = useRef<(() => void) | null>(null); + const handleCodeMouseDown = useCallback((e: React.MouseEvent) => { if (e.button !== 0) return; const el = e.currentTarget as HTMLElement; @@ -226,10 +228,16 @@ export const CodeBlock = forwardRef( document.documentElement.style.userSelect = ""; el.style.userSelect = ""; document.removeEventListener("mouseup", restore); + restoreRef.current = null; }; + restoreRef.current = restore; document.addEventListener("mouseup", restore); }, []); + useEffect(() => { + return () => restoreRef.current?.(); + }, []); + const onCopied = useCallback( (event: React.MouseEvent) => { event.preventDefault(); @@ -405,28 +413,30 @@ export const CodeBlock = forwardRef( - {shouldHighlight ? ( - - ) : ( -
-
-                  {highlightSearchText(code, searchTerm)}
-                
-
- )} +
+ {shouldHighlight ? ( + + ) : ( +
+
+                    {highlightSearchText(code, searchTerm)}
+                  
+
+ )} +