@tldraw/editor 5.4.0-next.ef99ab47e5ce → 5.5.0-canary.078a77321dc3

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

@@ -0,0 +1,53 @@
+import { TLTheme } from '@tldraw/tlschema'
+import { MockInstance, vi } from 'vitest'
+import { TestEditor } from '../../../test/TestEditor'
+import { DEFAULT_THEME } from './defaultThemes'
+
+// Optional so that other tests' theme objects still satisfy TLThemes.
+declare module '@tldraw/tlschema' {
+	interface TLThemes {
+		ocean?: TLTheme
+		sunset?: TLTheme
+	}
+}
+
+const oceanTheme: TLTheme = { ...DEFAULT_THEME, id: 'ocean' }
+
+let editor: TestEditor
+let warn: MockInstance
+
+beforeEach(() => {
+	editor = new TestEditor({ themes: { ocean: oceanTheme } })
+	warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+	warn.mockRestore()
+	editor.dispose()
+})
+
+describe('setCurrentTheme', () => {
+	it('switches to a registered theme', () => {
+		editor.setCurrentTheme('ocean')
+
+		expect(editor.getCurrentThemeId()).toBe('ocean')
+		expect(editor.getCurrentTheme()).toBe(oceanTheme)
+		expect(warn).not.toHaveBeenCalled()
+	})
+
+	it('warns and keeps the current theme when the id is not registered', () => {
+		editor.setCurrentTheme('sunset')
+
+		expect(warn).toHaveBeenCalledWith("Theme 'sunset' not found. Available themes: default, ocean")
+		expect(editor.getCurrentThemeId()).toBe('default')
+		expect(editor.getCurrentTheme()).toBe(DEFAULT_THEME)
+	})
+
+	it('keeps the previous theme rather than falling back to default', () => {
+		editor.setCurrentTheme('ocean')
+		editor.setCurrentTheme('sunset')
+
+		expect(editor.getCurrentThemeId()).toBe('ocean')
+		expect(editor.getCurrentTheme()).toBe(oceanTheme)
+	})
+})

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

@@ -69,14 +69,20 @@ export class ThemeManager {
 		return this._themes.get()[this.getCurrentThemeId()]!
 	}
 
