feat(builder): Enable ctrl+z to undo changes in editor#217

apps/builder/src/features/editor/components/TypebotHeader/TypebotHeader.tsx

@@ -27,6 +27,7 @@ import { headerHeight } from '../../constants'
 import { EditableEmojiOrImageIcon } from '@/components/EditableEmojiOrImageIcon'
 import { PublishButton } from '@/features/publish'
 import { CollaborationMenuButton } from '@/features/collaboration'
+import useUndoShortcut from '@/hooks/useUndoShortcut';
 
 export const TypebotHeader = () => {
   const router = useRouter()
@@ -52,6 +53,8 @@ export const TypebotHeader = () => {
     setRightPanel(RightPanel.PREVIEW)
   }
 
+  useUndoShortcut(canUndo, undo);
+
   const handleHelpClick = () => {
     isCloudProdInstance
       ? getBubbleActions().open()

apps/builder/src/hooks/useUndoShortcut.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react'
+
+const useUndoShortcut = (canUndo: boolean, undo: () => void) => {
+  const isUndoShortcut = (event: KeyboardEvent) => {
+    const key = event.key.toLowerCase()
+    const cmdHeld = event.metaKey
+    const ctrlHeld = event.ctrlKey
+    const Z = 'z'
+
+    return (cmdHeld && key === Z) || (ctrlHeld && key === Z)
+  }
+
+  useEffect(() => {
+    document.addEventListener(
+      'keydown',
+      (event: KeyboardEvent) => {
+        if (isUndoShortcut(event) && canUndo) {
+          undo()
+        }
+      },
+      false
+    )
+
+    return () => {
+      document.removeEventListener(
+        'keydown',
+        (event: KeyboardEvent) => {
+          if (isUndoShortcut(event) && canUndo) {
+            undo()
+          }
+        },
+        false
+      )
+    }
+  }, [canUndo, undo])
+}
+
+export default useUndoShortcut;