fix(tldraw): right-clicking a page item opens its submenu (tldraw#8927)

In order to let users right-click page items in the page menu without
accidentally starting a drag-to-reorder gesture, this PR ignores
non-primary buttons on the page item drag handle and wires the page
item's `onContextMenu` to open the per-item submenu. The open submenu is
tracked through the editor menu manager so it closes together with the
page menu.

### Change type

- [x] `bugfix`

### Test plan

1. Open the page menu with multiple pages.
2. Right-click on a page item.
3. Confirm the page item's submenu opens (duplicate, move up/down,
delete, etc.).
4. Confirm the pages are not reordered as a result of the right-click.
5. Close the page menu and confirm any open per-item submenu is also
closed.

- [x] End to end tests

### Release notes

- Fixed a bug where right-clicking a page item in the page menu could
start a drag-to-reorder gesture instead of opening the item's submenu.

### API changes
- none

### Code changes

| Section   | LOC change |
| --------- | ---------- |
| Core code | +40 / -1   |
| Tests     | +18 / -0   |

Author: steveruizok

apps/examples/e2e/tests/test-page-menu.spec.ts

@@ -456,6 +456,24 @@ test.describe('page menu', () => {
 	})
 
 	test.describe('You can use the page menu', () => {
+		test('Right clicking a page item opens its submenu without reordering pages', async ({
+			page,
+			pageMenu,
+		}) => {
+			test.skip(isMobileProject(), 'Mobile emulation does not simulate right-click')
+
+			await createPagesForReordering(page)
+			await pageMenu.pagemenuButton.click()
+			await expect(pageMenu.pageItems).toHaveCount(3)
+
+			const firstPageItem = await pageMenu.getPageItem(0)
+			await firstPageItem.locator('.tlui-page-menu__item__button').click({ button: 'right' })
+
+			await expect(page.getByRole('menuitem', { name: /duplicate/i })).toBeVisible()
+			await expect(firstPageItem).toHaveAttribute('data-dragging', 'false')
+			expect(await getPageNames(page)).toEqual(['Page 1', 'Page 2', 'Page 3'])
+		})
+
 		test('You can duplicate a page from the page menu', async ({ page, pageMenu }) => {
 			const { pagemenuButton, pageItems } = pageMenu
 

packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -74,7 +74,28 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 	// The id of the page currently being renamed inline, if any.
 	const [editingPageId, setEditingPageId] = useState<TLPageId | null>(null)
 
-	const handleOpenChange = useCallback(() => setEditingPageId(null), [])
+	const closePageItemSubmenus = useCallback(
+		(exceptIndex?: number) => {
+			const contextSuffix = `-${editor.contextId}`
+			for (const menuId of editor.menus.getOpenMenus()) {
+				const id = menuId.endsWith(contextSuffix) ? menuId.slice(0, -contextSuffix.length) : menuId
+				if (!id.startsWith('page item submenu ')) continue
+				if (exceptIndex !== undefined && id === `page item submenu ${exceptIndex}`) continue
+				editor.menus.deleteOpenMenu(id)
+			}
+		},
+		[editor]
+	)
+
+	const handleOpenChange = useCallback(
+		(isOpen: boolean) => {
+			setEditingPageId(null)
+			if (!isOpen) {
+				closePageItemSubmenus()
+			}
+		},
+		[closePageItemSubmenus]
+	)
 
 	const [isOpen, onOpenChange] = useMenuIsOpen('page-menu', handleOpenChange)
 
@@ -342,6 +363,8 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 	}, [editor, tickAutoScrollDuringDrag])
 
 	const handlePointerDown = useCallback((e: React.PointerEvent<HTMLButtonElement>) => {
+		if (e.button !== 0) return
+
 		const { clientY, currentTarget } = e
 		const { id, index } = currentTarget.dataset
 		if (!id || index === undefined) return
@@ -400,6 +423,17 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 		[editor, trackEvent]
 	)
 
+	const handleItemContextMenu = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>, index: number) => {
+			e.preventDefault()
+			e.stopPropagation()
+
+			closePageItemSubmenus(index)
+			editor.menus.addOpenMenu(`page item submenu ${index}`)
+		},
+		[closePageItemSubmenus, editor]
+	)
+
 	const handlePointerCancel = useCallback((e: React.PointerEvent<HTMLButtonElement>) => {
 		const mut = rMutables.current
 		releasePointerCapture(e.currentTarget, e)
@@ -533,6 +567,11 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 										data-dragging={isDragging}
 										data-editing={isRenamingThisPage}
 										className="tlui-page-menu__item"
+										onContextMenu={
+											!isReadonlyMode && !isRenamingThisPage
+												? (e) => handleItemContextMenu(e, index)
+												: undefined
+										}
 										style={{
 											zIndex: isDragging
 												? pages.length + 2

packages/tldraw/src/lib/ui/components/PageMenu/PageItemSubmenu.tsx

@@ -64,7 +64,7 @@ export const PageItemSubmenu = track(function PageItemSubmenu({
 					<TldrawUiButtonIcon icon="dots-vertical" small />
 				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
-			<TldrawUiDropdownMenuContent alignOffset={0} side="right" sideOffset={-4}>
+			<TldrawUiDropdownMenuContent side="bottom" align="start" alignOffset={0} sideOffset={0}>
 				<TldrawUiMenuContextProvider type="menu" sourceId="page-menu">
 					<TldrawUiMenuGroup id="modify">
 						{onRename && (