@tldraw/editor 4.6.0-next.20de11b7e238 → 4.6.0-next.241e87d4700a

package/editor.css

@@ -166,7 +166,6 @@
 	/* UI */
 	--tl-color-low: hsl(204, 16%, 94%);
 	--tl-color-low-border: hsl(204, 16%, 92%);
-	--tl-color-culled: hsl(204, 14%, 93%);
 	--tl-color-muted-none: hsl(0, 0%, 0%, 0%);
 	--tl-color-muted-0: hsl(0, 0%, 0%, 2%);
 	--tl-color-muted-1: hsl(0, 0%, 0%, 10%);
@@ -224,7 +223,6 @@
 	/* UI */
 	--tl-color-low: hsl(260, 4.5%, 10.5%);
 	--tl-color-low-border: hsl(207, 10%, 10%);
-	--tl-color-culled: hsl(210, 11%, 19%);
 	--tl-color-muted-none: hsl(0, 0%, 100%, 0%);
 	--tl-color-muted-0: hsl(0, 0%, 100%, 2%);
 	--tl-color-muted-1: hsl(0, 0%, 100%, 10%);
@@ -625,37 +623,6 @@ input,
 	overflow-wrap: break-word;
 }
 
-.tl-text-wrapper[data-font='draw'] {
-	font-family: var(--tl-font-draw);
-}
-
-.tl-text-wrapper[data-font='sans'] {
-	font-family: var(--tl-font-sans);
-}
-
-.tl-text-wrapper[data-font='serif'] {
-	font-family: var(--tl-font-serif);
-}
-
-.tl-text-wrapper[data-font='mono'] {
-	font-family: var(--tl-font-mono);
-}
-
-.tl-text-wrapper[data-align='start'],
-.tl-text-wrapper[data-align='start-legacy'] {
-	text-align: left;
-}
-
-.tl-text-wrapper[data-align='middle'],
-.tl-text-wrapper[data-align='middle-legacy'] {
-	text-align: center;
-}
-
-.tl-text-wrapper[data-align='end'],
-.tl-text-wrapper[data-align='end-legacy'] {
-	text-align: right;
-}
-
 .tl-plain-text-wrapper[data-isediting='true'] .tl-text-content {
 	opacity: 0;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.6.0-next.20de11b7e238",
+  "version": "4.6.0-next.241e87d4700a",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "4.6.0-next.20de11b7e238",
-    "@tldraw/state-react": "4.6.0-next.20de11b7e238",
-    "@tldraw/store": "4.6.0-next.20de11b7e238",
-    "@tldraw/tlschema": "4.6.0-next.20de11b7e238",
-    "@tldraw/utils": "4.6.0-next.20de11b7e238",
-    "@tldraw/validate": "4.6.0-next.20de11b7e238",
+    "@tldraw/state": "4.6.0-next.241e87d4700a",
+    "@tldraw/state-react": "4.6.0-next.241e87d4700a",
+    "@tldraw/store": "4.6.0-next.241e87d4700a",
+    "@tldraw/tlschema": "4.6.0-next.241e87d4700a",
+    "@tldraw/utils": "4.6.0-next.241e87d4700a",
+    "@tldraw/validate": "4.6.0-next.241e87d4700a",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/index.ts

@@ -95,6 +95,7 @@ export {
 	type TLStoreOptions,
 	type TLStoreSchemaOptions,
 } from './lib/config/createTLStore'
+export { type TLAnyAssetUtilConstructor } from './lib/config/defaultAssets'
 export { type TLAnyBindingUtilConstructor } from './lib/config/defaultBindings'
 export { coreShapes, type TLAnyShapeUtilConstructor } from './lib/config/defaultShapes'
 export {
@@ -121,6 +122,7 @@ export {
 	type TLUserPreferences,
 } from './lib/config/TLUserPreferences'
 export { DEFAULT_ANIMATION_OPTIONS, DEFAULT_CAMERA_OPTIONS, SIDES } from './lib/constants'
+export { AssetUtil, type TLAssetUtilConstructor } from './lib/editor/assets/AssetUtil'
 export {
 	BindingUtil,
 	type BindingOnChangeOptions,
@@ -140,11 +142,7 @@ export {
 } from './lib/editor/Editor'
 export { ClickManager, type TLClickState } from './lib/editor/managers/ClickManager/ClickManager'
 export { EdgeScrollManager } from './lib/editor/managers/EdgeScrollManager/EdgeScrollManager'
-export {
-	FontManager,
-	type TLFontFace,
-	type TLFontFaceSource,
-} from './lib/editor/managers/FontManager/FontManager'
+export { FontManager } from './lib/editor/managers/FontManager/FontManager'
 export { HistoryManager } from './lib/editor/managers/HistoryManager/HistoryManager'
 export { InputsManager } from './lib/editor/managers/InputsManager/InputsManager'
 export {
@@ -173,7 +171,24 @@ export {
 	type TLMeasureTextOpts,
 	type TLMeasureTextSpanOpts,
 } from './lib/editor/managers/TextManager/TextManager'
+export { DEFAULT_THEME } from './lib/editor/managers/ThemeManager/defaultThemes'
+export { ThemeManager, resolveThemes } from './lib/editor/managers/ThemeManager/ThemeManager'
 export { TickManager } from './lib/editor/managers/TickManager/TickManager'
+export { PerformanceApiAdapter } from './lib/editor/managers/PerformanceManager/PerformanceApiAdapter'
+export { PerformanceManager } from './lib/editor/managers/PerformanceManager/PerformanceManager'
+export {
+	type TLCameraEndPerfEvent,
+	type TLCameraStartPerfEvent,
+	type TLFramePerfEvent,
+	type TLInteractionEndPerfEvent,
+	type TLInteractionStartPerfEvent,
+	type TLPerfEventMap,
+	type TLPerfFrameTimeStats,
+	type TLPerfLongAnimationFrame,
+	type TLPerfLongAnimationFrameScript,
+	type TLShapeOperationPerfEvent,
+	type TLUndoRedoPerfEvent,
+} from './lib/editor/managers/PerformanceManager/perf-types'
 export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesManager/UserPreferencesManager'
 export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseBoxShapeUtil'
 export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
@@ -300,6 +315,7 @@ export {
 	useContainerIfExists,
 	type ContainerProviderProps,
 } from './lib/hooks/useContainer'
+export { useColorMode } from './lib/hooks/useColorMode'
 export { getCursor } from './lib/hooks/useCursor'
 export {
 	EditorContext,
@@ -314,7 +330,6 @@ export { useEvent, useReactiveEvent } from './lib/hooks/useEvent'
 export { useGlobalMenuIsOpen } from './lib/hooks/useGlobalMenuIsOpen'
 export { useShallowArrayIdentity, useShallowObjectIdentity } from './lib/hooks/useIdentity'
 export { useIsCropping } from './lib/hooks/useIsCropping'
-export { useIsDarkMode } from './lib/hooks/useIsDarkMode'
 export { useIsEditing } from './lib/hooks/useIsEditing'
 export { useLocalStore } from './lib/hooks/useLocalStore'
 export { usePassThroughMouseOverEvents } from './lib/hooks/usePassThroughMouseOverEvents'
@@ -512,3 +527,5 @@ registerTldrawLibraryVersion(
 	(globalThis as any).TLDRAW_LIBRARY_VERSION,
 	(globalThis as any).TLDRAW_LIBRARY_MODULES
 )
+
+export { getColorValue } from './lib/editor/managers/ThemeManager/defaultThemes'

package/src/lib/TldrawEditor.tsx

@@ -1,5 +1,14 @@
 import { MigrationSequence, Store } from '@tldraw/store'
-import { TLShape, TLStore, TLStoreSnapshot } from '@tldraw/tlschema'
+import {
+	TLShape,
+	TLStore,
+	TLStoreSnapshot,
+	TLTheme,
+	TLThemeId,
+	TLThemes,
+	registerColorsFromThemes,
+	registerFontsFromThemes,
+} from '@tldraw/tlschema'
 import { annotateError, Required } from '@tldraw/utils'
 import classNames from 'classnames'
 import React, {
@@ -18,10 +27,12 @@ import { DefaultErrorFallback } from './components/default-components/DefaultErr
 import { OptionalErrorBoundary } from './components/ErrorBoundary'
 import { createTLCurrentUser, TLCurrentUser } from './config/createTLCurrentUser'
 import { TLStoreBaseOptions } from './config/createTLStore'
+import { TLAnyAssetUtilConstructor } from './config/defaultAssets'
 import { TLAnyBindingUtilConstructor } from './config/defaultBindings'
 import { TLAnyShapeUtilConstructor } from './config/defaultShapes'
 import { TLEditorSnapshot } from './config/TLEditorSnapshot'
 import { Editor } from './editor/Editor'
+import { resolveThemes } from './editor/managers/ThemeManager/ThemeManager'
 import { TLStateNodeConstructor } from './editor/tools/StateNode'
 import { TLCameraOptions } from './editor/types/misc-types'
 import { useEditorComponents } from './hooks/EditorComponentsContext'
@@ -121,6 +132,11 @@ export interface TldrawEditorBaseProps {
 	 */
 	bindingUtils?: readonly TLAnyBindingUtilConstructor[]
 
+	/**
+	 * An array of asset utils to use in the editor.
+	 */
+	assetUtils?: readonly TLAnyAssetUtilConstructor[]
+
 	/**
 	 * An array of tools to add to the editor's state chart.
 	 */
@@ -157,9 +173,23 @@ export interface TldrawEditorBaseProps {
 	user?: TLCurrentUser
 
 	/**
-	 * Whether to infer dark mode from the user's OS. Defaults to false.
+	 * The editor's color scheme. Defaults to `'light'`.
+	 *
+	 * - `'light'` - Always use light mode.
+	 * - `'dark'` - Always use dark mode.
+	 * - `'system'` - Follow the OS color scheme preference.
 	 */
-	inferDarkMode?: boolean
+	colorScheme?: 'light' | 'dark' | 'system'
+
+	/**
+	 * Named themes for the editor.
+	 */
+	themes?: Partial<TLThemes>
+
+	/**
+	 * The id of the initially active theme. Defaults to `'default'`.
+	 */
+	initialTheme?: TLThemeId
 
 	/**
 	 * Camera options for the editor.
@@ -242,6 +272,7 @@ declare global {
 
 const EMPTY_SHAPE_UTILS_ARRAY = [] as const
 const EMPTY_BINDING_UTILS_ARRAY = [] as const
+const EMPTY_ASSET_UTILS_ARRAY = [] as const
 const EMPTY_TOOLS_ARRAY = [] as const
 /** @internal */
 export const TL_CONTAINER_CLASS = 'tl-container'
@@ -259,6 +290,13 @@ export const TldrawEditor = memo(function TldrawEditor({
 	deepLinks: _deepLinks,
 	...rest
 }: TldrawEditorProps) {
+	// Register custom colors and fonts before effects run. For external stores,
+	// users should also pass themes to createTLStore so they are
+	// registered before data is loaded into the store.
+	const resolvedThemes = resolveThemes(rest.themes)
+	registerColorsFromThemes(resolvedThemes)
+	registerFontsFromThemes(resolvedThemes)
+
 	const [container, setContainer] = useState<HTMLElement | null>(null)
 	const user = useMemo(() => _user ?? createTLCurrentUser(), [_user])
 
@@ -285,6 +323,7 @@ export const TldrawEditor = memo(function TldrawEditor({
 		...rest,
 		shapeUtils: rest.shapeUtils ?? EMPTY_SHAPE_UTILS_ARRAY,
 		bindingUtils: rest.bindingUtils ?? EMPTY_BINDING_UTILS_ARRAY,
+		assetUtils: rest.assetUtils ?? EMPTY_ASSET_UTILS_ARRAY,
 		tools: rest.tools ?? EMPTY_TOOLS_ARRAY,
 		components,
 		options: useShallowObjectIdentity(mergedOptions),
@@ -332,7 +371,7 @@ export const TldrawEditor = memo(function TldrawEditor({
 function TldrawEditorWithOwnStore(
 	props: Required<
 		TldrawEditorProps & { store: undefined; user: TLCurrentUser },
-		'shapeUtils' | 'bindingUtils' | 'tools'
+		'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'
 	>
 ) {
 	const {
@@ -341,17 +380,20 @@ function TldrawEditorWithOwnStore(
 		initialData,
 		shapeUtils,
 		bindingUtils,
+		assetUtils,
 		persistenceKey,
 		sessionId,
 		user,
 		assets,
 		users,
 		migrations,
+		themes,
 	} = props
 
 	const syncedStore = useLocalStore({
 		shapeUtils,
 		bindingUtils,
+		assetUtils,
 		initialData,
 		persistenceKey,
 		sessionId,
@@ -360,6 +402,7 @@ function TldrawEditorWithOwnStore(
 		assets,
 		users,
 		migrations,
+		themes,
 	})
 
 	return <TldrawEditorWithLoadingStore {...props} store={syncedStore} user={user} />
@@ -371,7 +414,7 @@ const TldrawEditorWithLoadingStore = memo(function TldrawEditorBeforeLoading({
 	...rest
 }: Required<
 	TldrawEditorProps & { store: TLStoreWithStatus; user: TLCurrentUser },
-	'shapeUtils' | 'bindingUtils' | 'tools'
+	'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'
 >) {
 	const container = useContainer()
 
@@ -417,22 +460,25 @@ function TldrawEditorWithReadyStore({
 	tools,
 	shapeUtils,
 	bindingUtils,
+	assetUtils,
 	user,
 	initialState,
 	autoFocus = true,
-	inferDarkMode,
 	// eslint-disable-next-line @typescript-eslint/no-deprecated
 	cameraOptions,
 	options,
 	licenseKey,
 	getShapeVisibility,
+	colorScheme,
 	assetUrls,
+	themes,
+	initialTheme,
 }: Required<
 	TldrawEditorProps & {
 		store: TLStore
 		user: TLCurrentUser
 	},
-	'shapeUtils' | 'bindingUtils' | 'tools'
+	'shapeUtils' | 'bindingUtils' | 'assetUtils' | 'tools'
 >) {
 	const { ErrorFallback } = useEditorComponents()
 	const container = useContainer()
@@ -448,44 +494,58 @@ function TldrawEditorWithReadyStore({
 	const editorOptionsRef = useRef({
 		// for these, it's because they're only used when the editor first mounts:
 		autoFocus: autoFocus && !noAutoFocus(),
-		inferDarkMode,
 		initialState,
+		colorScheme,
 
 		// for these, it's because we keep them up to date in a separate effect:
 		cameraOptions,
 		deepLinks,
+		themes,
+		initialTheme,
 	})
 
 	useLayoutEffect(() => {
 		editorOptionsRef.current = {
 			autoFocus: autoFocus && !noAutoFocus(),
-			inferDarkMode,
 			initialState,
+			colorScheme,
 			cameraOptions,
 			deepLinks,
+			themes,
+			initialTheme,
 		}
-	}, [autoFocus, inferDarkMode, initialState, cameraOptions, deepLinks])
+	}, [autoFocus, initialState, colorScheme, cameraOptions, deepLinks, themes, initialTheme])
 
 	useLayoutEffect(
 		() => {
-			const { autoFocus, inferDarkMode, initialState, cameraOptions, deepLinks } =
-				editorOptionsRef.current
+			const {
+				autoFocus,
+				initialState,
+				colorScheme: initColorScheme,
+				cameraOptions,
+				deepLinks,
+				themes,
+				initialTheme,
+			} = editorOptionsRef.current
 			const editor = new Editor({
 				store,
 				shapeUtils,
 				bindingUtils,
+				assetUtils,
 				tools,
 				getContainer: () => container,
 				user,
 				initialState,
 				// we should check for some kind of query parameter that turns off autofocus
 				autoFocus,
-				inferDarkMode,
 				cameraOptions,
 				options,
 				licenseKey,
 				getShapeVisibility,
+				colorScheme: initColorScheme,
 				fontAssetUrls: assetUrls?.fonts,
+				themes: themes,
+				initialTheme: initialTheme,
 			})
 
 			editor.updateViewportScreenBounds(canvasRef.current ?? container)
@@ -510,7 +570,9 @@ function TldrawEditorWithReadyStore({
 		},
 		// if any of these change, we need to recreate the editor.
 		[
+			assetUtils,
 			bindingUtils,
+			colorScheme,
 			container,
 			options,
 			shapeUtils,
@@ -539,6 +601,21 @@ function TldrawEditorWithReadyStore({
 		}
 	}, [editor, cameraOptions, options?.camera])
 
+	// keep the editor up to date with the latest theme definitions
+	useLayoutEffect(() => {
+		if (editor && themes) {
+			for (const def of Object.values(themes) as TLTheme[]) {
+				editor.updateTheme(def)
+			}
+		}
+	}, [editor, themes])
+
+	useLayoutEffect(() => {
+		if (editor && initialTheme) {
+			editor.setCurrentTheme(initialTheme)
+		}
+	}, [editor, initialTheme])
+
 	const crashingError = useSyncExternalStore(
 		useCallback(
 			(onStoreChange) => {

package/src/lib/components/MenuClickCapture.tsx

@@ -42,6 +42,22 @@ export function MenuClickCapture() {
 				}
 				rDidAPointerDownAndDragWhileMenuWasOpen.current = false
 			}
+			if (e.button === 2) {
+				// Swallow the contextmenu event that follows this right-click pointerdown.
+				// clearOpenMenus() below triggers a synchronous render that unmounts this
+				// component, so our React onContextMenu handler won't be around to catch it.
+				// Without this, the contextmenu event reaches the Radix Trigger and briefly
+				// opens a new context menu (which then immediately dismisses — causing a flash).
+				const ownerDocument = editor.getContainerDocument()
+				ownerDocument.addEventListener(
+					'contextmenu',
+					(event) => {
+						event.preventDefault()
+						event.stopImmediatePropagation()
+					},
+					{ capture: true, once: true }
+				)
+			}
 			editor.menus.clearOpenMenus()
 		},
 		[editor]
@@ -117,6 +133,10 @@ export function MenuClickCapture() {
 				onPointerDown={handlePointerDown}
 				onPointerMove={handlePointerMove}
 				onPointerUp={handlePointerUp}
+				onContextMenu={(e) => {
+					e.preventDefault()
+					e.stopPropagation()
+				}}
 			/>
 		)
 	)

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

@@ -6,8 +6,8 @@ import { memo, useEffect, useRef } from 'react'
 import { Editor } from '../../editor/Editor'
 import { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'
 import { getComputedStyle } from '../../exports/domUtils'
+import { useColorMode } from '../../hooks/useColorMode'
 import { useEditor } from '../../hooks/useEditor'
-import { useIsDarkMode } from '../../hooks/useIsDarkMode'
 import { useActivePeerIds$ } from '../../hooks/usePeerIds'
 
 interface CollaboratorIndicatorData {
@@ -133,14 +133,14 @@ export const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {
 
 	// Cache the selected color to avoid getComputedStyle on every render
 	const rSelectedColor = useRef<string | null>(null)
-	const isDarkMode = useIsDarkMode()
+	const colorMode = useColorMode()
 
 	useEffect(() => {
 		const timer = editor.timers.setTimeout(() => {
 			rSelectedColor.current = null
 		}, 0)
 		return () => clearTimeout(timer)
-	}, [isDarkMode, editor])
+	}, [colorMode, editor])
 
 	// Get active peer IDs (already handles time-based state transitions)
 	const activePeerIds$ = useActivePeerIds$()

package/src/lib/config/createTLStore.ts

@@ -8,15 +8,20 @@ import {
 	TLStore,
 	TLStoreProps,
 	TLStoreSnapshot,
+	TLThemes,
 	TLUser,
 	TLUserStore,
 	UserRecordType,
 	createCachedUserResolve,
 	createTLSchema,
 	createUserId,
+	registerColorsFromThemes,
+	registerFontsFromThemes,
 } from '@tldraw/tlschema'
 import { FileHelpers, assert } from '@tldraw/utils'
 import { Editor } from '../editor/Editor'
+import { resolveThemes } from '../editor/managers/ThemeManager/ThemeManager'
+import { TLAnyAssetUtilConstructor, checkAssets } from './defaultAssets'
 import { TLAnyBindingUtilConstructor, checkBindings } from './defaultBindings'
 import { TLAnyShapeUtilConstructor, checkShapesAndAddCore } from './defaultShapes'
 import { TLEditorSnapshot, loadSnapshot } from './TLEditorSnapshot'
@@ -36,6 +41,13 @@ export interface TLStoreBaseOptions {
 	/** How should this store upload & resolve assets? */
 	assets?: TLAssetStore
 
+	/**
+	 * Named theme definitions. When provided, custom color names are automatically
+	 * registered before the store is constructed so persisted data with those
+	 * colors passes validation on load.
+	 */
+	themes?: Partial<TLThemes>
+
 	/** How should this store resolve users for attribution? */
 	users?: TLUserStore
 
@@ -50,8 +62,9 @@ export type TLStoreSchemaOptions =
 	  }
 	| {
 			shapeUtils?: readonly TLAnyShapeUtilConstructor[]
-			migrations?: readonly MigrationSequence[]
 			bindingUtils?: readonly TLAnyBindingUtilConstructor[]
+			assetUtils?: readonly TLAnyAssetUtilConstructor[]
+			migrations?: readonly MigrationSequence[]
 			records?: Record<string, CustomRecordInfo>
 	  }
 
@@ -114,6 +127,10 @@ export function createTLSchemaFromUtils(
 			'bindingUtils' in opts && opts.bindingUtils
 				? utilsToMap(checkBindings(opts.bindingUtils))
 				: undefined,
+		assets:
+			'assetUtils' in opts && opts.assetUtils
+				? utilsToMap(checkAssets(opts.assetUtils))
+				: undefined,
 		records: 'records' in opts ? opts.records : undefined,
 		migrations: 'migrations' in opts ? opts.migrations : undefined,
 	})
@@ -134,8 +151,12 @@ export function createTLStore({
 	users = defaultUserStore,
 	onMount,
 	collaboration,
+	themes,
 	...rest
 }: TLStoreOptions = {}): TLStore {
+	const resolvedThemes = resolveThemes(themes)
+	registerColorsFromThemes(resolvedThemes)
+	registerFontsFromThemes(resolvedThemes)
 	const schema = createTLSchemaFromUtils(rest)
 
 	const store = new Store({

package/src/lib/config/defaultAssets.ts

@@ -0,0 +1,19 @@
+import { TLAssetUtilConstructor } from '../editor/assets/AssetUtil'
+
+/** @public */
+export type TLAnyAssetUtilConstructor = TLAssetUtilConstructor<any>
+
+export function checkAssets(customAssets: readonly TLAnyAssetUtilConstructor[]) {
+	const assets = [] as TLAnyAssetUtilConstructor[]
+
+	const addedCustomAssetTypes = new Set<string>()
+	for (const customAsset of customAssets) {
+		if (addedCustomAssetTypes.has(customAsset.type)) {
+			throw new Error(`Asset type "${customAsset.type}" is defined more than once`)
+		}
+		assets.push(customAsset)
+		addedCustomAssetTypes.add(customAsset.type)
+	}
+
+	return assets
+}