@tldraw/editor 5.3.0 → 5.3.2

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

@@ -316,6 +316,42 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(true)
 		})
 
+		it('Fails if the wildcard domain is a prefix of the current hostname', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://sub.example.com.other.io')
+
+			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			permissiveHostsInfo[PROPERTIES.HOSTS] = ['*.example.com']
+			const permissiveLicenseKey = await generateLicenseKey(
+				JSON.stringify(permissiveHostsInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				permissiveLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
+
+		it('Fails if the current hostname only ends with the wildcard domain', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://notexample.com')
+
+			const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			permissiveHostsInfo[PROPERTIES.HOSTS] = ['*.example.com']
+			const permissiveLicenseKey = await generateLicenseKey(
+				JSON.stringify(permissiveHostsInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				permissiveLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
+
 		it('Fails if has a subdomain wildcard isnt for the same base domain', async () => {
 			// @ts-ignore
 			delete window.location
@@ -422,6 +458,107 @@ describe('LicenseManager', () => {
 			expect(result.isDomainValid).toBe(true)
 		})
 
+		it('Is not development mode on a custom protocol', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('app-bundle://app/index.html')
+
+				const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+				nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+				nativeLicenseInfo[PROPERTIES.HOSTS] = ['app-bundle:']
+				const nativeLicenseKey = await generateLicenseKey(
+					JSON.stringify(nativeLicenseInfo),
+					keyPair
+				)
+				const nativeLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await nativeLicenseManager.getLicenseFromKey(
+					nativeLicenseKey
+				)) as ValidLicenseKeyResult
+				expect(result).toMatchObject({
+					isLicenseParseable: true,
+					isNativeLicense: true,
+					isDomainValid: true,
+					isDevelopment: false,
+				})
+				expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe('licensed')
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Validates the domain on a custom protocol', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('app-bundle://app/index.html')
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const customProtocolLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await customProtocolLicenseManager.getLicenseFromKey(
+					licenseKey
+				)) as ValidLicenseKeyResult
+				expect(result).toMatchObject({ isDomainValid: false, isDevelopment: false })
+				expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe(
+					'unlicensed-production'
+				)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it('Is development mode over http on a non-loopback host', async () => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL('http://www.example.com')
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const httpLicenseManager = new LicenseManager('', keyPair.publicKey)
+				const result = (await httpLicenseManager.getLicenseFromKey(
+					licenseKey
+				)) as ValidLicenseKeyResult
+				expect(result.isDevelopment).toBe(true)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
+		it.each([
+			['http://localhost:5173/', true],
+			['http://127.0.0.1:3000/', true],
+			['https://localhost:8443/', true],
+			['https://[::1]:8443/', true],
+			['http://192.168.1.5:3000/', true],
+			['http://staging-box/', true],
+			['https://www.example.com/', false],
+			['tauri://localhost/index.html', false],
+			['http://tauri.localhost/index.html', false],
+			['app://tauri.localhost/com.example.app', false],
+			['app-bundle://localhost/index.html', false],
+		])('Development mode at %s is %s', async (href, expected) => {
+			process.env.NODE_ENV = 'production'
+			try {
+				// @ts-ignore
+				delete window.location
+				// @ts-ignore
+				window.location = new URL(href)
+
+				const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+				const manager = new LicenseManager('', keyPair.publicKey)
+				const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+				expect(result.isDevelopment).toBe(expected)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
+
 		it('Fails if it is a native app with the wrong protocol', async () => {
 			// @ts-ignore
 			delete window.location
@@ -437,6 +574,29 @@ describe('LicenseManager', () => {
 			)) as ValidLicenseKeyResult
 			expect(result.isDomainValid).toBe(false)
 		})
+
+		it.each(['tauri://localhost/index.html', 'http://tauri.localhost/index.html'])(
+			'Does not license an unrelated key at %s',
+			async (href) => {
+				process.env.NODE_ENV = 'production'
+				try {
+					// @ts-ignore
+					delete window.location
+					// @ts-ignore
+					window.location = new URL(href)
+
+					const licenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+					const manager = new LicenseManager('', keyPair.publicKey)
+					const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+					expect(result).toMatchObject({ isDevelopment: false, isDomainValid: false })
+					expect(getLicenseState(result, () => {}, result.isDevelopment)).toBe(
+						'unlicensed-production'
+					)
+				} finally {
+					process.env.NODE_ENV = 'test'
+				}
+			}
+		)
 	})
 
 	describe('License types and flags', () => {

package/src/lib/license/LicenseManager.ts

@@ -174,10 +174,17 @@ export class LicenseManager {
 	}
 
 	private getIsDevelopment() {
-		// If we are using https on a non-loopback domain we assume it's a production env and a development one otherwise
+		const protocol = window.location.protocol
+		const hostname = window.location.hostname
+
+		// Tauri uses `tauri://localhost` on macOS and Linux and `http://tauri.localhost` on Windows.
+		if (hostname.toLowerCase().endsWith('.localhost')) {
+			return process.env.NODE_ENV !== 'production'
+		}
+
 		return (
-			!['https:', 'vscode-webview:'].includes(window.location.protocol) ||
-			this.isLoopbackHost(window.location.hostname) ||
+			protocol === 'http:' ||
+			(protocol === 'https:' && this.isLoopbackHost(hostname)) ||
 			process.env.NODE_ENV !== 'production'
 		)
 	}
@@ -407,7 +414,9 @@ export class LicenseManager {
 
 			// Glob testing, we only support '*.somedomain.com' right now.
 			if (host.includes('*')) {
-				const globToRegex = new RegExp(host.replace(/\*/g, '.*?'))
+				const globToRegex = new RegExp(
+					normalizedHostOrUrlRegex.replace(/\./g, '\\.').replace(/\*/g, '.*?') + '$'
+				)
 				return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`)
 			}
 

package/src/lib/license/LicenseProvider.tsx

@@ -1,13 +1,34 @@
 import { useValue } from '@tldraw/state-react'
 import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { useMaybeEditor } from '../hooks/useEditor'
 import { LicenseManager } from './LicenseManager'
 
 /** @internal */
-export const LicenseContext = createContext({} as LicenseManager)
+export const LicenseContext = createContext<LicenseManager | null>(null)
 
 /** @internal */
-export function useLicenseContext() {
-	return useContext(LicenseContext)
+export function useLicenseContext(): LicenseManager {
+	const licenseManager = useMaybeLicenseManager()
+	if (!licenseManager) {
+		throw new Error(
+			'useLicenseContext must be used inside of the <Tldraw /> or <TldrawEditor /> components, or inside an <EditorProvider /> wrapping an editor created by them'
+		)
+	}
+	return licenseManager
+}
+
+/**
+ * Returns the license manager for the current editor, or `null` if there is none. Reads the
+ * license context when inside `<TldrawEditor />`, and otherwise falls back to the license manager
+ * of the nearest editor, so UI mounted outside the editor tree (via `EditorProvider`) resolves the
+ * same license as the editor it belongs to.
+ *
+ * @internal
+ */
+export function useMaybeLicenseManager(): LicenseManager | null {
+	const licenseManager = useContext(LicenseContext)
+	const editor = useMaybeEditor()
+	return licenseManager ?? editor?.licenseManager ?? null
 }
 
 function shouldHideEditorAfterDelay(licenseState: string): boolean {

package/src/lib/license/useLicenseManagerState.ts

@@ -8,16 +8,18 @@ export function useLicenseManagerState(licenseManager: LicenseManager): LicenseS
 
 /**
  * Reactively reads whether a licensable feature is enabled for the current license. Re-renders when
- * license validation resolves.
+ * license validation resolves. Returns `false` when there is no license manager, so gated UI stays
+ * hidden when mounted without an editor or license context.
  *
  * @internal
  */
 export function useLicenseFeatureFlag(
-	licenseManager: LicenseManager,
+	licenseManager: LicenseManager | null,
 	feature: LicenseFeatureName
 ): boolean {
-	return useValue('licenseFeature', () => licenseManager.isFeatureEnabled(feature), [
-		licenseManager,
-		feature,
-	])
+	return useValue(
+		'licenseFeature',
+		() => (licenseManager ? licenseManager.isFeatureEnabled(feature) : false),
+		[licenseManager, feature]
+	)
 }

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.3.0'
+export const version = '5.3.2'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
 	minor: '2026-08-05T11:39:54.978Z',
-	patch: '2026-08-05T11:39:54.978Z',
+	patch: '2026-08-18T09:59:40.172Z',
 }