fix(blocks): ime compatibility of slash menu

toeverything / blocksuite

🧩 Content editing tech stack for the web - BlockSuite is a toolkit for building editors and collaborative applications.

https://blocksuite.io

Mozilla Public License 2.0

4.08k stars 352 forks source link

fix(blocks): ime compatibility of slash menu #7452

Closed L-Sun closed 3 days ago

L-Sun commented 4 days ago

Closes: #7451

What changes

Use the beforeInput event instead of the keyDown event, as the latter cannot capture the actual input character when IME are active. For example, when pressing / with Sogou IME, the actual character input is 、, but at this time event.key is equal to Process.

After using the beforeInput event, there is no need to check whether various modifier keys are pressed, such as in non-English keyboard layouts, like the French keyboard (Shift + Slash = /) and the German keyboard (Shift + 7 = /).

However, in the new implementation with Chinese IME actived, pressing \ key also tirgger slash menu becasue of 、 inputed.

Test cases

[x] Update a playwright test cases for '、'
[x] Test on fr and de keyboard layout manually
[x] Test on Microsoft Pinyin and Sougou Pinyin manually
[x] Test mobile browser manually
- [x] Andorid Chrome (known issue: can not close slash menu by pressing backspace)
- [x] IOS Chrome & Safari

vercel[bot] commented 4 days ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
blocksuite	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 1, 2024 7:01am

1 Ignored Deployment

graphite-app[bot] commented 4 days ago

Your org has enabled the Graphite merge queue for merging into master

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

L-Sun commented 4 days ago

#7452 👈
master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @L-Sun and the rest of your teammates on Graphite

graphite-app[bot] commented 4 days ago

Merge activity

Jul 1, 2:59 AM EDT: The merge label 'merge' was detected. This PR will be added to the Graphite merge queue once it meets the requirements.
Jul 1, 2:59 AM EDT: L-Sun added this pull request to the Graphite merge queue.
Jul 1, 3:10 AM EDT: L-Sun merged this pull request with the Graphite merge queue.

lawvs commented 3 days ago

Nice solution, also related to https://github.com/toeverything/blocksuite/issues/3485