feat(core): cmd+f search in doc function

packages/frontend/core/src/atoms/index.ts

@@ -15,6 +15,8 @@ export const openStarAFFiNEModalAtom = atom(false);
 export const openIssueFeedbackModalAtom = atom(false);
 export const openHistoryTipsModalAtom = atom(false);
 
+export const rightSidebarWidthAtom = atom(320);
+
 export type SettingAtom = Pick<
   SettingProps,
   'activeTab' | 'workspaceMetadata'

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

@@ -0,0 +1,34 @@
+import { FindInPageService } from '@affine/core/modules/find-in-page/services/find-in-page';
+import { registerAffineCommand, useService } from '@toeverything/infra';
+import { useCallback, useEffect } from 'react';
+
+export function useRegisterFindInPageCommands() {
+  const findInPage = useService(FindInPageService).findInPage;
+  const toggleVisible = useCallback(() => {
+    findInPage.toggleVisible();
+  }, [findInPage]);
+
+  useEffect(() => {
+    if (!environment.isDesktop) {
+      return;
+    }
+    const unsubs: Array<() => void> = [];
+    unsubs.push(
+      registerAffineCommand({
+        id: `editor:find-in-page`,
+        keyBinding: {
+          binding: '$mod+f',
+        },
+        icon: null,
+        label: '',
+        run() {
+          toggleVisible();
+        },
+      })
+    );
+
+    return () => {
+      unsubs.forEach(unsub => unsub());
+    };
+  }, [toggleVisible]);
+}

packages/frontend/core/src/layouts/workspace-layout.tsx

@@ -35,6 +35,7 @@ import {
   resolveDragEndIntent,
   useGlobalDNDHelper,
 } from '../hooks/affine/use-global-dnd-helper';
+import { useRegisterFindInPageCommands } from '../hooks/affine/use-register-find-in-page-commands';
 import { useNavigateHelper } from '../hooks/use-navigate-helper';
 import { useRegisterWorkspaceCommands } from '../hooks/use-register-workspace-commands';
 import { useRegisterNavigationCommands } from '../modules/navigation/view/use-register-navigation-commands';
@@ -117,6 +118,7 @@ export const WorkspaceLayoutInner = ({ children }: PropsWithChildren) => {
 
   useRegisterWorkspaceCommands();
   useRegisterNavigationCommands();
+  useRegisterFindInPageCommands();
 
   useEffect(() => {
     // hotfix for blockVersions

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

@@ -0,0 +1,108 @@
+import { cmdFind } from '@affine/electron-api';
+import { Entity, LiveData } from '@toeverything/infra';
+import { Observable, of, switchMap } from 'rxjs';
+
+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);
+
+  readonly visible$ = new LiveData(false);
+
+  readonly result$ = LiveData.from(
+    this.searchText$.pipe(
+      switchMap(searchText => {
+        if (!searchText) {
+          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);
+            };
+          });
+        }
+      })
+    ),
+    { requestId: 0, activeMatchOrdinal: 0, matches: 0, finalUpdate: true }
+  );
+
+  constructor() {
+    super();
+  }
+
+  findInPage(searchText: string) {
+    this.searchText$.next(searchText);
+  }
+
+  private updateResult(result: FindInPageResult) {
+    this.result$.next(result);
+  }
+
+  onChangeVisible(visible: boolean) {
+    this.visible$.next(visible);
+    if (!visible) {
+      this.stopFindInPage('clearSelection');
+    }
+  }
+
+  toggleVisible() {
+    const nextVisible = !this.visible$.value;
+    this.visible$.next(nextVisible);
+    if (!nextVisible) {
+      this.stopFindInPage('clearSelection');
+    }
+  }
+
+  backward() {
+    if (!this.searchText$.value) {
+      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));
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { Framework } from '@toeverything/infra';
+
+import { FindInPage } from './entities/find-in-page';
+import { FindInPageService } from './services/find-in-page';
+
+export function configureFindInPageModule(framework: Framework) {
+  framework.service(FindInPageService).entity(FindInPage);
+}

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

@@ -0,0 +1,7 @@
+import { Service } from '@toeverything/infra';
+
+import { FindInPage } from '../entities/find-in-page';
+
+export class FindInPageService extends Service {
+  public readonly findInPage = this.framework.createEntity(FindInPage);
+}

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

@@ -0,0 +1,58 @@
+import { cssVar } from '@toeverything/theme';
+import { createVar, style } from '@vanilla-extract/css';
+
+export const panelWidthVar = createVar('panel-width');
+
+export const container = style({
+  vars: {
+    [panelWidthVar]: '0px',
+  },
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '8px 12px 8px 8px',
+  position: 'fixed',
+  right: '28px',
+  top: '80px',
+  transform: `translateX(calc(${panelWidthVar} * -1))`,
+});
+
+export const leftContent = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const input = style({
+  padding: '0 10px',
+  height: '32px',
+  gap: '8px',
+  color: cssVar('iconColor'),
+  background: cssVar('white10'),
+});
+
+export const count = style({
+  color: cssVar('textSecondaryColor'),
+  fontSize: cssVar('fontXs'),
+  userSelect: 'none',
+});
+
+export const arrowButton = style({
+  padding: '4px',
+  fontSize: '24px',
+  width: '32px',
+  height: '32px',
+  border: '1px solid',
+  borderColor: cssVar('borderColor'),
+  alignItems: 'baseline',
+  background: 'transparent',
+  selectors: {
+    '&.backward': {
+      marginLeft: '8px',
+      borderRadius: '4px 0 0 4px',
+    },
+    '&.forward': {
+      borderLeft: 'none',
+      borderRadius: '0 4px 4px 0',
+    },
+  },
+});