@tldraw/editor 4.2.0-next.47462e908ff5 → 4.2.0-next.54bc357bbff2

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

@@ -11,6 +11,7 @@ import {
 	createTLStore,
 } from '../..'
 import { Editor } from './Editor'
+import { StateNode } from './tools/StateNode'
 
 type ICustomShape = TLBaseShape<
 	'my-custom-shape',
@@ -923,3 +924,270 @@ describe('replaceExternalContent', () => {
 		expect(mockHandler).toHaveBeenCalledWith(info)
 	})
 })
+
+describe('setTool', () => {
+	class CustomToolA extends StateNode {
+		static override id = 'custom-tool-a'
+	}
+
+	class CustomToolB extends StateNode {
+		static override id = 'custom-tool-b'
+	}
+
+	class CustomToolC extends StateNode {
+		static override id = 'custom-tool-c'
+	}
+
+	class ParentTool extends StateNode {
+		static override id = 'parent-tool'
+		static override initial = 'child-tool-1'
+		static override children() {
+			return [ChildTool1]
+		}
+	}
+
+	class ChildTool1 extends StateNode {
+		static override id = 'child-tool-1'
+	}
+
+	class ChildTool2 extends StateNode {
+		static override id = 'child-tool-2'
+	}
+
+	let toolEditor: Editor
+
+	beforeEach(() => {
+		toolEditor = new Editor({
+			shapeUtils: [],
+			bindingUtils: [],
+			tools: [CustomToolA, ParentTool],
+			store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+	})
+
+	it('should add a tool to the root state', () => {
+		// Initially CustomToolB should not exist
+		expect(toolEditor.root.children!['custom-tool-b']).toBeUndefined()
+
+		// Add CustomToolB
+		toolEditor.setTool(CustomToolB)
+
+		// CustomToolB should now exist in root
+		expect(toolEditor.root.children!['custom-tool-b']).toBeDefined()
+		expect(toolEditor.root.children!['custom-tool-b']).toBeInstanceOf(CustomToolB)
+	})
+
+	it('should add a tool to a specific parent state', () => {
+		const parentTool = toolEditor.root.children!['parent-tool'] as ParentTool
+
+		// Initially should only have child-tool-1
+		expect(Object.keys(parentTool.children!)).toHaveLength(1)
+		expect(parentTool.children!['child-tool-1']).toBeDefined()
+		expect(parentTool.children!['child-tool-2']).toBeUndefined()
+
+		// Add ChildTool2 to ParentTool
+		toolEditor.setTool(ChildTool2, parentTool)
+
+		// Should now have both children
+		expect(Object.keys(parentTool.children!)).toHaveLength(2)
+		expect(parentTool.children!['child-tool-1']).toBeDefined()
+		expect(parentTool.children!['child-tool-2']).toBeDefined()
+		expect(parentTool.children!['child-tool-2']).toBeInstanceOf(ChildTool2)
+	})
+
+	it('should throw an error when trying to override an existing tool', () => {
+		// CustomToolA is already in the root (added in beforeEach)
+		expect(toolEditor.root.children!['custom-tool-a']).toBeDefined()
+
+		// Should throw error when trying to add another tool with the same ID
+		expect(() => {
+			toolEditor.setTool(CustomToolA)
+		}).toThrow('Can\'t override tool with id "custom-tool-a"')
+	})
+
+	it('should allow transitioning to a newly added tool', () => {
+		// Add CustomToolB
+		toolEditor.setTool(CustomToolB)
+
+		// Should be able to transition to the new tool
+		expect(() => {
+			toolEditor.setCurrentTool('custom-tool-b')
+		}).not.toThrow()
+
+		// Should now be on the new tool
+		expect(toolEditor.getCurrentToolId()).toBe('custom-tool-b')
+	})
+
+	it('should create the tool with the correct editor and parent', () => {
+		// Add CustomToolB to root
+		toolEditor.setTool(CustomToolB)
+
+		const customToolB = toolEditor.root.children!['custom-tool-b'] as CustomToolB
+
+		expect(customToolB.editor).toBe(toolEditor)
+		expect(customToolB.parent).toBe(toolEditor.root)
+	})
+
+	it('should maintain existing tools when adding new ones', () => {
+		const originalTool = toolEditor.root.children!['custom-tool-a']
+
+		// Add CustomToolB
+		toolEditor.setTool(CustomToolB)
+
+		// Original tool should still exist
+		expect(toolEditor.root.children!['custom-tool-a']).toBe(originalTool)
+		expect(toolEditor.root.children!['custom-tool-a']).toBeInstanceOf(CustomToolA)
+	})
+
+	it('should allow adding multiple tools', () => {
+		// Add multiple tools
+		toolEditor.setTool(CustomToolB)
+		toolEditor.setTool(CustomToolC)
+
+		// All tools should exist
+		expect(toolEditor.root.children!['custom-tool-a']).toBeDefined()
+		expect(toolEditor.root.children!['custom-tool-b']).toBeDefined()
+		expect(toolEditor.root.children!['custom-tool-c']).toBeDefined()
+		expect(toolEditor.root.children!['custom-tool-b']).toBeInstanceOf(CustomToolB)
+		expect(toolEditor.root.children!['custom-tool-c']).toBeInstanceOf(CustomToolC)
+	})
+})
+
+describe('removeTool', () => {
+	class CustomToolA extends StateNode {
+		static override id = 'custom-tool-a'
+	}
+
+	class CustomToolB extends StateNode {
+		static override id = 'custom-tool-b'
+	}
+
+	class CustomToolC extends StateNode {
+		static override id = 'custom-tool-c'
+	}
+
+	class ParentTool extends StateNode {
+		static override id = 'parent-tool'
+		static override initial = 'child-tool-1'
+		static override children() {
+			return [ChildTool1, ChildTool2]
+		}
+	}
+
+	class ChildTool1 extends StateNode {
+		static override id = 'child-tool-1'
+	}
+
+	class ChildTool2 extends StateNode {
+		static override id = 'child-tool-2'
+	}
+
+	let toolEditor: Editor
+
+	beforeEach(() => {
+		toolEditor = new Editor({
+			shapeUtils: [],
+			bindingUtils: [],
+			tools: [CustomToolA, CustomToolB, CustomToolC, ParentTool],
+			store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+	})
+
+	it('should remove a tool from the root state', () => {
+		// CustomToolB should exist initially
+		expect(toolEditor.root.children!['custom-tool-b']).toBeDefined()
+
+		// Remove CustomToolB
+		toolEditor.removeTool(CustomToolB)
+
+		// CustomToolB should no longer exist
+		expect(toolEditor.root.children!['custom-tool-b']).toBeUndefined()
+	})
+
+	it('should remove a tool from a specific parent state', () => {
+		const parentTool = toolEditor.root.children!['parent-tool'] as ParentTool
+
+		// Initially should have both children
+		expect(Object.keys(parentTool.children!)).toHaveLength(2)
+		expect(parentTool.children!['child-tool-1']).toBeDefined()
+		expect(parentTool.children!['child-tool-2']).toBeDefined()
+
+		// Remove ChildTool2 from ParentTool
+		toolEditor.removeTool(ChildTool2, parentTool)
+
+		// Should now only have child-tool-1
+		expect(Object.keys(parentTool.children!)).toHaveLength(1)
+		expect(parentTool.children!['child-tool-1']).toBeDefined()
+		expect(parentTool.children!['child-tool-2']).toBeUndefined()
+	})
+
+	it('should not throw an error when trying to remove a non-existent tool', () => {
+		// First remove CustomToolB
+		toolEditor.removeTool(CustomToolB)
+		expect(toolEditor.root.children!['custom-tool-b']).toBeUndefined()
+
+		// Trying to remove it again should not throw
+		expect(() => {
+			toolEditor.removeTool(CustomToolB)
+		}).not.toThrow()
+	})
+
+	it('should maintain other tools when removing one', () => {
+		const originalToolA = toolEditor.root.children!['custom-tool-a']
+		const originalToolC = toolEditor.root.children!['custom-tool-c']
+
+		// Remove CustomToolB
+		toolEditor.removeTool(CustomToolB)
+
+		// Other tools should still exist
+		expect(toolEditor.root.children!['custom-tool-a']).toBe(originalToolA)
+		expect(toolEditor.root.children!['custom-tool-c']).toBe(originalToolC)
+		expect(toolEditor.root.children!['custom-tool-a']).toBeInstanceOf(CustomToolA)
+		expect(toolEditor.root.children!['custom-tool-c']).toBeInstanceOf(CustomToolC)
+	})
+
+	it('should not be able to transition to a removed tool', () => {
+		// Remove CustomToolB
+		toolEditor.removeTool(CustomToolB)
+
+		// Should throw when trying to transition to removed tool
+		expect(() => {
+			toolEditor.setCurrentTool('custom-tool-b')
+		}).toThrow()
+	})
+
+	it('should allow removing multiple tools', () => {
+		// Remove multiple tools
+		toolEditor.removeTool(CustomToolB)
+		toolEditor.removeTool(CustomToolC)
+
+		// Removed tools should not exist
+		expect(toolEditor.root.children!['custom-tool-b']).toBeUndefined()
+		expect(toolEditor.root.children!['custom-tool-c']).toBeUndefined()
+
+		// Other tools should still exist
+		expect(toolEditor.root.children!['custom-tool-a']).toBeDefined()
+		expect(toolEditor.root.children!['parent-tool']).toBeDefined()
+	})
+
+	it('should allow re-adding a tool after removing it', () => {
+		// Remove CustomToolB
+		toolEditor.removeTool(CustomToolB)
+		expect(toolEditor.root.children!['custom-tool-b']).toBeUndefined()
+
+		// Re-add CustomToolB
+		toolEditor.setTool(CustomToolB)
+
+		// CustomToolB should exist again
+		expect(toolEditor.root.children!['custom-tool-b']).toBeDefined()
+		expect(toolEditor.root.children!['custom-tool-b']).toBeInstanceOf(CustomToolB)
+
+		// Should be able to transition to it
+		expect(() => {
+			toolEditor.setCurrentTool('custom-tool-b')
+		}).not.toThrow()
+		expect(toolEditor.getCurrentToolId()).toBe('custom-tool-b')
+	})
+})

package/src/lib/editor/Editor.ts

@@ -837,6 +837,39 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly root: StateNode
 
+	/**
+	 * Set a tool. Useful if you need to add a tool to the state chart on demand,
+	 * after the editor has already been initialized.
+	 *
+	 * @param Tool - The tool to set.
+	 * @param parent - The parent state node to set the tool on.
+	 *
+	 * @public
+	 */
+	setTool(Tool: TLStateNodeConstructor, parent?: StateNode) {
+		parent ??= this.root
+		if (hasOwnProperty(parent.children!, Tool.id)) {
+			throw Error(`Can't override tool with id "${Tool.id}"`)
+		}
+		parent.children![Tool.id] = new Tool(this, parent)
+	}
+
+	/**
+	 * Remove a tool. Useful if you need to remove a tool from the state chart on demand,
+	 * after the editor has already been initialized.
+	 *
+	 * @param Tool - The tool to delete.
+	 * @param parent - The parent state node to remove the tool from.
+	 *
+	 * @public
+	 */
+	removeTool(Tool: TLStateNodeConstructor, parent?: StateNode) {
+		parent ??= this.root
+		if (hasOwnProperty(parent.children!, Tool.id)) {
+			delete parent.children![Tool.id]
+		}
+	}
+
 	/**
 	 * A set of functions to call when the app is disposed.
 	 *

package/src/lib/license/LicenseManager.ts

@@ -180,6 +180,7 @@ export class LicenseManager {
 						: 'unknown'
 			url.searchParams.set('sku', sku)
 		}
+		url.searchParams.set('url', window.location.href)
 		if (process.env.NODE_ENV) {
 			url.searchParams.set('environment', process.env.NODE_ENV)
 		}

package/src/lib/license/Watermark.tsx

@@ -48,8 +48,7 @@ const UnlicensedWatermark = memo(function UnlicensedWatermark({
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
 
-	const url =
-		'https://tldraw.dev/pricing?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
+	const url = 'https://tldraw.dev/pricing?utm_source=sdk&utm_medium=organic&utm_campaign=watermark'
 
 	return (
 		<div
@@ -70,7 +69,9 @@ const UnlicensedWatermark = memo(function UnlicensedWatermark({
 					preventDefault(e)
 				}}
 				title="The tldraw SDK requires a license key to work in production. You can get a free 100-day trial license at tldraw.dev/pricing."
-				onClick={() => runtime.openWindow(url, '_blank')}
+				onClick={() => {
+					runtime.openWindow(url, '_blank', true)
+				}} // allow referrer
 			>
 				Get a license for production
 			</button>
@@ -96,7 +97,7 @@ const WatermarkInner = memo(function WatermarkInner({
 	usePassThroughWheelEvents(ref)
 
 	const maskCss = `url('${src}') center 100% / 100% no-repeat`
-	const url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
+	const url = 'https://tldraw.dev/?utm_source=sdk&utm_medium=organic&utm_campaign=watermark'
 
 	if (isUnlicensed) {
 		return <UnlicensedWatermark isDebugMode={isDebugMode} isMobile={isMobile} />
@@ -120,7 +121,9 @@ const WatermarkInner = memo(function WatermarkInner({
 					preventDefault(e)
 				}}
 				title="Build infinite canvas applications with the tldraw SDK. Learn more at https://tldraw.dev."
-				onClick={() => runtime.openWindow(url, '_blank')}
+				onClick={() => {
+					runtime.openWindow(url, '_blank')
+				}}
 				style={{ mask: maskCss, WebkitMask: maskCss }}
 			/>
 		</div>

package/src/lib/utils/debug-flags.ts

@@ -92,7 +92,8 @@ if (typeof Element !== 'undefined') {
 
 // --- IMPLEMENTATION ---
 // you probably don't need to read this if you're just using the debug values system
-function createDebugValue<T>(
+/** @public */
+export function createDebugValue<T>(
 	name: string,
 	{
 		defaults,
@@ -193,7 +194,7 @@ function getDefaultValue<T>(def: DebugFlagDef<T>): T {
 	}
 }
 
-/** @internal */
+/** @public */
 export interface DebugFlagDefaults<T> {
 	development?: T
 	staging?: T
@@ -201,14 +202,14 @@ export interface DebugFlagDefaults<T> {
 	all: T
 }
 
-/** @internal */
+/** @public */
 export interface DebugFlagDef<T> {
 	name: string
 	defaults: DebugFlagDefaults<T>
 	shouldStoreForSession: boolean
 }
 
-/** @internal */
+/** @public */
 export interface DebugFlag<T> extends DebugFlagDef<T>, Atom<T> {
 	reset(): void
 }

package/src/lib/utils/runtime.ts

@@ -1,11 +1,11 @@
 /** @public */
 export const runtime: {
-	openWindow(url: string, target: string): void
+	openWindow(url: string, target: string, allowReferrer?: boolean): void
 	refreshPage(): void
 	hardReset(): void
 } = {
-	openWindow(url, target) {
-		window.open(url, target, 'noopener noreferrer')
+	openWindow(url, target, allowReferrer = false) {
+		return window.open(url, target, allowReferrer ? 'noopener' : 'noopener noreferrer')
 	},
 	refreshPage() {
 		window.location.reload()

package/src/lib/utils/window-open.ts

@@ -1,6 +1,16 @@
 import { runtime } from './runtime'
 
-/** @public */
-export function openWindow(url: string, target = '_blank') {
-	runtime.openWindow(url, target)
+/**
+ * Open a new window with the given URL and target. Prefer this to the window.open function, as it
+ * will work more reliably in embedded scenarios, such as our VS Code extension. See the runtime
+ * object in tldraw/editor for more details.
+ *
+ * @param url - The URL to open.
+ * @param target - The target window to open the URL in.
+ * @param allowReferrer - Whether to allow the referrer to be sent to the new window.
+ * @returns The new window object.
+ * @public
+ */
+export function openWindow(url: string, target = '_blank', allowReferrer?: boolean) {
+	return runtime.openWindow(url, target, allowReferrer)
 }

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 = '4.2.0-next.47462e908ff5'
+export const version = '4.2.0-next.54bc357bbff2'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-17T10:30:50.909Z',
-	patch: '2025-10-17T10:30:50.909Z',
+	minor: '2025-11-19T10:31:43.651Z',
+	patch: '2025-11-19T10:31:43.651Z',
 }