refactor: find in page (#7086)

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

packages/frontend/component/src/ui/input/input.tsx

@@ -45,13 +45,21 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     autoFocus,
     ...otherProps
   }: InputProps,
-  ref: ForwardedRef<HTMLInputElement>
+  upstreamRef: ForwardedRef<HTMLInputElement>
 ) {
-  const handleAutoFocus = useCallback((ref: HTMLInputElement | null) => {
+  const handleAutoFocus = useCallback(
-    if (ref) {
+    (ref: HTMLInputElement | null) => {
-      window.setTimeout(() => ref.focus(), 0);
+      if (ref) {
-    }
+        window.setTimeout(() => ref.focus(), 0);
-  }, []);
+        if (typeof upstreamRef === 'function') {
+          upstreamRef(ref);
+        } else if (upstreamRef) {
+          upstreamRef.current = ref;
+        }
+      }
+    },
+    [upstreamRef]
+  );
 
   return (
     <div
@@ -78,7 +86,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           large: size === 'large',
           'extra-large': size === 'extraLarge',
         })}
-        ref={autoFocus ? handleAutoFocus : ref}
+        ref={autoFocus ? handleAutoFocus : upstreamRef}
         disabled={disabled}
         style={inputStyle}
         onChange={useCallback(

packages/frontend/component/src/ui/modal/modal.tsx

@@ -46,6 +46,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       title,
       description,
       withoutCloseButton = false,
+      modal,
 
       portalOptions,
       contentOptions: {
@@ -63,13 +64,13 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
     },
     ref
   ) => (
-    <Dialog.Root {...props}>
+    <Dialog.Root modal={modal} {...props}>
       <Dialog.Portal {...portalOptions}>
         <Dialog.Overlay
           className={clsx(styles.modalOverlay, overlayClassName)}
           {...otherOverlayOptions}
         />
-        <div className={styles.modalContentWrapper}>
+        <div data-modal={modal} className={clsx(styles.modalContentWrapper)}>
           <Dialog.Content
             className={clsx(styles.modalContent, contentClassName)}
             style={{

packages/frontend/component/src/ui/modal/styles.css.ts

@@ -1,5 +1,5 @@
 import { cssVar } from '@toeverything/theme';
-import { createVar, style } from '@vanilla-extract/css';
+import { createVar, globalStyle, style } from '@vanilla-extract/css';
 export const widthVar = createVar('widthVar');
 export const heightVar = createVar('heightVar');
 export const minHeightVar = createVar('minHeightVar');
@@ -17,6 +17,7 @@ export const modalContentWrapper = style({
   justifyContent: 'center',
   zIndex: cssVar('zIndexModal'),
 });
+
 export const modalContent = style({
   vars: {
     [widthVar]: '',
@@ -82,3 +83,11 @@ export const confirmModalContainer = style({
   display: 'flex',
   flexDirection: 'column',
 });
+
+globalStyle(`[data-modal="false"]${modalContentWrapper}`, {
+  pointerEvents: 'none',
+});
+
+globalStyle(`[data-modal="false"] ${modalContent}`, {
+  pointerEvents: 'auto',
+});

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(() => {

packages/frontend/core/src/modules/find-in-page/entities/find-in-page.ts

@@ -1,81 +1,98 @@
-import { cmdFind } from '@affine/electron-api';
+import { DebugLogger } from '@affine/debug';
+import { apis } from '@affine/electron-api';
 import { Entity, LiveData } from '@toeverything/infra';
-import { Observable, of, switchMap } from 'rxjs';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  of,
+  shareReplay,
+  switchMap,
+  tap,
+} from 'rxjs';
+
+const logger = new DebugLogger('affine:find-in-page');
 
-type FindInPageResult = {
-  requestId: number;
-  activeMatchOrdinal: number;
-  matches: number;
-  finalUpdate: boolean;
-};
 export class FindInPage extends Entity {
-  // modal open/close
-
   readonly searchText$ = new LiveData<string | null>(null);
-  private readonly direction$ = new LiveData<'forward' | 'backward'>('forward');
   readonly isSearching$ = new LiveData(false);
-
+  private readonly direction$ = new LiveData<'forward' | 'backward'>('forward');
   readonly visible$ = new LiveData(false);
 
   readonly result$ = LiveData.from(
-    this.searchText$.pipe(
+    this.visible$.pipe(
-      switchMap(searchText => {
+      distinctUntilChanged(),
-        if (!searchText) {
+      switchMap(visible => {
+        if (!visible) {
           return of(null);
-        } else {
-          return new Observable<FindInPageResult>(subscriber => {
-            const handleResult = (result: FindInPageResult) => {
-              subscriber.next(result);
-              if (result.finalUpdate) {
-                subscriber.complete();
-                this.isSearching$.next(false);
-              }
-            };
-            this.isSearching$.next(true);
-            cmdFind
-              ?.findInPage(searchText, {
-                forward: this.direction$.value === 'forward',
-              })
-              .then(() => cmdFind?.onFindInPageResult(handleResult))
-              .catch(e => {
-                console.error(e);
-                this.isSearching$.next(false);
-              });
-
-            return () => {
-              cmdFind?.offFindInPageResult(handleResult);
-            };
-          });
         }
+        let searchId = 0;
+        return this.searchText$.pipe(
+          tap(() => {
+            this.isSearching$.next(false);
+          }),
+          debounceTime(500),
+          switchMap(searchText => {
+            if (!searchText) {
+              return of(null);
+            } else {
+              let findNext = true;
+              return this.direction$.pipe(
+                switchMap(direction => {
+                  if (apis?.findInPage) {
+                    this.isSearching$.next(true);
+                    const currentId = ++searchId;
+                    return apis?.findInPage
+                      .find(searchText, {
+                        forward: direction === 'forward',
+                        findNext,
+                      })
+                      .finally(() => {
+                        if (currentId === searchId) {
+                          this.isSearching$.next(false);
+                          findNext = false;
+                        }
+                      });
+                  } else {
+                    return of(null);
+                  }
+                })
+              );
+            }
+          })
+        );
+      }),
+      shareReplay({
+        bufferSize: 1,
+        refCount: true,
       })
     ),
-    { requestId: 0, activeMatchOrdinal: 0, matches: 0, finalUpdate: true }
+    null
   );
 
   constructor() {
     super();
+    // todo: hide on navigation
   }
 
   findInPage(searchText: string) {
+    this.onChangeVisible(true);
     this.searchText$.next(searchText);
   }
 
-  private updateResult(result: FindInPageResult) {
-    this.result$.next(result);
-  }
-
   onChangeVisible(visible: boolean) {
     this.visible$.next(visible);
     if (!visible) {
-      this.stopFindInPage('clearSelection');
+      this.clear();
     }
   }
 
-  toggleVisible() {
+  toggleVisible(text?: string) {
     const nextVisible = !this.visible$.value;
     this.visible$.next(nextVisible);
     if (!nextVisible) {
-      this.stopFindInPage('clearSelection');
+      this.clear();
+    } else if (text) {
+      this.searchText$.next(text);
     }
   }
 
@@ -84,8 +101,6 @@ export class FindInPage extends Entity {
       return;
     }
     this.direction$.next('backward');
-    this.searchText$.next(this.searchText$.value);
-    cmdFind?.onFindInPageResult(result => this.updateResult(result));
   }
 
   forward() {
@@ -93,16 +108,10 @@ export class FindInPage extends Entity {
       return;
     }
     this.direction$.next('forward');
-    this.searchText$.next(this.searchText$.value);
-    cmdFind?.onFindInPageResult(result => this.updateResult(result));
   }
 
-  stopFindInPage(
+  clear() {
-    action: 'clearSelection' | 'keepSelection' | 'activateSelection'
+    logger.debug('clear');
-  ) {
+    apis?.findInPage.clear().catch(logger.error);
-    if (action === 'clearSelection') {
-      this.searchText$.next(null);
-    }
-    cmdFind?.stopFindInPage(action).catch(e => console.error(e));
   }
 }

packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.css.ts

@@ -20,16 +20,40 @@ export const container = style({
 export const leftContent = style({
   display: 'flex',
   alignItems: 'center',
+  flex: 1,
+});
+
+export const inputContainer = style({
+  display: 'flex',
+  alignSelf: 'stretch',
+  alignItems: 'center',
+  gap: '8px',
+  flex: 1,
+  height: '32px',
+  position: 'relative',
+  margin: '0 8px',
 });
 
 export const input = style({
-  padding: '0 10px',
+  position: 'absolute',
-  height: '32px',
+  padding: '0',
-  gap: '8px',
+  inset: 0,
-  color: cssVar('iconColor'),
+  height: '100%',
+  width: '100%',
+  color: 'transparent',
   background: cssVar('white10'),
 });
 
+export const inputHack = style([
+  input,
+  {
+    '::placeholder': {
+      color: cssVar('iconColor'),
+    },
+    pointerEvents: 'none',
+  },
+]);
+
 export const count = style({
   color: cssVar('textSecondaryColor'),
   fontSize: cssVar('fontXs'),
@@ -41,6 +65,7 @@ export const arrowButton = style({
   fontSize: '24px',
   width: '32px',
   height: '32px',
+  flexShrink: 0,
   border: '1px solid',
   borderColor: cssVar('borderColor'),
   alignItems: 'baseline',

packages/frontend/core/src/modules/find-in-page/view/find-in-page-modal.tsx

@@ -1,24 +1,68 @@
-import { Button, Input, Modal } from '@affine/component';
+import { Button, Modal } from '@affine/component';
 import { rightSidebarWidthAtom } from '@affine/core/atoms';
-import {
+import { ArrowDownSmallIcon, ArrowUpSmallIcon } from '@blocksuite/icons';
-  ArrowDownSmallIcon,
-  ArrowUpSmallIcon,
-  SearchIcon,
-} from '@blocksuite/icons';
 import { useLiveData, useService } from '@toeverything/infra';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
-import { useDebouncedValue } from 'foxact/use-debounced-value';
 import { useAtomValue } from 'jotai';
-import { useCallback, useDeferredValue, useEffect, useState } from 'react';
+import {
+  type KeyboardEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { RightSidebarService } from '../../right-sidebar';
 import { FindInPageService } from '../services/find-in-page';
 import * as styles from './find-in-page-modal.css';
+
+const drawText = (canvas: HTMLCanvasElement, text: string) => {
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return;
+  }
+
+  const dpr = window.devicePixelRatio || 1;
+  canvas.width = canvas.getBoundingClientRect().width * dpr;
+  canvas.height = canvas.getBoundingClientRect().height * dpr;
+  ctx.scale(dpr, dpr);
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.font = '15px Inter';
+  ctx.fillText(text, 0, 22);
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'ideographic';
+};
+
+const CanvasText = ({
+  text,
+  className,
+}: {
+  text: string;
+  className: string;
+}) => {
+  const ref = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) {
+      return;
+    }
+    drawText(canvas, text);
+    const resizeObserver = new ResizeObserver(() => {
+      drawText(canvas, text);
+    });
+    resizeObserver.observe(canvas);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [text]);
+
+  return <canvas className={className} ref={ref} />;
+};
+
 export const FindInPageModal = () => {
   const [value, setValue] = useState('');
-  const debouncedValue = useDebouncedValue(value, 300);
-  const deferredValue = useDeferredValue(debouncedValue);
 
   const findInPage = useService(FindInPageService).findInPage;
   const visible = useLiveData(findInPage.visible$);
@@ -29,10 +73,48 @@ export const FindInPageModal = () => {
   const rightSidebar = useService(RightSidebarService).rightSidebar;
   const frontView = useLiveData(rightSidebar.front$);
   const open = useLiveData(rightSidebar.isOpen$) && frontView !== undefined;
+  const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleSearch = useCallback(() => {
+  const handleValueChange = useCallback(
-    findInPage.findInPage(deferredValue);
+    (v: string) => {
-  }, [deferredValue, findInPage]);
+      setValue(v);
+      findInPage.findInPage(v);
+      if (v.length === 0) {
+        findInPage.clear();
+      }
+      inputRef.current?.focus();
+    },
+    [findInPage]
+  );
+
+  useEffect(() => {
+    if (visible) {
+      setValue(findInPage.searchText$.value || '');
+      const onEsc = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          findInPage.onChangeVisible(false);
+        }
+      };
+      window.addEventListener('keydown', onEsc);
+      return () => {
+        window.removeEventListener('keydown', onEsc);
+      };
+    }
+    return () => {};
+  }, [findInPage, findInPage.searchText$.value, visible]);
+
+  useEffect(() => {
+    const unsub = findInPage.isSearching$.subscribe(() => {
+      inputRef.current?.focus();
+      setTimeout(() => {
+        inputRef.current?.focus();
+      });
+    });
+
+    return () => {
+      unsub.unsubscribe();
+    };
+  }, [findInPage.isSearching$]);
 
   const handleBackWard = useCallback(() => {
     findInPage.backward();
@@ -45,7 +127,7 @@ export const FindInPageModal = () => {
   const onChangeVisible = useCallback(
     (visible: boolean) => {
       if (!visible) {
-        findInPage.stopFindInPage('clearSelection');
+        findInPage.clear();
       }
       findInPage.onChangeVisible(visible);
     },
@@ -55,53 +137,27 @@ export const FindInPageModal = () => {
     onChangeVisible(false);
   }, [onChangeVisible]);
 
-  useEffect(() => {
+  const handleKeydown: KeyboardEventHandler = useCallback(
-    // add keyboard event listener for arrow up and down
+    e => {
-    const keyArrowDown = (event: KeyboardEvent) => {
+      if (e.key === 'Enter' || e.key === 'ArrowDown') {
-      if (event.key === 'ArrowDown') {
         handleForward();
       }
-    };
+      if (e.key === 'ArrowUp') {
-    const keyArrowUp = (event: KeyboardEvent) => {
-      if (event.key === 'ArrowUp') {
         handleBackWard();
       }
-    };
+    },
-    document.addEventListener('keydown', keyArrowDown);
+    [handleBackWard, handleForward]
-    document.addEventListener('keydown', keyArrowUp);
+  );
-    return () => {
-      document.removeEventListener('keydown', keyArrowDown);
-      document.removeEventListener('keydown', keyArrowUp);
-    };
-  }, [findInPage, handleBackWard, handleForward]);
-
   const panelWidth = assignInlineVars({
     [styles.panelWidthVar]: open ? `${rightSidebarWidth}px` : '0',
   });
 
-  useEffect(() => {
-    // auto search when value change
-    if (deferredValue) {
-      handleSearch();
-    }
-  }, [deferredValue, handleSearch]);
-
-  useEffect(() => {
-    // clear highlight when value is empty
-    if (value.length === 0) {
-      findInPage.stopFindInPage('keepSelection');
-    }
-  }, [value, findInPage]);
-
   return (
     <Modal
       open={visible}
-      onOpenChange={onChangeVisible}
+      modal={false}
-      overlayOptions={{
-        hidden: true,
-      }}
       withoutCloseButton
-      width={398}
+      width={400}
       height={48}
       minHeight={48}
       contentOptions={{
@@ -110,33 +166,32 @@ export const FindInPageModal = () => {
       }}
     >
       <div className={styles.leftContent}>
-        <Input
+        <div className={styles.inputContainer}>
-          onChange={setValue}
+          <input
-          value={isSearching ? '' : value}
+            type="text"
-          onEnter={handleSearch}
+            autoFocus
-          autoFocus
+            value={value}
-          preFix={<SearchIcon fontSize={20} />}
+            ref={inputRef}
-          endFix={
+            style={{
-            <div className={styles.count}>
+              visibility: isSearching ? 'hidden' : 'visible',
-              {value.length > 0 && result && result.matches !== 0 ? (
+            }}
-                <>
+            className={styles.input}
-                  <span>{result?.activeMatchOrdinal || 0}</span>
+            onKeyDown={handleKeydown}
-                  <span>/</span>
+            onChange={e => handleValueChange(e.target.value)}
-                  <span>{result?.matches || 0}</span>
+          />
-                </>
+          <CanvasText className={styles.inputHack} text={value} />
-              ) : (
+        </div>
-                <span>No matches</span>
+        <div className={styles.count}>
-              )}
+          {value.length > 0 && result && result.matches !== 0 ? (
-            </div>
+            <>
-          }
+              <span>{result?.activeMatchOrdinal || 0}</span>
-          style={{
+              <span>/</span>
-            width: 239,
+              <span>{result?.matches || 0}</span>
-          }}
+            </>
-          className={styles.input}
+          ) : value.length ? (
-          inputStyle={{
+            <span>No matches</span>
-            padding: '0',
+          ) : null}
-          }}
+        </div>
-        />
 
         <Button
           className={clsx(styles.arrowButton, 'backward')}

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

@@ -9,7 +9,6 @@ import type {
 import type {
   affine as exposedAffineGlobal,
   appInfo as exposedAppInfo,
-  cmdFind as exposedCmdFind,
 } from '@affine/electron/preload/electron-api';
 
 type MainHandlers = typeof mainHandlers;
@@ -40,8 +39,5 @@ export const events = (globalThis as any).events as ClientEvents | null;
 export const affine = (globalThis as any).affine as
   | typeof exposedAffineGlobal
   | null;
-export const cmdFind = (globalThis as any).cmdFind as
-  | typeof exposedCmdFind
-  | null;
 
 export type { UpdateMeta } from '@affine/electron/main/updater/event';

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

@@ -1,17 +1,19 @@
+import type { NamespaceHandlers } from '../type';
+
 export const findInPageHandlers = {
-  findInPage: async (
+  find: async (event, text: string, options?: Electron.FindInPageOptions) => {
-    event: Electron.IpcMainInvokeEvent,
+    const { promise, resolve } =
-    text: string,
+      Promise.withResolvers<Electron.Result | null>();
-    options?: Electron.FindInPageOptions
-  ) => {
     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 (
+  clear: async event => {
-    event: Electron.IpcMainInvokeEvent,
-    action: 'clearSelection' | 'keepSelection' | 'activateSelection'
-  ) => {
     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();