🐞 fix(selectToSearch): rerender fix

summerscar · Dec 18, 2024 · 27ab89d · 27ab89d
1 parent 2ccb162
commit 27ab89d
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/app/components/float-buttons-panel.tsx b/app/components/float-buttons-panel.tsx
@@ -70,7 +70,7 @@ export function FloatButtonsPanel({
 	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	const rect = useMemo(() => {
 		return memoedGetRect();
-	}, [memoedGetRect, showAIPanel]);
+	}, [memoedGetRect, showAIPanel, selectedText]);
 
 	const onAdd = useMemoizedFn(async () => {
 		onClose?.();
@@ -195,7 +195,7 @@ export function FloatButtonsPanel({
 				)}
 			</div>
 		),
-		[showAIPanel],
+		[showAIPanel, selectedText],
 	);
 
 	return createPortal(panel, document.body);

diff --git a/app/hooks/use-select-to-search.tsx b/app/hooks/use-select-to-search.tsx
@@ -21,8 +21,8 @@ const useSelectToSearch = ({
 	prompt,
 }: Config = {}) => {
 	const containerRef = useRef<HTMLElement>(null);
-	const [showPanel, setShowPanel] = useState(false);
-	const [selection, setSelection] = useState<Selection | null>(null);
+	const [selectedText, setSelectedText] = useState<string>("");
+	const showPanel = !!selectedText;
 
 	const isKorean = (text: string) =>
 		/[\uAC00-\uD7AF\u1100-\u11FF\u3130-\u318F\u3000-\u303F\uFF00-\uFFEF\s]/.test(
@@ -37,11 +37,10 @@ const useSelectToSearch = ({
 			if (selectedText && isKorean(selectedText)) {
 				const range = selection?.getRangeAt(0);
 				if (range) {
-					setSelection(selection);
-					setShowPanel(true);
+					setSelectedText(selectedText);
 				}
 			} else {
-				setShowPanel(false);
+				setSelectedText("");
 			}
 		},
 		{ wait: 150 },
@@ -59,15 +58,17 @@ const useSelectToSearch = ({
 
 	const panel = showPanel ? (
 		<FloatButtonsPanel
-			getRect={() => selection!.getRangeAt(0).getBoundingClientRect()}
-			selectedText={selection!.toString().trim()}
+			getRect={() =>
+				window.getSelection()!.getRangeAt(0).getBoundingClientRect()
+			}
+			selectedText={selectedText}
 			showSearch={showSearch}
 			showCopy={showCopy}
 			showAI={showAI}
 			showAdd={showAdd}
 			prompt={promptFn}
 			onClose={() => {
-				setShowPanel(false);
+				setSelectedText("");
 			}}
 		/>
 	) : null;