fix(editor): dispose font and overlay managers (tldraw#8896)

In order to clean up editor manager state across editor lifecycles, this
PR adds disposal hooks for the FontManager and overlay manager
lifecycle. It clears FontManager font state and pending font requests,
releases its store-backed cache references, and disposes registered
overlay utils from editor disposal. Closes tldraw#8885. Closes tldraw#8891.

### Change type

- [x] `api`

### Test plan

1. `cd packages/editor && yarn test run
src/lib/editor/managers/FontManager/FontManager.test.ts`
2. `cd packages/tldraw && yarn test run
src/test/overlays/OverlayManager.test.ts`
3. `yarn typecheck`
4. `yarn api-check`
5. `yarn lint-current`

- [x] Unit tests

### Release notes

- Add disposal lifecycle hooks for font and overlay managers.

### API changes

- Added `FontManager.dispose()` for clearing font manager state and
cache references.
- Added `OverlayManager.dispose()` for disposing registered overlay
utils.
- Added `OverlayUtil.dispose()` as a default no-op for custom overlay
cleanup.

### Code changes

| Section         | LOC change |
| --------------- | ---------- |
| Core code       | +33 / -2   |
| Tests           | +71 / -2   |
| Automated files | +5 / -0    |

Author: steveruizok

packages/editor/api-report.api.md

@@ -1768,6 +1768,8 @@ export class FontManager {
         [key: string]: string | undefined;
     } | undefined);
     // (undocumented)
+    dispose(): void;
+    // (undocumented)
     ensureFontIsLoaded(font: TLFontFace): Promise<void>;
     // (undocumented)
     getShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[];
@@ -2612,6 +2614,8 @@ export type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>
 export class OverlayManager {
     constructor(editor: Editor);
     // (undocumented)
+    dispose(): void;
+    // (undocumented)
     readonly editor: Editor;
     getActiveOverlayEntries(): TLOverlayEntry[];
     getCurrentOverlays(): TLOverlay[];
@@ -2647,6 +2651,7 @@ export abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
     static configure<T extends TLOverlayUtilConstructor<any>>(this: T, options: T extends new (...args: any[]) => {
         options: infer Options;
     } ? Partial<Options> : never): T;
+    dispose(): void;
     // (undocumented)
     editor: Editor;
     getCursor(_overlay: T): TLCursorType | undefined;

packages/editor/src/lib/editor/Editor.ts

@@ -416,6 +416,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		})
 
 		this.fonts = new FontManager(this, fontAssetUrls)
+		this.disposables.add(() => this.fonts.dispose())
 
 		this.inputs = new InputsManager(this)
 		this.performance = new PerformanceManager(this)
@@ -502,6 +503,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		// Overlay utils
 		this.overlays = new OverlayManager(this)
