feat: undo/redo for workflow editor (#3927)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/components/workflow/note-node/hooks.ts

@@ -1,14 +1,16 @@
 import { useCallback } from 'react'
 import type { EditorState } from 'lexical'
-import { useNodeDataUpdate } from '../hooks'
+import { WorkflowHistoryEvent, useNodeDataUpdate, useWorkflowHistory } from '../hooks'
 import type { NoteTheme } from './types'
 
 export const useNote = (id: string) => {
   const { handleNodeDataUpdateWithSyncDraft } = useNodeDataUpdate()
+  const { saveStateToHistory } = useWorkflowHistory()
 
   const handleThemeChange = useCallback((theme: NoteTheme) => {
     handleNodeDataUpdateWithSyncDraft({ id, data: { theme } })
-  }, [handleNodeDataUpdateWithSyncDraft, id])
+    saveStateToHistory(WorkflowHistoryEvent.NoteChange)
+  }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
 
   const handleEditorChange = useCallback((editorState: EditorState) => {
     if (!editorState?.isEmpty())
@@ -19,7 +21,8 @@ export const useNote = (id: string) => {
 
   const handleShowAuthorChange = useCallback((showAuthor: boolean) => {
     handleNodeDataUpdateWithSyncDraft({ id, data: { showAuthor } })
-  }, [handleNodeDataUpdateWithSyncDraft, id])
+    saveStateToHistory(WorkflowHistoryEvent.NoteChange)
+  }, [handleNodeDataUpdateWithSyncDraft, id, saveStateToHistory])
 
   return {
     handleThemeChange,

web/app/components/workflow/note-node/note-editor/editor.tsx

@@ -13,6 +13,7 @@ import { ListPlugin } from '@lexical/react/LexicalListPlugin'
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
+import { useWorkflowHistoryStore } from '../../workflow-history-store'
 import LinkEditorPlugin from './plugins/link-editor-plugin'
 import FormatDetectorPlugin from './plugins/format-detector-plugin'
 // import TreeView from '@/app/components/base/prompt-editor/plugins/tree-view'
@@ -32,12 +33,16 @@ const Editor = ({
     onChange?.(editorState)
   }, [onChange])
 
+  const { setShortcutsEnabled } = useWorkflowHistoryStore()
+
   return (
     <div className='relative'>
       <RichTextPlugin
         contentEditable={
           <div>
             <ContentEditable
+              onFocus={() => setShortcutsEnabled(false)}
+              onBlur={() => setShortcutsEnabled(true)}
               spellCheck={false}
               className='w-full h-full outline-none caret-primary-600'
               placeholder={placeholder}