feat: add helper function to generate custom event.

src/components/Keyboard/Key/index.tsx

@@ -50,3 +50,17 @@ export default (props: KeyProps) => {
     </group>
   )
 }
+
+export const genCustomKeyEventFromCharacter = (
+  char: string,
+): CustomEvent<ThreeEventType> => {
+  if (char.length !== 1) {
+    throw new Error(
+      `Invalid input for custom key event. Input should be single charater. Input is ${char}, though.`,
+    )
+  }
+
+  return new CustomEvent<ThreeEventType>('threekeyboardevent', {
+    detail: { keyId: char.toLowerCase() },
+  })
+}

src/index.tsx

@@ -2,6 +2,12 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import './index.css'
 import App from './App'
+import { genCustomKeyEventFromCharacter } from './components/Keyboard/Key'
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
 root.render(<App />)
+
+document.addEventListener('keydown', (evt) => {
+  const event = genCustomKeyEventFromCharacter(evt.key)
+  document.dispatchEvent(event)
+})