Fix (Whiteboards): History issues

e2e-tests/whiteboards.spec.ts

@@ -88,6 +88,47 @@ test('draw a rectangle', async ({ page }) => {
   ).not.toHaveCount(0)
 })
 
+test('undo the rectangle action', async ({ page }) => {
+  await page.keyboard.press(modKey + '+z')
+
+  await expect(page.locator('.logseq-tldraw .tl-positioned-svg rect')).toHaveCount(0)
+})
+
+test('create a block', async ({ page }) => {
+  const canvas = await page.waitForSelector('.logseq-tldraw')
+  const bounds = (await canvas.boundingBox())!
+
+  await page.keyboard.press('s')
+  await page.mouse.dblclick(bounds.x + 5, bounds.y + 5)
+  await page.waitForTimeout(100)
+
+  await page.keyboard.type('a')
+  await page.keyboard.press('Enter')
+
+
+  await expect(page.locator('.logseq-tldraw .tl-logseq-portal-container')).toHaveCount(1)
+})
+
+test('expand the block', async ({ page }) => {
+  await page.keyboard.press('Escape')
+  await page.click('.logseq-tldraw .tl-context-bar .tie-object-expanded ')
+  await page.waitForTimeout(100)
+
+  await expect(page.locator('.logseq-tldraw .tl-logseq-portal-container .tl-logseq-portal-header')).toHaveCount(1)
+})
+
+test('undo the expand action', async ({ page }) => {
+  await page.keyboard.press(modKey + '+z')
+
+  await expect(page.locator('.logseq-tldraw .tl-logseq-portal-container .tl-logseq-portal-header')).toHaveCount(0)
+})
+
+test('undo the block action', async ({ page }) => {
+  await page.keyboard.press(modKey + '+z')
+
+  await expect(page.locator('.logseq-tldraw .tl-logseq-portal-container')).toHaveCount(0)
+})
+
 test('copy/paste url to create an iFrame shape', async ({ page }) => {
   const canvas = await page.waitForSelector('.logseq-tldraw')
   const bounds = (await canvas.boundingBox())!
@@ -154,14 +195,16 @@ test('cleanup the shapes', async ({ page }) => {
 test('zoom in', async ({ page }) => {
   await page.keyboard.press('Shift+0') // reset zoom
   await page.waitForTimeout(1500) // wait for the zoom animation to finish
-  await page.click('#tl-zoom-in')
+  await page.keyboard.press(`${modKey}++`)
+  await page.waitForTimeout(1500) // wait for the zoom animation to finish
   await expect(page.locator('#tl-zoom')).toContainText('125%')
 })
 
 test('zoom out', async ({ page }) => {
   await page.keyboard.press('Shift+0')
-  await page.waitForTimeout(1500)
-  await page.click('#tl-zoom-out')
+  await page.waitForTimeout(1500) // wait for the zoom animation to finish
+  await page.keyboard.press(`${modKey}+-`)
+  await page.waitForTimeout(1500) // wait for the zoom animation to finish
   await expect(page.locator('#tl-zoom')).toContainText('80%')
 })
 

src/main/frontend/extensions/tldraw.cljs

@@ -152,8 +152,8 @@
        (tldraw {:renderers tldraw-renderers
                 :handlers (get-tldraw-handlers page-name)
                 :onMount on-mount
-                :onPersist (fn [app _info]
+                :onPersist (fn [app info]
                              (state/set-state! [:whiteboard/last-persisted-at (state/get-current-repo)] (util/time-ms))
                              (util/profile "tldraw persist"
-                                           (whiteboard-handler/transact-tldr-delta! page-name app)))
+                                           (whiteboard-handler/transact-tldr-delta! page-name app (.-replace info))))
                 :model data})])))

src/main/frontend/handler/whiteboard.cljs

