tldraw 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

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/useKeyboardShortcuts.ts

@@ -61,7 +61,7 @@ export function useKeyboardShortcuts() {
 			if (SKIP_KBDS.includes(action.id)) continue
 
 			hot(getHotkeysStringFromKbd(action.kbd), (event) => {
-				if (areShortcutsDisabled(editor)) return
+				if (areShortcutsDisabled(editor) && !action.isRequiredA11yAction) return
 				preventDefault(event)
 				action.onSelect('kbd')
 			})
@@ -149,7 +149,8 @@ export function areShortcutsDisabled(editor: Editor) {
 	return (
 		editor.menus.hasAnyOpenMenus() ||
 		editor.getEditingShapeId() !== null ||
-		editor.getCrashingError()
+		editor.getCrashingError() ||
+		!editor.user.getAreKeyboardShortcutsEnabled()
 	)
 }
 

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

@@ -1,6 +1,18 @@
-import { Editor, GeoShapeGeoStyle, useMaybeEditor } from '@tldraw/editor'
+import {
+	assertExists,
+	createShapeId,
+	Editor,
+	GeoShapeGeoStyle,
+	getIndicesBetween,
+	TLLineShape,
+	TLPointerEventInfo,
+	TLShapeId,
+	toRichText,
+	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,8 +28,9 @@ export interface TLUiToolItem<
 	id: string
 	label: TranslationKey
 	shortcutsLabel?: TranslationKey
-	icon: IconType
+	icon: IconType | TLUiIconJsx
 	onSelect(source: TLUiEventSource): void
+	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 	/**
 	 * The keyboard shortcut for this tool. This is a string that can be a single key,
 	 * or a combination of keys.
@@ -125,21 +138,28 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onToolSelect(source, this)
 				},
 			},
-			...[...GeoShapeGeoStyle.values].map((id) => ({
-				id,
-				label: `tool.${id}` as TLUiTranslationKey,
+			...[...GeoShapeGeoStyle.values].map((geo) => ({
+				id: geo,
+				label: `tool.${geo}` as TLUiTranslationKey,
 				meta: {
-					geo: id,
+					geo,
 				},
-				kbd: id === 'rectangle' ? 'r' : id === 'ellipse' ? 'o' : undefined,
-				icon: ('geo-' + id) as TLUiIconType,
+				kbd: geo === 'rectangle' ? 'r' : geo === 'ellipse' ? 'o' : undefined,
+				icon: ('geo-' + geo) as TLUiIconType,
 				onSelect(source: TLUiEventSource) {
 					editor.run(() => {
-						editor.setStyleForNextShapes(GeoShapeGeoStyle, id)
+						editor.setStyleForNextShapes(GeoShapeGeoStyle, geo)
 						editor.setCurrentTool('geo')
-						onToolSelect(source, this, `geo-${id}`)
+						onToolSelect(source, this, `geo-${geo}`)
 					})
 				},
+				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) =>
+							editor.createShape({ id, type: 'geo', props: { w: 200, h: 200, geo } }),
+					})
+					trackEvent('drag-tool', { source, id: 'geo' })
+				},
 			})),
 			{
 				id: 'arrow',
@@ -150,6 +170,17 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('arrow')
 					onToolSelect(source, this)
 				},
+				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) =>
+							editor.createShape({
+								id,
+								type: 'arrow',
+								props: { start: { x: 0, y: 200 }, end: { x: 200, y: 0 } },
+							}),
+					})
+					trackEvent('drag-tool', { source, id: 'arrow' })
+				},
 			},
 			{
 				id: 'line',
@@ -160,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',
@@ -170,6 +219,12 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('frame')
 					onToolSelect(source, this)
 				},
+				onDragStart(source, info) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) => editor.createShape({ id, type: 'frame' }),
+					})
+					trackEvent('drag-tool', { source, id: 'frame' })
+				},
 			},
 			{
 				id: 'text',
@@ -180,6 +235,17 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('text')
 					onToolSelect(source, this)
 				},
+				onDragStart(source, info) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) =>
+							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
+						onDragEnd: (id) => {
+							editor.setEditingShape(id)
+							editor.emit('select-all-text', { shapeId: id })
+						},
+					})
+					trackEvent('drag-tool', { source, id: 'text' })
+				},
 			},
 			{
 				id: 'asset',
@@ -200,6 +266,16 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('note')
 					onToolSelect(source, this)
 				},
+				onDragStart(source, info) {
+					onDragFromToolbarToCreateShape(editor, info, {
+						createShape: (id) => editor.createShape({ id, type: 'note' }),
+						onDragEnd: (id) => {
+							editor.setEditingShape(id)
+							editor.emit('select-all-text', { shapeId: id })
+						},
+					})
+					trackEvent('drag-tool', { source, id: 'note' })
+				},
 			},
 			{
 				id: 'laser',
@@ -243,7 +319,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 		}
 
 		return tools
-	}, [overrides, editor, helpers, onToolSelect])
+	}, [overrides, editor, helpers, onToolSelect, trackEvent])
 
 	return <ToolsContext.Provider value={tools}>{children}</ToolsContext.Provider>
 }
@@ -258,3 +334,58 @@ export function useTools() {
 
 	return ctx
 }
+
+/**
+ * Options for {@link onDragFromToolbarToCreateShape}.
+ * @public
+ */
+export interface OnDragFromToolbarToCreateShapesOpts {
+	/**
+	 * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
+	 * immediately updated with the correct position.
+	 */
+	createShape(id: TLShapeId): void
+	/**
+	 * Called once the drag interaction has finished.
+	 */
+	onDragEnd?(id: TLShapeId): void
+}
+
+/**
+ * A helper method to use in {@link TLUiToolItem#onDragStart} to create a shape by dragging it from
+ * the toolbar.
+ * @public
+ */
+export function onDragFromToolbarToCreateShape(
+	editor: Editor,
+	info: TLPointerEventInfo,
+	opts: OnDragFromToolbarToCreateShapesOpts
+) {
+	const { x, y } = editor.inputs.currentPagePoint
+
+	const stoppingPoint = editor.markHistoryStoppingPoint('drag shape tool')
+	editor.setCurrentTool('select.translating')
+
+	const id = createShapeId()
+	opts.createShape(id)
+	const shape = assertExists(editor.getShape(id), 'Shape not found')
+
+	const { w, h } = editor.getShapePageBounds(id)!
+	editor.updateShape({ id, type: shape.type, x: x - w / 2, y: y - h / 2 })
+	editor.select(id)
+
+	editor.setCurrentTool('select.translating', {
+		...info,
+		target: 'shape',
+		shape: editor.getShape(id),
+		isCreating: true,
+		creatingMarkId: stoppingPoint,
+		onCreate() {
+			editor.setCurrentTool('select.idle')
+			editor.select(id)
+			opts.onDragEnd?.(id)
+		},
+	})
+
+	editor.getCurrentTool().setCurrentToolIdMask(shape.type)
+}

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

@@ -55,6 +55,7 @@ export type TLUiTranslationKey =
 	| 'action.new-project'
 	| 'action.new-shared-project'
 	| 'action.open-cursor-chat'
+	| 'action.open-kbd-shortcuts'
 	| 'action.open-file'
 	| 'action.pack'
 	| 'action.paste'
@@ -90,6 +91,10 @@ export type TLUiTranslationKey =
 	| 'action.toggle-wrap-mode'
 	| 'action.toggle-reduce-motion.menu'
 	| 'action.toggle-reduce-motion'
+	| 'action.toggle-keyboard-shortcuts.menu'
+	| 'action.toggle-keyboard-shortcuts'
+	| 'action.toggle-ui-labels.menu'
+	| 'action.toggle-ui-labels'
 	| 'action.toggle-edge-scrolling.menu'
 	| 'action.toggle-edge-scrolling'
 	| 'action.toggle-debug-mode.menu'
@@ -181,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'
@@ -255,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'
@@ -283,13 +290,19 @@ export type TLUiTranslationKey =
 	| 'a11y.repeat-shape'
 	| 'a11y.move-shape'
 	| 'a11y.move-shape-faster'
+	| 'a11y.rotate-shape-cw'
+	| 'a11y.rotate-shape-ccw'
+	| 'a11y.rotate-shape-cw-fine'
+	| 'a11y.rotate-shape-ccw-fine'
 	| 'a11y.enlarge-shape'
 	| 'a11y.shrink-shape'
 	| 'a11y.pan-camera'
 	| 'a11y.adjust-shape-styles'
 	| 'a11y.open-context-menu'
+	| 'a11y.open-keyboard-shortcuts'
 	| 'menu.title'
 	| 'menu.theme'
+	| 'menu.accessibility'
 	| 'menu.copy-as'
 	| 'menu.edit'
 	| 'menu.export-as'

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

@@ -55,6 +55,7 @@ export const DEFAULT_TRANSLATION = {
 	'action.new-project': 'New project',
 	'action.new-shared-project': 'New shared project',
 	'action.open-cursor-chat': 'Cursor chat',
+	'action.open-kbd-shortcuts': 'Open keyboard shortcuts',
 	'action.open-file': 'Open file',
 	'action.pack': 'Pack',
 	'action.paste': 'Paste',
@@ -91,6 +92,10 @@ 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': 'Enable keyboard shortcuts',
+	'action.toggle-keyboard-shortcuts': 'Toggle keyboard shortcuts',
+	'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',
 	'action.toggle-debug-mode.menu': 'Debug mode',
@@ -182,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',
@@ -256,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',
@@ -284,13 +291,19 @@ export const DEFAULT_TRANSLATION = {
 	'a11y.repeat-shape': 'Repeat shape',
 	'a11y.move-shape': 'Move shape',
 	'a11y.move-shape-faster': 'Move shape faster',
+	'a11y.rotate-shape-cw': 'Rotate shape clockwise',
+	'a11y.rotate-shape-ccw': 'Rotate shape counterclockwise',
+	'a11y.rotate-shape-cw-fine': 'Rotate shape clockwise (fine)',
+	'a11y.rotate-shape-ccw-fine': 'Rotate shape counterclockwise (fine)',
 	'a11y.enlarge-shape': 'Enlarge shape',
 	'a11y.shrink-shape': 'Shrink shape',
 	'a11y.pan-camera': 'Pan camera',
 	'a11y.adjust-shape-styles': 'Adjust shape styles',
 	'a11y.open-context-menu': 'Open context menu',
+	'a11y.open-keyboard-shortcuts': 'Open keyboard shortcuts',
 	'menu.title': 'Menu',
 	'menu.theme': 'Theme',
+	'menu.accessibility': 'Accessibility',
 	'menu.copy-as': 'Copy as',
 	'menu.edit': 'Edit',
 	'menu.export-as': 'Export as',

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

@@ -2,6 +2,7 @@ import { tlenv } from '@tldraw/editor'
 
 // N.B. We rework these Windows placeholders down below.
 const cmdKey = tlenv.isDarwin ? '⌘' : '__CTRL__'
+const ctrlKey = tlenv.isDarwin ? '⌃' : '__CTRL__'
 const altKey = tlenv.isDarwin ? '⌥' : '__ALT__'
 
 /** @public */
@@ -19,7 +20,7 @@ export function kbd(str: string) {
 					? s.replace(/[[\]]/g, '')
 					: s
 							.replace(/cmd\+/g, cmdKey)
-							.replace(/ctrl\+/g, cmdKey)
+							.replace(/ctrl\+/g, ctrlKey)
 							.replace(/alt\+/g, altKey)
 							.replace(/shift\+/g, '⇧')
 							// Backwards compatibility with the old system.
@@ -30,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-internal.a478398270c6'
+export const version = '3.16.0-internal.f8b97f0c414f'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-19T10:21:26.717Z',
-	patch: '2025-08-19T10:21:26.717Z',
+	minor: '2025-09-15T18:16:53.704Z',
+	patch: '2025-09-15T18:16:53.704Z',
 }