Improve watermark link (tldraw#7098)

Spoke with @tldrawdaniel and we want to distinguish between watermark
clicks on dotcom and from sdk / our other properties.

This:
* Changes the `utm_source` to sdk for watermark links.
* We then override it to `dotcom` for dotcom.
* I decided to partially revert the (unreleased) changes from tldraw#7041 (the
`click-watermark` event) since the approach in this PR felt better for
the current requirements.

### Change type

- [x] `other`

### Release notes

- Remove the `click-watermark` event from the sdk.

### API Changes

- Remove the `click-watermark` event from the sdk.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Switch watermark URLs to use utm_source=sdk (overridden to dotcom on
dotcom) and remove the click-watermark event across SDK/UI; add
dotcom-side tracking via runtime override.
> 
> - **Editor/SDK**:
> - Change watermark URLs to use `utm_source=sdk` in
`packages/editor/src/lib/license/Watermark.tsx`.
> - Remove `editor.emit('click-watermark')` calls and the
`'click-watermark'` event from `TLEventMap` and API reports.
> - **UI**:
> - Remove `'click-watermark'` from `TLUiEventMap` and related
forwarding in `packages/tldraw/src/lib/Tldraw.tsx` and
`ui/context/events.tsx`.
> - **Dotcom App**:
> - Add `WatermarkOverride` in `TlaRootProviders.tsx` to rewrite
watermark links (`utm_source=sdk` → `utm_source=dotcom`) and call
`trackEvent('click-watermark', { url })`.
> - Drop `'click-watermark'` from app UI events and import `trackEvent`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
4ebf717. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: MitjaBezensek

apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx

@@ -14,13 +14,15 @@ import {
 	TldrawUiA11yProvider,
 	TldrawUiContextProvider,
 	fetch,
+	runtime,
+	setRuntimeOverrides,
 	useDialogs,
 	useToasts,
 	useValue,
 } from 'tldraw'
 import translationsEnJson from '../../../public/tla/locales-compiled/en.json'
 import { ErrorPage } from '../../components/ErrorPage/ErrorPage'
-import { SignedInAnalytics, SignedOutAnalytics } from '../../utils/analytics'
+import { SignedInAnalytics, SignedOutAnalytics, trackEvent } from '../../utils/analytics'
 import { globalEditor } from '../../utils/globalEditor'
 import { MaybeForceUserRefresh } from '../components/MaybeForceUserRefresh/MaybeForceUserRefresh'
 import { components } from '../components/TlaEditor/TlaEditor'
@@ -39,6 +41,23 @@ import { FileSidebarFocusContextProvider } from './FileInputFocusProvider'
 
 const assetUrls = getAssetUrlsByImport()
 
+// Override watermark URLs globally for all dotcom editors
+function WatermarkOverride() {
+	useEffect(() => {
+		const originalOpenWindow = runtime.openWindow
+		setRuntimeOverrides({
+			openWindow(url: string, target: string, allowReferrer?: boolean) {
+				if (url.includes('utm_campaign=watermark')) {
+					url = url.replace('utm_source=sdk', 'utm_source=dotcom')
+					trackEvent('click-watermark', { url })
+				}
+				originalOpenWindow(url, target, allowReferrer)
+			},
+		})
+	}, [])
+	return null
+}
+
 export const appMessages = defineMessages({
 	oldBrowser: {
 		defaultMessage: 'Old browser detected. Please update your browser to use this app.',
@@ -90,6 +109,7 @@ export function Component() {
 					</SignedInProvider>
 				</MaybeForceUserRefresh>
 			</IntlWrapper>
+			<WatermarkOverride />
 		</div>
 	)
 }

apps/dotcom/client/src/tla/utils/app-ui-events.tsx

@@ -32,7 +32,6 @@ export interface TLAppUiEventMap {
 	'drop-tldr-file': null
 	'import-tldr-file': null
 	'change-user-name': null
-	'click-watermark': null
 	'open-share-menu': null
 	'change-share-menu-tab': { tab: TldrawAppSessionState['shareMenuActiveTab'] }
 	'copy-share-link': null

packages/editor/api-report.api.md

@@ -3541,10 +3541,6 @@ export interface TLEventMap {
     // (undocumented)
     'before-event': [TLEventInfo];
     // (undocumented)
-    'click-watermark': [{
-        url: string;
-    }];
-    // (undocumented)
     'created-shapes': [TLRecord[]];
     // (undocumented)
     'deleted-shapes': [TLShapeId[]];

packages/editor/src/lib/editor/types/emit-types.ts

@@ -22,7 +22,6 @@ export interface TLEventMap {
 	'edited-shapes': [TLRecord[]]
 	'deleted-shapes': [TLShapeId[]]
 	edit: []
-	'click-watermark': [{ url: string }]
 }
 
 /** @public */

packages/editor/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
@@ -71,7 +70,6 @@ const UnlicensedWatermark = memo(function UnlicensedWatermark({
 				}}
 				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={() => {
-					editor.emit('click-watermark', { url })
 					runtime.openWindow(url, '_blank', true)
 				}} // allow referrer
 			>
@@ -99,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} />
@@ -124,7 +122,6 @@ const WatermarkInner = memo(function WatermarkInner({
 				}}
 				title="Build infinite canvas applications with the tldraw SDK. Learn more at https://tldraw.dev."
 				onClick={() => {
-					editor.emit('click-watermark', { url })
 					runtime.openWindow(url, '_blank')
 				}}
 				style={{ mask: maskCss, WebkitMask: maskCss }}

packages/tldraw/api-report.api.md

@@ -3958,10 +3958,6 @@ export interface TLUiEventMap {
     // (undocumented)
     'change-user-name': null;
     // (undocumented)
-    'click-watermark': {
-        url: string;
-    };
-    // (undocumented)
     'close-menu': {
         id: string;
     };

packages/tldraw/src/lib/Tldraw.tsx

@@ -257,13 +257,6 @@ function InsideOfEditorAndUiContext({
 
 		editor.once('edit', () => trackEvent('edit', { source: 'unknown' }))
 
-		// Forward watermark click events from editor to UI event system
-		const handleWatermarkClick = (info: { url: string }) => {
-			trackEvent('click-watermark', { source: 'unknown', url: info.url })
-		}
-		editor.on('click-watermark', handleWatermarkClick)
-		unsubs.push(() => editor.off('click-watermark', handleWatermarkClick))
-
 		// for content handling, first we register the default handlers...
 		registerDefaultExternalContentHandlers(editor, {
 			maxImageDimension,

packages/tldraw/src/lib/ui/context/events.tsx

@@ -145,7 +145,6 @@ export interface TLUiEventMap {
 			| 'bulletList'
 	}
 	edit: null
-	'click-watermark': { url: string }
 }
 
 /** @public */