From 613b2bf192d2008707b0f1836a827c67e6a0527c Mon Sep 17 00:00:00 2001
From: purocean <purocean@gmail.com>
Date: Sat, 5 Aug 2023 15:40:58 +0800
Subject: [PATCH] feat(keyboard-shortcuts): support custom editor keybindings

---
 src/renderer/components/KeyboardShortcuts.vue |  91 +++++--
 src/renderer/core/command.ts                  |   1 -
 src/renderer/plugins/custom-keybindings.ts    | 255 ++++++++++++++++++
 src/share/i18n/languages/en.ts                |   2 +
 src/share/i18n/languages/zh-CN.ts             |   2 +
 5 files changed, 335 insertions(+), 16 deletions(-)

diff --git a/src/renderer/components/KeyboardShortcuts.vue b/src/renderer/components/KeyboardShortcuts.vue
index 62ef084f7c..c56307784f 100644
--- a/src/renderer/components/KeyboardShortcuts.vue
+++ b/src/renderer/components/KeyboardShortcuts.vue
@@ -4,8 +4,9 @@
       <div class="title-bar">
         <h3>{{ $t('keyboard-shortcuts.keyboard-shortcuts') }}</h3>
         <group-tabs :tabs="tabs" v-model="tab" />
+        <input v-model="filterStr" :placeholder="$t('keyboard-shortcuts.search')" />
       </div>
-      <div v-if="tab !== 'editor'" class="list">
+      <div class="list">
         <table cellspacing="0">
           <thead>
             <tr>
@@ -15,7 +16,7 @@
               <th></th>
             </tr>
           </thead>
-          <tbody>
+          <tbody v-if="list.length">
             <tr v-for="(item, i) in list" :key="item.command" class="item">
               <td><code>{{ i + 1 }}</code></td>
               <td :class="{unavailable: item.unavailable}">
@@ -40,11 +41,15 @@
               </td>
             </tr>
           </tbody>
+          <tbody v-else>
+            <tr>
+              <td colspan="4" style="text-align: center; color: var(--g-color-50)">
+                {{ $t('keyboard-shortcuts.empty') }}
+              </td>
+            </tr>
+          </tbody>
         </table>
       </div>
-      <div v-else class="list" style="text-align: center;">
-        Coming soon...
-      </div>
       <div class="action">
         <button class="btn primary tr" @click="hide">{{$t('close')}}</button>
       </div>
@@ -64,19 +69,20 @@
 
 <script lang="ts" setup>
 import { keyBy } from 'lodash-es'
-import { computed, h, onUnmounted, ref, shallowRef, watchEffect } from 'vue'
+import { computed, h, onUnmounted, ref, shallowRef, watch, watchEffect } from 'vue'
+import { getDefaultApplicationAccelerators } from '@share/misc'
 import { registerAction, removeAction } from '@fe/core/action'
 import { Alt, Cmd, Ctrl, Meta, Shift, Win, disableShortcuts, enableShortcuts, getKeyLabel, getKeysLabel, getRawCommands } from '@fe/core/command'
 import { isMacOS, isOtherOS, isWindows } from '@fe/support/env'
 import { useModal } from '@fe/support/ui/modal'
 import { getSetting, setSetting } from '@fe/services/setting'
 import { getCurrentLanguage, useI18n } from '@fe/services/i18n'
+import { getEditor } from '@fe/services/editor'
 import { getLogger } from '@fe/utils'
 import type { Command, Keybinding } from '@fe/types'
 
 import XMask from '@fe/components/Mask.vue'
 import GroupTabs from '@fe/components/GroupTabs.vue'
