Ability to customize existing keyboard shortcuts

Feature Request
1

it’s been requested in the past, but addressing things ad hoc for every use case / keyboard language/layout is untenable. Ideally the user should be able to disable or customize their own shortcuts

https://discord.com/channels/857305113936134204/1087809513576484945/1380776015818920036

[BUG] Box doesn't get created from the shortcut B when using different keyboard layout
Shortcut bug on macOS: ⌘Q = ⌘A
2

i asked on social media if any other web apps let you customize keybinding but didn’t hear a single example. I think it’s because web apps (unlike native ones) have extra contraints so preventing the user from making a keybinding that wouldn’t work in a browser, like cmd-q would be really onerous…

1 Like
3

Requested in https://discord.com/channels/857305113936134204/876918592313110608/1468055361931182204

4

proxy requested in https://forum.kinopio.club/t/bug-box-doesnt-get-created-from-the-shortcut-b-when-using-different-keyboard-layout/1757/11

5

i think the mvp way i’d implement this is listing the shortcuts in handleShortcutsOnKeyUp (n, m, t, etc.) and letting them set a different letter key for them (or blank to disable, or revert to default).

then change these to only use either the defualt or custom event.key (remove event.code)

  const key = event.key.toLowerCase()
  const keyCode = event.code // physical key on the keyboard. // dont use this. replace w key or customkey 
  const keyB = key === 'b' || keyCode === 'KeyB'
  const keyL = key === 'l' || keyCode === 'KeyL'
  const keyN = key === 'n' || keyCode === 'KeyN'
  const keyM = key === 'm' || keyCode === 'KeyM'
  const keyT = key === 't' || keyCode === 'KeyT'

  const key = event.key.toLowerCase()
  const keyCode = event.code // physical key on the keyboard
  const keyZ = key === 'z' || keyCode === 'KeyZ'
  const keyA = key === 'a' || keyCode === 'KeyA'
  const keyK = key === 'k' || keyCode === 'KeyK'
  const keyF = key === 'f' || keyCode === 'KeyF'
  const keyG = key === 'g' || keyCode === 'KeyG'
  const keyP = key === 'p' || keyCode === 'KeyP'
  const keyL = key === 'l' || keyCode === 'KeyL'

B, L, N, M , T, Z, A, K, F, G, P, -

6

more implementation notes:

ui would be in keyboard shortcuts dialog. some keys on the right have an edit button. clicking it lets you input 1 uppercase character. check for collisions with other active keys.

possibly move keyB, etc. logic to userStore? so that it can be referenced by dialog.

also remove/replace disabledKeyboardShortcuts

1 Like