refactor: find in page (#7086)

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

packages/frontend/electron/src/main/find-in-page/handlers.ts

@@ -1,17 +1,19 @@
+import type { NamespaceHandlers } from '../type';
+
 export const findInPageHandlers = {
-  findInPage: async (
-    event: Electron.IpcMainInvokeEvent,
-    text: string,
-    options?: Electron.FindInPageOptions
-  ) => {
+  find: async (event, text: string, options?: Electron.FindInPageOptions) => {
+    const { promise, resolve } =
+      Promise.withResolvers<Electron.Result | null>();
     const webContents = event.sender;
-    return webContents.findInPage(text, options);
+    let requestId: number = -1;
+    webContents.once('found-in-page', (_, result) => {
+      resolve(result.requestId === requestId ? result : null);
+    });
+    requestId = webContents.findInPage(text, options);
+    return promise;
   },
-  stopFindInPage: async (
-    event: Electron.IpcMainInvokeEvent,
-    action: 'clearSelection' | 'keepSelection' | 'activateSelection'
-  ) => {
+  clear: async event => {
     const webContents = event.sender;
-    return webContents.stopFindInPage(action);
+    webContents.stopFindInPage('keepSelection');
   },
-};
+} satisfies NamespaceHandlers;

packages/frontend/electron/src/main/main-window.ts

@@ -1,7 +1,7 @@
 import assert from 'node:assert';
 import { join } from 'node:path';
 
-import type { CookiesSetDetails } from 'electron';
+import { type CookiesSetDetails } from 'electron';
 import { BrowserWindow, nativeTheme } from 'electron';
 import electronWindowState from 'electron-window-state';
 
@@ -169,16 +169,6 @@ async function createWindow(additionalArguments: string[]) {
     uiSubjects.onFullScreen$.next(false);
   });
 
-  browserWindow.webContents.on('found-in-page', (_event, result) => {
-    const { requestId, activeMatchOrdinal, matches, finalUpdate } = result;
-    browserWindow.webContents.send('found-in-page-result', {
-      requestId,
-      activeMatchOrdinal,
-      matches,
-      finalUpdate,
-    });
-  });
-
   /**
    * URL for main window.
    */

packages/frontend/electron/src/preload/bootstrap.ts

@@ -1,6 +1,6 @@
 import { contextBridge } from 'electron';
 
-import { affine, appInfo, cmdFind, getElectronAPIs } from './electron-api';
+import { affine, appInfo, getElectronAPIs } from './electron-api';
 
 const { apis, events } = getElectronAPIs();
 
@@ -10,7 +10,6 @@ contextBridge.exposeInMainWorld('events', events);
 
 try {
   contextBridge.exposeInMainWorld('affine', affine);
-  contextBridge.exposeInMainWorld('cmdFind', cmdFind);
 } catch (error) {
   console.error('Failed to expose affine APIs to window object!', error);
 }

packages/frontend/electron/src/preload/electron-api.ts

@@ -47,20 +47,6 @@ export const affine = {
   },
 };
 
-export const cmdFind = {
-  findInPage: (text: string, options?: Electron.FindInPageOptions) =>
-    ipcRenderer.invoke('findInPage:findInPage', text, options),
-  stopFindInPage: (
-    action: 'clearSelection' | 'keepSelection' | 'activateSelection'
-  ) => ipcRenderer.invoke('findInPage:stopFindInPage', action),
-  onFindInPageResult: (callBack: (data: any) => void) =>
-    ipcRenderer.on('found-in-page-result', (_event, data) => callBack(data)),
-  offFindInPageResult: (callBack: (data: any) => void) =>
-    ipcRenderer.removeListener('found-in-page-result', (_event, data) =>
-      callBack(data)
-    ),
-};
-
 export function getElectronAPIs() {
   const mainAPIs = getMainAPIs();
   const helperAPIs = getHelperAPIs();