tldraw 3.15.0-next.f1dfcef63951 → 3.15.0

package/src/lib/shapes/shared/PathBuilder.tsx

@@ -10,6 +10,7 @@ import {
 	Geometry2dFilters,
 	Geometry2dOptions,
 	getPerfectDashProps,
+	getVerticesCountForArcLength,
 	Group2d,
 	modulate,
 	PerfectDashTerminal,
@@ -121,6 +122,7 @@ export interface CubicBezierToPathBuilderCommand extends PathBuilderCommandBase
 	type: 'cubic'
 	cp1: VecModel
 	cp2: VecModel
+	resolution?: number
 }
 
 /** @internal */
@@ -317,8 +319,17 @@ export class PathBuilder {
 		// Calculate the sweep angle
 		const sweepAngle = endAngle - startAngle
 
+		// Calculate the approximate arc length. General ellipse arc length is expensive - there's
+		// no closed form solution, so we have to do iterative numerical approximation. As we only
+		// use this to control the resolution of later approximations, let's cheat and just use the
+		// circular arc length with the largest radius:
+		const approximateArcLength = Math.max(rx1, ry1) * Math.abs(sweepAngle)
+
 		// Approximate the arc using cubic bezier curves
 		const numSegments = Math.min(4, Math.ceil(Math.abs(sweepAngle) / (Math.PI / 2)))
+		const resolutionPerSegment = Math.ceil(
+			getVerticesCountForArcLength(approximateArcLength) / numSegments
+		)
 		const anglePerSegment = sweepAngle / numSegments
 
 		// Helper function to compute point on ellipse
@@ -364,7 +375,16 @@ export class PathBuilder {
 			const cp2y = end.y - handleScale * d2.y
 
 			const bezierOpts = i === 0 ? opts : { ...opts, mergeWithPrevious: true }
-			this.cubicBezierTo(end.x, end.y, cp1x, cp1y, cp2x, cp2y, bezierOpts)
+			this.cubicBezierToWithResolution(
+				end.x,
+				end.y,
+				cp1x,
+				cp1y,
+				cp2x,
+				cp2y,
+				bezierOpts,
+				resolutionPerSegment
+			)
 		}
 
 		return this
@@ -378,6 +398,18 @@ export class PathBuilder {
 		cp2X: number,
 		cp2Y: number,
 		opts?: PathBuilderCommandOpts
+	) {
+		return this.cubicBezierToWithResolution(x, y, cp1X, cp1Y, cp2X, cp2Y, opts)
+	}
+	private cubicBezierToWithResolution(
+		x: number,
+		y: number,
+		cp1X: number,
+		cp1Y: number,
+		cp2X: number,
+		cp2Y: number,
+		opts?: PathBuilderCommandOpts,
+		resolution?: number
 	) {
 		this.assertHasMoveTo()
 		this.commands.push({
@@ -388,6 +420,7 @@ export class PathBuilder {
 			cp2: { x: cp2X, y: cp2Y },
 			isClose: false,
 			opts,
+			resolution,
 		})
 		return this
 	}
@@ -972,6 +1005,7 @@ export class PathBuilderGeometry2d extends Geometry2d {
 							cp1: Vec.From(command.cp1),
 							cp2: Vec.From(command.cp2),
 							end: Vec.From(command),
+							resolution: command.resolution,
 						})
 					)
 					break

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -81,6 +81,7 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-plain-text-wrapper`}
+			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -128,6 +128,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	return (
 		<div
 			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
+			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
 			data-hastext={!isEmpty}

package/src/lib/shapes/text/TextShapeUtil.tsx

@@ -303,33 +303,26 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 }
 
 function getTextSize(editor: Editor, props: TLTextShape['props']) {
-	const { font, richText, autoSize, size, w } = props
+	const { font, richText, size, w } = props
 
-	const minWidth = autoSize ? 16 : Math.max(16, w)
+	const minWidth = 16
 	const fontSize = FONT_SIZES[size]
 
-	const cw = autoSize
-		? null
-		: // `measureText` floors the number so we need to do the same here to avoid issues.
-			Math.floor(Math.max(minWidth, w))
+	const maybeFixedWidth = props.autoSize ? null : Math.max(minWidth, Math.floor(w))
 
 	const html = renderHtmlFromRichTextForMeasurement(editor, richText)
 	const result = editor.textMeasure.measureHtml(html, {
 		...TEXT_PROPS,
 		fontFamily: FONT_FAMILIES[font],
 		fontSize: fontSize,
-		maxWidth: cw,
+		maxWidth: maybeFixedWidth,
 	})
 
 	// If we're autosizing the measureText will essentially `Math.floor`
 	// the numbers so `19` rather than `19.3`, this means we must +1 to
 	// whatever we get to avoid wrapping.
-	if (autoSize) {
-		result.w += 1
-	}
-
 	return {
-		width: Math.max(minWidth, result.w),
+		width: maybeFixedWidth ?? Math.max(minWidth, result.w + 1),
 		height: Math.max(fontSize, result.h),
 	}
 }

package/src/lib/styles.tsx

@@ -1,7 +1,9 @@
+import { TLUiIconJsx } from './ui/components/primitives/TldrawUiIcon'
+
 /** @public */
 export type StyleValuesForUi<T> = readonly {
 	readonly value: T
-	readonly icon: string
+	readonly icon: string | TLUiIconJsx
 }[]
 
 // todo: default styles prop?

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -213,6 +213,14 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuActionItem actionId="enlarge-shapes" />
 				<TldrawUiMenuActionItem actionId="shrink-shapes" />
 				<TldrawUiMenuActionItem actionId="a11y-repeat-shape-announce" />
+				<TldrawUiMenuItem
+					id="a11y-open-keyboard-shortcuts"
+					label="a11y.open-keyboard-shortcuts"
+					kbd="cmd+alt+/"
+					onSelect={() => {
+						/* do nothing */
+					}}
+				/>
 			</TldrawUiMenuGroup>
 			{showCollaborationUi && (
 				<TldrawUiMenuGroup label="shortcuts-dialog.collaboration" id="collaboration">

package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -19,6 +19,7 @@ import {
 	ToggleEdgeScrollingItem,
 	ToggleFocusModeItem,
 	ToggleGridItem,
+	ToggleKeyboardShortcutsItem,
 	ToggleLockMenuItem,
 	TogglePasteAtCursorItem,
 	ToggleReduceMotionItem,
@@ -161,6 +162,7 @@ export function PreferencesGroup() {
 					<ToggleFocusModeItem />
 					<ToggleEdgeScrollingItem />
 					<ToggleReduceMotionItem />
+					<ToggleKeyboardShortcutsItem />
 					<ToggleDynamicSizeModeItem />
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />

package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx

@@ -45,7 +45,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}
 								onClick={() => actions['zoom-out'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon icon="minus" />
+								<TldrawUiButtonIcon small icon="minus" />
 							</TldrawUiToolbarButton>
 						)}
 						{ZoomMenu && <ZoomMenu key="zoom-menu" />}
@@ -56,7 +56,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}
 								onClick={() => actions['zoom-in'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon icon="plus" />
+								<TldrawUiButtonIcon small icon="plus" />
 							</TldrawUiToolbarButton>
 						)}
 						{Minimap && (
@@ -64,10 +64,9 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								type="icon"
 								data-testid="minimap.toggle-button"
 								title={msg('navigation-zone.toggle-minimap')}
-								className="tlui-navigation-panel__toggle"
 								onClick={toggleMinimap}
 							>
-								<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />
+								<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />
 							</TldrawUiToolbarButton>
 						)}
 					</>

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

@@ -1,3 +1,4 @@
+import { DefaultSpinner } from '@tldraw/editor'
 import React from 'react'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 
@@ -5,28 +6,5 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 export function Spinner(props: React.SVGProps<SVGSVGElement>) {
 	const msg = useTranslation()
 
-	return (
-		<svg
-			width={16}
-			height={16}
-			viewBox="0 0 16 16"
-			{...props}
-			aria-label={msg('app.loading')}
-			aria-hidden="false"
-		>
-			<g strokeWidth={2} fill="none" fillRule="evenodd">
-				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
-				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
-					<animateTransform
-						attributeName="transform"
-						type="rotate"
-						from="0 8 8"
-						to="360 8 8"
-						dur="1s"
-						repeatCount="indefinite"
-					/>
-				</path>
-			</g>
-		</svg>
-	)
+	return <DefaultSpinner aria-label={msg('app.loading')} {...props} />
 }

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

@@ -451,6 +451,7 @@ export function OpacitySlider() {
 			steps={tldrawSupportedOpacities.length - 1}
 			title={msg('style-panel.opacity')}
 			onHistoryMark={onHistoryMark}
+			ariaValueModifier={25}
 		/>
 	)
 }

package/src/lib/ui/components/menu-items.tsx

@@ -634,6 +634,23 @@ export function ToggleReduceMotionItem() {
 	)
 }
 
+/** @public @react */
+export function ToggleKeyboardShortcutsItem() {
+	const editor = useEditor()
+	const keyboardShortcuts = useValue(
+		'keyboardShortcuts',
+		() => editor.user.getAreKeyboardShortcutsEnabled(),
+		[editor]
+	)
+
+	return (
+		<TldrawUiMenuActionCheckboxItem
+			actionId="toggle-keyboard-shortcuts"
+			checked={keyboardShortcuts}
+		/>
+	)
+}
+
 /** @public @react */
 export function ToggleDebugModeItem() {
 	const editor = useEditor()

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/TldrawUiDialog.tsx

@@ -65,7 +65,7 @@ export interface TLUiDialogBodyProps {
 /** @public @react */
 export function TldrawUiDialogBody({ className, children, style }: TLUiDialogBodyProps) {
 	return (
-		<div className={classNames('tlui-dialog__body', className)} style={style}>
+		<div className={classNames('tlui-dialog__body', className)} style={style} tabIndex={0}>
 			{children}
 		</div>
 	)

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/TldrawUiSlider.tsx

@@ -13,6 +13,7 @@ export interface TLUiSliderProps {
 	onValueChange(value: number): void
 	onHistoryMark(id: string): void
 	'data-testid'?: string
+	ariaValueModifier?: number
 }
 
 /** @public @react */
@@ -26,6 +27,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 		label,
 		onValueChange,
 		['data-testid']: testId,
+		ariaValueModifier = 1,
 	}: TLUiSliderProps,
 	ref
 ) {
@@ -81,7 +83,9 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 				</_Slider.Track>
 				{value !== null && (
 					<_Slider.Thumb
-						aria-label={msg('style-panel.opacity')}
+						aria-valuemin={(min ?? 0) * ariaValueModifier}
+						aria-valuenow={value * ariaValueModifier}
+						aria-valuemax={steps * ariaValueModifier}
 						className="tlui-slider__thumb"
 						dir="ltr"
 						ref={ref}

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

@@ -76,6 +76,10 @@ export const TldrawUiToolbarToggleGroup = ({
 		<_Toolbar.ToggleGroup
 			type={type}
 			{...props}
+			// TODO: this fixes a bug in Radix until they fix it.
+			// https://github.com/radix-ui/primitives/issues/3188
+			// https://github.com/radix-ui/primitives/pull/3189
+			role="radiogroup"
 			className={classnames('tlui-toolbar-toggle-group', className)}
 		>
 			{children}

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.
 	 */
@@ -218,7 +219,6 @@ export function TldrawUiMenuItem<
 						preventDefault(e)
 						onSelect('toolbar')
 					}}
-					role="option"
 					title={titleStr}
 					type="tool"
 				>
@@ -237,7 +237,6 @@ export function TldrawUiMenuItem<
 					data-value={id}
 					disabled={disabled}
 					onClick={() => onSelect('toolbar')}
-					role="option"
 					title={titleStr}
 					type="icon"
 				>

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

@@ -28,6 +28,7 @@ import { fitFrameToContent, removeFrame } from '../../utils/frames/frames'
 import { generateShapeAnnouncementMessage } from '../components/A11y'
 import { EditLinkDialog } from '../components/EditLinkDialog'
 import { EmbedDialog } from '../components/EmbedDialog'
+import { DefaultKeyboardShortcutsDialog } from '../components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialog'
 import { useShowCollaborationUi } from '../hooks/useCollaborationStatus'
 import { flattenShapesToImages } from '../hooks/useFlatten'
 import { TLUiTranslationKey } from '../hooks/useTranslation/TLUiTranslationKey'
@@ -42,12 +43,13 @@ 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 }
 	readonlyOk?: boolean
 	checkbox?: boolean
+	isRequiredA11yAction?: boolean
 	onSelect(source: TLUiEventSource): Promise<void> | void
 }
 
@@ -168,6 +170,15 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					helpers.addDialog({ component: EmbedDialog })
 				},
 			},
+			{
+				id: 'open-kbd-shortcuts',
+				label: 'action.open-kbd-shortcuts',
+				kbd: 'cmd+alt+/,ctrl+alt+/',
+				onSelect(source) {
+					trackEvent('open-kbd-shortcuts', { source })
+					helpers.addDialog({ component: DefaultKeyboardShortcutsDialog })
+				},
+			},
 			{
 				id: 'insert-media',
 				label: 'action.insert-media',
@@ -502,7 +513,6 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 								}
 					}
 
-					if (!editor.canCreateShapes(ids)) return
 					editor.markHistoryStoppingPoint('duplicate shapes')
 					editor.duplicateShapes(ids, offset)
 
@@ -1234,6 +1244,21 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				},
 				checkbox: true,
 			},
+			{
+				id: 'toggle-keyboard-shortcuts',
+				label: {
+					default: 'action.toggle-keyboard-shortcuts',
+					menu: 'action.toggle-keyboard-shortcuts.menu',
+				},
+				readonlyOk: true,
+				onSelect(source) {
+					trackEvent('toggle-keyboard-shortcuts', { source })
+					editor.user.updateUserPreferences({
+						areKeyboardShortcutsEnabled: !editor.user.getAreKeyboardShortcutsEnabled(),
+					})
+				},
+				checkbox: true,
+			},
 			{
 				id: 'toggle-edge-scrolling',
 				label: {
@@ -1530,6 +1555,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'adjust-shape-styles',
 				label: 'a11y.adjust-shape-styles',
 				kbd: 'cmd+Enter,ctrl+Enter',
+				isRequiredA11yAction: true,
 				onSelect: async (source) => {
 					if (!canApplySelectionAction()) return
 
@@ -1543,6 +1569,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 			{
 				id: 'a11y-open-context-menu',
 				kbd: 'cmd+shift+Enter,ctrl+shift+Enter',
+				isRequiredA11yAction: true,
 				readonlyOk: true,
 				onSelect: async (source) => {
 					if (!canApplySelectionAction()) return
@@ -1595,6 +1622,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				id: 'a11y-repeat-shape-announce',
 				kbd: 'alt+r',
 				label: 'a11y.repeat-shape',
+				isRequiredA11yAction: true,
 				readonlyOk: true,
 				onSelect: async (source) => {
 					const selectedShapeIds = editor.getSelectedShapeIds()

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

@@ -107,6 +107,7 @@ export interface TLUiEventMap {
 	'toggle-paste-at-cursor': null
 	'toggle-lock': null
 	'toggle-reduce-motion': null
+	'toggle-keyboard-shortcuts': null
 	'toggle-edge-scrolling': null
 	'color-scheme': { value: string }
 	'exit-pen-mode': null
@@ -127,6 +128,7 @@ export interface TLUiEventMap {
 	'copy-link': null
 	'image-replace': null
 	'video-replace': null
+	'open-kbd-shortcuts': null
 	'rich-text': {
 		operation:
 			| 'bold'

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

@@ -352,7 +352,7 @@ async function handleClipboardThings(editor: Editor, things: ClipboardThing[], p
 
 							if (tldrawHtmlComment) {
 								try {
-									// First try parsing as plain JSON (version 2 format)
+									// First try parsing as plain JSON (version 2/3 formats)
 									let json
 									try {
 										json = JSON.parse(tldrawHtmlComment)
@@ -380,19 +380,32 @@ async function handleClipboardThings(editor: Editor, things: ClipboardThing[], p
 									}
 
 									// Handle versioned clipboard format
-									if (json.version === 2) {
-										// Version 2: Assets are plain, decompress only other data
+									if (json.version === 3) {
+										// Version 3: Assets are plain, decompress only other data
 										try {
-											r({ type: 'tldraw', data: json.data })
+											const otherData = JSON.parse(
+												lz.decompressFromBase64(json.data.otherCompressed) || '{}'
+											)
+											const reconstructedData = {
+												assets: json.data.assets || [],
+												...otherData,
+											}
+
+											r({ type: 'tldraw', data: reconstructedData })
 											return
 										} catch (error) {
 											r({
 												type: 'error',
 												data: json,
-												reason: `failed to parse version 2 clipboard data: ${error}`,
+												reason: `failed to decompress version 2 clipboard data: ${error}`,
 											})
 											return
 										}
+									}
+									if (json.version === 2) {
+										// Version 2: Everything is plain, this had issues with encoding... :-/
+										// TODO: nix this support after some time.
+										r({ type: 'tldraw', data: json.data })
 									} else {
 										// Version 1 or no version: Legacy format
 										if (typeof json.data === 'string') {
@@ -584,13 +597,21 @@ const handleNativeOrMenuCopy = async (editor: Editor) => {
 		return
 	}
 
-	// Version 2: Don't compress anything.
-	const stringifiedClipboard = JSON.stringify({
+	// Use versioned clipboard format for better compression
+	// Version 3: Don't compress assets, only compress other data
+	const { assets, ...otherData } = content
+	const clipboardData = {
 		type: 'application/tldraw',
 		kind: 'content',
-		version: 2,
-		data: content,
-	})
+		version: 3,
+		data: {
+			assets: assets || [], // Plain JSON, no compression
+			otherCompressed: lz.compressToBase64(JSON.stringify(otherData)), // Only compress non-asset data
+		},
+	}
+
+	// Don't compress the final structure - just use plain JSON
+	const stringifiedClipboard = JSON.stringify(clipboardData)
 
 	if (typeof navigator === 'undefined') {
 		return

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