@tldraw/editor 3.13.0-canary.a2884bb1bab2 → 3.13.0-canary.bbec36f93805

package/src/lib/editor/Editor.ts

@@ -42,6 +42,7 @@ import {
 	TLImageAsset,
 	TLInstance,
 	TLInstancePageState,
+	TLInstancePresence,
 	TLNoteShape,
 	TLPOINTER_ID,
 	TLPage,
@@ -1704,8 +1705,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @readonly
 	 */
 	@computed getSelectedShapes(): TLShape[] {
-		const { selectedShapeIds } = this.getCurrentPageState()
-		return compact(selectedShapeIds.map((id) => this.store.get(id)))
+		return compact(this.getSelectedShapeIds().map((id) => this.store.get(id)))
 	}
 
 	/**
@@ -2575,14 +2575,25 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return baseCamera
 	}
 
+	private _getFollowingPresence(targetUserId: string | null) {
+		const visited = [this.user.getId()]
+		const collaborators = this.getCollaborators()
+		let leaderPresence = null as null | TLInstancePresence
+		while (targetUserId && !visited.includes(targetUserId)) {
+			leaderPresence = collaborators.find((c) => c.userId === targetUserId) ?? null
+			targetUserId = leaderPresence?.followingUserId ?? null
+			if (leaderPresence) {
+				visited.push(leaderPresence.userId)
+			}
+		}
+		return leaderPresence
+	}
+
 	@computed
 	private getViewportPageBoundsForFollowing(): null | Box {
-		const followingUserId = this.getInstanceState().followingUserId
-		if (!followingUserId) return null
-		const leaderPresence = this.getCollaborators().find((c) => c.userId === followingUserId)
-		if (!leaderPresence) return null
+		const leaderPresence = this._getFollowingPresence(this.getInstanceState().followingUserId)
 
-		if (!leaderPresence.camera || !leaderPresence.screenBounds) return null
+		if (!leaderPresence?.camera || !leaderPresence?.screenBounds) return null
 
 		// Fit their viewport inside of our screen bounds
 		// 1. calculate their viewport in page space
@@ -3781,15 +3792,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// if we were already following someone, stop following them
 		this.stopFollowingUser()
 
-		const leaderPresences = this._getCollaboratorsQuery()
-			.get()
-			.filter((p) => p.userId === userId)
-
-		if (!leaderPresences.length) {
-			console.warn('User not found')
-			return this
-		}
-
 		const thisUserId = this.user.getId()
 
 		if (!thisUserId) {
@@ -3797,13 +3799,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// allow to continue since it's probably fine most of the time.
 		}
 
-		// If the leader is following us, then we can't follow them
-		if (leaderPresences.some((p) => p.followingUserId === thisUserId)) {
+		const leaderPresence = this._getFollowingPresence(userId)
+
+		if (!leaderPresence) {
 			return this
 		}
 
 		const latestLeaderPresence = computed('latestLeaderPresence', () => {
-			return this.getCollaborators().find((p) => p.userId === userId)
+			return this._getFollowingPresence(userId)
 		})
 
 		transact(() => {

package/src/lib/hooks/useDocumentEvents.ts

@@ -11,6 +11,7 @@ export function useDocumentEvents() {
 	const editor = useEditor()
 	const container = useContainer()
 
+	const isEditing = useValue('isEditing', () => editor.getEditingShapeId(), [editor])
 	const isAppFocused = useValue('isFocused', () => editor.getIsFocused(), [editor])
 
 	// Prevent the browser's default drag and drop behavior on our container (UI, etc)
@@ -125,7 +126,11 @@ export function useDocumentEvents() {
 					if (areShortcutsDisabled(editor)) {
 						return
 					}
-					if (hasSelectedShapes) {
+					// isEditing here sounds like it's about text editing
+					// but more specifically, this is so you can tab into an
+					// embed that's being 'edited'. In our world,
+					// editing an embed, means it's interactive.
+					if (hasSelectedShapes && !isEditing) {
 						// This is used in tandem with shape navigation.
 						preventDefault(e)
 					}
@@ -289,7 +294,7 @@ export function useDocumentEvents() {
 			container.removeEventListener('keydown', handleKeyDown)
 			container.removeEventListener('keyup', handleKeyUp)
 		}
-	}, [editor, container, isAppFocused])
+	}, [editor, container, isAppFocused, isEditing])
 }
 
 function areShortcutsDisabled(editor: Editor) {

package/src/lib/license/LicenseManager.test.ts

@@ -317,6 +317,46 @@ describe('LicenseManager', () => {
 		expect(result.isDomainValid).toBe(false)
 	})
 
+	it('Succeeds if it is a vscode extension', async () => {
+		// @ts-ignore
+		delete window.location
+		// @ts-ignore
+		window.location = new URL(
+			'vscode-webview:vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
+		)
+
+		const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+		permissiveHostsInfo[PROPERTIES.HOSTS] = ['tldraw-org.tldraw-vscode']
+		const permissiveLicenseKey = await generateLicenseKey(
+			JSON.stringify(permissiveHostsInfo),
+			keyPair
+		)
+		const result = (await licenseManager.getLicenseFromKey(
+			permissiveLicenseKey
+		)) as ValidLicenseKeyResult
+		expect(result.isDomainValid).toBe(true)
+	})
+
+	it('Fails if it is a vscode extension with the wrong id', async () => {
+		// @ts-ignore
+		delete window.location
+		// @ts-ignore
+		window.location = new URL(
+			'vscode-webview:vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
+		)
+
+		const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+		permissiveHostsInfo[PROPERTIES.HOSTS] = ['blah-org.blah-vscode']
+		const permissiveLicenseKey = await generateLicenseKey(
+			JSON.stringify(permissiveHostsInfo),
+			keyPair
+		)
+		const result = (await licenseManager.getLicenseFromKey(
+			permissiveLicenseKey
+		)) as ValidLicenseKeyResult
+		expect(result.isDomainValid).toBe(false)
+	})
+
 	it('Checks for internal license', async () => {
 		const internalLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
 		internalLicenseInfo[PROPERTIES.FLAGS] = FLAGS.INTERNAL_LICENSE

package/src/lib/license/LicenseManager.ts

@@ -111,7 +111,10 @@ export class LicenseManager {
 		if (testEnvironment === 'production') return false
 
 		// If we are using https on a non-localhost domain we assume it's a production env and a development one otherwise
-		return window.location.protocol !== 'https:' || window.location.hostname === 'localhost'
+		return (
+			!['https:', 'vscode-webview:'].includes(window.location.protocol) ||
+			window.location.hostname === 'localhost'
+		)
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {
@@ -250,6 +253,15 @@ export class LicenseManager {
 				return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`)
 			}
 
+			// VSCode support
+			if (window.location.protocol === 'vscode-webview:') {
+				const currentUrl = new URL(window.location.href)
+				const extensionId = currentUrl.searchParams.get('extensionId')
+				if (normalizedHost === extensionId) {
+					return true
+				}
+			}
+
 			return false
 		})
 	}

package/src/lib/options.ts

@@ -80,6 +80,10 @@ export interface TldrawOptions {
 	 * nonce to use in the editor's styles.
 	 */
 	readonly nonce: string | undefined
+	/**
+	 * Branding name of the app, currently only used for adding aria-label for the application.
+	 */
+	readonly branding?: string
 }
 
 /** @public */

