@tldraw/editor 3.16.0-canary.3be390323e1c → 3.16.0-canary.3e3b8b577bf1

package/src/lib/editor/Editor.test.ts

@@ -833,3 +833,93 @@ describe('selectAll', () => {
 		setSelectedShapesSpy.mockRestore()
 	})
 })
+
+describe('putExternalContent', () => {
+	let mockHandler: any
+
+	beforeEach(() => {
+		mockHandler = vi.fn()
+		editor.registerExternalContentHandler('text', mockHandler)
+	})
+
+	it('calls external content handler when not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info)
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('does not call external content handler when readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info)
+
+		expect(mockHandler).not.toHaveBeenCalled()
+	})
+
+	it('calls external content handler when readonly but force is true', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info, { force: true })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('calls external content handler when force is false and not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info, { force: false })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+})
+
+describe('replaceExternalContent', () => {
+	let mockHandler: any
+
+	beforeEach(() => {
+		mockHandler = vi.fn()
+		editor.registerExternalContentHandler('text', mockHandler)
+	})
+
+	it('calls external content handler when not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info)
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('does not call external content handler when readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info)
+
+		expect(mockHandler).not.toHaveBeenCalled()
+	})
+
+	it('calls external content handler when readonly but force is true', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info, { force: true })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('calls external content handler when force is false and not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info, { force: false })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+})

package/src/lib/editor/Editor.ts

@@ -4680,8 +4680,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.store.createComputedCache<Box, TLShape>('pageBoundsCache', (shape) => {
 			const pageTransform = this.getShapePageTransform(shape)
 			if (!pageTransform) return undefined
-			const geometry = this.getShapeGeometry(shape)
-			return Box.FromPoints(pageTransform.applyToPoints(geometry.vertices))
+
+			return Box.FromPoints(
+				pageTransform.applyToPoints(this.getShapeGeometry(shape).boundsVertices)
+			)
 		})
 	}
 
@@ -8831,8 +8833,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Handle external content, such as files, urls, embeds, or plain text which has been put into the app, for example by pasting external text or dropping external images onto canvas.
 	 *
 	 * @param info - Info about the external content.
+	 * @param opts - Options for handling external content, including force flag to bypass readonly checks.
 	 */
-	async putExternalContent<E>(info: TLExternalContent<E>): Promise<void> {
+	async putExternalContent<E>(
+		info: TLExternalContent<E>,
+		opts = {} as { force?: boolean }
+	): Promise<void> {
+		if (!opts.force && this.getIsReadonly()) return
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 
@@ -8840,8 +8847,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Handle replacing external content.
 	 *
 	 * @param info - Info about the external content.
+	 * @param opts - Options for handling external content, including force flag to bypass readonly checks.
 	 */
-	async replaceExternalContent<E>(info: TLExternalContent<E>): Promise<void> {
+	async replaceExternalContent<E>(
+		info: TLExternalContent<E>,
+		opts = {} as { force?: boolean }
+	): Promise<void> {
+		if (!opts.force && this.getIsReadonly()) return
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 

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

@@ -266,7 +266,7 @@ describe('LicenseManager', () => {
 			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'
+				'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)
@@ -286,7 +286,7 @@ describe('LicenseManager', () => {
 			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'
+				'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)
@@ -300,6 +300,70 @@ describe('LicenseManager', () => {
 			)) as ValidLicenseKeyResult
 			expect(result.isDomainValid).toBe(false)
 		})
+
+		it('Succeeds if it is a native app', async () => {
+			// @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 result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(true)
+		})
+
+		it('Succeeds if it is a native app with a wildcard', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('app-bundle://unique-id-123/index.html')
+
+			const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+			nativeLicenseInfo[PROPERTIES.HOSTS] = ['^app-bundle://unique-id-123.*']
+			const nativeLicenseKey = await generateLicenseKey(JSON.stringify(nativeLicenseInfo), keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(true)
+		})
+
+		it('Succeeds if it is a native app with a wildcard and search param', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('app-bundle://app/index.html?unique-id-123')
+
+			const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+			nativeLicenseInfo[PROPERTIES.HOSTS] = ['^app-bundle://app.*unique-id-123.*']
+			const nativeLicenseKey = await generateLicenseKey(JSON.stringify(nativeLicenseInfo), keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(true)
+		})
+
+		it('Fails if it is a native app with the wrong protocol', async () => {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('blah-blundle://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 result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isDomainValid).toBe(false)
+		})
 	})
 
 	describe('License types and flags', () => {
@@ -316,6 +380,17 @@ describe('LicenseManager', () => {
 			expect(result.isInternalLicense).toBe(true)
 		})
 
+		it('Checks for native license', async () => {
+			const nativeLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			nativeLicenseInfo[PROPERTIES.FLAGS] = FLAGS.NATIVE_LICENSE
+			const nativeLicenseKey = await generateLicenseKey(JSON.stringify(nativeLicenseInfo), keyPair)
+
+			const result = (await licenseManager.getLicenseFromKey(
+				nativeLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isNativeLicense).toBe(true)
+		})
+
 		it('Checks for license with watermark', async () => {
 			const withWatermarkLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
 			withWatermarkLicenseInfo[PROPERTIES.FLAGS] |= FLAGS.WITH_WATERMARK
@@ -553,6 +628,7 @@ function getDefaultLicenseResult(overrides: Partial<ValidLicenseKeyResult>): Val
 		isAnnualLicense: true,
 		isAnnualLicenseExpired: false,
 		isInternalLicense: false,
+		isNativeLicense: false,
 		isDevelopment: false,
 		isDomainValid: true,
 		isPerpetualLicense: false,

package/src/lib/license/LicenseManager.ts

@@ -6,11 +6,22 @@ import { importPublicKey, str2ab } from '../utils/licensing'
 const GRACE_PERIOD_DAYS = 30
 
 export const FLAGS = {
+	// -- MUTUALLY EXCLUSIVE FLAGS --
+	// Annual means the license expires after a time period, usually 1 year.
 	ANNUAL_LICENSE: 1,
+	// Perpetual means the license never expires up to the max supported version.
 	PERPETUAL_LICENSE: 1 << 1,
+
+	// -- ADDITIVE FLAGS --
+	// Internal means the license is for internal use only.
 	INTERNAL_LICENSE: 1 << 2,
+	// Watermark means the product is watermarked.
 	WITH_WATERMARK: 1 << 3,
+	// Evaluation means the license is for evaluation purposes only.
 	EVALUATION_LICENSE: 1 << 4,
+	// Native means the license is for native apps which switches
+	// on special-case logic.
+	NATIVE_LICENSE: 1 << 5,
 }
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS))
 
@@ -69,6 +80,7 @@ export interface ValidLicenseKeyResult {
 	isPerpetualLicense: boolean
 	isPerpetualLicenseExpired: boolean
 	isInternalLicense: boolean
+	isNativeLicense: boolean
 	isLicensedWithWatermark: boolean
 	isEvaluationLicense: boolean
 	isEvaluationLicenseExpired: boolean
@@ -271,6 +283,7 @@ export class LicenseManager {
 				isPerpetualLicense,
 				isPerpetualLicenseExpired: isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate),
 				isInternalLicense: this.isFlagEnabled(licenseInfo.flags, FLAGS.INTERNAL_LICENSE),
+				isNativeLicense: this.isNativeLicense(licenseInfo),
 				isLicensedWithWatermark: this.isFlagEnabled(licenseInfo.flags, FLAGS.WITH_WATERMARK),
 				isEvaluationLicense,
 				isEvaluationLicenseExpired:
@@ -291,13 +304,13 @@ export class LicenseManager {
 		const currentHostname = window.location.hostname.toLowerCase()
 
 		return licenseInfo.hosts.some((host) => {
-			const normalizedHost = host.toLowerCase().trim()
+			const normalizedHostOrUrlRegex = host.toLowerCase().trim()
 
 			// Allow the domain if listed and www variations, 'example.com' allows 'example.com' and 'www.example.com'
 			if (
-				normalizedHost === currentHostname ||
-				`www.${normalizedHost}` === currentHostname ||
-				normalizedHost === `www.${currentHostname}`
+				normalizedHostOrUrlRegex === currentHostname ||
+				`www.${normalizedHostOrUrlRegex}` === currentHostname ||
+				normalizedHostOrUrlRegex === `www.${currentHostname}`
 			) {
 				return true
 			}
@@ -308,6 +321,12 @@ export class LicenseManager {
 				return true
 			}
 
+			// Native license support
+			// In this case, `normalizedHost` is actually a protocol, e.g. `app-bundle:`
+			if (this.isNativeLicense(licenseInfo)) {
+				return new RegExp(normalizedHostOrUrlRegex).test(window.location.href)
+			}
+
 			// Glob testing, we only support '*.somedomain.com' right now.
 			if (host.includes('*')) {
 				const globToRegex = new RegExp(host.replace(/\*/g, '.*?'))
@@ -318,7 +337,7 @@ export class LicenseManager {
 			if (window.location.protocol === 'vscode-webview:') {
 				const currentUrl = new URL(window.location.href)
 				const extensionId = currentUrl.searchParams.get('extensionId')
-				if (normalizedHost === extensionId) {
+				if (normalizedHostOrUrlRegex === extensionId) {
 					return true
 				}
 			}
@@ -327,6 +346,10 @@ export class LicenseManager {
 		})
 	}
 
+	private isNativeLicense(licenseInfo: LicenseInfo) {
+		return this.isFlagEnabled(licenseInfo.flags, FLAGS.NATIVE_LICENSE)
+	}
+
 	private getExpirationDateWithoutGracePeriod(expiryDate: Date) {
 		return new Date(expiryDate.getFullYear(), expiryDate.getMonth(), expiryDate.getDate())
 	}

package/src/lib/license/LicenseProvider.tsx

@@ -17,7 +17,7 @@ export const LICENSE_TIMEOUT = 5000
 
 /** @internal */
 export function LicenseProvider({
-	licenseKey,
+	licenseKey = getLicenseKeyFromEnv() ?? undefined,
 	children,
 }: {
 	licenseKey?: string
@@ -51,3 +51,42 @@ export function LicenseProvider({
 function LicenseGate() {
 	return <div data-testid="tl-license-expired" style={{ display: 'none' }} />
 }
+
+let envLicenseKey: string | undefined | null = undefined
+function getLicenseKeyFromEnv() {
+	if (envLicenseKey !== undefined) {
+		return envLicenseKey
+	}
+	// it's important here that we write out the full process.env.WHATEVER expression instead of
+	// doing something like process.env[someVariable]. This is because most bundlers do something
+	// like a find-replace inject environment variables, and so won't pick up on dynamic ones. It
+	// also means we can't do checks like `process.env && process.env.WHATEVER`, which is why we use
+	// the `getEnv` try/catch approach.
+
+	// framework-specific prefixes borrowed from the ones vercel uses, but trimmed down to just the
+	// react-y ones: https://vercel.com/docs/environment-variables/framework-environment-variables
+	envLicenseKey =
+		getEnv(() => process.env.TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.NEXT_PUBLIC_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.REACT_APP_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.GATSBY_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.VITE_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => process.env.PUBLIC_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.NEXT_PUBLIC_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.REACT_APP_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.GATSBY_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.VITE_TLDRAW_LICENSE_KEY) ||
+		getEnv(() => (import.meta as any).env.PUBLIC_TLDRAW_LICENSE_KEY) ||
+		null
+
+	return envLicenseKey
+}
+
+function getEnv(cb: () => string | undefined) {
+	try {
+		return cb()
+	} catch {
+		return undefined
+	}
+}