Change hotkeys package (#110)

Author: foyarash

package.json

@@ -31,7 +31,7 @@
     "react-dnd": "^10.0.2",
     "react-dnd-html5-backend": "^10.0.2",
     "react-dom": "^16.12.0",
-    "react-hotkeys": "^2.0.0",
+    "react-hotkeys-hook": "^2.4.0",
     "react-icons": "^3.9.0",
     "react-redux": "^7.1.3",
     "react-scripts": "3.3.0",

src/hooks/useShortcuts.ts

@@ -2,20 +2,19 @@ import useDispatch from './useDispatch'
 import { useSelector } from 'react-redux'
 import { ActionCreators as UndoActionCreators } from 'redux-undo'
 import { getSelectedComponent } from '~core/selectors/components'
+import { useHotkeys } from 'react-hotkeys-hook'
 
-export const keyMap = {
-  DELETE_NODE: ['backspace', 'del'],
+const keyMap = {
+  DELETE_NODE: 'Backspace, del',
   TOGGLE_BUILDER_MODE: 'b',
   TOGGLE_CODE_PANEL: 'c',
-  UNDO: ['ctrl+z', 'cmd+z'],
-  REDO: ['ctrl+y', 'cmd+y'],
-  UNSELECT: ['Escape'],
+  UNDO: 'ctrl+z, command+z',
+  REDO: 'ctrl+y, cmd+y',
+  UNSELECT: 'esc',
   PARENT: 'p',
-  DUPLICATE: ['ctrl+d', 'cmd+d'],
-  KONAMI_CODE: [
-    'up up down down left right left right b a',
-    'up up down down left right left right B A',
-  ],
+  DUPLICATE: 'ctrl+d, command+d',
+  KONAMI_CODE:
+    'up up down down left right left right b a, up up down down left right left right B A',
 }
 
 const hasNoSpecialKeyPressed = (event: KeyboardEvent | undefined) =>
@@ -85,19 +84,15 @@ const useShortcuts = () => {
     dispatch.components.loadDemo('secretchakra')
   }
 
-  const handlers = {
-    DELETE_NODE: deleteNode,
-    TOGGLE_BUILDER_MODE: toggleBuilderMode,
-    TOGGLE_CODE_PANEL: toggleCodePanel,
-    UNDO: undo,
-    REDO: redo,
-    UNSELECT: onUnselect,
-    PARENT: onSelectParent,
-    DUPLICATE: onDuplicate,
-    KONAMI_CODE: onKonamiCode,
-  }
-
-  return { handlers }
+  useHotkeys(keyMap.DELETE_NODE, deleteNode, {}, [selected.id])
+  useHotkeys(keyMap.TOGGLE_BUILDER_MODE, toggleBuilderMode)
+  useHotkeys(keyMap.TOGGLE_CODE_PANEL, toggleCodePanel)
+  useHotkeys(keyMap.UNDO, undo)
+  useHotkeys(keyMap.REDO, redo)
+  useHotkeys(keyMap.UNSELECT, onUnselect)
+  useHotkeys(keyMap.PARENT, onSelectParent)
+  useHotkeys(keyMap.DUPLICATE, onDuplicate)
+  useHotkeys(keyMap.KONAMI_CODE, onKonamiCode)
 }
 
 export default useShortcuts

src/pages/index.tsx

@@ -3,9 +3,8 @@ import { Flex, Box } from '@chakra-ui/react'
 import { DndProvider } from 'react-dnd'
 import Backend from 'react-dnd-html5-backend'
 import { Global } from '@emotion/react'
-import { HotKeys } from 'react-hotkeys'
 import Metadata from '~components/Metadata'
-import useShortcuts, { keyMap } from '~hooks/useShortcuts'
+import useShortcuts from '~hooks/useShortcuts'
 import Header from '~components/Header'
 import Sidebar from '~components/sidebar/Sidebar'
 import EditorErrorBoundary from '~components/errorBoundaries/EditorErrorBoundary'
@@ -14,18 +13,16 @@ import { InspectorProvider } from '~contexts/inspector-context'
 import Inspector from '~components/inspector/Inspector'
 
 const App = () => {
-  const { handlers } = useShortcuts()
+  useShortcuts()
 
   return (
-    <HotKeys allowChanges handlers={handlers} keyMap={keyMap}>
+    <>
       <Global
         styles={() => ({
           html: { minWidth: '860px', backgroundColor: '#1a202c' },
         })}
       />
-
       <Metadata />
-
       <Header />
       <DndProvider backend={Backend}>
         <Flex h="calc(100vh - 3rem)">
@@ -50,7 +47,7 @@ const App = () => {
           </Box>
         </Flex>
       </DndProvider>
-    </HotKeys>
+    </>
   )
 }
 

yarn.lock

@@ -8189,6 +8189,11 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.4.2:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c"
   integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==
 
+hotkeys-js@3.8.1:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.1.tgz#fa7051f73bf1dc92a8b8d580a40b247f91966376"
+  integrity sha512-YlhVQtyG9f1b7GhtzdhR0Pl+cImD1ZrKI6zYUa7QLd0zuThiL7RzZ+ANJyy7z+kmcCpNYBf5PjBa3CjiQ5PFpw==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -12567,7 +12572,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -12891,12 +12896,12 @@ react-focus-lock@2.4.1:
     use-callback-ref "^1.2.1"
     use-sidecar "^1.0.1"
 
-react-hotkeys@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-hotkeys/-/react-hotkeys-2.0.0.tgz#a7719c7340cbba888b0e9184f806a9ec0ac2c53f"
-  integrity sha512-3n3OU8vLX/pfcJrR3xJ1zlww6KS1kEJt0Whxc4FiGV+MJrQ1mYSYI3qS/11d2MJDFm8IhOXMTFQirfu6AVOF6Q==
+react-hotkeys-hook@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-hotkeys-hook/-/react-hotkeys-hook-2.4.0.tgz#becf941641bab04c8095917b5876ad8ed53b0dc6"
+  integrity sha512-Veh9FUe+iXab+lZ5shPoyGDnFBu5codQ15omOXiOvCC/Q5QfTY1lefLVx/Zi2NnYBSXfkfQbhnpE+Rnhi2+wBw==
   dependencies:
-    prop-types "^15.6.1"
+    hotkeys-js "3.8.1"
 
 react-icons@^3.9.0:
   version "3.9.0"