feat: shortcuts configuration (#228)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/client/logic/shortcuts.ts

@@ -1,6 +1,8 @@
 import { Fn, not, and, onKeyStroke, KeyFilter } from '@vueuse/core'
 import { watch } from 'vue'
+import type { ShortcutOptions } from '@slidev/types'
 import { fullscreen, magicKeys, shortcutsEnabled, isInputting, toggleOverview, showGotoDialog, showOverview, isOnFocus } from '../state'
+import setupShortcuts from '../setup/shortcuts'
 import { toggleDark } from './dark'
 import { next, nextSlide, prev, prevSlide } from './nav'
 
@@ -34,19 +36,32 @@ export function strokeShortcut(key: KeyFilter, fn: Fn) {
 }
 
 export function registerShortcuts() {
-  // global shortcuts
-  shortcut('space', next, true)
-  shortcut('right', next, true)
-  shortcut('left', prev, true)
-  shortcut('pageDown', next, true)
-  shortcut('pageUp', prev, true)
-  shortcut('up', () => prevSlide(false), true)
-  shortcut('down', nextSlide, true)
-  shortcut('shift_left', () => prevSlide(false), true)
-  shortcut('shift_right', nextSlide, true)
-  shortcut('d', toggleDark)
+  const customShortcuts = setupShortcuts()
+
+  const shortcuts = new Map<string, ShortcutOptions>(
+    [
+      { key: 'space', fn: next, autoRepeat: true },
+      { key: 'right', fn: next, autoRepeat: true },
+      { key: 'left', fn: prev, autoRepeat: true },
+      { key: 'pageDown', fn: next, autoRepeat: true },
+      { key: 'pageUp', fn: prev, autoRepeat: true },
+      { key: 'up', fn: () => prevSlide(false), autoRepeat: true },
+      { key: 'down', fn: nextSlide, autoRepeat: true },
+      { key: 'shift_left', fn: () => prevSlide(false), autoRepeat: true },
+      { key: 'shift_right', fn: nextSlide, autoRepeat: true },
+      { key: 'd', fn: toggleDark },
+      { key: 'o', fn: toggleOverview },
+      { key: 'escape', fn: () => showOverview.value = false },
+      { key: 'g', fn: () => showGotoDialog.value = !showGotoDialog.value },
+      ...customShortcuts,
+    ]
+      .map((options: ShortcutOptions) => [options.key, options]),
+  )
+
+  shortcuts.forEach((options) => {
+    if (options.fn)
+      shortcut(options.key, options.fn, options.autoRepeat)
+  })
+
   strokeShortcut('f', () => fullscreen.toggle())
-  shortcut('o', toggleOverview)
-  shortcut('escape', () => showOverview.value = false)
-  shortcut('g', () => showGotoDialog.value = !showGotoDialog.value)
 }

packages/client/setup/shortcuts.ts

@@ -0,0 +1,29 @@
+/* __imports__ */
+
+import { ShortcutOptions, NavOperations } from '@slidev/types'
+import { next, prev, nextSlide, prevSlide, downloadPDF } from '../logic/nav'
+import { toggleDark } from '../logic/dark'
+import { toggleOverview, showGotoDialog, showOverview } from '../state'
+
+export default function setupShortcuts() {
+  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const injection_arg: NavOperations = {
+    next,
+    prev,
+    nextSlide,
+    prevSlide,
+    downloadPDF,
+    toggleDark,
+    toggleOverview,
+    escapeOverview: () => showOverview.value = false,
+    showGotoDialog: () => showGotoDialog.value = !showGotoDialog.value,
+  }
+
+  // eslint-disable-next-line prefer-const
+  let injection_return: Array<ShortcutOptions> = []
+
+  /* __injections__ */
+
+  return injection_return
+}

packages/types/src/setups.ts

@@ -27,6 +27,24 @@ export interface ShikiOptions {
 
 export type MermaidOptions = (typeof mermaid.initialize) extends (a: infer A) => any ? A : never
 
+export interface NavOperations {
+  next: () => void
+  prev: () => Promise<void>
+  nextSlide: () => void
+  prevSlide: () => Promise<void>
+  downloadPDF: () => Promise<void>
+  toggleDark: () => void
+  toggleOverview: () => void
+  escapeOverview: () => void
+  showGotoDialog: () => void
+}
+
+export interface ShortcutOptions {
+  key: string
+  fn?: () => void
+  autoRepeat?: boolean
+}
+
 // node side
 export type ShikiSetup = (shiki: typeof Shiki) => Awaitable<ShikiOptions | undefined>
 export type KatexSetup = () => Awaitable<Partial<KatexOptions> | undefined>
@@ -36,6 +54,7 @@ export type WindiSetup = () => Awaitable<Partial<WindiCssOptions> | undefined>
 export type MonacoSetup = (m: typeof monaco) => Awaitable<void>
 export type AppSetup = (context: AppContext) => Awaitable<void>
 export type MermaidSetup = () => Partial<MermaidOptions> | undefined
+export type ShortcutsSetup = (nav: NavOperations) => Array<ShortcutOptions>
 
 export function defineShikiSetup(fn: ShikiSetup) {
   return fn
@@ -60,3 +79,7 @@ export function defineMermaidSetup(fn: MermaidSetup) {
 export function defineKatexSetup(fn: KatexSetup) {
   return fn
 }
+
+export function defineShortcutsSetup(fn: ShortcutsSetup) {
+  return fn
+}