package/src/lib/utils/dom.ts

@@ -91,14 +91,14 @@ export const setStyleProperty = (
 	elm.style.setProperty(property, value as string)
 }
 
-const INPUTS = ['input', 'select', 'button', 'textarea']
-
 /** @internal */
-export function activeElementShouldCaptureKeys() {
+export function activeElementShouldCaptureKeys(allowButtons = false) {
 	const { activeElement } = document
+	const elements = allowButtons ? ['input', 'textarea'] : ['input', 'select', 'button', 'textarea']
 	return !!(
 		activeElement &&
 		((activeElement as HTMLElement).isContentEditable ||
-			INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
+			elements.indexOf(activeElement.tagName.toLowerCase()) > -1 ||
+			activeElement.classList.contains('tlui-slider__thumb'))
 	)
 }

package/src/lib/utils/rotation.ts

@@ -26,11 +26,13 @@ export function getRotationSnapshot({
 		return null
 	}
 
-	const pageCenter = rotatedPageBounds.center.clone().rotWith(rotatedPageBounds.point, rotation)
+	const initialPageCenter = rotatedPageBounds.center
+		.clone()
+		.rotWith(rotatedPageBounds.point, rotation)
 
 	return {
-		pageCenter,
-		initialCursorAngle: pageCenter.angle(editor.inputs.originPagePoint),
+		initialPageCenter,
+		initialCursorAngle: initialPageCenter.angle(editor.inputs.originPagePoint),
 		initialShapesRotation: rotation,
 		shapeSnapshots: shapes.map((shape) => ({
 			shape,
@@ -43,7 +45,7 @@ export function getRotationSnapshot({
  * @internal
  **/
 export interface TLRotationSnapshot {
-	pageCenter: Vec
+	initialPageCenter: Vec
 	initialCursorAngle: number
 	initialShapesRotation: number
 	shapeSnapshots: {
@@ -66,7 +68,7 @@ export function applyRotationToSnapshotShapes({
 	stage: 'start' | 'update' | 'end' | 'one-off'
 	centerOverride?: VecLike
 }) {
-	const { pageCenter, shapeSnapshots } = snapshot
+	const { initialPageCenter, shapeSnapshots } = snapshot
 
 	editor.updateShapes(
 		shapeSnapshots.map(({ shape, initialPagePoint }) => {
@@ -77,7 +79,7 @@ export function applyRotationToSnapshotShapes({
 				? editor.getShapePageTransform(shape.parentId)!
 				: Mat.Identity()
 
-			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? pageCenter, delta)
+			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)
 
 			const newLocalPoint = Mat.applyToPoint(
 				// use the current parent transform in case it has moved/resized since the start

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.13.0-canary.a2884bb1bab2'
+export const version = '3.13.0-canary.bbec36f93805'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-04-15T16:38:27.293Z',
-	patch: '2025-04-15T16:38:27.293Z',
+	minor: '2025-04-29T14:04:26.024Z',
+	patch: '2025-04-29T14:04:26.024Z',
 }