@tldraw/editor 4.2.0-internal.d43dfb4f2e76 → 4.2.0-next.24451dedd631

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.2.0-internal.d43dfb4f2e76",
+  "version": "4.2.0-next.24451dedd631",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,12 +50,12 @@
     "@tiptap/core": "3.6.2",
     "@tiptap/pm": "3.6.2",
     "@tiptap/react": "3.6.2",
-    "@tldraw/state": "4.2.0-internal.d43dfb4f2e76",
-    "@tldraw/state-react": "4.2.0-internal.d43dfb4f2e76",
-    "@tldraw/store": "4.2.0-internal.d43dfb4f2e76",
-    "@tldraw/tlschema": "4.2.0-internal.d43dfb4f2e76",
-    "@tldraw/utils": "4.2.0-internal.d43dfb4f2e76",
-    "@tldraw/validate": "4.2.0-internal.d43dfb4f2e76",
+    "@tldraw/state": "4.2.0-next.24451dedd631",
+    "@tldraw/state-react": "4.2.0-next.24451dedd631",
+    "@tldraw/store": "4.2.0-next.24451dedd631",
+    "@tldraw/tlschema": "4.2.0-next.24451dedd631",
+    "@tldraw/utils": "4.2.0-next.24451dedd631",
+    "@tldraw/validate": "4.2.0-next.24451dedd631",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -130,60 +130,60 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	return (
 		<>
 			<div
+				ref={rCanvas}
 				draggable={false}
 				data-iseditinganything={isEditingAnything}
 				data-isselectinganything={isSelectingAnything}
 				className={classNames('tl-canvas', className)}
 				data-testid="canvas"
+				{...events}
 			>
-				<div style={{ width: '100%', height: '100%' }} ref={rCanvas} {...events}>
-					<svg className="tl-svg-context" aria-hidden="true">
-						<defs>
-							{shapeSvgDefs}
-							<CursorDef />
-							<CollaboratorHintDef />
-							{SvgDefs && <SvgDefs />}
-						</defs>
-					</svg>
-					{Background && (
-						<div className="tl-background__wrapper">
-							<Background />
-						</div>
-					)}
-					<GridWrapper />
-					<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
-						<OnTheCanvasWrapper />
-						{SelectionBackground && <SelectionBackgroundWrapper />}
-						{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
+				<svg className="tl-svg-context" aria-hidden="true">
+					<defs>
+						{shapeSvgDefs}
+						<CursorDef />
+						<CollaboratorHintDef />
+						{SvgDefs && <SvgDefs />}
+					</defs>
+				</svg>
+				{Background && (
+					<div className="tl-background__wrapper">
+						<Background />
 					</div>
-					<div className="tl-overlays">
-						<div ref={rHtmlLayer2} className="tl-html-layer">
-							{debugGeometry ? <GeometryDebuggingView /> : null}
-							<BrushWrapper />
-							<ScribbleWrapper />
-							<ZoomBrushWrapper />
-							{ShapeIndicators && <ShapeIndicators />}
-							<HintedShapeIndicator />
-							<SnapIndicatorWrapper />
-							<SelectionForegroundWrapper />
-							<HandlesWrapper />
-							<OverlaysWrapper />
-							<LiveCollaborators />
-						</div>
-					</div>
-					<div
-						className="tl-canvas__in-front"
-						onPointerDown={editor.markEventAsHandled}
-						onPointerUp={editor.markEventAsHandled}
-						onTouchStart={editor.markEventAsHandled}
-						onTouchEnd={editor.markEventAsHandled}
-					>
-						<InFrontOfTheCanvasWrapper />
+				)}
+				<GridWrapper />
+				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
+					<OnTheCanvasWrapper />
+					{SelectionBackground && <SelectionBackgroundWrapper />}
+					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
+				</div>
+				<div className="tl-overlays">
+					<div ref={rHtmlLayer2} className="tl-html-layer">
+						{debugGeometry ? <GeometryDebuggingView /> : null}
+						<BrushWrapper />
+						<ScribbleWrapper />
+						<ZoomBrushWrapper />
+						{ShapeIndicators && <ShapeIndicators />}
+						<HintedShapeIndicator />
+						<SnapIndicatorWrapper />
+						<SelectionForegroundWrapper />
+						<HandlesWrapper />
+						<OverlaysWrapper />
+						<LiveCollaborators />
 					</div>
 				</div>
 				<MovingCameraHitTestBlocker />
-				<MenuClickCapture />
 			</div>
+			<div
+				className="tl-canvas__in-front"
+				onPointerDown={editor.markEventAsHandled}
+				onPointerUp={editor.markEventAsHandled}
+				onTouchStart={editor.markEventAsHandled}
+				onTouchEnd={editor.markEventAsHandled}
+			>
+				<InFrontOfTheCanvasWrapper />
+			</div>
+			<MenuClickCapture />
 		</>
 	)
 }

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/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-internal.d43dfb4f2e76'
+export const version = '4.2.0-next.24451dedd631'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-22T08:01:49.348Z',
-	patch: '2025-10-22T08:01:49.348Z',
+	minor: '2025-11-14T12:20:57.684Z',
+	patch: '2025-11-14T12:20:57.684Z',
 }