From 50bae6d4a129cb14da7323aeef91415dd3bc3295 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Wed, 17 May 2023 17:08:39 +0200
Subject: [PATCH] Don't allow the users to use keyboard shortcuts to select
 tools in readonly mode. (#1382)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Keyboard shortcuts for selecting tools still worked in readonly mode.
This now disables them - except for select, hand, and zoom tool.

### Change Type

- [x] `patch` — Bug Fix

### Test Plan

1.  Create a readonly room.
2. Press keyboard shortcuts for tools and make sure we don't transition
to them (tools toolbar should always show either select or hand tool as
active).
3. Also make sure the keyboard shortcuts still work in non readonly
rooms.

- [ ] Unit Tests
- [ ] Webdriver tests

### Release Notes

- Disable keyboard shortcut events for tools in readonly mode. We only
allow the select, hand tools, and zoom tool.
---
 .../ui/src/lib/hooks/useKeyboardShortcuts.ts  |  2 +-
 packages/ui/src/lib/hooks/useTools.tsx        | 20 +++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/ui/src/lib/hooks/useKeyboardShortcuts.ts b/packages/ui/src/lib/hooks/useKeyboardShortcuts.ts
index 0b0a0a507..8bfcf4618 100644
--- a/packages/ui/src/lib/hooks/useKeyboardShortcuts.ts
+++ b/packages/ui/src/lib/hooks/useKeyboardShortcuts.ts
@@ -51,7 +51,7 @@ export function useKeyboardShortcuts() {
 		}
 
 		for (const tool of Object.values(tools)) {
-			if (!tool.kbd) continue
+			if (!tool.kbd || (!tool.readonlyOk && app.isReadOnly)) continue
 
 			if (SKIP_KBDS.includes(tool.id)) continue
 
diff --git a/packages/ui/src/lib/hooks/useTools.tsx b/packages/ui/src/lib/hooks/useTools.tsx
index 1cddb9b03..f399cb33f 100644
--- a/packages/ui/src/lib/hooks/useTools.tsx
+++ b/packages/ui/src/lib/hooks/useTools.tsx
@@ -74,7 +74,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 				label: 'tool.eraser',
 				icon: 'tool-eraser',
 				kbd: 'e',
-				readonlyOk: true,
+				readonlyOk: false,
 				onSelect(source) {
 					app.setSelectedTool('eraser')
 					trackEvent('select-tool', { source, id: 'eraser' })
@@ -83,7 +83,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			{
 				id: 'draw',
 				label: 'tool.draw',
-				readonlyOk: true,
+				readonlyOk: false,
 				icon: 'tool-pencil',
 				kbd: 'd,b,x',
 				onSelect(source) {
@@ -94,7 +94,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			...[...TL_GEO_TYPES].map((id) => ({
 				id,
 				label: `tool.${id}` as TLTranslationKey,
-				readonlyOk: true,
+				readonlyOk: false,
 				meta: {
 					geo: id,
 				},
@@ -114,7 +114,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			{
 				id: 'arrow',
 				label: 'tool.arrow',
-				readonlyOk: true,
+				readonlyOk: false,
 				icon: 'tool-arrow',
 				kbd: 'a',
 				onSelect(source) {
@@ -125,7 +125,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			{
 				id: 'line',
 				label: 'tool.line',
-				readonlyOk: true,
+				readonlyOk: false,
 				icon: 'tool-line',
 				kbd: 'l',
 				onSelect(source) {
@@ -136,7 +136,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			{
 				id: 'frame',
 				label: 'tool.frame',
-				readonlyOk: true,
+				readonlyOk: false,
 				icon: 'tool-frame',
 				kbd: 'f',
 				onSelect(source) {
@@ -147,7 +147,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			{
 				id: 'text',
 				label: 'tool.text',
-				readonlyOk: true,
+				readonlyOk: false,
 				icon: 'tool-text',
 				kbd: 't',
 				onSelect(source) {
@@ -158,7 +158,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			{
 				id: 'asset',
 				label: 'tool.asset',
-				readonlyOk: true,
+				readonlyOk: false,
 				icon: 'tool-media',
 				kbd: '$u',
 				onSelect(source) {
@@ -169,7 +169,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			{
 				id: 'note',
 				label: 'tool.note',
-				readonlyOk: true,
+				readonlyOk: false,
 				icon: 'tool-note',
 				kbd: 'n',
 				onSelect(source) {
@@ -180,7 +180,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
 			{
 				id: 'embed',
 				label: 'tool.embed',
-				readonlyOk: true,
+				readonlyOk: false,
 				icon: 'tool-embed',
 				onSelect(source) {
 					addDialog({ component: EmbedDialog })