Fix clicking off the context menu (#2355)

Fixes https://github.com/tldraw/tldraw/issues/2357

This PR fixes not being able to close the context menu by clicking
- your selected shape
- the ui

It seems like the Radix's `modal` setting causes trouble for us. I think
we're better off turning it off.
We now show an indicator on hovered shapes when the context menu. This
is consistent with how our other menus currently work.

![2023-12-19 at 14 19 14 - Cyan
Bovid](https://github.com/tldraw/tldraw/assets/15892272/88b492c2-8f3b-40bc-9dec-744fe72cda3b)

![2023-12-19 at 14 21 36 - Amaranth
Vulture](https://github.com/tldraw/tldraw/assets/15892272/1f19751d-499b-40c3-9b28-9f41a2f27ab2)

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

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

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- Fix not being able to close the context menu by clicking on the UI or
your selected shape.

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

packages/editor/api-report.md

@@ -585,6 +585,7 @@ export class Editor extends EventEmitter<TLEventMap> {
     // @internal (undocumented)
     capturedPointerId: null | number;
     centerOnPoint(point: VecLike, animation?: TLAnimationOptions): this;
+    clearOpenMenus(): this;
     // @internal
     protected _clickManager: ClickManager;
     complete(): this;

packages/editor/api/api.json

@@ -7544,6 +7544,37 @@
               "isAbstract": false,
               "name": "centerOnPoint"
             },
+            {
+              "kind": "Method",
+              "canonicalReference": "@tldraw/editor!Editor#clearOpenMenus:member(1)",
+              "docComment": "/**\n * Clear all open menus.\n *\n * @example\n * ```ts\n * editor.clearOpenMenus()\n * ```\n *\n * @public\n */\n",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "clearOpenMenus(): "
+                },
+                {
+                  "kind": "Content",
+                  "text": "this"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isStatic": false,
+              "returnTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "releaseTag": "Public",
+              "isProtected": false,
+              "overloadIndex": 1,
+              "parameters": [],
+              "isOptional": false,
+              "isAbstract": false,
+              "name": "clearOpenMenus"
+            },
             {
               "kind": "Method",
               "canonicalReference": "@tldraw/editor!Editor#complete:member(1)",

packages/editor/src/lib/editor/Editor.ts

@@ -1309,6 +1309,23 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this
 	}
 
+	/**
+	 * Clear all open menus.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.clearOpenMenus()
+	 * ```
+	 *
+	 * @public
+	 */
+	clearOpenMenus(): this {
+		if (this.getOpenMenus().length) {
+			this.updateInstanceState({ openMenus: [] })
+		}
+		return this
+	}
+
 	/**
 	 * Get whether any menus are open.
 	 *
@@ -8696,6 +8713,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					switch (info.name) {
 						case 'pointer_down': {
+							this.clearOpenMenus()
+
 							this._selectedShapeIdsAtPointerDown = this.getSelectedShapeIds()
 
 							// Firefox bug fix...

packages/tldraw/api/api.json

@@ -15722,7 +15722,7 @@
               "text": "export interface TLUiContextMenuProps "
             }
           ],
-          "fileUrlPath": "packages/tldraw/.tsbuild-api/lib/ui/components/ContextMenu.d.ts",
+          "fileUrlPath": "packages/tldraw/src/lib/ui/components/ContextMenu.tsx",
           "releaseTag": "Public",
           "name": "TLUiContextMenuProps",
           "preserveMemberOrder": false,
@@ -15745,7 +15745,6 @@
                   "text": ";"
                 }
               ],
-              "fileUrlPath": "packages/tldraw/src/lib/ui/components/ContextMenu.tsx",
               "isReadonly": false,
               "isOptional": false,
               "releaseTag": "Public",

packages/tldraw/src/lib/ui/components/ContextMenu.tsx

@@ -65,9 +65,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
 		[editor]
 	)
 
-	const container = useContainer()
+	const [isOpen, handleOpenChange] = useMenuIsOpen('context menu', cb)
-
-	const [_, handleOpenChange] = useMenuIsOpen('context menu', cb)
 
 	// If every item in the menu is readonly, then we don't want to show the menu
 	const isReadonly = useReadonly()
@@ -76,6 +74,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
 		contextTLUiMenuSchema.length === 0 ||
 		(isReadonly && contextTLUiMenuSchema.every((item) => !item.readonlyOk))
 
+	// Todo: remove this dependency on the select tool; not sure how else to say "only show the context menu when we're using a tool that supports it"
 	const selectToolActive = useValue(
 		'isSelectToolActive',
 		() => editor.getCurrentToolId() === 'select',
@@ -85,7 +84,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
 	const disabled = !selectToolActive || noItemsToShow
 
 	return (
-		<_ContextMenu.Root dir="ltr" onOpenChange={handleOpenChange}>
+		<_ContextMenu.Root dir="ltr" onOpenChange={handleOpenChange} modal={false}>
 			<_ContextMenu.Trigger
 				onContextMenu={disabled ? preventDefault : undefined}
 				dir="ltr"
@@ -93,9 +92,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
 			>
 				{children}
 			</_ContextMenu.Trigger>
-			<_ContextMenu.Portal container={container}>
+			{isOpen && <ContextMenuContent />}
-				<ContextMenuContent />
-			</_ContextMenu.Portal>
 		</_ContextMenu.Root>
 	)
 }
@@ -104,6 +101,7 @@ const ContextMenuContent = forwardRef(function ContextMenuContent() {
 	const editor = useEditor()
 	const msg = useTranslation()
 	const menuSchema = useContextMenuSchema()
+
 	const [_, handleSubOpenChange] = useMenuIsOpen('context menu sub')
 
 	const isReadonly = useReadonly()