Merge pull request #5742 from sawhney17/whiteboards

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'
 
@@ -12,10 +13,11 @@ export const AppUI = observer(function AppUI() {
   return (
     <>
       {/* <ToolBar /> */}
-      {/* <Minimap /> */}
+      <Minimap />
       {isDev && <StatusBar />}
       {isDev && <DevTools />}
       <PrimaryTools />
+      <ActionBar></ActionBar>
     </>
   )
 })

tldraw/apps/tldraw-logseq/src/styles.css

@@ -34,7 +34,6 @@
   background: none;
   border: none;
   cursor: pointer;
-  border-radius: 2px;
   padding: 4px 8px;
   opacity: 1;
 }
@@ -55,6 +54,35 @@
   font-size: inherit;
 }
 
+
+.logseq-tldraw .action-bar {
+  position: relative;
+  top: 0;
+  /* width: 100%; */
+  float:right;
+  grid-row: 1;
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  color: black;
+  /* border-radius: 15px; */
+  border-bottom-left-radius: 15px;
+  z-index: 100000;
+  user-select: none;
+  background: white;
+  border-left: 1px solid black;
+  border-bottom: 1px solid black;
+  font-size: inherit;
+}
+
+.logseq-tldraw .action-bar button:hover {
+  background-color: var(--color-hover);
+}
+
+.logseq-tldraw .action-bar button {
+  border-radius: 4px;
+}
+
 .logseq-tldraw .contextbar {
   pointer-events: all;
   position: relative;
@@ -404,8 +432,8 @@
 
 .logseq-tldraw .preview-minimap-toggle {
   position: absolute;
-  top: 24px;
-  right: 40px;
+  top: 60px;
+  right: 50px;
   z-index: 1;
   width: 32px;
   height: 32px;

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

@@ -175,4 +175,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
+  }
 }

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

@@ -72,8 +72,9 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
       const snapshot = this.stack[this.pointer]
       this.deserialize(snapshot)
     }
-
-    this.app.notify('persist', null)
+    else{
+      this.app.notify('persist', null)
+    }
   }
 
   deserialize = (snapshot: TLDocumentModel) => {