chore: create redo/undo bridge (#2760)

* chore: create redo/undo bridge

* chore: update test

* chore: review update

* chore: review update

* chore: react redo/undo

* chore: review update

* chore: add test

* chore: review update

* chore: generate document id

* chore: update undo/redo

* chore: update cargo lock

Author: qinluhe

frontend/appflowy_tauri/src-tauri/Cargo.lock

@@ -6,10 +6,12 @@ import BlockSlash from '$app/components/document/BlockSlash';
 import { useCopy } from '$app/components/document/_shared/CopyPasteHooks/useCopy';
 import { usePaste } from '$app/components/document/_shared/CopyPasteHooks/usePaste';
 import LinkEditPopover from '$app/components/document/_shared/TextLink/LinkEditPopover';
+import { useUndoRedo } from '$app/components/document/_shared/UndoHooks/useUndoRedo';
 
 export default function Overlay({ container }: { container: HTMLDivElement }) {
   useCopy(container);
   usePaste(container);
+  useUndoRedo(container);
   return (
     <>
       <BlockSideToolbar container={container} />

frontend/appflowy_tauri/src/appflowy_app/components/document/Overlay/index.tsx

@@ -88,9 +88,11 @@ export function useKeyDown(id: string) {
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>) => {
-      e.stopPropagation();
       const filteredEvents = interceptEvents.filter((event) => event.canHandle(e));
-      filteredEvents.forEach((event) => event.handler(e));
+      filteredEvents.forEach((event) => {
+        e.stopPropagation();
+        event.handler(e);
+      });
     },
     [interceptEvents]
   );

frontend/appflowy_tauri/src/appflowy_app/components/document/TextBlock/useKeyDown.ts

@@ -19,7 +19,7 @@ export function useSlateYjs({ delta }: { delta?: Delta }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const editor = useMemo(() => withYjs(withReact(createEditor()), sharedType), []);
+  const editor = useMemo(() => withReact(withYjs(createEditor(), sharedType)), []);
 
   // Connect editor in useEffect to comply with concurrent mode requirements.
   useEffect(() => {

frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/SlateEditor/useSlateYjs.ts

@@ -0,0 +1,39 @@
+import { useCallback, useContext, useEffect } from 'react';
+import { DocumentControllerContext } from '$app/stores/effects/document/document_controller';
+import isHotkey from 'is-hotkey';
+import { Keyboard } from '@/appflowy_app/constants/document/keyboard';
+
+export function useUndoRedo(container: HTMLDivElement) {
+  const controller = useContext(DocumentControllerContext);
+
+  const onUndo = useCallback(() => {
+    if (!controller) return;
+    controller.undo();
+  }, [controller]);
+
+  const onRedo = useCallback(() => {
+    if (!controller) return;
+    controller.redo();
+  }, [controller]);
+
+  const handleKeyDownCapture = useCallback(
+    (e: KeyboardEvent) => {
+      if (isHotkey(Keyboard.keys.UNDO, e)) {
+        e.stopPropagation();
+        onUndo();
+      }
+      if (isHotkey(Keyboard.keys.REDO, e)) {
+        e.stopPropagation();
+        onRedo();
+      }
+    },
+    [onRedo, onUndo]
+  );
+
+  useEffect(() => {
+    container.addEventListener('keydown', handleKeyDownCapture, true);
+    return () => {
+      container.removeEventListener('keydown', handleKeyDownCapture, true);
+    };
+  }, [container, handleKeyDownCapture]);
+}

frontend/appflowy_tauri/src/appflowy_app/components/document/_shared/UndoHooks/useUndoRedo.ts

@@ -10,8 +10,6 @@ import { AppObserver } from '$app/stores/effects/folder/app/app_observer';
 import { useNavigate } from 'react-router-dom';
 import { INITIAL_FOLDER_HEIGHT, PAGE_ITEM_HEIGHT } from '../../_shared/constants';
 
-import { DocumentController } from '$app/stores/effects/document/document_controller';
-
 export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
   const appDispatch = useAppDispatch();
   const workspace = useAppSelector((state) => state.workspace);
@@ -118,9 +116,6 @@ export const useFolderEvents = (folder: IFolder, pages: IPage[]) => {
       layoutType: ViewLayoutPB.Document,
     });
     try {
-      const c = new DocumentController(newView.id);
-      await c.create();
-      await c.dispose();
       appDispatch(
         pagesActions.addPage({
           folderId: folder.id,

frontend/appflowy_tauri/src/appflowy_app/components/layout/NavigationPanel/FolderItem.hooks.ts

@@ -38,5 +38,7 @@ export const Keyboard = {
     COPY: 'Mod+c',
     CUT: 'Mod+x',
     PASTE: 'Mod+v',
+    REDO: 'Mod+Shift+z',
+    UNDO: 'Mod+z',
   },
 };

frontend/appflowy_tauri/src/appflowy_app/constants/document/keyboard.ts

@@ -6,25 +6,23 @@ import {
   ApplyActionPayloadPB,
   BlockActionPB,
   CloseDocumentPayloadPB,
+  DocumentRedoUndoPayloadPB,
+  DocumentRedoUndoResponsePB,
 } from '@/services/backend';
 import { Result } from 'ts-results';
 import {
   DocumentEventApplyAction,
   DocumentEventCloseDocument,
   DocumentEventOpenDocument,
   DocumentEventCreateDocument,
+  DocumentEventCanUndoRedo,
+  DocumentEventRedo,
+  DocumentEventUndo,
 } from '@/services/backend/events/flowy-document2';
 
 export class DocumentBackendService {
   constructor(public readonly viewId: string) {}
 
-  create = (): Promise<Result<void, FlowyError>> => {
-    const payload = CreateDocumentPayloadPB.fromObject({
-      document_id: this.viewId,
-    });
-    return DocumentEventCreateDocument(payload);
-  };
-
   open = (): Promise<Result<DocumentDataPB, FlowyError>> => {
     const payload = OpenDocumentPayloadPB.fromObject({
       document_id: this.viewId,
@@ -46,4 +44,25 @@ export class DocumentBackendService {
     });
     return DocumentEventCloseDocument(payload);
   };
+
+  canUndoRedo = (): Promise<Result<DocumentRedoUndoResponsePB, FlowyError>> => {
+    const payload = DocumentRedoUndoPayloadPB.fromObject({
+      document_id: this.viewId,
+    });
+    return DocumentEventCanUndoRedo(payload);
+  };
+
+  undo = (): Promise<Result<DocumentRedoUndoResponsePB, FlowyError>> => {
+    const payload = DocumentRedoUndoPayloadPB.fromObject({
+      document_id: this.viewId,
+    });
+    return DocumentEventUndo(payload);
+  };
+
+  redo = (): Promise<Result<DocumentRedoUndoResponsePB, FlowyError>> => {
+    const payload = DocumentRedoUndoPayloadPB.fromObject({
+      document_id: this.viewId,
+    });
+    return DocumentEventRedo(payload);
+  };
 }

frontend/appflowy_tauri/src/appflowy_app/stores/effects/document/document_bd_svc.ts

@@ -31,13 +31,6 @@ export class DocumentController {
     this.observer = new DocumentObserver(documentId);
   }
 
-  create = async (): Promise<FlowyError | void> => {
-    const result = await this.backendService.create();
-    if (result.ok) {
-      return;
-    }
-    return result.val;
-  };
   open = async (): Promise<DocumentData> => {
     await this.observer.subscribe({
       didReceiveUpdate: this.updated,
@@ -114,6 +107,26 @@ export class DocumentController {
     };
   };
 
+  canUndo = async () => {
+    const result = await this.backendService.canUndoRedo();
+    return result.ok && result.val.can_undo;
+  };
+
+  canRedo = async () => {
+    const result = await this.backendService.canUndoRedo();
+    return result.ok && result.val.can_redo;
+  };
+
+  undo = async () => {
+    const result = await this.backendService.undo();
+    return result.ok && result.val.is_success;
+  };
+
+  redo = async () => {
+    const result = await this.backendService.redo();
+    return result.ok && result.val.is_success;
+  };
+
   dispose = async () => {
     this.onDocChange = undefined;
     await this.backendService.close();