@@ -83,7 +83,7 @@
                            (util/time-ms))}))
 
 (defn- compute-tx
-  [^js app ^js tl-page new-id-nonces db-id-nonces page-name]
+  [^js app ^js tl-page new-id-nonces db-id-nonces page-name replace?]
   (let [assets (js->clj-keywordize (.getCleanUpAssets app))
         new-shapes (.-shapes tl-page)
         shapes-index (map #(gobj/get % "id") new-shapes)
@@ -119,15 +119,16 @@
                            (map #(shape->block % page-name))
                            (map with-timestamps))
      :delete-blocks deleted-shapes-tx
-     :metadata {:whiteboard/transact? true
+     :metadata {:whiteboard/transact? (not replace?)
+                :replace? replace?
                 :data {:page-name page-name
                        :deleted-shapes deleted-shapes
                        :new-shapes created-shapes
                        :changed-shapes changed-shapes
                        :prev-changed-blocks prev-changed-blocks}}}))
 
 (defonce *last-shapes-nonce (atom {}))
-(defn transact-tldr-delta! [page-name ^js app]
+(defn transact-tldr-delta! [page-name ^js app replace?]
   (let [tl-page ^js (second (first (.-pages app)))
         shapes (.-shapes ^js tl-page)
         new-id-nonces (set (map (fn [shape]
@@ -139,7 +140,7 @@
                       (set (->> (model/get-whiteboard-id-nonces repo page-name)
                                 (map #(update % :id str)))))
         {:keys [page-block upserted-blocks delete-blocks metadata]}
-        (compute-tx app tl-page new-id-nonces db-id-nonces page-name)
+        (compute-tx app tl-page new-id-nonces db-id-nonces page-name replace?)
         tx-data (concat delete-blocks [page-block] upserted-blocks)
         new-shapes (get-in metadata [:data :new-shapes])
         metadata' (cond

src/main/frontend/modules/editor/undo_redo.cljs

@@ -147,7 +147,7 @@
                    (set (map :a tx-data))
                    #{:block/created-at :block/updated-at})))
     (reset-redo)
-    (if (:compute-new-refs? tx-meta)
+    (if (:replace? tx-meta)
       (let [[removed-e _prev-e] (pop-undo)
             entity (update removed-e :txs concat tx-data)]
         (push-undo entity))

src/main/frontend/modules/outliner/pipeline.cljs

@@ -63,7 +63,7 @@
   (let [tx-meta (:tx-meta tx-report)]
     (when (and (not (:from-disk? tx-meta))
                (not (:new-graph? tx-meta))
-               (not (:compute-new-refs? tx-meta)))
+               (not (:replace? tx-meta)))
       (let [{:keys [pages blocks]} (ds-report/get-blocks-and-pages tx-report)
             repo (state/get-current-repo)
             refs-tx (util/profile
@@ -73,7 +73,7 @@
             tx (util/concat-without-nil truncate-refs-tx refs-tx)
             tx-report' (if (seq tx)
                          (let [refs-tx-data' (:tx-data (db/transact! repo tx {:outliner/transact? true
-                                                                              :compute-new-refs? true}))]
+                                                                              :replace? true}))]
                            ;; merge
                            (assoc tx-report :tx-data (concat (:tx-data tx-report) refs-tx-data')))
                          tx-report)

tldraw/apps/tldraw-logseq/src/lib/shapes/LogseqPortalShape.tsx

@@ -146,27 +146,19 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       this.update({ compact: collapsed })
       this.canResize[1] = !collapsed
       if (!collapsed) {
-        // this will also persist the state, so we can skip persist call
-        await delay()
         this.onResetBounds()
       }
-      this.persist?.()
     } else {
       const originalHeight = this.props.size[1]
       this.canResize[1] = !collapsed
-      console.log(
-        collapsed,
-        collapsed ? this.getHeaderHeight() : this.props.collapsedHeight,
-        this.getHeaderHeight(),
-        this.props.collapsedHeight
-      )
       this.update({
         isAutoResizing: !collapsed,
         collapsed: collapsed,
         size: [this.props.size[0], collapsed ? this.getHeaderHeight() : this.props.collapsedHeight],
         collapsedHeight: collapsed ? originalHeight : this.props.collapsedHeight,
       })
     }
+    this.persist?.()
   }
 
   @computed get scaleLevel() {
@@ -284,6 +276,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
       return null // not being correctly configured
     }
     const { Page, Block } = renderers
+    const [loaded, setLoaded] = React.useState(false)
 
     React.useEffect(() => {
       if (this.props.isAutoResizing) {
@@ -293,12 +286,20 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
           this.update({
             size: [this.props.size[0], newHeight],
           })
-          app.persist(true)
+
+          if (loaded) app.persist(true)
         }
       }
     }, [innerHeight, this.props.isAutoResizing])
 
-    const [loaded, setLoaded] = React.useState(false)
+    React.useEffect(() => {
+      if (!this.initialHeightCalculated) {
+        setTimeout(() => {
+          this.onResetBounds()
+          app.persist(true)
+        })
+      }
+    }, [this.initialHeightCalculated])
 
     React.useEffect(() => {
       setTimeout(function () {

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

@@ -33,7 +33,7 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
   @action persist = (replace = false) => {
     if (this.isPaused || this.creating) return
     this.app.pages.forEach(page => page.bump()) // Is it ok here?
-    this.app.notify('persist', null)
+    this.app.notify('persist', {replace})
   }
 
   @action undo = () => {

tldraw/packages/core/src/types/types.ts

@@ -155,7 +155,7 @@ export type TLSubscriptionEvent =
     }
   | {
       event: 'persist'
-      info: null
+      info: { replace: boolean }
     }
   | {
       event: 'save'