tldraw 4.1.0-canary.27316c511408 → 4.1.0-canary.291aa5ae529a

package/src/lib/shapes/embed/EmbedShapeUtil.tsx

@@ -3,6 +3,7 @@
 import {
 	BaseBoxShapeUtil,
 	HTMLContainer,
+	Rectangle2d,
 	TLEmbedShape,
 	TLEmbedShapeProps,
 	TLResizeInfo,
@@ -24,6 +25,8 @@ import {
 	embedShapePermissionDefaults,
 } from '../../defaultEmbedDefinitions'
 import { TLEmbedResult, getEmbedInfo } from '../../utils/embeds/embeds'
+import { BookmarkIndicatorComponent, BookmarkShapeComponent } from '../bookmark/BookmarkShapeUtil'
+import { BOOKMARK_JUST_URL_HEIGHT, BOOKMARK_WIDTH } from '../bookmark/bookmarks'
 import { getRotatedBoxShadow } from '../shared/rotated-box-shadow'
 
 const getSandboxPermissions = (permissions: TLEmbedShapePermissions) => {
@@ -82,6 +85,18 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 		}
 	}
 
+	override getGeometry(shape: TLEmbedShape) {
+		const embedInfo = this.getEmbedDefinition(shape.props.url)
+		if (!embedInfo?.definition) {
+			return new Rectangle2d({
+				width: BOOKMARK_WIDTH,
+				height: BOOKMARK_JUST_URL_HEIGHT,
+				isFilled: true,
+			})
+		}
+		return super.getGeometry(shape)
+	}
+
 	override isAspectRatioLocked(shape: TLEmbedShape) {
 		const embedInfo = this.getEmbedDefinition(shape.props.url)
 		return embedInfo?.definition.isAspectRatioLocked ?? false
@@ -206,20 +221,31 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 							background: embedInfo?.definition.backgroundColor,
 						}}
 					/>
