⚡ (editor) Add Ctrl + z shortcut to undo changes in editor (#255)

Closes #217

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

@@ -17,7 +17,7 @@ import {
 import { RightPanel, useEditor } from '../../providers/EditorProvider'
 import { useTypebot } from '../../providers/TypebotProvider'
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useState } from 'react'
 import { isNotDefined } from 'utils'
 import { EditableTypebotName } from './EditableTypebotName'
 import { getBubbleActions } from 'typebot-js'
@@ -27,6 +27,8 @@ import { headerHeight } from '../../constants'
 import { EditableEmojiOrImageIcon } from '@/components/EditableEmojiOrImageIcon'
 import { PublishButton } from '@/features/publish'
 import { CollaborationMenuButton } from '@/features/collaboration'
+import { useUndoShortcut } from '@/hooks/useUndoShortcut'
+import { useDebouncedCallback } from 'use-debounce'
 
 export const TypebotHeader = () => {
   const router = useRouter()
@@ -41,6 +43,11 @@ export const TypebotHeader = () => {
     isSavingLoading,
   } = useTypebot()
   const { setRightPanel, rightPanel, setStartPreviewAtGroup } = useEditor()
+  const [isUndoShortcutTooltipOpen, setUndoShortcutTooltipOpen] =
+    useState(false)
+  const hideUndoShortcutTooltipLater = useDebouncedCallback(() => {
+    setUndoShortcutTooltipOpen(false)
+  }, 1000)
 
   const handleNameSubmit = (name: string) => updateTypebot({ name })
 
@@ -52,6 +59,14 @@ export const TypebotHeader = () => {
     setRightPanel(RightPanel.PREVIEW)
   }
 
+  useUndoShortcut(() => {
+    if (!canUndo) return
+    hideUndoShortcutTooltipLater.flush()
+    setUndoShortcutTooltipOpen(true)
+    hideUndoShortcutTooltipLater()
+    undo()
+  })
+
   const handleHelpClick = () => {
     isCloudProdInstance
       ? getBubbleActions().open()
@@ -162,7 +177,11 @@ export const TypebotHeader = () => {
           </HStack>
 
           <HStack>
-            <Tooltip label="Undo">
+            <Tooltip
+              label={isUndoShortcutTooltipOpen ? 'Changes reverted!' : 'Undo'}
+              isOpen={isUndoShortcutTooltipOpen ? true : undefined}
+              hasArrow={isUndoShortcutTooltipOpen}
+            >
               <IconButton
                 display={['none', 'flex']}
                 icon={<UndoIcon />}

apps/builder/src/hooks/useUndoShortcut.ts

@@ -0,0 +1,18 @@
+import { useEventListener } from '@chakra-ui/react'
+
+export const useUndoShortcut = (undo: () => void) => {
+  const isUndoShortcut = (event: KeyboardEvent) =>
+    (event.metaKey || event.ctrlKey) && event.key === 'z'
+
+  useEventListener('keydown', (event: KeyboardEvent) => {
+    const target = event.target as HTMLElement | null
+    const isTyping =
+      target?.role === 'textbox' ||
+      target instanceof HTMLTextAreaElement ||
+      target instanceof HTMLInputElement
+    if (isTyping) return
+    if (isUndoShortcut(event)) {
+      undo()
+    }
+  })
+}