Adds setter for history, tests

packages/tldraw/src/state/__snapshots__/tlstate.spec.ts.snap

@@ -64,5 +64,65 @@ Array [
     },
     "id": "create",
   },
+  Object {
+    "after": Object {
+      "document": Object {
+        "pageStates": Object {
+          "page1": Object {
+            "selectedIds": Array [
+              "rect2",
+            ],
+          },
+        },
+        "pages": Object {
+          "page1": Object {
+            "shapes": Object {
+              "rect2": Object {
+                "childIndex": 1,
+                "id": "rect2",
+                "name": "Rectangle",
+                "parentId": "page1",
+                "point": Array [
+                  0,
+                  0,
+                ],
+                "rotation": 0,
+                "size": Array [
+                  100,
+                  200,
+                ],
+                "style": Object {
+                  "color": "Black",
+                  "dash": "Draw",
+                  "isFilled": false,
+                  "size": "Medium",
+                },
+                "type": "rectangle",
+              },
+            },
+          },
+        },
+      },
+    },
+    "before": Object {
+      "document": Object {
+        "pageStates": Object {
+          "page1": Object {
+            "selectedIds": Array [
+              "rect1",
+            ],
+          },
+        },
+        "pages": Object {
+          "page1": Object {
+            "shapes": Object {
+              "rect2": undefined,
+            },
+          },
+        },
+      },
+    },
+    "id": "create",
+  },
 ]
 `;

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

@@ -361,12 +361,22 @@ describe('TLDrawState', () => {
   })
 
   it('Exposes undo/redo stack', () => {
-    const tlstate = new TLDrawState().loadDocument(mockDocument).createShapes({
-      id: 'rect1',
-      type: TLDrawShapeType.Rectangle,
-      point: [0, 0],
-      size: [100, 200],
-    })
+    const tlstate = new TLDrawState()
+      .loadDocument(mockDocument)
+      .createShapes({
+        id: 'rect1',
+        type: TLDrawShapeType.Rectangle,
+        point: [0, 0],
+        size: [100, 200],
+      })
+      .createShapes({
+        id: 'rect2',
+        type: TLDrawShapeType.Rectangle,
+        point: [0, 0],
+        size: [100, 200],
+      })
+
+    expect(tlstate.history.length).toBe(2)
 
     expect(tlstate.history).toBeDefined()
     expect(tlstate.history).toMatchSnapshot('history')
@@ -380,4 +390,59 @@ describe('TLDrawState', () => {
 
     expect(before).toBe(after)
   })
+
+  it('Exposes undo/redo stack up to the current pointer', () => {
+    const tlstate = new TLDrawState()
+      .loadDocument(mockDocument)
+      .createShapes({
+        id: 'rect1',
+        type: TLDrawShapeType.Rectangle,
+        point: [0, 0],
+        size: [100, 200],
+      })
+      .createShapes({
+        id: 'rect2',
+        type: TLDrawShapeType.Rectangle,
+        point: [0, 0],
+        size: [100, 200],
+      })
+      .undo()
+
+    expect(tlstate.history.length).toBe(1)
+  })
+
+  it('Sets the undo/redo history', () => {
+    const tlstate = new TLDrawState('some_state_a')
+      .createShapes({
+        id: 'rect1',
+        type: TLDrawShapeType.Rectangle,
+        point: [0, 0],
+        size: [100, 200],
+      })
+      .createShapes({
+        id: 'rect2',
+        type: TLDrawShapeType.Rectangle,
+        point: [0, 0],
+        size: [100, 200],
+      })
+
+    // Save the history and document from the first state
+    const doc = tlstate.document
+    const history = tlstate.history
+
+    // Create a new state
+    const tlstate2 = new TLDrawState('some_state_b')
+
+    // Load the document and set the history
+    tlstate2.loadDocument(doc)
+    tlstate2.history = history
+
+    expect(tlstate2.shapes.length).toBe(2)
+
+    // We should be able to undo the change that was made on the first
+    // state, now that we've brought in its undo / redo stack
+    tlstate2.undo()
+
+    expect(tlstate2.shapes.length).toBe(1)
+  })
 })

packages/tldraw/src/state/tlstate.ts

@@ -651,7 +651,7 @@ export class TLDrawState extends StateManager<Data> {
    * Get the current undo/redo stack.
    */
   get history() {
-    return this.stack
+    return this.stack.slice(0, this.pointer + 1)
   }
 
   /**