@tldraw/editor 3.11.0-canary.f529c521e249 → 3.12.0-canary.5530d0bb35f4

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/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.5530d0bb35f4'
 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-20T16:22:24.879Z',
+	patch: '2025-03-20T16:22:24.879Z',
 }