@tldraw/editor 3.14.2 → 3.15.0-canary.0444ba5c83f1

package/src/index.ts

@@ -287,7 +287,13 @@ export {
 	type ContainerProviderProps,
 } from './lib/hooks/useContainer'
 export { getCursor } from './lib/hooks/useCursor'
-export { EditorContext, useEditor, useMaybeEditor } from './lib/hooks/useEditor'
+export {
+	EditorContext,
+	EditorProvider,
+	useEditor,
+	useMaybeEditor,
+	type EditorProviderProps,
+} from './lib/hooks/useEditor'
 export { useEditorComponents } from './lib/hooks/useEditorComponents'
 export type { TLEditorComponents } from './lib/hooks/useEditorComponents'
 export { useEvent, useReactiveEvent } from './lib/hooks/useEvent'

package/src/lib/config/TLUserPreferences.ts

@@ -17,6 +17,7 @@ export interface TLUserPreferences {
 	// N.B. These are duplicated in TLdrawAppUser.
 	locale?: string | null
 	animationSpeed?: number | null
+	areKeyboardShortcutsEnabled?: boolean | null
 	edgeScrollSpeed?: number | null
 	colorScheme?: 'light' | 'dark' | 'system'
 	isSnapMode?: boolean | null
@@ -44,6 +45,7 @@ export const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUser
 	// N.B. These are duplicated in TLdrawAppUser.
 	locale: T.string.nullable().optional(),
 	animationSpeed: T.number.nullable().optional(),
+	areKeyboardShortcutsEnabled: T.boolean.nullable().optional(),
 	edgeScrollSpeed: T.number.nullable().optional(),
 	colorScheme: T.literalEnum('light', 'dark', 'system').optional(),
 	isSnapMode: T.boolean.nullable().optional(),
@@ -61,6 +63,7 @@ const Versions = {
 	AddDynamicSizeMode: 6,
 	AllowSystemColorScheme: 7,
 	AddPasteAtCursor: 8,
+	AddKeyboardShortcuts: 9,
 } as const
 
 const CURRENT_VERSION = Math.max(...Object.values(Versions))
@@ -96,6 +99,9 @@ function migrateSnapshot(data: { version: number; user: any }) {
 	if (data.version < Versions.AddPasteAtCursor) {
 		data.user.isPasteAtCursorMode = false
 	}
+	if (data.version < Versions.AddKeyboardShortcuts) {
+		data.user.areKeyboardShortcutsEnabled = true
+	}
 
 	// finally
 	data.version = CURRENT_VERSION
@@ -139,6 +145,7 @@ export const defaultUserPreferences = Object.freeze({
 	// N.B. These are duplicated in TLdrawAppUser.
 	edgeScrollSpeed: 1,
 	animationSpeed: userPrefersReducedMotion() ? 0 : 1,
+	areKeyboardShortcutsEnabled: true,
 	isSnapMode: false,
 	isWrapMode: false,
 	isDynamicSizeMode: false,

package/src/lib/editor/Editor.ts

@@ -7859,7 +7859,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					const prevParentId = partial.parentId
 
-					// a shape cannot be it's own parent. This was a rare issue with frames/groups in the syncFuzz tests.
+					// a shape cannot be its own parent. This was a rare issue with frames/groups in the syncFuzz tests.
 					if (parentId === partial.id) {
 						parentId = focusedGroupId
 					}

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

@@ -1,5 +1,4 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
-import { objectMapKeys } from '@tldraw/utils'
 import { Editor } from '../../Editor'
 
 const fixNewLines = /\r?\n|\r/g
@@ -61,18 +60,10 @@ export interface TLMeasureTextSpanOpts {
 
 const spaceCharacterRegex = /\s/
 
-const initialDefaultStyles = Object.freeze({
-	'overflow-wrap': 'break-word',
-	'word-break': 'auto',
-	width: null,
-	height: null,
-	'max-width': null,
-	'min-width': null,
-})
-
 /** @public */
 export class TextManager {
 	private elm: HTMLDivElement
+	private defaultStyles: Record<string, string | null>
 
 	constructor(public editor: Editor) {
 		const elm = document.createElement('div')
@@ -82,34 +73,31 @@ export class TextManager {
 		elm.tabIndex = -1
 		this.editor.getContainer().appendChild(elm)
 
-		this.elm = elm
-
-		for (const key of objectMapKeys(initialDefaultStyles)) {
-			elm.style.setProperty(key, initialDefaultStyles[key])
+		// we need to save the default styles so that we can restore them when we're done
+		// these must be the css names, not the js names for the styles
+		this.defaultStyles = {
+			'overflow-wrap': 'break-word',
+			'word-break': 'auto',
+			width: null,
+			height: null,
+			'max-width': null,
+			'min-width': null,
 		}
-	}
 
-	private setElementStyles(styles: Record<string, string | undefined>) {
-		const stylesToReinstate = {} as any
-		for (const key of objectMapKeys(styles)) {
-			if (typeof styles[key] === 'string') {
-				const oldValue = this.elm.style.getPropertyValue(key)
-				if (oldValue === styles[key]) continue
-				stylesToReinstate[key] = oldValue
-				this.elm.style.setProperty(key, styles[key])
-			}
-		}
-		return () => {
-			for (const key of objectMapKeys(stylesToReinstate)) {
-				this.elm.style.setProperty(key, stylesToReinstate[key])
-			}
-		}
+		this.elm = elm
 	}
 
 	dispose() {
 		return this.elm.remove()
 	}
 
+	private resetElmStyles() {
+		const { elm, defaultStyles } = this
+		for (const key in defaultStyles) {
+			elm.style.setProperty(key, defaultStyles[key])
+		}
+	}
+
 	measureText(textToMeasure: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
 		const div = document.createElement('div')
 		div.textContent = normalizeTextForDom(textToMeasure)
@@ -119,36 +107,54 @@ export class TextManager {
 	measureHtml(html: string, opts: TLMeasureTextOpts): BoxModel & { scrollWidth: number } {
 		const { elm } = this
 
-		const newStyles = {
-			'font-family': opts.fontFamily,
-			'font-style': opts.fontStyle,
-			'font-weight': opts.fontWeight,
-			'font-size': opts.fontSize + 'px',
-			'line-height': opts.lineHeight.toString(),
-			padding: opts.padding,
-			'max-width': opts.maxWidth ? opts.maxWidth + 'px' : undefined,
-			'min-width': opts.minWidth ? opts.minWidth + 'px' : undefined,
-			'overflow-wrap': opts.disableOverflowWrapBreaking ? 'normal' : undefined,
-			...opts.otherStyles,
+		if (opts.otherStyles) {
+			for (const key in opts.otherStyles) {
+				if (!this.defaultStyles[key]) {
+					// we need to save the original style so that we can restore it when we're done
+					this.defaultStyles[key] = elm.style.getPropertyValue(key)
+				}
+			}
 		}
 
-		const restoreStyles = this.setElementStyles(newStyles)
+		elm.innerHTML = html
 
-		try {
-			elm.innerHTML = html
+		// Apply the default styles to the element (for all styles here or that were ever seen in opts.otherStyles)
+		this.resetElmStyles()
 
-			const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
-			const rect = elm.getBoundingClientRect()
+		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.toString())
+		elm.style.setProperty('padding', opts.padding)
 
-			return {
-				x: 0,
-				y: 0,
-				w: rect.width,
-				h: rect.height,
-				scrollWidth,
+		if (opts.maxWidth) {
+			elm.style.setProperty('max-width', opts.maxWidth + 'px')
+		}
+
+		if (opts.minWidth) {
+			elm.style.setProperty('min-width', opts.minWidth + 'px')
+		}
+
+		if (opts.disableOverflowWrapBreaking) {
+			elm.style.setProperty('overflow-wrap', 'normal')
+		}
+
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				elm.style.setProperty(key, value)
 			}
-		} finally {
-			restoreStyles()
+		}
+
+		const scrollWidth = opts.measureScrollWidth ? elm.scrollWidth : 0
+		const rect = elm.getBoundingClientRect()
+
+		return {
+			x: 0,
+			y: 0,
+			w: rect.width,
+			h: rect.height,
+			scrollWidth,
 		}
 	}
 
@@ -268,68 +274,82 @@ export class TextManager {
 
 		const { elm } = this
 
+		if (opts.otherStyles) {
+			for (const key in opts.otherStyles) {
+				if (!this.defaultStyles[key]) {
+					// we need to save the original style so that we can restore it when we're done
+					this.defaultStyles[key] = elm.style.getPropertyValue(key)
+				}
+			}
+		}
+
+		this.resetElmStyles()
+
+		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.toString())
+
+		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
+		elm.style.setProperty('width', `${elementWidth}px`)
+		elm.style.setProperty('height', 'min-content')
+		elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
+
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'
-		const elementWidth = Math.ceil(opts.width - opts.padding * 2)
-		const newStyles = {
-			'font-family': opts.fontFamily,
-			'font-style': opts.fontStyle,
-			'font-weight': opts.fontWeight,
-			'font-size': opts.fontSize + 'px',
-			'line-height': opts.lineHeight.toString(),
-			width: `${elementWidth}px`,
-			height: 'min-content',
-			'text-align': textAlignmentsForLtr[opts.textAlign],
-			'overflow-wrap': shouldTruncateToFirstLine ? 'anywhere' : undefined,
-			'word-break': shouldTruncateToFirstLine ? 'break-all' : undefined,
-			...opts.otherStyles,
+
+		if (shouldTruncateToFirstLine) {
+			elm.style.setProperty('overflow-wrap', 'anywhere')
+			elm.style.setProperty('word-break', 'break-all')
 		}
-		const restoreStyles = this.setElementStyles(newStyles)
 
-		try {
-			const normalizedText = normalizeTextForDom(textToMeasure)
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				elm.style.setProperty(key, value)
+			}
+		}
 
-			// Render the text into the measurement element:
-			elm.textContent = normalizedText
+		const normalizedText = normalizeTextForDom(textToMeasure)
 
-			// actually measure the text:
-			const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
-				shouldTruncateToFirstLine,
-			})
+		// Render the text into the measurement element:
+		elm.textContent = normalizedText
 
-			if (opts.overflow === 'truncate-ellipsis' && didTruncate) {
-				// we need to measure the ellipsis to know how much space it takes up
-				elm.textContent = '…'
-				const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)
-
-				// then, we need to subtract that space from the width we have and measure again:
-				elm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
-				elm.textContent = normalizedText
-				const truncatedSpans = this.measureElementTextNodeSpans(elm, {
-					shouldTruncateToFirstLine: true,
-				}).spans
-
-				// Finally, we add in our ellipsis at the end of the last span. We
-				// have to do this after measuring, not before, because adding the
-				// ellipsis changes how whitespace might be getting collapsed by the
-				// browser.
-				const lastSpan = truncatedSpans[truncatedSpans.length - 1]!
-				truncatedSpans.push({
-					text: '…',
-					box: {
-						x: Math.min(lastSpan.box.x + lastSpan.box.w, opts.width - opts.padding - ellipsisWidth),
-						y: lastSpan.box.y,
-						w: ellipsisWidth,
-						h: lastSpan.box.h,
-					},
-				})
-
-				return truncatedSpans
-			}
+		// actually measure the text:
+		const { spans, didTruncate } = this.measureElementTextNodeSpans(elm, {
+			shouldTruncateToFirstLine,
+		})
 
-			return spans
-		} finally {
-			restoreStyles()
+		if (opts.overflow === 'truncate-ellipsis' && didTruncate) {
+			// we need to measure the ellipsis to know how much space it takes up
+			elm.textContent = '…'
+			const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)
+
+			// then, we need to subtract that space from the width we have and measure again:
+			elm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
+			elm.textContent = normalizedText
+			const truncatedSpans = this.measureElementTextNodeSpans(elm, {
+				shouldTruncateToFirstLine: true,
+			}).spans
+
+			// Finally, we add in our ellipsis at the end of the last span. We
+			// have to do this after measuring, not before, because adding the
+			// ellipsis changes how whitespace might be getting collapsed by the
+			// browser.
+			const lastSpan = truncatedSpans[truncatedSpans.length - 1]!
+			truncatedSpans.push({
+				text: '…',
+				box: {
+					x: Math.min(lastSpan.box.x + lastSpan.box.w, opts.width - opts.padding - ellipsisWidth),
+					y: lastSpan.box.y,
+					w: ellipsisWidth,
+					h: lastSpan.box.h,
+				},
+			})
+
+			return truncatedSpans
 		}
+
+		return spans
 	}
 }

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

@@ -24,6 +24,7 @@ describe('UserPreferencesManager', () => {
 		color: '#FF802B',
 		locale: 'en',
 		animationSpeed: 1,
+		areKeyboardShortcutsEnabled: true,
 		edgeScrollSpeed: 1,
 		colorScheme: 'light',
 		isSnapMode: false,
@@ -229,6 +230,7 @@ describe('UserPreferencesManager', () => {
 				locale: mockUserPreferences.locale,
 				color: mockUserPreferences.color,
 				animationSpeed: mockUserPreferences.animationSpeed,
+				areKeyboardShortcutsEnabled: mockUserPreferences.areKeyboardShortcutsEnabled,
 				isSnapMode: mockUserPreferences.isSnapMode,
 				colorScheme: mockUserPreferences.colorScheme,
 				isDarkMode: false, // light mode
@@ -362,6 +364,21 @@ describe('UserPreferencesManager', () => {
 			})
 		})
 
+		describe('getAreKeyboardShortcutsEnabled', () => {
+			it('should return user keyboard shortcuts', () => {
+				expect(userPreferencesManager.getAreKeyboardShortcutsEnabled()).toBe(
+					mockUserPreferences.areKeyboardShortcutsEnabled
+				)
+			})
+
+			it('should return default keyboard shortcuts when null', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, areKeyboardShortcutsEnabled: null })
+				expect(userPreferencesManager.getAreKeyboardShortcutsEnabled()).toBe(
+					defaultUserPreferences.areKeyboardShortcutsEnabled
+				)
+			})
+		})
+
 		describe('getEdgeScrollSpeed', () => {
 			it('should return user edge scroll speed', () => {
 				expect(userPreferencesManager.getEdgeScrollSpeed()).toBe(
@@ -483,6 +500,7 @@ describe('UserPreferencesManager', () => {
 				color: null,
 				locale: null,
 				animationSpeed: null,
+				areKeyboardShortcutsEnabled: null,
 				edgeScrollSpeed: null,
 				isSnapMode: null,
 				isWrapMode: null,
@@ -496,6 +514,9 @@ describe('UserPreferencesManager', () => {
 			expect(userPreferencesManager.getColor()).toBe(defaultUserPreferences.color)
 			expect(userPreferencesManager.getLocale()).toBe(defaultUserPreferences.locale)
 			expect(userPreferencesManager.getAnimationSpeed()).toBe(defaultUserPreferences.animationSpeed)
+			expect(userPreferencesManager.getAreKeyboardShortcutsEnabled()).toBe(
+				defaultUserPreferences.areKeyboardShortcutsEnabled
+			)
 			expect(userPreferencesManager.getEdgeScrollSpeed()).toBe(
 				defaultUserPreferences.edgeScrollSpeed
 			)

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

@@ -43,6 +43,7 @@ export class UserPreferencesManager {
 			locale: this.getLocale(),
 			color: this.getColor(),
 			animationSpeed: this.getAnimationSpeed(),
+			areKeyboardShortcutsEnabled: this.getAreKeyboardShortcutsEnabled(),
 			isSnapMode: this.getIsSnapMode(),
 			colorScheme: this.user.userPreferences.get().colorScheme,
 			isDarkMode: this.getIsDarkMode(),
@@ -75,6 +76,13 @@ export class UserPreferencesManager {
 		return this.user.userPreferences.get().animationSpeed ?? defaultUserPreferences.animationSpeed
 	}
 
+	@computed getAreKeyboardShortcutsEnabled() {
+		return (
+			this.user.userPreferences.get().areKeyboardShortcutsEnabled ??
+			defaultUserPreferences.areKeyboardShortcutsEnabled
+		)
+	}
+
 	@computed getId() {
 		return this.user.userPreferences.get().id
 	}

package/src/lib/hooks/useEditor.tsx

@@ -21,13 +21,14 @@ export function useMaybeEditor(): Editor | null {
 	return React.useContext(EditorContext)
 }
 
-export function EditorProvider({
-	editor,
-	children,
-}: {
+/** @public */
+export interface EditorProviderProps {
 	editor: Editor
 	children: React.ReactNode
-}) {
+}
+
+/** @public @react */
+export function EditorProvider({ editor, children }: EditorProviderProps) {
 	return (
 		<EditorContext.Provider value={editor}>
 			<IdProvider>{children}</IdProvider>

package/src/lib/utils/sync/TLLocalSyncClient.ts

@@ -266,7 +266,6 @@ export class TLLocalSyncClient {
 
 	private isPersisting = false
 	private didLastWriteError = false
-	// eslint-disable-next-line no-restricted-globals
 	private scheduledPersistTimeout: ReturnType<typeof setTimeout> | null = null
 
 	/**

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.14.2'
+export const version = '3.15.0-canary.0444ba5c83f1'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-03T08:34:52.269Z',
-	patch: '2025-07-10T09:54:52.889Z',
+	minor: '2025-07-04T19:53:57.672Z',
+	patch: '2025-07-04T19:53:57.672Z',
 }