fix(editor): android bs keyboard provider error (#11647)

### What Changes
- fixed keyboard service can not be initialized since a anonymous `BSKeyboardWithActionService` class was provider to di
- fixed tool panel was not closed when focus on other pragraph by clicking
- optimized code structure of fallback `show` and `hide` of keyboard

blocksuite/affine/blocks/root/src/page/page-root-spec.ts

@@ -1,4 +1,5 @@
 import { ViewportElementExtension } from '@blocksuite/affine-shared/services';
+import { IS_MOBILE } from '@blocksuite/global/env';
 import { BlockViewExtension, WidgetViewExtension } from '@blocksuite/std';
 import type { ExtensionType } from '@blocksuite/store';
 import { literal, unsafeStatic } from 'lit/static-html.js';
@@ -31,7 +32,7 @@ const PageCommonExtension: ExtensionType[] = [
 export const PageRootBlockSpec: ExtensionType[] = [
   ...PageCommonExtension,
   BlockViewExtension('affine:page', literal`affine-page-root`),
-  keyboardToolbarWidget,
+  IS_MOBILE ? [keyboardToolbarWidget] : [],
   PageClipboard,
 ].flat();
 

blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/index.ts

@@ -2,6 +2,7 @@ import { getDocTitleByEditorHost } from '@blocksuite/affine-fragment-doc-title';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import {
   FeatureFlagService,
+  isVirtualKeyboardProviderWithAction,
   VirtualKeyboardProvider,
   type VirtualKeyboardProviderWithAction,
 } from '@blocksuite/affine-shared/services';
@@ -34,7 +35,10 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<RootBlockModel>
 
   private _initialInputMode: string = '';
 
-  get keyboard(): VirtualKeyboardProviderWithAction {
+  get keyboard(): VirtualKeyboardProviderWithAction & { fallback?: boolean } {
+    const provider = this.std.get(VirtualKeyboardProvider);
+    if (isVirtualKeyboardProviderWithAction(provider)) return provider;
+
     return {
       // fallback keyboard actions
       show: () => {
@@ -49,7 +53,7 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<RootBlockModel>
           rootComponent.inputMode = 'none';
         }
       },
-      ...this.std.get(VirtualKeyboardProvider),
+      ...provider,
     };
   }
 
@@ -70,10 +74,6 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<RootBlockModel>
 
     const rootComponent = this.block?.rootComponent;
     if (rootComponent) {
-      this._initialInputMode = rootComponent.inputMode;
-      this.disposables.add(() => {
-        rootComponent.inputMode = this._initialInputMode;
-      });
       this.disposables.addFromEvent(rootComponent, 'focus', () => {
         this._show$.value = true;
       });
@@ -81,14 +81,20 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<RootBlockModel>
         this._show$.value = false;
       });
 
-      this.disposables.add(
-        effect(() => {
-          // recover input mode when keyboard toolbar is hidden
-          if (!this._show$.value) {
-            rootComponent.inputMode = this._initialInputMode;
-          }
-        })
-      );
+      if (this.keyboard.fallback) {
+        this._initialInputMode = rootComponent.inputMode;
+        this.disposables.add(() => {
+          rootComponent.inputMode = this._initialInputMode;
+        });
+        this.disposables.add(
+          effect(() => {
+            // recover input mode when keyboard toolbar is hidden
+            if (!this._show$.value) {
+              rootComponent.inputMode = this._initialInputMode;
+            }
+          })
+        );
+      }
     }
 
     if (this._docTitle) {

blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts

@@ -55,10 +55,8 @@ export class AffineKeyboardToolbar extends SignalWatcher(
   }
 
   private readonly _closeToolPanel = () => {
-    if (!this.panelOpened) return;
-
     this._currentPanelIndex$.value = -1;
-    this.keyboard.show();
+    if (!this.keyboard.visible$.peek()) this.keyboard.show();
   };
 
   private readonly _currentPanelIndex$ = signal(-1);
@@ -255,6 +253,16 @@ export class AffineKeyboardToolbar extends SignalWatcher(
       })
     );
 
+    this.disposables.add(
+      effect(() => {
+        // sometime the keyboard will auto show when user click into different paragraph in Android,
+        // so we need to close the tool panel explicitly when the keyboard is visible
+        if (this.keyboard.visible$.value) {
+          this._closeToolPanel();
+        }
+      })
+    );
+
     this._watchAutoShow();
   }