tldraw 5.4.0-next.ef99ab47e5ce → 5.4.0

package/src/test/spacebarPanning.test.ts

@@ -80,3 +80,61 @@ it('When holding spacebar, pressing the arrow keys moves over by one viewport',
 	expect(editor.getViewportPageBounds()).toEqual({ x: 1080, y: 720, w: 1080, h: 720 })
 	editor.keyUp(' ')
 })
+
+describe('When cancelling while spacebar is held', () => {
+	it('keeps panning through a cancel while the pointer is down', () => {
+		editor.keyDown(' ')
+		editor.pointerDown(0, 0)
+		editor.pointerMove(50, 50)
+		editor.expectCameraToBe(50, 50, 1)
+
+		editor.cancel()
+		expect(editor.inputs.getIsPanning()).toBe(true)
+		expect(editor.inputs.getIsSpacebarPanning()).toBe(true)
+		expect(editor.getInstanceState().cursor.type).toBe('grabbing')
+
+		editor.pointerMove(100, 100)
+		editor.expectCameraToBe(100, 100, 1)
+
+		editor.pointerUp(100, 100)
+		editor.keyUp(' ')
+		expect(editor.inputs.getIsPanning()).toBe(false)
+		expect(editor.getInstanceState().cursor.type).toBe('default')
+	})
+
+	it('keeps panning through a cancel while the pointer is up', () => {
+		editor.keyDown(' ')
+		editor.cancel()
+		expect(editor.inputs.getIsPanning()).toBe(true)
+		expect(editor.getInstanceState().cursor.type).toBe('grab')
+
+		editor.pointerDown(0, 0)
+		editor.pointerMove(100, 100)
+		editor.expectCameraToBe(100, 100, 1)
+		editor.pointerUp(100, 100)
+		editor.keyUp(' ')
+		expect(editor.inputs.getIsPanning()).toBe(false)
+	})
+
+	it('keeps panning through a complete while spacebar is held', () => {
+		editor.keyDown(' ')
+		editor.pointerDown(0, 0)
+		editor.complete()
+		expect(editor.inputs.getIsPanning()).toBe(true)
+		expect(editor.getInstanceState().cursor.type).toBe('grabbing')
+
+		editor.pointerMove(100, 100)
+		editor.expectCameraToBe(100, 100, 1)
+		editor.pointerUp(100, 100)
+		editor.keyUp(' ')
+		expect(editor.inputs.getIsPanning()).toBe(false)
+	})
+
+	it('still ends a middle mouse pan on cancel when spacebar is not held', () => {
+		editor.pointerDown(0, 0, { button: 1 })
+		expect(editor.inputs.getIsPanning()).toBe(true)
+		editor.cancel()
+		expect(editor.inputs.getIsPanning()).toBe(false)
+		expect(editor.getInstanceState().cursor.type).toBe('default')
+	})
+})

package/src/test/translating.test.ts

@@ -2305,6 +2305,48 @@ describe('cancelling a translate operation', () => {
 	})
 })
 
