@tldraw/editor 5.4.0-next.ebc95cf01337 → 5.4.0

package/src/index.ts

@@ -290,6 +290,7 @@ export {
 export { getOwnerDocument, getOwnerWindow } from './lib/exports/domUtils'
 export { getSvgAsImage } from './lib/exports/getSvgAsImage'
 export { tlenv, tlenvReactive } from './lib/globals/environment'
+export { tleditors } from './lib/globals/editors'
 export { tlmenus } from './lib/globals/menus'
 export { tltime } from './lib/globals/time'
 export {
@@ -341,7 +342,11 @@ export {
 	type LicenseState,
 	type ValidLicenseKeyResult,
 } from './lib/license/LicenseManager'
-export { LICENSE_TIMEOUT, useLicenseContext } from './lib/license/LicenseProvider'
+export {
+	LICENSE_TIMEOUT,
+	useLicenseContext,
+	useMaybeLicenseManager,
+} from './lib/license/LicenseProvider'
 export { useLicenseFeatureFlag } from './lib/license/useLicenseManagerState'
 export {
 	defaultTldrawOptions,

package/src/lib/TldrawEditor.tsx

@@ -51,11 +51,11 @@ import { useLocalStore } from './hooks/useLocalStore'
 import { useRefState } from './hooks/useRefState'
 import { useStateAttribute } from './hooks/useStateAttribute'
 import { useZoomCss } from './hooks/useZoomCss'
-import { LicenseProvider } from './license/LicenseProvider'
+import { LicenseProvider, useLicenseContext } from './license/LicenseProvider'
 import { Watermark } from './license/Watermark'
 import { TldrawOptions } from './options'
 import { TLDeepLinkOptions } from './utils/deepLinks'
-import { getGlobalDocument } from './utils/dom'
+import { getGlobalDocument, getGlobalWindow } from './utils/dom'
 import { TLTextOptions } from './utils/richText'
 import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
@@ -433,11 +433,20 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
 	const container = useContainer()
 
 	useLayoutEffect(() => {
-		if (user.userPreferences.get().colorScheme === 'dark') {
+		// Resolve the scheme the same way UserPreferencesManager.getIsDarkMode will once the
+		// editor mounts, so a 'system' user on a dark OS doesn't get a light loading screen that
+		// flips dark on mount.
+		const scheme = user.userPreferences.get().colorScheme ?? rest.colorScheme ?? 'light'
+		const isDark =
+			scheme === 'dark' ||
+			(scheme === 'system' &&
+				typeof window !== 'undefined' &&
+				!!getGlobalWindow().matchMedia?.('(prefers-color-scheme: dark)').matches)
+		if (isDark) {
 			container.classList.remove('tl-theme__light')
 			container.classList.add('tl-theme__dark')
 		}
-	}, [container, user])
+	}, [container, user, rest.colorScheme])
 
 	const { LoadingScreen } = useEditorComponents()
 
@@ -497,6 +506,7 @@ function TldrawEditorWithReadyStore({
 >) {
 	const { ErrorFallback } = useEditorComponents()
 	const container = useContainer()
+	const licenseManager = useLicenseContext()
 
 	const [editor, setEditor] = useRefState<Editor | null>(null)
 
@@ -563,6 +573,7 @@ function TldrawEditorWithReadyStore({
 				themes: themes,
 				initialTheme: initialTheme,
 			})
+			editor.licenseManager = licenseManager
 
 			editor.updateViewportScreenBounds(canvasRef.current ?? container)
 
@@ -598,6 +609,7 @@ function TldrawEditorWithReadyStore({
 			user,
 			setEditor,
 			licenseKey,
+			licenseManager,
 			getShapeVisibility,
 			assetUrls,
 		]

package/src/lib/components/MenuClickCapture.tsx

@@ -72,6 +72,22 @@ export function MenuClickCapture() {
 			const button = getPointerEventButton(e)
 			if (button !== 0 && button !== 2) return
 
+			if (button === 2 && editor.options.rightClickPanning) {
+				// Forward right-click pointerdown through the canvas's own handler so
+				// pointer capture is set on the canvas (load-bearing: without this
+				// the context menu briefly flashes closed during consecutive right-clicks).
+				// The canvas owns the rest of the gesture, so don't capture or mark
+				// pointing here: this element's pointerup would never fire, leaving it
+				// mounted over the canvas after the menu closes.
+				// We don't clearOpenMenus() — Radix's DismissableLayer closes the menu
+				// via outside-click detection, keeping its internal state in sync.
+				const canvas =
+					editor.getContainer().querySelector<HTMLDivElement>('.tl-canvas') ?? e.currentTarget
+				canvasEvents.onPointerDown?.({ ...e, currentTarget: canvas })
+				swallowNextNativeContextMenu()
+				return
+			}
+
 			flushSync(() => setIsPointing(true))
 			setPointerCapture(e.currentTarget, e)
 			rPointerState.current = {
@@ -82,23 +98,9 @@ export function MenuClickCapture() {
 			}
 
 			if (button === 2) {
-				if (!editor.options.rightClickPanning) {
-					// Right-click panning off: close the open menu and swallow the native
-					// contextmenu that would otherwise briefly open a new one (causing a flash).
-					swallowNextNativeContextMenu()
-					editor.menus.clearOpenMenus()
-					return
-				}
-				// Forward right-click pointerdown through the canvas's own handler so
-				// pointer capture is also set on the canvas (load-bearing: without this
-				// the context menu briefly flashes closed during consecutive right-clicks).
-				// We don't clearOpenMenus() — Radix's DismissableLayer closes the menu
-				// via outside-click detection, keeping its internal state in sync.
-				const canvas =
-					editor.getContainer().querySelector<HTMLDivElement>('.tl-canvas') ?? e.currentTarget
-				canvasEvents.onPointerDown?.({ ...e, currentTarget: canvas })
+				// Right-click panning off: swallow the native contextmenu that would otherwise
+				// briefly open a new menu (causing a flash) once the open one closes below.
 				swallowNextNativeContextMenu()
-				return
 			}
 
 			editor.menus.clearOpenMenus()
@@ -113,8 +115,7 @@ export function MenuClickCapture() {
 
 			// Left-click: wait for the drag threshold before forwarding anything, then
 			// replay pointerdown at the original start so the editor records the
-			// correct drag origin. Right-click forwards moves immediately (pointerdown
-			// was already dispatched in handlePointerDown).
+			// correct drag origin. Right-click forwards moves immediately.
 			if (state.button !== 2 && !state.isDragging) {
 				if (
 					Vec.Dist2(state.start, new Vec(e.clientX, e.clientY)) <=

package/src/lib/components/default-components/CanvasOverlays.tsx

@@ -94,11 +94,9 @@ export const CanvasOverlays = memo(function CanvasOverlays() {
 					if (!shape || shape.type === 'group') continue
 
 					const geometry = editor.getShapeGeometry(shape)
-					const pageTransform = editor.getShapePageTransform(shape)
-					if (!pageTransform) continue
+					const m = editor.getShapePageTransform(shape)
 
 					ctx.save()
-					const m = pageTransform
 					ctx.transform(m.a, m.b, m.c, m.d, m.e, m.f)
 
 					// Outline

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -220,7 +220,7 @@ My browser: ${navigator.userAgent}`
 									Reset data
 								</button>
 								<button className="tlui-button tl-error-boundary__refresh" onClick={refresh}>
-									Refresh Page
+									Refresh page
 								</button>
 							</div>
 						</div>

package/src/lib/config/TLUserPreferences.test.ts

@@ -1,4 +1,5 @@
-import { describe, expect, it } from 'vitest'
+import { deleteFromLocalStorage, setInLocalStorage } from '@tldraw/utils'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { defaultUserPreferences, userTypeValidator } from './TLUserPreferences'
 
 describe('TLUserPreferences consistency', () => {
@@ -39,3 +40,19 @@ describe('TLUserPreferences consistency', () => {
 		expect(validatorKeys).toEqual(expected)
 	})
 })
+
+describe('loading stored preferences', () => {
+	afterEach(() => {
+		deleteFromLocalStorage('TLDRAW_USER_DATA_v3')
+		vi.resetModules()
+	})
+
+	it.each([
+		['corrupt json', '{not json'],
+		['a snapshot whose user is not an object', JSON.stringify({ version: 1, user: null })],
+	])('falls back to fresh preferences for %s', async (_label, stored) => {
+		setInLocalStorage('TLDRAW_USER_DATA_v3', stored)
+		const { getUserPreferences } = await import('./TLUserPreferences')
+		expect(getUserPreferences().id).toEqual(expect.any(String))
+	})
+})

package/src/lib/config/TLUserPreferences.ts

@@ -201,9 +201,9 @@ function migrateUserPreferences(userData: unknown): TLUserPreferences {
 
 	const snapshot = structuredClone(userData) as any
 
-	migrateSnapshot(snapshot)
-
 	try {
+		// migration dereferences `user`, which malformed stored data may not have as an object
+		migrateSnapshot(snapshot)
 		return userTypeValidator.validate(snapshot.user)
 	} catch {
 		return getFreshUserPreferences()
@@ -211,8 +211,12 @@ function migrateUserPreferences(userData: unknown): TLUserPreferences {
 }
 
 function loadUserPreferences(): TLUserPreferences {
-	const userData = (JSON.parse(getFromLocalStorage(USER_DATA_KEY) || 'null') ??
-		null) as null | UserDataSnapshot
+	let userData: unknown = null
+	try {
+		userData = JSON.parse(getFromLocalStorage(USER_DATA_KEY) || 'null')
+	} catch {
+		// corrupt stored data is treated as absent rather than blocking the editor from mounting
+	}
 
 	return migrateUserPreferences(userData)
 }

package/src/lib/config/createTLStore.ts

@@ -181,7 +181,7 @@ export function createTLStore({
 			},
 			onMount: (editor) => {
 				assert(editor instanceof Editor)
-				onMount?.(editor)
+				return onMount?.(editor)
 			},
 			collaboration,
 		},