refactor: find in page (#7086)

- refactor rxjs data flow
- use canvas text to mitigate searchable search box input text issue

packages/frontend/core/src/hooks/affine/use-register-find-in-page-commands.ts

@@ -5,7 +5,11 @@ import { useCallback, useEffect } from 'react';
 export function useRegisterFindInPageCommands() {
   const findInPage = useService(FindInPageService).findInPage;
   const toggleVisible = useCallback(() => {
-    findInPage.toggleVisible();
+    // get the selected text in page
+    const selection = window.getSelection();
+    const selectedText = selection?.toString();
+
+    findInPage.toggleVisible(selectedText);
   }, [findInPage]);
 
   useEffect(() => {