move some kbds into actions and tools (#1585)

This PR tries to move some remaining kbds into actions and tools, which
allows them to be overwritten in actions or tools if developer wishes
so. It also modifies `getHotkeysStringFromKbd` to support multiple
`kbds` per action and parses them into proper hotkeys.

Right now, these kbds cannot be removed without reimplementing
`useKeyboardShortcuts` entirely.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [x] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

Should not affect existing kbds behavior as it just moves them into
actions or tools.

---------

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

packages/ui/src/lib/hooks/useActions.tsx

@@ -691,7 +691,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 			{
 				id: 'delete',
 				label: 'action.delete',
-				kbd: '⌫',
+				kbd: '⌫,del,backspace',
 				icon: 'trash',
 				readonlyOk: false,
 				onSelect(source) {
@@ -732,7 +732,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 			{
 				id: 'zoom-in',
 				label: 'action.zoom-in',
-				kbd: '$=',
+				kbd: '$=,=',
 				readonlyOk: true,
 				onSelect(source) {
 					trackEvent('zoom-in', { source })
@@ -742,7 +742,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 			{
 				id: 'zoom-out',
 				label: 'action.zoom-out',
-				kbd: '$-',
+				kbd: '$-,-',
 				readonlyOk: true,
 				onSelect(source) {
 					trackEvent('zoom-out', { source })

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

@@ -11,7 +11,6 @@ const SKIP_KBDS = [
 	'copy',
 	'cut',
 	'paste',
-	'delete',
 	// There's also an upload asset action, so we don't want to set the kbd twice
 	'asset',
 ]
@@ -63,29 +62,6 @@ export function useKeyboardShortcuts() {
 			})
 		}
 
-		// Manually add in a few shortcuts that have "extra" kbds
-		// todo: move these into the actions themselves and make the UI only display the first one
-
-		hot('g', () => {
-			if (areShortcutsDisabled() || editor.isReadOnly) return
-			editor.setSelectedTool('geo')
-		})
-
-		hot('del,backspace', () => {
-			if (areShortcutsDisabled()) return
-			actions['delete'].onSelect('kbd')
-		})
-
-		hot('=', () => {
-			if (areShortcutsDisabled()) return
-			actions['zoom-in'].onSelect('kbd')
-		})
-
-		hot('-', () => {
-			if (areShortcutsDisabled()) return
-			actions['zoom-out'].onSelect('kbd')
-		})
-
 		hotkeys.setScope(editor.store.id)
 
 		return () => {
@@ -95,29 +71,46 @@ export function useKeyboardShortcuts() {
 }
 
 function getHotkeysStringFromKbd(kbd: string) {
-	let str = ''
-
-	const chars = kbd.split('')
-
-	if (chars.length === 1) {
-		str = chars[0]
-	} else {
-		if (chars[0] === '!') {
-			str = `shift+${chars[1]}`
-		} else if (chars[0] === '?') {
-			str = `alt+${chars[1]}`
-		} else if (chars[0] === '$') {
-			if (chars[1] === '!') {
-				str = `cmd+shift+${chars[2]},ctrl+shift+${chars[2]}`
-			} else if (chars[1] === '?') {
-				str = `cmd+⌥+${chars[2]},ctrl+alt+${chars[2]}`
+	return getKeys(kbd)
+		.map((kbd) => {
+			let str = ''
+			const chars = kbd.split('')
+			if (chars.length === 1) {
+				str = chars[0]
 			} else {
-				str = `cmd+${chars[1]},ctrl+${chars[1]}`
+				if (chars[0] === '!') {
+					str = `shift+${chars[1]}`
+				} else if (chars[0] === '?') {
+					str = `alt+${chars[1]}`
+				} else if (chars[0] === '$') {
+					if (chars[1] === '!') {
+						str = `cmd+shift+${chars[2]},ctrl+shift+${chars[2]}`
+					} else if (chars[1] === '?') {
+						str = `cmd+⌥+${chars[2]},ctrl+alt+${chars[2]}`
+					} else {
+						str = `cmd+${chars[1]},ctrl+${chars[1]}`
+					}
+				} else {
+					str = kbd
+				}
 			}
-		} else {
-			str = kbd
-		}
+			return str
+		})
+		.join(',')
+}
+
+// Logic to split kbd string from hotkeys-js util.
+function getKeys(key: string) {
+	if (typeof key !== 'string') key = ''
+	key = key.replace(/\s/g, '')
+	const keys = key.split(',')
+	let index = keys.lastIndexOf('')
+
+	for (; index >= 0; ) {
+		keys[index - 1] += ','
+		keys.splice(index, 1)
+		index = keys.lastIndexOf('')
 	}
 
-	return str
+	return keys
 }