fix: reduce number of persistence caused by auto-resize

tldraw/apps/tldraw-logseq/src/app.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { TLDocumentModel } from '@tldraw/core'
+import { deepEqual, TLApp, TLAsset, TLDocumentModel } from '@tldraw/core'
 import {
   AppCanvas,
   AppProvider,
@@ -58,37 +58,49 @@ interface LogseqTldrawProps {
   onPersist?: TLReactCallbacks<Shape>['onPersist']
 }
 
-export const App = function App(props: LogseqTldrawProps): JSX.Element {
-  const renderers: any = React.useMemo(() => {
+export const App = function App({
+  onPersist,
+  handlers,
+  renderers,
+  model,
+  ...rest
+}: LogseqTldrawProps): JSX.Element {
+  const memoRenders: any = React.useMemo(() => {
     return Object.fromEntries(
-      Object.entries(props.renderers).map(([key, comp]) => {
+      Object.entries(renderers).map(([key, comp]) => {
         return [key, React.memo(comp)]
       })
     )
   }, [])
   const contextValue = {
-    renderers,
-    handlers: props.handlers,
+    renderers: memoRenders,
+    handlers: handlers,
   }
 
   const onFileDrop = useFileDrop(contextValue)
   const onPaste = usePaste(contextValue)
   const onQuickAdd = useQuickAdd()
 
+  const onPersistOnDiff: TLReactCallbacks<Shape>['onPersist'] = React.useCallback(
+    (app, info) => {
+      if (!deepEqual(app.serialized, model)) {
+        onPersist?.(app, info)
+      }
+    },
+    [model]
+  )
+
   return (
-    <LogseqContext.Provider
-      value={{
-        renderers,
-        handlers: props.handlers,
-      }}
-    >
+    <LogseqContext.Provider value={contextValue}>
       <AppProvider
         Shapes={shapes}
         Tools={tools}
         onFileDrop={onFileDrop}
         onPaste={onPaste}
         onCanvasDBClick={onQuickAdd}
-        {...props}
+        onPersist={onPersistOnDiff}
+        model={model}
+        {...rest}
       >
         <div className="logseq-tldraw logseq-tldraw-wrapper">
           <AppCanvas components={components}>

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

@@ -14,6 +14,7 @@ import { LogseqContext, SearchResult } from '~lib/logseq-context'
 import { CustomStyleProps, withClampedStyles } from './style-props'
 
 const HEADER_HEIGHT = 40
+const AUTO_RESIZE_THRESHOLD = 1
 
 export interface LogseqPortalShapeProps extends TLBoxShapeProps, CustomStyleProps {
   type: 'logseq-portal'
@@ -310,7 +311,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
   autoResizeHeight(replace: boolean = false) {
     setTimeout(() => {
       const height = this.getAutoResizeHeight()
-      if (height !== null) {
+      if (height !== null && Math.abs(height - this.props.size[1]) > AUTO_RESIZE_THRESHOLD) {
         this.update({
           size: [this.props.size[0], height],
         })
@@ -658,7 +659,7 @@ export class LogseqPortalShape extends TLBoxShape<LogseqPortalShapeProps> {
     React.useEffect(() => {
       if (this.shouldAutoResizeHeight()) {
         const newHeight = innerHeight + this.getHeaderHeight()
-        if (innerHeight && newHeight !== this.props.size[1]) {
+        if (innerHeight && Math.abs(newHeight - this.props.size[1]) > AUTO_RESIZE_THRESHOLD) {
           this.update({
             size: [this.props.size[0], newHeight],
           })

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

@@ -112,6 +112,7 @@ export class TLHistory<S extends TLShape = TLShape, K extends TLEventMap = TLEve
               if (shape.nonce !== serializedShape.nonce) {
                 shape.update(serializedShape, true)
                 shape.nonce = serializedShape.nonce!
+                shape.setLastSerialized(serializedShape)
               }
               shapesMap.delete(serializedShape.id)
             } else {