Don't allow the users to use keyboard shortcuts to select tools in readonly mode. (#1382)

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.
This commit is contained in:
Mitja Bezenšek 2023-05-17 17:08:39 +02:00 committed by GitHub
parent 9101dcfd44
commit 50bae6d4a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 11 deletions

View file

@ -51,7 +51,7 @@ export function useKeyboardShortcuts() {
} }
for (const tool of Object.values(tools)) { 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 if (SKIP_KBDS.includes(tool.id)) continue

View file

@ -74,7 +74,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
label: 'tool.eraser', label: 'tool.eraser',
icon: 'tool-eraser', icon: 'tool-eraser',
kbd: 'e', kbd: 'e',
readonlyOk: true, readonlyOk: false,
onSelect(source) { onSelect(source) {
app.setSelectedTool('eraser') app.setSelectedTool('eraser')
trackEvent('select-tool', { source, id: 'eraser' }) trackEvent('select-tool', { source, id: 'eraser' })
@ -83,7 +83,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
{ {
id: 'draw', id: 'draw',
label: 'tool.draw', label: 'tool.draw',
readonlyOk: true, readonlyOk: false,
icon: 'tool-pencil', icon: 'tool-pencil',
kbd: 'd,b,x', kbd: 'd,b,x',
onSelect(source) { onSelect(source) {
@ -94,7 +94,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
...[...TL_GEO_TYPES].map((id) => ({ ...[...TL_GEO_TYPES].map((id) => ({
id, id,
label: `tool.${id}` as TLTranslationKey, label: `tool.${id}` as TLTranslationKey,
readonlyOk: true, readonlyOk: false,
meta: { meta: {
geo: id, geo: id,
}, },
@ -114,7 +114,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
{ {
id: 'arrow', id: 'arrow',
label: 'tool.arrow', label: 'tool.arrow',
readonlyOk: true, readonlyOk: false,
icon: 'tool-arrow', icon: 'tool-arrow',
kbd: 'a', kbd: 'a',
onSelect(source) { onSelect(source) {
@ -125,7 +125,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
{ {
id: 'line', id: 'line',
label: 'tool.line', label: 'tool.line',
readonlyOk: true, readonlyOk: false,
icon: 'tool-line', icon: 'tool-line',
kbd: 'l', kbd: 'l',
onSelect(source) { onSelect(source) {
@ -136,7 +136,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
{ {
id: 'frame', id: 'frame',
label: 'tool.frame', label: 'tool.frame',
readonlyOk: true, readonlyOk: false,
icon: 'tool-frame', icon: 'tool-frame',
kbd: 'f', kbd: 'f',
onSelect(source) { onSelect(source) {
@ -147,7 +147,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
{ {
id: 'text', id: 'text',
label: 'tool.text', label: 'tool.text',
readonlyOk: true, readonlyOk: false,
icon: 'tool-text', icon: 'tool-text',
kbd: 't', kbd: 't',
onSelect(source) { onSelect(source) {
@ -158,7 +158,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
{ {
id: 'asset', id: 'asset',
label: 'tool.asset', label: 'tool.asset',
readonlyOk: true, readonlyOk: false,
icon: 'tool-media', icon: 'tool-media',
kbd: '$u', kbd: '$u',
onSelect(source) { onSelect(source) {
@ -169,7 +169,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
{ {
id: 'note', id: 'note',
label: 'tool.note', label: 'tool.note',
readonlyOk: true, readonlyOk: false,
icon: 'tool-note', icon: 'tool-note',
kbd: 'n', kbd: 'n',
onSelect(source) { onSelect(source) {
@ -180,7 +180,7 @@ export function ToolsProvider({ overrides, children }: ToolsProviderProps) {
{ {
id: 'embed', id: 'embed',
label: 'tool.embed', label: 'tool.embed',
readonlyOk: true, readonlyOk: false,
icon: 'tool-embed', icon: 'tool-embed',
onSelect(source) { onSelect(source) {
addDialog({ component: EmbedDialog }) addDialog({ component: EmbedDialog })