Fix infinite cursor chat issue by partially reverting "reactive context menu overrides (#2697)" (#2775)

When we made context menu overrides, we introduced two new issues:
1. the context menu on the main app now updates much more frequently
than it should
2. every time it updates, it adds a new 'cursor chat' entry to the menu

This reverts the part of that change that made the context menu
reactive. This is the quick fix for us to hotfix, but i'm going to
follow this up by restoring that functionality without those issues.

### Change Type

- [x] `patch` — Bug fix


[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

packages/tldraw/src/lib/ui/hooks/useContextMenuSchema.tsx

@@ -87,8 +87,8 @@ export const TLUiContextMenuSchemaProvider = track(function TLUiContextMenuSchem
 		editor.getSortedChildIdsForParent(onlySelectedShape).length > 0
 	const isShapeLocked = onlySelectedShape && editor.isShapeOrAncestorLocked(onlySelectedShape)
 
-	const contextTLUiMenuSchemaWithoutOverrides = useMemo<TLUiMenuSchema>(() => {
+	const contextTLUiMenuSchema = useMemo<TLUiMenuSchema>(() => {
-		return compactMenuItems([
+		const contextTLUiMenuSchemaWithoutOverrides: TLUiMenuSchema = compactMenuItems([
 			menuGroup(
 				'selection',
 				showAutoSizeToggle && menuItem(actions['toggle-auto-size']),
@@ -204,6 +204,17 @@ export const TLUiContextMenuSchemaProvider = track(function TLUiContextMenuSchem
 				),
 			oneSelected && !isShapeLocked && menuGroup('delete-group', menuItem(actions['delete'])),
 		])
+
+		if (!overrides) return contextTLUiMenuSchemaWithoutOverrides
+		return overrides(editor, contextTLUiMenuSchemaWithoutOverrides, {
+			actions,
+			oneSelected,
+			twoSelected,
+			threeSelected,
+			showAutoSizeToggle,
+			showUngroup: allowUngroup,
+			onlyFlippableShapeSelected,
+		})
 	}, [
 		actions,
 		oneSelected,
@@ -223,36 +234,10 @@ export const TLUiContextMenuSchemaProvider = track(function TLUiContextMenuSchem
 		// oneEmbeddableBookmarkSelected,
 		isTransparentBg,
 		isShapeLocked,
+		editor,
+		overrides,
 	])
 
-	const contextTLUiMenuSchema = useValue(
-		'overrides',
-		() => {
-			if (!overrides) return contextTLUiMenuSchemaWithoutOverrides
-			return overrides(editor, contextTLUiMenuSchemaWithoutOverrides, {
-				actions,
-				oneSelected,
-				twoSelected,
-				threeSelected,
-				showAutoSizeToggle,
-				showUngroup: allowUngroup,
-				onlyFlippableShapeSelected,
-			})
-		},
-		[
-			actions,
-			allowUngroup,
-			contextTLUiMenuSchemaWithoutOverrides,
-			editor,
-			oneSelected,
-			onlyFlippableShapeSelected,
-			overrides,
-			showAutoSizeToggle,
-			threeSelected,
-			twoSelected,
-		]
-	)
-
 	return (
 		<TLUiContextMenuSchemaContext.Provider value={contextTLUiMenuSchema}>
 			{children}

packages/tldraw/src/test/ui/ContextMenu.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, screen } from '@testing-library/react'
-import { createShapeId, noop } from '@tldraw/editor'
+import { atom, createShapeId, noop } from '@tldraw/editor'
 import { act } from 'react-dom/test-utils'
 import { Tldraw } from '../../lib/Tldraw'
 import { TLUiOverrides } from '../../lib/ui/overrides'
@@ -26,11 +26,11 @@ it('opens on right-click', async () => {
 	expect(screen.queryByTestId('context-menu')).toBeNull()
 })
 
-it('updates overrides reactively', async () => {
+it.failing('updates overrides reactively', async () => {
+	const count = atom('count', 1)
 	const overrides: TLUiOverrides = {
 		contextMenu: (editor, schema) => {
-			const items = editor.getSelectedShapeIds().length
+			if (count.get() === 0) return schema
-			if (items === 0) return schema
 			return [
 				...schema,
 				{
@@ -43,7 +43,7 @@ it('updates overrides reactively', async () => {
 						id: 'tester',
 						readonlyOk: true,
 						onSelect: noop,
-						label: `Selected: ${items}`,
+						label: `Count: ${count.get()}`,
 					},
 				},
 			]
@@ -61,14 +61,14 @@ it('updates overrides reactively', async () => {
 	// check that the context menu item was added:
 	await screen.findByTestId('menu-item.tester')
 
-	// It should disappear when we deselect all shapes:
+	// It should disappear when count is 0:
-	await act(() => editor.setSelectedShapes([]))
+	await act(() => count.set(0))
 	expect(screen.queryByTestId('menu-item.tester')).toBeNull()
 
 	// It should update its label when it changes:
-	await act(() => editor.selectAll())
+	await act(() => count.set(1))
 	const item = await screen.findByTestId('menu-item.tester')
-	expect(item.textContent).toBe('Selected: 1')
+	expect(item.textContent).toBe('Count: 1')
-	await act(() => editor.createShape({ id: createShapeId(), type: 'geo' }).selectAll())
+	await act(() => count.set(2))
-	expect(item.textContent).toBe('Selected: 2')
+	expect(item.textContent).toBe('Count: 2')
 })