Migrate hotkeys library

source-academy / frontend

Frontend of Source Academy, an online experiential environment for computational thinking (React, Redux, Saga, Blueprint)

https://sourceacademy.org

Apache License 2.0

101 stars 164 forks source link

Migrate hotkeys library #2935

Closed chownces closed 2 months ago

chownces commented 2 months ago

Issue:

Current library: https://www.npmjs.com/package/react-hotkeys
- No longer actively maintained
- Unnecessary to have a separate hotkeys library when modern UI libraries provide this

Suggestions:

Blueprint: https://blueprintjs.com/docs/#core/hooks/use-hotkeys
@mantine/hooks: https://mantine.dev/hooks/use-hotkeys/

Initial thoughts:

mantine's implementation looks a lot cleaner

RichDom2185 commented 2 months ago

Separately, even though https://www.npmjs.com/package/react-responsive is still maintained, Mantine Hooks also provides useMediaQuery

RichDom2185 commented 2 months ago

mantine's implementation looks a lot cleaner

Yes, not to mention it can also replicate the old behavior by simply defining a Hotkeys HOC with getHotkeyHandler from @mantine/hooks.

Also, it has a special key mod (modifier) that translates to ctrl on Windows and cmd on macOS automatically.

RichDom2185 commented 2 months ago

Marking this as important as I feel we should try to minimise our dependencies as much as possible before migrating to Vite (which is also marked "important").

chownces commented 2 months ago

Separately, even though https://www.npmjs.com/package/react-responsive is still maintained, Mantine Hooks also provides useMediaQuery

Let's track this in a separate issue: #2967