@tldraw/editor 4.6.0-next.0eb36d65eec3 → 4.6.0-next.1a05e8ec7833

package/src/lib/config/createTLStore.ts

@@ -1,4 +1,4 @@
-import { Signal } from '@tldraw/state'
+import { Signal, computed } from '@tldraw/state'
 import { HistoryEntry, MigrationSequence, SerializedStore, Store, StoreSchema } from '@tldraw/store'
 import {
 	CustomRecordInfo,
@@ -8,13 +8,24 @@ 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'
+import { defaultUserPreferences, getUserPreferences } from './TLUserPreferences'
 
 /** @public */
 export interface TLStoreBaseOptions {
@@ -30,6 +41,16 @@ 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
+
 	/** Called when the store is connected to an {@link @tldraw/editor#Editor}. */
 	onMount?(editor: Editor): void | (() => void)
 }
@@ -41,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>
 	  }
 
@@ -61,6 +83,21 @@ export type TLStoreEventInfo = HistoryEntry<TLRecord>
 
 const defaultAssetResolve: NonNullable<TLAssetStore['resolve']> = (asset) => asset.props.src
 
+const _defaultCurrentUser: Signal<TLUser | null> = computed('defaultCurrentUser', () => {
+	const prefs = getUserPreferences()
+	if (!prefs.id) return null
+	return UserRecordType.create({
+		id: createUserId(prefs.id),
+		name: prefs.name ?? '',
+		color: prefs.color ?? defaultUserPreferences.color,
+	})
+})
+
+/** @public */
+export const defaultUserStore: TLUserStore = {
+	currentUser: _defaultCurrentUser,
+}
+
 /** @public */
 export const inlineBase64AssetStore: TLAssetStore = {
 	upload: async (_, file) => {
@@ -90,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,
 	})
@@ -107,10 +148,15 @@ export function createTLStore({
 	defaultName = '',
 	id,
 	assets = inlineBase64AssetStore,
+	users = defaultUserStore,
 	onMount,
 	collaboration,
+	themes,
 	...rest
 }: TLStoreOptions = {}): TLStore {
+	const resolvedThemes = resolveThemes(themes)
+	registerColorsFromThemes(resolvedThemes)
+	registerFontsFromThemes(resolvedThemes)
 	const schema = createTLSchemaFromUtils(rest)
 
 	const store = new Store({
@@ -124,6 +170,15 @@ export function createTLStore({
 				resolve: assets.resolve ?? defaultAssetResolve,
 				remove: assets.remove ?? (() => Promise.resolve()),
 			},
+			users: {
+				currentUser: users.currentUser,
+				resolve:
+					users.resolve ??
+					createCachedUserResolve((userId) => {
+						const current = users.currentUser.get()
+						return current && current.id === createUserId(userId) ? current : null
+					}),
+			},
 			onMount: (editor) => {
 				assert(editor instanceof Editor)
 				onMount?.(editor)

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
+}