fix(mobile): incorrect height of keyboard toolbar in ios (#8653)

### What Changes: - Fix keyboard height calculation with the `KeyboardToolBarConfig.useScreenHeight = true`. More detials in: https://github.com/toeverything/blocksuite/pull/8645 - Add safe bottom padding for shrinked keyboard toolbar - Add `VirtualKeyboard` polyfill. Close [AF-1573](https://linear.app/affine-design/issue/AF-1573/virtualkeyboard-polyfill-with-capacitor) - Since the `@capacitor/keyboard` dose not implement the `Keyboard.show()` method, this polyfill is not enabled now.
2026-07-25 22:38:56 +08:00 · 2024-11-01 05:48:30 +00:00
parent 10b1f233d9
commit 1973cea035
9 changed files with 198 additions and 5 deletions
@@ -1,3 +1,6 @@
 import '@affine/core/bootstrap/browser';
 import '@affine/component/theme';
 import '@affine/core/mobile/styles/mobile.css';
+
+// TODO(@L-Sun) Uncomment this when the `show` method implement by `@capacitor/keyboard` in ios
+// import './virtual-keyboard';
@@ -0,0 +1,152 @@
+import type { PluginListenerHandle } from '@capacitor/core/types/definitions';
+import { Keyboard } from '@capacitor/keyboard';
+
+type VirtualKeyboardCallback =
+  | (<K extends keyof VirtualKeyboardEventMap>(
+      this: VirtualKeyboard,
+      ev: VirtualKeyboardEventMap[K]
+    ) => any)
+  | EventListenerOrEventListenerObject;
+
+class NavigatorVirtualKeyboard implements VirtualKeyboard {
+  private readonly _boundingRect = new DOMRect();
+
+  private readonly _overlaysContent = false;
+
+  private _listeners = new Map<
+    string,
+    Set<{
+      cb: VirtualKeyboardCallback;
+      options?: boolean | AddEventListenerOptions;
+    }>
+  >();
+
+  private _capacitorListenerHandles: PluginListenerHandle[] = [];
+
+  private async _bindListener() {
+    const updateBoundingRect = (info?: { keyboardHeight: number }) => {
+      this.boundingRect.x = 0;
+      this.boundingRect.y = info ? window.innerHeight - info.keyboardHeight : 0;
+      this.boundingRect.width = window.innerWidth;
+      this.boundingRect.height = info ? info.keyboardHeight : 0;
+      this.dispatchEvent(new Event('geometrychange'));
+    };
+
+    this._capacitorListenerHandles = [
+      await Keyboard.addListener('keyboardDidShow', updateBoundingRect),
+      await Keyboard.addListener('keyboardDidHide', updateBoundingRect),
+    ];
+  }
+
+  dispatchEvent = (event: Event) => {
+    const listeners = this._listeners.get(event.type);
+    if (listeners) {
+      for (const l of listeners) {
+        if (typeof l.cb === 'function') {
+          l.cb.call(this, event);
+        } else {
+          l.cb.handleEvent(event);
+        }
+      }
+    }
+    return !(event.cancelable && event.defaultPrevented);
+  };
+
+  constructor() {
+    this._bindListener();
+  }
+
+  destroy() {
+    this._capacitorListenerHandles.forEach(handle => handle.remove());
+  }
+
+  get boundingRect(): DOMRect {
+    return this._boundingRect;
+  }
+
+  get overlaysContent(): boolean {
+    return this._overlaysContent;
+  }
+
+  set overlaysContent(_: boolean) {
+    console.warn(
+      'overlaysContent is read-only in polyfill based on @capacitor/keyboard'
+    );
+  }
+
+  hide() {
+    Keyboard.hide();
+  }
+
+  show() {
+    Keyboard.show();
+  }
+
+  ongeometrychange: ((this: VirtualKeyboard, ev: Event) => any) | null = null;
+
+  addEventListener<K extends keyof VirtualKeyboardEventMap>(
+    type: K,
+    listener: VirtualKeyboardCallback,
+    options?: boolean | AddEventListenerOptions
+  ) {
+    if (!this._listeners.has(type)) {
+      this._listeners.set(type, new Set());
+    }
+
+    const listeners = this._listeners.get(type);
+    if (!listeners) return;
+
+    listeners.add({ cb: listener, options });
+  }
+
+  removeEventListener<K extends keyof VirtualKeyboardEventMap>(
+    type: K,
+    listener: VirtualKeyboardCallback,
+    options?: boolean | EventListenerOptions
+  ) {
+    const listeners = this._listeners.get(type);
+    if (!listeners) return;
+
+    const sameCapture = (
+      a?: boolean | AddEventListenerOptions,
+      b?: boolean | EventListenerOptions
+    ) => {
+      if (a === undefined && b === undefined) {
+        return true;
+      }
+
+      if (typeof a === 'boolean' && typeof b === 'boolean') {
+        return a === b;
+      }
+
+      if (typeof a === 'object' && typeof b === 'object') {
+        return a.capture === b.capture;
+      }
+
+      if (typeof a === 'object' && typeof b === 'boolean') {
+        return a.capture === b;
+      }
+
+      if (typeof a === 'boolean' && typeof b === 'object') {
+        return a === b.capture;
+      }
+
+      return false;
+    };
+
+    let target = null;
+    for (const l of listeners) {
+      if (l.cb === listener && sameCapture(l.options, options)) {
+        target = l;
+        break;
+      }
+    }
+
+    if (target) {
+      listeners.delete(target);
+    }
+  }
+}
+
+// @ts-expect-error polyfill
+navigator.virtualKeyboard = new NavigatorVirtualKeyboard();