+		this.disposables.add(() => this.overlays.dispose())
 		if (overlayUtilConstructors) {
 			for (const Util of overlayUtilConstructors) {
 				const util = new Util(this)

packages/editor/src/lib/editor/managers/FontManager/FontManager.test.ts

@@ -36,6 +36,8 @@ describe('FontManager', () => {
 	let editor: Mocked<Editor>
 	let fontManager: FontManager
 	let mockAssetUrls: { [key: string]: string }
+	let mockShapeFontFacesCacheGet: Mock
+	let mockShapeFontLoadStateCacheGet: Mock
 
 	const createMockFont = (overrides: Partial<TLFontFace> = {}): TLFontFace => ({
 		family: 'Test Font',
@@ -78,12 +80,15 @@ describe('FontManager', () => {
 			getFontFaces: vi.fn(() => []),
 		}
 
+		mockShapeFontFacesCacheGet = vi.fn(() => [])
+		mockShapeFontLoadStateCacheGet = vi.fn(() => ({ get: vi.fn(() => []) }))
+
 		const mockStore = {
 			createComputedCache: vi.fn(() => ({
-				get: vi.fn(() => []),
+				get: mockShapeFontFacesCacheGet,
 			})),
 			createCache: vi.fn(() => ({
-				get: vi.fn(() => ({ get: vi.fn(() => []) })),
+				get: mockShapeFontLoadStateCacheGet,
 			})),
 		}
 
@@ -110,6 +115,32 @@ describe('FontManager', () => {
 		})
 	})
 
+	describe('dispose', () => {
+		it('clears font state and caches', async () => {
+			const font = createMockFont()
+			const shapeId = createShapeId('test')
+			mockShapeFontFacesCacheGet.mockReturnValue([font])
+			const firstPromise = fontManager.ensureFontIsLoaded(font)
+
+			expect(fontManager.getShapeFontFaces(shapeId)).toEqual([font])
+			fontManager.trackFontsForShape(shapeId)
+			fontManager.requestFonts([font])
+			await firstPromise
+			fontManager.dispose()
+			fontManager.requestFonts([font])
+			const secondPromise = fontManager.ensureFontIsLoaded(font)
+
+			expect(fontManager.getShapeFontFaces(shapeId)).toEqual([])
+			fontManager.trackFontsForShape(shapeId)
+			expect(mockShapeFontFacesCacheGet).toHaveBeenCalledTimes(1)
+			expect(mockShapeFontLoadStateCacheGet).toHaveBeenCalledTimes(1)
+			expect(queueMicrotask).toHaveBeenCalledTimes(2)
+			expect(secondPromise).not.toBe(firstPromise)
+
+			await secondPromise
+		})
+	})
+
 	describe('getShapeFontFaces', () => {
 		it('should return empty array when no fonts found', () => {
 			const shape = createMockShape()

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

@@ -16,6 +16,17 @@ interface FontState {
 	readonly loadingPromise: Promise<void>
 }
 
+interface ShapeFontFacesCache {
+	get(id: TLShapeId): TLFontFace[] | undefined
+}
+
+interface ShapeFontLoadStateCache {
+	get(id: TLShapeId): (FontState | null)[] | undefined
+}
+
+const EMPTY_SHAPE_FONT_FACES_CACHE: ShapeFontFacesCache = { get: () => undefined }
+const EMPTY_SHAPE_FONT_LOAD_STATE_CACHE: ShapeFontLoadStateCache = { get: () => undefined }
+
 /** @public */
 export class FontManager {
 	constructor(
@@ -49,8 +60,15 @@ export class FontManager {
 		)
 	}
 
-	private readonly shapeFontFacesCache
-	private readonly shapeFontLoadStateCache
+	dispose() {
+		this.fontStates.clear()
+		this.fontsToLoad.clear()
+		this.shapeFontFacesCache = EMPTY_SHAPE_FONT_FACES_CACHE
+		this.shapeFontLoadStateCache = EMPTY_SHAPE_FONT_LOAD_STATE_CACHE
+	}
+
+	private shapeFontFacesCache: ShapeFontFacesCache
+	private shapeFontLoadStateCache: ShapeFontLoadStateCache
 
 	getShapeFontFaces(shape: TLShape | TLShapeId): TLFontFace[] {
 		const shapeId = typeof shape === 'string' ? shape : shape.id

packages/editor/src/lib/editor/overlays/OverlayManager.ts

@@ -38,6 +38,12 @@ export class OverlayManager {
 		this._overlayUtils.set(type, util)
 	}
 
+	dispose() {
+		for (const util of this._overlayUtils.values()) {
+			util.dispose()
+		}
+	}
+
 	/**
 	 * Get an overlay util by type string, overlay instance, or by passing
 	 * a util class as a generic parameter for type-safe lookup.

packages/editor/src/lib/editor/overlays/OverlayUtil.ts

@@ -140,4 +140,9 @@ export abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
 	 * at minimap scale (e.g. brushes, collaborator cursors) should opt in.
 	 */
 	renderMinimap(_ctx: CanvasRenderingContext2D, _overlays: T[], _zoom: number): void {}
+
+	/**
+	 * Clean up any resources held by this overlay util.
+	 */
+	dispose(): void {}
 }

packages/tldraw/src/test/overlays/OverlayManager.test.ts

@@ -14,6 +14,44 @@ beforeEach(() => {
 })
 
 describe('OverlayManager', () => {
+	describe('dispose', () => {
+		it('calls dispose on registered overlay utils when the editor disposes', () => {
+			const dispose = vi.fn()
+
+			class TestOverlay extends OverlayUtil<TLOverlay<Record<string, never>>> {
+				static override type = 'dispose_tester'
+				override dispose = dispose
+				override isActive() {
+					return false
+				}
+				override getOverlays() {
+					return []
+				}
+			}
+
+			const editor = new TestEditor({ overlayUtils: [TestOverlay] })
+			editor.dispose()
+
+			expect(dispose).toHaveBeenCalledTimes(1)
+		})
+
+		it('supports the default OverlayUtil dispose no-op', () => {
+			class TestOverlay extends OverlayUtil<TLOverlay<Record<string, never>>> {
+				static override type = 'dispose_noop_tester'
+				override isActive() {
+					return false
+				}
+				override getOverlays() {
+					return []
+				}
+			}
+
+			const editor = new TestEditor({ overlayUtils: [TestOverlay] })
+
+			expect(() => editor.overlays.dispose()).not.toThrow()
+		})
+	})
+
 	describe('getCurrentOverlays', () => {
 		it('returns empty array when no overlays are active', () => {
 			expect(editor.overlays.getCurrentOverlays()).toEqual([])