@tldraw/editor 5.3.0-canary.fa3355c81e86 → 5.3.0-internal.1640468db8fd

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.3.0-canary.fa3355c81e86",
+  "version": "5.3.0-internal.1640468db8fd",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "5.3.0-canary.fa3355c81e86",
-    "@tldraw/state-react": "5.3.0-canary.fa3355c81e86",
-    "@tldraw/store": "5.3.0-canary.fa3355c81e86",
-    "@tldraw/tlschema": "5.3.0-canary.fa3355c81e86",
-    "@tldraw/utils": "5.3.0-canary.fa3355c81e86",
-    "@tldraw/validate": "5.3.0-canary.fa3355c81e86",
+    "@tldraw/state": "5.3.0-internal.1640468db8fd",
+    "@tldraw/state-react": "5.3.0-internal.1640468db8fd",
+    "@tldraw/store": "5.3.0-internal.1640468db8fd",
+    "@tldraw/tlschema": "5.3.0-internal.1640468db8fd",
+    "@tldraw/utils": "5.3.0-internal.1640468db8fd",
+    "@tldraw/validate": "5.3.0-internal.1640468db8fd",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/index.ts

@@ -324,12 +324,14 @@ export {
 	LicenseManager,
 	type InvalidLicenseKeyResult,
 	type InvalidLicenseReason,
+	type LicenseFeatureName,
 	type LicenseFromKeyResult,
 	type LicenseInfo,
 	type LicenseState,
 	type ValidLicenseKeyResult,
 } from './lib/license/LicenseManager'
-export { LICENSE_TIMEOUT } from './lib/license/LicenseProvider'
+export { LICENSE_TIMEOUT, useLicenseContext } from './lib/license/LicenseProvider'
+export { useLicenseFeatureFlag } from './lib/license/useLicenseManagerState'
 export {
 	defaultTldrawOptions,
 	type TLClipboardPasteRawInfo,

package/src/lib/editor/Editor.ts

@@ -7145,7 +7145,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 				shape.index = index
 			})
