tldraw 3.15.0-canary.d48536dd9c3c → 3.15.0-canary.d4fb9a9627c9

package/src/lib/ui/components/primitives/Button/TldrawUiButtonIcon.tsx

@@ -1,8 +1,8 @@
-import { TldrawUiIcon } from '../TldrawUiIcon'
+import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
 
 /** @public */
 export interface TLUiButtonIconProps {
-	icon: string
+	icon: string | TLUiIconJsx
 	small?: boolean
 	invertIcon?: boolean
 }

package/src/lib/ui/components/primitives/TldrawUiIcon.tsx

@@ -1,11 +1,14 @@
 import classNames from 'classnames'
-import { memo, useLayoutEffect, useRef } from 'react'
+import { cloneElement, memo, ReactElement, useLayoutEffect, useRef } from 'react'
 import { useAssetUrls } from '../../context/asset-urls'
 import { TLUiIconType } from '../../icon-types'
 
+/** @public */
+export type TLUiIconJsx = ReactElement<React.HTMLAttributes<HTMLDivElement>>
+
 /** @public */
 export interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
-	icon: TLUiIconType | Exclude<string, TLUiIconType>
+	icon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx
 	label: string
 	small?: boolean
 	color?: string
@@ -24,6 +27,41 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 	className,
 	...props
 }: TLUiIconProps) {
+	if (typeof icon === 'string') {
+		return (
+			<TldrawUIIconInner
+				label={label}
+				small={small}
+				invertIcon={invertIcon}
+				icon={icon}
+				color={color}
+				className={className}
+				{...props}
+			/>
+		)
+	}
+
+	return cloneElement(icon, {
+		...props,
+		className: classNames({ 'tlui-icon__small': small }, className, icon.props.className),
+		'aria-label': label,
+		style: {
+			color,
+			transform: invertIcon ? 'scale(-1, 1)' : undefined,
+			...icon.props.style,
+		},
+	})
+})
+
+function TldrawUIIconInner({
+	label,
+	small,
+	invertIcon,
+	icon,
+	color,
+	className,
+	...props
+}: TLUiIconProps & { icon: TLUiIconType | Exclude<string, TLUiIconType> }) {
 	const assetUrls = useAssetUrls()
 	const asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']
 	const ref = useRef<HTMLDivElement>(null)
@@ -69,4 +107,4 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 			}}
 		/>
 	)
-})
+}

package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx

@@ -5,7 +5,7 @@ import { TLUiEventSource } from '../../../context/events'
 import { useReadonly } from '../../../hooks/useReadonly'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
