Fix changing a setting preventing page content from being replaced (#447)

* Fix setting settings preventing UI from updating

* Add tests for replacePageContent

packages/tldraw/src/state/TldrawApp.spec.ts

@@ -658,4 +658,31 @@ describe('TldrawTestApp', () => {
       }, 100)
     })
   })
+
+  describe('When replacing the page content', () => {
+    it('Should update the page with the correct shapes and bindings.', () => {
+      const shapes = mockDocument.pages.page1.shapes
+      const bindings = mockDocument.pages.page1.bindings
+      const app = new TldrawTestApp('multiplayer', {
+        onChangePage: () => {},
+      }).createPage()
+      app.replacePageContent(shapes, bindings)
+
+      expect(app.shapes).toEqual(Object.values(shapes))
+      expect(app.bindings).toEqual(Object.values(bindings))
+    })
+
+    it('It should update the page shapes after the settings have been updated', () => {
+      const shapes = mockDocument.pages.page1.shapes
+      const bindings = mockDocument.pages.page1.bindings
+      const app = new TldrawTestApp('multiplayer', {
+        onChangePage: () => {},
+      }).createPage()
+      app.setSetting('isDebugMode', true)
+      app.replacePageContent(shapes, bindings)
+
+      expect(app.shapes).toEqual(Object.values(shapes))
+      expect(app.bindings).toEqual(Object.values(bindings))
+    })
+  })
 })

packages/tldraw/src/state/TldrawApp.ts

@@ -540,10 +540,13 @@ export class TldrawApp extends StateManager<TDSnapshot> {
         changedBindings[id] = undefined
       })
 
-    this.justSent = true
-    this.callbacks.onChangePage?.(this, changedShapes, changedBindings)
-    this.prevShapes = this.page.shapes
-    this.prevBindings = this.page.bindings
+    // Only trigger update if shapes or bindings have changed
+    if (Object.keys(changedBindings).length > 0 || Object.keys(changedShapes).length > 0) {
+      this.justSent = true
+      this.callbacks.onChangePage?.(this, changedShapes, changedBindings)
+      this.prevShapes = this.page.shapes
+      this.prevBindings = this.page.bindings
+    }
   }
 
   getReservedContent = (ids: string[], pageId = this.currentPageId) => {