-import { getDefaultApplicationAccelerators } from '@share/misc'
 
 type Item = {
   command: string,
@@ -102,6 +108,7 @@ const logger = getLogger('keyboard-shortcuts')
 const tab = ref<Tab>('workbench')
 const managerVisible = ref(false)
 const currentCommand = ref('')
+const filterStr = ref('')
 const shortcuts = shallowRef<string[] | null>(null)
 const commands = shallowRef<XCommand[]>([])
 const keybindings = shallowRef<Keybinding[]>([])
@@ -141,7 +148,20 @@ const list = computed<Item[]>(() => {
       modified: true,
       unavailable: true,
     }
-  }))
+  })).filter(x => {
+    const str = filterStr.value.trim().toLowerCase()
+    if (!str) {
+      return true
+    }
+
+    // show all modified commands
+    if (str === '*') {
+      return x.modified
+    }
+
+    return x.command.toLowerCase().includes(filterStr.value) ||
+      (x.description || '').toLowerCase().includes(filterStr.value)
+  })
 })
 
 function getConflictCommands (keys: (number | string)[]) {
@@ -160,22 +180,54 @@ const conflictCommands = computed(() => {
 })
 
 function refresh () {
-  commands.value = [
-    ...getRawCommands().filter(x => x.configurable).map(x => ({ ...x, type: 'workbench' as Tab })),
-    ...getDefaultApplicationAccelerators(isMacOS ? 'darwin' : isWindows ? 'win32' : 'linux', getCurrentLanguage())
+  if (tab.value === 'workbench') {
+    commands.value = getRawCommands().filter(x => x.configurable).map(x => ({ ...x, type: 'workbench' as Tab }))
+  } else if (tab.value === 'editor') {
+    const editor: any = getEditor()
+    commands.value = editor.getActions().map((x: any) => {
+      const keybinding = editor._standaloneKeybindingService.lookupKeybinding(x.id)
+
+      let keys: string[] | null = null
+
+      if (keybinding) {
+        const electronAccelerator = keybinding.getElectronAccelerator()
+        const userSettingsLabel = keybinding.getUserSettingsLabel()
+        if (electronAccelerator) {
+          keys = electronAccelerator.split('+')
+        } else {
+          keys = userSettingsLabel?.split(' ')
+        }
+      }
+
+      return {
+        type: 'editor' as Tab,
+        id: x.id,
+        description: x.label,
+        keys,
+        handler: null,
+      }
+    })
+  } else if (tab.value === 'application') {
+    commands.value = getDefaultApplicationAccelerators(isMacOS ? 'darwin' : isWindows ? 'win32' : 'linux', getCurrentLanguage())
       .map(x => ({
         type: 'application' as Tab,
         id: x.command,
         keys: x.accelerator.split('+'),
         description: x.description,
         handler: null,
-      })),
-  ]
+      }))
+  }
 
   keybindings.value = getSetting('keybindings', [])
 }
 
+watch(tab, refresh)
+watch(tab, () => {
+  filterStr.value = ''
+})
+
 function show () {
+  filterStr.value = ''
   managerVisible.value = true
   refresh()
 }
