@tldraw/editor 5.5.2 → 5.6.0-canary.0091c91994d6

package/src/lib/config/TLI18n.ts

@@ -0,0 +1,172 @@
+import { atom } from '@tldraw/state'
+
+/**
+ * Values substituted into a message's ICU placeholders.
+ *
+ * @public
+ */
+export type TLI18nValues = Record<
+	string,
+	string | number | bigint | boolean | Date | null | undefined
+>
+
+/**
+ * The editor's view of the host app's translations. Lets code with no access to React context —
+ * a {@link ShapeUtil}, say — translate a string in the user's locale.
+ *
+ * @public
+ */
+export interface TLI18n {
+	locale: string
+	dir: 'ltr' | 'rtl'
+	/**
+	 * Translate `message` in the current locale, substituting `values` into its ICU placeholders.
+	 *
+	 * Takes the whole message rather than its id so an implementation can fall back to the English
+	 * and still substitute into it. A message absent from the catalog — anything not yet through
+	 * Lokalise — would otherwise have to come back as its own source text, placeholders and all.
+	 */
+	translate(message: TLI18nMessage, values?: TLI18nValues): string
+}
+
+/**
+ * Supplies a {@link TLI18n}. Called on each use rather than held as a value, so the editor reads
+ * the current locale instead of pinning whichever one was active when it was constructed.
+ *
+ * @public
+ */
+export type TLI18nAdapter = () => TLI18n
+
+/**
+ * The i18n used when the host app supplies none: every message comes back as its own English.
+ *
+ * Placeholders are left as they are, because formatting ICU needs a formatter and this package
+ * deliberately has none — it is the floor for an editor running with no translations at all.
+ *
+ * @public
+ */
+export function defaultI18n(): TLI18n {
+	return {
+		locale: 'en',
+		dir: 'ltr',
+		translate(message: TLI18nMessage) {
+			return message.defaultMessage
+		},
+	}
+}
+
+/**
+ * One translatable message: a stable `id` naming it in the catalog, and the English it falls back
+ * to. `defaultMessage` is required, because this package's strings have to read correctly with no
+ * translations loaded at all — `@tldraw/editor` can be used without any of tldraw's UI.
+ *
+ * @public
+ */
+export interface TLI18nMessage {
+	id: string
+	defaultMessage: string
+	description?: string
+}
+
+/**
+ * A message as it's written. The id is optional because a bundler plugin may supply it:
+ * `@formatjs/unplugin` with an `idInterpolationPattern` derives one from the message's own text,
+ * which is how tldraw.com does it. Everywhere downstream takes a {@link TLI18nMessage}, whose id
+ * is required, because {@link defineMessages} fills one in.
+ *
+ * @public
+ */
+export type TLI18nMessageInput = Omit<TLI18nMessage, 'id'> & { id?: string }
+
+const declaredMessages: Record<string, string> = {}
+// Bumped per `defineMessages` call, so a reader re-renders when a chunk loaded after mount — a
+// dynamically imported @tldraw/commenting, say — declares messages its labels look up by id.
+const declaredVersion = atom('declaredMessagesVersion', 0)
+let snapshot: Readonly<Record<string, string>> = {}
+let snapshotVersion = -1
+
+/**
+ * Declares messages so the extractor can find them, next to the UI that shows them — the English
+ * then lives with the code rather than in a catalog edited by hand. Call it by this name:
+ * `formatjs extract` matches the call by name, wherever it was imported from, so a wrapper under
+ * another name extracts nothing.
+ *
+ * Write the id yourself, as the SDK's own messages do — an app overrides by id, so an id has to
+ * survive a reworded English string. Leave it out only where a bundler plugin injects one; with no
+ * plugin either the English stands in, so the message still renders as itself. An id missing from
+ * a real build is caught by `pnpm i18n-extract --check`.
+ *
+ * The type parameter is `const` so each written `id` keeps its literal type, which is what lets a
+ * declared id go where a `TLUiTranslationKey` is expected — a menu item's `label`, say — instead
+ * of widening to `string` and needing a cast.
+ *
+ * For a message rendered as an element, write it inline on the `<F>` instead; the extractor reads
+ * those props directly. This is for the ones that can't be: a label the UI takes as data, and
+ * anything translated as a string through `useTranslation`.
+ *
+ * @example
+ *
+ * ```ts
+ * const messages = defineMessages({
+ * 	copy: { id: 'action.copy', defaultMessage: 'Copy' },
+ * })
+ * ```
+ *
+ * @public
+ */
+export function defineMessages<const Messages extends Record<string, TLI18nMessageInput>>(
+	msgs: Messages
+): { [K in keyof Messages]: Messages[K] & TLI18nMessage } {
+	const withIds = {} as { [K in keyof Messages]: Messages[K] & TLI18nMessage }
+	for (const key in msgs) {
+		const message = msgs[key]
+		const withId = (
+			message.id ? message : { ...message, id: message.defaultMessage }
+		) as Messages[typeof key] & TLI18nMessage
+		withIds[key] = withId
+		declaredMessages[withId.id] = withId.defaultMessage
+	}
+	declaredVersion.update((v) => v + 1)
+	return withIds
+}
+
+/**
+ * The English of every message declared so far, by id. This is the English catalog: building it
+ * from the declarations means it isn't bundled a second time as a generated file. A key looked up
+ * by id alone — a menu label, or an app calling `msg('action.copy')` — resolves against it.
+ *
+ * Declarations run as their modules load, so this is complete once the package has been imported.
+ * Reactive: read it inside `useValue` or a `computed` to pick up a module that loads later. The
+ * returned object changes identity only when something new is declared.
+ *
+ * @internal
+ */
+export function getDeclaredMessages(): Readonly<Record<string, string>> {
+	const version = declaredVersion.get()
+	if (version !== snapshotVersion) {
+		snapshot = { ...declaredMessages }
+		snapshotVersion = version
+	}
+	return snapshot
+}
+
+/**
+ * Translates `message` through an editor's i18n, falling back to its English.
+ *
+ * Takes the editor's i18n rather than reading a context, so it works in the places this package
+ * has to keep working: a `ShapeUtil` with no hooks available, or an error fallback rendered
+ * outside the editor it's reporting on.
+ *
+ * With no i18n at all the English is returned unformatted, for the reason given on
+ * {@link defaultI18n}. Every other case goes through the adapter, which does substitute.
+ *
+ * @public
+ */
+export function translateMessage(
+	i18n: TLI18n | null | undefined,
+	message: TLI18nMessage,
+	values?: TLI18nValues
+): string {
+	if (!i18n) return message.defaultMessage
+	return i18n.translate(message, values)
+}

