fix: some other persist history issues

tldraw/apps/tldraw-logseq/src/hooks/usePaste.ts

@@ -8,6 +8,7 @@ import {
   uniqueId,
 } from '@tldraw/core'
 import type { TLReactCallbacks } from '@tldraw/react'
+import { transaction } from 'mobx'
 import * as React from 'react'
 import { LogseqPortalShape, Shape } from '~lib'
 
@@ -65,7 +66,7 @@ export function usePaste() {
                 maxY: (shape.point?.[1] ?? point[1]) + (shape.size?.[1] ?? 4),
               }))
             )
-            const clonedShapes = shapes.map((shape: TLShapeModel) => {
+            const clonedShapes = shapes.map(shape => {
               return {
                 ...shape,
                 id: uniqueId(),
@@ -76,6 +77,7 @@ export function usePaste() {
                 ],
               }
             })
+            // @ts-expect-error - This is a valid shape
             shapesToCreate.push(...clonedShapes)
 
             // Try to rebinding the shapes to the new assets
@@ -117,7 +119,7 @@ export function usePaste() {
               point: [point[0], point[1]],
               size: [600, 400],
               pageId: blockRef,
-              blockType: 'B'
+              blockType: 'B',
             })
           }
         }
@@ -149,10 +151,16 @@ export function usePaste() {
       })),
       ...shapesToCreate,
     ]
-    app.createAssets(assetsToCreate)
-    app.createShapes(allShapesToAdd)
-    app.currentPage.updateBindings(Object.fromEntries(bindingsToCreate.map(b => [b.id, b])))
 
-    app.setSelectedShapes(allShapesToAdd.map(s => s.id))
+    app.transaction(() => {
+      if (assetsToCreate.length > 0) {
+        app.createAssets(assetsToCreate)
+      }
+      if (allShapesToAdd.length > 0) {
+        app.createShapes(allShapesToAdd)
+      }
+      app.currentPage.updateBindings(Object.fromEntries(bindingsToCreate.map(b => [b.id, b])))
+      app.setSelectedShapes(allShapesToAdd.map(s => s.id))
+    })
   }, [])
 }

tldraw/demo/src/App.jsx

@@ -5,6 +5,7 @@ import { App as TldrawApp } from 'tldraw-logseq'
 const storingKey = 'playground.index'
 
 const onPersist = app => {
+  console.log('onPersist', app)
   window.sessionStorage.setItem(storingKey, JSON.stringify(app.serialized))
 }
 

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

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { Vec } from '@tldraw/vec'
-import { action, computed, makeObservable, observable, toJS } from 'mobx'
+import { action, computed, makeObservable, observable, toJS, transaction } from 'mobx'
 import { BoundsUtils, KeyUtils } from '~utils'
 import {
   TLSelectTool,
@@ -471,10 +471,7 @@ export class TLApp<
       this.selectionRotation = 0
     }
     if (process.env.NODE_ENV === 'development') {
-      console.log(
-        'setSelectedShapes',
-        newSelectedShapes.map(s => toJS(s.serialized))
-      )
+      console.log('setSelectedShapes', newSelectedShapes.map(s => toJS(s.serialized)))
     }
     return this
   }
@@ -719,6 +716,15 @@ export class TLApp<
     return Shape
   }
 
+  transaction = (fn: () => void) => {
+    transaction(() => {
+      this.history.pause()
+      fn()
+      this.history.resume()
+      this.persist()
+    })
+  }
+
   /* ------------------ Subscriptions ----------------- */
 
   private subscriptions = new Set<TLSubscription<S, K, this, any>>([])