From f11a332f509eb3d84ab656f7452dea65268a7cae Mon Sep 17 00:00:00 2001
From: devleejb <devleejb@gmail.com>
Date: Sun, 26 Nov 2023 15:56:07 +0900
Subject: [PATCH] feat: Implement undo/redo example with tdlraw

---
 examples/react-tldraw/package.json            |  2 +-
 .../src/hooks/useMultiplayerState.ts          | 21 ++++++++++++++++---
 package-lock.json                             | 12 +++++------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/examples/react-tldraw/package.json b/examples/react-tldraw/package.json
index f3b9fdb41..4426cb582 100644
--- a/examples/react-tldraw/package.json
+++ b/examples/react-tldraw/package.json
@@ -16,7 +16,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "unique-names-generator": "^4.7.1",
-    "yorkie-js-sdk": "^0.4.7"
+    "yorkie-js-sdk": "^0.4.9"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.198",
diff --git a/examples/react-tldraw/src/hooks/useMultiplayerState.ts b/examples/react-tldraw/src/hooks/useMultiplayerState.ts
index db489d333..ed1ada50e 100644
--- a/examples/react-tldraw/src/hooks/useMultiplayerState.ts
+++ b/examples/react-tldraw/src/hooks/useMultiplayerState.ts
@@ -153,6 +153,18 @@ export function useMultiplayerState(roomId: string) {
     false,
   );
 
+  const onUndo = () => {
+    if (doc.history.canUndo()) {
+      doc.history.undo();
+    }
+  }
+
+  const onRedo = () => {
+    if (doc.history.canRedo()) {
+      doc.history.redo();
+    }
+  }
+
   // Document Changes --------
 
   useEffect(() => {
@@ -253,7 +265,8 @@ export function useMultiplayerState(roomId: string) {
 
         // 04. Subscribe document event and handle changes.
         doc.subscribe((event) => {
-          if (event.type === 'remote-change') {
+          const acceptTypeList = ['remote-change', 'local-change']
+          if (acceptTypeList.includes(event.type)) {
             handleChanges();
           }
         });
@@ -292,7 +305,9 @@ export function useMultiplayerState(roomId: string) {
   return {
     onMount,
     onChangePage,
-    loading,
     onChangePresence,
+    onUndo,
+    onRedo,
+    loading,
   };
-}
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 9138f386a..555784321 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -175,7 +175,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "unique-names-generator": "^4.7.1",
-        "yorkie-js-sdk": "^0.4.7"
+        "yorkie-js-sdk": "^0.4.9"
       },
       "devDependencies": {
         "@types/lodash": "^4.14.198",
@@ -12725,9 +12725,9 @@
       }
     },
     "node_modules/yorkie-js-sdk": {
-      "version": "0.4.7",
-      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.7.tgz",
-      "integrity": "sha512-bUe2f11TTAxV5nsSvozFNGiiHiVhZy03IGbHWwUxsuGa/JluGQOhlqDuyPLEmaPe62YRJlbbBXJ4WAczTjObaA==",
+      "version": "0.4.9",
+      "resolved": "https://registry.npmjs.org/yorkie-js-sdk/-/yorkie-js-sdk-0.4.9.tgz",
+      "integrity": "sha512-rq/deK48XWailaDvK9SvT6OrgYN6SpNO39/THxGdAc7nH/U0vuvfJhTzuO2R3L9FVG5JC6d6p9eq6UjVX2HHKQ==",
       "dependencies": {
         "@types/google-protobuf": "^3.15.5",
         "@types/long": "^4.0.1",
@@ -12791,8 +12791,8 @@
       "dev": true
     },
     "tools/create-yorkie-app": {
-      "version": "0.0.0",
-      "license": "MIT",
+      "version": "0.4.7-fix.1",
+      "license": "Apache-2.0",
       "bin": {
         "create-yorkie-app": "dist/create-yorkie-app.mjs"
       },