-	/** Set the current theme by id. The theme must have been previously registered. */
+	/**
+	 * Set the current theme by id. The theme must have been previously registered; an
+	 * unregistered id is ignored and the current theme is kept.
+	 */
 	setCurrentTheme(id: TLThemeId): void {
-		if (process.env.NODE_ENV !== 'production') {
-			if (!(id in this._themes.get())) {
+		// Storing an unregistered id would make getCurrentTheme() return
+		// undefined despite its TLTheme return type.
+		if (!(id in this._themes.get())) {
+			if (process.env.NODE_ENV !== 'production') {
 				console.warn(
 					`Theme '${id}' not found. Available themes: ${Object.keys(this._themes.get()).join(', ')}`
 				)
 			}
+			return
 		}
 
 		this._currentThemeId.set(id)

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

@@ -142,6 +142,19 @@ describe('TickManager', () => {
 			expect(mockEmit).toHaveBeenCalledWith('frame', 0)
 			expect(mockEmit).toHaveBeenCalledWith('tick', 0)
 		})
+
+		it('should schedule the next frame even when a listener throws', () => {
+			const staleCancel = vi.fn()
+			tickManager.cancelRaf = staleCancel
+			mockEmit.mockImplementation(() => {
+				throw new Error('listener blew up')
+			})
+
+			// the error still reaches the caller, but the loop lives on
+			expect(() => tickManager.tick()).toThrow('listener blew up')
+			expect(mockRequestAnimationFrame).toHaveBeenCalled()
+			expect(tickManager.cancelRaf).not.toBe(staleCancel)
+		})
 	})
 
 	describe('dispose method', () => {

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

@@ -41,9 +41,15 @@ export class TickManager extends EditorManager {
 		const elapsed = now - this.now
 		this.now = now
 
-		this.editor.emit('frame', elapsed)
-		this.editor.emit('tick', elapsed)
-		this.cancelRaf = throttleToNextFrame(this.tick)
+		// Schedule the next frame even if a listener throws. Otherwise a single throwing listener
+		// ends the loop for good, which silently stops every frame-driven behavior — camera
+		// animations, edge scrolling, pointer velocity, following — instead of failing once.
+		try {
+			this.editor.emit('frame', elapsed)
+			this.editor.emit('tick', elapsed)
+		} finally {
+			this.cancelRaf = throttleToNextFrame(this.tick)
+		}
 	}
 
 	dispose() {

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

@@ -113,16 +113,16 @@ describe('UserPreferencesManager', () => {
 			const mockAddEventListener = vi.fn()
 			let changeHandler: (e: MediaQueryListEvent) => void
 
-			mockMatchMedia.mockReturnValue({
+			mockMatchMedia.mockImplementation((query: string) => ({
 				matches: false,
 				addEventListener: (event: string, handler: any) => {
-					if (event === 'change') {
+					if (event === 'change' && query === '(prefers-color-scheme: dark)') {
 						changeHandler = handler
 					}
 					mockAddEventListener(event, handler)
 				},
 				removeEventListener: vi.fn(),
-			})
+			}))
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, 'system')
 
@@ -367,6 +367,67 @@ describe('UserPreferencesManager', () => {
 					defaultUserPreferences.animationSpeed
 				)
 			})
+
+			describe('following the OS reduce-motion setting', () => {
+				let reducedMotionChangeHandler: ((e: MediaQueryListEvent) => void) | undefined
+				let osPrefersReducedMotion: boolean
+
+				const mountWithOs = (prefersReducedMotion: boolean) => {
+					osPrefersReducedMotion = prefersReducedMotion
+					reducedMotionChangeHandler = undefined
+					mockMatchMedia.mockImplementation((query: string) => {
+						const isReducedMotion = query === '(prefers-reduced-motion: reduce)'
+						return {
+							matches: isReducedMotion ? osPrefersReducedMotion : false,
+							addEventListener: (event: string, handler: any) => {
+								if (isReducedMotion && event === 'change') reducedMotionChangeHandler = handler
+							},
+							removeEventListener: vi.fn(),
+						}
+					})
+					userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
+				}
+
+				it('resolves an unset speed to 0 when the OS prefers reduced motion', () => {
+					userPreferencesAtom.set({ ...mockUserPreferences, animationSpeed: null })
+					mountWithOs(true)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(0)
+				})
+
+				it('tracks a live OS change while the speed is unset', () => {
+					userPreferencesAtom.set({ ...mockUserPreferences, animationSpeed: null })
+					mountWithOs(false)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(1)
+
+					reducedMotionChangeHandler!({ matches: true } as MediaQueryListEvent)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(0)
+
+					reducedMotionChangeHandler!({ matches: false } as MediaQueryListEvent)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(1)
+				})
+
+				it('ignores the OS once the user has set a speed explicitly', () => {
+					userPreferencesAtom.set({ ...mockUserPreferences, animationSpeed: 1 })
+					mountWithOs(true)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(1)
+
+					userPreferencesAtom.set({ ...mockUserPreferences, animationSpeed: 0 })
+					reducedMotionChangeHandler!({ matches: false } as MediaQueryListEvent)
+					expect(userPreferencesManager.getAnimationSpeed()).toBe(0)
+				})
+
+				it('removes the reduce-motion listener on dispose', () => {
+					const removeEventListener = vi.fn()
+					mockMatchMedia.mockReturnValue({
+						matches: false,
+						addEventListener: vi.fn(),
+						removeEventListener,
+					})
+					userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
+					userPreferencesManager.dispose()
+					expect(removeEventListener).toHaveBeenCalledTimes(2)
+				})
+			})
 		})
 
 		describe('getAreKeyboardShortcutsEnabled', () => {

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

@@ -7,9 +7,11 @@ import { getGlobalWindow } from '../../../utils/dom'
 /** @public */
 export class UserPreferencesManager {
 	systemColorScheme = atom<'dark' | 'light'>('systemColorScheme', 'light')
+	private readonly systemPrefersReducedMotion = atom('systemPrefersReducedMotion', false)
 	disposables = new Set<() => void>()
 	dispose() {
 		this.disposables.forEach((d) => d())
+		this.disposables.clear()
 	}
 	constructor(
 		private readonly user: TLCurrentUser,
@@ -30,6 +32,16 @@ export class UserPreferencesManager {
 		}
 		darkModeMediaQuery?.addEventListener('change', handleChange)
 		this.disposables.add(() => darkModeMediaQuery?.removeEventListener('change', handleChange))
+
+		const reducedMotionMediaQuery = getGlobalWindow().matchMedia('(prefers-reduced-motion: reduce)')
+		this.systemPrefersReducedMotion.set(!!reducedMotionMediaQuery?.matches)
+		const handleReducedMotionChange = (e: MediaQueryListEvent) => {
+			this.systemPrefersReducedMotion.set(e.matches)
+		}
+		reducedMotionMediaQuery?.addEventListener('change', handleReducedMotionChange)
+		this.disposables.add(() =>
+			reducedMotionMediaQuery?.removeEventListener('change', handleReducedMotionChange)
+		)
 	}
 
 	updateUserPreferences(userPreferences: Partial<TLUserPreferences>) {
@@ -80,7 +92,12 @@ export class UserPreferencesManager {
 	}
 
 	@computed getAnimationSpeed() {
-		return this.user.userPreferences.get().animationSpeed ?? defaultUserPreferences.animationSpeed
+		// Until the user explicitly sets a speed, follow the OS reduce-motion setting live rather
+		// than the value `defaultUserPreferences` captured at module load.
+		return (
+			this.user.userPreferences.get().animationSpeed ??
+			(this.systemPrefersReducedMotion.get() ? 0 : 1)
+		)
 	}
 
 	@computed getAreKeyboardShortcutsEnabled() {

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

@@ -1,4 +1,5 @@
 import { atom, computed } from '@tldraw/state'
+import { WeakCache } from '@tldraw/utils'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import { VecLike } from '../../primitives/Vec'
 import type { Editor } from '../Editor'
@@ -119,7 +120,7 @@ export class OverlayManager {
 	// while getActiveOverlayEntries() keeps returning the same overlay
 	// instances; when its reactive deps change, getOverlays() emits fresh
 	// objects and stale entries fall out by GC.
-	private _geometryCache = new WeakMap<TLOverlay, Geometry2d | null>()
+	private _geometryCache = new WeakCache<TLOverlay, Geometry2d | null>()
 
 	/**
 	 * Get hit-test geometry for an overlay, cached by overlay identity. Lets
@@ -130,12 +131,7 @@ export class OverlayManager {
 	 * @public
 	 */
 	getOverlayGeometry(overlay: TLOverlay): Geometry2d | null {
-		const cached = this._geometryCache.get(overlay)
-		if (cached !== undefined) return cached
-		const util = this.getOverlayUtil(overlay)
-		const geometry = util.getGeometry(overlay)
-		this._geometryCache.set(overlay, geometry)
-		return geometry
+		return this._geometryCache.get(overlay, (o) => this.getOverlayUtil(o).getGeometry(o))
 	}
 
 	/**

package/src/lib/editor/overlays/strokeShapeIndicators.ts

@@ -40,7 +40,6 @@ export function strokeShapeIndicators(
 		if (!shape || shape.isLocked) continue
 
 		const pageTransform = editor.getShapePageTransform(shape)
-		if (!pageTransform) continue
 
 		const indicatorPath = indicatorPathCache.get(editor, shape.id)
 		if (!indicatorPath) continue

package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx

@@ -93,7 +93,11 @@ export abstract class BaseFrameLikeShapeUtil<
 			const currentChildren = compact(
 				editor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))
 			)
-			if (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {
+			if (
+				previousChildren.every(
+					(s) => !currentChildren.find((c) => c.index === initialIndices.get(s.id))
+				)
+			) {
 				canRestoreOriginalIndices = true
 			}
 		}

package/src/lib/editor/shapes/shared/getPerfectDashProps.ts

@@ -87,6 +87,9 @@ export function getPerfectDashProps(
 
 	dashCount = Math.floor(totalLength / dashLength / (2 * ratio))
 	dashCount -= dashCount % snap
+	// A path shorter than one dash period (or of zero length, where the count is NaN) would
+	// otherwise divide by zero below and produce an invalid dasharray; draw a single dash instead
+	if (!(dashCount >= 1)) dashCount = 1
 
 	if (dashCount < 3 && style === 'dashed') {
 		if (totalLength / strokeWidth < 4) {

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -75,7 +75,10 @@ export class Pointing extends StateNode {
 	}
 
 	override onComplete() {
-		this.complete()
+		// `complete` arrives mid-press from undo, menus opening, page changes, and focus loss,
+		// none of which is a release; committing here would drop a default-size shape the user
+		// never asked for. Match the text and arrow tools and leave nothing behind.
+		this.cancel()
 	}
 
 	override onInterrupt() {

package/src/lib/editor/tools/StateNode.test.ts

@@ -238,6 +238,70 @@ describe('StateNode.addChild', () => {
 	})
 })
 
+describe('StateNode.enter', () => {
+	let idleExits = 0
+
+	class Idle extends StateNode {
+		static override id = 'idle'
+		override onExit() {
+			idleExits++
+		}
+	}
+
+	class Pointing extends StateNode {
+		static override id = 'pointing'
+	}
+
+	class ToolWithEnterTransition extends StateNode {
+		static override id = 'enterTransition'
+		static override initial = 'idle'
+		static override children() {
+			return [Idle, Pointing]
+		}
+
+		override onEnter(info: { startPointing?: boolean }) {
+			if (info?.startPointing) this.transition('pointing', info)
+		}
+	}
+
+	class OtherTool extends StateNode {
+		static override id = 'other'
+	}
+
+	let editor: Editor
+
+	beforeEach(() => {
+		idleExits = 0
+		editor = new Editor({
+			initialState: 'other',
+			shapeUtils: [],
+			bindingUtils: [],
+			tools: [OtherTool, ToolWithEnterTransition],
+			store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+	})
+
+	it('enters the initial child when onEnter does not transition', () => {
+		editor.setCurrentTool('enterTransition')
+		expect(editor.root.getPath()).toBe('root.enterTransition.idle')
+		expect(editor.root.children!['enterTransition'].children!['idle'].getIsActive()).toBe(true)
+	})
+
+	it('does not enter the initial child on top of a child that onEnter transitioned to', () => {
+		editor.setCurrentTool('enterTransition', { startPointing: true })
+		const tool = editor.root.children!['enterTransition']
+		expect(editor.root.getPath()).toBe('root.enterTransition.pointing')
+		expect(tool.children!['pointing'].getIsActive()).toBe(true)
+		expect(tool.children!['idle'].getIsActive()).toBe(false)
+		// The stale (never re-entered) idle child must not get a spurious onExit
+		expect(idleExits).toBe(0)
+
+		editor.setCurrentTool('other')
+		expect(tool.children!['pointing'].getIsActive()).toBe(false)
+	})
+})
+
 describe('current tool id mask', () => {
 	// Tool mask test classes
 	class ToolA extends StateNode {

package/src/lib/editor/tools/StateNode.ts

@@ -152,7 +152,9 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			}
 
 			if (prevChildState?.id !== nextChildState.id) {
-				prevChildState?.exit(info, id)
+				// The previous child is inactive when transitioning from a parent's onEnter (or from a
+				// node that was already exited); exiting it again would fire a spurious onExit
+				if (prevChildState?.getIsActive()) prevChildState.exit(info, id)
 				currState._current.set(nextChildState)
 				nextChildState.enter(info, prevChildState?.id || 'initial')
 				if (!nextChildState.getIsActive()) break
@@ -188,10 +190,18 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			this.editor.performance._notifyInteractionStart(this.id, this.getPath())
 		}
 
+		const currentBeforeEnter = this.getCurrent()
 		this._isActive.set(true)
 		this.onEnter?.(info, from)
 
-		if (this.children && this.initial && this.getIsActive()) {
+		// If onEnter already transitioned to a child, entering the initial child on top of it would
+		// leave that child active but orphaned
+		if (
+			this.children &&
+			this.initial &&
+			this.getIsActive() &&
+			this.getCurrent() === currentBeforeEnter
+		) {
 			const initial = this.children[this.initial]
 			this._current.set(initial)
 			initial.enter(info, from)

package/src/lib/globals/editors.test.ts

@@ -0,0 +1,76 @@
+import { createTLStore } from '../..'
+import { Editor } from '../editor/Editor'
+import { tleditors } from './editors'
+
+const editors: Editor[] = []
+
+function createTestEditor() {
+	const editor = new Editor({
+		shapeUtils: [],
+		bindingUtils: [],
+		tools: [],
+		store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+		getContainer: () => document.body,
+	})
+	editors.push(editor)
+	return editor
+}
+
+afterEach(() => {
+	for (const editor of editors) {
+		editor.dispose()
+	}
+	editors.length = 0
+	expect(tleditors.getMounted()).toEqual([])
+})
+
+describe('tleditors', () => {
+	it('tracks editors as they mount and unmount', () => {
+		const editor = createTestEditor()
+		expect(tleditors.getMounted()).toEqual([])
+
+		editor.emit('mount')
+		expect(tleditors.getMounted()).toEqual([editor])
+
+		editor.emit('unmount')
+		expect(tleditors.getMounted()).toEqual([])
+	})
+
+	it('does not add the same editor twice', () => {
+		const editor = createTestEditor()
+		editor.emit('mount')
+		editor.emit('mount')
+		expect(tleditors.getMounted()).toEqual([editor])
+	})
+
+	it('removes an editor when it is disposed while mounted', () => {
+		const editor = createTestEditor()
+		editor.emit('mount')
+		expect(tleditors.getMounted()).toEqual([editor])
+
+		editor.dispose()
+		expect(tleditors.getMounted()).toEqual([])
+		expect(editor.getIsMounted()).toBe(false)
+	})
+
+	it('removes an editor on dispose even if the unmount listener was removed', () => {
+		const editor = createTestEditor()
+		editor.emit('mount')
+		editor.removeAllListeners('unmount')
+
+		editor.dispose()
+		expect(tleditors.getMounted()).toEqual([])
+	})
+
+	it('tracks multiple mounted editors', () => {
+		const editorA = createTestEditor()
+		const editorB = createTestEditor()
+
+		editorA.emit('mount')
+		editorB.emit('mount')
+		expect(tleditors.getMounted()).toEqual([editorA, editorB])
+
+		editorA.emit('unmount')
+		expect(tleditors.getMounted()).toEqual([editorB])
+	})
+})

package/src/lib/globals/editors.ts

@@ -0,0 +1,53 @@
+import { Signal, atom } from '@tldraw/state'
+import type { Editor } from '../editor/Editor'
+
+const mounted = atom<readonly Editor[]>('mounted editors', [])
+
+/**
+ * A global registry of currently mounted editor instances. Use it to discover live editors from
+ * outside the React tree, for example from sidebar chrome, keyboard shortcuts, or multi-editor
+ * layouts.
+ *
+ * @example
+ * ```ts
+ * tleditors.getMounted() // readonly Editor[]
+ *
+ * const editors = useValue('mounted editors', () => tleditors.getMounted(), [])
+ * ```
+ *
+ * @public
+ */
+export const tleditors = {
+	/**
+	 * A reactive list of currently mounted editor instances.
+	 *
+	 * An editor is added when it emits the `mount` event and removed when it emits `unmount`
+	 * (including when the editor is disposed while still mounted).
+	 *
+	 * @public
+	 */
+	mounted: mounted as Signal<readonly Editor[]>,
+
+	/**
+	 * Get the currently mounted editor instances.
+	 *
+	 * @public
+	 */
+	getMounted(): readonly Editor[] {
+		return mounted.get()
+	},
+}
+
+/** @internal */
+export function registerMountedEditor(editor: Editor) {
+	const current = mounted.get()
+	if (current.includes(editor)) return
+	mounted.set([...current, editor])
+}
+
+/** @internal */
+export function unregisterMountedEditor(editor: Editor) {
+	const current = mounted.get()
+	if (!current.includes(editor)) return
+	mounted.set(current.filter((e) => e !== editor))
+}

package/src/lib/globals/menus.test.ts

@@ -0,0 +1,33 @@
+import { tlmenus } from './menus'
+
+describe('tlmenus', () => {
+	afterEach(() => {
+		tlmenus.clearOpenMenus()
+		tlmenus._hiddenMenus = []
+	})
+
+	it('reports whether a menu is open with and without a context', () => {
+		tlmenus.addOpenMenu('main')
+		tlmenus.addOpenMenu('main', 'editor-1')
+
+		expect(tlmenus.isMenuOpen('main')).toBe(true)
+		expect(tlmenus.isMenuOpen('main', 'editor-1')).toBe(true)
+		expect(tlmenus.isMenuOpen('main', 'editor-2')).toBe(false)
+		expect(tlmenus.isMenuOpen('other')).toBe(false)
+	})
+
+	it('hides and restores the open menus of a context', () => {
+		tlmenus.addOpenMenu('main', 'editor-1')
+		tlmenus.addOpenMenu('main', 'editor-2')
+
+		tlmenus.hideOpenMenus('editor-1')
+		expect(tlmenus.getOpenMenus()).toEqual(['main-editor-2'])
+
+		tlmenus.showOpenMenus('editor-1')
+		expect(tlmenus.getOpenMenus().sort()).toEqual(['main-editor-1', 'main-editor-2'])
+
+		// closing the real menu afterwards leaves nothing behind
+		tlmenus.deleteOpenMenu('main', 'editor-1')
+		expect(tlmenus.hasOpenMenus('editor-1')).toBe(false)
+	})
+})

package/src/lib/globals/menus.ts

@@ -106,10 +106,12 @@ export const tlmenus = {
 	 * @public
 	 */
 	hideOpenMenus(contextId?: string) {
+		// ids read back from the store already carry their context suffix, so they are deleted
+		// (and later re-added) as-is rather than suffixed again
 		this._hiddenMenus = [...this.getOpenMenus(contextId)]
 		if (this._hiddenMenus.length === 0) return
 		for (const menu of this._hiddenMenus) {
-			this.deleteOpenMenu(menu, contextId)
+			this.deleteOpenMenu(menu)
 		}
 	},
 
@@ -128,10 +130,15 @@ export const tlmenus = {
 	 */
 	showOpenMenus(contextId?: string) {
 		if (this._hiddenMenus.length === 0) return
+		const stillHidden: string[] = []
 		for (const menu of this._hiddenMenus) {
-			this.addOpenMenu(menu, contextId)
+			if (!contextId || menu.endsWith('-' + contextId)) {
+				this.addOpenMenu(menu)
+			} else {
+				stillHidden.push(menu)
+			}
 		}
-		this._hiddenMenus = []
+		this._hiddenMenus = stillHidden
 	},
 
 	/**
@@ -148,7 +155,7 @@ export const tlmenus = {
 	 * @public
 	 */
 	isMenuOpen(id: string, contextId?: string): boolean {
-		return this.getOpenMenus(contextId).includes(`${id}-${contextId}`)
+		return this.getOpenMenus(contextId).includes(contextId ? `${id}-${contextId}` : id)
 	},
 
 	/**

package/src/lib/hooks/useCanvasEvents.ts

@@ -153,6 +153,7 @@ export function useCanvasEvents() {
 				if (e.dataTransfer?.files?.length) {
 					const files = Array.from(e.dataTransfer.files)
 
+					editor.markHistoryStoppingPoint('drop')
 					await editor.putExternalContent({
 						type: 'files',
 						files,
@@ -163,6 +164,7 @@ export function useCanvasEvents() {
 
 				const url = e.dataTransfer.getData('url')
 				if (url) {
+					editor.markHistoryStoppingPoint('drop')
 					await editor.putExternalContent({
 						type: 'url',
 						url,