-				) : null}
+				) : (
+					<BookmarkShapeComponent
+						url={url}
+						h={h}
+						rotation={pageRotation}
+						assetId={null}
+						showImageContainer={false}
+					/>
+				)}
 			</HTMLContainer>
 		)
 	}
 
 	override indicator(shape: TLEmbedShape) {
 		const embedInfo = this.getEmbedDefinition(shape.props.url)
-		return (
+
+		return embedInfo?.definition ? (
 			<rect
 				width={toDomPrecision(shape.props.w)}
 				height={toDomPrecision(shape.props.h)}
 				rx={embedInfo?.definition.overrideOutlineRadius ?? 8}
 				ry={embedInfo?.definition.overrideOutlineRadius ?? 8}
 			/>
+		) : (
+			<BookmarkIndicatorComponent w={BOOKMARK_WIDTH} h={BOOKMARK_JUST_URL_HEIGHT} />
 		)
 	}
 	override getInterpolatedProps(

package/src/lib/shapes/line/LineShapeUtil.tsx

@@ -48,6 +48,9 @@ export class LineShapeUtil extends ShapeUtil<TLLineShape> {
 	override hideSelectionBoundsBg() {
 		return true
 	}
+	override hideInMinimap() {
+		return true
+	}
 
 	override getDefaultProps(): TLLineShape['props'] {
 		const [start, end] = getIndices(2)

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -86,6 +86,80 @@ describe('When in idle state', () => {
 		editor.cancel()
 		editor.expectToBeIn('select.idle')
 	})
+
+	it('starts editing selected text shape on Enter key', () => {
+		// Create a text shape using the same method as other tests
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+
+		// Update the text shape with some content
+		editor.updateShapes<TLTextShape>([
+			{
+				...editor.getCurrentPageShapes()[0]!,
+				type: 'text',
+				props: { richText: toRichText('Hello') },
+			},
+		])
+
+		// Exit editing mode
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Verify the text shape exists and is selected
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const textShape = editor.getCurrentPageShapes()[0]
+		expect(textShape.type).toBe('text')
+		editor.setSelectedShapes([textShape])
+
+		// Switch to text tool and press Enter
+		editor.setCurrentTool('text')
+		editor.expectToBeIn('text.idle')
+		editor.keyDown('Enter')
+
+		// Should transition to editing the selected text shape
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getEditingShapeId()).toBe(textShape.id)
+	})
+
+	it('starts editing selected text shape on numpad Enter key', () => {
+		// Create a text shape using the same method as other tests
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+
+		// Update the text shape with some content
+		editor.updateShapes<TLTextShape>([
+			{
+				...editor.getCurrentPageShapes()[0]!,
+				type: 'text',
+				props: { richText: toRichText('Hello') },
+			},
+		])
+
+		// Exit editing mode
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Verify the text shape exists and is selected
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const textShape = editor.getCurrentPageShapes()[0]
+		expect(textShape.type).toBe('text')
+		editor.setSelectedShapes([textShape])
+
+		// Switch to text tool and press numpad Enter
+		editor.setCurrentTool('text')
+		editor.expectToBeIn('text.idle')
+		editor.keyDown('Enter', { code: 'NumpadEnter' })
+
+		// Should transition to editing the selected text shape
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getEditingShapeId()).toBe(textShape.id)
+	})
 })
 
 describe('When in the pointing state', () => {

package/src/lib/tools/SelectTool/childStates/Crop/children/Idle.ts

@@ -143,7 +143,7 @@ export class Idle extends StateNode {
 	}
 
 	override onKeyUp(info: TLKeyboardEventInfo) {
-		switch (info.code) {
+		switch (info.key) {
 			case 'Enter': {
 				this.editor.setCroppingShape(null)
 				this.editor.setCurrentTool('select.idle', {})

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -12,6 +12,7 @@ import {
 	snapAngle,
 	sortByIndex,
 	structuredClone,
+	warnOnce,
 } from '@tldraw/editor'
 import { ArrowShapeUtil } from '../../../shapes/arrow/ArrowShapeUtil'
 import { clearArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
@@ -294,7 +295,18 @@ export class DraggingHandle extends StateNode {
 
 		let nextHandle = { ...initialHandle, x: point.x, y: point.y }
 
-		if (initialHandle.canSnap && (isSnapMode ? !ctrlKey : ctrlKey)) {
+		let canSnap = false
+		// eslint-disable-next-line @typescript-eslint/no-deprecated
+		if (initialHandle.canSnap && initialHandle.snapType) {
+			warnOnce(
+				'canSnap is deprecated. Cannot use both canSnap and snapType together - snapping disabled. Please use only snapType.'
+			)
+		} else {
+			// eslint-disable-next-line @typescript-eslint/no-deprecated
+			canSnap = initialHandle.canSnap || initialHandle.snapType !== undefined
+		}
+
+		if (canSnap && (isSnapMode ? !ctrlKey : ctrlKey)) {
 			// We're snapping
 			const pageTransform = editor.getShapePageTransform(shape.id)
 			if (!pageTransform) throw Error('Expected a page transform')

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -516,7 +516,7 @@ export class Idle extends StateNode {
 	}
 
 	override onKeyUp(info: TLKeyboardEventInfo) {
-		switch (info.code) {
+		switch (info.key) {
 			case 'Enter': {
 				// Because Enter onKeyDown can happen outside the canvas (but then focus the canvas potentially),
 				// we need to check if the canvas was initially selecting something before continuing.

package/src/lib/ui/components/Minimap/MinimapManager.ts

@@ -249,6 +249,12 @@ export class MinimapManager {
 
 			const len = geometry.length
 
+			const shape = this.editor.getShape(shapeId)
+			if (shape) {
+				const shapeUtil = this.editor.getShapeUtil(shape.type)
+				if (shapeUtil.hideInMinimap?.(shape)) continue
+			}
+
 			if (selectedShapes.has(shapeId)) {
 				appendVertices(this.gl.selectedShapes, selectedShapeOffset, geometry)
 				selectedShapeOffset += len

package/src/lib/ui/components/SharePanel/PeopleMenu.tsx

@@ -1,6 +1,8 @@
 import { useContainer, useEditor, usePeerIds, useValue } from '@tldraw/editor'
 import { Popover as _Popover } from 'radix-ui'
 import { ReactNode } from 'react'
+import { PORTRAIT_BREAKPOINT } from '../../constants'
+import { useBreakpoint } from '../../context/breakpoints'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { PeopleMenuAvatar } from './PeopleMenuAvatar'
@@ -25,6 +27,8 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 	const userName = useValue('user', () => editor.user.getName(), [editor])
 
 	const [isOpen, onOpenChange] = useMenuIsOpen('people menu')
+	const breakpoint = useBreakpoint()
+	const maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5
 
 	if (!userIds.length) return null
 
@@ -33,7 +37,7 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 			<_Popover.Trigger dir="ltr" asChild>
 				<button className="tlui-people-menu__avatars-button" title={msg('people-menu.title')}>
 					<div className="tlui-people-menu__avatars">
-						{userIds.slice(-5).map((userId) => (
+						{userIds.slice(-maxAvatars).map((userId) => (
 							<PeopleMenuAvatar key={userId} userId={userId} />
 						))}
 						{userIds.length > 0 && (
@@ -46,7 +50,7 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 								{userName?.[0] ?? ''}
 							</div>
 						)}
-						{userIds.length > 5 && <PeopleMenuMore count={userIds.length - 5} />}
+						{userIds.length > maxAvatars && <PeopleMenuMore count={userIds.length - maxAvatars} />}
 					</div>
 				</button>
 			</_Popover.Trigger>

package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx

@@ -132,7 +132,7 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 				<TldrawUiToolbarToggleGroup
 					data-testid={`style.${uiType}`}
 					type="single"
-					value={value.type === 'shared' ? value.value : undefined}
+					value={value.type === 'shared' ? value.value : null}
 					asChild
 				>
 					<Layout>

package/src/lib/ui/context/actions.tsx

@@ -5,6 +5,7 @@ import {
 	Editor,
 	HALF_PI,
 	PageRecordType,
+	Result,
 	TLBookmarkShape,
 	TLEmbedShape,
 	TLFrameShape,
@@ -24,6 +25,7 @@ import {
 	useMaybeEditor,
 } from '@tldraw/editor'
 import * as React from 'react'
+import { createBookmarkFromUrl } from '../../shapes/bookmark/bookmarks'
 import { fitFrameToContent, removeFrame } from '../../utils/frames/frames'
 import { generateShapeAnnouncementMessage } from '../components/A11y'
 import { EditLinkDialog } from '../components/EditLinkDialog'
@@ -387,45 +389,39 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 			{
 				id: 'convert-to-bookmark',
 				label: 'action.convert-to-bookmark',
-				onSelect(source) {
+				async onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					editor.run(() => {
-						trackEvent('convert-to-bookmark', { source })
-						const shapes = editor.getSelectedShapes()
+					trackEvent('convert-to-bookmark', { source })
+					const shapes = editor.getSelectedShapes()
 
-						const createList: TLShapePartial[] = []
-						const deleteList: TLShapeId[] = []
-						for (const shape of shapes) {
-							if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
-								continue
+					const markId = editor.markHistoryStoppingPoint('convert shapes to bookmark')
 
-							const newPos = new Vec(shape.x, shape.y)
-							newPos.rot(-shape.rotation)
-							newPos.add(new Vec(shape.props.w / 2 - 300 / 2, shape.props.h / 2 - 320 / 2)) // see bookmark shape util
-							newPos.rot(shape.rotation)
-							const partial: TLShapePartial<TLBookmarkShape> = {
-								id: createShapeId(),
-								type: 'bookmark',
-								rotation: shape.rotation,
-								x: newPos.x,
-								y: newPos.y,
-								opacity: 1,
-								props: {
-									url: shape.props.url,
-								},
-							}
+					const creationPromises: Promise<Result<any, any>>[] = []
 
-							createList.push(partial)
-							deleteList.push(shape.id)
-						}
+					for (const shape of shapes) {
+						if (!shape || !editor.isShapeOfType<TLEmbedShape>(shape, 'embed') || !shape.props.url)
+							continue
 
-						editor.markHistoryStoppingPoint('convert shapes to bookmark')
+						const center = editor.getShapePageBounds(shape)?.center
 
-						// Should be able to create the shape since we're about to delete the other other
-						editor.deleteShapes(deleteList)
-						editor.createShapes(createList)
+						if (!center) continue
+						editor.deleteShapes([shape.id])
+
+						creationPromises.push(
+							createBookmarkFromUrl(editor, { url: shape.props.url, center }).then((res) => {
+								if (!res.ok) {
+									throw new Error(res.error)
+								}
+								return res
+							})
+						)
+					}
+
+					await Promise.all(creationPromises).catch((error) => {
+						editor.bailToMark(markId)
+						console.error(error)
 					})
 				},
 			},

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.1.0-canary.27316c511408'
+export const version = '4.1.0-canary.291aa5ae529a'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-09-29T15:23:45.797Z',
-	patch: '2025-09-29T15:23:45.797Z',
+	minor: '2025-10-14T14:47:38.579Z',
+	patch: '2025-10-14T14:47:38.579Z',
 }

package/src/lib/utils/embeds/embeds.test.ts

@@ -275,6 +275,14 @@ const MATCH_URL_TEST_URLS: (MatchUrlTestNoMatchDef | MatchUrlTestMatchDef)[] = [
 			embedUrl: `https://replit.com/@omar/Blob-Generator?embed=true`,
 		},
 	},
+	{
+		url: 'https://replit.com/@omar/Blob-Generator#index.html',
+		match: true,
+		output: {
+			type: 'replit',
+			embedUrl: `https://replit.com/@omar/Blob-Generator?embed=true#index.html`,
+		},
+	},
 	{
 		url: 'https://replit.com/foobar',
 		match: false,
@@ -347,23 +355,6 @@ const MATCH_URL_TEST_URLS: (MatchUrlTestNoMatchDef | MatchUrlTestMatchDef)[] = [
 		url: 'https://vimeo.com/foobar',
 		match: false,
 	},
-	// excalidraw
-	{
-		url: 'https://excalidraw.com/#room=asdkjashdkjhaskdjh,sadkjhakjshdkjahd',
-		match: true,
-		output: {
-			type: 'excalidraw',
-			embedUrl: `https://excalidraw.com/#room=asdkjashdkjhaskdjh,sadkjhakjshdkjahd`,
-		},
-	},
-	{
-		url: 'https://excalidraw.com',
-		match: false,
-	},
-	{
-		url: 'https://excalidraw.com/help',
-		match: false,
-	},
 	//desmos
 	{
 		url: 'https://www.desmos.com/calculator/js9hryvejc',
@@ -599,6 +590,14 @@ const MATCH_EMBED_TEST_URLS: (MatchEmbedTestMatchDef | MatchEmbedTestNoMatchDef)
 			url: `https://replit.com/@omar/Blob-Generator`,
 		},
 	},
+	{
+		embedUrl: 'https://replit.com/@omar/Blob-Generator?embed=true#index.html',
+		match: true,
+		output: {
+			type: 'replit',
+			url: `https://replit.com/@omar/Blob-Generator#index.html`,
+		},
+	},
 	{
 		embedUrl: 'https://replit.com/@omar/Blob-Generator',
 		match: false,
@@ -671,23 +670,6 @@ const MATCH_EMBED_TEST_URLS: (MatchEmbedTestMatchDef | MatchEmbedTestNoMatchDef)
 		embedUrl: 'https://vimeo.com/foobar',
 		match: false,
 	},
-	// excalidraw
-	{
-		embedUrl: 'https://excalidraw.com/#room=asdkjashdkjhaskdjh,sadkjhakjshdkjahd',
-		match: true,
-		output: {
-			type: 'excalidraw',
-			url: `https://excalidraw.com/#room=asdkjashdkjhaskdjh,sadkjhakjshdkjahd`,
-		},
-	},
-	{
-		embedUrl: 'https://excalidraw.com',
-		match: false,
-	},
-	{
-		embedUrl: 'https://excalidraw.com/help',
-		match: false,
-	},
 	// desmos
 	{
 		embedUrl: 'https://www.desmos.com/calculator/js9hryvejc?embed',

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 })
+			})
+		})
 	})
 })