fix(useHotKey): try to derive latin keys from key codes of non-latin characters

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

Author: Antreesy

docs/composables/useHotKey.md

@@ -37,6 +37,7 @@ where:
 
 <template>
 	<div class="container">
+		<p class="description">{{ loggedKey }}</p>
 		<p class="description">Press <kbd>W</kbd> <kbd>S</kbd> <kbd>A</kbd> <kbd>D</kbd> keys to move the ball</p>
 		<div class="square">
 			<div class="circle" :style="{ left: `${circleX}px`, top: `${circleY}px` }"></div>
@@ -57,12 +58,36 @@ where:
 	import { ref } from 'vue'
 	import { useHotKey } from '../../src/composables/useHotKey/index.js'
 
+	const isMac = /mac|ipad|iphone|darwin/i.test(navigator.userAgent)
+
 	export default {
 		setup() {
+			const loggedKey = ref('Press any key')
 			const circleX = ref(20)
 			const circleY = ref(20)
 			const highlighted = ref(false)
 
+			const updateLoggedKey = (event) => {
+				if (['Ctrl', 'Meta', 'Alt', 'Shift'].includes(event.key)) {
+					return
+				}
+
+				loggedKey.value = `Key pressed: ${event.key} | `
+				if (event.ctrlKey) {
+					loggedKey.value += 'Ctrl + '
+				}
+				if (event.metaKey) {
+					loggedKey.value += isMac ? 'Cmd + ' : 'Meta + '
+				}
+				if (event.altKey) {
+					loggedKey.value += 'Alt + '
+				}
+				if (event.shiftKey) {
+					loggedKey.value += 'Shift + '
+				}
+				loggedKey.value += event.code
+			}
+
 			const moveUp = (event) => {
 				circleY.value = Math.max(0, circleY.value - 10)
 			}
@@ -79,13 +104,15 @@ where:
 				highlighted.value = !highlighted.value
 			}
 
+			useHotKey(true, updateLoggedKey)
 			useHotKey('w', moveUp)
 			useHotKey('s', moveDown)
 			useHotKey('a', moveLeft)
 			useHotKey('d', moveRight)
 			const stop = useHotKey('m', toggleHighlighted, { push: true })
 
 			return {
+				loggedKey,
 				circleX,
 				circleY,
 				highlighted,

src/composables/useHotKey/index.ts

@@ -6,6 +6,8 @@ import { onKeyStroke } from '@vueuse/core'
 
 const disableKeyboardShortcuts = window.OCP?.Accessibility?.disableKeyboardShortcuts?.()
 const isMac = /mac|ipad|iphone|darwin/i.test(navigator.userAgent)
+const derivedKeysRegex = /^[a-zA-Z0-9]$/
+const nonAsciiPrintableRegex = /^[^\x20-\x7F]$/
 
 export interface UseHotKeyOptions {
 	/** Make key filter case sensitive */
@@ -124,7 +126,8 @@ export function useHotKey(
 
 	/**
 	 * Validates event key to expected key
-	 * FIXME should support any languages / key codes
+	 * If received event.key is not a printable ASCII character code (character code 32-127),
+	 * try to derive it from event.code and match with expected key
 	 *
 	 * @param event keyboard event
 	 * @param key expected key
@@ -134,6 +137,12 @@ export function useHotKey(
 		if (options.caseSensitive) {
 			return event.key === key
 		}
+
+		if (derivedKeysRegex.test(key) && nonAsciiPrintableRegex.test(event.key)) {
+			const derivedKey = event.code.replace(/(Key|Digit|Numpad)/, '')
+			return derivedKey === key.toUpperCase()
+		}
+
 		return event.key.toLowerCase() === key.toLowerCase()
 	}