fix(editor): android keyboard can not be opened (#10502)

Close [BS-2674](https://linear.app/affine-design/issue/BS-2674/[android]-%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%8C%BA%E5%9F%9F%E7%82%B9%E5%87%BB%E5%90%8E%E6%97%A0%E6%B3%95%E6%BF%80%E6%B4%BB%E9%94%AE%E7%9B%98) [BS-2609](https://linear.app/affine-design/issue/BS-2609/[android]-%E8%BE%93%E5%85%A5%E7%9A%84-toolbar-%E6%B2%A1%E6%9C%89%E4%BA%86)

packages/frontend/core/src/mobile/components/app-tabs/index.tsx

@@ -18,7 +18,7 @@ export const AppTabs = ({
   fixed?: boolean;
 }) => {
   const virtualKeyboardService = useService(VirtualKeyboardService);
-  const virtualKeyboardVisible = useLiveData(virtualKeyboardService.show$);
+  const virtualKeyboardVisible = useLiveData(virtualKeyboardService.visible$);
 
   const tab = (
     <SafeArea

packages/frontend/core/src/mobile/modules/virtual-keyboard/index.ts

@@ -6,8 +6,5 @@ import { VirtualKeyboardService } from './services/virtual-keyboard';
 export { VirtualKeyboardProvider, VirtualKeyboardService };
 
 export function configureMobileVirtualKeyboardModule(framework: Framework) {
-  framework.service(
-    VirtualKeyboardService,
-    f => new VirtualKeyboardService(f.getOptional(VirtualKeyboardProvider))
-  );
+  framework.service(VirtualKeyboardService, [VirtualKeyboardProvider]);
 }

packages/frontend/core/src/mobile/modules/virtual-keyboard/providers/virtual-keyboard.ts

@@ -1,23 +1,28 @@
 import { createIdentifier } from '@toeverything/infra';
 
-export type VirtualKeyboardEvent =
-  | 'keyboardWillShow'
-  | 'keyboardDidShow'
-  | 'keyboardWillHide'
-  | 'keyboardDidHide';
-
-export interface VirtualKeyboardEventInfo {
-  keyboardHeight: number;
+interface VirtualKeyboardInfo {
+  visible: boolean;
+  height: number;
 }
-type VirtualKeyboardEventListener = (info: VirtualKeyboardEventInfo) => void;
 
-export interface VirtualKeyboardProvider {
-  addEventListener: (
-    event: VirtualKeyboardEvent,
-    callback: VirtualKeyboardEventListener
-  ) => void;
-  removeAllListeners: () => void;
-}
+type VirtualKeyboardAction = {
+  /**
+   * Open the virtual keyboard, the focused element should not be changed
+   */
+  show: () => void;
+  /**
+   * Hide the virtual keyboard, the focused element should not be changed
+   */
+  hide: () => void;
+};
+
+type VirtualKeyboardEvent = {
+  onChange: (callback: (info: VirtualKeyboardInfo) => void) => () => void;
+};
+
+export type VirtualKeyboardProvider =
+  | (VirtualKeyboardEvent & VirtualKeyboardAction)
+  | VirtualKeyboardEvent;
 
 export const VirtualKeyboardProvider =
   createIdentifier<VirtualKeyboardProvider>('VirtualKeyboardProvider');

packages/frontend/core/src/mobile/modules/virtual-keyboard/services/virtual-keyboard.ts

@@ -3,32 +3,23 @@ import { LiveData, Service } from '@toeverything/infra';
 import type { VirtualKeyboardProvider } from '../providers/virtual-keyboard';
 
 export class VirtualKeyboardService extends Service {
-  show$ = new LiveData(false);
-  height$ = new LiveData(0);
+  readonly visible$ = new LiveData(false);
+
+  readonly height$ = new LiveData(0);
 
   constructor(
-    private readonly virtualKeyboardProvider?: VirtualKeyboardProvider
+    private readonly virtualKeyboardProvider: VirtualKeyboardProvider
   ) {
     super();
     this._observe();
   }
 
-  override dispose() {
-    super.dispose();
-    this.virtualKeyboardProvider?.removeAllListeners();
-  }
-
   private _observe() {
-    this.virtualKeyboardProvider?.addEventListener(
-      'keyboardWillShow',
-      ({ keyboardHeight }) => {
-        this.show$.next(true);
-        this.height$.next(keyboardHeight);
-      }
+    this.disposables.push(
+      this.virtualKeyboardProvider.onChange(info => {
+        this.visible$.next(info.visible);
+        this.height$.next(info.height);
+      })
     );
-    this.virtualKeyboardProvider?.addEventListener('keyboardWillHide', () => {
-      this.show$.next(false);
-      this.height$.next(0);
-    });
   }
 }

packages/frontend/core/src/mobile/styles/mobile.css.ts

@@ -23,9 +23,6 @@ globalStyle('body', {
 globalStyle('body:has(> #app-tabs)', {
   paddingBottom: globalVars.appTabSafeArea,
 });
-globalStyle('body:has(#app-tabs) affine-keyboard-toolbar[data-shrink="true"]', {
-  paddingBottom: globalVars.appTabSafeArea,
-});
 globalStyle('body:has(#app-tabs) affine-keyboard-tool-panel', {
   paddingBottom: `calc(${globalVars.appTabHeight} + env(safe-area-inset-bottom) + 8px)`,
 });