tldraw 4.1.0-canary.3766a107225c → 4.1.0-canary.37739a2e6894

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

@@ -19,14 +19,20 @@ export class Rotating extends StateNode {
 
 	snapshot = {} as TLRotationSnapshot
 
-	info = {} as Extract<TLPointerEventInfo, { target: 'selection' }> & { onInteractionEnd?: string }
+	info = {} as Extract<TLPointerEventInfo, { target: 'selection' }> & {
+		onInteractionEnd?: string | (() => void)
+	}
 
 	markId = ''
 
-	override onEnter(info: TLPointerEventInfo & { target: 'selection'; onInteractionEnd?: string }) {
+	override onEnter(
+		info: TLPointerEventInfo & { target: 'selection'; onInteractionEnd?: string | (() => void) }
+	) {
 		// Store the event information
 		this.info = info
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 
 		this.markId = this.editor.markHistoryStoppingPoint('rotate start')
 
@@ -121,11 +127,16 @@ export class Rotating extends StateNode {
 		})
 
 		this.editor.bailToMark(this.markId)
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)
-		} else {
-			this.parent.transition('idle', this.info)
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, this.info)
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle', this.info)
 	}
 
 	private complete() {
@@ -139,11 +150,16 @@ export class Rotating extends StateNode {
 			this.editor,
 			this.snapshot.shapeSnapshots.map((s) => s.shape.id)
 		)
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)
-		} else {
-			this.parent.transition('idle', this.info)
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd, this.info)
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle', this.info)
 	}
 
 	_getRotationFromPointerPosition({ snapToNearestDegree }: { snapToNearestDegree: boolean }) {

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

@@ -28,7 +28,7 @@ export type TranslatingInfo = TLPointerEventInfo & {
 	isCreating?: boolean
 	creatingMarkId?: string
 	onCreate?(): void
-	onInteractionEnd?: string
+	onInteractionEnd?: string | (() => void)
 }
 
 export class Translating extends StateNode {
@@ -59,7 +59,9 @@ export class Translating extends StateNode {
 		}
 
 		this.info = info
-		this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		if (typeof info.onInteractionEnd === 'string') {
+			this.parent.setCurrentToolIdMask(info.onInteractionEnd)
+		}
 		this.isCreating = isCreating
 
 		this.markId = ''
@@ -190,15 +192,24 @@ export class Translating extends StateNode {
 			this.snapshot.movingShapes.map((s) => s.id)
 		)
 
-		if (this.editor.getInstanceState().isToolLocked && this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd)
-		} else {
-			if (this.isCreating) {
-				this.onCreate?.(this.editor.getOnlySelectedShape())
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				if (this.editor.getInstanceState().isToolLocked) {
+					this.editor.setCurrentTool(onInteractionEnd)
+					return
+				}
 			} else {
-				this.parent.transition('idle')
+				onInteractionEnd()
+				return
 			}
 		}
+
+		if (this.isCreating) {
+			this.onCreate?.(this.editor.getOnlySelectedShape())
+		} else {
+			this.parent.transition('idle')
+		}
 	}
 
 	private cancel() {
@@ -214,11 +225,16 @@ export class Translating extends StateNode {
 		})
 
 		this.reset()
-		if (this.info.onInteractionEnd) {
-			this.editor.setCurrentTool(this.info.onInteractionEnd)
-		} else {
-			this.parent.transition('idle', this.info)
+		const { onInteractionEnd } = this.info
+		if (onInteractionEnd) {
+			if (typeof onInteractionEnd === 'string') {
+				this.editor.setCurrentTool(onInteractionEnd)
+			} else {
+				onInteractionEnd()
+			}
+			return
 		}
+		this.parent.transition('idle', this.info)
 	}
 
 	protected handleStart() {

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.3766a107225c'
+export const version = '4.1.0-canary.37739a2e6894'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-09-19T16:52:06.231Z',
-	patch: '2025-09-19T16:52:06.231Z',
+	minor: '2025-10-15T09:03:42.490Z',
+	patch: '2025-10-15T09:03:42.490Z',
 }

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