@@ -259,8 +311,6 @@ function recordKey (e: KeyboardEvent) {
       val = val.slice(3)
     } else if (val.startsWith('Digit')) {
       val = val.slice(5)
-    } else if (val.startsWith('Numpad')) {
-      val = val.slice(6)
     } else if (val.startsWith('Arrow')) {
       val = val.slice(5)
     } else if (val === 'Equal') { // avoid conflict with '+'
@@ -332,6 +382,13 @@ onUnmounted(() => {
     left: 0;
   }
 
+  input {
+    position: absolute;
+    right: 0;
+    max-width: 200px;
+    font-size: 14px !important;
+  }
+
   .tabs {
     display: inline-flex;
     margin-bottom: 0;
@@ -417,6 +474,10 @@ table {
     font-size: 14px;
   }
 
+  .desc {
+    word-break: break-all;
+  }
+
   a {
     text-decoration: none;
     margin-right: 8px;
diff --git a/src/renderer/core/command.ts b/src/renderer/core/command.ts
index 29d28ca37b..a34925f73c 100644
--- a/src/renderer/core/command.ts
+++ b/src/renderer/core/command.ts
@@ -202,7 +202,6 @@ export function matchKeys (e: KeyboardEvent | MouseEvent, keys: (string | number
             iKey !== eCode &&
             `KEY${iKey}` !== eCode &&
             `DIGIT${iKey}` !== eCode &&
-            `NUMPAD${iKey}` !== eCode &&
             `ARROW${iKey}` !== eCode
           ) return false
         } else {
diff --git a/src/renderer/plugins/custom-keybindings.ts b/src/renderer/plugins/custom-keybindings.ts
index 4e5b5f478f..5fec508c0c 100644
--- a/src/renderer/plugins/custom-keybindings.ts
+++ b/src/renderer/plugins/custom-keybindings.ts
@@ -1,8 +1,260 @@
+/* eslint-disable quote-props */
 import type { Plugin } from '@fe/context'
+import type * as Monaco from 'monaco-editor'
+import { getLogger } from '@fe/utils'
+import { isMacOS } from '@fe/support/env'
+
+const logger = getLogger('plugin:custom-keybindings')
+
+let cachedMap: Record<string, number>
+
+function getCode (monaco: typeof Monaco, key: string): number {
+  if (!cachedMap) {
+    cachedMap = {
+      'ctrl': isMacOS ? monaco.KeyMod.WinCtrl : monaco.KeyMod.CtrlCmd,
+      'control': isMacOS ? monaco.KeyMod.WinCtrl : monaco.KeyMod.CtrlCmd,
+      'shift': monaco.KeyMod.Shift,
+      'alt': monaco.KeyMod.Alt,
+      'meta': isMacOS ? monaco.KeyMod.CtrlCmd : monaco.KeyMod.WinCtrl,
+      'cmd': isMacOS ? monaco.KeyMod.CtrlCmd : monaco.KeyMod.WinCtrl,
+      'command': isMacOS ? monaco.KeyMod.CtrlCmd : monaco.KeyMod.WinCtrl,
+      'win': isMacOS ? monaco.KeyMod.CtrlCmd : monaco.KeyMod.WinCtrl,
+      'backspace': monaco.KeyCode.Backspace,
+      'tab': monaco.KeyCode.Tab,
+      'enter': monaco.KeyCode.Enter,
+      'pause': monaco.KeyCode.PauseBreak,
+      'capslock': monaco.KeyCode.CapsLock,
+      'esc': monaco.KeyCode.Escape,
+      'space': monaco.KeyCode.Space,
+      'pageup': monaco.KeyCode.PageUp,
+      'pagedown': monaco.KeyCode.PageDown,
+      'end': monaco.KeyCode.End,
+      'home': monaco.KeyCode.Home,
+      'left': monaco.KeyCode.LeftArrow,
+      'up': monaco.KeyCode.UpArrow,
+      'right': monaco.KeyCode.RightArrow,
+      'down': monaco.KeyCode.DownArrow,
+      'arrowleft': monaco.KeyCode.LeftArrow,
+      'arrowup': monaco.KeyCode.UpArrow,
+      'arrowright': monaco.KeyCode.RightArrow,
+      'arrowdown': monaco.KeyCode.DownArrow,
+      'insert': monaco.KeyCode.Insert,
+      'delete': monaco.KeyCode.Delete,
+      '0': monaco.KeyCode.Digit0,
+      '1': monaco.KeyCode.Digit1,
+      '2': monaco.KeyCode.Digit2,
+      '3': monaco.KeyCode.Digit3,
+      '4': monaco.KeyCode.Digit4,
+      '5': monaco.KeyCode.Digit5,
+      '6': monaco.KeyCode.Digit6,
+      '7': monaco.KeyCode.Digit7,
+      '8': monaco.KeyCode.Digit8,
+      '9': monaco.KeyCode.Digit9,
+      'a': monaco.KeyCode.KeyA,
+      'b': monaco.KeyCode.KeyB,
+      'c': monaco.KeyCode.KeyC,
+      'd': monaco.KeyCode.KeyD,
+      'e': monaco.KeyCode.KeyE,
+      'f': monaco.KeyCode.KeyF,
+      'g': monaco.KeyCode.KeyG,
+      'h': monaco.KeyCode.KeyH,
+      'i': monaco.KeyCode.KeyI,
+      'j': monaco.KeyCode.KeyJ,
+      'k': monaco.KeyCode.KeyK,
+      'l': monaco.KeyCode.KeyL,
+      'm': monaco.KeyCode.KeyM,
+      'n': monaco.KeyCode.KeyN,
+      'o': monaco.KeyCode.KeyO,
+      'p': monaco.KeyCode.KeyP,
+      'q': monaco.KeyCode.KeyQ,
+      'r': monaco.KeyCode.KeyR,
+      's': monaco.KeyCode.KeyS,
+      't': monaco.KeyCode.KeyT,
+      'u': monaco.KeyCode.KeyU,
+      'v': monaco.KeyCode.KeyV,
+      'w': monaco.KeyCode.KeyW,
+      'x': monaco.KeyCode.KeyX,
+      'y': monaco.KeyCode.KeyY,
+      'z': monaco.KeyCode.KeyZ,
+      'contextmenu': monaco.KeyCode.ContextMenu,
+      'f1': monaco.KeyCode.F1,
+      'f2': monaco.KeyCode.F2,
+      'f3': monaco.KeyCode.F3,
+      'f4': monaco.KeyCode.F4,
+      'f5': monaco.KeyCode.F5,
+      'f6': monaco.KeyCode.F6,
+      'f7': monaco.KeyCode.F7,
+      'f8': monaco.KeyCode.F8,
+      'f9': monaco.KeyCode.F9,
+      'f10': monaco.KeyCode.F10,
+      'f11': monaco.KeyCode.F11,
+      'f12': monaco.KeyCode.F12,
+      'f13': monaco.KeyCode.F13,
+      'f14': monaco.KeyCode.F14,
+      'f15': monaco.KeyCode.F15,
+      'f16': monaco.KeyCode.F16,
+      'f17': monaco.KeyCode.F17,
+      'f18': monaco.KeyCode.F18,
+      'f19': monaco.KeyCode.F19,
+      'f20': monaco.KeyCode.F20,
+      'f21': monaco.KeyCode.F21,
+      'f22': monaco.KeyCode.F22,
+      'f23': monaco.KeyCode.F23,
+      'f24': monaco.KeyCode.F24,
+      'numlock': monaco.KeyCode.NumLock,
+      'scrolllock': monaco.KeyCode.ScrollLock,
+      ';': monaco.KeyCode.Semicolon,
+      '=': monaco.KeyCode.Equal,
+      ',': monaco.KeyCode.Comma,
+      '-': monaco.KeyCode.Minus,
+      '.': monaco.KeyCode.Period,
+      '/': monaco.KeyCode.Slash,
+      '`': monaco.KeyCode.Backquote,
+      '[': monaco.KeyCode.BracketLeft,
+      '\\': monaco.KeyCode.Backslash,
+      ']': monaco.KeyCode.BracketRight,
+      '\'': monaco.KeyCode.Quote,
+      'oem_8': monaco.KeyCode.OEM_8,
+      'intlbackslash': monaco.KeyCode.IntlBackslash,
+      'numpad0': monaco.KeyCode.Numpad0,
+      'numpad1': monaco.KeyCode.Numpad1,
+      'numpad2': monaco.KeyCode.Numpad2,
+      'numpad3': monaco.KeyCode.Numpad3,
+      'numpad4': monaco.KeyCode.Numpad4,
+      'numpad5': monaco.KeyCode.Numpad5,
+      'numpad6': monaco.KeyCode.Numpad6,
+      'numpad7': monaco.KeyCode.Numpad7,
+      'numpad8': monaco.KeyCode.Numpad8,
+      'numpad9': monaco.KeyCode.Numpad9,
+      'numpadmultiply': monaco.KeyCode.NumpadMultiply,
+      'numpadadd': monaco.KeyCode.NumpadAdd,
+      'numpadsubtract': monaco.KeyCode.NumpadSubtract,
+      'numpaddecimal': monaco.KeyCode.NumpadDecimal,
+      'numpaddivide': monaco.KeyCode.NumpadDivide,
+    }
+  }
+
+  return cachedMap[key.trim().toLowerCase()]
+}
+
+function resolveKeys (monaco: typeof Monaco, keys: string | null): number {
+  if (!keys) {
+    return 0
+  }
+
+  let result = 0
+  const keyNames = keys.split('+')
+
+  for (const keyName of keyNames) {
+    const code = getCode(monaco, keyName)
+    if (!code) {
+      return 0
+    }
+
+    if (result) {
+      result |= code
+    } else {
+      result = code
+    }
+  }
+
+  return result
+}
+
+type Chord = {
+  altKey: boolean
+  ctrlKey: boolean
+  keyCode: number
+  metaKey: boolean
+  shiftKey: boolean
+}
+
+function encodeMonacoChord (monaco: typeof Monaco, chord: Chord): number {
+  const { altKey, ctrlKey, keyCode, metaKey, shiftKey } = chord
+  let result = 0
+
+  altKey && (result |= monaco.KeyMod.Alt)
+  ctrlKey && (result |= (isMacOS ? monaco.KeyMod.WinCtrl : monaco.KeyMod.CtrlCmd))
+  metaKey && (result |= (isMacOS ? monaco.KeyMod.CtrlCmd : monaco.KeyMod.WinCtrl))
+  shiftKey && (result |= monaco.KeyMod.Shift)
+
+  return result | keyCode
+}
+
+function encodeMonacoChords (monaco: typeof Monaco, chords: Chord[]): number {
+  if (!chords.length) {
+    return 0
+  }
+
+  const [first, second] = chords
+
+  if (!second) {
+    return encodeMonacoChord(monaco, first)
+  }
+
+  return monaco.KeyMod.chord(
+    encodeMonacoChord(monaco, first),
+    encodeMonacoChord(monaco, second)
+  )
+}
 
 export default {
   name: 'custom-keybindings',
   register: (ctx) => {
+    let disposable: Monaco.IDisposable | null = null
+
+    function updateEditorKeybindings () {
+      try {
+        const monaco = ctx.editor.getMonaco()
+        const editor = ctx.editor.getEditor()
+        const service = (editor as any)._standaloneKeybindingService
+
+        disposable?.dispose()
+        disposable = null
+
+        const keybindings = ctx.setting.getSetting('keybindings', []).filter(x => x.type === 'editor')
+        const newKeybindings: Parameters<typeof monaco.editor.addKeybindingRules>[0] = []
+
+        for (const keybinding of keybindings) {
+          if (!editor.getAction(keybinding.command)) {
+            logger.warn('updateEditorKeybindings', `command ${keybinding.command} not found`)
+            continue
+          }
+
+          // get original keybinding, for get when condition
+          const originalKeybinding = service._getResolver().lookupPrimaryKeybinding(keybinding.command, service._contextKeyService)
+          let when: string | undefined
+          if (originalKeybinding) {
+            // get when condition expression
+            when = originalKeybinding.when?.serialize()
+            const originMonacoKeys = encodeMonacoChords(monaco, originalKeybinding.resolvedKeybinding._chords)
+            // remove original keybinding
+            newKeybindings.push({ keybinding: originMonacoKeys, command: null, when, })
+          }
+
+          const monacoKeys = resolveKeys(monaco, keybinding.keys)
+
+          if (!monacoKeys && keybinding.keys) {
+            logger.warn('updateEditorKeybindings', `invalid keybinding ${keybinding.keys} for command ${keybinding.command}`)
+          }
+
+          if (monacoKeys) {
+            // new keybinding
+            newKeybindings.push({ keybinding: monacoKeys, command: keybinding.command, when })
+          }
+        }
+
+        logger.debug('updateEditorKeybindings', newKeybindings)
+
+        if (newKeybindings.length) {
+          disposable = monaco.editor.addKeybindingRules(newKeybindings)
+        }
+      } catch (error) {
+        console.error(error)
+        ctx.ui.useToast().show('warning', 'Failed to update editor keybindings')
+      }
+    }
+
     ctx.command.tapCommand(command => {
       const keybindings = ctx.lib.lodash.keyBy(
         ctx.setting.getSetting('keybindings', []).filter(x => x.type === 'workbench'),
@@ -17,7 +269,10 @@ export default {
     ctx.registerHook('SETTING_CHANGED', ({ changedKeys }) => {
       if (changedKeys.includes('keybindings')) {
         ctx.triggerHook('COMMAND_KEYBINDING_CHANGED')
+        updateEditorKeybindings()
       }
     })
+
+    ctx.editor.whenEditorReady().then(updateEditorKeybindings)
   }
 } as Plugin
diff --git a/src/share/i18n/languages/en.ts b/src/share/i18n/languages/en.ts
index 94c0c17243..b9a367726b 100644
--- a/src/share/i18n/languages/en.ts
+++ b/src/share/i18n/languages/en.ts
@@ -687,6 +687,8 @@ const data = {
     'clear': 'Clear',
     'change': 'Change',
     'reset': 'Reset',
+    'search': 'Search, "*" to show modified',
+    'empty': 'No Result',
     'recorder': {
       'tip': 'Press desired key combination and then press ENTER, ESC to cancel.',
       'conflict-commands': '%s exists commands have the same keybinding',
diff --git a/src/share/i18n/languages/zh-CN.ts b/src/share/i18n/languages/zh-CN.ts
index 55418d6f37..0933aa184f 100644
--- a/src/share/i18n/languages/zh-CN.ts
+++ b/src/share/i18n/languages/zh-CN.ts
@@ -688,6 +688,8 @@ const data: BaseLanguage = {
     'clear': '清除',
     'change': '更改',
     'reset': '重置',
+    'search': '键入以搜索，“*”搜索已更改',
+    'empty': '无结果',
     'recorder': {
       'tip': '按下想要的键组合，然后按回车，按ESC取消。',
       'conflict-commands': '存在 %s 个命令使用了相同的快捷键',