Don't allow g keyboard shortcut in readonly mode, show laser tool i…

…n the toolbar (tldraw#1459)

Disable `g` keyboard shortcut in readonly mode. Show laser tool in
toolbar when in readonly mode.

Resolves [tldraw#1936](tldraw/brivate#1936)
Resolves [tldraw#1935](tldraw/brivate#1935)

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1. Open a readonly room.
2. Press `g` and make sure it doesn't switch to it.
3. Laser tool should be visible in the toolbar in readonly rooms.


### Release Notes

- Disable geo tool shortcut in readonly mode. Show laser on the toolbar.

---------

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

e2e/test/helpers/util.ts

@@ -81,6 +81,7 @@ export async function sleep(ms: number) {
 
 export async function clearClipboard() {
 	return await browser.execute(async () => {
+		if (!(navigator && navigator.clipboard)) return
 		if (navigator.clipboard.write) {
 			await navigator.clipboard.write([
 				new ClipboardItem({

packages/ui/src/lib/components/Toolbar/Toolbar.tsx

@@ -28,6 +28,7 @@ export const Toolbar = function Toolbar() {
 
 	const isReadOnly = useReadonly()
 	const toolbarItems = useToolbarSchema()
+	const laserTool = toolbarItems.find((item) => item.toolItem.id === 'laser')
 
 	const activeToolId = useValue('current tool id', () => app.currentToolId, [app])
 
@@ -142,6 +143,14 @@ export const Toolbar = function Toolbar() {
 								/>
 							)
 						})}
+						{isReadOnly && laserTool && (
+							<ToolbarButton
+								key={laserTool.toolItem.id}
+								item={laserTool.toolItem}
+								title={getTitle(laserTool.toolItem)}
+								isSelected={isActiveToolItem(laserTool.toolItem, activeToolId, geoState)}
+							/>
+						)}
 						{showEditingTools && (
 							<>
 								{/* Draw / Eraser */}

packages/ui/src/lib/hooks/useClipboardEvents.ts

@@ -479,7 +479,9 @@ async function handleClipboardThings(app: App, things: ClipboardThing[], point?:
 const handleNativeOrMenuCopy = (app: App) => {
 	const content = app.getContent()
 	if (!content) {
-		window.navigator.clipboard.writeText('')
+		if (navigator && navigator.clipboard) {
+			navigator.clipboard.writeText('')
+		}
 		return
 	}
 

packages/ui/src/lib/hooks/useCopyAs.ts

@@ -144,5 +144,6 @@ async function getExportedImageBlob(app: App, ids: TLShapeId[], format: 'png' |
 }
 
 async function fallbackWriteTextAsync(getText: () => Promise<string>) {
+	if (!(navigator && navigator.clipboard)) return
 	navigator.clipboard.writeText(await getText())
 }

packages/ui/src/lib/hooks/useKeyboardShortcuts.ts

@@ -66,7 +66,7 @@ export function useKeyboardShortcuts() {
 		// todo: move these into the actions themselves and make the UI only display the first one
 
 		hot('g', () => {
-			if (areShortcutsDisabled()) return
+			if (areShortcutsDisabled() || app.isReadOnly) return
 			app.setSelectedTool('geo')
 		})