@tldraw/editor 5.5.4 → 5.6.0-canary.0091c91994d6

package/src/lib/editor/shapes/shared/resizeBox.ts

@@ -1,5 +1,6 @@
 import { VecModel } from '@tldraw/tlschema'
 import { Box } from '../../../primitives/Box'
+import { clamp } from '../../../primitives/utils'
 import { Vec } from '../../../primitives/Vec'
 import { TLResizeHandle } from '../../types/selection-types'
 import type { TLBaseBoxShape } from '../BaseBoxShapeUtil'
@@ -36,29 +37,31 @@ export function resizeBox<T extends TLBaseBoxShape>(
 	const offset = new Vec(0, 0)
 
 	if (w > 0) {
-		if (w < minWidth) {
+		const clampedW = clamp(w, minWidth, maxWidth)
+		if (clampedW !== w) {
 			switch (handle) {
 				case 'top_left':
 				case 'left':
 				case 'bottom_left': {
-					offset.x = w - minWidth
+					offset.x = w - clampedW
 					break
 				}
 				case 'top':
 				case 'bottom': {
-					offset.x = (w - minWidth) / 2
+					offset.x = (w - clampedW) / 2
 					break
 				}
 				default: {
 					offset.x = 0
 				}
 			}
-			w = minWidth
+			w = clampedW
 		}
 	} else {
 		offset.x = w
 		w = -w
-		if (w < minWidth) {
+		const clampedW = clamp(w, minWidth, maxWidth)
+		if (clampedW !== w) {
 			switch (handle) {
 				case 'top_left':
 				case 'left':
@@ -67,26 +70,27 @@ export function resizeBox<T extends TLBaseBoxShape>(
 					break
 				}
 				default: {
-					offset.x = -minWidth
+					offset.x = -clampedW
 				}
 			}
 
-			w = minWidth
+			w = clampedW
 		}
 	}
 
 	if (h > 0) {
-		if (h < minHeight) {
+		const clampedH = clamp(h, minHeight, maxHeight)
+		if (clampedH !== h) {
 			switch (handle) {
 				case 'top_left':
 				case 'top':
 				case 'top_right': {
-					offset.y = h - minHeight
+					offset.y = h - clampedH
 					break
 				}
 				case 'right':
 				case 'left': {
-					offset.y = (h - minHeight) / 2
+					offset.y = (h - clampedH) / 2
 					break
 				}
 				default: {
@@ -94,12 +98,13 @@ export function resizeBox<T extends TLBaseBoxShape>(
 				}
 			}
 
-			h = minHeight
+			h = clampedH
 		}
 	} else {
 		offset.y = h
 		h = -h
-		if (h < minHeight) {
+		const clampedH = clamp(h, minHeight, maxHeight)
+		if (clampedH !== h) {
 			switch (handle) {
 				case 'top_left':
 				case 'top':
@@ -108,10 +113,10 @@ export function resizeBox<T extends TLBaseBoxShape>(
 					break
 				}
 				default: {
-					offset.y = -minHeight
+					offset.y = -clampedH
 				}
 			}
-			h = minHeight
+			h = clampedH
 		}
 	}
 
@@ -122,8 +127,8 @@ export function resizeBox<T extends TLBaseBoxShape>(
 		x,
 		y,
 		props: {
-			w: Math.min(maxWidth, w),
-			h: Math.min(maxHeight, h),
+			w,
+			h,
 		},
 	}
 }

package/src/lib/hooks/useCursor.ts

@@ -23,8 +23,9 @@ function getCursorCss(
 	const dx = 1 * c - 1 * s
 	const dy = 1 * s + 1 * c
 
+	// A raw '#' in the colour (hex) would end the unencoded data url as a fragment.
 	return (
-		`url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: ${color};'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='${dx}' dy='${dy}' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${
+		`url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: ${encodeURIComponent(color)};'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='${dx}' dy='${dy}' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${
 			r + tr
 		} 16 16)${f ? ` scale(-1,-1) translate(0, -32)` : ''}' filter='url(%23shadow)'>` +
 		svg.replaceAll(`"`, `'`) +
@@ -32,7 +33,8 @@ function getCursorCss(
 	)
 }
 
-const STATIC_CURSORS = [
+// Cursors that map straight to a prerendered `--tl-cursor-*` css variable rather than a runtime svg.
+const STATIC_CURSORS = new Set<TLCursorType>([
 	'default',
 	'pointer',
 	'cross',
@@ -43,11 +45,14 @@ const STATIC_CURSORS = [
 	'text',
 	'zoom-in',
 	'zoom-out',
-]
+	'rotate',
+	'resize-edge',
+	'resize-corner',
+])
 
 type CursorFunction = (rotation: number, flip: boolean, color: string) => string
 
-const CURSORS: Record<TLCursorType, CursorFunction> = {
+const DYNAMIC_CURSORS: Record<TLCursorType, CursorFunction> = {
 	none: () => 'none',
 	'ew-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 0, f, c),
 	'ns-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 90, f, c),
@@ -61,7 +66,8 @@ const CURSORS: Record<TLCursorType, CursorFunction> = {
 
 /** @public */
 export function getCursor(cursor: TLCursorType, rotation = 0, color = 'black') {
-	return CURSORS[cursor](radiansToDegrees(rotation), false, color)
+	if (STATIC_CURSORS.has(cursor)) return `var(--tl-cursor-${cursor})`
+	return DYNAMIC_CURSORS[cursor](radiansToDegrees(rotation), false, color)
 }
 
 export function useCursor() {
@@ -73,8 +79,9 @@ export function useCursor() {
 		() => {
 			const { type, rotation } = editor.getInstanceState().cursor
 
-			if (STATIC_CURSORS.includes(type)) {
-				container.style.setProperty('--tl-cursor', `var(--tl-cursor-${type})`)
+			// Static cursors don't need the theme colour, so skip reading it to avoid depending on it.
+			if (STATIC_CURSORS.has(type)) {
+				container.style.setProperty('--tl-cursor', getCursor(type))
 				return
 			}
 

package/src/lib/hooks/useDocumentEvents.ts

@@ -18,6 +18,10 @@ export function useDocumentEvents() {
 	// blur release below needs the key remembered per code.
 	const heldKeysRef = useRef(new Map<string, string>())
 
+	// Non-modifier keys pressed while Meta was down. macOS never delivers their keyup, so
+	// `inputs.keys` would count them as held for good; see the Meta branch in `handleKeyUp`.
+	const keysPressedWithMetaRef = useRef(new Set<string>())
+
 	// Prevent the browser's default drag and drop behavior on our container (UI, etc)
 	useEffect(() => {
 		if (!container) return
@@ -217,6 +221,12 @@ export function useDocumentEvents() {
 			}
 
 			heldKeysRef.current.set(e.code, e.key)
+			// Only a fresh press counts. A key held from before Meta went down keeps auto-
+			// repeating, and those repeats carry `metaKey` too, which would make it look like
+			// it was pressed during the Meta window.
+			if (!e.repeat && e.metaKey && !MODIFIER_CODES.has(e.code)) {
+				keysPressedWithMetaRef.current.add(e.code)
+			}
 			editor.dispatch(info)
 		}
 
@@ -232,6 +242,13 @@ export function useDocumentEvents() {
 				return
 			}
 
+			// The native `metaKey` is still true on Meta's own keyup. Reported as-is it matches
+			// neither branch of the editor's modifier handling - which ignores `metaKey` on a
+			// key_up, then only arms the 150ms release when it reads false - so a cmd tap left
+			// `getMetaKey()` true until some later event happened to say otherwise.
+			const isMetaRelease = e.code === 'MetaLeft' || e.code === 'MetaRight'
+			const metaKey = isMetaRelease ? false : e.metaKey
+
 			const info: TLKeyboardEventInfo = {
 				type: 'keyboard',
 				name: 'key_up',
@@ -239,13 +256,32 @@ export function useDocumentEvents() {
 				code: e.code,
 				shiftKey: e.shiftKey,
 				altKey: e.altKey,
-				ctrlKey: e.metaKey || e.ctrlKey,
-				metaKey: e.metaKey,
-				accelKey: isAccelKey(e),
+				ctrlKey: metaKey || e.ctrlKey,
+				metaKey,
+				accelKey: isAccelKey({ ctrlKey: e.ctrlKey, metaKey }),
 			}
 
 			heldKeysRef.current.delete(e.code)
+			keysPressedWithMetaRef.current.delete(e.code)
 			editor.dispatch(info)
+
+			// macOS swallows the keyup of a non-modifier key pressed while Meta is held, so a
+			// stuck ArrowUp from Cmd+ArrowUp made every later arrow nudge diagonally: the nudge
+			// sums all held arrows. Anything held from before the Meta window still gets its
+			// own keyup, so only drop what was pressed inside it. That is still one too many -
+			// the key you are *still* holding is not owed anything - and the key_repeat case
+			// in `Editor.dispatch` is what takes that one back.
+			//
+			// Drop them rather than replaying a key_up: a tool's onKeyUp is a real action at
+			// the wrong moment, and a synthetic Enter re-entered shape editing and stole the
+			// focus that cmd+Enter's a11y action had just put on the style toolbar.
+			if (isMetaRelease) {
+				for (const code of keysPressedWithMetaRef.current) {
+					editor.inputs.keys.delete(code)
+					heldKeysRef.current.delete(code)
+				}
+				keysPressedWithMetaRef.current.clear()
+			}
 		}
 
 		function handleTouchStart(e: TouchEvent) {
@@ -334,6 +370,7 @@ export function useDocumentEvents() {
 				})
 			}
 			heldKeys.clear()
+			keysPressedWithMetaRef.current.clear()
 		}
 
 		win.addEventListener('blur', handleWindowBlur)
@@ -343,6 +380,17 @@ export function useDocumentEvents() {
 	}, [editor])
 }
 
+const MODIFIER_CODES = new Set([
+	'ShiftLeft',
+	'ShiftRight',
+	'AltLeft',
+	'AltRight',
+	'ControlLeft',
+	'ControlRight',
+	'MetaLeft',
+	'MetaRight',
+])
+
 function areShortcutsDisabled(editor: Editor) {
 	return (
 		editor.menus.hasOpenMenus() ||

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

@@ -678,6 +678,162 @@ describe('LicenseManager', () => {
 		)
 	})
 
+	describe('Canonical tldraw hosts', () => {
+		let fetchSpy: ReturnType<typeof vi.fn>
+
+		beforeEach(() => {
+			process.env.NODE_ENV = 'production'
+			fetchSpy = vi.fn(() => Promise.resolve(new Response()))
+			vi.stubGlobal('fetch', fetchSpy)
+		})
+
+		afterEach(() => {
+			vi.unstubAllGlobals()
+			process.env.NODE_ENV = 'test'
+		})
+
+		// The shared licenseManager was built against jsdom's localhost default, so it's in dev mode.
+		// Build one on the host itself so these run the constructor path a real page on our domains
+		// takes: production dev detection, license state, feature flags and the tracking ping.
+		async function createManagerOnHost(url: string, licenseKey = '') {
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL(url)
+
+			const manager = new LicenseManager(licenseKey, keyPair.publicKey)
+			await vi.waitFor(() => expect(manager.state.get()).not.toBe('pending'))
+			return manager
+		}
+
+		it('Licenses tldraw-owned hosts with a watermark when no key is provided', async () => {
+			const hosts = [
+				'https://tldraw.com',
+				'https://www.tldraw.com',
+				'https://makereal.tldraw.com',
+				'https://tldraw.dev',
+				'https://staging.tldraw.dev',
+				'https://preview.tldraw.club',
+				'https://fairies.tldraw.workers.dev',
+				'https://teach.tldraw.xyz',
+			]
+
+			for (const host of hosts) {
+				const manager = await createManagerOnHost(host)
+
+				expect(manager.isDevelopment).toBe(false)
+				expect(await manager.getLicenseFromKey('')).toMatchObject({
+					isLicenseParseable: true,
+					isDomainValid: true,
+					isLicensedWithWatermark: true,
+					isCollaborationEnabled: true,
+					isCommentingEnabled: true,
+					isAnnualLicenseExpired: false,
+					isPerpetualLicenseExpired: false,
+					daysSinceExpiry: 0,
+				})
+				expect(manager.state.get()).toBe('licensed-with-watermark')
+				expect(manager.featureFlags.get()).toEqual({ collaboration: true, commenting: true })
+				manager.dispose()
+			}
+		})
+
+		it('Does not license hosts that merely look like ours', async () => {
+			const hosts = [
+				'https://nottldraw.com',
+				'https://tldraw.com.example.com',
+				'https://eviltldraw.dev',
+				'https://tldraw.co',
+				'https://tldraw.workers.dev.example.com',
+			]
+
+			for (const host of hosts) {
+				const manager = await createManagerOnHost(host)
+
+				expect(await manager.getLicenseFromKey('')).toMatchObject({
+					isLicenseParseable: false,
+					reason: 'no-key-provided',
+				})
+				expect(manager.state.get()).toBe('unlicensed-production')
+				expect(manager.featureFlags.get()).toEqual({ collaboration: false, commenting: false })
+				manager.dispose()
+			}
+		})
+
+		it('Licenses our VS Code extension webview when no key is provided', async () => {
+			const manager = await createManagerOnHost(
+				'vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron'
+			)
+
+			expect(await manager.getLicenseFromKey('')).toMatchObject({
+				isLicenseParseable: true,
+				isDomainValid: true,
+				isLicensedWithWatermark: true,
+			})
+			expect(manager.state.get()).toBe('licensed-with-watermark')
+			manager.dispose()
+		})
+
+		it('Does not license other VS Code extension webviews', async () => {
+			const urls = [
+				'vscode-webview://abc/index.html?extensionId=evil-org.evil-vscode&x=tldraw-org.tldraw-vscode',
+				'vscode-webview://tldraw-org.tldraw-vscode/index.html?extensionId=evil-org.evil-vscode',
+			]
+
+			for (const url of urls) {
+				const manager = await createManagerOnHost(url)
+
+				expect(await manager.getLicenseFromKey('')).toMatchObject({
+					isLicenseParseable: false,
+					reason: 'no-key-provided',
+				})
+				manager.dispose()
+			}
+		})
+
+		it('Never sends a watermark tracking ping for our own domains', async () => {
+			const manager = await createManagerOnHost('https://makereal.tldraw.com')
+
+			expect(manager.state.get()).toBe('licensed-with-watermark')
+			expect(fetchSpy).not.toHaveBeenCalled()
+			manager.dispose()
+		})
+
+		it('Still tracks a real watermarked key on one of our domains', async () => {
+			const licenseKey = await generateLicenseKey(
+				JSON.stringify([
+					'a-real-key',
+					['*.tldraw.com'],
+					FLAGS.ANNUAL_LICENSE | FLAGS.WITH_WATERMARK,
+					expiryDate,
+				]),
+				keyPair
+			)
+			const manager = await createManagerOnHost('https://makereal.tldraw.com', licenseKey)
+
+			expect(manager.state.get()).toBe('licensed-with-watermark')
+			expect(fetchSpy).toHaveBeenCalledTimes(1)
+			const trackUrl = new URL(fetchSpy.mock.calls[0][0] as string)
+			expect(trackUrl.searchParams.get('license_type')).toBe('with_watermark')
+			expect(trackUrl.searchParams.get('license_id')).toBe('a-real-key')
+			manager.dispose()
+		})
+
+		it('Lets an explicitly provided key win over the canonical-host grant', async () => {
+			const licenseKey = await generateLicenseKey(
+				JSON.stringify(['a-real-key', ['*.tldraw.com'], FLAGS.ANNUAL_LICENSE, expiryDate]),
+				keyPair
+			)
+			const manager = await createManagerOnHost('https://tldraw.com', licenseKey)
+
+			const result = (await manager.getLicenseFromKey(licenseKey)) as ValidLicenseKeyResult
+			expect(result.license.id).toBe('a-real-key')
+			expect(result.isLicensedWithWatermark).toBe(false)
+			expect(manager.state.get()).toBe('licensed')
+			manager.dispose()
+		})
+	})
+
 	describe('Tracked licenses', () => {
 		let fetchSpy: ReturnType<typeof vi.fn>
 

package/src/lib/license/LicenseManager.ts

@@ -43,6 +43,31 @@ const NUMBER_OF_KNOWN_PROPERTIES = Object.keys(PROPERTIES).length
 
 const LICENSE_EMAIL = 'sales@tldraw.com'
 
+/**
+ * tldraw's own public domains. A page served from one of these hosts — or any subdomain of one — is
+ * licensed without a key, because we own them: minting and rotating keys for our own properties was
+ * a recurring source of expired and wrong-domain deployments.
+ *
+ * This list ships in the bundle, so it holds only domains we already serve from publicly. tldraw's
+ * private domains are deliberately absent and keep using a real license key.
+ */
+const CANONICAL_TLDRAW_HOSTS = [
+	'tldraw.com',
+	'tldraw.dev',
+	'tldraw.club',
+	'tldraw.workers.dev',
+	'tldraw.xyz',
+]
+
+/** Our VS Code extension, whose webviews are served from `vscode-webview:` with a random hostname. */
+const CANONICAL_VSCODE_EXTENSION_ID = 'tldraw-org.tldraw-vscode'
+
+/** Marks a license as the keyless canonical-host grant, which is never tracked. */
+const CANONICAL_HOST_LICENSE_ID = 'tldraw-canonical-host'
+
+/** The canonical-host grant has no key behind it, and so no expiry date to fall due. */
+const CANONICAL_HOST_NEVER_EXPIRES = new Date(8640000000000000)
+
 const WATERMARK_TRACK_SRC = `${getDefaultCdnBaseUrl()}/watermarks/watermark-track.svg`
 
 /** @internal */
@@ -215,7 +240,59 @@ export class LicenseManager {
 		return host === 'localhost' || host === '::1' || /^127(?:\.\d{1,3}){3}$/.test(host)
 	}
 
+	/** Whether the page is served from one of tldraw's own domains, a subdomain of one, or our VS Code extension. */
+	private isCanonicalTldrawHost() {
+		if (window.location.protocol === 'vscode-webview:') {
+			const extensionId = new URL(window.location.href).searchParams.get('extensionId')
+			return extensionId === CANONICAL_VSCODE_EXTENSION_ID
+		}
+		const hostname = window.location.hostname.toLowerCase()
+		return CANONICAL_TLDRAW_HOSTS.some((host) => hostname === host || hostname.endsWith(`.${host}`))
+	}
+
+	/**
+	 * The license tldraw's own domains get without a key. It keeps the watermark — our properties
+	 * advertise the SDK the same way any other watermarked deployment does — and grants the
+	 * collaboration features our apps are built on.
+	 *
+	 * Every expiry-derived field is a literal rather than something computed from a date, because
+	 * there is no key here to expire: the grant lasts as long as the host is ours.
+	 */
+	private getCanonicalHostLicense(): ValidLicenseKeyResult {
+		return {
+			isLicenseParseable: true,
+			license: {
+				id: CANONICAL_HOST_LICENSE_ID,
+				hosts: [window.location.hostname.toLowerCase()],
+				flags: FLAGS.WITH_WATERMARK | FLAGS.FEAT_COLLABORATION | FLAGS.FEAT_COMMENTING,
+				expiryDate: CANONICAL_HOST_NEVER_EXPIRES.toISOString(),
+			},
+			isDevelopment: this.isDevelopment,
+			isDomainValid: true,
+			expiryDate: CANONICAL_HOST_NEVER_EXPIRES,
+			isAnnualLicense: false,
+			isAnnualLicenseExpired: false,
+			isPerpetualLicense: false,
+			isPerpetualLicenseExpired: false,
+			isInternalLicense: false,
+			isNativeLicense: false,
+			isLicensedWithWatermark: true,
+			isEvaluationLicense: false,
+			isEvaluationLicenseExpired: false,
+			isCollaborationEnabled: true,
+			isCommentingEnabled: true,
+			daysSinceExpiry: 0,
+		}
+	}
+
 	private getTrackType(result: LicenseFromKeyResult, licenseState: LicenseState): TrackType {
+		// Our own domains are licensed without a key, and the watermark ping exists to tell us about
+		// deployments we don't already know about. Reporting our own apps back to ourselves would only
+		// add noise to the numbers we read, so the canonical-host grant is never tracked.
+		if ('license' in result && result.license.id === CANONICAL_HOST_LICENSE_ID) {
+			return null
+		}
+
 		// Track watermark for unlicensed production deployments
 		if (licenseState === 'unlicensed-production') {
 			return 'unlicensed'
@@ -328,6 +405,12 @@ export class LicenseManager {
 	}
 
 	async getLicenseFromKey(licenseKey?: string): Promise<LicenseFromKeyResult> {
+		// A key that is provided still wins, so an app on one of our hosts can opt into a different
+		// license — a native or feature-specific key — just by passing it.
+		if (!licenseKey && this.isCanonicalTldrawHost()) {
+			return this.getCanonicalHostLicense()
+		}
+
 		if (!licenseKey) {
 			if (!this.isDevelopment) {
 				this.outputNoLicenseKeyProvided()

package/src/lib/test/useCursor.test.tsx

@@ -0,0 +1,36 @@
+import { act, render } from '@testing-library/react'
+import { createTLStore } from '../config/createTLStore'
+import { Editor } from '../editor/Editor'
+import { getCursor } from '../hooks/useCursor'
+import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
+
+describe('useCursor', () => {
+	it('maps the static schema cursor types to their css variables', async () => {
+		let editor: Editor
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} onMount={(e) => void (editor = e)} />)
+		})
+		const container = document.querySelector(`.${TL_CONTAINER_CLASS}`) as HTMLElement
+
+		for (const type of ['rotate', 'resize-edge', 'resize-corner', 'default'] as const) {
+			act(() => editor.setCursor({ type, rotation: 0 }))
+			expect(container.style.getPropertyValue('--tl-cursor')).toBe(`var(--tl-cursor-${type})`)
+		}
+	})
+})
+
+describe('getCursor', () => {
+	it('returns the css variable for the static cursor types', () => {
+		for (const type of ['rotate', 'resize-edge', 'resize-corner', 'default'] as const) {
+			expect(getCursor(type)).toBe(`var(--tl-cursor-${type})`)
+			expect(getCursor(type, Math.PI / 2, '#000000')).toBe(`var(--tl-cursor-${type})`)
+		}
+	})
+
+	it('encodes the colour so a hex value does not end the data url as a fragment', () => {
+		const css = getCursor('ew-resize', 0, '#000000')
+		expect(css).toContain("style='color: %23000000;'")
+		expect(css).not.toContain('#')
+	})
+})