tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/test/bookmark-shapes.test.ts

@@ -1,6 +1,11 @@
-import { TLBookmarkShape, createShapeId } from '@tldraw/editor'
+import { AssetRecordType, TLBookmarkShape, createShapeId, getHashForString } from '@tldraw/editor'
 import { vi } from 'vitest'
-import { createBookmarkFromUrl, getHumanReadableAddress } from '../lib/shapes/bookmark/bookmarks'
+import {
+	createBookmarkFromUrl,
+	getBookmarkShapeHeight,
+	getHumanReadableAddress,
+	getResolvedBookmarkAssetId,
+} from '../lib/shapes/bookmark/bookmarks'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -135,11 +140,16 @@ describe('The URL formatter', () => {
 })
 
 describe('createBookmarkFromUrl', () => {
-	it('creates a bookmark shape with unfurled metadata', async () => {
+	it('creates a placeholder bookmark shape immediately and patches the asset once metadata resolves', async () => {
 		const url = 'https://example.com'
 		const center = { x: 100, y: 200 }
 
-		// Mock the asset creation to return a test asset
+		// Use a deferred promise so we can observe state before the asset resolves.
+		let resolveAsset: (asset: any) => void = () => {}
+		const assetPromise = new Promise<any>((resolve) => {
+			resolveAsset = resolve
+		})
+
 		const mockAsset = {
 			id: 'asset:test-asset-id' as any,
 			typeName: 'asset' as const,
@@ -154,27 +164,32 @@ describe('createBookmarkFromUrl', () => {
 			meta: {},
 		}
 
-		// Mock the getAssetForExternalContent method
-		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue(mockAsset)
+		vi.spyOn(editor, 'getAssetForExternalContent').mockReturnValue(assetPromise)
 
 		const result = await createBookmarkFromUrl(editor, { url, center })
 
 		assert(result.ok, 'Failed to create bookmark')
 		const shape = result.value
+
+		// Placeholder should exist before the asset resolves.
 		expect(shape.type).toBe('bookmark')
 		expect(shape.props.url).toBe(url)
-		expect(shape.props.assetId).toBe('asset:test-asset-id')
+		expect(shape.props.assetId).toBe(null)
 		expect(shape.props.w).toBe(300)
 		expect(shape.props.h).toBe(320)
-		expect(shape.x).toBe(center.x - 150) // BOOKMARK_WIDTH / 2
-		expect(shape.y).toBe(center.y - 160) // BOOKMARK_HEIGHT / 2
+		expect(shape.x).toBe(center.x - 150)
+		expect(shape.y).toBe(center.y - 160)
 
-		// Verify the shape was created in the editor
-		const createdShape = editor.getShape(result.value.id)
-		expect(createdShape).toBeDefined()
-		expect(createdShape?.type).toBe('bookmark')
+		const placeholderInStore = editor.getShape<TLBookmarkShape>(shape.id)
+		expect(placeholderInStore?.props.assetId).toBe(null)
+		expect(editor.getAsset('asset:test-asset-id' as any)).toBeUndefined()
+
+		// Resolve the asset and let the microtask queue flush.
+		resolveAsset(mockAsset)
+		await assetPromise
 
-		// Verify the asset was created
+		const hydrated = editor.getShape<TLBookmarkShape>(shape.id)
+		expect(hydrated?.props.assetId).toBe('asset:test-asset-id')
 		const createdAsset = editor.getAsset('asset:test-asset-id' as any)
 		expect(createdAsset).toBeDefined()
 		expect(createdAsset?.type).toBe('bookmark')
@@ -184,7 +199,6 @@ describe('createBookmarkFromUrl', () => {
 		const url = 'https://example.com'
 		const viewportCenter = { x: 500, y: 300 }
 
-		// Mock getViewportPageBounds to return a known center
 		vi.spyOn(editor, 'getViewportPageBounds').mockReturnValue({
 			x: 0,
 			y: 0,
@@ -193,7 +207,7 @@ describe('createBookmarkFromUrl', () => {
 			center: viewportCenter,
 		} as any)
 
-		const mockAsset = {
+		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue({
 			id: 'asset:test-asset-id' as any,
 			typeName: 'asset' as const,
 			type: 'bookmark' as const,
@@ -205,9 +219,7 @@ describe('createBookmarkFromUrl', () => {
 				favicon: '',
 			},
 			meta: {},
-		}
-
-		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue(mockAsset)
+		})
 
 		const result = await createBookmarkFromUrl(editor, { url })
 
@@ -217,28 +229,35 @@ describe('createBookmarkFromUrl', () => {
 		expect(shape.y).toBe(viewportCenter.y - 160)
 	})
 
-	it('handles asset creation failure gracefully', async () => {
+	it('keeps the placeholder bookmark when the asset fetch rejects', async () => {
 		const url = 'https://invalid-url.com'
 		const center = { x: 100, y: 200 }
+		const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
 
-		// Mock the asset creation to fail
 		vi.spyOn(editor, 'getAssetForExternalContent').mockRejectedValue(new Error('Failed to fetch'))
 
 		const result = await createBookmarkFromUrl(editor, { url, center })
 
-		assert(!result.ok, 'Failed to create bookmark')
-		expect(result.error).toBe('Failed to fetch')
+		assert(result.ok, 'Expected placeholder bookmark to be created even when fetch fails')
+		const shape = result.value
+		expect(shape.type).toBe('bookmark')
+		expect(shape.props.url).toBe(url)
+		expect(shape.props.assetId).toBe(null)
+
+		// Wait for the rejected promise to be observed.
+		await Promise.resolve()
+		await Promise.resolve()
+
+		const stillPlaceholder = editor.getShape<TLBookmarkShape>(shape.id)
+		expect(stillPlaceholder?.props.assetId).toBe(null)
 
-		// Verify no shape was created
-		const shapes = editor.getCurrentPageShapes()
-		expect(shapes).toHaveLength(0)
+		consoleSpy.mockRestore()
 	})
 
 	it('creates bookmark shape even when asset creation returns null', async () => {
 		const url = 'https://example.com'
 		const center = { x: 100, y: 200 }
 
-		// Mock the asset creation to return null
 		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue(null as any)
 
 		const result = await createBookmarkFromUrl(editor, { url, center })
@@ -249,8 +268,217 @@ describe('createBookmarkFromUrl', () => {
 		expect(shape.props.url).toBe(url)
 		expect(shape.props.assetId).toBe(null)
 
-		// Verify the shape was created
 		const createdShape = editor.getShape(result.value.id)
 		expect(createdShape).toBeDefined()
 	})
+
+	it('reuses an existing bookmark asset for the same URL without re-fetching', async () => {
+		const url = 'https://example.com'
+		const center = { x: 100, y: 200 }
+
+		let resolveFirst: (asset: any) => void = () => {}
+		const firstPromise = new Promise<any>((resolve) => {
+			resolveFirst = resolve
+		})
+
+		const fetchSpy = vi.spyOn(editor, 'getAssetForExternalContent')
+		fetchSpy.mockReturnValueOnce(firstPromise)
+
+		const first = await createBookmarkFromUrl(editor, { url, center })
+		assert(first.ok)
+
+		resolveFirst({
+			id: AssetRecordType.createId(getHashForString(url)),
+			typeName: 'asset',
+			type: 'bookmark',
+			props: {
+				src: url,
+				title: 'Example Site',
+				description: 'desc',
+				image: 'https://example.com/image.jpg',
+				favicon: 'https://example.com/favicon.ico',
+			},
+			meta: {},
+		})
+		await firstPromise
+		// Yield once more so the hydrate continuation runs after the resolver.
+		await Promise.resolve()
+
+		const hydrated = editor.getShape<TLBookmarkShape>(first.value.id)
+		expect(hydrated?.props.assetId).not.toBeNull()
+		expect(fetchSpy).toHaveBeenCalledTimes(1)
+
+		// Second creation for the same URL should reuse the asset and not fetch again.
+		const second = await createBookmarkFromUrl(editor, { url, center: { x: 400, y: 500 } })
+		assert(second.ok)
+		expect(second.value.props.assetId).not.toBeNull()
+		expect(fetchSpy).toHaveBeenCalledTimes(1)
+	})
+
+	it('does not patch the asset if the shape URL changed before metadata resolved', async () => {
+		const url = 'https://example.com'
+		const center = { x: 100, y: 200 }
+
+		let resolveAsset: (asset: any) => void = () => {}
+		const assetPromise = new Promise<any>((resolve) => {
+			resolveAsset = resolve
+		})
+		vi.spyOn(editor, 'getAssetForExternalContent').mockReturnValue(assetPromise)
+
+		const result = await createBookmarkFromUrl(editor, { url, center })
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+
+		// Change the URL before the original fetch resolves.
+		editor.updateShapes([{ id: shape.id, type: 'bookmark', props: { url: 'https://changed.com' } }])
+
+		// Now resolve the original fetch — its metadata is for the stale URL.
+		resolveAsset({
+			id: 'asset:test-asset-id' as any,
+			typeName: 'asset' as const,
+			type: 'bookmark' as const,
+			props: {
+				src: url,
+				title: 'Example Site',
+				description: 'An example website',
+				image: 'https://example.com/image.jpg',
+				favicon: 'https://example.com/favicon.ico',
+			},
+			meta: {},
+		})
+		await assetPromise
+		await Promise.resolve()
+
+		// The shape should keep its current (changed) URL and not be patched with
+		// the stale asset.
+		const after = editor.getShape<TLBookmarkShape>(shape.id)
+		expect(after?.props.url).toBe('https://changed.com')
+		expect(after?.props.assetId).toBe(null)
+	})
+
+	it('removes the placeholder cleanly on undo without an extra metadata undo step', async () => {
+		const url = 'https://example.com'
+		const center = { x: 100, y: 200 }
+
+		const assetPromise = Promise.resolve({
+			id: 'asset:test-asset-id' as any,
+			typeName: 'asset' as const,
+			type: 'bookmark' as const,
+			props: {
+				src: url,
+				title: 'Example Site',
+				description: 'An example website',
+				image: 'https://example.com/image.jpg',
+				favicon: 'https://example.com/favicon.ico',
+			},
+			meta: {},
+		})
+		vi.spyOn(editor, 'getAssetForExternalContent').mockReturnValue(assetPromise)
+
+		editor.markHistoryStoppingPoint()
+		const result = await createBookmarkFromUrl(editor, { url, center })
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+
+		// Let hydration (history: 'ignore') run.
+		await assetPromise
+		await Promise.resolve()
+		expect(editor.getShape<TLBookmarkShape>(shape.id)?.props.assetId).toBe('asset:test-asset-id')
+
+		// A single undo should remove the placeholder entirely; the metadata patch
+		// must not have created its own undo step.
+		editor.undo()
+		expect(editor.getShape(shape.id)).toBeUndefined()
+	})
+
+	it('renders the hydrated asset after redo even though the asset patch was history-ignored', async () => {
+		const url = 'https://example.com'
+		const center = { x: 100, y: 200 }
+		const assetId = AssetRecordType.createId(getHashForString(url))
+
+		const assetPromise = Promise.resolve({
+			id: assetId,
+			typeName: 'asset' as const,
+			type: 'bookmark' as const,
+			props: {
+				src: url,
+				title: 'Example Site',
+				description: 'An example website',
+				image: 'https://example.com/image.jpg',
+				favicon: 'https://example.com/favicon.ico',
+			},
+			meta: {},
+		})
+		vi.spyOn(editor, 'getAssetForExternalContent').mockReturnValue(assetPromise)
+
+		editor.markHistoryStoppingPoint()
+		const result = await createBookmarkFromUrl(editor, { url, center })
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+
+		// Let hydration (history: 'ignore') run.
+		await assetPromise
+		await Promise.resolve()
+		expect(editor.getShape<TLBookmarkShape>(shape.id)?.props.assetId).toBe(assetId)
+
+		// Undo removes the placeholder; the hydrated asset stays in the store
+		// because it was created with history: 'ignore'.
+		editor.undo()
+		expect(editor.getShape(shape.id)).toBeUndefined()
+		expect(editor.getAsset(assetId)).toBeDefined()
+
+		// Redo restores the placeholder shape with a null assetId (the asset patch
+		// was history-ignored). The shape should still resolve its asset by URL so
+		// it doesn't stay stuck on the placeholder.
+		editor.redo()
+		const redone = editor.getShape<TLBookmarkShape>(shape.id)
+		assert(redone, 'Expected the bookmark to be restored on redo')
+		expect(getResolvedBookmarkAssetId(editor, redone.props.assetId, redone.props.url)).toBe(assetId)
+	})
+
+	it('measures a short bookmark at its resolved height after redo, not the placeholder height', async () => {
+		const url = 'https://example.com'
+		const center = { x: 100, y: 200 }
+		const assetId = AssetRecordType.createId(getHashForString(url))
+
+		// A no-image unfurl produces a shorter bookmark than the placeholder.
+		const assetPromise = Promise.resolve({
+			id: assetId,
+			typeName: 'asset' as const,
+			type: 'bookmark' as const,
+			props: {
+				src: url,
+				title: 'Example Site',
+				description: 'An example website',
+				image: '',
+				favicon: 'https://example.com/favicon.ico',
+			},
+			meta: {},
+		})
+		vi.spyOn(editor, 'getAssetForExternalContent').mockReturnValue(assetPromise)
+
+		editor.markHistoryStoppingPoint()
+		const result = await createBookmarkFromUrl(editor, { url, center })
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+
+		await assetPromise
+		await Promise.resolve()
+		const hydrated = editor.getShape<TLBookmarkShape>(shape.id)
+		assert(hydrated, 'Expected the bookmark to hydrate')
+		const shortHeight = hydrated.props.h
+		expect(shortHeight).toBeLessThan(320)
+
+		editor.undo()
+		editor.redo()
+
+		const redone = editor.getShape<TLBookmarkShape>(shape.id)
+		assert(redone, 'Expected the bookmark to be restored on redo')
+
+		// props.h is stale (the history entry recorded the placeholder height), but
+		// the effective height and the geometry/selection bounds should match the
+		// resolved short bookmark, not the 320px placeholder.
+		expect(getBookmarkShapeHeight(editor, redone)).toBe(shortHeight)
+		expect(editor.getShapeGeometry(redone.id).bounds.height).toBe(shortHeight)
+	})
 })

package/src/test/commands/__snapshots__/getSvgString.test.ts.snap

@@ -94,7 +94,7 @@ exports[`Matches a snapshot > Basic SVG 1`] = `
           xmlns="http://www.w3.org/1999/xhtml"
         >
           <div
-            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline); tab-size: var(--tl-tab-size, 2);"
+            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 30px; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline); tab-size: var(--tl-tab-size, 2);"
           >
             <p
               dir="auto"
@@ -233,7 +233,7 @@ exports[`Returns all shapes when no ids are provided > All shapes 1`] = `
           xmlns="http://www.w3.org/1999/xhtml"
         >
           <div
-            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 1.35; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline); tab-size: var(--tl-tab-size, 2);"
+            style="font-size: 22px; color: rgb(29, 29, 29); line-height: 30px; text-align: center; width: 100%; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-wrap; text-shadow: var(--tl-text-outline); tab-size: var(--tl-tab-size, 2);"
           >
             <p
               dir="auto"

package/src/test/commands/clipboardCallbacks.test.ts

@@ -116,7 +116,9 @@ describe('handleNativeOrMenuCopy', () => {
 				writeText: vi.fn(),
 			},
 		})
-		globalThis.ClipboardItem = vi.fn((payload: any) => payload) as any
+		globalThis.ClipboardItem = vi.fn(function (payload: any) {
+			return payload
+		}) as any
 		return written
 	}
 

package/src/test/commands/getSvgString.test.ts

@@ -136,3 +136,33 @@ it('Accepts a background option', async () => {
 	)
 	expect(svg2.style.backgroundColor).toBe('transparent')
 })
+
+// Note: this test exports, which bumps a module-level id counter that the snapshot tests
+// above are sensitive to - so keep it after them.
+it('waits for required fonts to load before measuring the export', async () => {
+	// Text geometry is measured from the loaded font, so the export must not be measured
+	// until the fonts it uses have loaded.
+	let resolveFonts!: () => void
+	const fontsLoaded = new Promise<void>((resolve) => {
+		resolveFonts = resolve
+	})
+	const loadFonts = vi
+		.spyOn(editor.fonts, 'loadRequiredFontsForCurrentPage')
+		.mockReturnValue(fontsLoaded)
+
+	let resolved = false
+	const exportPromise = editor.getSvgString(editor.getSelectedShapeIds()).then((result) => {
+		resolved = true
+		return result
+	})
+
+	// let the export run up to the font-loading await
+	await new Promise((resolve) => setTimeout(resolve, 0))
+	expect(loadFonts).toHaveBeenCalled()
+	expect(resolved).toBe(false)
+
+	resolveFonts()
+	const svg = await exportPromise
+	expect(resolved).toBe(true)
+	expect(svg!.svg).toMatch(/^<svg/)
+})

package/src/test/commands/penmode.test.ts

@@ -1,4 +1,4 @@
-import { Vec } from '@tldraw/editor'
+import { TLDrawShape, Vec } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -27,3 +27,99 @@ it('ignores touch events while in pen mode', async () => {
 
 	expect(editor.getCurrentPageShapes().length).toBe(0)
 })
+
+describe('auto-entering pen mode', () => {
+	it('auto-enables pen mode for direct-display pen input', () => {
+		expect(editor.getInstanceState().isPenMode).toBe(false)
+		editor.pointerDown(100, 100, { isPen: true, isPenDirect: true })
+		expect(editor.getInstanceState().isPenMode).toBe(true)
+	})
+
+	it('does not auto-enable pen mode for indirect pen input', () => {
+		expect(editor.getInstanceState().isPenMode).toBe(false)
+		// An indirect desktop tablet stylus (e.g. a Wacom Intuos) still reports as a pen, but should
+		// not flip the editor into pen mode.
+		editor.pointerDown(100, 100, { isPen: true, isPenDirect: false })
+		expect(editor.getInstanceState().isPenMode).toBe(false)
+	})
+
+	it('still draws with indirect pen input without entering pen mode', () => {
+		editor.setCurrentTool('draw')
+		editor.pointerDown(100, 100, { isPen: true, isPenDirect: false })
+		editor.pointerMove(110, 110, { isPen: true, isPenDirect: false })
+		editor.pointerMove(120, 120, { isPen: true, isPenDirect: false })
+		editor.pointerUp(120, 120, { isPen: true, isPenDirect: false })
+
+		expect(editor.getInstanceState().isPenMode).toBe(false)
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+	})
+
+	it('ignores non-pen input once pen mode has been enabled', () => {
+		editor.setCurrentTool('draw')
+		// A direct-display pen enables pen mode.
+		editor.pointerDown(300, 300, { isPen: true, isPenDirect: true })
+		editor.pointerUp(300, 300, { isPen: true, isPenDirect: true })
+		expect(editor.getInstanceState().isPenMode).toBe(true)
+
+		const shapeCount = editor.getCurrentPageShapes().length
+
+		// A subsequent touch (non-pen) is ignored while in pen mode.
+		editor.pointerDown(100, 100, { isPen: false })
+		editor.pointerMove(120, 120, { isPen: false })
+		editor.pointerUp(120, 120, { isPen: false })
+		expect(editor.getCurrentPageShapes().length).toBe(shapeCount)
+	})
+})
+
+describe('forgiving palm touches when entering pen mode', () => {
+	it('does not connect a palm touch to the stylus stroke', () => {
+		editor.setCurrentTool('draw')
+		expect(editor.getInstanceState().isPenMode).toBe(false)
+
+		// A palm rests on the canvas first (not a pen, pen mode is still off)
+		editor.pointerDown(100, 100, { isPen: false })
+		editor.expectToBeIn('draw.drawing')
+
+		// Then the stylus lands, which switches the editor into pen mode
+		editor.pointerDown(300, 300, { isPen: true })
+		expect(editor.getInstanceState().isPenMode).toBe(true)
+
+		// The stylus draws its stroke
+		editor.pointerMove(310, 310, { isPen: true })
+		editor.pointerMove(320, 320, { isPen: true })
+		editor.pointerUp(320, 320, { isPen: true })
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const shape = editor.getCurrentPageShapes()[0] as TLDrawShape
+
+		// The stroke should begin where the stylus landed, not at the palm point.
+		const bounds = editor.getShapePageBounds(shape.id)!
+		expect(bounds.minX).toBeGreaterThan(200)
+		expect(bounds.minY).toBeGreaterThan(200)
+	})
+
+	it('forgives a palm touch that was already dragging before the stylus lands', () => {
+		editor.setCurrentTool('draw')
+
+		// A palm rests on the canvas and drags a little before the stylus arrives
+		editor.pointerDown(100, 100, { isPen: false })
+		editor.pointerMove(120, 120, { isPen: false })
+		editor.pointerMove(140, 140, { isPen: false })
+		editor.expectToBeIn('draw.drawing')
+
+		// The stylus lands, switching into pen mode and forgiving the palm stroke
+		editor.pointerDown(300, 300, { isPen: true })
+		expect(editor.getInstanceState().isPenMode).toBe(true)
+
+		editor.pointerMove(310, 310, { isPen: true })
+		editor.pointerMove(320, 320, { isPen: true })
+		editor.pointerUp(320, 320, { isPen: true })
+
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const shape = editor.getCurrentPageShapes()[0] as TLDrawShape
+
+		const bounds = editor.getShapePageBounds(shape.id)!
+		expect(bounds.minX).toBeGreaterThan(200)
+		expect(bounds.minY).toBeGreaterThan(200)
+	})
+})

package/src/test/commands/setCamera.test.ts

@@ -428,6 +428,18 @@ describe('CameraOptions.panSpeed', () => {
 		expect(editor.getCamera()).toMatchObject({ x: 5, y: 10, z: 1 })
 	})
 
+	it('Does not zoom when spacebar panning momentum is applied on release', () => {
+		editor
+			.dispatch({ ...keyBoardEvent, key: ' ', code: 'Space' })
+			.pointerDown(0, 0)
+			.pointerMove(50, 50)
+
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
+		editor.pointerUp().forceTick()
+
+		expect(editor.getCamera().z).toBe(1)
+	})
+
 	it('Does not affect edge scroll panning', () => {
 		const shapeId = createShapeId()
 		const viewportScreenBounds = editor.getViewportScreenBounds()

package/src/test/dragFromToolbar.test.ts

@@ -0,0 +1,67 @@
+import { b64Vecs, TLPointerEventInfo } from '@tldraw/editor'
+import { onDragFromToolbarToCreateShape } from '../lib/ui/hooks/useTools'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+function dragInfo(): TLPointerEventInfo {
+	return {
+		type: 'pointer',
+		target: 'canvas',
+		name: 'pointer_move',
+		point: { x: 50, y: 50, z: 0.5 },
+		shiftKey: false,
+		altKey: false,
+		ctrlKey: false,
+		metaKey: false,
+		accelKey: false,
+		pointerId: 1,
+		button: 0,
+		isPen: false,
+	}
+}
+
+describe('onDragFromToolbarToCreateShape', () => {
+	it('masks the toolbar with the created shape type by default', () => {
+		onDragFromToolbarToCreateShape(editor, dragInfo(), {
+			createShape: (id) => editor.createShape({ id, type: 'geo' }),
+		})
+
+		// while dragging, the toolbar shows the dragged shape's tool as active
+		expect(editor.getCurrentToolId()).toBe('geo')
+	})
+
+	it('masks the toolbar with toolId when the shape type differs from the source tool', () => {
+		// reproduces #9221: dragging a `draw` shape out from the select tool should keep
+		// the select tool highlighted, not the draw (pen) tool.
+		onDragFromToolbarToCreateShape(editor, dragInfo(), {
+			maskedToolId: 'select',
+			createShape: (id) =>
+				editor.createShape({
+					id,
+					type: 'draw',
+					props: {
+						segments: [
+							{
+								type: 'free',
+								path: b64Vecs.encodePoints([
+									{ x: 0, y: 0, z: 0.5 },
+									{ x: 10, y: 10, z: 0.5 },
+								]),
+							},
+						],
+					},
+				}),
+		})
+
+		expect(editor.getCurrentToolId()).toBe('select')
+	})
+})