@tldraw/editor 3.11.0-canary.f529c521e249 → 3.12.0-canary.10d4563919ca

package/src/lib/editor/Editor.ts

@@ -2102,12 +2102,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	setRichTextEditor(textEditor: TiptapEditor | null) {
-		// If the new editor is different from the current one, destroy the current one
-		const current = this._currentRichTextEditor.__unsafe__getWithoutCapture()
-		if (current !== textEditor) {
-			current?.destroy()
-		}
-
 		this._currentRichTextEditor.set(textEditor)
 		return this
 	}
@@ -4218,7 +4212,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
 	}
 
@@ -6328,21 +6328,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 +6401,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 +6422,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 +6462,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 +6501,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[])
@@ -8136,8 +8139,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!currentTool) return styles
 
 		if (currentTool.shapeType) {
-			for (const style of this.styleProps[currentTool.shapeType].keys()) {
-				styles.applyValue(style, this.getStyleForNextShape(style))
+			if (
+				currentTool.shapeType === 'frame' &&
+				!(this.getShapeUtil('frame')!.options as any).showColors
+			) {
+				for (const style of this.styleProps[currentTool.shapeType].keys()) {
+					if (style.id === 'tldraw:color') continue
+					styles.applyValue(style, this.getStyleForNextShape(style))
+				}
+			} else {
+				for (const style of this.styleProps[currentTool.shapeType].keys()) {
+					styles.applyValue(style, this.getStyleForNextShape(style))
+				}
 			}
 		}
 

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/StyleEmbedder.ts

@@ -7,7 +7,12 @@ import {
 	getRenderedChildren,
 } from './domUtils'
 import { resourceToDataUrl } from './fetchCache'
-import { isPropertyInherited, parseCssValueUrls, shouldIncludeCssProperty } from './parseCss'
+import {
+	isPropertyCoveredByCurrentColor,
+	isPropertyInherited,
+	parseCssValueUrls,
+	shouldIncludeCssProperty,
+} from './parseCss'
 
 type Styles = { [K in string]?: string }
 type ReadonlyStyles = { readonly [K in string]?: string }
@@ -53,9 +58,20 @@ export class StyleEmbedder {
 			? getDefaultStylesForTagName(element.tagName.toLowerCase())
 			: NO_STYLES
 
-		const parentStyles = shouldSkipInheritedParentStyles
-			? (this.styles.get(element.parentElement as Element)?.self ?? NO_STYLES)
-			: NO_STYLES
+		const parentStyles = Object.assign({}, NO_STYLES) as Styles
+		if (shouldSkipInheritedParentStyles) {
+			let el = element.parentElement
+			// Keep going up the tree to find all the relevant styles
+			while (el) {
+				const currentStyles = this.styles.get(el)?.self
+				for (const style in currentStyles) {
+					if (!parentStyles[style]) {
+						parentStyles[style] = currentStyles[style]
+					}
+				}
+				el = el.parentElement
+			}
+		}
 
 		const info: ElementStyleInfo = {
 			self: styleFromElement(element, { defaultStyles, parentStyles }),
@@ -230,6 +246,8 @@ function styleFromComputedStyleMap(
 
 		if (defaultStyles[property] === value) continue
 		if (parentStyles[property] === value && isPropertyInherited(property)) continue
+		if (isPropertyCoveredByCurrentColor(style.get('color')?.toString() || '', property, value))
+			continue
 
 		styles[property] = value
 	}
@@ -249,6 +267,7 @@ function styleFromComputedStyle(
 
 		if (defaultStyles[property] === value) continue
 		if (parentStyles[property] === value && isPropertyInherited(property)) continue
+		if (isPropertyCoveredByCurrentColor(style.color, property, value)) continue
 
 		styles[property] = value
 	}

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/exports/parseCss.ts

@@ -111,11 +111,43 @@ export function parseCssValueUrls(value: string) {
 	}))
 }
 
+const currentColorProperties = new Set([
+	'border-block-end-color',
+	'border-block-start-color',
+	'border-bottom-color',
+	'border-inline-end-color',
+	'border-inline-start-color',
+	'border-left-color',
+	'border-right-color',
+	'border-top-color',
+	'caret-color',
+	'column-rule-color',
+	'outline-color',
+	'text-decoration',
+	'text-decoration-color',
+	'text-emphasis-color',
+])
+
+export function isPropertyCoveredByCurrentColor(
+	currentColor: string,
+	property: string,
+	value: string
+) {
+	if (currentColorProperties.has(property)) {
+		return (
+			value === 'currentColor' ||
+			value === currentColor ||
+			(property === 'text-decoration' && value === `none solid ${currentColor}`)
+		)
+	}
+}
+
 const inheritedProperties = new Set([
 	'border-collapse',
 	'border-spacing',
 	'caption-side',
-	'color',
+	// N.B. We shouldn't inherit 'color' because there's some UA styling, e.g. `mark` elements
+	// 'color',
 	'cursor',
 	'direction',
 	'empty-cells',
@@ -136,16 +168,18 @@ const inheritedProperties = new Set([
 	'orphans',
 	'overflow-wrap',
 	'quotes',
+	'stroke-linecap',
+	'stroke-linejoin',
 	'tab-size',
 	'text-align',
 	'text-align-last',
-	'text-decoration-color',
 	'text-indent',
 	'text-justify',
 	'text-shadow',
 	'text-transform',
 	'visibility',
 	'white-space',
+	'white-space-collapse',
 	'widows',
 	'word-break',
 	'word-spacing',

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/primitives/geometry/Group2d.ts

@@ -102,6 +102,6 @@ export class Group2d extends Geometry2d {
 	}
 
 	getSvgPathData(): string {
-		return this.children.map((c, i) => (c.isLabel ? '' : c.getSvgPathData(i === 0))).join(' ')
+		return this.children.map((c) => (c.isLabel ? '' : c.getSvgPathData(true))).join(' ')
 	}
 }

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.11.0-canary.f529c521e249'
+export const version = '3.12.0-canary.10d4563919ca'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-03-11T14:54:49.451Z',
-	patch: '2025-03-11T14:54:49.451Z',
+	minor: '2025-03-24T14:17:27.684Z',
+	patch: '2025-03-24T14:17:27.684Z',
 }