tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/test/HandTool.test.ts

@@ -1,3 +1,4 @@
+import { Vec } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { HandTool } from '../lib/tools/HandTool/HandTool'
 import { TestEditor } from './TestEditor'
@@ -18,6 +19,43 @@ afterEach(() => {
 vi.useFakeTimers()
 
 describe(HandTool, () => {
+	it('Uses one-finger zoom when coarse pointer double-taps, holds, and drags', () => {
+		editor.setCurrentTool('hand')
+		editor.updateInstanceState({ isCoarsePointer: true })
+
+		// Double-tap, holding the second press down.
+		editor.pointerDown(0, 0).pointerUp(0, 0)
+		editor.pointerDown(0, 0)
+		// On the second press we're still just pointing — the zoom hasn't started yet.
+		editor.expectToBeIn('hand.pointing')
+
+		// One-finger zoom begins when the multi-click timer settles with the pointer
+		// still held down (the `settle-down` phase).
+		vi.advanceTimersByTime(editor.options.multiClickDurationMs)
+		editor.expectToBeIn('hand.one_finger_zooming')
+
+		const before = editor.getCamera().z
+		editor.pointerMove(0, 100).pointerUp(0, 100).forceTick()
+		expect(editor.getCamera().z).toBeGreaterThan(before)
+	})
+
+	it('Zooms in (not one-finger zoom) when a coarse pointer double-taps and releases', () => {
+		editor.setCurrentTool('hand')
+		editor.updateInstanceState({ isCoarsePointer: true })
+
+		// Double-tap and release the second press before the timer settles.
+		editor.pointerDown(0, 0).pointerUp(0, 0)
+		editor.pointerDown(0, 0).pointerUp(0, 0)
+		// Releasing means we never enter the one-finger zoom drag state.
+		editor.expectToBeIn('hand.idle')
+
+		// The `settle-up` phase zooms in by one step.
+		const before = editor.getZoomLevel()
+		vi.advanceTimersByTime(editor.options.multiClickDurationMs)
+		vi.advanceTimersByTime(600) // let the zoom animation finish
+		expect(editor.getZoomLevel()).toBeGreaterThan(before)
+	})
+
 	it('Double taps to zoom in', () => {
 		editor.setCurrentTool('hand')
 		expect(editor.getZoomLevel()).toBe(1)
@@ -129,6 +167,16 @@ describe('When in the dragging state', () => {
 		editor.pointerUp()
 	})
 
+	it('Does not zoom when momentum panning on release', () => {
+		editor.setCurrentTool('hand')
+		editor.pointerDown(0, 0)
+		editor.pointerMove(50, 50)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
+		editor.pointerUp().forceTick()
+
+		expect(editor.getCamera().z).toBe(1)
+	})
+
 	// it('Moves the camera with inertia on pointer up', () => {
 	//  Can't test this—x is set to Inifnity in tests
 	// 	editor.setCurrentTool('hand')
@@ -160,4 +208,49 @@ describe('When in the dragging state', () => {
 		editor.cancel()
 		editor.expectToBeIn('hand.idle')
 	})
+
+	it('Returns to the idle state on interrupt', () => {
+		editor.setCurrentTool('hand')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.expectToBeIn('hand.dragging')
+		editor.interrupt()
+		editor.expectToBeIn('hand.idle')
+	})
+
+	it('Ends the pan when a second touch starts, without jumping the camera', () => {
+		editor.setCurrentTool('hand')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.expectToBeIn('hand.dragging')
+		expect(editor.getCamera()).toMatchObject({ x: 50, y: 50 })
+
+		// A second finger lands far from the first, resetting the input origin.
+		editor.pointerDown(200, 0)
+		editor.expectToBeIn('hand.idle')
+
+		// Movement before pinch_start arrives no longer pans the camera.
+		editor.pointerMove(210, 10)
+		expect(editor.getCamera()).toMatchObject({ x: 50, y: 50 })
+	})
+
+	it('Does not resume the pan after a pinch ends', () => {
+		editor.setCurrentTool('hand')
+		editor.pointerDown(50, 50)
+		editor.pointerMove(100, 100)
+		editor.expectToBeIn('hand.dragging')
+
+		// A second finger lands and starts a pinch.
+		editor.pointerDown(200, 0)
+		editor.expectToBeIn('hand.idle')
+		editor.pinchStart(150, 50, 1, 0, 0, 0)
+		editor.pinchTo(150, 50, 2, 0, 0, 0)
+		editor.pinchEnd(150, 50, 2, 0, 0, 0)
+		editor.expectToBeIn('hand.idle')
+
+		// Moving the remaining finger does not pan the camera.
+		const { x, y } = editor.getCamera()
+		editor.pointerMove(120, 120)
+		expect(editor.getCamera()).toMatchObject({ x, y })
+	})
 })

package/src/test/ImageShapeUtil.test.ts

@@ -1,6 +1,44 @@
 import { createShapeId, Ellipse2d, Rectangle2d, TLImageShape } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
+const ids = {
+	image: createShapeId('image'),
+	box: createShapeId('box'),
+}
+
+function createCroppedImageWithSibling() {
+	editor.createShapes([
+		{
+			id: ids.image,
+			type: 'image',
+			x: 0,
+			y: 0,
+			props: {
+				w: 100,
+				h: 100,
+				assetId: null,
+				playing: true,
+				url: '',
+				// crop to the top-left quadrant of the source image
+				crop: {
+					topLeft: { x: 0, y: 0 },
+					bottomRight: { x: 0.5, y: 0.5 },
+				},
+				flipX: false,
+				flipY: false,
+				altText: '',
+			},
+		},
+		{
+			id: ids.box,
+			type: 'geo',
+			x: 300,
+			y: 0,
+			props: { w: 100, h: 100 },
+		},
+	])
+}
+
 let editor: TestEditor
 
 beforeEach(() => {
@@ -153,4 +191,54 @@ describe('ImageShapeUtil', () => {
 			expect(geometry.isFilled).toBe(true)
 		})
 	})
+
+	describe('flipping a cropped image when its group is resized', () => {
+		it('mirrors the crop when a grouped cropped image is flipped by drag resize', () => {
+			createCroppedImageWithSibling()
+			editor.select(ids.image, ids.box)
+			editor.groupShapes(editor.getSelectedShapeIds())
+
+			// Flip the group horizontally by dragging a corner handle past the
+			// opposite edge. The drag scale is not exactly -1, which is the case
+			// that previously left the crop un-mirrored.
+			editor.resizeSelection({ scaleX: -2, scaleY: 1 }, 'top_left')
+
+			const image = editor.getShape<TLImageShape>(ids.image)!
+			expect(image.props.flipX).toBe(true)
+			// The crop should be mirrored horizontally and unchanged vertically.
+			expect(image.props.crop).toMatchObject({
+				topLeft: { x: 0.5, y: 0 },
+				bottomRight: { x: 1, y: 0.5 },
+			})
+		})
+
+		it('mirrors the crop vertically when a grouped cropped image is flipped by drag resize', () => {
+			createCroppedImageWithSibling()
+			editor.select(ids.image, ids.box)
+			editor.groupShapes(editor.getSelectedShapeIds())
+
+			editor.resizeSelection({ scaleX: 1, scaleY: -2 }, 'top_left')
+
+			const image = editor.getShape<TLImageShape>(ids.image)!
+			expect(image.props.flipY).toBe(true)
+			expect(image.props.crop).toMatchObject({
+				topLeft: { x: 0, y: 0.5 },
+				bottomRight: { x: 0.5, y: 1 },
+			})
+		})
+
+		it('matches the flipShapes command result for a grouped cropped image', () => {
+			createCroppedImageWithSibling()
+			editor.select(ids.image, ids.box)
+			editor.groupShapes(editor.getSelectedShapeIds())
+			editor.flipShapes(editor.getSelectedShapeIds(), 'horizontal')
+
+			const image = editor.getShape<TLImageShape>(ids.image)!
+			expect(image.props.flipX).toBe(true)
+			expect(image.props.crop).toMatchObject({
+				topLeft: { x: 0.5, y: 0 },
+				bottomRight: { x: 1, y: 0.5 },
+			})
+		})
+	})
 })

package/src/test/SelectTool.test.ts

@@ -1,4 +1,11 @@
-import { IndexKey, ShapeUtil, TLFrameShape, createShapeId, toRichText } from '@tldraw/editor'
+import {
+	IndexKey,
+	ShapeUtil,
+	TLArrowShape,
+	TLFrameShape,
+	createShapeId,
+	toRichText,
+} from '@tldraw/editor'
 import { vi } from 'vitest'
 import { defaultHandleExternalTldrawContent } from '../lib/defaultExternalContentHandlers'
 import { defaultOverlayUtils } from '../lib/defaultOverlayUtils'
@@ -115,6 +122,44 @@ describe.skip('Edit on type', () => {
 	})
 })
 
