Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 21:27:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): android keyboard can not be opened (#10502)

Browse Source 
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)
This commit is contained in:
L-Sun
2025-02-28 08:23:26 +00:00
parent f1df774188
commit d476d3b1df
27 changed files with 356 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
packages/frontend/apps/android/src/app.tsx
View File

@@ -97,15 +97,48 @@ framework.impl(ClientSchemeProvider, {
});
framework.impl(VirtualKeyboardProvider, {
addEventListener: (event, callback) => {
Keyboard.addListener(event as any, callback as any).catch(e => {
console.error(e);
show: () => {
Keyboard.show().catch(console.error);
},
hide: () => {
// In some cases, the keyboard will show again. for example, it will show again
// when this function is called in click event of button. It may be a bug of
// android webview or capacitor.
setTimeout(() => {
Keyboard.hide().catch(console.error);
});
},
removeAllListeners: () => {
Keyboard.removeAllListeners().catch(e => {
console.error(e);
});
onChange: callback => {
let disposeRef = {
dispose: () => {},
};
Promise.all([
Keyboard.addListener('keyboardWillShow', info => {
callback({
visible: true,
height: info.keyboardHeight,
});
}),
Keyboard.addListener('keyboardWillHide', () => {
callback({
visible: false,
height: 0,
});
}),
])
.then(handlers => {
disposeRef.dispose = () => {
Promise.all(handlers.map(handler => handler.remove())).catch(
console.error
);
};
})
.catch(console.error);
return () => {
disposeRef.dispose();
};
},
});

2
packages/frontend/apps/ios/capacitor.config.ts
View File

@@ -20,7 +20,7 @@ const config: CapacitorConfig = {
enabled: false,
},
Keyboard: {
resize: KeyboardResize.Native,
resize: KeyboardResize.None,
},
},
};

43
packages/frontend/apps/ios/src/app.tsx
View File

@@ -106,15 +106,40 @@ framework.impl(ValidatorProvider, {
},
});
framework.impl(VirtualKeyboardProvider, {
addEventListener: (event, callback) => {
Keyboard.addListener(event as any, callback as any).catch(e => {
console.error(e);
});
},
removeAllListeners: () => {
Keyboard.removeAllListeners().catch(e => {
console.error(e);
});
// We dose not provide show and hide because:
// - Keyboard.show() is not implemented
// - Keyboard.hide() will blur the current editor
onChange: callback => {
let disposeRef = {
dispose: () => {},
};
Promise.all([
Keyboard.addListener('keyboardDidShow', info => {
callback({
visible: true,
height: info.keyboardHeight,
});
}),
Keyboard.addListener('keyboardWillHide', () => {
callback({
visible: false,
height: 0,
});
}),
])
.then(handlers => {
disposeRef.dispose = () => {
Promise.all(handlers.map(handler => handler.remove())).catch(
console.error
);
};
})
.catch(console.error);
return () => {
disposeRef.dispose();
};
},
});
framework.impl(NavigationGestureProvider, {

162
packages/frontend/apps/ios/src/virtual-keyboard.ts
View File

@@ -1,162 +0,0 @@
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 readonly _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().catch(e => {
console.error(e);
});
}
destroy() {
this._capacitorListenerHandles.forEach(handle => {
handle.remove().catch(e => {
console.error(e);
});
});
}
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().catch(e => {
console.error(e);
});
}
show() {
Keyboard.show().catch(e => {
console.error(e);
});
}
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();

39
packages/frontend/apps/mobile/src/app.tsx
View File

@@ -2,6 +2,7 @@ import { AffineContext } from '@affine/core/components/context';
import { AppFallback } from '@affine/core/mobile/components/app-fallback';
import { configureMobileModules } from '@affine/core/mobile/modules';
import { HapticProvider } from '@affine/core/mobile/modules/haptics';
import { VirtualKeyboardProvider } from '@affine/core/mobile/modules/virtual-keyboard';
import { router } from '@affine/core/mobile/router';
import { configureCommonModules } from '@affine/core/modules';
import { I18nProvider } from '@affine/core/modules/i18n';
@@ -99,6 +100,44 @@ framework.impl(HapticProvider, {
selectionChanged: () => Promise.reject('Not supported'),
selectionEnd: () => Promise.reject('Not supported'),
});
framework.impl(VirtualKeyboardProvider, {
onChange: callback => {
if (!visualViewport) {
console.warn('visualViewport is not supported');
return () => {};
}
const listener = () => {
if (!visualViewport) return;
const windowHeight = window.innerHeight;
/**
* ┌───────────────┐ - window top
* │ │
* │ │
* │ │
* │ │
* │ │
* └───────────────┘ - keyboard top --
* │ │ │ keyboard height in layout viewport
* └───────────────┘ - page(html) bottom --
* │ │ │ visualViewport.offsetTop
* └───────────────┘ - window bottom --
*/
callback({
visible: window.innerHeight - visualViewport.height > 0,
height: windowHeight - visualViewport.height - visualViewport.offsetTop,
});
};
visualViewport.addEventListener('resize', listener);
visualViewport.addEventListener('scroll', listener);
return () => {
visualViewport?.removeEventListener('resize', listener);
visualViewport?.removeEventListener('scroll', listener);
};
},
});
const frameworkProvider = framework.provider();
// setup application lifecycle events, and emit application start event