Positional keyboard shortcuts for toolbar (#2409)

Adds positional keyboard shortcuts to the toolbar. Use the 1, 2, 3, 4
etc keys to activate the corresponding tool on the toolbar.

![Kapture 2024-01-05 at 11 52
30](https://github.com/tldraw/tldraw/assets/1489520/82a21436-0f04-465d-9351-3f2768f61f55)


### Change Type
- [x] `minor` — New feature

### Test Plan

1. Use the number keys to activate toolbar items.
- [x] End to end tests

### Release Notes

- You can now use the number keys to select the corresponding tool from
the toolbar

---------

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

apps/examples/e2e/tests/test-kbds.spec.ts

@@ -13,7 +13,7 @@ test.describe('Keyboard Shortcuts', () => {
 		await setupPage(page)
 	})
 
-	test('tools', async () => {
+	test('tools', async ({ isMobile }) => {
 		const geoToolKds = [
 			['r', 'rectangle'],
 			['o', 'ellipse'],
@@ -63,6 +63,35 @@ test.describe('Keyboard Shortcuts', () => {
 				data: { id: tool, source: 'kbd' },
 			})
 		}
+
+		// make sure that the first dropdown item is rectangle
+		await page.keyboard.press('r')
+
+		const positionalToolKbds = [
+			['1', 'select'],
+			['2', 'hand'],
+			['3', 'draw'],
+			['4', 'eraser'],
+			['5', 'arrow'],
+			['6', 'text'],
+		]
+
+		if (isMobile) {
+			// on mobile, the last item (first from the dropdown) is 7
+			positionalToolKbds.push(['7', 'geo-rectangle'])
+		} else {
+			// on desktop, the last item (first from the dropdown) is 9. 8 is the image tool which
+			// we skip here because it opens a browser dialog
+			positionalToolKbds.push(['9', 'geo-rectangle'])
+		}
+		for (const [key, tool] of positionalToolKbds) {
+			await page.keyboard.press('v') // set back to select
+			await page.keyboard.press(key)
+			expect(await page.evaluate(() => __tldraw_ui_event)).toMatchObject({
+				name: 'select-tool',
+				data: { id: tool, source: 'kbd' },
+			})
+		}
 	})
 })