refactor: find in page

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) => {
-    if (ref) {
-      window.setTimeout(() => ref.focus(), 0);
-    }
-  }, []);
+  const handleAutoFocus = useCallback(
+    (ref: HTMLInputElement | null) => {
+      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';
 
-type FindInPageResult = {
-  requestId: number;
-  activeMatchOrdinal: number;
-  matches: number;
-  finalUpdate: boolean;
-};
-export class FindInPage extends Entity {
-  // modal open/close
+const logger = new DebugLogger('affine:find-in-page');
 
+export class FindInPage extends Entity {
   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(
-      switchMap(searchText => {
-        if (!searchText) {
+    this.visible$.pipe(
+      distinctUntilChanged(),
+      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,25 +101,17 @@ export class FindInPage extends Entity {
       return;
     }
     this.direction$.next('backward');
-    this.searchText$.next(this.searchText$.value);
-    cmdFind?.onFindInPageResult(result => this.updateResult(result));
   }
 
   forward() {
     if (!this.searchText$.value) {
       return;
     }
     this.direction$.next('forward');
-    this.searchText$.next(this.searchText$.value);
-    cmdFind?.onFindInPageResult(result => this.updateResult(result));
   }
 
-  stopFindInPage(
-    action: 'clearSelection' | 'keepSelection' | 'activateSelection'
-  ) {
-    if (action === 'clearSelection') {
-      this.searchText$.next(null);
-    }
-    cmdFind?.stopFindInPage(action).catch(e => console.error(e));
+  clear() {
+    logger.debug('clear');
+    apis?.findInPage.clear().catch(logger.error);
   }
 }

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 input = style({
-  padding: '0 10px',
-  height: '32px',
+export const inputContainer = style({
+  display: 'flex',
+  alignSelf: 'stretch',
+  alignItems: 'center',
   gap: '8px',
-  color: cssVar('iconColor'),
+  flex: 1,
+  height: '32px',
+  position: 'relative',
+  margin: '0 8px',
+});
+
+export const input = style({
+  position: 'absolute',
+  padding: '0',
+  inset: 0,
+  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',