-import { TldrawUiIcon } from '../TldrawUiIcon'
+import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
@@ -14,7 +14,7 @@ export interface TLUiMenuCheckboxItemProps<
 	TranslationKey extends string = string,
 	IconType extends string = string,
 > {
-	icon?: IconType
+	icon?: IconType | TLUiIconJsx
 	id: string
 	kbd?: string
 	title?: string

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -12,6 +12,7 @@ import { TldrawUiButton } from '../Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'
 import { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'
 import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
+import { TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { TldrawUiToolbarButton } from '../TldrawUiToolbar'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
@@ -25,11 +26,11 @@ export interface TLUiMenuItemProps<
 	/**
 	 * The icon to display on the item. Icons are only shown in certain menu types.
 	 */
-	icon?: IconType
+	icon?: IconType | TLUiIconJsx
 	/**
 	 * An icon to display to the left of the menu item.
 	 */
-	iconLeft?: IconType
+	iconLeft?: IconType | TLUiIconJsx
 	/**
 	 * The keyboard shortcut to display on the item.
 	 */

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

@@ -43,7 +43,7 @@ export interface TLUiActionItem<
 	TransationKey extends string = string,
 	IconType extends string = string,
 > {
-	icon?: IconType
+	icon?: IconType | React.ReactElement
 	id: string
 	kbd?: string
 	label?: TransationKey | { [key: string]: TransationKey }

package/src/lib/ui/hooks/useTools.tsx

@@ -1,6 +1,7 @@
 import { Editor, GeoShapeGeoStyle, useMaybeEditor } from '@tldraw/editor'
 import * as React from 'react'
 import { EmbedDialog } from '../components/EmbedDialog'
+import { TLUiIconJsx } from '../components/primitives/TldrawUiIcon'
 import { useA11y } from '../context/a11y'
 import { TLUiEventSource, useUiEvents } from '../context/events'
 import { TLUiIconType } from '../icon-types'
@@ -16,7 +17,7 @@ export interface TLUiToolItem<
 	id: string
 	label: TranslationKey
 	shortcutsLabel?: TranslationKey
-	icon: IconType
+	icon: IconType | TLUiIconJsx
 	onSelect(source: TLUiEventSource): void
 	/**
 	 * The keyboard shortcut for this tool. This is a string that can be a single key,

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 = '3.15.0-canary.d48536dd9c3c'
+export const version = '3.15.0-canary.d4fb9a9627c9'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-16T14:24:26.375Z',
-	patch: '2025-07-16T14:24:26.375Z',
+	minor: '2025-07-29T08:36:55.991Z',
+	patch: '2025-07-29T08:36:55.991Z',
 }

package/src/lib/utils/tldr/buildFromV1Document.ts

@@ -562,6 +562,7 @@ export function buildFromV1Document(editor: Editor, _document: unknown) {
 										y: point.y,
 									},
 									isPrecise: point.x !== 0.5 || point.y !== 0.5,
+									isCreatingShape: true,
 								})
 
 								if (change) {

package/src/test/commands/deletePage.test.ts

@@ -1,4 +1,4 @@
-import { PageRecordType } from '@tldraw/editor'
+import { PageRecordType, createShapeId } from '@tldraw/editor'
 import { TestEditor } from '../TestEditor'
 
 let editor: TestEditor
@@ -76,4 +76,87 @@ describe('deletePage', () => {
 		expect(editor.getCurrentPageId()).not.toBe(currentPageId)
 		expect(editor.getCurrentPageId()).toBe(editor.getPages()[0].id)
 	})
+
+	it('deletes all shapes that belong to the deleted page', () => {
+		// Create a second page
+		const page2Id = PageRecordType.createId('page2')
+		editor.createPage({ name: 'Page 2', id: page2Id })
+
+		// Switch to the second page
+		editor.setCurrentPage(page2Id)
+
+		// Add some shapes to the second page
+		const shape1Id = createShapeId('shape1')
+		const shape2Id = createShapeId('shape2')
+		const shape3Id = createShapeId('shape3')
+
+		editor.createShape({ id: shape1Id, type: 'text', x: 100, y: 100 })
+		editor.createShape({ id: shape2Id, type: 'geo', x: 200, y: 200, props: { geo: 'rectangle' } })
+		editor.createShape({ id: shape3Id, type: 'geo', x: 300, y: 300, props: { geo: 'ellipse' } })
+
+		// Verify shapes were created and belong to the second page
+		expect(editor.getShape(shape1Id)).toBeDefined()
+		expect(editor.getShape(shape2Id)).toBeDefined()
+		expect(editor.getShape(shape3Id)).toBeDefined()
+		expect(editor.getShape(shape1Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape2Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape3Id)?.parentId).toBe(page2Id)
+
+		// Delete the second page
+		editor.deletePage(page2Id)
+
+		// Verify the page was deleted
+		expect(editor.getPages().length).toBe(1)
+		expect(editor.getPages()[0].id).not.toBe(page2Id)
+
+		// Verify all shapes that belonged to the deleted page were also deleted
+		expect(editor.getShape(shape1Id)).toBeUndefined()
+		expect(editor.getShape(shape2Id)).toBeUndefined()
+		expect(editor.getShape(shape3Id)).toBeUndefined()
+	})
+
+	it('deletes locked shapes that belong to the deleted page', () => {
+		// Create a second page
+		const page2Id = PageRecordType.createId('page2')
+		editor.createPage({ name: 'Page 2', id: page2Id })
+
+		// Switch to the second page
+		editor.setCurrentPage(page2Id)
+
+		// Add some shapes to the second page
+		const shape1Id = createShapeId('shape1')
+		const shape2Id = createShapeId('shape2')
+		const shape3Id = createShapeId('shape3')
+
+		editor.createShape({ id: shape1Id, type: 'text', x: 100, y: 100 })
+		editor.createShape({ id: shape2Id, type: 'geo', x: 200, y: 200, props: { geo: 'rectangle' } })
+		editor.createShape({ id: shape3Id, type: 'geo', x: 300, y: 300, props: { geo: 'ellipse' } })
+
+		// Lock some of the shapes
+		editor.updateShape({ id: shape1Id, type: 'text', isLocked: true })
+		editor.updateShape({ id: shape2Id, type: 'geo', isLocked: true })
+
+		// Verify shapes were created and belong to the second page
+		expect(editor.getShape(shape1Id)).toBeDefined()
+		expect(editor.getShape(shape2Id)).toBeDefined()
+		expect(editor.getShape(shape3Id)).toBeDefined()
+		expect(editor.getShape(shape1Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape2Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape3Id)?.parentId).toBe(page2Id)
+		expect(editor.getShape(shape1Id)?.isLocked).toBe(true)
+		expect(editor.getShape(shape2Id)?.isLocked).toBe(true)
+		expect(editor.getShape(shape3Id)?.isLocked).toBe(false)
+
+		// Delete the second page
+		editor.deletePage(page2Id)
+
+		// Verify the page was deleted
+		expect(editor.getPages().length).toBe(1)
+		expect(editor.getPages()[0].id).not.toBe(page2Id)
+
+		// Verify all shapes that belonged to the deleted page were also deleted, including locked ones
+		expect(editor.getShape(shape1Id)).toBeUndefined()
+		expect(editor.getShape(shape2Id)).toBeUndefined()
+		expect(editor.getShape(shape3Id)).toBeUndefined()
+	})
 })