@tldraw/editor 3.7.0-internal.acaf9fbbd3cc → 3.8.0-canary.0bbbc9e0c959

package/src/lib/editor/Editor.ts

@@ -77,6 +77,7 @@ import {
 	hasOwnProperty,
 	last,
 	lerp,
+	maxBy,
 	sortById,
 	sortByIndex,
 	structuredClone,
@@ -2264,6 +2265,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const leaderPresence = this.getCollaborators().find((c) => c.userId === followingUserId)
 		if (!leaderPresence) return null
 
+		if (!leaderPresence.camera || !leaderPresence.screenBounds) return null
+
 		// Fit their viewport inside of our screen bounds
 		// 1. calculate their viewport in page space
 		const { w: lw, h: lh } = leaderPresence.screenBounds
@@ -3161,6 +3164,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		if (!presence) return this
 
+		const cursor = presence.cursor
+		if (!cursor) return this
+
 		this.run(() => {
 			// If we're following someone, stop following them
 			if (this.getInstanceState().followingUserId !== null) {
@@ -3178,7 +3184,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				opts.animation = undefined
 			}
 
-			this.centerOnPoint(presence.cursor, opts)
+			this.centerOnPoint(cursor, opts)
 
 			// Highlight the user's cursor
 			const { highlightedUserIds } = this.getInstanceState()
@@ -3389,10 +3395,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!allPresenceRecords.length) return EMPTY_ARRAY
 		const userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort()
 		return userIds.map((id) => {
-			const latestPresence = allPresenceRecords
-				.filter((c) => c.userId === id)
-				.sort((a, b) => b.lastActivityTimestamp - a.lastActivityTimestamp)[0]
-			return latestPresence
+			const latestPresence = maxBy(
+				allPresenceRecords.filter((c) => c.userId === id),
+				(p) => p.lastActivityTimestamp ?? 0
+			)
+			return latestPresence!
 		})
 	}
 
@@ -4165,8 +4172,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Upload an asset to the store's asset service, returning a URL that can be used to resolve the
 	 * asset.
 	 */
-	async uploadAsset(asset: TLAsset, file: File): Promise<string> {
-		return await this.store.props.assets.upload(asset, file)
+	async uploadAsset(asset: TLAsset, file: File, abortSignal?: AbortSignal): Promise<string> {
+		return await this.store.props.assets.upload(asset, file, abortSignal)
 	}
 
 	/* --------------------- Shapes --------------------- */

package/src/lib/editor/managers/TextManager.ts

@@ -38,21 +38,13 @@ const spaceCharacterRegex = /\s/
 
 /** @public */
 export class TextManager {
-	baseElm: HTMLDivElement
+	private baseElem: HTMLDivElement
 
 	constructor(public editor: Editor) {
-		const container = this.editor.getContainer()
-
-		const elm = document.createElement('div')
-		elm.classList.add('tl-text')
-		elm.classList.add('tl-text-measure')
-		elm.tabIndex = -1
-		container.appendChild(elm)
-
-		this.baseElm = elm
-		editor.disposables.add(() => {
-			elm.remove()
-		})
+		this.baseElem = document.createElement('div')
+		this.baseElem.classList.add('tl-text')
+		this.baseElem.classList.add('tl-text-measure')
+		this.baseElem.tabIndex = -1
 	}
 
 	measureText(
@@ -75,8 +67,8 @@ export class TextManager {
 		}
 	): BoxModel & { scrollWidth: number } {
 		// Duplicate our base element; we don't need to clone deep
-		const elm = this.baseElm?.cloneNode() as HTMLDivElement
-		this.baseElm.insertAdjacentElement('afterend', elm)
+		const elm = this.baseElem.cloneNode() as HTMLDivElement
+		this.editor.getContainer().appendChild(elm)
 
 		elm.setAttribute('dir', 'auto')
 		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
@@ -223,8 +215,8 @@ export class TextManager {
 	): { text: string; box: BoxModel }[] {
 		if (textToMeasure === '') return []
 
-		const elm = this.baseElm?.cloneNode() as HTMLDivElement
-		this.baseElm.insertAdjacentElement('afterend', elm)
+		const elm = this.baseElem.cloneNode() as HTMLDivElement
+		this.editor.getContainer().appendChild(elm)
 
 		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
 		elm.setAttribute('dir', 'auto')

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -342,7 +342,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	): ReactElement | null | Promise<ReactElement | null>
 
 	/** @internal */
-	expandSelectionOutlinePx(shape: Shape): number {
+	expandSelectionOutlinePx(shape: Shape): number | Box {
 		return 0
 	}
 

package/src/lib/exports/FontEmbedder.ts

@@ -94,7 +94,8 @@ async function getCurrentDocumentFontFaces() {
 				if (rule instanceof CSSFontFaceRule) {
 					fontFaces.push(parseCssFontFaces(rule.cssText, styleSheet.href ?? document.baseURI))
 				} else if (rule instanceof CSSImportRule) {
-					fontFaces.push(fetchCssFontFaces(rule.href))
+					const absoluteUrl = new URL(rule.href, rule.parentStyleSheet?.href ?? document.baseURI)
+					fontFaces.push(fetchCssFontFaces(absoluteUrl.href))
 				}
 			}
 		} else if (styleSheet.href) {

package/src/lib/hooks/useEvent.tsx

@@ -1,3 +1,4 @@
+import { useAtom } from '@tldraw/state-react'
 import { assert } from '@tldraw/utils'
 import { useCallback, useDebugValue, useLayoutEffect, useRef } from 'react'
 
@@ -42,3 +43,31 @@ export function useEvent<Args extends Array<unknown>, Result>(
 		return fn(...args)
 	}, [])
 }
+
+/**
+ * like {@link useEvent}, but for use in reactive contexts - when the handler function changes, it
+ * will invalidate any reactive contexts that call it.
+ * @internal
+ */
+export function useReactiveEvent<Args extends Array<unknown>, Result>(
+	handler: (...args: Args) => Result
+): (...args: Args) => Result {
+	const handlerAtom = useAtom<(...args: Args) => Result>('useReactiveEvent', () => handler)
+
+	// In a real implementation, this would run before layout effects
+	useLayoutEffect(() => {
+		handlerAtom.set(handler)
+	})
+
+	useDebugValue(handler)
+
+	return useCallback(
+		(...args: Args) => {
+			// In a real implementation, this would throw if called during render
+			const fn = handlerAtom.get()
+			assert(fn, 'fn does not exist')
+			return fn(...args)
+		},
+		[handlerAtom]
+	)
+}

package/src/lib/utils/sync/LocalIndexedDb.ts

@@ -9,14 +9,16 @@ const STORE_PREFIX = 'TLDRAW_DOCUMENT_v2'
 const LEGACY_ASSET_STORE_PREFIX = 'TLDRAW_ASSET_STORE_v1'
 const dbNameIndexKey = 'TLDRAW_DB_NAME_INDEX_v2'
 
-const Table = {
+/** @internal */
+export const Table = {
 	Records: 'records',
 	Schema: 'schema',
 	SessionState: 'session_state',
 	Assets: 'assets',
 } as const
 
-type StoreName = (typeof Table)[keyof typeof Table]
+/** @internal */
+export type StoreName = (typeof Table)[keyof typeof Table]
 
 async function openLocalDb(persistenceKey: string) {
 	const storeId = STORE_PREFIX + persistenceKey
@@ -109,7 +111,7 @@ export class LocalIndexedDb {
 		})()
 	}
 
-	getDb() {
+	private getDb() {
 		return this.getDbPromise
 	}
 
@@ -288,14 +290,14 @@ export class LocalIndexedDb {
 		})
 	}
 
-	async getAsset(assetId: string): Promise<Blob | undefined> {
+	async getAsset(assetId: string): Promise<File | undefined> {
 		return await this.tx('readonly', [Table.Assets], async (tx) => {
 			const assetsStore = tx.objectStore(Table.Assets)
 			return await assetsStore.get(assetId)
 		})
 	}
 
-	async storeAsset(assetId: string, blob: Blob) {
+	async storeAsset(assetId: string, blob: File) {
 		await this.tx('readwrite', [Table.Assets], async (tx) => {
 			const assetsStore = tx.objectStore(Table.Assets)
 			await assetsStore.put(blob, assetId)

package/src/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.7.0-internal.acaf9fbbd3cc'
+export const version = '3.8.0-canary.0bbbc9e0c959'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2024-12-05T12:26:25.860Z',
-	patch: '2024-12-05T12:26:25.860Z',
+	minor: '2025-01-08T14:37:15.379Z',
+	patch: '2025-01-08T14:37:15.379Z',
 }