refactor(core): add keyPress event to fix IME space detection (#11700)

### TL;DR
Refactor space-triggered AI Widget activation logic from `keydown` to `keypress` event listeners

### Background

The `keydown` event triggered by a space may originate from:
1. Normal space insertion
2. Space triggered by input method confirming candidate words

In scenarios like (2), some browsers (see [ISSUE](https://github.com/toeverything/AFFiNE/issues/11541)) and input method callbacks produce events identical to scenario (1),making it impossible to distinguish between the two.

To fix this, the space-activated AI listener uses the `keypress` event:
In scenario 2, `event.which !== 32` (may be `30430` or other values) can be used to differentiate from scenario 1.

> CLOSE BS-3081
This commit is contained in:
yoyoyohamapi
2025-04-15 08:37:27 +00:00
parent fd6c34cfa3
commit 0df584bd5e
4 changed files with 54 additions and 4 deletions

View File

@@ -5,20 +5,31 @@ import { AIProvider } from '../../provider';
import type { AffineAIPanelWidget } from '../../widgets/ai-panel/ai-panel';
export function setupSpaceAIEntry(panel: AffineAIPanelWidget) {
panel.handleEvent('keyDown', ctx => {
// Background: The keydown event triggered by a space may originate from:
// 1. Normal space insertion
// 2. Space triggered by input method confirming candidate words
// In scenarios like (2), some browsers (see [ISSUE](https://github.com/toeverything/AFFiNE/issues/11541))
// and input method callbacks produce events identical to scenario (1),
// making it impossible to distinguish between the two.
//
// To fix this, the space-activated AI listener uses the `keypress` event:
// In scenario 2, `event.which !== 32` (may be `30430` or other values) can be used to differentiate from scenario 1.
panel.handleEvent('keyPress', ctx => {
const host = panel.host;
const keyboardState = ctx.get('keyboardState');
const event = keyboardState.raw;
if (
AIProvider.actions.chat &&
keyboardState.raw.key === ' ' &&
!keyboardState.raw.isComposing
event.key === ' ' &&
event.which === 32 &&
!event.isComposing
) {
const selection = host.selection.find(TextSelection);
if (selection && selection.isCollapsed() && selection.from.index === 0) {
const block = host.view.getBlock(selection.blockId);
if (!block?.model?.text || block.model.text?.length > 0) return;
keyboardState.raw.preventDefault();
event.preventDefault();
handleInlineAskAIAction(host);
}
}