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/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -151,7 +151,7 @@ const usePatchSpecs = (mode: DocMode) => {
       builder.extend([patchForAttachmentEmbedViews(reactToLit)]);
     }
     if (BUILD_CONFIG.isMobileEdition) {
-      enableMobileExtension(builder);
+      enableMobileExtension(builder, framework);
     }
     if (BUILD_CONFIG.isElectron) {
       builder.extend([patchForClipboardInElectron(framework)].flat());

packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts

@@ -1,29 +1,36 @@
-import { createKeyboardToolbarConfig } from '@affine/core/blocksuite/extensions/keyboard-toolbar-config';
+import { VirtualKeyboardProvider } from '@affine/core/mobile/modules/virtual-keyboard';
 import {
   type BlockStdScope,
   ConfigIdentifier,
   LifeCycleWatcher,
+  LifeCycleWatcherIdentifier,
 } from '@blocksuite/affine/block-std';
 import type {
   CodeBlockConfig,
   ReferenceNodeConfig,
-  RootBlockConfig,
   SpecBuilder,
 } from '@blocksuite/affine/blocks';
 import {
   codeToolbarWidget,
+  DocModeProvider,
   embedCardToolbarWidget,
   FeatureFlagService,
   formatBarWidget,
   imageToolbarWidget,
   ParagraphBlockService,
   ReferenceNodeConfigIdentifier,
-  RootBlockConfigExtension,
   slashMenuWidget,
   surfaceRefToolbarWidget,
+  VirtualKeyboardProvider as BSVirtualKeyboardProvider,
 } from '@blocksuite/affine/blocks';
-import type { Container } from '@blocksuite/affine/global/di';
+import type {
+  Container,
+  ServiceIdentifier,
+} from '@blocksuite/affine/global/di';
+import { DisposableGroup } from '@blocksuite/affine/global/utils';
 import type { ExtensionType } from '@blocksuite/affine/store';
+import { batch, signal } from '@preact/signals-core';
+import type { FrameworkProvider } from '@toeverything/infra';
 
 class MobileSpecsPatches extends LifeCycleWatcher {
   static override key = 'mobile-patches';
@@ -86,28 +93,85 @@ class MobileSpecsPatches extends LifeCycleWatcher {
   }
 }
 
-const mobileExtensions: ExtensionType[] = [
+function KeyboardToolbarExtension(framework: FrameworkProvider): ExtensionType {
+  const affineVirtualKeyboardProvider = framework.get(VirtualKeyboardProvider);
+
+  class BSVirtualKeyboardService
+    extends LifeCycleWatcher
+    implements BSVirtualKeyboardProvider
   {
-    setup: di => {
-      const prev = di.getFactory(RootBlockConfigExtension.identifier);
+    static override key = BSVirtualKeyboardProvider.identifierName;
 
-      di.override(RootBlockConfigExtension.identifier, provider => {
-        return {
-          ...prev?.(provider),
-          keyboardToolbar: createKeyboardToolbarConfig(),
-        } satisfies RootBlockConfig;
+    private readonly _disposables = new DisposableGroup();
+
+    private get _rootContentEditable() {
+      const editorMode = this.std.get(DocModeProvider).getEditorMode();
+      if (editorMode !== 'page') return null;
+
+      if (!this.std.host.doc.root) return;
+      return this.std.view.getBlock(this.std.host.doc.root.id);
+    }
+
+    // eslint-disable-next-line rxjs/finnish
+    readonly visible$ = signal(false);
+
+    // eslint-disable-next-line rxjs/finnish
+    readonly height$ = signal(0);
+
+    show() {
+      if ('show' in affineVirtualKeyboardProvider) {
+        affineVirtualKeyboardProvider.show();
+      } else if (this._rootContentEditable) {
+        this._rootContentEditable.inputMode = '';
+      }
+    }
+    hide() {
+      if ('hide' in affineVirtualKeyboardProvider) {
+        affineVirtualKeyboardProvider.hide();
+      } else if (this._rootContentEditable) {
+        this._rootContentEditable.inputMode = 'none';
+      }
+    }
+
+    static override setup(di: Container) {
+      super.setup(di);
+      di.addImpl(BSVirtualKeyboardProvider, provider => {
+        return provider.get(
+          LifeCycleWatcherIdentifier(
+            this.key
+          ) as ServiceIdentifier<BSVirtualKeyboardService>
+        );
       });
-    },
-  },
-  MobileSpecsPatches,
-];
+    }
 
-export function enableMobileExtension(specBuilder: SpecBuilder): void {
+    override mounted() {
+      this._disposables.add(
+        affineVirtualKeyboardProvider.onChange(({ visible, height }) => {
+          batch(() => {
+            this.visible$.value = visible;
+            this.height$.value = height;
+          });
+        })
+      );
+    }
+
+    override unmounted() {
+      this._disposables.dispose();
+    }
+  }
+
+  return BSVirtualKeyboardService;
+}
+
+export function enableMobileExtension(
+  specBuilder: SpecBuilder,
+  framework: FrameworkProvider
+): void {
   specBuilder.omit(formatBarWidget);
   specBuilder.omit(embedCardToolbarWidget);
   specBuilder.omit(slashMenuWidget);
   specBuilder.omit(codeToolbarWidget);
   specBuilder.omit(imageToolbarWidget);
   specBuilder.omit(surfaceRefToolbarWidget);
-  specBuilder.extend(mobileExtensions);
+  specBuilder.extend([MobileSpecsPatches, KeyboardToolbarExtension(framework)]);
 }

packages/frontend/core/src/blocksuite/extensions/keyboard-toolbar-config.ts

@@ -1,9 +0,0 @@
-import { type KeyboardToolbarConfig } from '@blocksuite/affine/blocks';
-
-export function createKeyboardToolbarConfig(): Partial<KeyboardToolbarConfig> {
-  return {
-    // TODO(@L-Sun): check android following the PR
-    // https://github.com/toeverything/blocksuite/pull/8645
-    useScreenHeight: BUILD_CONFIG.isIOS,
-  };
-}

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)`,
 });

packages/frontend/core/src/modules/at-menu-config/services/index.ts

@@ -322,7 +322,6 @@ export class AtMenuConfigService extends Service {
 
   private getMobileConfig(): Partial<LinkedWidgetConfig['mobile']> {
     return {
-      useScreenHeight: BUILD_CONFIG.isIOS,
       scrollContainer: window,
       scrollTopOffset: () => {
         const header = document.querySelector('header');