add undo and redo buttons

tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react'
+import { observer } from 'mobx-react-lite'
+import type { Shape } from '~lib'
+import { App, useApp } from '@tldraw/react'
+import { Minimap } from '~components/Minimap'
+import { RedoIcon, UndoIcon } from '~components/icons'
+
+export const ActionBar = observer(function ToolBar(): JSX.Element {
+  const app = useApp<Shape>()
+  const undo = React.useCallback(() => {
+    app.api.undo()
+  }, [app])
+
+  const redo = React.useCallback(() => {
+    app.api.redo()
+  }, [app])
+
+  return (
+    <div className="action-bar">
+      <button onClick={undo}>
+        <UndoIcon></UndoIcon>
+      </button>
+
+      <button onClick={redo}>
+        <RedoIcon></RedoIcon>
+      </button>
+    </div>
+  )
+})

tldraw/apps/tldraw-logseq/src/components/ActionBar/index.ts

@@ -0,0 +1 @@
+export * from './ActionBar';

tldraw/apps/tldraw-logseq/src/components/AppUI.tsx

@@ -5,6 +5,7 @@ import { StatusBar } from './StatusBar'
 import { PrimaryTools } from './PrimaryTools'
 import { DevTools } from './Devtools'
 import { Minimap } from './Minimap'
+import { ActionBar } from './ActionBar'
 
 const isDev = process.env.NODE_ENV === 'development'
 
@@ -16,6 +17,7 @@ export const AppUI = observer(function AppUI() {
       {isDev && <StatusBar />}
       {isDev && <DevTools />}
       <PrimaryTools />
+      <ActionBar></ActionBar>
     </>
   )
 })

tldraw/packages/core/src/lib/TLApi/TLApi.ts

@@ -161,4 +161,16 @@ export class TLApi<S extends TLShape = TLShape, K extends TLEventMap = TLEventMa
     this.app.save()
     return this
   }
+
+  undo = () => {
+    this.app.undo()
+    this.app.undo()
+    return this
+  }
+
+  redo = () => {
+    this.app.redo()
+    this.app.redo()
+    return this
+  }
 }