@tldraw/editor 5.1.1 → 5.2.0-canary.0878dbd31f0d

package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.test.ts

@@ -1,11 +1,17 @@
-import { PageRecordType, type TLInstancePresence } from '@tldraw/tlschema'
+import {
+	PageRecordType,
+	createUserId,
+	type TLInstancePresence,
+	type TLUserId,
+} from '@tldraw/tlschema'
 import { vi } from 'vitest'
+import { createTLStore } from '../../../config/createTLStore'
 import type { Editor } from '../../Editor'
 import { CollaboratorsManager } from './CollaboratorsManager'
 
 const currentPageId = PageRecordType.createId('page')
 
-function createPresence(userId: string): TLInstancePresence {
+function createPresence(userId: TLUserId): TLInstancePresence {
 	return {
 		typeName: 'instance_presence',
 		id: `instance_presence:${userId}` as TLInstancePresence['id'],
@@ -34,6 +40,9 @@ function createEditor(presences: TLInstancePresence[] = []) {
 	}))
 	const userGetId = vi.fn(() => 'current-user')
 
+	const store = createTLStore()
+	store.put(presences)
+
 	const editor = {
 		options: {
 			collaboratorCheckIntervalMs: 1000,
@@ -45,14 +54,9 @@ function createEditor(presences: TLInstancePresence[] = []) {
 		},
 		user: {
 			getId: userGetId,
+			getRecordId: () => createUserId(userGetId()),
 		},
-		store: {
-			query: {
-				records: vi.fn(() => ({
-					get: () => presences,
-				})),
-			},
-		},
+		store,
 		getInstanceState,
 		getCurrentPageId: vi.fn(() => currentPageId),
 	} as unknown as Editor
@@ -88,10 +92,19 @@ describe(CollaboratorsManager, () => {
 		expect(setInterval).toHaveBeenCalledTimes(1)
 	})
 
+	it("excludes the local user's own other sessions", () => {
+		const ownSession = createPresence(createUserId('current-user'))
+		const peer = createPresence(createUserId('peer'))
+		const { editor } = createEditor([ownSession, peer])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getCollaborators()).toEqual([peer])
+	})
+
 	it('reads instance state once when filtering visible collaborators', () => {
 		const { editor, getInstanceState } = createEditor([
-			createPresence('user-1'),
-			createPresence('user-2'),
+			createPresence(createUserId('user-1')),
+			createPresence(createUserId('user-2')),
 		])
 		const manager = new CollaboratorsManager(editor)
 
@@ -101,9 +114,9 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('hides idle collaborators that are following us', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
-		presence.followingUserId = 'current-user'
+		presence.followingUserId = createUserId('current-user')
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
 
@@ -111,9 +124,9 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('shows idle collaborators that are following us when they have a chat message', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
-		presence.followingUserId = 'current-user'
+		presence.followingUserId = createUserId('current-user')
 		presence.chatMessage = 'hi'
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
@@ -122,11 +135,25 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('shows idle collaborators that are not following us', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
 
 		expect(manager.getVisibleCollaborators()).toHaveLength(1)
 	})
+
+	it('shows newly-joined collaborators that have not recorded any activity yet', () => {
+		// A peer who has joined but not moved their pointer broadcasts the default
+		// `lastActivityTimestamp` of 0. They should still be treated as active so
+		// they appear in the people menu / face pile. See issue #9017.
+		const zero = createPresence(createUserId('zero'))
+		zero.lastActivityTimestamp = 0
+		const nullish = createPresence(createUserId('nullish'))
+		nullish.lastActivityTimestamp = null
+		const { editor } = createEditor([zero, nullish])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(2)
+	})
 })

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

@@ -37,7 +37,7 @@ export class CollaboratorsManager {
 	@computed
 	private _getCollaboratorsQuery() {
 		return this.editor.store.query.records('instance_presence', () => ({
-			userId: { neq: this.editor.user.getId() },
+			userId: { neq: this.editor.user.getRecordId() },
 		}))
 	}
 
@@ -88,14 +88,17 @@ export class CollaboratorsManager {
 		if (!collaborators.length) return EMPTY_ARRAY
 
 		const { followingUserId, highlightedUserIds } = this.editor.getInstanceState()
-		const currentUserId = this.editor.user.getId()
+		const currentUserId = this.editor.user.getRecordId()
 
 		return collaborators.filter((presence) => {
 			const { lastActivityTimestamp, userId, chatMessage } = presence
 
-			// Treat a missing `lastActivityTimestamp` as "active right now" (elapsed = 0)
-			// so newly-joined peers aren't immediately classified as idle/inactive.
-			const elapsed = Math.max(0, now - (lastActivityTimestamp ?? now))
+			// Treat a missing or zero `lastActivityTimestamp` as "active right now"
+			// (elapsed = 0) so newly-joined peers aren't immediately classified as
+			// idle/inactive. The broadcast default for peers who haven't moved their
+			// pointer yet is `0` (e.g. someone on a touch device who joins and just
+			// watches), so a plain `?? now` would leave them hidden. See issue #9017.
+			const elapsed = lastActivityTimestamp ? Math.max(0, now - lastActivityTimestamp) : 0
 
 			if (elapsed > collaboratorInactiveTimeoutMs) {
 				// Inactive: If they're inactive, only show if we're following them or they're highlighted

package/src/lib/editor/managers/FocusManager/FocusManager.test.ts

@@ -14,7 +14,7 @@ describe('FocusManager', () => {
 			getInstanceState: Mock
 			updateInstanceState: Mock
 			getContainer: Mock
-			isIn: Mock
+			getEditingShapeId: Mock
 			getSelectedShapeIds: Mock
 			complete: Mock
 		}
@@ -51,7 +51,7 @@ describe('FocusManager', () => {
 			updateInstanceState: vi.fn(),
 			getContainer: vi.fn(() => mockContainer),
 			getContainerDocument: vi.fn(() => document),
-			isIn: vi.fn(() => false),
+			getEditingShapeId: vi.fn(() => null),
 			getSelectedShapeIds: vi.fn(() => []),
 			complete: vi.fn(),
 		} as any
@@ -243,7 +243,7 @@ describe('FocusManager', () => {
 		})
 
 		it('should return early when editor is in editing mode', () => {
-			editor.isIn.mockReturnValue(true)
+			editor.getEditingShapeId.mockReturnValue('shape:1')
 			const event = new KeyboardEvent('keydown', { key: 'Tab' })
 
 			keydownHandler(event)
@@ -407,7 +407,7 @@ describe('FocusManager', () => {
 			const keydownCall = addEventListenerCalls.find((call: any) => call[0] === 'keydown')
 			const keydownHandler = keydownCall![1]
 
-			editor.isIn.mockReturnValue(true) // Editing mode
+			editor.getEditingShapeId.mockReturnValue('shape:1') // Editing mode
 
 			const event = new KeyboardEvent('keydown', { key: 'Tab' })
 			keydownHandler(event)

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

@@ -63,8 +63,7 @@ export class FocusManager {
 		const activeEl = container.ownerDocument.activeElement
 		// Edit mode should remove the focus ring, however if the active element's
 		// parent is the contextual toolbar, then allow it.
-		if (this.editor.isIn('select.editing_shape') && !activeEl?.closest('.tlui-contextual-toolbar'))
-			return
+		if (this.editor.getEditingShapeId() && !activeEl?.closest('.tlui-contextual-toolbar')) return
 		if (activeEl === container && this.editor.getSelectedShapeIds().length > 0) return
 		if (['Tab', 'ArrowUp', 'ArrowDown'].includes(keyEvent.key)) {
 			container.classList.remove('tl-container__no-focus-ring')

package/src/lib/editor/managers/FontManager/FontManager.test.ts

@@ -15,12 +15,14 @@ import { FontManager } from './FontManager'
 vi.mock('../../Editor')
 
 // Mock globals
-global.FontFace = vi.fn().mockImplementation((family, src, descriptors) => ({
-	family,
-	src,
-	...descriptors,
-	load: vi.fn(() => Promise.resolve()),
-}))
+global.FontFace = vi.fn().mockImplementation(function (family: any, src: any, descriptors: any) {
+	return {
+		family,
+		src,
+		...descriptors,
+		load: vi.fn(() => Promise.resolve()),
+	}
+})
 
 Object.defineProperty(global.document, 'fonts', {
 	value: {
@@ -200,9 +202,11 @@ describe('FontManager', () => {
 			const font = createMockFont()
 			const error = new Error('Font load failed')
 
-			;(global.FontFace as Mock).mockReturnValue({
-				family: font.family,
-				load: vi.fn(() => Promise.reject(error)),
+			;(global.FontFace as Mock).mockImplementationOnce(function () {
+				return {
+					family: font.family,
+					load: vi.fn(() => Promise.reject(error)),
+				}
 			})
 
 			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})

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

@@ -82,20 +82,22 @@ const mockEditor = {
 	getContainerDocument: vi.fn(() => mockDocument),
 } as unknown as Editor
 
-global.Range = vi.fn(() => ({
-	setStart: vi.fn(),
-	setEnd: vi.fn(),
-	getClientRects: vi.fn(() => [
-		{
-			width: 10,
-			height: 16,
-			left: 0,
-			top: 0,
-			right: 10,
-			bottom: 16,
-		},
-	]),
-})) as any
+global.Range = vi.fn(function () {
+	return {
+		setStart: vi.fn(),
+		setEnd: vi.fn(),
+		getClientRects: vi.fn(() => [
+			{
+				width: 10,
+				height: 16,
+				left: 0,
+				top: 0,
+				right: 10,
+				bottom: 16,
+			},
+		]),
+	}
+}) as any
 
 describe('TextManager', () => {
 	let textManager: TextManager

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts

@@ -1,4 +1,5 @@
 import { atom } from '@tldraw/state'
+import { createUserId } from '@tldraw/tlschema'
 import { Mocked, vi } from 'vitest'
 import { TLCurrentUser } from '../../../config/createTLCurrentUser'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
@@ -296,8 +297,17 @@ describe('UserPreferencesManager', () => {
 			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
-		describe('getId', () => {
-			it('should return user id', () => {
+		describe('getExternalId / getRecordId', () => {
+			it('should return the raw external user id', () => {
+				expect(userPreferencesManager.getExternalId()).toBe(mockUserPreferences.id)
+			})
+
+			it('should return the prefixed record id', () => {
+				expect(userPreferencesManager.getRecordId()).toBe(createUserId(mockUserPreferences.id))
+			})
+
+			it('getId() still returns the external id', () => {
+				// eslint-disable-next-line @typescript-eslint/no-deprecated
 				expect(userPreferencesManager.getId()).toBe(mockUserPreferences.id)
 			})
 		})

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

@@ -1,4 +1,5 @@
 import { atom, computed } from '@tldraw/state'
+import { createUserId, TLUserId } from '@tldraw/tlschema'
 import { TLCurrentUser } from '../../../config/createTLCurrentUser'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { getGlobalWindow } from '../../../utils/dom'
@@ -39,7 +40,7 @@ export class UserPreferencesManager {
 	}
 	@computed getUserPreferences() {
 		return {
-			id: this.getId(),
+			id: this.getExternalId(),
 			name: this.getName(),
 			locale: this.getLocale(),
 			color: this.getColor(),
@@ -89,10 +90,34 @@ export class UserPreferencesManager {
 		)
 	}
 
-	@computed getId() {
+	/**
+	 * The current user's raw, app-provided id — the value set in the user's
+	 * {@link @tldraw/editor#TLUserPreferences}. Use this when you need the id your application
+	 * assigned to the user. To compare against or look up store records, use
+	 * {@link UserPreferencesManager.getRecordId} instead.
+	 */
+	@computed getExternalId(): string {
 		return this.user.userPreferences.get().id
 	}
 
+	/**
+	 * @deprecated Use {@link UserPreferencesManager.getExternalId} for the raw app-provided id, or
+	 * {@link UserPreferencesManager.getRecordId} for the prefixed `TLUserId` record id.
+	 */
+	@computed getId() {
+		return this.getExternalId()
+	}
+
+	/**
+	 * The current user's id as a tldraw {@link @tldraw/tlschema#TLUserId} record id (prefixed
+	 * with `user:`). Use this when comparing against or looking up store records, such as a
+	 * presence record's `userId` or `followingUserId`. For the raw, app-provided id, use
+	 * {@link UserPreferencesManager.getExternalId}.
+	 */
+	@computed getRecordId(): TLUserId {
+		return createUserId(this.getExternalId())
+	}
+
 	@computed getName() {
 		return this.user.userPreferences.get().name?.trim() ?? defaultUserPreferences.name
 	}

package/src/lib/editor/overlays/strokeShapeIndicators.ts

@@ -0,0 +1,86 @@
+import { createComputedCache } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import type { Editor } from '../Editor'
+
+const indicatorPathCache = createComputedCache(
+	'shapeIndicatorPath',
+	(editor: Editor, shape: TLShape) => {
+		const util = editor.getShapeUtil(shape)
+		return util.getIndicatorPath(shape)
+	},
+	{
+		areRecordsEqual(a, b) {
+			return a.props === b.props
+		},
+	}
+)
+
+/**
+ * Combine every batchable shape indicator into a single page-space `Path2D` and
+ * emit one stroke call. Shapes whose indicator needs an evenodd clip (e.g.
+ * arrows with labels or complex arrowheads) can't be batched — they still
+ * stroke individually inside a save/restore with `ctx.clip` applied.
+ *
+ * Shared by any overlay util that paints shape indicators (e.g. collaborator
+ * selections).
+ *
+ * @public
+ */
+export function strokeShapeIndicators(
+	editor: Editor,
+	ctx: CanvasRenderingContext2D,
+	shapeIds: TLShapeId[]
+): void {
+	if (shapeIds.length === 0) return
+
+	const batched = new Path2D()
+
+	for (const shapeId of shapeIds) {
+		const shape = editor.getShape(shapeId)
+		if (!shape || shape.isLocked) continue
+
+		const pageTransform = editor.getShapePageTransform(shape)
+		if (!pageTransform) continue
+
+		const indicatorPath = indicatorPathCache.get(editor, shape.id)
+		if (!indicatorPath) continue
+
+		if (indicatorPath instanceof Path2D) {
+			batched.addPath(indicatorPath, pageTransform)
+			continue
+		}
+
+		const { path, clipPath, additionalPaths } = indicatorPath
+
+		if (!clipPath) {
+			batched.addPath(path, pageTransform)
+			if (additionalPaths) {
+				for (const p of additionalPaths) batched.addPath(p, pageTransform)
+			}
+			continue
+		}
+
+		// Clipped case: fall back to an individual stroke. Rare (arrows with
+		// labels / complex arrowheads), so the extra save/restore/stroke
+		// pair per such shape isn't worth batching away.
+		ctx.save()
+		ctx.transform(
+			pageTransform.a,
+			pageTransform.b,
+			pageTransform.c,
+			pageTransform.d,
+			pageTransform.e,
+			pageTransform.f
+		)
+		ctx.save()
+		ctx.clip(clipPath, 'evenodd')
+		ctx.stroke(path)
+		ctx.restore()
+		if (additionalPaths) {
+			for (const p of additionalPaths) ctx.stroke(p)
+		}
+		ctx.restore()
+	}
+
+	ctx.stroke(batched)
+}

package/src/lib/editor/tools/StateNode.ts

@@ -268,8 +268,6 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	onLongPress?(info: TLPointerEventInfo): void
 	onPointerUp?(info: TLPointerEventInfo): void
 	onDoubleClick?(info: TLClickEventInfo): void
-	onTripleClick?(info: TLClickEventInfo): void
-	onQuadrupleClick?(info: TLClickEventInfo): void
 	onRightClick?(info: TLPointerEventInfo): void
 	onMiddleClick?(info: TLPointerEventInfo): void
 	onKeyDown?(info: TLKeyboardEventInfo): void

package/src/lib/editor/types/event-types.ts

@@ -24,7 +24,7 @@ export type TLPointerEventName =
 	| 'middle_click'
 
 /** @public */
-export type TLCLickEventName = 'double_click' | 'triple_click' | 'quadruple_click'
+export type TLCLickEventName = 'double_click'
 
 /** @public */
 export type TLPinchEventName = 'pinch_start' | 'pinch' | 'pinch_end'
@@ -72,7 +72,7 @@ export type TLClickEventInfo = TLBaseEventInfo & {
 	point: VecLike
 	pointerId: number
 	button: number
-	phase: 'down' | 'up' | 'settle'
+	phase: 'down' | 'up' | 'settle-down' | 'settle-up'
 } & TLPointerEventTarget
 
 /** @public */
@@ -173,8 +173,6 @@ export interface TLEventHandlers {
 	onLongPress: TLPointerEvent
 	onRightClick: TLPointerEvent
 	onDoubleClick: TLClickEvent
-	onTripleClick: TLClickEvent
-	onQuadrupleClick: TLClickEvent
 	onMiddleClick: TLPointerEvent
 	onPointerUp: TLPointerEvent
 	onKeyDown: TLKeyboardEvent
@@ -206,7 +204,5 @@ export const EVENT_NAME_MAP: Record<
 	complete: 'onComplete',
 	interrupt: 'onInterrupt',
 	double_click: 'onDoubleClick',
-	triple_click: 'onTripleClick',
-	quadruple_click: 'onQuadrupleClick',
 	tick: 'onTick',
 }

package/src/lib/hooks/usePresence.ts

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { TLInstancePresence } from '@tldraw/tlschema'
+import { TLInstancePresence, TLUserId } from '@tldraw/tlschema'
 import { useEditor } from './useEditor'
 
 // TODO: maybe move this to a computed property on the App class?
@@ -7,7 +7,7 @@ import { useEditor } from './useEditor'
  * @returns The latest presence of the user matching userId
  * @public
  */
-export function usePresence(userId: string): TLInstancePresence | null {
+export function usePresence(userId: TLUserId): TLInstancePresence | null {
 	const editor = useEditor()
 
 	const latestPresence = useValue(

package/src/lib/license/LicenseProvider.tsx

@@ -6,7 +6,9 @@ import { LicenseManager } from './LicenseManager'
 export const LicenseContext = createContext({} as LicenseManager)
 
 /** @internal */
-export const useLicenseContext = () => useContext(LicenseContext)
+export function useLicenseContext() {
+	return useContext(LicenseContext)
+}
 
 function shouldHideEditorAfterDelay(licenseState: string): boolean {
 	return licenseState === 'expired' || licenseState === 'unlicensed-production'

package/src/lib/primitives/utils.ts

@@ -363,7 +363,7 @@ export function toFixed(v: number) {
  * Check if a float is safe to use. ie: Not too big or small.
  * @public
  */
-export const isSafeFloat = (n: number) => {
+export function isSafeFloat(n: number) {
 	return Math.abs(n) < Number.MAX_SAFE_INTEGER
 }
 

package/src/lib/utils/dom.ts

@@ -86,14 +86,16 @@ export function releasePointerCapture(
  *
  * @public
  */
-export const stopEventPropagation = (e: any) => e.stopPropagation()
+export function stopEventPropagation(e: any) {
+	return e.stopPropagation()
+}
 
 /** @internal */
-export const setStyleProperty = (
+export function setStyleProperty(
 	elm: HTMLElement | null,
 	property: string,
 	value: string | number
-) => {
+) {
 	if (!elm) return
 	elm.style.setProperty(property, String(value))
 }

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 = '5.1.1'
+export const version = '5.2.0-canary.0878dbd31f0d'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-06-03T10:26:13.606Z',
-	patch: '2026-06-12T16:33:21.130Z',
+	minor: '2026-06-12T16:59:24.514Z',
+	patch: '2026-06-12T16:59:24.514Z',
 }