chore: add shortcut keys and hints for the shortcuts (#6779)

web/app/components/workflow/header/undo-redo.tsx

@@ -30,7 +30,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
 
   return (
     <div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'>
-      <TipPopup title={t('workflow.common.undo')!} >
+      <TipPopup title={t('workflow.common.undo')!} shortcuts={['ctrl', 'z']}>
         <div
           data-tooltip-id='workflow.undo'
           className={`
@@ -43,7 +43,7 @@ const UndoRedo: FC<UndoRedoProps> = ({ handleUndo, handleRedo }) => {
           <RiArrowGoBackLine className='h-4 w-4' />
         </div>
       </TipPopup>
-      <TipPopup title={t('workflow.common.redo')!} >
+      <TipPopup title={t('workflow.common.redo')!} shortcuts={['ctrl', 'y']}>
         <div
           data-tooltip-id='workflow.redo'
           className={`

web/app/components/workflow/operator/control.tsx

@@ -16,7 +16,7 @@ import {
   useSelectionInteractions,
   useWorkflow,
 } from '../hooks'
-import { isEventTargetInputArea } from '../utils'
+import { getKeyboardKeyCodeBySystem, isEventTargetInputArea } from '../utils'
 import { useStore } from '../store'
 import AddBlock from './add-block'
 import TipPopup from './tip-popup'
@@ -78,6 +78,11 @@ const Control = () => {
     handleLayout()
   }
 
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.o`, (e) => {
+    e.preventDefault()
+    goLayout()
+  }, { exactMatch: true, useCapture: true })
+
   const addNote = (e: MouseEvent<HTMLDivElement>) => {
     if (getNodesReadOnly())
       return
@@ -101,7 +106,7 @@ const Control = () => {
         </div>
       </TipPopup>
       <div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div>
-      <TipPopup title={t('workflow.common.pointerMode')}>
+      <TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}>
         <div
           className={cn(
             'flex items-center justify-center mr-[1px] w-8 h-8 rounded-lg cursor-pointer',
@@ -113,7 +118,7 @@ const Control = () => {
           <RiCursorLine className='w-4 h-4' />
         </div>
       </TipPopup>
-      <TipPopup title={t('workflow.common.handMode')}>
+      <TipPopup title={t('workflow.common.handMode')} shortcuts={['h']}>
         <div
           className={cn(
             'flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer',
@@ -126,7 +131,7 @@ const Control = () => {
         </div>
       </TipPopup>
       <div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div>
-      <TipPopup title={t('workflow.panel.organizeBlocks')}>
+      <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
         <div
           className={cn(
             'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer',