tldraw 3.16.0-canary.a2491e00987a → 3.16.0-canary.a675c73ef29d

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

@@ -120,7 +120,6 @@ export function TldrawUiMenuItem<
 						type="menu"
 						data-testid={`${sourceId}.${id}`}
 						disabled={disabled}
-						title={titleStr}
 						onClick={(e) => {
 							if (noClose) {
 								preventDefault(e)
@@ -146,7 +145,6 @@ export function TldrawUiMenuItem<
 			return (
 				<_ContextMenu.Item
 					dir="ltr"
-					title={titleStr}
 					draggable={false}
 					className="tlui-button tlui-button__menu"
 					data-testid={`${sourceId}.${id}`}
@@ -168,20 +166,6 @@ export function TldrawUiMenuItem<
 				</_ContextMenu.Item>
 			)
 		}
-		case 'panel': {
-			return (
-				<TldrawUiButton
-					data-testid={`${sourceId}.${id}`}
-					type="menu"
-					title={titleStr}
-					disabled={disabled}
-					onClick={() => onSelect(sourceId)}
-				>
-					<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
-					{spinner ? <Spinner /> : icon && <TldrawUiButtonIcon icon={icon} />}
-				</TldrawUiButton>
-			)
-		}
 		case 'small-icons':
 		case 'icons': {
 			return (
@@ -229,7 +213,7 @@ export function TldrawUiMenuItem<
 						icon={icon}
 						onSelect={onSelect}
 						onDragStart={onDragStart}
-						labelToUse={labelToUse}
+						labelStr={labelStr}
 						titleStr={titleStr}
 						disabled={disabled}
 						isSelected={isSelected}
@@ -263,7 +247,7 @@ export function TldrawUiMenuItem<
 						icon={icon}
 						onSelect={onSelect}
 						onDragStart={onDragStart}
-						labelToUse={labelToUse}
+						labelStr={labelStr}
 						titleStr={titleStr}
 						disabled={disabled}
 						isSelected={isSelected}
@@ -332,8 +316,8 @@ function useDraggableEvents(
 				if (
 					distanceSq >
 					(editor.getInstanceState().isCoarsePointer
-						? editor.options.coarseDragDistanceSquared
-						: editor.options.dragDistanceSquared)
+						? editor.options.uiCoarseDragDistanceSquared
+						: editor.options.uiDragDistanceSquared)
 				) {
 					const screenSpaceStart = state.screenSpaceStart
 					state = {
@@ -342,6 +326,8 @@ function useDraggableEvents(
 					}
 
 					editor.run(() => {
+						editor.setCurrentTool('select')
+
 						// Set origin point
 						editor.dispatch({
 							type: 'pointer',
@@ -364,6 +350,7 @@ function useDraggableEvents(
 						})
 
 						tooltipManager.hideAllTooltips()
+						editor.getContainer().focus()
 					})
 				}
 			}
@@ -405,7 +392,7 @@ function useDraggableEvents(
 
 function DraggableToolbarButton({
 	id,
-	labelToUse,
+	labelStr,
 	titleStr,
 	disabled,
 	isSelected,
@@ -416,7 +403,7 @@ function DraggableToolbarButton({
 }: {
 	id: string
 	disabled: boolean
-	labelToUse?: string
+	labelStr?: string
 	titleStr?: string
 	isSelected?: boolean
 	icon: TLUiMenuItemProps['icon']
@@ -429,7 +416,7 @@ function DraggableToolbarButton({
 	if (overflow) {
 		return (
 			<TldrawUiToolbarButton
-				aria-label={labelToUse}
+				aria-label={labelStr}
 				aria-pressed={isSelected ? 'true' : 'false'}
 				isActive={isSelected}
 				className="tlui-button-grid__button"
@@ -447,7 +434,7 @@ function DraggableToolbarButton({
 
 	return (
 		<TldrawUiToolbarButton
-			aria-label={labelToUse}
+			aria-label={labelStr}
 			aria-pressed={isSelected ? 'true' : 'false'}
 			data-testid={`tools.${id}`}
 			data-value={id}

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

@@ -36,6 +36,7 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 import { TLUiIconType } from '../icon-types'
 import { TLUiOverrideHelpers, useDefaultHelpers } from '../overrides'
 import { useA11y } from './a11y'
+import { useTldrawUiComponents } from './components'
 import { TLUiEventSource, useUiEvents } from './events'
 
 /** @public */
@@ -98,6 +99,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 	const _editor = useMaybeEditor()
 	const showCollaborationUi = useShowCollaborationUi()
 	const helpers = useDefaultHelpers()
+	const components = useTldrawUiComponents()
 	const trackEvent = useUiEvents()
 	const a11y = useA11y()
 	const msg = useTranslation()
@@ -176,7 +178,9 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				kbd: 'cmd+alt+/,ctrl+alt+/',
 				onSelect(source) {
 					trackEvent('open-kbd-shortcuts', { source })
-					helpers.addDialog({ component: DefaultKeyboardShortcutsDialog })
+					helpers.addDialog({
+						component: components.KeyboardShortcutsDialog ?? DefaultKeyboardShortcutsDialog,
+					})
 				},
 			},
 			{
@@ -221,7 +225,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values())
 					if (ids.length === 0) return
 					trackEvent('export-as', { format: 'svg', source })
-					helpers.exportAs(ids, 'svg', getExportName(editor, defaultDocumentName))
+					helpers.exportAs(ids, { format: 'svg', name: getExportName(editor, defaultDocumentName) })
 				},
 			},
 			{
@@ -237,7 +241,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values())
 					if (ids.length === 0) return
 					trackEvent('export-as', { format: 'png', source })
-					helpers.exportAs(ids, 'png', getExportName(editor, defaultDocumentName))
+					helpers.exportAs(ids, { format: 'png', name: getExportName(editor, defaultDocumentName) })
 				},
 			},
 			{
@@ -253,11 +257,10 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (ids.length === 0) ids = Array.from(editor.getCurrentPageShapeIds().values())
 					if (ids.length === 0) return
 					trackEvent('export-all-as', { format: 'svg', source })
-					helpers.exportAs(
-						Array.from(editor.getCurrentPageShapeIds()),
-						'svg',
-						getExportName(editor, defaultDocumentName)
-					)
+					helpers.exportAs(Array.from(editor.getCurrentPageShapeIds()), {
+						format: 'svg',
+						name: getExportName(editor, defaultDocumentName),
+					})
 				},
 			},
 			{
@@ -272,7 +275,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					const ids = Array.from(editor.getCurrentPageShapeIds().values())
 					if (ids.length === 0) return
 					trackEvent('export-all-as', { format: 'png', source })
-					helpers.exportAs(ids, 'png', getExportName(editor, defaultDocumentName))
+					helpers.exportAs(ids, { format: 'png', name: getExportName(editor, defaultDocumentName) })
 				},
 			},
 			{
@@ -1755,7 +1758,17 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 		}
 
 		return actions
-	}, [helpers, _editor, trackEvent, overrides, defaultDocumentName, showCollaborationUi, msg, a11y])
+	}, [
+		helpers,
+		_editor,
+		trackEvent,
+		overrides,
+		defaultDocumentName,
+		showCollaborationUi,
+		msg,
+		a11y,
+		components,
+	])
 
 	return <ActionsContext.Provider value={asActions(actions)}>{children}</ActionsContext.Provider>
 }

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

@@ -12,6 +12,7 @@ import {
 import { CursorChatBubble } from '../components/CursorChatBubble'
 import { DefaultDebugMenu } from '../components/DebugMenu/DefaultDebugMenu'
 import { DefaultDebugPanel } from '../components/DefaultDebugPanel'
+import { DefaultFollowingIndicator } from '../components/DefaultFollowingIndicator'
 import { DefaultMenuPanel } from '../components/DefaultMenuPanel'
 import { DefaultDialogs } from '../components/Dialogs'
 import { TLUiHelpMenuProps } from '../components/HelpMenu/DefaultHelpMenu'
@@ -72,6 +73,7 @@ export interface TLUiComponents {
 	Dialogs?: ComponentType | null
 	Toasts?: ComponentType | null
 	A11y?: ComponentType | null
+	FollowingIndicator?: ComponentType | null
 }
 
 const TldrawUiComponentsContext = createContext<TLUiComponents | null>(null)
@@ -119,6 +121,7 @@ export function TldrawUiComponentsProvider({
 					Dialogs: DefaultDialogs,
 					Toasts: DefaultToasts,
 					A11y: DefaultA11yAnnouncer,
+					FollowingIndicator: DefaultFollowingIndicator,
 					..._overrides,
 				}),
 				[_overrides, showCollaborationUi]

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

@@ -123,7 +123,7 @@ export interface TLUiEventMap {
 	'shrink-shapes': null
 	'flatten-to-image': null
 	'a11y-repeat-shape-announce': null
-	'open-url': { url: string }
+	'open-url': { destinationUrl: string }
 	'open-context-menu': null
 	'adjust-shape-styles': null
 	'copy-link': null

package/src/lib/ui/hooks/useClipboardEvents.ts

@@ -7,8 +7,8 @@ import {
 	assert,
 	compact,
 	isDefined,
+	markEventAsHandled,
 	preventDefault,
-	stopEventPropagation,
 	uniq,
 	useEditor,
 	useMaybeEditor,
@@ -763,7 +763,7 @@ export function useNativeClipboardEvents() {
 
 		const paste = (e: ClipboardEvent) => {
 			if (disablingMiddleClickPaste) {
-				stopEventPropagation(e)
+				markEventAsHandled(e)
 				return
 			}
 

package/src/lib/ui/hooks/useExportAs.ts

@@ -11,12 +11,13 @@ export function useExportAs() {
 	const msg = useTranslation()
 
 	return useCallback(
-		(ids: TLShapeId[], format: TLExportType = 'png', name: string | undefined) => {
+		(ids: TLShapeId[], opts: { format?: TLExportType; name?: string; scale?: number } = {}) => {
 			assert(editor, 'useExportAs: editor is required')
+			const { format = 'png', name, scale = 1 } = opts
 			exportAs(editor, ids, {
 				format,
 				name,
-				scale: 1,
+				scale,
 			}).catch((e) => {
 				console.error(e.message)
 				addToast({

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

@@ -3,6 +3,8 @@ import {
 	createShapeId,
 	Editor,
 	GeoShapeGeoStyle,
+	getIndicesBetween,
+	TLLineShape,
 	TLPointerEventInfo,
 	TLShapeId,
 	toRichText,
@@ -153,7 +155,8 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 				},
 				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
 					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'geo', props: { geo } }),
+						createShape: (id) =>
+							editor.createShape({ id, type: 'geo', props: { w: 200, h: 200, geo } }),
 					})
 					trackEvent('drag-tool', { source, id: 'geo' })
 				},
@@ -173,7 +176,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 							editor.createShape({
 								id,
 								type: 'arrow',
-								props: { start: { x: 0, y: 0 }, end: { x: 200, y: 0 } },
+								props: { start: { x: 0, y: 200 }, end: { x: 200, y: 0 } },
 							}),
 					})
 					trackEvent('drag-tool', { source, id: 'arrow' })
@@ -188,6 +191,24 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('line')
 					onToolSelect(source, this)
 				},
+				onDragStart(source, info) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) => {
+							const [start, end] = getIndicesBetween(null, null, 2)
+							editor.createShape<TLLineShape>({
+								id,
+								type: 'line',
+								props: {
+									points: {
+										[start]: { id: start, index: start, x: 0, y: 200 },
+										[end]: { id: end, index: end, x: 200, y: 0 },
+									},
+								},
+							})
+						},
+					})
+					trackEvent('drag-tool', { source, id: 'line' })
+				},
 			},
 			{
 				id: 'frame',
@@ -219,8 +240,8 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 						createShape: (id) =>
 							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
 						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
 							editor.setEditingShape(id)
+							editor.emit('select-all-text', { shapeId: id })
 						},
 					})
 					trackEvent('drag-tool', { source, id: 'text' })
@@ -249,8 +270,8 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onDragFromToolbarToCreateShape(editor, info, {
 						createShape: (id) => editor.createShape({ id, type: 'note' }),
 						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
 							editor.setEditingShape(id)
+							editor.emit('select-all-text', { shapeId: id })
 						},
 					})
 					trackEvent('drag-tool', { source, id: 'note' })
@@ -365,5 +386,6 @@ export function onDragFromToolbarToCreateShape(
 			opts.onDragEnd?.(id)
 		},
 	})
+
 	editor.getCurrentTool().setCurrentToolIdMask(shape.type)
 }

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -186,6 +186,7 @@ export type TLUiTranslationKey =
 	| 'geo-style.pentagon'
 	| 'geo-style.rectangle'
 	| 'geo-style.rhombus'
+	| 'geo-style.rhombus-2'
 	| 'geo-style.star'
 	| 'geo-style.trapezoid'
 	| 'geo-style.triangle'
@@ -260,6 +261,7 @@ export type TLUiTranslationKey =
 	| 'tool.aspect-ratio.wide'
 	| 'tool.image-toolbar-title'
 	| 'tool.image-crop'
+	| 'tool.image-crop-confirm'
 	| 'tool.media-alt-text'
 	| 'tool.media-alt-text-desc'
 	| 'tool.media-alt-text-confirm'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -92,9 +92,9 @@ export const DEFAULT_TRANSLATION = {
 	'action.toggle-wrap-mode': 'Toggle Select on wrap',
 	'action.toggle-reduce-motion.menu': 'Reduce motion',
 	'action.toggle-reduce-motion': 'Toggle reduce motion',
-	'action.toggle-keyboard-shortcuts.menu': 'Keyboard shortcuts',
+	'action.toggle-keyboard-shortcuts.menu': 'Enable keyboard shortcuts',
 	'action.toggle-keyboard-shortcuts': 'Toggle keyboard shortcuts',
-	'action.toggle-ui-labels.menu': 'UI labels',
+	'action.toggle-ui-labels.menu': 'Enable UI labels',
 	'action.toggle-ui-labels': 'Toggle UI labels',
 	'action.toggle-edge-scrolling.menu': 'Edge scrolling',
 	'action.toggle-edge-scrolling': 'Toggle edge scrolling',
@@ -187,6 +187,7 @@ export const DEFAULT_TRANSLATION = {
 	'geo-style.pentagon': 'Pentagon',
 	'geo-style.rectangle': 'Rectangle',
 	'geo-style.rhombus': 'Rhombus',
+	'geo-style.rhombus-2': 'Rhombus left',
 	'geo-style.star': 'Star',
 	'geo-style.trapezoid': 'Trapezoid',
 	'geo-style.triangle': 'Triangle',
@@ -261,6 +262,7 @@ export const DEFAULT_TRANSLATION = {
 	'tool.aspect-ratio.wide': 'Wide (16:9)',
 	'tool.image-toolbar-title': 'Image tools',
 	'tool.image-crop': 'Crop image',
+	'tool.image-crop-confirm': 'Confirm',
 	'tool.media-alt-text': 'Alternative text',
 	'tool.media-alt-text-desc': 'Give a description…',
 	'tool.media-alt-text-confirm': 'Confirm',

package/src/lib/ui/kbd-utils.ts

@@ -31,9 +31,16 @@ export function kbd(str: string) {
 			)
 			.flat()
 			.map((sub, index) => {
-				if (sub === '__CTRL__') return 'Ctrl'
-				if (sub === '__ALT__') return 'Alt'
-				const modifiedKey = sub[0].toUpperCase() + sub.slice(1)
+				if (sub[0] === '+') return []
+
+				let modifiedKey
+				if (sub === '__CTRL__') {
+					modifiedKey = 'Ctrl'
+				} else if (sub === '__ALT__') {
+					modifiedKey = 'Alt'
+				} else {
+					modifiedKey = sub[0].toUpperCase() + sub.slice(1)
+				}
 				return tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]
 			})
 			.flat()

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.16.0-canary.a2491e00987a'
+export const version = '3.16.0-canary.a675c73ef29d'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-12T12:23:37.583Z',
-	patch: '2025-08-12T12:23:37.583Z',
+	minor: '2025-09-15T12:46:50.613Z',
+	patch: '2025-09-15T12:46:50.613Z',
 }

package/src/lib/ui.css

@@ -1007,9 +1007,23 @@
 	flex-direction: column;
 }
 
-.tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) {
+/*
+add a border to the bottom of all but the last section. we have to handle empty sections too, which
+are hidden and shouldn't be counted
+*/
+.tlui-style-panel__section:not(:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))) {
 	border-bottom: 1px solid var(--tl-color-divider);
 }
+/*
+if a section ends with a slider and we're adding a border, we need some extra space for visual
+balance. we need to handle empty sections as above. is this the most complex css selector in all of
+tldraw? probably.
+*/
+.tlui-style-panel__section:has(.tlui-slider__container:last-child):not(
+		:nth-last-child(-n + 1 of .tlui-style-panel__section:not(:empty))
+	) {
+	margin-bottom: 7px;
+}
 
 .tlui-style-panel__section:empty {
 	display: none;
@@ -1021,7 +1035,7 @@
 }
 
 .tlui-style-panel__dropdown-picker:only-child {
-	width: 100%;
+	flex: 1;
 }
 
 .tlui-style-panel__double-select-picker {
@@ -1047,6 +1061,9 @@
 }
 
 @media (hover: hover) {
+	.tlui-style-panel .tlui-button[aria-expanded='true'] {
+		background: none;
+	}
 	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
 		opacity: 1;
 		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
@@ -1078,7 +1095,6 @@
 .tlui-layout__bottom {
 	grid-row: 2;
 	width: 100%;
-	overflow: hidden;
 }
 
 .tlui-layout__bottom__main {
@@ -1270,6 +1286,10 @@
 	opacity: 1;
 }
 
+.tlui-main-toolbar__overflow-content {
+	touch-action: none;
+}
+
 .tlui-main-toolbar__tools [data-toolbar-visible='false'],
 .tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
 	display: none;
@@ -1319,7 +1339,6 @@
 	max-width: 400px;
 	width: fit-content;
 	text-align: center;
-	pointer-events: none;
 	will-change: transform, opacity;
 	z-index: 2;
 }
@@ -1331,10 +1350,7 @@
 
 [data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
 	z-index: var(--tl-layer-toasts) !important;
-}
-
-[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
-	transition: all 0.1s ease-out;
+	pointer-events: none;
 }
 
 /* ------------------- Debug panel ------------------ */

package/src/lib/utils/excalidraw/__snapshots__/putExcalidrawContent.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
+exports[`putExcalidrawContent test fixtures > bound-arrows.json 1`] = `
 {
   "binding:8": {
     "fromId": "shape:7",
@@ -173,7 +173,7 @@ exports[`putExcalidrawContent test fixtures bound-arrows.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
+exports[`putExcalidrawContent test fixtures > bound-elbow-arrows.json 1`] = `
 {
   "binding:7": {
     "fromId": "shape:6",
@@ -346,7 +346,7 @@ exports[`putExcalidrawContent test fixtures bound-elbow-arrows.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures image.json 1`] = `
+exports[`putExcalidrawContent test fixtures > image.json 1`] = `
 {
   "asset:5": {
     "id": "asset:5",
@@ -404,7 +404,7 @@ exports[`putExcalidrawContent test fixtures image.json 1`] = `
 }
 `;
 
-exports[`putExcalidrawContent test fixtures line-drawing.json 1`] = `
+exports[`putExcalidrawContent test fixtures > line-drawing.json 1`] = `
 {
   "document:document": {
     "gridSize": 10,

package/src/lib/utils/export/copyAs.ts

@@ -31,30 +31,7 @@ export interface CopyAsOptions extends TLImageExportOptions {
  *
  * @public
  */
-export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void>
-/**
- * @deprecated The format parameter is now part of the opts object.
- * @public
- */
-export function copyAs(
-	editor: Editor,
-	ids: TLShapeId[],
-	format: TLCopyType,
-	opts?: TLImageExportOptions & { format?: undefined }
-): Promise<void>
-export function copyAs(
-	...args:
-		| [editor: Editor, ids: TLShapeId[], opts: TLImageExportOptions & { format: TLCopyType }]
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				format: TLCopyType,
-				opts?: TLImageExportOptions & { format?: undefined },
-		  ]
-) {
-	const [editor, ids, opts] =
-		typeof args[2] === 'string' ? [args[0], args[1], { ...args[3], format: args[2] }] : args
-
+export function copyAs(editor: Editor, ids: TLShapeId[], opts: CopyAsOptions): Promise<void> {
 	// Note:  it's important that this function itself isn't async and doesn't really use promises -
 	// we need to create the relevant `ClipboardItem`s and call navigator.clipboard.write
 	// synchronously to make sure safari knows that the user _wants_ to copy See

package/src/lib/utils/export/export.ts

@@ -1,7 +1,6 @@
 import {
 	Editor,
 	FileHelpers,
-	TLExportType,
 	TLImageExportOptions,
 	TLShapeId,
 	exhaustiveSwitchError,
@@ -35,41 +34,6 @@ export async function exportToString(
 	}
 }
 
-/**
- * Export the given shapes as a blob.
- * @param editor - The editor instance.
- * @param ids - The ids of the shapes to export.
- * @param format - The format to export as.
- * @param opts - Rendering options.
- * @returns A promise that resolves to a blob.
- * @deprecated Use {@link @tldraw/editor#Editor.toImage} instead.
- * @public
- */
-export async function exportToBlob({
-	editor,
-	ids,
-	format,
-	opts = {},
-}: {
-	editor: Editor
-	ids: TLShapeId[]
-	format: TLExportType
-	opts?: TLImageExportOptions
-}): Promise<Blob> {
-	const idsToUse = ids?.length ? ids : [...editor.getCurrentPageShapeIds()]
-	switch (format) {
-		case 'jpeg':
-		case 'png':
-		case 'webp':
-		case 'svg': {
-			return (await editor.toImage(idsToUse, { ...opts, format })).blob
-		}
-		default: {
-			exhaustiveSwitchError(format)
-		}
-	}
-}
-
 const clipboardMimeTypesByFormat = {
 	jpeg: 'image/jpeg',
 	png: 'image/png',

package/src/lib/utils/export/exportAs.ts

@@ -28,38 +28,7 @@ export async function exportAs(
 	editor: Editor,
 	ids: TLShapeId[],
 	opts: ExportAsOptions
-): Promise<void>
-/**
- * @deprecated The format & name parameters are now part of the opts object.
- * @public
- */
-export async function exportAs(
-	editor: Editor,
-	ids: TLShapeId[],
-	format?: TLExportType,
-	name?: string,
-	opts?: TLImageExportOptions
-): Promise<void>
-export async function exportAs(
-	...args:
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				opts: TLImageExportOptions & { format: TLExportType; name?: string },
-		  ]
-		| [
-				editor: Editor,
-				ids: TLShapeId[],
-				format?: TLExportType,
-				name?: string,
-				opts?: TLImageExportOptions,
-		  ]
-) {
-	const [editor, ids, opts] =
-		typeof args[2] === 'object'
-			? args
-			: [args[0], args[1], { ...args[4], format: args[2] ?? 'png', name: args[3] }]
-
+): Promise<void> {
 	// If we don't get name then use a predefined one
 	let name = opts.name
 	if (!name) {