Add context menu and pan with middle click

tldraw/packages/react/src/components/AppCanvas.tsx

@@ -33,6 +33,7 @@ export const AppCanvas = observer(function InnerApp<S extends TLReactShape>(
       showRotateHandles={app.showRotateHandles}
       showSelectionDetail={app.showSelectionDetail}
       showContextBar={app.showContextBar}
+      showContextMenu={app.showContextMenu}
       cursor={app.cursors.cursor}
       cursorRotation={app.cursors.rotation}
       selectionRotation={app.selectionRotation}

tldraw/packages/react/src/components/Canvas/Canvas.test.tsx

@@ -22,6 +22,7 @@ describe('Canvas', () => {
           showRotateHandles={app.showRotateHandles}
           showSelectionDetail={app.showSelectionDetail}
           showContextBar={app.showContextBar}
+          showContextMenu={app.showContextMenu}
         />
       )
     }

tldraw/packages/react/src/components/Canvas/Canvas.tsx

@@ -54,6 +54,7 @@ export interface TLCanvasProps<S extends TLReactShape> {
   showResizeHandles: boolean
   showRotateHandles: boolean
   showContextBar: boolean
+  showContextMenu: boolean
   showSelectionDetail: boolean
   showSelectionRotation: boolean
   children: React.ReactNode
@@ -82,6 +83,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
   showRotateHandles = true,
   showSelectionDetail = true,
   showContextBar = true,
+  showContextMenu = true,
   showGrid = true,
   gridSize = 8,
   onEditingEnd = NOOP,

tldraw/packages/react/src/components/Renderer/Renderer.test.tsx

@@ -25,6 +25,7 @@ describe('HTMLLayer', () => {
           showRotateHandles={app.showRotateHandles}
           showSelectionDetail={app.showSelectionDetail}
           showContextBar={app.showContextBar}
+          showContextMenu={app.showContextBar}
         />
       )
     }