-			const shapesToCreate = shapesToCreateWithOriginals.map(({ shape }) => shape)
+			const shapesToCreate = shapesToCreateWithOriginals.map(({ shape, originalShape }) => {
+				// Give the shape util a chance to modify the duplicate, e.g. to re-stamp note
+				// attribution to the current user so we don't forge the original author's identity.
+				return this.getShapeUtil(shape).onBeforeDuplicate?.(originalShape, shape) ?? shape
+			})
 
 			if (!this.canCreateShapes(shapesToCreate)) {
 				alertMaxShapes(this)
@@ -10039,7 +10043,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 			const newId = shapeIdMap.get(oldShape.id)!
 
 			// Create the new shape (new except for the id)
-			const newShape = { ...oldShape, id: newId }
+			let newShape = { ...oldShape, id: newId }
+
+			// Give the shape util a chance to modify the copy, e.g. to re-stamp note
+			// attribution to the current user so we don't forge the original author's identity.
+			// When ids are preserved the shape keeps its identity (e.g. moveShapesToPage
+			// relocating it), so it's not a duplicate and the hook must not run.
+			if (!preserveIds) {
+				newShape = this.getShapeUtil(newShape).onBeforeDuplicate?.(oldShape, newShape) ?? newShape
+			}
 
 			if (rootShapeIds.includes(oldShape.id)) {
 				newShape.parentId = currentPageId

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -669,6 +669,30 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 */
 	onBeforeCreate?(next: Shape): Shape | void
 
+	/**
+	 * A callback called when a shape is reproduced from an existing shape, either by duplicating
+	 * ({@link Editor.duplicateShapes}) or by pasting/putting content onto the page
+	 * ({@link Editor.putContentOntoCurrentPage}). This provides a last chance to modify the copy
+	 * before it's created — for example, to re-stamp attribution so the copy is credited to the
+	 * current user rather than the original author. It is not called when content is put with
+	 * `preserveIds` (e.g. {@link Editor.moveShapesToPage}), since the shape keeps its identity
+	 * and no copy is made.
+	 *
+	 * @example
+	 *
+	 * ```ts
+	 * onBeforeDuplicate = (source, duplicate) => {
+	 * 	return { ...duplicate, props: { ...duplicate.props, editedBy: this.editor.getAttributionUserId() } }
+	 * }
+	 * ```
+	 *
+	 * @param source - The shape being copied from.
+	 * @param duplicate - The new copy (with its own id), before it's created.
+	 * @returns The next shape or void.
+	 * @public
+	 */
+	onBeforeDuplicate?(source: Shape, duplicate: Shape): Shape | void
+
 	/**
 	 * A callback called just before a shape is updated. This method provides a last chance to modify
 	 * the updated shape.

package/src/lib/hooks/useCursor.ts

@@ -36,6 +36,7 @@ const STATIC_CURSORS = [
 	'default',
 	'pointer',
 	'cross',
+	'comment',
 	'move',
 	'grab',
 	'grabbing',

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

@@ -4,6 +4,7 @@ import { publishDates } from '../../version'
 import { str2ab } from '../utils/licensing'
 import {
 	FLAGS,
+	getEnabledFeatures,
 	getLicenseState,
 	LicenseManager,
 	PROPERTIES,
@@ -508,6 +509,62 @@ describe('LicenseManager', () => {
 			expect(result.isEvaluationLicense).toBe(true)
 			expect(result.isEvaluationLicenseExpired).toBe(true)
 		})
+
+		it('Checks for the commenting feature flag', async () => {
+			const commentingLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			commentingLicenseInfo[PROPERTIES.FLAGS] |= FLAGS.FEAT_COMMENTING
+			const commentingLicenseKey = await generateLicenseKey(
+				JSON.stringify(commentingLicenseInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				commentingLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCommentingEnabled).toBe(true)
+			expect(result.isCollaborationEnabled).toBe(false)
+		})
+
+		it('Checks for the collaboration feature flag', async () => {
+			const collaborationLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
+			collaborationLicenseInfo[PROPERTIES.FLAGS] |= FLAGS.FEAT_COLLABORATION
+			const collaborationLicenseKey = await generateLicenseKey(
+				JSON.stringify(collaborationLicenseInfo),
+				keyPair
+			)
+			const result = (await licenseManager.getLicenseFromKey(
+				collaborationLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCollaborationEnabled).toBe(true)
+			// The collaboration umbrella grants the commenting sub-feature.
+			expect(result.isCommentingEnabled).toBe(true)
+		})
+
+		it('Leaves feature flags off when no feature bits are set', async () => {
+			const standardLicenseKey = await generateLicenseKey(STANDARD_LICENSE_INFO, keyPair)
+			const result = (await licenseManager.getLicenseFromKey(
+				standardLicenseKey
+			)) as ValidLicenseKeyResult
+			expect(result.isCollaborationEnabled).toBe(false)
+			expect(result.isCommentingEnabled).toBe(false)
+		})
+
+		it('Enables features synchronously in development, before validation resolves', () => {
+			process.env.NODE_ENV = 'development'
+			// @ts-ignore
+			delete window.location
+			// @ts-ignore
+			window.location = new URL('https://www.example.com')
+
+			try {
+				// No await: the feature flags should already reflect development (all enabled) rather
+				// than the fail-closed default, which only lifts once async validation resolves.
+				const devLicenseManager = new LicenseManager('', keyPair.publicKey)
+				expect(devLicenseManager.isFeatureEnabled('commenting')).toBe(true)
+				expect(devLicenseManager.isFeatureEnabled('collaboration')).toBe(true)
+			} finally {
+				process.env.NODE_ENV = 'test'
+			}
+		})
 	})
 
 	describe('Expiry date timezone handling', () => {
@@ -793,6 +850,8 @@ function getDefaultLicenseResult(overrides: Partial<ValidLicenseKeyResult>): Val
 		isLicensedWithWatermark: false,
 		isEvaluationLicense: false,
 		isEvaluationLicenseExpired: false,
+		isCollaborationEnabled: false,
+		isCommentingEnabled: false,
 		daysSinceExpiry: 0,
 		// WatermarkManager does not check these fields, it relies on the calculated values like isAnnualLicenseExpired
 		license: {
@@ -1094,3 +1153,65 @@ describe('getLicenseState', () => {
 		})
 	})
 })
+
+describe('getEnabledFeatures', () => {
+	it('enables every feature in development regardless of flags', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: false,
+			isCommentingEnabled: false,
+		})
+		expect(getEnabledFeatures(result, 'unlicensed', true)).toEqual({
+			collaboration: true,
+			commenting: true,
+		})
+	})
+
+	it('reflects the license flags for a valid licensed state', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: false,
+			isCommentingEnabled: true,
+		})
+		expect(getEnabledFeatures(result, 'licensed', false)).toEqual({
+			collaboration: false,
+			commenting: true,
+		})
+	})
+
+	it('still grants features while showing a watermark', () => {
+		const result = getDefaultLicenseResult({
+			isCollaborationEnabled: true,
+			isCommentingEnabled: true,
+		})
+		expect(getEnabledFeatures(result, 'licensed-with-watermark', false)).toEqual({
+			collaboration: true,
+			commenting: true,
+		})
+	})
+
+	it.each(['unlicensed', 'unlicensed-production', 'expired', 'pending'] as const)(
+		'disables all features for the %s state in production',
+		(state) => {
+			const result = getDefaultLicenseResult({
+				isCollaborationEnabled: true,
+				isCommentingEnabled: true,
+			})
+			expect(getEnabledFeatures(result, state, false)).toEqual({
+				collaboration: false,
+				commenting: false,
+			})
+		}
+	)
+
+	it('disables all features when the license is not parseable', () => {
+		expect(
+			getEnabledFeatures(
+				{ isLicenseParseable: false, reason: 'no-key-provided' },
+				'licensed',
+				false
+			)
+		).toEqual({
+			collaboration: false,
+			commenting: false,
+		})
+	})
+})

package/src/lib/license/LicenseManager.ts

@@ -1,4 +1,4 @@
-import { atom } from '@tldraw/state'
+import { atom, transact } from '@tldraw/state'
 import { publishDates, version } from '../../version'
 import { getDefaultCdnBaseUrl } from '../utils/assets'
 import { importPublicKey, str2ab } from '../utils/licensing'
@@ -22,6 +22,12 @@ export const FLAGS = {
 	// Native means the license is for native apps which switches
 	// on special-case logic.
 	NATIVE_LICENSE: 1 << 5,
+
+	// -- FEATURE FLAGS --
+	// Collaboration is the umbrella flag for collaboration features; it grants all sub-features.
+	FEAT_COLLABORATION: 1 << 6,
+	// Commenting is the first sub-feature of collaboration.
+	FEAT_COMMENTING: 1 << 7,
 }
 const HIGHEST_FLAG = Math.max(...Object.values(FLAGS))
 
@@ -45,6 +51,23 @@ export interface LicenseInfo {
 	expiryDate: string
 }
 
+/**
+ * Names of the licensable product features gated by the license. `collaboration` is an umbrella
+ * that also grants all of its sub-features (currently just `commenting`).
+ *
+ * @internal
+ */
+export type LicenseFeatureName = 'collaboration' | 'commenting'
+
+const NO_FEATURES: Readonly<Record<LicenseFeatureName, boolean>> = {
+	collaboration: false,
+	commenting: false,
+}
+const ALL_FEATURES: Readonly<Record<LicenseFeatureName, boolean>> = {
+	collaboration: true,
+	commenting: true,
+}
+
 /** @internal */
 export type LicenseState =
 	| 'pending' // License validation is in progress
@@ -84,6 +107,8 @@ export interface ValidLicenseKeyResult {
 	isLicensedWithWatermark: boolean
 	isEvaluationLicense: boolean
 	isEvaluationLicenseExpired: boolean
+	isCollaborationEnabled: boolean
+	isCommentingEnabled: boolean
 	daysSinceExpiry: number
 }
 
@@ -98,6 +123,9 @@ export class LicenseManager {
 	public isTest: boolean
 	public isCryptoAvailable: boolean
 	state = atom<LicenseState>('license state', 'pending')
+	featureFlags = atom<Record<LicenseFeatureName, boolean>>('license feature flags', {
+		...NO_FEATURES,
+	})
 	public verbose = true
 
 	constructor(licenseKey: string | undefined, testPublicKey?: string) {
@@ -106,6 +134,14 @@ export class LicenseManager {
 		this.publicKey = testPublicKey || this.publicKey
 		this.isCryptoAvailable = !!crypto.subtle
 
+		// In development every feature is enabled (see `getEnabledFeatures`), and that doesn't depend
+		// on the async validation result. Reflect it eagerly so features aren't reported as disabled
+		// during the validation window — or left disabled if validation rejects (the `.catch` below
+		// never sets `featureFlags`). In production the fail-closed default stands until validation.
+		if (this.isDevelopment) {
+			this.featureFlags.set({ ...ALL_FEATURES })
+		}
+
 		this.getLicenseFromKey(licenseKey)
 			.then((result) => {
 				const licenseState = getLicenseState(
@@ -116,7 +152,12 @@ export class LicenseManager {
 
 				this.maybeTrack(result, licenseState)
 
-				this.state.set(licenseState)
+				// Update both atoms atomically so dependents never observe the license state and the
+				// feature flags out of sync mid-update.
+				transact(() => {
+					this.state.set(licenseState)
+					this.featureFlags.set(getEnabledFeatures(result, licenseState, this.isDevelopment))
+				})
 			})
 			.catch((error) => {
 				console.error('License validation failed:', error)
@@ -124,6 +165,14 @@ export class LicenseManager {
 			})
 	}
 
+	/**
+	 * Returns whether a given licensable feature is enabled. Reactive: reading this inside a signal
+	 * recomputes when license validation resolves.
+	 */
+	isFeatureEnabled(feature: LicenseFeatureName): boolean {
+		return this.featureFlags.get()[feature]
+	}
+
 	private getIsDevelopment() {
 		// If we are using https on a non-loopback domain we assume it's a production env and a development one otherwise
 		return (
@@ -286,6 +335,12 @@ export class LicenseManager {
 			const isPerpetualLicenseExpired =
 				isPerpetualLicense && this.isPerpetualLicenseExpired(expiryDate)
 
+			// The collaboration umbrella grants all of its sub-features, so commenting is enabled
+			// by either the commenting flag or the collaboration flag.
+			const isCollaborationEnabled = this.isFlagEnabled(licenseInfo.flags, FLAGS.FEAT_COLLABORATION)
+			const isCommentingEnabled =
+				isCollaborationEnabled || this.isFlagEnabled(licenseInfo.flags, FLAGS.FEAT_COMMENTING)
+
 			// For perpetual licenses, the calendar expiry date only gates access to future
 			// major/minor releases; it does not "expire" the license itself. While the user
 			// is still on a covered version we report `daysSinceExpiry` as 0 so consumers
@@ -309,6 +364,8 @@ export class LicenseManager {
 				isEvaluationLicense,
 				isEvaluationLicenseExpired:
 					isEvaluationLicense && this.isEvaluationLicenseExpired(expiryDate),
+				isCollaborationEnabled,
+				isCommentingEnabled,
 				daysSinceExpiry,
 			}
 			this.outputLicenseInfoIfNeeded(result)
@@ -483,6 +540,38 @@ export class LicenseManager {
 	static className = 'tl-watermark_SEE-LICENSE'
 }
 
+/**
+ * Derives which licensable features are enabled from the parse result and the derived license
+ * state. In development every feature is enabled so SDK developers can build against them; in
+ * production a feature requires both an active, valid license and the corresponding flag.
+ *
+ * @internal
+ */
+export function getEnabledFeatures(
+	result: LicenseFromKeyResult,
+	licenseState: LicenseState,
+	isDevelopment: boolean
+): Record<LicenseFeatureName, boolean> {
+	// Development gets all features so SDK developers can build against them.
+	if (isDevelopment) {
+		return { ...ALL_FEATURES }
+	}
+
+	// Features require an active, valid license. Both the 30-day grace-period 'licensed' state and
+	// the watermark state count as valid; unlicensed/expired/pending do not.
+	if (
+		!result.isLicenseParseable ||
+		(licenseState !== 'licensed' && licenseState !== 'licensed-with-watermark')
+	) {
+		return { ...NO_FEATURES }
+	}
+
+	return {
+		collaboration: result.isCollaborationEnabled,
+		commenting: result.isCommentingEnabled,
+	}
+}
+
 export function getLicenseState(
 	result: LicenseFromKeyResult,
 	outputMessages: (messages: string[]) => void,

package/src/lib/license/useLicenseManagerState.ts

@@ -1,7 +1,23 @@
 import { useValue } from '@tldraw/state-react'
-import { LicenseManager, LicenseState } from './LicenseManager'
+import { LicenseFeatureName, LicenseManager, LicenseState } from './LicenseManager'
 
 /** @internal */
 export function useLicenseManagerState(licenseManager: LicenseManager): LicenseState {
 	return useValue('watermarkState', () => licenseManager.state.get(), [licenseManager])
 }
+
+/**
+ * Reactively reads whether a licensable feature is enabled for the current license. Re-renders when
+ * license validation resolves.
+ *
+ * @internal
+ */
+export function useLicenseFeatureFlag(
+	licenseManager: LicenseManager,
+	feature: LicenseFeatureName
+): boolean {
+	return useValue('licenseFeature', () => licenseManager.isFeatureEnabled(feature), [
+		licenseManager,
+		feature,
+	])
+}

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 = '5.3.0-canary.fa3355c81e86'
+export const version = '5.3.0-internal.1640468db8fd'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-07-14T11:11:12.179Z',
-	patch: '2026-07-14T11:11:12.179Z',
+	minor: '2026-07-23T13:41:51.397Z',
+	patch: '2026-07-23T13:41:51.397Z',
 }