+describe('cloning mid-drag', () => {
+	it('reparents the clone, not the original, when alt is pressed during the drag', () => {
+		editor.createShapes([
+			{ id: ids.frame1, type: 'frame', x: 500, y: 0, props: { w: 200, h: 200 } },
+			{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } },
+		])
+		editor.pointerDown(50, 50, { target: 'shape', shape: editor.getShape(ids.box1) })
+		editor.pointerMove(60, 60)
+		editor.expectToBeIn('select.translating')
+		editor.keyDown('Alt')
+		editor.pointerMove(600, 100)
+		vi.advanceTimersByTime(300)
+		editor.pointerUp(600, 100)
+
+		const original = editor.getShape(ids.box1)!
+		expect(original.parentId).toBe(editor.getCurrentPageId())
+		expect(editor.getShapePageBounds(original)).toMatchObject({ x: 0, y: 0 })
+
+		const clone = editor.getCurrentPageShapes().find((s) => s.type === 'geo' && s.id !== ids.box1)!
+		expect(clone.parentId).toBe(ids.frame1)
+	})
+
+	it('reparents the original when alt is released during the drag', () => {
+		editor.createShapes([
+			{ id: ids.frame1, type: 'frame', x: 500, y: 0, props: { w: 200, h: 200 } },
+			{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } },
+		])
+		editor.keyDown('Alt')
+		editor.pointerDown(50, 50, { target: 'shape', shape: editor.getShape(ids.box1) })
+		editor.pointerMove(60, 60)
+		editor.expectToBeIn('select.translating')
+		editor.keyUp('Alt')
+		vi.advanceTimersByTime(250) // the alt key is released on a timer
+		editor.pointerMove(600, 100)
+		vi.advanceTimersByTime(300)
+		editor.pointerUp(600, 100)
+
+		expect(editor.getCurrentPageShapes().filter((s) => s.type === 'geo')).toHaveLength(1)
+		expect(editor.getShape(ids.box1)!.parentId).toBe(ids.frame1)
+	})
+})
+
 it('preserves z-indexes when translating', () => {
 	editor.createShape({ type: 'geo', x: 0, y: 0, props: { w: 200, h: 200 } })
 	editor.createShape({ type: 'geo', x: 100, y: 100, props: { w: 200, h: 200 } })

package/src/test/ui/AltTextEditor.test.tsx

@@ -0,0 +1,51 @@
+import { act, fireEvent, screen } from '@testing-library/react'
+import { createShapeId, Editor, TLImageShape } from '@tldraw/editor'
+import { Tldraw } from '../../lib/Tldraw'
+import { renderTldrawComponentWithEditor } from '../testutils/renderTldrawComponent'
+
+let editor: Editor
+const imageId = createShapeId('image')
+
+beforeEach(async () => {
+	const result = await renderTldrawComponentWithEditor((onMount) => <Tldraw onMount={onMount} />, {
+		waitForPatterns: false,
+	})
+	editor = result.editor
+
+	act(() => {
+		editor.createShape<TLImageShape>({
+			id: imageId,
+			type: 'image',
+			x: 100,
+			y: 100,
+			props: { w: 200, h: 200 },
+		})
+		editor.markHistoryStoppingPoint('move image')
+		editor.updateShape({ id: imageId, type: 'image', x: 300 })
+		editor.select(imageId)
+	})
+})
+
+describe('AltTextEditor', () => {
+	it('undoes only the alt text change, not the action before it', async () => {
+		fireEvent.click(await screen.findByTestId('tool.image-alt-text'))
+
+		const input = (await screen.findByTestId('media-toolbar.alt-text-input')) as HTMLInputElement
+		fireEvent.change(input, { target: { value: 'A picture' } })
+		fireEvent.keyDown(input, { key: 'Enter' })
+
+		expect(editor.getShape<TLImageShape>(imageId)).toMatchObject({
+			x: 300,
+			props: { altText: 'A picture' },
+		})
+
+		act(() => {
+			editor.undo()
+		})
+
+		expect(editor.getShape<TLImageShape>(imageId)).toMatchObject({
+			x: 300,
+			props: { altText: '' },
+		})
+	})
+})

package/src/test/ui/ContextMenu.test.tsx

@@ -1,5 +1,6 @@
-import { act, fireEvent, screen } from '@testing-library/react'
-import { createShapeId, Editor, tlenvReactive } from '@tldraw/editor'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { createShapeId, Editor, TldrawOptions, tlenvReactive } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TLComponents, Tldraw } from '../../lib/Tldraw'
 import { DefaultContextMenu } from '../../lib/ui/components/ContextMenu/DefaultContextMenu'
 import { TLUiOverrides } from '../../lib/ui/overrides'
@@ -8,6 +9,16 @@ import {
 	renderTldrawComponentWithEditor,
 } from '../testutils/renderTldrawComponent'
 
+// The paste item only renders when the clipboard API exists at module load, so the
+// stub has to be in place before the menu modules are imported.
+const clipboard = vi.hoisted(() => {
+	const clipboard = { read: vi.fn(), write: vi.fn() }
+	Object.assign(navigator, { clipboard })
+	// @ts-expect-error jsdom has no ClipboardItem
+	window.ClipboardItem = class {}
+	return clipboard
+})
+
 it('opens on right-click', async () => {
 	await renderTldrawComponent(
 		<Tldraw
@@ -167,6 +178,54 @@ it('right-click in a shape tool reveals shape actions (rightClickPanning off)',
 	await screen.findByTestId('context-menu.delete')
 })
 
+it('pastes at the point where the menu was opened, not where the item was chosen', async () => {
+	// Regression for #10423: the pointer keeps moving (over the menu) between the
+	// right-click and choosing Paste, and the pasted content used to follow it.
+	const onClipboardPasteRaw = vi.fn<NonNullable<TldrawOptions['onClipboardPasteRaw']>>(() => false)
+	const { editor } = await renderTldrawComponentWithEditor(
+		(onMount) => <Tldraw options={{ onClipboardPasteRaw }} onMount={onMount} />,
+		{ waitForPatterns: false }
+	)
+	clipboard.read.mockResolvedValue([new window.ClipboardItem({})])
+
+	function movePointerTo(x: number, y: number) {
+		act(() => {
+			editor.dispatch({
+				type: 'pointer',
+				name: 'pointer_move',
+				target: 'canvas',
+				point: { x, y, z: 0.5 },
+				pointerId: 1,
+				button: 0,
+				isPen: false,
+				shiftKey: false,
+				altKey: false,
+				ctrlKey: false,
+				metaKey: false,
+				accelKey: false,
+			})
+			// pointer moves are batched until the next tick
+			editor.emit('tick', 16)
+		})
+	}
+
+	const canvas = await screen.findByTestId('canvas')
+	movePointerTo(100, 200)
+	fireEvent.contextMenu(canvas)
+	const pasteItem = await screen.findByTestId('context-menu.paste')
+
+	// travel down the menu before choosing the item
+	movePointerTo(300, 400)
+	expect(editor.inputs.getCurrentPagePoint()).toMatchObject({ x: 300, y: 400 })
+
+	fireEvent.click(pasteItem)
+	await waitFor(() => expect(onClipboardPasteRaw).toHaveBeenCalled())
+	expect(onClipboardPasteRaw.mock.calls[0][0]).toMatchObject({
+		source: 'clipboard-read',
+		point: { x: 100, y: 200 },
+	})
+})
+
 it('tunnels context menu', async () => {
 	const components: TLComponents = {
 		ContextMenu: (props) => {

package/src/test/ui/EditLinkDialog.test.tsx

@@ -0,0 +1,77 @@
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { createShapeId, Editor } from '@tldraw/editor'
+import { TLComponents, Tldraw } from '../../lib/Tldraw'
+import { EditLinkDialog } from '../../lib/ui/components/EditLinkDialog'
+import { useDialogs } from '../../lib/ui/context/dialogs'
+import { renderTldrawComponentWithEditor } from '../testutils/renderTldrawComponent'
+
+function OpenEditLinkDialogButton() {
+	const { addDialog } = useDialogs()
+	return (
+		<button data-testid="open-edit-link" onClick={() => addDialog({ component: EditLinkDialog })}>
+			open
+		</button>
+	)
+}
+
+const components: TLComponents = {
+	SharePanel: () => <OpenEditLinkDialogButton />,
+}
+
+const shapeId = createShapeId('box')
+
+async function renderWithOpenDialog() {
+	const { editor } = await renderTldrawComponentWithEditor(
+		(onMount) => <Tldraw components={components} onMount={onMount} />,
+		{ waitForPatterns: false }
+	)
+
+	act(() => {
+		editor.createShape({ id: shapeId, type: 'geo', props: { url: 'https://tldraw.com' } })
+		editor.select(shapeId)
+	})
+
+	fireEvent.click(screen.getByTestId('open-edit-link'))
+	await waitFor(() => expect(getDialogFrame()).not.toBeNull())
+
+	return editor
+}
+
+// The dialog frame that wraps whatever the dialog component renders. The bug left this
+// frame mounted and empty, so checking only for the dialog's own content would not catch it.
+function getDialogFrame() {
+	return document.querySelector('.tlui-dialog__content')
+}
+
+async function expectDialogClosed() {
+	await act(async () => {})
+	expect(getDialogFrame()).toBeNull()
+}
+
+let editor: Editor
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+it('closes itself when the shape is deleted while the dialog is open', async () => {
+	editor = await renderWithOpenDialog()
+	expect(getDialogFrame()).not.toBeNull()
+
+	act(() => {
+		editor.deleteShape(shapeId)
+	})
+
+	await expectDialogClosed()
+})
+
+it('closes itself when the shape is deselected while the dialog is open', async () => {
+	editor = await renderWithOpenDialog()
+	expect(getDialogFrame()).not.toBeNull()
+
+	act(() => {
+		editor.selectNone()
+	})
+
+	await expectDialogClosed()
+})

package/src/test/ui/ImageToolbar.test.tsx

@@ -0,0 +1,58 @@
+import { act, fireEvent, screen } from '@testing-library/react'
+import { createShapeId, Editor, TLImageShape } from '@tldraw/editor'
+import { Tldraw } from '../../lib/Tldraw'
+import { renderTldrawComponentWithEditor } from '../testutils/renderTldrawComponent'
+
+let editor: Editor
+const imageId = createShapeId('image') as TLImageShape['id']
+
+beforeEach(async () => {
+	const result = await renderTldrawComponentWithEditor((onMount) => <Tldraw onMount={onMount} />, {
+		waitForPatterns: false,
+	})
+	editor = result.editor
+
+	act(() => {
+		editor.createShapes([{ id: imageId, type: 'image', x: 0, y: 0, props: { w: 100, h: 100 } }])
+		editor.select(imageId)
+	})
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+async function enterCropMode() {
+	act(() => {
+		editor.setCroppingShape(imageId)
+		editor.setCurrentTool('select.crop.idle')
+	})
+	const slider = await screen.findByTestId('tool.image-zoom')
+	return slider.querySelector('.tlui-slider__thumb') as HTMLElement
+}
+
+describe('Image toolbar in crop mode', () => {
+	it('keeps the image selected when Escape is pressed on the zoom slider', async () => {
+		const thumb = await enterCropMode()
+
+		act(() => {
+			fireEvent.keyDown(thumb, { key: 'Escape' })
+		})
+
+		expect(editor.getCroppingShapeId()).toBe(null)
+		expect(editor.isIn('select.idle')).toBe(true)
+		expect(editor.getSelectedShapeIds()).toEqual([imageId])
+	})
+
+	it('keeps the image selected when Enter is pressed on the zoom slider', async () => {
+		const thumb = await enterCropMode()
+
+		act(() => {
+			fireEvent.keyDown(thumb, { key: 'Enter' })
+		})
+
+		expect(editor.getCroppingShapeId()).toBe(null)
+		expect(editor.isIn('select.idle')).toBe(true)
+		expect(editor.getSelectedShapeIds()).toEqual([imageId])
+	})
+})

package/src/test/ui/StylePanel.test.tsx

@@ -1,5 +1,5 @@
-import { act, screen, waitFor } from '@testing-library/react'
-import { DefaultColorStyle, Editor } from '@tldraw/editor'
+import { act, fireEvent, screen, waitFor } from '@testing-library/react'
+import { createShapeId, DefaultColorStyle, Editor, TLArrowShape } from '@tldraw/editor'
 import { Tldraw } from '../../lib/Tldraw'
 import { renderTldrawComponentWithEditor } from '../testutils/renderTldrawComponent'
 
@@ -43,4 +43,35 @@ describe('StylePanel', () => {
 			expect(getBlackColorSwatch().style.color).toBe('rgb(29, 29, 29)')
 		})
 	})
+
+	it('marks an undo step when changing an arrowhead', async () => {
+		const id = createShapeId()
+		act(() => {
+			editor
+				.createShapes<TLArrowShape>([
+					{
+						id,
+						type: 'arrow',
+						x: 100,
+						y: 100,
+						props: { start: { x: 0, y: 0 }, end: { x: 100, y: 100 } },
+					},
+				])
+				.selectNone()
+			editor.markHistoryStoppingPoint('before selecting arrow')
+			editor.select(id)
+		})
+
+		fireEvent.click(await screen.findByTestId('style.arrowheadEnd'))
+		fireEvent.click(await screen.findByTestId('style.arrowheadEnd.none'))
+
+		expect(editor.getShape<TLArrowShape>(id)!.props.arrowheadEnd).toBe('none')
+
+		act(() => {
+			editor.undo()
+		})
+
+		expect(editor.getShape<TLArrowShape>(id)!.props.arrowheadEnd).toBe('arrow')
+		expect(editor.getSelectedShapeIds()).toEqual([id])
+	})
 })

package/src/test/ui/keyboardShortcuts.test.tsx

@@ -314,3 +314,30 @@ describe('shifted number-row shortcuts across keyboard layouts', () => {
 		expect(zoomOut).toHaveBeenCalledTimes(1)
 	})
 })
+
+// Regression test for #10422: frame-selection was the only cmd shortcut without a ctrl twin,
+// so Ctrl+Alt+G did nothing on Windows and Linux even though the shortcuts dialog listed it.
+describe('frame selection shortcut', () => {
+	it.each([
+		['cmd+alt+g (macOS)', { metaKey: true }],
+		['ctrl+alt+g (Windows / Linux)', { ctrlKey: true }],
+	])('wraps the selection in a frame on %s', async (_label, modifier) => {
+		const { editor } = await setupFocusedEditor()
+		const a = createShapeId()
+		const b = createShapeId()
+		act(() => {
+			editor.createShapes([
+				{ id: a, type: 'geo', x: 0, y: 0 },
+				{ id: b, type: 'geo', x: 200, y: 200 },
+			])
+			editor.select(a, b)
+		})
+
+		keydown(editor, { key: 'g', code: 'KeyG', altKey: true, ...modifier })
+
+		const frame = editor.getCurrentPageShapes().find((s) => editor.isShapeOfType(s, 'frame'))
+		expect(frame).toBeDefined()
+		expect(editor.getShape(a)?.parentId).toBe(frame!.id)
+		expect(editor.getShape(b)?.parentId).toBe(frame!.id)
+	})
+})

package/src/test/ui/presenceActivity.test.tsx

@@ -0,0 +1,44 @@
+import { act } from '@testing-library/react'
+import { TLPOINTER_ID } from '@tldraw/editor'
+import { createUserId, InstancePresenceRecordType } from '@tldraw/tlschema'
+import { Tldraw } from '../../lib/Tldraw'
+import { renderTldrawComponentWithEditor } from '../testutils/renderTldrawComponent'
+
+it('counts keydown as presence activity even when shortcuts are disabled', async () => {
+	const { editor } = await renderTldrawComponentWithEditor(
+		(onMount) => <Tldraw onMount={onMount} />,
+		{ waitForPatterns: false }
+	)
+
+	act(() => {
+		// The document key handlers only register while the editor is focused.
+		editor.updateInstanceState({ isFocused: true })
+		editor.store.put([
+			InstancePresenceRecordType.create({
+				id: InstancePresenceRecordType.createId('peer'),
+				userId: createUserId('peer'),
+				userName: 'Peer',
+				currentPageId: editor.getCurrentPageId(),
+			}),
+		])
+	})
+
+	// Focus a text input inside the container, the same situation as editing a
+	// text shape: shortcuts are disabled, so keydown events return before they
+	// reach `Editor.dispatch`.
+	const input = document.createElement('input')
+	editor.getContainer().appendChild(input)
+	input.focus()
+	expect(document.activeElement).toBe(input)
+
+	expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(0)
+
+	act(() => {
+		input.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', code: 'KeyA', bubbles: true }))
+	})
+
+	// The event never reached the editor as a key_down...
+	expect(editor.inputs.keys.has('KeyA')).toBe(false)
+	// ...but it still counts as presence activity.
+	expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBeGreaterThan(0)
+})

package/src/test/ui/unlockAll.test.tsx

@@ -0,0 +1,55 @@
+import { act } from '@testing-library/react'
+import { createShapeId } from '@tldraw/editor'
+import { useEffect } from 'react'
+import { Tldraw } from '../../lib/Tldraw'
+import { TLUiActionsContextType, useActions } from '../../lib/ui/context/actions'
+import { renderTldrawComponentWithEditor } from '../testutils/renderTldrawComponent'
+
+function ActionCapturer({ onCapture }: { onCapture(actions: TLUiActionsContextType): void }) {
+	const actions = useActions()
+	useEffect(() => {
+		onCapture(actions)
+	}, [actions, onCapture])
+	return null
+}
+
+async function setup() {
+	let actions: TLUiActionsContextType | null = null
+	const { editor } = await renderTldrawComponentWithEditor(
+		(onMount) => (
+			<Tldraw onMount={onMount}>
+				<ActionCapturer onCapture={(a) => (actions = a)} />
+			</Tldraw>
+		),
+		{ waitForPatterns: false }
+	)
+	return { editor, unlockAll: actions!['unlock-all'] }
+}
+
+describe('unlock-all action', () => {
+	it('marks a history stopping point so undo does not roll back earlier changes', async () => {
+		const { editor, unlockAll } = await setup()
+
+		const lockedId = createShapeId()
+		const laterId = createShapeId()
+		act(() => {
+			editor.markHistoryStoppingPoint('create locked')
+			editor.createShape({ id: lockedId, type: 'geo', x: 0, y: 0, isLocked: true })
+			editor.markHistoryStoppingPoint('create later')
+			editor.createShape({ id: laterId, type: 'geo', x: 200, y: 0 })
+		})
+
+		act(() => {
+			unlockAll.onSelect('context-menu')
+		})
+		expect(editor.getShape(lockedId)!.isLocked).toBe(false)
+
+		act(() => {
+			editor.undo()
+		})
+
+		// the unlock is undone, but the shape created before it survives
+		expect(editor.getShape(lockedId)!.isLocked).toBe(true)
+		expect(editor.getShape(laterId)).toBeDefined()
+	})
+})

package/src/test/ui-outside-editor.test.tsx

@@ -0,0 +1,74 @@
+import { render } from '@testing-library/react'
+import { ContainerProvider, EditorProvider, useLicenseContext } from '@tldraw/editor'
+import { vi } from 'vitest'
+import { Tldraw } from '../lib/Tldraw'
+import { DefaultToolbar } from '../lib/ui/components/Toolbar/DefaultToolbar'
+import { TldrawUiContextProvider } from '../lib/ui/context/TldrawUiContextProvider'
+import { useCommentingEnabled } from '../lib/ui/hooks/useCommentingEnabled'
+import { renderTldrawComponentWithEditor } from './testutils/renderTldrawComponent'
+
+// Default UI components can be mounted beside <Tldraw /> rather than inside it, wrapped in the
+// providers the caller recreates (container, editor, ui context). The license provider is not
+// among them — it only exists inside <TldrawEditor />.
+describe('default UI mounted outside <Tldraw />', () => {
+	it('renders the default toolbar and resolves license feature flags through the editor', async () => {
+		const { editor } = await renderTldrawComponentWithEditor(
+			(onMount) => <Tldraw onMount={onMount} components={{ Toolbar: null }} />,
+			{ waitForPatterns: true }
+		)
+
+		expect(editor.licenseManager).toBeDefined()
+
+		let commentingEnabled: boolean | undefined
+		function CommentingProbe() {
+			commentingEnabled = useCommentingEnabled()
+			return null
+		}
+
+		const result = render(
+			<ContainerProvider container={editor.getContainer()}>
+				<EditorProvider editor={editor}>
+					<TldrawUiContextProvider>
+						<DefaultToolbar />
+						<CommentingProbe />
+					</TldrawUiContextProvider>
+				</EditorProvider>
+			</ContainerProvider>
+		)
+
+		expect(await result.findByTestId('tools.select')).toBeTruthy()
+		// In tests the environment counts as development, where every feature is licensed — so a
+		// `true` here proves the flag resolved via the editor's license manager, not the
+		// fail-closed `false` of having no license manager at all.
+		expect(commentingEnabled).toBe(true)
+	})
+
+	it('license feature flags fail closed with no editor and no license context', () => {
+		let commentingEnabled: boolean | undefined
+		function CommentingProbe() {
+			commentingEnabled = useCommentingEnabled()
+			return null
+		}
+
+		render(<CommentingProbe />)
+
+		expect(commentingEnabled).toBe(false)
+	})
+
+	it('useLicenseContext throws when there is no license provider and no editor', () => {
+		function LicenseProbe() {
+			useLicenseContext()
+			return null
+		}
+
+		// silence React's error boundary logging for the expected throw
+		const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {})
+		try {
+			expect(() => render(<LicenseProbe />)).toThrow(
+				'useLicenseContext must be used inside of the <Tldraw /> or <TldrawEditor /> components'
+			)
+		} finally {
+			consoleError.mockRestore()
+		}
+	})
+})

package/src/test/viewport-following.test.ts

@@ -1,6 +1,6 @@
+import { InstancePresenceRecordType, TLUserId, createUserId } from '@tldraw/editor'
 import { TestEditor } from './TestEditor'
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 let editor: TestEditor
 
 beforeEach(() => {
@@ -8,6 +8,34 @@ beforeEach(() => {
 })
 
 describe('When following a user', () => {
+	it('keeps following a leader whose own leader is missing', () => {
+		const pageId = editor.getCurrentPageId()
+		const leaderId = createUserId('leader')
+		const leadersLeaderId = createUserId('leaders-leader')
+		const presence = (userId: TLUserId, followingUserId: TLUserId | null) =>
+			InstancePresenceRecordType.create({
+				id: InstancePresenceRecordType.createId(userId),
+				userId,
+				userName: userId,
+				currentPageId: pageId,
+				followingUserId,
+				camera: { x: 0, y: 0, z: 1 },
+				screenBounds: { x: 0, y: 0, w: 1080, h: 720 },
+				lastActivityTimestamp: Date.now(),
+			})
+
+		// the leader follows someone whose presence we don't have
+		editor.store.put([presence(leaderId, leadersLeaderId)])
+		editor.startFollowingUser(leaderId)
+		expect(editor.getInstanceState().followingUserId).toBe(leaderId)
+
+		// the leader's leader shows up, then leaves again
+		editor.store.put([presence(leadersLeaderId, null)])
+		expect(editor.getInstanceState().followingUserId).toBe(leaderId)
+		editor.store.remove([InstancePresenceRecordType.createId(leadersLeaderId)])
+		expect(editor.getInstanceState().followingUserId).toBe(leaderId)
+	})
+
 	it.todo('starts following a user')
 	it.todo('stops following a user')
 	it.todo('stops following a user when the camera changes due to user action')