@tldraw/editor 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/lib/editor/managers/CollaboratorsManager/CollaboratorsManager.test.ts

@@ -1,11 +1,17 @@
-import { PageRecordType, type TLInstancePresence } from '@tldraw/tlschema'
+import {
+	PageRecordType,
+	createUserId,
+	type TLInstancePresence,
+	type TLUserId,
+} from '@tldraw/tlschema'
 import { vi } from 'vitest'
+import { createTLStore } from '../../../config/createTLStore'
 import type { Editor } from '../../Editor'
 import { CollaboratorsManager } from './CollaboratorsManager'
 
 const currentPageId = PageRecordType.createId('page')
 
-function createPresence(userId: string): TLInstancePresence {
+function createPresence(userId: TLUserId): TLInstancePresence {
 	return {
 		typeName: 'instance_presence',
 		id: `instance_presence:${userId}` as TLInstancePresence['id'],
@@ -34,6 +40,9 @@ function createEditor(presences: TLInstancePresence[] = []) {
 	}))
 	const userGetId = vi.fn(() => 'current-user')
 
+	const store = createTLStore()
+	store.put(presences)
+
 	const editor = {
 		options: {
 			collaboratorCheckIntervalMs: 1000,
@@ -45,14 +54,9 @@ function createEditor(presences: TLInstancePresence[] = []) {
 		},
 		user: {
 			getId: userGetId,
+			getRecordId: () => createUserId(userGetId()),
 		},
-		store: {
-			query: {
-				records: vi.fn(() => ({
-					get: () => presences,
-				})),
-			},
-		},
+		store,
 		getInstanceState,
 		getCurrentPageId: vi.fn(() => currentPageId),
 	} as unknown as Editor
@@ -88,10 +92,19 @@ describe(CollaboratorsManager, () => {
 		expect(setInterval).toHaveBeenCalledTimes(1)
 	})
 
+	it("excludes the local user's own other sessions", () => {
+		const ownSession = createPresence(createUserId('current-user'))
+		const peer = createPresence(createUserId('peer'))
+		const { editor } = createEditor([ownSession, peer])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getCollaborators()).toEqual([peer])
+	})
+
 	it('reads instance state once when filtering visible collaborators', () => {
 		const { editor, getInstanceState } = createEditor([
-			createPresence('user-1'),
-			createPresence('user-2'),
+			createPresence(createUserId('user-1')),
+			createPresence(createUserId('user-2')),
 		])
 		const manager = new CollaboratorsManager(editor)
 
@@ -101,9 +114,9 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('hides idle collaborators that are following us', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
-		presence.followingUserId = 'current-user'
+		presence.followingUserId = createUserId('current-user')
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
 
@@ -111,9 +124,9 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('shows idle collaborators that are following us when they have a chat message', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
-		presence.followingUserId = 'current-user'
+		presence.followingUserId = createUserId('current-user')
 		presence.chatMessage = 'hi'
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
@@ -122,11 +135,25 @@ describe(CollaboratorsManager, () => {
 	})
 
 	it('shows idle collaborators that are not following us', () => {
-		const presence = createPresence('peer')
+		const presence = createPresence(createUserId('peer'))
 		presence.lastActivityTimestamp = Date.now() - 4000
 		const { editor } = createEditor([presence])
 		const manager = new CollaboratorsManager(editor)
 
 		expect(manager.getVisibleCollaborators()).toHaveLength(1)
 	})
+
+	it('shows newly-joined collaborators that have not recorded any activity yet', () => {
+		// A peer who has joined but not moved their pointer broadcasts the default
+		// `lastActivityTimestamp` of 0. They should still be treated as active so
+		// they appear in the people menu / face pile. See issue #9017.
+		const zero = createPresence(createUserId('zero'))
+		zero.lastActivityTimestamp = 0
+		const nullish = createPresence(createUserId('nullish'))
+		nullish.lastActivityTimestamp = null
+		const { editor } = createEditor([zero, nullish])
+		const manager = new CollaboratorsManager(editor)
+
+		expect(manager.getVisibleCollaborators()).toHaveLength(2)
+	})
 })

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

@@ -37,7 +37,7 @@ export class CollaboratorsManager {
 	@computed
 	private _getCollaboratorsQuery() {
 		return this.editor.store.query.records('instance_presence', () => ({
-			userId: { neq: this.editor.user.getId() },
+			userId: { neq: this.editor.user.getRecordId() },
 		}))
 	}
 
@@ -88,14 +88,17 @@ export class CollaboratorsManager {
 		if (!collaborators.length) return EMPTY_ARRAY
 
 		const { followingUserId, highlightedUserIds } = this.editor.getInstanceState()
-		const currentUserId = this.editor.user.getId()
+		const currentUserId = this.editor.user.getRecordId()
 
 		return collaborators.filter((presence) => {
 			const { lastActivityTimestamp, userId, chatMessage } = presence
 
-			// Treat a missing `lastActivityTimestamp` as "active right now" (elapsed = 0)
-			// so newly-joined peers aren't immediately classified as idle/inactive.
-			const elapsed = Math.max(0, now - (lastActivityTimestamp ?? now))
+			// Treat a missing or zero `lastActivityTimestamp` as "active right now"
+			// (elapsed = 0) so newly-joined peers aren't immediately classified as
+			// idle/inactive. The broadcast default for peers who haven't moved their
+			// pointer yet is `0` (e.g. someone on a touch device who joins and just
+			// watches), so a plain `?? now` would leave them hidden. See issue #9017.
+			const elapsed = lastActivityTimestamp ? Math.max(0, now - lastActivityTimestamp) : 0
 
 			if (elapsed > collaboratorInactiveTimeoutMs) {
 				// Inactive: If they're inactive, only show if we're following them or they're highlighted

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

@@ -9,18 +9,20 @@ import {
 import { IndexKey } from '@tldraw/utils'
 import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
-import { FontManager } from './FontManager'
+import { clearFontFaceCacheForTests, FontManager } from './FontManager'
 
 // Mock the Editor class
 vi.mock('../../Editor')
 
 // Mock globals
-global.FontFace = vi.fn().mockImplementation((family, src, descriptors) => ({
-	family,
-	src,
-	...descriptors,
-	load: vi.fn(() => Promise.resolve()),
-}))
+global.FontFace = vi.fn().mockImplementation(function (family: any, src: any, descriptors: any) {
+	return {
+		family,
+		src,
+		...descriptors,
+		load: vi.fn(() => Promise.resolve()),
+	}
+})
 
 Object.defineProperty(global.document, 'fonts', {
 	value: {
@@ -71,6 +73,7 @@ describe('FontManager', () => {
 
 	beforeEach(() => {
 		vi.clearAllMocks()
+		clearFontFaceCacheForTests()
 
 		mockAssetUrls = {
 			'test-font.woff2': 'https://example.com/fonts/test-font.woff2',
@@ -200,9 +203,11 @@ describe('FontManager', () => {
 			const font = createMockFont()
 			const error = new Error('Font load failed')
 
-			;(global.FontFace as Mock).mockReturnValue({
-				family: font.family,
-				load: vi.fn(() => Promise.reject(error)),
+			;(global.FontFace as Mock).mockImplementationOnce(function () {
+				return {
+					family: font.family,
+					load: vi.fn(() => Promise.reject(error)),
+				}
 			})
 
 			const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
@@ -310,4 +315,26 @@ describe('FontManager', () => {
 			await expect(fontManager.ensureFontIsLoaded(minimalFont)).resolves.toBeUndefined()
 		})
 	})
+
+	describe('findOrCreateFontFace caching', () => {
+		it('reuses a font face across manager instances instead of recreating it on remount', async () => {
+			const font = createMockFont()
+			await fontManager.ensureFontIsLoaded(font)
+			expect(global.FontFace).toHaveBeenCalledTimes(1)
+
+			// A fresh manager on the same document simulates an editor remount.
+			const remounted = new FontManager(editor, mockAssetUrls)
+			await remounted.ensureFontIsLoaded(font)
+
+			// The per-document cache lets the second manager reuse the existing face
+			// rather than re-scanning document.fonts and creating a new one.
+			expect(global.FontFace).toHaveBeenCalledTimes(1)
+		})
+
+		it('creates separate font faces for fonts with different descriptors', async () => {
+			await fontManager.ensureFontIsLoaded(createMockFont({ weight: 'normal' }))
+			await fontManager.ensureFontIsLoaded(createMockFont({ weight: 'bold' }))
+			expect(global.FontFace).toHaveBeenCalledTimes(2)
+		})
+	})
 })

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

@@ -145,7 +145,26 @@ export class FontManager {
 	}
 
 	private findOrCreateFontFace(font: TLFontFace) {
-		const fonts = this.editor.getContainerDocument().fonts
+		const containerDocument = this.editor.getContainerDocument()
+
+		// `findOrCreateFontFace` runs for every font on every editor mount, and a fresh
+		// editor (e.g. switching documents) gets a fresh FontManager with no memory of the
+		// previous one. The dedup below is an O(n) scan of the document's whole FontFaceSet,
+		// so without a cache that scan re-ran on every mount (measurably expensive on mobile
+		// Safari). Cache the resolved FontFace per document so repeated lookups - and
+		// remounts - are O(1). Keyed per document for cross-window embedding.
+		let cache = fontFaceCacheByDocument.get(containerDocument)
+		if (!cache) {
+			cache = new Map()
+			fontFaceCacheByDocument.set(containerDocument, cache)
+		}
+		const key = getFontFaceCacheKey(font)
+		const cached = cache.get(key)
+		if (cached) return cached
+
+		const fonts = containerDocument.fonts
+		// On a cache miss we still scan once, so font faces added outside this manager
+		// (e.g. preloaded fonts) are reused rather than duplicated.
 		for (const existing of fonts) {
 			if (
 				existing.family === font.family &&
@@ -153,6 +172,7 @@ export class FontManager {
 					([key, defaultValue]) => existing[key] === (font[key] ?? defaultValue)
 				)
 			) {
+				cache.set(key, existing)
 				return existing
 			}
 		}
@@ -164,6 +184,7 @@ export class FontManager {
 		})
 
 		fonts.add(instance)
+		cache.set(key, instance)
 
 		return instance
 	}
@@ -205,3 +226,27 @@ const defaultFontFaceDescriptors = {
 	descentOverride: 'normal',
 	lineGapOverride: 'normal',
 }
+
+// A FontFace is fully determined by its family and descriptors, so resolved faces can be
+// cached per document and reused across FontManager instances (e.g. editor remounts),
+// turning the per-lookup FontFaceSet scan into an O(1) map lookup. Faces are never removed
+// from `document.fonts` (FontManager.dispose leaves them), so the cache stays valid for the
+// document's lifetime. Keyed per document for cross-window embedding.
+let fontFaceCacheByDocument = new WeakMap<Document, Map<string, FontFace>>()
+
+function getFontFaceCacheKey(font: TLFontFace): string {
+	return JSON.stringify([
+		font.family,
+		...objectMapEntries(defaultFontFaceDescriptors).map(
+			([key, defaultValue]) => font[key] ?? defaultValue
+		),
+	])
+}
+
+/**
+ * Resets the per-document font-face cache. Only intended for tests.
+ * @internal
+ */
+export function clearFontFaceCacheForTests() {
+	fontFaceCacheByDocument = new WeakMap()
+}

package/src/lib/editor/managers/HistoryManager/HistoryManager.test.ts

@@ -584,6 +584,38 @@ describe('HistoryManager getters and utilities', () => {
 			store.update(ids.a, (s) => ({ ...s, value: 2 }))
 			expect(manager.getNumRedos()).toBe(0)
 		})
+
+		it('should only report replaying while undoing or redoing', () => {
+			const replayStates: boolean[] = []
+			const dispose = store.addHistoryInterceptor(() => {
+				replayStates.push(manager.isReplaying())
+			})
+
+			store.update(ids.a, (s) => ({ ...s, value: 1 }))
+			expect(replayStates).toEqual([false])
+
+			replayStates.length = 0
+			manager.undo()
+			expect(replayStates).toEqual([true])
+			expect(manager.isReplaying()).toBe(false)
+
+			replayStates.length = 0
+			manager.redo()
+			expect(replayStates).toEqual([true])
+			expect(manager.isReplaying()).toBe(false)
+
+			replayStates.length = 0
+			manager.batch(
+				() => {
+					store.update(ids.a, (s) => ({ ...s, value: 2 }))
+				},
+				{ history: 'ignore' }
+			)
+			expect(replayStates).toEqual([false])
+			expect(manager.isReplaying()).toBe(false)
+
+			dispose()
+		})
 	})
 
 	describe('getMarkIdMatching', () => {

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

@@ -48,7 +48,11 @@ export class HistoryManager<R extends UnknownRecord> {
 			switch (this.state) {
 				case HistoryRecorderState.Recording:
 					this.pendingDiff.apply(entry.changes)
-					this.stacks.update(({ undos }) => ({ undos, redos: stack() }))
+					// this interceptor runs for every store change, so skip the update when the
+					// redo stack is already empty
+					if (this.stacks.get().redos.length > 0) {
+						this.stacks.update(({ undos }) => ({ undos, redos: stack() }))
+					}
 					break
 				case HistoryRecorderState.RecordingPreserveRedoStack:
 					this.pendingDiff.apply(entry.changes)
@@ -79,6 +83,14 @@ export class HistoryManager<R extends UnknownRecord> {
 		return this.stacks.get().redos.length
 	}
 
+	/** @internal */
+	private _isReplaying = false
+
+	/** @internal */
+	isReplaying() {
+		return this._isReplaying
+	}
+
 	/** @internal */
 	_isInBatch = false
 
@@ -115,7 +127,9 @@ export class HistoryManager<R extends UnknownRecord> {
 	// History
 	_undo({ pushToRedoStack, toMark = undefined }: { pushToRedoStack: boolean; toMark?: string }) {
 		const previousState = this.state
+		const previousIsReplaying = this._isReplaying
 		this.state = HistoryRecorderState.Paused
+		this._isReplaying = true
 		try {
 			let { undos, redos } = this.stacks.get()
 
@@ -176,11 +190,11 @@ export class HistoryManager<R extends UnknownRecord> {
 				this.pendingDiff.restore(pendingDiff)
 				return this
 			}
-
 			this.store.applyDiff(diffToUndo, { ignoreEphemeralKeys: true })
 			this.store.ensureStoreIsUsable()
 			this.stacks.set({ undos, redos })
 		} finally {
+			this._isReplaying = previousIsReplaying
 			this.state = previousState
 		}
 
@@ -195,7 +209,9 @@ export class HistoryManager<R extends UnknownRecord> {
 
 	redo() {
 		const previousState = this.state
+		const previousIsReplaying = this._isReplaying
 		this.state = HistoryRecorderState.Paused
+		this._isReplaying = true
 		try {
 			this.flushPendingDiff()
 
@@ -224,11 +240,11 @@ export class HistoryManager<R extends UnknownRecord> {
 					break
 				}
 			}
-
 			this.store.applyDiff(diffToRedo, { ignoreEphemeralKeys: true })
 			this.store.ensureStoreIsUsable()
 			this.stacks.set({ undos, redos })
 		} finally {
+			this._isReplaying = previousIsReplaying
 			this.state = previousState
 		}
 
@@ -349,7 +365,16 @@ class PendingDiff<R extends UnknownRecord> {
 
 	apply(diff: RecordsDiff<R>) {
 		squashRecordDiffsMutable(this.diff, [diff])
-		this.isEmptyAtom.set(isRecordsDiffEmpty(this.diff))
+		// Recomputing emptiness from the accumulated diff is O(N) (for-in over a
+		// dictionary-mode object pays an O(N) key-collection prologue), and this runs on
+		// every history interceptor call — e.g. every input tick while resizing many
+		// shapes. Updates can never cancel out existing entries during a squash, so the
+		// full recompute is only needed when the incoming diff adds or removes records.
+		if (hasAnyKey(diff.added) || hasAnyKey(diff.removed)) {
+			this.isEmptyAtom.set(isRecordsDiffEmpty(this.diff))
+		} else if (this.isEmptyAtom.__unsafe__getWithoutCapture()) {
+			this.isEmptyAtom.set(!hasAnyKey(diff.updated))
+		}
 	}
 
 	debug() {
@@ -357,6 +382,11 @@ class PendingDiff<R extends UnknownRecord> {
 	}
 }
 
+function hasAnyKey(obj: object) {
+	for (const _ in obj) return true
+	return false
+}
+
 type Stack<T> = StackItem<T> | EmptyStackItem<T>
 
 function stack<T>(): Stack<T> {

package/src/lib/editor/managers/InputsManager/InputsManager.test.ts

@@ -0,0 +1,61 @@
+import { createTLStore } from '../../../config/createTLStore'
+import { Editor } from '../../Editor'
+
+function createTestEditor() {
+	const store = createTLStore({})
+	store.ensureStoreIsUsable()
+	return new Editor({
+		store,
+		bindingUtils: [],
+		shapeUtils: [],
+		getContainer: () => document.createElement('div'),
+		tools: [],
+	})
+}
+
+describe('InputsManager', () => {
+	let editor: Editor
+
+	beforeEach(() => {
+		editor = createTestEditor()
+	})
+
+	afterEach(() => {
+		editor.dispose()
+	})
+
+	it('updates pointer velocity on frame events', () => {
+		const point = editor.inputs.getCurrentScreenPoint()
+		point.x = 0
+		point.y = 0
+		editor.emit('frame', 16)
+
+		point.x = 100
+		point.y = 0
+		editor.emit('frame', 16)
+
+		expect(editor.inputs.getPointerVelocity().len()).toBeGreaterThan(0)
+	})
+
+	it('stops updating pointer velocity after dispose', () => {
+		const point = editor.inputs.getCurrentScreenPoint()
+		point.x = 0
+		point.y = 0
+		editor.emit('frame', 16)
+
+		point.x = 100
+		point.y = 0
+		editor.emit('frame', 16)
+
+		const velocityBeforeDispose = editor.inputs.getPointerVelocity().clone()
+		expect(velocityBeforeDispose.len()).toBeGreaterThan(0)
+
+		editor.inputs.dispose()
+
+		point.x = 200
+		point.y = 0
+		editor.emit('frame', 16)
+
+		expect(editor.inputs.getPointerVelocity()).toEqual(velocityBeforeDispose)
+	})
+})

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

@@ -1,6 +1,7 @@
 import { atom, computed, unsafe__withoutCapture } from '@tldraw/state'
 import { AtomSet } from '@tldraw/store'
 import { TLINSTANCE_ID, TLPOINTER_ID } from '@tldraw/tlschema'
+import { bind } from '@tldraw/utils'
 import { INTERNAL_POINTER_IDS } from '../../../constants'
 import { Vec } from '../../../primitives/Vec'
 import { isAccelKey } from '../../../utils/keyboard'
@@ -12,7 +13,19 @@ const POINTER_VELOCITY_REFERENCE_SMOOTHING = 0.5
 
 /** @public */
 export class InputsManager {
-	constructor(private readonly editor: Editor) {}
+	constructor(private readonly editor: Editor) {
+		this.editor.on('frame', this._onFrame)
+	}
+
+	/** @internal */
+	dispose() {
+		this.editor.off('frame', this._onFrame)
+	}
+
+	@bind
+	private _onFrame(elapsed: number) {
+		this.updatePointerVelocity(elapsed)
+	}
 
 	private _originPagePoint = atom<Vec>('originPagePoint', new Vec())
 	/**
@@ -120,8 +133,7 @@ export class InputsManager {
 	}
 
 	/**
-	 * Normally you shouldn't need to set the pointer velocity directly, this is set by the tick manager.
-	 * However, this is currently used in tests to fake pointer velocity.
+	 * Normally you shouldn't need to set the pointer velocity directly. Used in tests to fake pointer velocity.
 	 * @param pointerVelocity - The pointer velocity.
 	 * @internal
 	 */
@@ -460,7 +472,7 @@ export class InputsManager {
 	private _velocityPrevPoint = new Vec()
 
 	/**
-	 * Update the pointer velocity based on elapsed time. Called by the tick manager.
+	 * Update the pointer velocity based on elapsed time. Called each frame.
 	 * @param elapsed - The time elapsed since the last tick in milliseconds.
 	 * @internal
 	 */

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

@@ -46,6 +46,10 @@ export class SpatialIndexManager {
 
 	private createSpatialIndexComputed() {
 		const shapeHistory = this.editor.store.query.filterHistory('shape')
+		// Binding changes can move a shape's derived bounds (e.g. creating or
+		// deleting an arrow binding relocates the arrow's body) without
+		// touching any shape record, so they must also invalidate the index.
+		const bindingHistory = this.editor.store.query.filterHistory('binding')
 
 		return computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {
 			if (isUninitialized(_prevValue)) {
@@ -53,8 +57,9 @@ export class SpatialIndexManager {
 			}
 
 			const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)
+			const bindingDiff = bindingHistory.getDiffSince(lastComputedEpoch)
 
-			if (shapeDiff === RESET_VALUE) {
+			if (shapeDiff === RESET_VALUE || bindingDiff === RESET_VALUE) {
 				return this.rebuildAndBumpEpoch()
 			}
 
@@ -63,8 +68,10 @@ export class SpatialIndexManager {
 				return this.rebuildAndBumpEpoch()
 			}
 
-			if (shapeDiff.length === 0) return this._boundsEpoch
+			if (shapeDiff.length === 0 && bindingDiff.length === 0) return this._boundsEpoch
 
+			// A binding-only diff passes an empty shape diff: step 1 is a no-op
+			// and the step-2 sweep re-checks the indexed bounds of every shape.
 			if (this.processIncrementalUpdate(shapeDiff)) {
 				this._boundsEpoch++
 			}

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

@@ -82,20 +82,22 @@ const mockEditor = {
 	getContainerDocument: vi.fn(() => mockDocument),
 } as unknown as Editor
 
-global.Range = vi.fn(() => ({
-	setStart: vi.fn(),
-	setEnd: vi.fn(),
-	getClientRects: vi.fn(() => [
-		{
-			width: 10,
-			height: 16,
-			left: 0,
-			top: 0,
-			right: 10,
-			bottom: 16,
-		},
-	]),
-})) as any
+global.Range = vi.fn(function () {
+	return {
+		setStart: vi.fn(),
+		setEnd: vi.fn(),
+		getClientRects: vi.fn(() => [
+			{
+				width: 10,
+				height: 16,
+				left: 0,
+				top: 0,
+				right: 10,
+				bottom: 16,
+			},
+		]),
+	}
+}) as any
 
 describe('TextManager', () => {
 	let textManager: TextManager

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

@@ -2,6 +2,21 @@ import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
 import { objectMapKeys } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 
+/**
+ * The whole-pixel line-height for a given font size and tldraw's unitless line-height
+ * multiplier. tldraw's theme stores line-height as a multiplier (e.g. 1.35); resolving it
+ * to a whole pixel keeps line spacing identical across rendering engines, which otherwise
+ * disagree on fractional line boxes (WebKit snaps them to whole pixels, Blink keeps the
+ * fraction) and let multi-line text drift apart. Apply it everywhere line-height is used —
+ * measurement, on-canvas render, and export — so geometry and rendering agree.
+ * See https://github.com/tldraw/tldraw/issues/8970.
+ *
+ * @public
+ */
+export function resolveLineHeightPx(fontSize: number, lineHeight: number): number {
+	return Math.round(fontSize * lineHeight)
+}
+
 const fixNewLines = /\r?\n|\r/g
 
 function normalizeTextForDom(text: string) {
@@ -154,7 +169,7 @@ export class TextManager {
 			'font-style': opts.fontStyle,
 			'font-weight': opts.fontWeight,
 			'font-size': opts.fontSize + 'px',
-			'line-height': opts.lineHeight.toString(),
+			'line-height': `${resolveLineHeightPx(opts.fontSize, opts.lineHeight)}px`,
 			padding: opts.padding,
 			'max-width': opts.maxWidth ? opts.maxWidth + 'px' : undefined,
 			'min-width': opts.minWidth ? opts.minWidth + 'px' : undefined,
@@ -382,7 +397,7 @@ export class TextManager {
 			'font-style': opts.fontStyle,
 			'font-weight': opts.fontWeight,
 			'font-size': opts.fontSize + 'px',
-			'line-height': opts.lineHeight.toString(),
+			'line-height': `${resolveLineHeightPx(opts.fontSize, opts.lineHeight)}px`,
 			width: `${elementWidth}px`,
 			height: 'min-content',
 			'text-align': textAlignmentsForLtr[opts.textAlign],