@tldraw/editor 3.10.3 → 3.11.0-canary.03a8f07c67a3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.10.3",
+  "version": "3.11.0-canary.03a8f07c67a3",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,12 +48,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.10.3",
-    "@tldraw/state-react": "3.10.3",
-    "@tldraw/store": "3.10.3",
-    "@tldraw/tlschema": "3.10.3",
-    "@tldraw/utils": "3.10.3",
-    "@tldraw/validate": "3.10.3",
+    "@tldraw/state": "3.11.0-canary.03a8f07c67a3",
+    "@tldraw/state-react": "3.11.0-canary.03a8f07c67a3",
+    "@tldraw/store": "3.11.0-canary.03a8f07c67a3",
+    "@tldraw/tlschema": "3.11.0-canary.03a8f07c67a3",
+    "@tldraw/utils": "3.11.0-canary.03a8f07c67a3",
+    "@tldraw/validate": "3.11.0-canary.03a8f07c67a3",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
@@ -72,12 +72,15 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/benchmark": "^2.1.5",
+    "@types/react": "^18.3.18",
     "@types/wicg-file-system-access": "^2020.9.8",
     "benchmark": "^2.1.4",
     "fake-indexeddb": "^4.0.2",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "lazyrepo": "0.0.0-alpha.27",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "resize-observer-polyfill": "^1.5.1"
   },
   "jest": {

package/src/index.ts

@@ -109,7 +109,10 @@ export {
 	type TLShapeIndicatorProps,
 } from './lib/components/default-components/DefaultShapeIndicator'
 export { type TLShapeIndicatorErrorFallbackComponent } from './lib/components/default-components/DefaultShapeIndicatorErrorFallback'
-export { DefaultShapeIndicators } from './lib/components/default-components/DefaultShapeIndicators'
+export {
+	DefaultShapeIndicators,
+	type TLShapeIndicatorsProps,
+} from './lib/components/default-components/DefaultShapeIndicators'
 export {
 	DefaultSnapIndicator,
 	type TLSnapIndicatorProps,

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

@@ -9,15 +9,15 @@ import { useEditorComponents } from '../../hooks/useEditorComponents'
 import { OptionalErrorBoundary } from '../ErrorBoundary'
 
 // need an extra layer of indirection here to allow hooks to be used inside the indicator render
-const EvenInnererIndicator = ({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
+const EvenInnererIndicator = memo(({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
 	return useStateTracking('Indicator: ' + shape.type, () =>
 		// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
 		// calling the render method with stale data.
 		util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)
 	)
-}
+})
 
-const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
+const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 	const shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])
 
 	const { ShapeIndicatorErrorFallback } = useEditorComponents()
@@ -34,7 +34,7 @@ const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 			<EvenInnererIndicator key={shape.id} shape={shape} util={editor.getShapeUtil(shape)} />
 		</OptionalErrorBoundary>
 	)
