@@ -12,6 +12,7 @@ import {
12
12
import { useAtom , useAtomValue , useSetAtom } from 'jotai' ;
13
13
import { atomWithStorage } from 'jotai/utils' ;
14
14
import { useEffect , useRef , useState } from 'react' ;
15
+ import { useHotkeys } from 'react-hotkeys-hook' ;
15
16
import { Button } from '~/components/catalyst/button' ;
16
17
import {
17
18
Dialog ,
@@ -26,6 +27,7 @@ import {
26
27
DropdownItem ,
27
28
DropdownLabel ,
28
29
DropdownMenu ,
30
+ DropdownShortcut ,
29
31
} from '~/components/catalyst/dropdown' ;
30
32
import {
31
33
emptyPipeline ,
@@ -149,6 +151,10 @@ export function OverlayUI() {
149
151
setIsSettingsOpen ( false ) ;
150
152
} ;
151
153
154
+ // add hotkeys hooks
155
+ useHotkeys ( 'ctrl+z, command+z' , undo , [ undo ] ) ;
156
+ useHotkeys ( 'ctrl+y, command+y' , redo , [ redo ] ) ;
157
+
152
158
return (
153
159
< div className = "fixed pointer-events-none my-6 px-4 z-10 h-screen w-screen bg-transparent" >
154
160
< div className = "flex justify-between w-full h-fit" >
@@ -187,6 +193,7 @@ export function OverlayUI() {
187
193
>
188
194
< ArrowUturnLeftIcon aria-hidden = "true" className = "h-5 w-5" />
189
195
< DropdownLabel > Undo</ DropdownLabel >
196
+ < DropdownShortcut keys = "⌃Z" />
190
197
</ DropdownItem >
191
198
192
199
< DropdownItem
@@ -196,6 +203,7 @@ export function OverlayUI() {
196
203
>
197
204
< ArrowUturnRightIcon aria-hidden = "true" className = "h-5 w-5" />
198
205
< DropdownLabel > Redo</ DropdownLabel >
206
+ < DropdownShortcut keys = "⌃Y" />
199
207
</ DropdownItem >
200
208
201
209
< DropdownDivider />
0 commit comments