tldraw 4.1.0-canary.9c36de6e611c → 4.1.0-canary.a152954244d2

package/src/test/SelectTool.test.ts

@@ -648,3 +648,254 @@ test('right clicking a shape inside of a group does not focus the group if the g
 	editor.pointerUp(100, 100, { target: 'shape', button: 0, shape: editor.getShape(boxAId)! })
 	expect(editor.getFocusedGroupId()).toBe(groupId)
 })
+
+describe('when passing a function to onInteractionEnd', () => {
+	it('calls the function for cropping', () => {
+		const id = createShapeId('image')
+		editor.createShapes([
+			{
+				id,
+				type: 'image',
+				x: 100,
+				y: 100,
+				props: {
+					w: 1200,
+					h: 800,
+				},
+			},
+		])
+
+		editor.select(id)
+
+		const fn = vi.fn()
+		editor.setCurrentTool('select.cropping', {
+			handle: 'bottom_right',
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for pointing crop handle', () => {
+		const fn = vi.fn()
+		editor.setCurrentTool('select.crop.pointing_crop_handle', {
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for pointing arrow label', () => {
+		const fn = vi.fn()
+		const id = createShapeId('arrow')
+
+		const arrow = {
+			id,
+			type: 'arrow' as const,
+			x: 100,
+			y: 100,
+			props: {
+				richText: toRichText('Test Label'),
+				start: { x: 0, y: 0 },
+				end: { x: 100, y: 0 },
+			},
+		}
+
+		editor.createShapes<TLArrowShape>([arrow])
+
+		editor.setCurrentTool('select.pointing_arrow_label', {
+			shape: arrow,
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for pointing a resize handle', () => {
+		const fn = vi.fn()
+		editor.setCurrentTool('select.pointing_resize_handle', {
+			target: 'selection',
+			handle: 'bottom_right',
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for pointing a rotate handle', () => {
+		const fn = vi.fn()
+		editor.setCurrentTool('select.pointing_rotate_handle', {
+			target: 'selection',
+			handle: 'bottom_right_rotate',
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for resizing', () => {
+		const id = createShapeId('box')
+		editor.createShapes([
+			{
+				id,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+		])
+
+		editor.select(id)
+
+		const fn = vi.fn()
+		editor.setCurrentTool('select.resizing', {
+			target: 'selection',
+			handle: 'bottom_right',
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for translating', () => {
+		const id = createShapeId('box')
+		editor.createShapes([
+			{
+				id,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+		])
+		editor.select(id)
+
+		const fn = vi.fn()
+		editor.setCurrentTool('select.translating', {
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+})
+
+describe('when passing a string to onInteractionEnd', () => {
+	it('transitions to the tool for cropping', () => {
+		const id = createShapeId('image')
+		editor.createShapes([
+			{
+				id,
+				type: 'image',
+				x: 100,
+				y: 100,
+				props: {
+					w: 1200,
+					h: 800,
+				},
+			},
+		])
+
+		editor.select(id)
+
+		editor.setCurrentTool('select.cropping', {
+			handle: 'bottom_right',
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for pointing crop handle', () => {
+		editor.setCurrentTool('select.crop.pointing_crop_handle', {
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for pointing arrow label', () => {
+		const id = createShapeId('arrow')
+
+		const arrow = {
+			id,
+			type: 'arrow' as const,
+			x: 100,
+			y: 100,
+			props: {
+				richText: toRichText('Test Label'),
+				start: { x: 0, y: 0 },
+				end: { x: 100, y: 0 },
+			},
+		}
+
+		editor.createShapes<TLArrowShape>([arrow])
+
+		editor.setCurrentTool('select.pointing_arrow_label', {
+			shape: arrow,
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for pointing a resize handle', () => {
+		editor.setCurrentTool('select.pointing_resize_handle', {
+			target: 'selection',
+			handle: 'bottom_right',
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for pointing a rotate handle', () => {
+		editor.setCurrentTool('select.pointing_rotate_handle', {
+			target: 'selection',
+			handle: 'bottom_right_rotate',
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for resizing', () => {
+		const id = createShapeId('box')
+		editor.createShapes([
+			{
+				id,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+		])
+
+		editor.select(id)
+
+		editor.setCurrentTool('select.resizing', {
+			target: 'selection',
+			handle: 'bottom_right',
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for translating', () => {
+		const id = createShapeId('box')
+		editor.createShapes([
+			{
+				id,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+		])
+		editor.select(id)
+
+		editor.setCurrentTool('select.translating', {
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+})

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

@@ -1,5 +1,6 @@
 import { TLBookmarkShape, createShapeId } from '@tldraw/editor'
-import { getHumanReadableAddress } from '../lib/shapes/bookmark/BookmarkShapeUtil'
+import { vi } from 'vitest'
+import { createBookmarkFromUrl, getHumanReadableAddress } from '../lib/shapes/bookmark/bookmarks'
 import { TestEditor } from './TestEditor'
 
 let editor: TestEditor
@@ -74,12 +75,12 @@ describe('The URL formatter', () => {
 		const e = editor.getShape<TLBookmarkShape>(ids.e)!
 		const f = editor.getShape<TLBookmarkShape>(ids.f)!
 
-		expect(getHumanReadableAddress(a)).toBe('github.com')
-		expect(getHumanReadableAddress(b)).toBe('github.com')
-		expect(getHumanReadableAddress(c)).toBe('github.com')
-		expect(getHumanReadableAddress(d)).toBe('github.com')
-		expect(getHumanReadableAddress(e)).toBe('github.com')
-		expect(getHumanReadableAddress(f)).toBe('github.com')
+		expect(getHumanReadableAddress(a.props.url)).toBe('github.com')
+		expect(getHumanReadableAddress(b.props.url)).toBe('github.com')
+		expect(getHumanReadableAddress(c.props.url)).toBe('github.com')
+		expect(getHumanReadableAddress(d.props.url)).toBe('github.com')
+		expect(getHumanReadableAddress(e.props.url)).toBe('github.com')
+		expect(getHumanReadableAddress(f.props.url)).toBe('github.com')
 	})
 
 	it("Doesn't resize bookmarks", () => {
@@ -132,3 +133,124 @@ describe('The URL formatter', () => {
 		expect(newBookmark.props.h).toBe(320)
 	})
 })
+
+describe('createBookmarkFromUrl', () => {
+	it('creates a bookmark shape with unfurled metadata', async () => {
+		const url = 'https://example.com'
+		const center = { x: 100, y: 200 }
+
+		// Mock the asset creation to return a test asset
+		const mockAsset = {
+			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: {},
+		}
+
+		// Mock the getAssetForExternalContent method
+		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue(mockAsset)
+
+		const result = await createBookmarkFromUrl(editor, { url, center })
+
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+		expect(shape.type).toBe('bookmark')
+		expect(shape.props.url).toBe(url)
+		expect(shape.props.assetId).toBe('asset:test-asset-id')
+		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
+
+		// Verify the shape was created in the editor
+		const createdShape = editor.getShape(result.value.id)
+		expect(createdShape).toBeDefined()
+		expect(createdShape?.type).toBe('bookmark')
+
+		// Verify the asset was created
+		const createdAsset = editor.getAsset('asset:test-asset-id' as any)
+		expect(createdAsset).toBeDefined()
+		expect(createdAsset?.type).toBe('bookmark')
+	})
+
+	it('creates a bookmark shape with default center when no center provided', async () => {
+		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,
+			w: 1000,
+			h: 600,
+			center: viewportCenter,
+		} as any)
+
+		const mockAsset = {
+			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: '',
+				favicon: '',
+			},
+			meta: {},
+		}
+
+		vi.spyOn(editor, 'getAssetForExternalContent').mockResolvedValue(mockAsset)
+
+		const result = await createBookmarkFromUrl(editor, { url })
+
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+		expect(shape.x).toBe(viewportCenter.x - 150)
+		expect(shape.y).toBe(viewportCenter.y - 160)
+	})
+
+	it('handles asset creation failure gracefully', async () => {
+		const url = 'https://invalid-url.com'
+		const center = { x: 100, y: 200 }
+
+		// 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')
+
+		// Verify no shape was created
+		const shapes = editor.getCurrentPageShapes()
+		expect(shapes).toHaveLength(0)
+	})
+
+	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 })
+
+		assert(result.ok, 'Failed to create bookmark')
+		const shape = result.value
+		expect(shape.type).toBe('bookmark')
+		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()
+	})
+})

package/src/test/customSnapping.test.tsx

@@ -173,6 +173,7 @@ describe('custom handle snapping', () => {
 			handlePoints: VecModel[] | 'default'
 			selfSnapOutline: VecModel[] | 'default'
 			selfSnapPoints: VecModel[] | 'default'
+			handleSnapType?: 'point' | 'align'
 		}
 	>
 	class TestShapeUtil extends BaseBoxShapeUtil<TestShape> {
@@ -213,17 +214,23 @@ describe('custom handle snapping', () => {
 			}
 		}
 		override getHandles(shape: TestShape): TLHandle[] {
-			return [
-				{
-					id: 'handle',
-					label: 'handle',
-					type: 'vertex',
-					x: shape.props.ownHandle.x,
-					y: shape.props.ownHandle.y,
-					index: ZERO_INDEX_KEY,
-					canSnap: true,
-				},
-			]
+			const handle: TLHandle = {
+				id: 'handle',
+				label: 'handle',
+				type: 'vertex',
+				x: shape.props.ownHandle.x,
+				y: shape.props.ownHandle.y,
+				index: ZERO_INDEX_KEY,
+			}
+
+			if (shape.props.handleSnapType) {
+				handle.snapType = shape.props.handleSnapType
+			} else {
+				// eslint-disable-next-line @typescript-eslint/no-deprecated
+				handle.canSnap = true
+			}
+
+			return [handle]
 		}
 		override onHandleDrag(shape: TestShape, { handle }: TLHandleDragInfo<TestShape>) {
 			return { ...shape, props: { ...shape.props, ownHandle: { x: handle.x, y: handle.y } } }
@@ -495,5 +502,42 @@ describe('custom handle snapping', () => {
 				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 50 })
 			})
 		})
+
+		describe('with snapType set to align', () => {
+			beforeEach(() => {
+				editor.updateShape<TestShape>({
+					id: ids.test,
+					type: 'test',
+					props: {
+						selfSnapPoints: [
+							{ x: 20, y: 50 },
+							{ x: 60, y: 10 },
+						],
+						handleSnapType: 'align',
+					},
+				})
+			})
+
+			test('snaps to the y axis', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(18, 0, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(1)
+				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 0 })
+			})
+
+			test('snaps to the x axis', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(0, 48, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(1)
+				expect(ownHandlePosition()).toMatchObject({ x: 0, y: 50 })
+			})
+
+			test('snaps to both axes', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(18, 9, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(2)
+				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 10 })
+			})
+		})
 	})
 })

package/tldraw.css

@@ -1325,6 +1325,10 @@ input,
 	flex: 1;
 }
 
+.tl-bookmark__copy_container:has(.tl-bookmark__link:only-child) {
+	justify-content: center;
+}
+
 .tl-bookmark__heading,
 .tl-bookmark__description,
 .tl-bookmark__link {
@@ -1357,7 +1361,7 @@ input,
 	line-clamp: 3;
 	text-overflow: ellipsis;
 	display: -webkit-box;
-	color: var(--tl-color-text-2);
+	color: var(--tl-color-text-1);
 	margin: var(--tl-space-2) 0px;
 }
 
@@ -1369,11 +1373,12 @@ input,
 	font-size: 12px;
 	pointer-events: all;
 	display: flex;
-	color: var(--tl-color-text-2);
+	color: var(--tl-color-text-1);
 	align-items: center;
 	cursor: var(--tl-cursor-pointer);
 	width: fit-content;
 	max-width: 100%;
+	text-decoration: none;
 }
 
 .tl-bookmark__link > span {