diff --git a/blocksuite/affine/blocks/root/src/page/page-root-spec.ts b/blocksuite/affine/blocks/root/src/page/page-root-spec.ts index 373105f432..fd4ddab5cf 100644 --- a/blocksuite/affine/blocks/root/src/page/page-root-spec.ts +++ b/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(); diff --git a/blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/index.ts b/blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/index.ts index 47faeb8c1e..3b94214cfd 100644 --- a/blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/index.ts +++ b/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 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 rootComponent.inputMode = 'none'; } }, - ...this.std.get(VirtualKeyboardProvider), + ...provider, }; } @@ -70,10 +74,6 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent 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 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) { diff --git a/blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts b/blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts index 45e646cdea..0f45cf92b4 100644 --- a/blocksuite/affine/blocks/root/src/widgets/keyboard-toolbar/keyboard-toolbar.ts +++ b/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(); } diff --git a/blocksuite/affine/shared/src/services/virtual-keyboard-service.ts b/blocksuite/affine/shared/src/services/virtual-keyboard-service.ts index c086cad05d..e4dee0e3e3 100644 --- a/blocksuite/affine/shared/src/services/virtual-keyboard-service.ts +++ b/blocksuite/affine/shared/src/services/virtual-keyboard-service.ts @@ -15,3 +15,9 @@ export interface VirtualKeyboardProviderWithAction export const VirtualKeyboardProvider = createIdentifier< VirtualKeyboardProvider | VirtualKeyboardProviderWithAction >('VirtualKeyboardProvider'); + +export function isVirtualKeyboardProviderWithAction( + provider: VirtualKeyboardProvider +): provider is VirtualKeyboardProviderWithAction { + return 'show' in provider && 'hide' in provider; +} diff --git a/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts b/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts index 7aaacc37dc..89f082f9a4 100644 --- a/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts +++ b/packages/frontend/core/src/blocksuite/extensions/entry/enable-mobile.ts @@ -4,10 +4,7 @@ import { codeToolbarWidget, } from '@blocksuite/affine/blocks/code'; import { ParagraphBlockConfigExtension } from '@blocksuite/affine/blocks/paragraph'; -import type { - Container, - ServiceIdentifier, -} from '@blocksuite/affine/global/di'; +import type { Container } from '@blocksuite/affine/global/di'; import { DisposableGroup } from '@blocksuite/affine/global/disposable'; import { FeatureFlagService, @@ -15,11 +12,7 @@ import { type VirtualKeyboardProviderWithAction, } from '@blocksuite/affine/shared/services'; import type { SpecBuilder } from '@blocksuite/affine/shared/utils'; -import { - type BlockStdScope, - LifeCycleWatcher, - LifeCycleWatcherIdentifier, -} from '@blocksuite/affine/std'; +import { type BlockStdScope, LifeCycleWatcher } from '@blocksuite/affine/std'; import type { ExtensionType } from '@blocksuite/affine/store'; import { SlashMenuExtension } from '@blocksuite/affine/widgets/slash-menu'; import { toolbarWidget } from '@blocksuite/affine/widgets/toolbar'; @@ -78,11 +71,7 @@ function KeyboardToolbarExtension(framework: FrameworkProvider): ExtensionType { static override setup(di: Container) { super.setup(di); di.addImpl(BSVirtualKeyboardProvider, provider => { - return provider.get( - LifeCycleWatcherIdentifier( - this.key - ) as ServiceIdentifier - ); + return provider.get(this); }); } @@ -103,7 +92,7 @@ function KeyboardToolbarExtension(framework: FrameworkProvider): ExtensionType { } if ('show' in affineVirtualKeyboardProvider) { - return class + return class BSVirtualKeyboardWithActionService extends BSVirtualKeyboardService implements VirtualKeyboardProviderWithAction {