@tldraw/editor 3.9.0 → 3.10.0-canary.15f6aaa3d2d3

package/src/lib/editor/Editor.ts

@@ -1,4 +1,12 @@
-import { EMPTY_ARRAY, atom, computed, react, transact, unsafe__withoutCapture } from '@tldraw/state'
+import {
+	Atom,
+	EMPTY_ARRAY,
+	atom,
+	computed,
+	react,
+	transact,
+	unsafe__withoutCapture,
+} from '@tldraw/state'
 import {
 	ComputedCache,
 	RecordType,
@@ -34,6 +42,7 @@ import {
 	TLImageAsset,
 	TLInstance,
 	TLInstancePageState,
+	TLNoteShape,
 	TLPOINTER_ID,
 	TLPage,
 	TLPageId,
@@ -130,6 +139,7 @@ import {
 import { getIncrementedName } from '../utils/getIncrementedName'
 import { isAccelKey } from '../utils/keyboard'
 import { getReorderingShapesChanges } from '../utils/reorderShapes'
+import { TLTextOptions, TiptapEditor } from '../utils/richText'
 import { applyRotationToSnapshotShapes, getRotationSnapshot } from '../utils/rotation'
 import { BindingOnDeleteOptions, BindingUtil } from './bindings/BindingUtil'
 import { bindingsIndex } from './derivations/bindingsIndex'
@@ -139,6 +149,7 @@ import { deriveShapeIdsInCurrentPage } from './derivations/shapeIdsInCurrentPage
 import { ClickManager } from './managers/ClickManager'
 import { EdgeScrollManager } from './managers/EdgeScrollManager'
 import { FocusManager } from './managers/FocusManager'
+import { FontManager } from './managers/FontManager'
 import { HistoryManager } from './managers/HistoryManager'
 import { ScribbleManager } from './managers/ScribbleManager'
 import { SnapManager } from './managers/SnapManager/SnapManager'
@@ -225,8 +236,10 @@ export interface TLEditorOptions {
 	 * Options for the editor's camera.
 	 */
 	cameraOptions?: Partial<TLCameraOptions>
+	textOptions?: TLTextOptions
 	options?: Partial<TldrawOptions>
 	licenseKey?: string
+	fontAssetUrls?: { [key: string]: string | undefined }
 	/**
 	 * A predicate that should return true if the given shape should be hidden.
 	 * @param shape - The shape to check.
@@ -255,6 +268,7 @@ export interface TLRenderingShape {
 
 /** @public */
 export class Editor extends EventEmitter<TLEventMap> {
+	readonly id = uniqueId()
 	constructor({
 		store,
 		user,
@@ -263,11 +277,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 		tools,
 		getContainer,
 		cameraOptions,
+		textOptions,
 		initialState,
 		autoFocus,
 		inferDarkMode,
 		options,
 		isShapeHidden,
+		fontAssetUrls,
 	}: TLEditorOptions) {
 		super()
 
@@ -291,12 +307,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this._cameraOptions.set({ ...DEFAULT_CAMERA_OPTIONS, ...cameraOptions })
 
+		this._textOptions = atom('text options', textOptions ?? null)
+
 		this.user = new UserPreferencesManager(user ?? createTLUser(), inferDarkMode ?? false)
 		this.disposables.add(() => this.user.dispose())
 
 		this.getContainer = getContainer
 
 		this.textMeasure = new TextManager(this)
+		this.fonts = new FontManager(this, fontAssetUrls)
+
 		this._tickManager = new TickManager(this)
 
 		class NewRoot extends RootState {
@@ -835,6 +855,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly textMeasure: TextManager
 
+	/**
+	 * A utility for managing the set of fonts that should be rendered in the document.
+	 *
+	 * @public
+	 */
+	readonly fonts: FontManager
+
 	/**
 	 * A manager for the editor's environment.
 	 *
@@ -2023,6 +2050,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	setEditingShape(shape: TLShapeId | TLShape | null): this {
 		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
+		this.setRichTextEditor(null)
 		if (id !== this.getEditingShapeId()) {
 			if (id) {
 				const shape = this.getShape(id)
@@ -2041,6 +2069,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this.run(
 				() => {
 					this._updateCurrentPageState({ editingShapeId: null })
+					this._currentRichTextEditor.set(null)
 				},
 				{ history: 'ignore' }
 			)
@@ -2048,6 +2077,42 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this
 	}
 
+	// Rich text editor
+
+	private _currentRichTextEditor = atom('rich text editor', null as TiptapEditor | null)
+
+	/**
+	 * The current editing shape's text editor.
+	 *
+	 * @public
+	 */
+	@computed getRichTextEditor(): TiptapEditor | null {
+		return this._currentRichTextEditor.get()
+	}
+
+	/**
+	 * Set the current editing shape's rich text editor.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.setRichTextEditor(richTextEditorView)
+	 * ```
+	 *
+	 * @param textEditor - The text editor to set as the current editing shape's text editor.
+	 *
+	 * @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
+	}
+
 	// Hovered
 
 	/**
@@ -2104,6 +2169,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	@computed getHintingShapeIds() {
 		return this.getCurrentPageState().hintingShapeIds
 	}
+
 	/**
 	 * The editor's current hinting shapes.
 	 *
@@ -2252,6 +2318,21 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this
 	}
 
+	private _textOptions: Atom<TLTextOptions | null>
+
+	/**
+	 * Get the current text options.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.getTextOptions()
+	 * ```
+	 *
+	 *  @public */
+	getTextOptions() {
+		return assertExists(this._textOptions.get(), 'Cannot use text without setting textOptions')
+	}
+
 	/* --------------------- Camera --------------------- */
 
 	/** @internal */
@@ -4226,7 +4307,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!this._shapeGeometryCaches[context]) {
 			this._shapeGeometryCaches[context] = this.store.createComputedCache(
 				'bounds',
-				(shape) => this.getShapeUtil(shape).getGeometry(shape, opts),
+				(shape) => {
+					this.fonts.trackFontsForShape(shape)
+					return this.getShapeUtil(shape).getGeometry(shape, opts)
+				},
 				{ areRecordsEqual: (a, b) => a.props === b.props }
 			)
 		}
@@ -4764,9 +4848,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// Check labels first
 			if (
 				this.isShapeOfType<TLFrameShape>(shape, 'frame') ||
-				((this.isShapeOfType<TLArrowShape>(shape, 'arrow') ||
+				(this.isShapeOfType<TLArrowShape>(shape, 'arrow') && shape.props.text.trim()) ||
+				((this.isShapeOfType<TLNoteShape>(shape, 'note') ||
 					(this.isShapeOfType<TLGeoShape>(shape, 'geo') && shape.props.fill === 'none')) &&
-					shape.props.text.trim())
+					this.getShapeUtil(shape).getText(shape)?.trim())
 			) {
 				for (const childGeometry of (geometry as Group2d).children) {
 					if (childGeometry.isLabel && childGeometry.isPointInBounds(pointInShapeSpace)) {
@@ -7290,7 +7375,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @example
 	 * ```ts
 	 * editor.createShape(myShape)
-	 * editor.createShape({ id: 'box1', type: 'text', props: { text: "ok" } })
+	 * editor.createShape({ id: 'box1', type: 'text', props: { richText: toRichText("ok") } })
 	 * ```
 	 *
 	 * @param shape - The shape (or shape partial) to create.
@@ -7308,7 +7393,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @example
 	 * ```ts
 	 * editor.createShapes([myShape])
-	 * editor.createShapes([{ id: 'box1', type: 'text', props: { text: "ok" } }])
+	 * editor.createShapes([{ id: 'box1', type: 'text', props: { richText: toRichText("ok") } }])
 	 * ```
 	 *
 	 * @param shapes - The shapes (or shape partials) to create.

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

@@ -0,0 +1,251 @@
+import { computed, EMPTY_ARRAY, transact } from '@tldraw/state'
+import { AtomMap } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import {
+	areArraysShallowEqual,
+	compact,
+	FileHelpers,
+	mapObjectMapValues,
+	objectMapEntries,
+} from '@tldraw/utils'
+import { Editor } from '../Editor'
+
+/**
+ * Represents the `src` property of a {@link TLFontFace}.
+ * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
+ * @public
+ */
+export interface TLFontFaceSource {
+	/**
+	 * A URL from which to load the font. If the value here is a key in
+	 * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.
+	 */
+	url: string
+	format?: string
+	tech?: string
+}
+
+/**
+ * A font face that can be used in the editor. The properties of this are largely the same as the
+ * ones in the
+ * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
+ * @public
+ */
+export interface TLFontFace {
+	/**
+	 * How this font can be referred to in CSS.
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
+	 */
+	readonly family: string
+	/**
+	 * The source of the font. This
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
+	 */
+	readonly src: TLFontFaceSource
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
+	 */
+	readonly ascentOverride?: string
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
+	 */
+	readonly descentOverride?: string
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
+	 */
+	readonly stretch?: string
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
+	 */
+	readonly style?: string
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
+	 */
+	readonly weight?: string
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
+	 */
+	readonly featureSettings?: string
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
+	 */
+	readonly lineGapOverride?: string
+	/**
+	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
+	 */
+	readonly unicodeRange?: string
+}
+
+interface FontState {
+	readonly state: 'loading' | 'ready' | 'error'
+	readonly instance: FontFace
+	readonly loadingPromise: Promise<void>
+}
+
+/** @public */
+export class FontManager {
+	constructor(
+		private readonly editor: Editor,
+		private readonly assetUrls?: { [key: string]: string | undefined }
+	) {
+		this.shapeFontFacesCache = editor.store.createComputedCache(
+			'shape font faces',
+			(shape: TLShape) => {
+				const shapeUtil = this.editor.getShapeUtil(shape)
+				return shapeUtil.getFontFaces(shape)
+			},
+			{ areResultsEqual: areArraysShallowEqual }
+		)
+
+		this.shapeFontLoadStateCache = editor.store.createCache<(FontState | null)[], TLShape>(
+			(id: TLShapeId) => {
+				const fontFacesComputed = computed('font faces', () => this.getShapeFontFaces(id))
+				return computed(
+					'font load state',
+					() => {
+						const states = fontFacesComputed.get().map((face) => this.getFontState(face))
+						return states
+					},
+					{ isEqual: areArraysShallowEqual }
+				)
+			}
+		)
+	}
+
+	private readonly shapeFontFacesCache
+	private readonly shapeFontLoadStateCache
+
+	getShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[] {
+		const shapeId = typeof shape === 'string' ? shape : shape.id
+		return this.shapeFontFacesCache.get(shapeId) ?? EMPTY_ARRAY
+	}
+
+	trackFontsForShape(shape: TLShape | TLShapeId) {
+		const shapeId = typeof shape === 'string' ? shape : shape.id
+		this.shapeFontLoadStateCache.get(shapeId)
+	}
+
+	async loadRequiredFontsForCurrentPage(limit = Infinity) {
+		const neededFonts = new Set<TLFontFace>()
+		for (const shapeId of this.editor.getCurrentPageShapeIds()) {
+			for (const font of this.getShapeFontFaces(this.editor.getShape(shapeId)!)) {
+				neededFonts.add(font)
+			}
+		}
+
+		if (neededFonts.size > limit) {
+			return
+		}
+
+		const promises = Array.from(neededFonts, (font) => this.ensureFontIsLoaded(font))
+		await Promise.all(promises)
+	}
+
+	private readonly fontStates = new AtomMap<TLFontFace, FontState>('font states')
+	private getFontState(font: TLFontFace): FontState | null {
+		return this.fontStates.get(font) ?? null
+	}
+
+	ensureFontIsLoaded(font: TLFontFace): Promise<void> {
+		const existingState = this.getFontState(font)
+		if (existingState) return existingState.loadingPromise
+
+		const instance = this.findOrCreateFontFace(font)
+		const state: FontState = {
+			state: 'loading',
+			instance,
+			loadingPromise: instance
+				.load()
+				.then(() => {
+					document.fonts.add(instance)
+					this.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))
+				})
+				.catch((err) => {
+					console.error(err)
+					this.fontStates.update(font, (s) => ({ ...s, state: 'error' }))
+				}),
+		}
+
+		this.fontStates.set(font, state)
+		return state.loadingPromise
+	}
+
+	private fontsToLoad = new Set<TLFontFace>()
+	requestFonts(fonts: TLFontFace[]) {
+		if (!this.fontsToLoad.size) {
+			queueMicrotask(() => {
+				if (this.editor.isDisposed) return
+				const toLoad = this.fontsToLoad
+				this.fontsToLoad = new Set()
+				transact(() => {
+					for (const font of toLoad) {
+						this.ensureFontIsLoaded(font)
+					}
+				})
+			})
+		}
+		for (const font of fonts) {
+			this.fontsToLoad.add(font)
+		}
+	}
+
+	private findOrCreateFontFace(font: TLFontFace) {
+		for (const existing of document.fonts) {
+			if (
+				existing.family === font.family &&
+				objectMapEntries(defaultFontFaceDescriptors).every(
+					([key, defaultValue]) => existing[key] === (font[key] ?? defaultValue)
+				)
+			) {
+				return existing
+			}
+		}
+
+		const url = this.assetUrls?.[font.src.url] ?? font.src.url
+		const instance = new FontFace(font.family, `url(${JSON.stringify(url)})`, {
+			...mapObjectMapValues(defaultFontFaceDescriptors, (key) => font[key]),
+			display: 'swap',
+		})
+
+		document.fonts.add(instance)
+
+		return instance
+	}
+
+	async toEmbeddedCssDeclaration(font: TLFontFace) {
+		const url = this.assetUrls?.[font.src.url] ?? font.src.url
+		const dataUrl = await FileHelpers.urlToDataUrl(url)
+
+		const src = compact([
+			`url("${dataUrl}")`,
+			font.src.format ? `format(${font.src.format})` : null,
+			font.src.tech ? `tech(${font.src.tech})` : null,
+		]).join(' ')
+		return compact([
+			`@font-face {`,
+			`  font-family: "${font.family}";`,
+			font.ascentOverride ? `  ascent-override: ${font.ascentOverride};` : null,
+			font.descentOverride ? `  descent-override: ${font.descentOverride};` : null,
+			font.stretch ? `  font-stretch: ${font.stretch};` : null,
+			font.style ? `  font-style: ${font.style};` : null,
+			font.weight ? `  font-weight: ${font.weight};` : null,
+			font.featureSettings ? `  font-feature-settings: ${font.featureSettings};` : null,
+			font.lineGapOverride ? `  line-gap-override: ${font.lineGapOverride};` : null,
+			font.unicodeRange ? `  unicode-range: ${font.unicodeRange};` : null,
+			`  src: ${src};`,
+			`}`,
+		]).join('\n')
+	}
+}
+
+// From https://drafts.csswg.org/css-font-loading/#fontface-interface
+const defaultFontFaceDescriptors = {
+	style: 'normal',
+	weight: 'normal',
+	stretch: 'normal',
+	unicodeRange: 'U+0-10FFFF',
+	featureSettings: 'normal',
+	ascentOverride: 'normal',
+	descentOverride: 'normal',
+	lineGapOverride: 'normal',
+}

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

@@ -65,32 +65,57 @@ export class TextManager {
 			padding: string
 			disableOverflowWrapBreaking?: boolean
 		}
+	): BoxModel & { scrollWidth: number } {
+		const div = document.createElement('div')
+		div.textContent = normalizeTextForDom(textToMeasure)
+		return this.measureHtml(div.innerHTML, opts)
+	}
+
+	measureHtml(
+		html: string,
+		opts: {
+			fontStyle: string
+			fontWeight: string
+			fontFamily: string
+			fontSize: number
+			lineHeight: number
+			/**
+			 * When maxWidth is a number, the text will be wrapped to that maxWidth. When maxWidth
+			 * is null, the text will be measured without wrapping, but explicit line breaks and
+			 * space are preserved.
+			 */
+			maxWidth: null | number
+			minWidth?: null | number
+			padding: string
+			disableOverflowWrapBreaking?: boolean
+		}
 	): BoxModel & { scrollWidth: number } {
 		// Duplicate our base element; we don't need to clone deep
-		const elm = this.baseElem.cloneNode() as HTMLDivElement
-		this.editor.getContainer().appendChild(elm)
+		const wrapperElm = this.baseElem.cloneNode() as HTMLDivElement
+		this.editor.getContainer().appendChild(wrapperElm)
+		wrapperElm.innerHTML = html
+		this.baseElem.insertAdjacentElement('afterend', wrapperElm)
 
-		elm.setAttribute('dir', 'auto')
+		wrapperElm.setAttribute('dir', 'auto')
 		// N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers")
 		// is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs.
-		elm.style.setProperty('unicode-bidi', 'plaintext')
-		elm.style.setProperty('font-family', opts.fontFamily)
-		elm.style.setProperty('font-style', opts.fontStyle)
-		elm.style.setProperty('font-weight', opts.fontWeight)
-		elm.style.setProperty('font-size', opts.fontSize + 'px')
-		elm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
-		elm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')
-		elm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')
-		elm.style.setProperty('padding', opts.padding)
-		elm.style.setProperty(
+		wrapperElm.style.setProperty('unicode-bidi', 'plaintext')
+		wrapperElm.style.setProperty('font-family', opts.fontFamily)
+		wrapperElm.style.setProperty('font-style', opts.fontStyle)
+		wrapperElm.style.setProperty('font-weight', opts.fontWeight)
+		wrapperElm.style.setProperty('font-size', opts.fontSize + 'px')
+		wrapperElm.style.setProperty('line-height', opts.lineHeight * opts.fontSize + 'px')
+		wrapperElm.style.setProperty('max-width', opts.maxWidth === null ? null : opts.maxWidth + 'px')
+		wrapperElm.style.setProperty('min-width', opts.minWidth === null ? null : opts.minWidth + 'px')
+		wrapperElm.style.setProperty('padding', opts.padding)
+		wrapperElm.style.setProperty(
 			'overflow-wrap',
 			opts.disableOverflowWrapBreaking ? 'normal' : 'break-word'
 		)
 
-		elm.textContent = normalizeTextForDom(textToMeasure)
-		const scrollWidth = elm.scrollWidth
-		const rect = elm.getBoundingClientRect()
-		elm.remove()
+		const scrollWidth = wrapperElm.scrollWidth
+		const rect = wrapperElm.getBoundingClientRect()
+		wrapperElm.remove()
 
 		return {
 			x: 0,

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

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
+import { EMPTY_ARRAY } from '@tldraw/state'
 import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
 import {
 	RecordProps,
@@ -14,6 +15,7 @@ import { Box, SelectionHandle } from '../../primitives/Box'
 import { Vec } from '../../primitives/Vec'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import type { Editor } from '../Editor'
+import { TLFontFace } from '../managers/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
 import { SvgExportContext } from '../types/SvgExportContext'
@@ -170,6 +172,17 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	abstract indicator(shape: Shape): any
 
+	/**
+	 * Get the font faces that should be rendered in the document in order for this shape to render
+	 * correctly.
+	 *
+	 * @param shape - The shape.
+	 * @public
+	 */
+	getFontFaces(shape: Shape): TLFontFace[] {
+		return EMPTY_ARRAY
+	}
+
 	/**
 	 * Whether the shape can be snapped to by another shape.
 	 *

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

@@ -17,6 +17,7 @@ export interface TLEventMap {
 	tick: [number]
 	frame: [number]
 	'select-all-text': [{ shapeId: TLShapeId }]
+	'place-caret': [{ shapeId: TLShapeId; point: { x: number; y: number } }]
 }
 
 /** @public */

package/src/lib/editor/types/external-content.ts

@@ -45,6 +45,7 @@ export interface TLBaseExternalContent {
 export interface TLTextExternalContent extends TLBaseExternalContent {
 	type: 'text'
 	text: string
+	html?: string
 }
 
 /** @public */

package/src/lib/exports/FontEmbedder.ts

@@ -2,6 +2,8 @@ import { assert, bind, compact } from '@tldraw/utils'
 import { fetchCache, resourceToDataUrl } from './fetchCache'
 import { ParsedFontFace, parseCss, parseCssFontFaces, parseCssFontFamilyValue } from './parseCss'
 
+export const SVG_EXPORT_CLASSNAME = 'tldraw-svg-export'
+
 /**
  * Because SVGs cannot refer to external CSS/font resources, any web fonts used in the SVG must be
  * embedded as data URLs in inlined @font-face declarations. This class is responsible for
@@ -81,7 +83,17 @@ export class FontEmbedder {
 async function getCurrentDocumentFontFaces() {
 	const fontFaces: (ParsedFontFace[] | Promise<ParsedFontFace[] | null>)[] = []
 
-	for (const styleSheet of document.styleSheets) {
+	// In exportToSvg we add the exported node to the DOM temporarily.
+	// Because of this, and because we do a setTimeout to delay removing that node from the
+	// DOM, when looking at document.styleSheets the number of nodes and stylesheets
+	// can grow unbounded (especially when using "Debug svg" and moving shapes around).
+	// To avoid this, we filter out the stylesheets that are part of the SVG export.
+	const styleSheetsWithoutSvgExports = Array.from(document.styleSheets).filter(
+		(styleSheet) =>
+			!(styleSheet.ownerNode as HTMLElement | null)?.closest(`.${SVG_EXPORT_CLASSNAME}`)
+	)
+
+	for (const styleSheet of styleSheetsWithoutSvgExports) {
 		let cssRules
 		try {
 			cssRules = styleSheet.cssRules

package/src/lib/exports/StyleEmbedder.ts

@@ -242,7 +242,7 @@ function styleFromComputedStyle(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
-	for (const property of style) {
+	for (const [property, _] of Object.entries(style)) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.getPropertyValue(property)

package/src/lib/exports/exportToSvg.tsx

@@ -4,6 +4,7 @@ import { flushSync } from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import { Editor } from '../editor/Editor'
 import { TLSvgExportOptions } from '../editor/types/misc-types'
+import { SVG_EXPORT_CLASSNAME } from './FontEmbedder'
 import { StyleEmbedder } from './StyleEmbedder'
 import { embedMedia } from './embedMedia'
 import { getSvgJsx } from './getSvgJsx'
@@ -26,7 +27,7 @@ export async function exportToSvg(
 	// <foreignObject> elements have their styles and content inlined correctly.
 	const container = editor.getContainer()
 	const renderTarget = document.createElement('div')
-	renderTarget.className = 'tldraw-svg-export'
+	renderTarget.className = SVG_EXPORT_CLASSNAME
 	// we hide the element visually, but we don't want it to be focusable or interactive in any way either
 	renderTarget.inert = true
 	renderTarget.tabIndex = -1
@@ -83,9 +84,9 @@ export async function exportToSvg(
 
 async function applyChangesToForeignObjects(svg: SVGSVGElement) {
 	// If any shapes have their own <foreignObject> elements, we don't want to mess with them. Our
-	// ones that we need to embed will have a class of `tl-shape-foreign-object`.
+	// ones that we need to embed will have a class of `tl-export-embed-styles`.
 	const foreignObjectChildren = [
-		...svg.querySelectorAll('foreignObject.tl-shape-foreign-object > *'),
+		...svg.querySelectorAll('foreignObject.tl-export-embed-styles > *'),
 	]
 	if (!foreignObjectChildren.length) return