-}
+})
 
 /** @public */
 export interface TLShapeIndicatorProps {

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

@@ -4,10 +4,24 @@ import { memo, useRef } from 'react'
 import { useEditor } from '../../hooks/useEditor'
 import { useEditorComponents } from '../../hooks/useEditorComponents'
 
+/** @public */
+export interface TLShapeIndicatorsProps {
+	/** Whether to hide all of the indicators */
+	hideAll?: boolean
+	/** Whether to show all of the indicators */
+	showAll?: boolean
+}
+
 /** @public @react */
-export const DefaultShapeIndicators = memo(function DefaultShapeIndicators() {
+export const DefaultShapeIndicators = memo(function DefaultShapeIndicators({
+	hideAll,
+	showAll,
+}: TLShapeIndicatorsProps) {
 	const editor = useEditor()
 
+	if (hideAll && showAll)
+		throw Error('You cannot set both hideAll and showAll props to true, cmon now')
+
 	const rPreviousSelectedShapeIds = useRef<Set<TLShapeId>>(new Set())
 
 	const idsToDisplay = useValue(
@@ -16,34 +30,38 @@ export const DefaultShapeIndicators = memo(function DefaultShapeIndicators() {
 			const prev = rPreviousSelectedShapeIds.current
 			const next = new Set<TLShapeId>()
 
-			if (
-				// We only show indicators when in the following states...
-				editor.isInAny(
-					'select.idle',
-					'select.brushing',
-					'select.scribble_brushing',
-					'select.editing_shape',
-					'select.pointing_shape',
-					'select.pointing_selection',
-					'select.pointing_handle'
-				) &&
-				// ...but we hide indicators when we've just changed a style (so that the user can see the change)
-				!editor.getInstanceState().isChangingStyle
-			) {
-				// We always want to show indicators for the selected shapes, if any
-				const selected = editor.getSelectedShapeIds()
-				for (const id of selected) {
-					next.add(id)
-				}
+			const instanceState = editor.getInstanceState()
 
-				// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any
-				if (editor.isInAny('select.idle', 'select.editing_shape')) {
-					const instanceState = editor.getInstanceState()
-					if (instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
-						const hovered = editor.getHoveredShapeId()
-						if (hovered) next.add(hovered)
-					}
-				}
+			const isChangingStyle = instanceState.isChangingStyle
+
+			// todo: this is tldraw specific and is duplicated at the tldraw layer. What should we do here instead?
+
+			const isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')
+
+			const isInSelectState = editor.isInAny(
+				'select.brushing',
+				'select.scribble_brushing',
+				'select.pointing_shape',
+				'select.pointing_selection',
+				'select.pointing_handle'
+			)
+
+			// We hide all indicators if we're changing style or in certain interactions
+			// todo: move this to some kind of Tool.hideIndicators property
+			if (isChangingStyle || !(isIdleOrEditing || isInSelectState)) {
+				rPreviousSelectedShapeIds.current = next
+				return next
+			}
+
+			// We always want to show indicators for the selected shapes, if any
+			for (const id of editor.getSelectedShapeIds()) {
+				next.add(id)
+			}
+
+			// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any
+			if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
+				const hovered = editor.getHoveredShapeId()
+				if (hovered) next.add(hovered)
 			}
 
 			// Ok, has anything changed?
@@ -54,7 +72,7 @@ export const DefaultShapeIndicators = memo(function DefaultShapeIndicators() {
 				return next
 			}
 
-			// If any of the new ids are not in the previous set, then the selection has changed
+			// Set difference check
 			for (const id of next) {
 				if (!prev.has(id)) {
 					rPreviousSelectedShapeIds.current = next
@@ -62,7 +80,6 @@ export const DefaultShapeIndicators = memo(function DefaultShapeIndicators() {
 				}
 			}
 
-			// If nothing has changed, then return the previous value
 			return prev
 		},
 		[editor]
@@ -75,6 +92,10 @@ export const DefaultShapeIndicators = memo(function DefaultShapeIndicators() {
 	if (!ShapeIndicator) return null
 
 	return renderingShapes.map(({ id }) => (
-		<ShapeIndicator key={id + '_indicator'} shapeId={id} hidden={!idsToDisplay.has(id)} />
+		<ShapeIndicator
+			key={id + '_indicator'}
+			shapeId={id}
+			hidden={!showAll && (hideAll || !idsToDisplay.has(id))}
+		/>
 	))
 })

package/src/lib/config/TLUserPreferences.ts

@@ -132,7 +132,7 @@ export function userPrefersReducedMotion() {
 
 /** @public */
 export const defaultUserPreferences = Object.freeze({
-	name: 'New User',
+	name: '',
 	locale: getDefaultTranslationLocale(),
 	color: getRandomColor(),
 

package/src/lib/config/createTLStore.ts

@@ -119,6 +119,7 @@ export function createTLStore({
 			assets: {
 				upload: assets.upload,
 				resolve: assets.resolve ?? defaultAssetResolve,
+				remove: assets.remove ?? (() => Promise.resolve()),
 			},
 			onMount: (editor) => {
 				assert(editor instanceof Editor)

package/src/lib/constants.ts

@@ -7,7 +7,7 @@ export const DEFAULT_CAMERA_OPTIONS: TLCameraOptions = {
 	wheelBehavior: 'pan',
 	panSpeed: 1,
 	zoomSpeed: 1,
-	zoomSteps: [0.1, 0.25, 0.5, 1, 2, 4, 8],
+	zoomSteps: [0.05, 0.1, 0.25, 0.5, 1, 2, 4, 8],
 }
 
 /** @internal */

package/src/lib/editor/Editor.ts

@@ -4218,7 +4218,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 				: (assets as TLAsset[]).map((a) => a.id)
 		if (ids.length <= 0) return this
 
-		this.run(() => this.store.remove(ids), { history: 'ignore' })
+		this.run(
+			() => {
+				this.store.props.assets.remove?.(ids)
+				this.store.remove(ids)
+			},
+			{ history: 'ignore' }
+		)
 		return this
 	}
 
@@ -5610,7 +5616,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Create bindings from a list of partial bindings. You can omit the ID and most props of a
 	 * binding, but the `type`, `toId`, and `fromId` must all be provided.
 	 */
-	createBindings(partials: TLBindingCreate[]) {
+	createBindings<B extends TLBinding = TLBinding>(partials: TLBindingCreate<B>[]) {
 		const bindings: TLBinding[] = []
 		for (const partial of partials) {
 			const fromShape = this.getShape(partial.fromId)
@@ -6328,21 +6334,22 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @example
 	 * ```ts
-	 * editor.stackShapes([box1, box2], 'horizontal', 32)
-	 * editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal', 32)
+	 * editor.stackShapes([box1, box2], 'horizontal')
+	 * editor.stackShapes(editor.getSelectedShapeIds(), 'horizontal')
 	 * ```
 	 *
 	 * @param shapes - The shapes (or shape ids) to stack.
 	 * @param operation - Whether to stack horizontally or vertically.
-	 * @param gap - The gap to leave between shapes.
+	 * @param gap - The gap to leave between shapes. By default, uses the editor's `adjacentShapeMargin` option.
 	 *
 	 * @public
 	 */
 	stackShapes(
 		shapes: TLShapeId[] | TLShape[],
 		operation: 'horizontal' | 'vertical',
-		gap: number
+		gap?: number
 	): this {
+		const _gap = gap ?? this.options.adjacentShapeMargin
 		const ids =
 			typeof shapes[0] === 'string'
 				? (shapes as TLShapeId[])
@@ -6400,7 +6407,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		const len = shapeClustersToStack.length
-		if ((gap === 0 && len < 3) || len < 2) return this
+		if ((_gap === 0 && len < 3) || len < 2) return this
 
 		let val: 'x' | 'y'
 		let min: 'minX' | 'minY'
@@ -6421,7 +6428,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		let shapeGap: number = 0
 
-		if (gap === 0) {
+		if (_gap === 0) {
 			// note: this is not used in the current tldraw.com; there we use a specified stack
 
 			const gaps: Record<number, number> = {}
@@ -6461,7 +6468,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 		} else {
 			// If a gap was provided, then use that instead.
-			shapeGap = gap
+			shapeGap = _gap
 		}
 
 		const changes: TLShapePartial[] = []
@@ -6500,17 +6507,19 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @example
 	 * ```ts
-	 * editor.packShapes([box1, box2], 32)
+	 * editor.packShapes([box1, box2])
 	 * editor.packShapes(editor.getSelectedShapeIds(), 32)
 	 * ```
 	 *
 	 *
 	 * @param shapes - The shapes (or shape ids) to pack.
-	 * @param gap - The padding to apply to the packed shapes. Defaults to 16.
+	 * @param gap - The padding to apply to the packed shapes. Defaults to the editor's `adjacentShapeMargin` option.
 	 */
-	packShapes(shapes: TLShapeId[] | TLShape[], gap: number): this {
+	packShapes(shapes: TLShapeId[] | TLShape[], _gap?: number): this {
 		if (this.getIsReadonly()) return this
 
+		const gap = _gap ?? this.options.adjacentShapeMargin
+
 		const ids =
 			typeof shapes[0] === 'string'
 				? (shapes as TLShapeId[])

package/src/lib/editor/managers/FocusManager.ts

@@ -30,6 +30,9 @@ export class FocusManager {
 			editor.updateInstanceState({ isFocused: !!autoFocus })
 		}
 		this.updateContainerClass()
+
+		document.body.addEventListener('keydown', this.handleKeyDown.bind(this))
+		document.body.addEventListener('mousedown', this.handleMouseDown.bind(this))
 	}
 
 	/**
@@ -50,6 +53,19 @@ export class FocusManager {
 		} else {
 			container.classList.remove('tl-container__focused')
 		}
+		container.classList.add('tl-container__no-focus-ring')
+	}
+
+	private handleKeyDown(keyEvent: KeyboardEvent) {
+		const container = this.editor.getContainer()
+		if (keyEvent.key === 'Tab') {
+			container.classList.remove('tl-container__no-focus-ring')
+		}
+	}
+
+	private handleMouseDown() {
+		const container = this.editor.getContainer()
+		container.classList.add('tl-container__no-focus-ring')
 	}
 
 	focus() {
@@ -62,6 +78,8 @@ export class FocusManager {
 	}
 
 	dispose() {
+		document.body.removeEventListener('keydown', this.handleKeyDown.bind(this))
+		document.body.removeEventListener('mousedown', this.handleMouseDown.bind(this))
 		this.disposeSideEffectListener?.()
 	}
 }

package/src/lib/editor/managers/UserPreferencesManager.ts

@@ -80,7 +80,7 @@ export class UserPreferencesManager {
 	}
 
 	@computed getName() {
-		return this.user.userPreferences.get().name ?? defaultUserPreferences.name
+		return this.user.userPreferences.get().name?.trim() ?? defaultUserPreferences.name
 	}
 
 	@computed getLocale() {

package/src/lib/exports/exportToSvg.tsx

@@ -62,7 +62,7 @@ export async function exportToSvg(
 		const svg = renderTarget.firstElementChild
 		assert(svg instanceof SVGSVGElement, 'Expected an SVG element')
 
-		// And apply any changes to <foreignObject> elements that we need to make. Whilst we're in
+		// And apply any changes to <foreignObject> elements that we need to make. while we're in
 		// the document, these elements work exactly as we'd expect from other dom elements - they
 		// can load external resources, and any stylesheets in the document apply to them as we
 		// would expect them to. But when we pull the SVG into its own file or draw it to a canvas

package/src/lib/exports/getSvgJsx.tsx

@@ -354,7 +354,7 @@ function SvgExport({
 				key: uniqueId(),
 				getElement: async () => {
 					const declaration = await editor.fonts.toEmbeddedCssDeclaration(font)
-					return <style>{declaration}</style>
+					return <style nonce={editor.options.nonce}>{declaration}</style>
 				},
 			})
 		}

package/src/lib/hooks/useLocalStore.ts

@@ -52,6 +52,9 @@ export function useLocalStore(
 
 				return asset.props.src
 			},
+			remove: async (assetIds) => {
+				await client.db.removeAssets(assetIds)
+			},
 			...rest.assets,
 		}
 

package/src/lib/license/Watermark.tsx

@@ -85,6 +85,7 @@ const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
 })
 
 const LicenseStyles = memo(function LicenseStyles() {
+	const editor = useEditor()
 	const className = LicenseManager.className
 
 	const CSS = `/* ------------------- SEE LICENSE -------------------
@@ -156,8 +157,13 @@ To remove the watermark, please purchase a license at tldraw.dev.
 			animation: delayed_link 0.2s forwards ease-in-out;
 			animation-delay: 0.32s;
 		}
+
+		.${className} > a:focus-visible {
+			opacity: 1;
+		}
 	}
 
+
 	@keyframes delayed_link {
 		0% {
 			cursor: inherit;
@@ -171,5 +177,5 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		}
 	}`
 
-	return <style>{CSS}</style>
+	return <style nonce={editor.options.nonce}>{CSS}</style>
 })

package/src/lib/options.ts

@@ -75,6 +75,11 @@ export interface TldrawOptions {
 	 * away and let the fonts load in in the background.
 	 */
 	readonly maxFontsToLoadBeforeRender: number
+	/**
+	 * If you have a CSP policy that blocks inline styles, you can use this prop to provide a
+	 * nonce to use in the editor's styles.
+	 */
+	readonly nonce: string | undefined
 }
 
 /** @public */
@@ -121,4 +126,5 @@ export const defaultTldrawOptions = {
 	exportProvider: Fragment,
 	enableToolbarKeyboardShortcuts: true,
 	maxFontsToLoadBeforeRender: Infinity,
+	nonce: undefined,
 } as const satisfies TldrawOptions

package/src/lib/utils/sync/LocalIndexedDb.ts

@@ -303,6 +303,15 @@ export class LocalIndexedDb {
 			await assetsStore.put(blob, assetId)
 		})
 	}
+
+	async removeAssets(assetId: string[]) {
+		await this.tx('readwrite', [Table.Assets], async (tx) => {
+			const assetsStore = tx.objectStore(Table.Assets)
+			for (const id of assetId) {
+				await assetsStore.delete(id)
+			}
+		})
+	}
 }
 
 /** @internal */

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 = '3.10.3'
+export const version = '3.11.0-canary.03a8f07c67a3'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-03-11T14:20:29.409Z',
-	patch: '2025-03-18T15:34:11.310Z',
+	minor: '2025-03-19T13:45:12.707Z',
+	patch: '2025-03-19T13:45:12.707Z',
 }