Replace react-hotkeys-hook with custom hook

Author: electerious

dist/index.js

@@ -68,7 +68,6 @@
     "node-schedule": "^2.1.1",
     "normalize-url": "^9.0.0",
     "request-ip": "^3.3.0",
-    "rxjs": "^7.8.2",
     "sanitize-filename": "^1.6.3",
     "signale": "^1.4.0",
     "uuid": "^13.0.0"
@@ -94,10 +93,10 @@
     "react-apollo-network-status": "^6.0.0",
     "react-dom": "^19.0.0",
     "react-fast-compare": "^3.2.2",
-    "react-hotkeys-hook": "^3.4.7",
     "react-use": "^17.6.0",
     "rosid-handler-js-next": "^2.0.0",
     "rosid-handler-sass": "^9.0.0",
+    "rxjs": "^7.8.2",
     "s-ago": "^2.2.0",
     "shortid": "^2.2.17",
     "test-listen": "^1.1.0",

package-lock.json

@@ -1,8 +1,8 @@
 import { createElement as h } from 'react'
-import { useHotkeys } from 'react-hotkeys-hook'
 
 import useDomains from '../api/hooks/domains/useDomains.js'
 import * as routes from '../constants/routes.js'
+import useHotkey from '../hooks/useHotkey.js'
 import useRoute from '../hooks/useRoute.js'
 import whenBelow from '../utils/whenBelow.js'
 
@@ -48,14 +48,14 @@ const Dashboard = (props) => {
   const currentRoute = useRoute(props.route)
   const domains = useDomains()
 
-  useHotkeys('o', () => props.setRoute('/'))
-  useHotkeys('v', () => props.setRoute('/insights/views'))
-  useHotkeys('p', () => props.setRoute('/insights/pages'))
-  useHotkeys('r', () => props.setRoute('/insights/referrers'))
-  useHotkeys('d', () => props.setRoute('/insights/durations'))
-  useHotkeys('e', () => props.setRoute('/insights/events'))
-  useHotkeys('s', () => props.setRoute('/settings'))
-  useHotkeys('0,1,2,3,4,5,6,7,8,9', (e, { key }) => gotoDomainWhenDefined(domains.value, props.setRoute, key), [
+  useHotkey('o', () => props.setRoute('/'))
+  useHotkey('v', () => props.setRoute('/insights/views'))
+  useHotkey('p', () => props.setRoute('/insights/pages'))
+  useHotkey('r', () => props.setRoute('/insights/referrers'))
+  useHotkey('d', () => props.setRoute('/insights/durations'))
+  useHotkey('e', () => props.setRoute('/insights/events'))
+  useHotkey('s', () => props.setRoute('/settings'))
+  useHotkey('0,1,2,3,4,5,6,7,8,9', (e, { key }) => gotoDomainWhenDefined(domains.value, props.setRoute, key), {}, [
     domains.value,
   ])
 

package.json

@@ -1,14 +1,14 @@
 import classNames from 'classnames'
 import PropTypes from 'prop-types'
 import { createElement as h } from 'react'
-import { useHotkeys } from 'react-hotkeys-hook'
 
+import useHotkey from '../../hooks/useHotkey.js'
 import commonModalProps from '../../utils/commonModalProps.js'
 
 const Modal = (props) => {
-  useHotkeys('esc', props.closeModal, {
-    filter: () => props.current === true,
-    enableOnTags: ['INPUT', 'SELECT', 'TEXTAREA'],
+  useHotkey('escape', props.closeModal, {
+    enabled: props.current === true,
+    enabledOnInput: true,
   })
 
   return h(

src/ui/scripts/components/Dashboard.js

@@ -0,0 +1,68 @@
+import { useCallback, useEffect } from 'react'
+
+const hotkeyManager = (() => {
+  const handlers = new Set()
+
+  const handleKeyDown = (event) => {
+    const pressedKey = event.key.toLowerCase()
+    const targetTag = event.target.tagName
+
+    for (const handler of handlers) {
+      handler(event, pressedKey, targetTag)
+    }
+  }
+
+  globalThis.addEventListener('keydown', handleKeyDown)
+
+  return {
+    register: (handler) => {
+      handlers.add(handler)
+    },
+    unregister: (handler) => {
+      handlers.delete(handler)
+    },
+  }
+})()
+
+/**
+ * Custom hook for handling keyboard shortcuts
+ *
+ * @param {string} keys - Single key or comma-separated keys (e.g., 'escape', 'a,b,c')
+ * @param {Function} callback - Function to call when key is pressed. Receives (event, { key })
+ * @param {object} options - Configuration options
+ * @param {boolean} options.enabled - Whether the hotkey is enabled (default: true)
+ * @param {boolean} options.enabledOnInput - Whether to allow hotkey on form inputs (default: false)
+ * @param {Array} deps - Dependencies array for the callback
+ */
+const useHotkey = (keys, callback, options = {}, deps = []) => {
+  const { enabled = true, enabledOnInput = false } = options
+
+  const memoizedCallback = useCallback(callback, deps)
+
+  useEffect(() => {
+    const keySet = new Set(keys.split(',').map((key) => key.trim().toLowerCase()))
+
+    const handler = (event, pressedKey, targetTag) => {
+      // Check if hotkey is enabled
+      if (!enabled) return
+
+      // Check if the hotkey should be blocked on form inputs
+      const isFormElement = ['INPUT', 'SELECT', 'TEXTAREA'].includes(targetTag)
+      if (isFormElement && !enabledOnInput) return
+
+      // Check if the pressed key matches any of the configured keys
+      if (keySet.has(pressedKey)) {
+        event.preventDefault()
+        memoizedCallback(event, { key: pressedKey })
+      }
+    }
+
+    hotkeyManager.register(handler)
+
+    return () => {
+      hotkeyManager.unregister(handler)
+    }
+  }, [keys, enabled, enabledOnInput, memoizedCallback])
+}
+
+export default useHotkey