+describe('TLSelectTool.PointingShape when the shape is deleted mid-click', () => {
+	// Reproduces https://github.com/tldraw/tldraw/issues/8558: a remote user,
+	// undo, or other actor can delete the pointed-at shape between pointer down
+	// and pointer up. The tool should bail to idle instead of crashing.
+
+	it('does not crash on pointer up when an already-selected shape is deleted', () => {
+		// pre-selecting the shape means didSelectOnEnter is false, so pointer up
+		// runs the selection logic that dereferences the (now deleted) shape
+		editor.select(ids.box1)
+		const shape = editor.getShape(ids.box1)!
+
+		editor.pointerDown(shape.x + 10, shape.y + 10, { target: 'shape', shape })
+		editor.expectToBeIn('select.pointing_shape')
+
+		editor.deleteShapes([ids.box1])
+
+		expect(() => editor.pointerUp(shape.x + 10, shape.y + 10)).not.toThrow()
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('does not crash on pointer up when a ctrl-clicked shape is deleted', () => {
+		// ctrl/accel on enter also leaves didSelectOnEnter false
+		const shape = editor.getShape(ids.box1)!
+
+		editor.pointerDown(shape.x + 10, shape.y + 10, {
+			target: 'shape',
+			shape,
+			accelKey: true,
+		})
+		editor.expectToBeIn('select.pointing_shape')
+
+		editor.deleteShapes([ids.box1])
+
+		expect(() => editor.pointerUp(shape.x + 10, shape.y + 10)).not.toThrow()
+		editor.expectToBeIn('select.idle')
+	})
+})
+
 describe('TLSelectTool.Translating', () => {
 	it('Enters from pointing and exits to idle', () => {
 		const shape = editor.getShape(ids.box1)
@@ -510,6 +555,34 @@ describe('When pressing enter on a selected shape', () => {
 	})
 })
 
+describe('When undo/redo restores an invalid editing shape', () => {
+	// Regression: https://github.com/tldraw/tldraw/issues/9113
+	// Setting the editing shape is not recorded in history, but clearing it on delete is.
+	// When create + edit + delete of the same shape collapse into a single history entry,
+	// the shape's add/remove cancel out while the editingShapeId update survives. Undoing
+	// then restores editingShapeId pointing at a shape that no longer exists, which used to
+	// crash with "Entered editing state without an editing shape". The editor must never
+	// enter the editing state without a valid editing shape.
+	it('does not crash when undo restores editingShapeId for a deleted shape', () => {
+		const id = createShapeId()
+		editor.markHistoryStoppingPoint('start')
+		editor.createShape({ id, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } })
+		editor.setEditingShape(id)
+		editor.deleteShapes([id])
+
+		expect(() => editor.undo()).not.toThrow()
+
+		editor.expectToBeIn('select.idle')
+		expect(editor.getEditingShapeId()).toBe(null)
+		expect(editor.getShape(id)).toBeUndefined()
+
+		// Redoing back through the same history entry must also stay safe.
+		expect(() => editor.redo()).not.toThrow()
+		editor.expectToBeIn('select.idle')
+		expect(editor.getEditingShapeId()).toBe(null)
+	})
+})
+
 // it('selects the child of a group', () => {
 //   const id1 = createShapeId()
 //   const id2 = createShapeId()
@@ -643,6 +716,34 @@ describe('When double clicking a selection handle that registers as a canvas eve
 		expect(spy).toHaveBeenCalledTimes(1)
 		expect(spy.mock.calls[0][1]).toMatchObject({ target: 'selection', handle: 'bottom_right' })
 	})
+
+	it('Routes a canvas-targeted double-click on an arrow handle to onDoubleClickHandle', () => {
+		const id = createShapeId()
+		overlayEditor
+			.createShapes([
+				{
+					id,
+					type: 'arrow',
+					x: 100,
+					y: 100,
+					props: { start: { x: 0, y: 0 }, end: { x: 100, y: 100 } },
+				},
+			])
+			.select(id)
+
+		expect(overlayEditor.getShape<TLArrowShape>(id)!.props.arrowheadEnd).toBe('arrow')
+
+		// Double-click on the end handle without specifying target — defaults to
+		// target: 'canvas', the payload a real DOM double-click produces when the
+		// press lands on the handle overlay. This should toggle the arrowhead.
+		overlayEditor.doubleClick(200, 200)
+
+		expect(overlayEditor.getShape<TLArrowShape>(id)!.props.arrowheadEnd).toBe('none')
+
+		overlayEditor.doubleClick(200, 200)
+
+		expect(overlayEditor.getShape<TLArrowShape>(id)!.props.arrowheadEnd).toBe('arrow')
+	})
 })
 
 describe('When editing shapes', () => {

package/src/test/__snapshots__/drawing.test.ts.snap

@@ -19,7 +19,8 @@ exports[`Draws a bunch > draw shape 1`] = `
     "scaleY": 1,
     "segments": [
       {
-        "path": "AAAAAAAAAAAAAAA/ADwAAAAAAEIAAAAAAEYAvAAAgEgAwgAAgEkAxgAAAEwAyQAAgEsAyQAAgEqAygAAgEsAzAAAgEqAzAAAAEaAygAAAESAygAAAEUAzAAAADwAygAAADwAxgAAAAAAyAAAADwAxwAAALwAxgAAAMAAxQAAAMIAxAAAAMUAwAAAAMYAvAAAAMYAAAAAAMgAAAAAgMgARAAAgMgARwAAgMiASAAAAMgASgAAAMQASgAAAMKASgAAALwASwAAAABATAAAADxATQAAAEYATQAAAEdATAAAAEhATAAAgEnATAAAgEgATQAAAEiATAAAAEfATAAAAEJATAAAADwATAAAAACATAAAAMUATAAAAMoASQAAAMwASAAAwM+ASAAAgMkAPAAAgMkAAAAAAMkAAAAAgMgAAAAAgMgAwAAAAMYAwgAAAMAAxgAAAAAAxgAAAESAyAAAAEqAyQAAAEuAywAAwEwAzAAAgE1AzAAAQE5AzQAAgE5AzgAAwExAzQAAwEyAzQAAgEsAzQAAAEoAzQAAgErAzQAAgEgAzQAAAEXAzAAAAEKAywAAADyAyQAAAAAAyAAAAMAAxgAAAMUAwgAAAMUAvAAAAMUAvAAAAMgAPAAAAMgARgAAAMYASQAAAMYASgAAAMeATAAAAMdATQAAAMVATgAAAMQATwAAAMJATwAAAABATwAAAADATgAAADxATgAAAEfATQAAAEgATAAAAEiASQAAAEmASgAAgEgASAAAAEgARQAAAEgAQAAAAEYAAAAAAEgAvAAAgEgAxQAAgEgAyQAAAEeAyQAAAEaAygAAAEZAzAAAAEVAzAAAAEJAzAAAAECAywAAADyAyAAAAAAAxgAAAAAAxwAAAMAAxAAAAMIAxAAAAMAAAAAAAMIAAAAAAMIAPAAAAMAAQAAAAMAARwAAAMAASAAAALyASQAAALyASQAAAAAASQAAAEKASgAAAEYASgAAAEaASAAAAEiASAAAAEUARAAAAEYAQgAAAEgAQAAAAEYAAAAAAEYAwgAAAEUAyQAAAEUAygAAAEAAyQAAAEKAygAAAEAAygAAAEAAyQAAADwAyQAAADwAxwAAADwAxgAAAAAAwgAAAAAAwAAAAAAAvAAAAAAAQgAAAAAARQAAAAAASAAAAACASAAAAAAARwAAAAAARQAAAAAARQAAADwARQAAAEIARQAAAEAAQgAAAEIAPAAAAEIAPAAAAEQAAAAAAEUAwgAAAEQAxAAAAEIAwgAAAEIAxAAAAEIAwgAAAEAAwAAAAEAAwAAAAEAAAAAAAAAAAAAAADwAAAAAAAAAPAAAADwAPAAAADwAQAAAAAAAQAAAADwAPAAAAAAAPAAAADwAPAAAADwAAAAAADwAAAAAADwAxgAAAECAyAAAAECAyAAAAEIAyAAAAEAAxgAAAEAAxwAAAEAAxgAAAEQAxgAAAEIAxAAAAEQAvAAAAEUAAAAAAEUAAAAAAEcAPAAAgEoASAAAAEsASgAAAEmASQAAAEqASwAAAEmASwAAAEhATAAAAEQASwAAAEBATQAAAECATgAAAAAATQAAAMQATAAAAMlATAAAAMyATAAAwMxATAAAAMwASQAAAMsARQAAAMwARQAAgMoAQAAAAMkAAAAAAMgAxAAAAMaAyAAAALwAywAAAADAzgAAAEkg0AAAwE1g0AAAwE8g0QAAQE9g0AAAYFDA0AAAoFCg0AAA4FHg0QAAwFHg0QAAgE3AzQAAgE0AzgAAgE2AzgAAAEqAywAAgEgAzAAAAEiAzAAAADwAxwAAAMAAxgAAgMgAxAAAgMwAwAAAgM0AAAAAQM0AQgAAANCASgAAYNDATAAAAM8ATQAAAM7ATAAAgMxATAAAQMzATAAAgMmASwAAAMaASQAAAMAASAAAAAAARQAAADwAQgAAAEIAPAAAAEYAPAAAAEQAAAAAAEIAvAAAAEUAvAAAAEAAvAAAAEAAvAAAADwAAAAAADwAvAAAAAAAAAAAADwAAAAA",
+        "dim": 2,
+        "path": "AAAAAAAAAAAAPAAAAEIAAABGALyASADCgEkAxgBMAMmASwDJgEqAyoBLAMyASoDMAEaAygBEgMoARQDMADwAygA8AMYAAADIADwAxwC8AMYAwADFAMIAxADFAMAAxgC8AMYAAADIAACAyABEgMgAR4DIgEgAyABKAMQASgDCgEoAvABLAABATAA8QE0ARgBNAEdATABIQEyAScBMgEgATQBIgEwAR8BMAEJATAA8AEwAAIBMAMUATADKAEkAzABIwM+ASIDJADyAyQAAAMkAAIDIAACAyADAAMYAwgDAAMYAAADGAESAyABKgMkAS4DLwEwAzIBNQMxATkDNgE5AzsBMQM3ATIDNgEsAzQBKAM2ASsDNgEgAzQBFwMwAQoDLADyAyQAAAMgAwADGAMUAwgDFALwAxQC8AMgAPADIAEYAxgBJAMYASgDHgEwAx0BNAMVATgDEAE8AwkBPAABATwAAwE4APEBOAEfATQBIAEwASIBJAEmASoBIAEgASABFAEgAQABGAAAASAC8gEgAxYBIAMkAR4DJAEaAygBGQMwARUDMAEJAzABAgMsAPIDIAAAAxgAAAMcAwADEAMIAxADAAAAAwgAAAMIAPADAAEAAwABHAMAASAC8gEkAvIBJAAAASQBCgEoARgBKAEaASABIgEgARQBEAEYAQgBIAEAARgAAAEYAwgBFAMkARQDKAEAAyQBCgMoAQADKAEAAyQA8AMkAPADHADwAxgAAAMIAAADAAAAAvAAAAEIAAABFAAAASAAAgEgAAABHAAAARQAAAEUAPABFAEIARQBAAEIAQgA8AEIAPABEAAAARQDCAEQAxABCAMIAQgDEAEIAwgBAAMAAQADAAEAAAAAAAAAAPAAAAAAAPAA8ADwAPABAAAAAQAA8ADwAAAA8ADwAPAA8AAAAPAAAADwAxgBAgMgAQIDIAEIAyABAAMYAQADHAEAAxgBEAMYAQgDEAEQAvABFAAAARQAAAEcAPIBKAEgASwBKAEmASQBKgEsASYBLAEhATABEAEsAQEBNAECATgAAAE0AxABMAMlATADMgEzAzEBMAMwASQDLAEUAzABFgMoAQADJAAAAyADEAMaAyAC8AMsAAMDOAEkg0MBNYNDATyDRQE9g0GBQwNCgUKDQ4FHg0cBR4NGATcDNgE0AzoBNgM4ASoDLgEgAzABIgMwAPADHAMAAxoDIAMSAzADAgM0AAEDNAEIA0IBKYNDATADPAE0AzsBMgMxATEDMwEyAyYBLAMaASQDAAEgAAABFADwAQgBCADwARgA8AEQAAABCALwARQC8AEAAvABAALwAPAAAADwAvAAAAAAAPAAA",
         "type": "free",
       },
     ],

package/src/test/attribution.test.ts

@@ -1,6 +1,7 @@
 import {
 	TLNoteShape,
 	UserRecordType,
+	atom,
 	computed,
 	createShapeId,
 	createUserId,
@@ -25,7 +26,7 @@ const ids = {
 
 describe('getAttributionDisplayName', () => {
 	it('returns current user name for own userId', () => {
-		const userId = editor.user.getId()
+		const userId = editor.user.getExternalId()
 		const name = editor.getAttributionDisplayName(userId)
 		expect(name).toBe(editor.user.getName())
 	})
@@ -40,8 +41,8 @@ describe('getAttributionDisplayName', () => {
 	})
 })
 
-describe('note shape textFirstEditedBy', () => {
-	it('sets textFirstEditedBy as user ID string when richText changes', () => {
+describe('note shape textLastEditedBy', () => {
+	it('sets textLastEditedBy as user ID string when richText changes', () => {
 		editor.createShapes([
 			{
 				id: ids.note1,
@@ -51,7 +52,7 @@ describe('note shape textFirstEditedBy', () => {
 			},
 		])
 
-		const userId = editor.user.getId()
+		const userId = editor.user.getExternalId()
 
 		editor.updateShape<TLNoteShape>({
 			id: ids.note1,
@@ -60,41 +61,51 @@ describe('note shape textFirstEditedBy', () => {
 		})
 
 		const note = editor.getShape<TLNoteShape>(ids.note1)!
-		expect(note.props.textFirstEditedBy).toBe(userId)
+		expect(note.props.textLastEditedBy).toBe(userId)
 	})
 
-	it('does not overwrite textFirstEditedBy on subsequent edits', () => {
-		editor.createShapes([
+	it('updates textLastEditedBy to the most recent editor', () => {
+		const alice = UserRecordType.create({ id: createUserId('user-1'), name: 'Alice' })
+		const bob = UserRecordType.create({ id: createUserId('user-2'), name: 'Bob' })
+		const currentUser = atom('currentUser', alice)
+		const customEditor = new TestEditor(
+			{},
 			{
-				id: ids.note1,
-				type: 'note',
-				x: 0,
-				y: 0,
-			},
-		])
+				users: {
+					currentUser,
+					resolve: (userId) =>
+						computed('resolve-' + userId, () => {
+							if (userId === 'user-1') return alice
+							if (userId === 'user-2') return bob
+							return null
+						}),
+				},
+			}
+		)
 
-		const userId = editor.user.getId()
+		customEditor.createShapes([{ id: ids.note1, type: 'note', x: 0, y: 0 }])
 
-		editor.updateShape<TLNoteShape>({
+		// Alice edits the note first
+		customEditor.updateShape<TLNoteShape>({
 			id: ids.note1,
 			type: 'note',
 			props: { richText: toRichText('Hello') },
 		})
+		expect(customEditor.getShape<TLNoteShape>(ids.note1)!.props.textLastEditedBy).toBe('user-1')
 
-		const note1 = editor.getShape<TLNoteShape>(ids.note1)!
-		expect(note1.props.textFirstEditedBy).toBe(userId)
-
-		editor.updateShape<TLNoteShape>({
+		// Bob edits the note next — the latest editor wins
+		currentUser.set(bob)
+		customEditor.updateShape<TLNoteShape>({
 			id: ids.note1,
 			type: 'note',
 			props: { richText: toRichText('Hello world') },
 		})
+		expect(customEditor.getShape<TLNoteShape>(ids.note1)!.props.textLastEditedBy).toBe('user-2')
 
-		const note2 = editor.getShape<TLNoteShape>(ids.note1)!
-		expect(note2.props.textFirstEditedBy).toBe(userId)
+		customEditor.dispose()
 	})
 
-	it('resets textFirstEditedBy to null when text is deleted', () => {
+	it('resets textLastEditedBy to null when text is deleted', () => {
 		editor.createShapes([
 			{
 				id: ids.note1,
@@ -111,7 +122,7 @@ describe('note shape textFirstEditedBy', () => {
 		})
 
 		const note1 = editor.getShape<TLNoteShape>(ids.note1)!
-		expect(note1.props.textFirstEditedBy).not.toBeNull()
+		expect(note1.props.textLastEditedBy).not.toBeNull()
 
 		editor.updateShape<TLNoteShape>({
 			id: ids.note1,
@@ -120,10 +131,10 @@ describe('note shape textFirstEditedBy', () => {
 		})
 
 		const note2 = editor.getShape<TLNoteShape>(ids.note1)!
-		expect(note2.props.textFirstEditedBy).toBeNull()
+		expect(note2.props.textLastEditedBy).toBeNull()
 	})
 
-	it('does not set textFirstEditedBy when only position changes', () => {
+	it('does not set textLastEditedBy when only position changes', () => {
 		editor.createShapes([
 			{
 				id: ids.note1,
@@ -136,10 +147,10 @@ describe('note shape textFirstEditedBy', () => {
 		editor.updateShape({ id: ids.note1, type: 'note', x: 100 })
 
 		const note = editor.getShape<TLNoteShape>(ids.note1)!
-		expect(note.props.textFirstEditedBy).toBeNull()
+		expect(note.props.textLastEditedBy).toBeNull()
 	})
 
-	it('does not set textFirstEditedBy when color changes', () => {
+	it('does not set textLastEditedBy when color changes', () => {
 		editor.createShapes([
 			{
 				id: ids.note1,
@@ -156,7 +167,7 @@ describe('note shape textFirstEditedBy', () => {
 		})
 
 		const note = editor.getShape<TLNoteShape>(ids.note1)!
-		expect(note.props.textFirstEditedBy).toBeNull()
+		expect(note.props.textLastEditedBy).toBeNull()
 	})
 })
 
@@ -186,7 +197,7 @@ describe('TLUserStore', () => {
 	})
 
 	it('falls back to default user store when none provided', () => {
-		const userId = editor.user.getId()
+		const userId = editor.user.getExternalId()
 		expect(editor.getAttributionUserId()).toBe(userId)
 		expect(editor.getAttributionDisplayName(userId)).toBe(editor.user.getName())
 	})