package/src/lib/editor/Editor.ts

@@ -107,6 +107,7 @@ import {
 	getSnapshot,
 	loadSnapshot,
 } from '../config/TLEditorSnapshot'
+import { TLI18nAdapter, defaultI18n } from '../config/TLI18n'
 import {
 	DEFAULT_ANIMATION_OPTIONS,
 	DEFAULT_CAMERA_OPTIONS,
@@ -137,6 +138,7 @@ import {
 	areAnglesCompatible,
 	clamp,
 	pointInPolygon,
+	shortAngleDist,
 } from '../primitives/utils'
 import { Vec, VecLike } from '../primitives/Vec'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
@@ -265,6 +267,11 @@ export interface TLEditorOptions {
 	 * given, the body element will be used.
 	 */
 	getContainer(): HTMLElement
+
+	/**
+	 * An i18n adapter for translating strings.
+	 */
+	i18n?: TLI18nAdapter
 	/**
 	 * Provides a way to hide shapes.
 	 *
@@ -372,9 +379,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 		fontAssetUrls,
 		themes,
 		initialTheme,
+		i18n,
 	}: TLEditorOptions) {
 		super()
 
+		this.i18n = i18n ?? defaultI18n
 		this._getShapeVisibility = getShapeVisibility
 
 		// Merge deprecated textOptions prop with options.text
@@ -1017,6 +1026,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	readonly contextId = uniqueId()
 
+	/**
+	 * The i18n adapter for translating strings.
+	 *
+	 * @public
+	 */
+	readonly i18n: TLI18nAdapter
+
 	/**
 	 * The editor's store
 	 *
@@ -2291,12 +2307,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			firstParentId &&
 			selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) &&
 			!isPageId(firstParentId)
-		// Locked shapes (and children of locked containers) can't be selected by clicking or
-		// select all, so traversal skips them too
-		const filteredShapes = this.getCurrentPageShapes().filter(
-			(shape) =>
-				!this.isShapeOrAncestorLocked(shape) &&
-				(isSelectedWithinContainer ? shape.parentId === firstParentId : isPageId(shape.parentId))
+		const filteredShapes = this.getCurrentPageShapes().filter((shape) =>
+			isSelectedWithinContainer ? shape.parentId === firstParentId : isPageId(shape.parentId)
 		)
 		const readingOrderShapes = this._getShapesInReadingOrder(filteredShapes)
 		const currentShapeId: TLShapeId | undefined =
@@ -2307,8 +2319,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let adjacentShapeId: TLShapeId
 		if (direction === 'next' || direction === 'prev') {
 			const shapeIds = readingOrderShapes.map((shape) => shape.id)
-			// Every candidate can be filtered out (e.g. a locked shape is selected and nothing
-			// else is unlocked); indexing an empty list would hand getShape undefined
+			// Every candidate can be filtered out (e.g. every util returns false from canTabTo);
+			// indexing an empty list would hand getShape undefined
 			if (shapeIds.length === 0) return
 
 			const currentIndex = currentShapeId ? shapeIds.indexOf(currentShapeId) : -1
@@ -2332,6 +2344,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/**
 	 * Generates a reading order for shapes based on rows grouping.
 	 * Tries to keep a natural reading order (left-to-right, top-to-bottom).
+	 * Shapes whose util returns `false` from {@link ShapeUtil.canTabTo} are left out. Locked
+	 * shapes are included, so keyboard users can reach them to unlock them.
 	 *
 	 * @public
 	 */
@@ -2513,6 +2527,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	private _selectShapesAndZoom(ids: TLShapeId[]) {
+		// setSelectedShapes is a no-op for an unchanged selection (Tab with a single shape,
+		// Ctrl+arrow with no neighbour); marking anyway would leave an empty stopping point
+		// that makes undo available with nothing to undo
+		const selectedShapeIds = this.getSelectedShapeIds()
+		const isSelectionChanging =
+			ids.length !== selectedShapeIds.length || ids.some((id) => !selectedShapeIds.includes(id))
+		if (isSelectionChanging) {
+			this.markHistoryStoppingPoint('selecting adjacent shape')
+		}
 		this.setSelectedShapes(ids)
 		this.zoomToSelectionIfOffscreen(256, {
 			animation: {
@@ -5122,7 +5145,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const freshPage = this.getPage(id) // get the most recent version of the page anyway
 		if (!freshPage) return this
 
-		const prevCamera = { ...this.getCamera() }
+		// Read the source page's own camera rather than getCamera(), which is the
+		// current page's and is wrong when duplicating a page that isn't being viewed
+		const prevCamera = {
+			...(this.store.get(CameraRecordType.createId(freshPage.id)) ?? this.getCamera()),
+		}
 		const content = this.getContentFromCurrentPage(this.getSortedChildIdsForParent(freshPage.id))
 
 		this.run(() => {
@@ -5137,8 +5164,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this.setCamera(prevCamera)
 
 			if (content) {
-				// If we had content on the previous page, put it on the new page
-				return this.putContentOntoCurrentPage(content)
+				// Without preservePosition the paste rule recenters off-screen content
+				// in the viewport, so the copy's layout would not match the original
+				return this.putContentOntoCurrentPage(content, { preservePosition: true })
 			}
 		})
 
@@ -8171,10 +8199,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		let workingShape: TLShape | null = null
 
+		const initialPagePoint = Mat.applyToPoint(pageTransform, new Vec())
+
 		if (util.onResize && util.canResize(initialShape)) {
 			// get the model changes from the shape util
 			const newPagePoint = this._scalePagePoint(
-				Mat.applyToPoint(pageTransform, new Vec(0, 0)),
+				initialPagePoint,
 				scaleOrigin,
 				scale,
 				scaleAxisRotation
@@ -8194,11 +8224,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			myScale.x = areWidthAndHeightAlignedWithCorrectAxis ? scale.x : scale.y
 			myScale.y = areWidthAndHeightAlignedWithCorrectAxis ? scale.y : scale.x
 
-			// adjust initial model for situations where the parent has moved during the resize
-			// e.g. groups
-			const initialPagePoint = Mat.applyToPoint(pageTransform, new Vec())
-
-			// need to adjust the shape's x and y points in case the parent has moved since start of resizing
+			// need to adjust the shape's x and y points in case the parent has moved since start of
+			// resizing, e.g. groups
 			const { x, y } = this.getPointInParentSpace(initialShape.id, initialPagePoint)
 
 			workingShape = initialShape
@@ -8255,29 +8282,32 @@ export class Editor extends EventEmitter<TLEventMap> {
 			scaleAxisRotation
 		)
 
-		const initialPageCenterInParentSpace = this.getPointInParentSpace(
+		// A parent-space delta added to the shape's initial x/y would double-count the parent's own
+		// move during the same gesture — a repositioned group carries its children with it (#10617).
+		const repositionedPagePoint = Vec.Add(
+			newPageCenter,
+			Vec.Sub(initialPagePoint, initialPageCenter)
+		)
+		const repositionedLocalPoint = this.getPointInParentSpace(
 			initialShape.id,
-			initialPageCenter
+			repositionedPagePoint
 		)
-		const newPageCenterInParentSpace = this.getPointInParentSpace(initialShape.id, newPageCenter)
-
-		const delta = Vec.Sub(newPageCenterInParentSpace, initialPageCenterInParentSpace)
 
 		if (workingShape) {
 			// the util's onResize ran but returned no change; keep the working update (which may
 			// include changes from onResizeStart / onResizeEnd) and reposition the shape
 			return {
 				...workingShape,
-				x: initialShape.x + delta.x,
-				y: initialShape.y + delta.y,
+				x: repositionedLocalPoint.x,
+				y: repositionedLocalPoint.y,
 			}
 		}
 
 		return {
 			id,
 			type: initialShape.type as any,
-			x: initialShape.x + delta.x,
-			y: initialShape.y + delta.y,
+			x: repositionedLocalPoint.x,
+			y: repositionedLocalPoint.y,
 		}
 	}
 
@@ -8313,6 +8343,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			initialShape: TLShape
 			isAspectRatioLocked: boolean
 			initialPageTransform: MatLike
+			dragHandle?: TLResizeHandle
+			mode?: TLResizeMode
+			skipStartAndEndCallbacks?: boolean
 		}
 	) {
 		const { type } = options.initialShape
@@ -8337,19 +8370,39 @@ export class Editor extends EventEmitter<TLEventMap> {
 			initialBounds: options.initialBounds,
 			isAspectRatioLocked: options.isAspectRatioLocked,
 			initialPageTransform: options.initialPageTransform,
+			dragHandle: options.dragHandle,
+			mode: options.mode,
+			// this is one frame of the same resize, not a new one, so don't fire start/end again
+			skipStartAndEndCallbacks: options.skipStartAndEndCallbacks,
 		})
 
 		// then if the shape is flipped in one axis only, we need to apply an extra rotation
 		// to make sure the shape is mirrored correctly
 		if (Math.sign(scale.x) * Math.sign(scale.y) < 0) {
-			// We need to compute the new local rotation that will result in the negated page rotation.
-			// For a shape with local rotation `localRot` and parent page rotation `parentRot`:
+			// Mirroring across an axis at angle `axisRot` maps a page rotation `pageRot` to
+			// `2 * axisRot - pageRot`. For a shape with local rotation `localRot` whose parent had
+			// page rotation `parentRot` when the resize began:
 			// - pageRot = parentRot + localRot
-			// - newPageRot = -pageRot (we want to negate the page rotation)
-			// - newPageRot = parentRot + newLocalRot (parent hasn't changed)
-			// - Therefore: newLocalRot = -pageRot - parentRot = -(parentRot + localRot) - parentRot = -localRot - 2*parentRot
+			// - newPageRot = 2 * axisRot - pageRot
+			// - newPageRot = (parentRot + parentDelta) + newLocalRot
+			// - Therefore: newLocalRot = 2 * axisRot - localRot - 2 * parentRot - parentDelta
+			// `parentDelta` is how far the parent has rotated since the resize began. Nested resizes
+			// commit ancestors before descendants, so an unaligned parent may itself have been
+			// flipped by the time its child gets here; reading the parent's current rotation as if
+			// it were the initial one would then double-count that flip.
 			const parentRotation = this.getShapeParentTransform(id).rotation()
-			const rotation = -options.initialShape.rotation - 2 * parentRotation
+			// take the shortest arc so the stored rotation doesn't drift by 2π when the parent
+			// hasn't moved and the initial page rotation happens to be wrapped
+			const parentDelta = shortAngleDist(
+				Mat.Cast(options.initialPageTransform).rotation() - options.initialShape.rotation,
+				parentRotation
+			)
+			const initialParentRotation = parentRotation - parentDelta
+			const rotation =
+				2 * options.scaleAxisRotation -
+				options.initialShape.rotation -
+				2 * initialParentRotation -
+				parentDelta
 			this.updateShapes([{ id, type, rotation }])
 		}
 
@@ -11522,7 +11575,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 						break
 					}
 					case 'key_repeat': {
-						// noop
+						// A repeat is the only positive evidence that a key is still physically
+						// down, so it is also the only way one we lost track of can get back in.
+						// A key still held when Meta is released is dropped there on the
+						// assumption macOS ate its keyup; this is what corrects that.
+						inputs.keys.add(info.code)
 						break
 					}
 				}

package/src/lib/editor/derivations/shapeIdsInCurrentPage.ts

@@ -68,16 +68,32 @@ export function deriveShapeIdsInCurrentPage(store: TLStore, getCurrentPageId: ()
 			prevValue
 		) as IncrementalSetConstructor<TLShapeId>
 
+		const addedIds = new Set<TLShapeId>()
+
 		for (const changes of diff) {
 			for (const record of Object.values(changes.added)) {
-				if (isShape(record) && isShapeInPage(store, currentPageId, record)) {
+				if (!isShape(record)) continue
+				addedIds.add(record.id)
+				if (isShapeInPage(store, currentPageId, record)) {
 					builder.add(record.id)
 				}
 			}
 
-			for (const [_from, to] of Object.values(changes.updated)) {
+			for (const [from, to] of Object.values(changes.updated)) {
 				if (isShape(to)) {
-					if (isShapeInPage(store, currentPageId, to)) {
+					const inPage = isShapeInPage(store, currentPageId, to)
+					// A reparent that moves a shape onto or off this page takes its descendants
+					// with it, but they are not in the diff; rebuild so they don't keep stale membership.
+					// A shape created in this diff has no pre-existing descendants, so it can't go stale.
+					if (
+						isShape(from) &&
+						from.parentId !== to.parentId &&
+						!addedIds.has(to.id) &&
+						inPage !== prevValue.has(to.id)
+					) {
+						return fromScratch()
+					}
+					if (inPage) {
 						builder.add(to.id)
 					} else {
 						builder.remove(to.id)

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

@@ -164,6 +164,23 @@ describe('EdgeScrollManager', () => {
 			edgeScrollManager.updateEdgeScrolling(150)
 			expect(editor.setCamera).toHaveBeenCalled()
 		})
+
+		it('should start easing after the edge scroll delay', () => {
+			mockInputs.setCurrentScreenPoint(new Vec(0, 300))
+
+			edgeScrollManager.updateEdgeScrolling(200)
+			expect(editor.setCamera).not.toHaveBeenCalled()
+
+			// 20ms into a 200ms cubic ease, the speed factor is 0.1³.
+			edgeScrollManager.updateEdgeScrolling(20)
+			expect((editor.setCamera.mock.calls[0][0] as Vec).x).toBeCloseTo(0.03)
+
+			editor.setCamera.mockClear()
+
+			// The ease reaches full speed 200ms after the delay.
+			edgeScrollManager.updateEdgeScrolling(180)
+			expect((editor.setCamera.mock.calls[0][0] as Vec).x).toBeCloseTo(270)
+		})
 	})
 
 	describe('edge proximity detection', () => {

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

@@ -47,8 +47,8 @@ export class EdgeScrollManager {
 						? EASINGS.easeInCubic(
 								Math.min(
 									1,
-									this._edgeScrollDuration /
-										(editor.options.edgeScrollDelay + editor.options.edgeScrollEaseDuration)
+									(this._edgeScrollDuration - editor.options.edgeScrollDelay) /
+										editor.options.edgeScrollEaseDuration
 								)
 							)
 						: 1

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

@@ -101,6 +101,7 @@ describe('FontManager', () => {
 			getCurrentPageShapeIds: vi.fn(() => new Set()),
 			getShape: vi.fn(),
 			getContainerDocument: vi.fn(() => document),
+			timers: { requestAnimationFrame: vi.fn() },
 			isDisposed: false,
 		} as any
 

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

@@ -1,4 +1,4 @@
-import { computed, EMPTY_ARRAY, transact } from '@tldraw/state'
+import { atom, computed, EMPTY_ARRAY, transact } from '@tldraw/state'
 import { AtomMap } from '@tldraw/store'
 import { TLFontFace, TLShape, TLShapeId } from '@tldraw/tlschema'
 import {
@@ -102,6 +102,29 @@ export class FontManager {
 		return this.fontStates.get(font) ?? null
 	}
 
+	// One signal for consumers that deliberately avoid per-shape font tracking (the
+	// spatial index); otherwise their cached text bounds stay at the fallback-font size.
+	private readonly fontLoadEpoch = atom('font load epoch', 0)
+
+	/** @internal */
+	getFontLoadEpoch(): number {
+		return this.fontLoadEpoch.get()
+	}
+
+	private isFontLoadEpochBumpPending = false
+
+	private setFontState(font: TLFontFace, state: FontState['state']) {
+		this.fontStates.update(font, (s) => ({ ...s, state }))
+		// Each bump rebuilds the whole spatial index, and fonts finish loading in
+		// separate callbacks, so coalesce loads that land in the same frame.
+		if (this.isFontLoadEpochBumpPending) return
+		this.isFontLoadEpochBumpPending = true
+		this.editor.timers.requestAnimationFrame(() => {
+			this.isFontLoadEpochBumpPending = false
+			this.fontLoadEpoch.update((n) => n + 1)
+		})
+	}
+
 	ensureFontIsLoaded(font: TLFontFace): Promise<void> {
 		const existingState = this.getFontState(font)
 		if (existingState) return existingState.loadingPromise
@@ -123,7 +146,7 @@ export class FontManager {
 						return
 					}
 					this.editor.getContainerDocument().fonts.add(instance)
-					this.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))
+					this.setFontState(font, 'ready')
 				})
 				.catch((err) => {
 					if (isStale()) {
@@ -132,7 +155,7 @@ export class FontManager {
 						return
 					}
 					console.error(err)
-					this.fontStates.update(font, (s) => ({ ...s, state: 'error' }))
+					this.setFontState(font, 'error')
 				}),
 		}
 

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

@@ -177,6 +177,38 @@ describe(HistoryManager, () => {
 		expect(editor.getCount()).toBe(3)
 	})
 
+	// Callers mark before code that may change nothing, such as a shape util's double-click
+	// handler (#11075), so an empty stopping point must not cost an extra undo or redo
+	it('treats back-to-back stopping points as one on undo and redo', () => {
+		editor.history._mark('stop at 0')
+		editor.increment()
+		editor.history._mark('nothing follows this mark')
+		editor.history._mark('stop at 1')
+		editor.increment()
+		expect(editor.getCount()).toBe(2)
+
+		editor.history.undo()
+		expect(editor.getCount()).toBe(1)
+		editor.history.undo()
+		expect(editor.getCount()).toBe(0)
+
+		editor.history.redo()
+		expect(editor.getCount()).toBe(1)
+		editor.history.redo()
+		expect(editor.getCount()).toBe(2)
+	})
+
+	it('skips a trailing stopping point with no changes after it on undo', () => {
+		editor.history._mark('stop at 0')
+		editor.increment()
+		editor.history._mark('nothing follows this mark')
+
+		editor.history.undo()
+		expect(editor.getCount()).toBe(0)
+		editor.history.redo()
+		expect(editor.getCount()).toBe(1)
+	})
+
 	it('allows squashing of commands', () => {
 		editor.increment()
 

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

@@ -444,13 +444,11 @@ export class ScribbleManager {
 			}
 		}
 
-		// Remove completed items in individual fade mode
+		// Keep starting scribbles with no point yet, or addPoint can't find them (#7681).
 		if (session.options.fadeMode === 'individual') {
-			for (let i = session.items.length - 1; i >= 0; i--) {
-				if (session.items[i].scribble.points.length === 0) {
-					session.items.splice(i, 1)
-				}
-			}
+			session.items = session.items.filter(
+				({ scribble }) => scribble.points.length > 0 || scribble.state === 'starting'
+			)
 		}
 	}