fix(electron): optimize find in page in electron (2) (#9901)

1. find in page should have higher z-index than other modals
2. fix focused texts are not automatically being used as the default input value for searching

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

@@ -9,12 +9,12 @@ import { useCallback, useEffect } from 'react';
 
 export function useRegisterFindInPageCommands() {
   const findInPage = useServiceOptional(FindInPageService)?.findInPage;
-  const toggleVisible = useCallback(() => {
+  const showFindInPage = useCallback(() => {
     // get the selected text in page
     const selection = window.getSelection();
     const selectedText = selection?.toString();
 
-    findInPage?.toggleVisible(selectedText);
+    findInPage?.findInPage(selectedText);
   }, [findInPage]);
 
   useEffect(() => {
@@ -33,8 +33,7 @@ export function useRegisterFindInPageCommands() {
         label: '',
         run() {
           track.$.cmdk.general.findInPage();
-
+          showFindInPage();
-          toggleVisible();
         },
       })
     );
@@ -42,5 +41,5 @@ export function useRegisterFindInPageCommands() {
     return () => {
       unsubs.forEach(unsub => unsub());
     };
-  }, [toggleVisible]);
+  }, [findInPage, showFindInPage]);
 }

packages/frontend/core/src/desktop/pages/root/find-in-page/find-in-page-popup.css.ts

@@ -46,7 +46,7 @@ export const contentContainer = style({
   justifyContent: 'space-between',
   border: `0.5px solid ${cssVar('borderColor')}`,
   padding: '8px 12px 8px 8px',
-  zIndex: cssVar('zIndexModal'),
+  zIndex: `calc(${cssVar('zIndexModal')} + 1)`,
   willChange: 'transform, opacity',
   selectors: {
     '&[data-state=entered], &[data-state=entering]': {

packages/frontend/core/src/desktop/pages/root/find-in-page/find-in-page-popup.tsx

@@ -19,7 +19,7 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useTransition } from 'react-transition-state';
+import { useTransitionState } from 'react-transition-state';
 
 import * as styles from './find-in-page-popup.css';
 
@@ -93,13 +93,14 @@ export const FindInPagePopup = () => {
   const [scrollLeft, setScrollLeft] = useState(0);
   const [composing, setComposing] = useState(false);
 
-  const [{ status }, toggle] = useTransition({
+  const [{ status }, toggle] = useTransitionState({
     timeout: animationTimeout,
   });
 
   useEffect(() => {
     toggle(visible);
-  }, [visible]);
+    setValue(findInPage.searchText$.value || '');
+  }, [findInPage.searchText$.value, toggle, visible]);
 
   const handleValueChange = useCallback(
     (value: string) => {
@@ -203,14 +204,10 @@ export const FindInPagePopup = () => {
           data-state={status}
           sideOffset={5}
           side="left"
-          onFocusOutside={e => {
+          onInteractOutside={e => {
             // do not close the popup when focus outside (like focus in the editor)
             e.preventDefault();
           }}
-          onPointerDownOutside={e => {
-            // do not close the popup when clicking outside (like clicking at the sidebar)
-            e.preventDefault();
-          }}
         >
           <div
             className={clsx(styles.inputContainer, {

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

@@ -75,9 +75,11 @@ export class FindInPage extends Entity {
     // TODO(@Peng): hide on navigation
   }
 
-  findInPage(searchText: string) {
+  findInPage(searchText?: string) {
     this.onChangeVisible(true);
-    this.searchText$.next(searchText);
+    if (searchText !== undefined) {
+      this.searchText$.next(searchText);
+    }
   }
 
   onChangeVisible(visible: boolean) {