Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-23 01:07:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): always show keyboard toolbar in mobile (#13384)

Browse Source 
Close
[AF-2756](https://linear.app/affine-design/issue/AF-2756/激活输入区的时候，展示toolbar，适配不弹虚拟键盘的场景，比如实体键盘)

#### PR Dependency Tree


* **PR #13384** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Improved virtual keyboard handling by introducing static keyboard
height and app tab safe area tracking for more consistent toolbar
behavior.

* **Bug Fixes**
* Enhanced keyboard visibility detection on Android and iOS, especially
when a physical keyboard is connected.

* **Refactor**
* Simplified and streamlined keyboard toolbar logic, including delayed
panel closing and refined height calculations.
* Removed unused or redundant toolbar closing methods and position
management logic.

* **Style**
* Updated toolbar and panel styles for better positioning and layout
consistency.
  * Adjusted and removed certain mobile-specific padding styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


#### PR Dependency Tree


* **PR #13384** 👈

This tree was auto-generated by
[Charcoal](https://github.com/danerwilliams/charcoal)
This commit is contained in:
L-Sun
2025-08-01 09:58:19 +08:00
committed by GitHub
parent cd29028311
commit 4e1f047cf2
11 changed files with 103 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
blocksuite/affine/widgets/keyboard-toolbar/src/config.ts
View File

@@ -168,10 +168,6 @@ export type KeyboardSubToolbarConfig = {
export type KeyboardToolbarContext = {
std: BlockStdScope;
rootComponent: BlockComponent;
/**
* Close tool bar, and blur the focus if blur is true, default is false
*/
closeToolbar: (blur?: boolean) => void;
/**
* Close current tool panel and show virtual keyboard
*/

21
blocksuite/affine/widgets/keyboard-toolbar/src/keyboard-tool-panel.ts
View File

@@ -71,21 +71,18 @@ export class AffineKeyboardToolPanel extends SignalWatcher(
.map(group => (typeof group === 'function' ? group(this.context) : group))
.filter((group): group is KeyboardToolPanelGroup => group !== null);
return repeat(
groups,
group => group.name,
group => this._renderGroup(group)
);
return html`<div class="affine-keyboard-tool-panel-container">
${repeat(
groups,
group => group.name,
group => this._renderGroup(group)
)}
</div>`;
}
protected override willUpdate(changedProperties: PropertyValues<this>) {
if (changedProperties.has('height')) {
this.style.height = `${this.height}px`;
if (this.height === 0) {
this.style.padding = '0';
} else {
this.style.padding = '';
}
this.style.height = this.height;
}
}
@@ -96,5 +93,5 @@ export class AffineKeyboardToolPanel extends SignalWatcher(
accessor context!: KeyboardToolbarContext;
@property({ attribute: false })
accessor height = 0;
accessor height = '';
}

83
blocksuite/affine/widgets/keyboard-toolbar/src/keyboard-toolbar.ts
View File

@@ -8,7 +8,7 @@ import {
requiredProperties,
ShadowlessElement,
} from '@blocksuite/std';
import { effect, type Signal, signal, untracked } from '@preact/signals-core';
import { effect, type Signal, signal } from '@preact/signals-core';
import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
@@ -22,7 +22,6 @@ import type {
KeyboardToolbarItem,
KeyboardToolPanelConfig,
} from './config';
import { PositionController } from './position-controller';
import { keyboardToolbarStyles } from './styles';
import {
isKeyboardSubToolBarConfig,
@@ -41,10 +40,7 @@ export class AffineKeyboardToolbar extends SignalWatcher(
) {
static override styles = keyboardToolbarStyles;
/** This field records the panel static height same as the virtual keyboard height */
panelHeight$ = signal(0);
positionController = new PositionController(this);
private readonly _expanded$ = signal(false);
get std() {
return this.rootComponent.std;
@@ -54,9 +50,31 @@ export class AffineKeyboardToolbar extends SignalWatcher(
return this._currentPanelIndex$.value !== -1;
}
private get panelHeight() {
return this._expanded$.value
? `${
this.keyboard.staticHeight$.value !== 0
? this.keyboard.staticHeight$.value
: 330
}px`
: this.keyboard.appTabSafeArea$.value;
}
/**
* Prevent flickering during keyboard opening
*/
private _resetPanelIndexTimeoutId: ReturnType<typeof setTimeout> | null =
null;
private readonly _closeToolPanel = () => {
this._currentPanelIndex$.value = -1;
if (!this.keyboard.visible$.peek()) this.keyboard.show();
if (this._resetPanelIndexTimeoutId) {
clearTimeout(this._resetPanelIndexTimeoutId);
this._resetPanelIndexTimeoutId = null;
}
this._resetPanelIndexTimeoutId = setTimeout(() => {
this._currentPanelIndex$.value = -1;
}, 100);
};
private readonly _currentPanelIndex$ = signal(-1);
@@ -83,6 +101,10 @@ export class AffineKeyboardToolbar extends SignalWatcher(
if (this._currentPanelIndex$.value === index) {
this._closeToolPanel();
} else {
if (this._resetPanelIndexTimeoutId) {
clearTimeout(this._resetPanelIndexTimeoutId);
this._resetPanelIndexTimeoutId = null;
}
this._currentPanelIndex$.value = index;
this.keyboard.hide();
this._scrollCurrentBlockIntoView();
@@ -123,9 +145,6 @@ export class AffineKeyboardToolbar extends SignalWatcher(
return {
std: this.std,
rootComponent: this.rootComponent,
closeToolbar: (blur = false) => {
this.close(blur);
},
closeToolPanel: () => {
this._closeToolPanel();
},
@@ -226,7 +245,15 @@ export class AffineKeyboardToolbar extends SignalWatcher(
<icon-button
size="36px"
@click=${() => {
this.close(true);
if (this.keyboard.staticHeight$.value === 0) {
this._closeToolPanel();
return;
}
if (this.keyboard.visible$.peek()) {
this.keyboard.hide();
} else {
this.keyboard.show();
}
}}
>
${KeyboardIcon()}
@@ -237,6 +264,23 @@ export class AffineKeyboardToolbar extends SignalWatcher(
override connectedCallback() {
super.connectedCallback();
// There are two cases that `_expanded$` will be true:
// 1. when virtual keyboard is opened, the panel need to be expanded and overlapped by the keyboard,
// so that the toolbar will be on the top of the keyboard.
// 2. the panel is opened, whether the keyboard is closed or not exists (e.g. a physical keyboard connected)
//
// There is one case that `_expanded$` will be false:
// 1. the panel is closed, and the keyboard is closed, the toolbar will be rendered at the bottom of the viewport
this._disposables.add(
effect(() => {
if (this.keyboard.visible$.value || this.panelOpened) {
this._expanded$.value = true;
} else {
this._expanded$.value = false;
}
})
);
// prevent editor blur when click item in toolbar
this.disposables.addFromEvent(this, 'pointerdown', e => {
e.preventDefault();
@@ -260,15 +304,17 @@ export class AffineKeyboardToolbar extends SignalWatcher(
if (this.keyboard.visible$.value) {
this._closeToolPanel();
}
// when keyboard is closed and the panel is not opened, we need to close the toolbar,
// this usually happens when user close keyboard from system side
else if (this.hasUpdated && untracked(() => !this.panelOpened)) {
this.close(true);
}
})
);
this._watchAutoShow();
this.disposables.add(() => {
if (this._resetPanelIndexTimeoutId) {
clearTimeout(this._resetPanelIndexTimeoutId);
this._resetPanelIndexTimeoutId = null;
}
});
}
private _watchAutoShow() {
@@ -331,7 +377,7 @@ export class AffineKeyboardToolbar extends SignalWatcher(
<affine-keyboard-tool-panel
.config=${this._currentPanelConfig}
.context=${this._context}
.height=${this.panelHeight$.value}
.height=${this.panelHeight}
></affine-keyboard-tool-panel>
`;
}
@@ -339,9 +385,6 @@ export class AffineKeyboardToolbar extends SignalWatcher(
@property({ attribute: false })
accessor keyboard!: VirtualKeyboardProviderWithAction;
@property({ attribute: false })
accessor close: (blur: boolean) => void = () => {};
@property({ attribute: false })
accessor config!: KeyboardToolbarConfig;

42
blocksuite/affine/widgets/keyboard-toolbar/src/position-controller.ts
View File

@@ -1,42 +0,0 @@
import { type VirtualKeyboardProvider } from '@blocksuite/affine-shared/services';
import { DisposableGroup } from '@blocksuite/global/disposable';
import type { BlockStdScope, ShadowlessElement } from '@blocksuite/std';
import { effect, type Signal } from '@preact/signals-core';
import type { ReactiveController, ReactiveControllerHost } from 'lit';
/**
* This controller is used to control the keyboard toolbar position
*/
export class PositionController implements ReactiveController {
private readonly _disposables = new DisposableGroup();
host: ReactiveControllerHost &
ShadowlessElement & {
std: BlockStdScope;
panelHeight$: Signal<number>;
keyboard: VirtualKeyboardProvider;
panelOpened: boolean;
};
constructor(host: PositionController['host']) {
(this.host = host).addController(this);
}
hostConnected() {
const { keyboard } = this.host;
this._disposables.add(
effect(() => {
if (keyboard.visible$.value) {
this.host.panelHeight$.value = keyboard.height$.value;
}
})
);
this.host.style.bottom = '0px';
}
hostDisconnected() {
this._disposables.dispose();
}
}

11
blocksuite/affine/widgets/keyboard-toolbar/src/styles.ts
View File

@@ -7,6 +7,7 @@ export const keyboardToolbarStyles = css`
position: fixed;
display: block;
width: 100vw;
bottom: 0;
}
.keyboard-toolbar {
@@ -60,14 +61,18 @@ export const keyboardToolbarStyles = css`
export const keyboardToolPanelStyles = css`
affine-keyboard-tool-panel {
display: block;
overflow-y: auto;
box-sizing: border-box;
background-color: ${unsafeCSSVarV2('layer/background/primary')};
}
.affine-keyboard-tool-panel-container {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
padding: 16px 4px 8px 8px;
overflow-y: auto;
box-sizing: border-box;
background-color: ${unsafeCSSVarV2('layer/background/primary')};
}
${scrollbarStyle('affine-keyboard-tool-panel')}

13
blocksuite/affine/widgets/keyboard-toolbar/src/widget.ts
View File

@@ -20,18 +20,6 @@ import {
export const AFFINE_KEYBOARD_TOOLBAR_WIDGET = 'affine-keyboard-toolbar-widget';
export class AffineKeyboardToolbarWidget extends WidgetComponent<RootBlockModel> {
private readonly _close = (blur: boolean) => {
if (blur) {
if (document.activeElement === this._docTitle?.inlineEditorContainer) {
this._docTitle?.inlineEditor?.setInlineRange(null);
this._docTitle?.inlineEditor?.eventSource?.blur();
} else if (document.activeElement === this.block?.rootComponent) {
this.std.selection.clear();
}
}
this._show$.value = false;
};
private readonly _show$ = signal(false);
private _initialInputMode: string = '';
@@ -129,7 +117,6 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<RootBlockModel>
.keyboard=${this.keyboard}
.config=${this.config}
.rootComponent=${this.block.rootComponent}
.close=${this._close}
></affine-keyboard-toolbar>`}
></blocksuite-portal>`;
}