From 3869583ded6a929b563ffc0641d4913a9b67c8b0 Mon Sep 17 00:00:00 2001
From: Nanashi <sevenc7c@sevenc7c.com>
Date: Wed, 21 Feb 2024 12:00:30 +0900
Subject: [PATCH] =?UTF-8?q?Change:=20=E3=82=B7=E3=83=A7=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E3=82=AB=E3=83=83=E3=83=88=E3=82=AD=E3=83=BC=E5=91=A8=E3=82=8A?=
 =?UTF-8?q?=E3=82=92HotkeyManager=E3=81=AB=E3=81=BE=E3=81=A8=E3=82=81?=
 =?UTF-8?q?=E3=82=8B=20(#1822)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add: HotkeyManagerを追加

* Add: とりあえずUndo/Redoは動いた

* Change: Pluginに

* Change: hotkey-jsに

* Change: hotkeyManagerに置き換え

* Change: デフォルトパラメータに

* Code: ドキュメントを追加

* Add: sing側に同じ名前でショートカットを登録できるように

* Revert: Spaceキー再生のコードを削除

* Improve: 可読性を改善

* Delete: keepDefaultBehaviorを削除

* Change: scopeを使うように

* Code: 「ショートカットキーの処理」を使うように

* Fix: 同じキーバインドが登録されてると片方が動かなくなるのを修正

* Code: 可読性を向上

* Code: 変数名周りを改修

* Change: HotkeyAction -> HotkeyActionName

* Change: ActionKey -> ActionId

* Change: action ->name

* Change: window.electron.logInfoをを使うようにする

* Code: 変数名を変更

* Change: undefined | HotkeySetting[]にする

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Add: テストを追加

* Refactor: refreshBindingsを分解

* Change: hotkeys.filterを一番上に持ってくる

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Change: getSettingでthrowするようにする

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Delete: eslintのignoreを使わないコードにする

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Code: コメントを追加

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Change: as unknown asをなくす

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Fix: 割り当て -> 未割り当て -> 割り当ての挙動を修正

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Change: logをDIする

* Code: コメントを追加

* Change: 条件を変更

* 下に移動

* to combination

* Fix: 良い感じにクリーンアップするように

* Fix: テストを修正

* Improve: 良い感じに

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Improve: エラーメッセージを改善

Co-Authored-By: Hiroshiba <Hiroshiba@users.noreply.github.com>

* Change: IDを使わないように

* Refactor: isSameHotkeyTarget/isNotSameHotkeyTargetを追加

* Delete: unbindUnregisteredCombinationsを削除

* unbindedCombinationsを下に

* doc集約

* プライベート変数の説明追加

* Code: コメントをdoc commentに

* Change: beforeEachで登録するのをやめる

---------

Co-authored-by: Hiroshiba <Hiroshiba@users.noreply.github.com>
Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
---
 package-lock.json                             |  40 +--
 package.json                                  |   3 +-
 src/components/App.vue                        |  55 ++--
 src/components/Dialog/HotkeySettingDialog.vue |  13 +-
 src/components/Menu/MenuBar/BaseMenuBar.vue   |  34 +-
 src/components/Menu/MenuItem.vue              |   4 +-
 src/components/Sing/MenuBar.vue               |  13 +-
 src/components/Sing/ToolBar.vue               |  14 +
 src/components/Talk/AudioDetail.vue           | 141 ++++----
 src/components/Talk/MenuBar.vue               |  43 ++-
 src/components/Talk/TalkEditor.vue            | 124 +++----
 src/components/Talk/ToolBar.vue               |  78 ++---
 src/main.ts                                   |   2 +
 src/plugins/hotkeyPlugin.ts                   | 304 ++++++++++++++++++
 src/store/setting.ts                          |  77 +----
 src/type/preload.ts                           |   6 +-
 tests/unit/lib/hotkeyManager.spec.ts          | 158 +++++++++
 17 files changed, 741 insertions(+), 368 deletions(-)
 create mode 100644 src/plugins/hotkeyPlugin.ts
 create mode 100644 tests/unit/lib/hotkeyManager.spec.ts

diff --git a/package-lock.json b/package-lock.json
index 6ed35278f7..ff28cc026b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "electron-window-state": "5.0.3",
         "encoding-japanese": "1.0.30",
         "glob": "8.0.3",
+        "hotkeys-js": "3.13.6",
         "immer": "9.0.21",
         "markdown-it": "13.0.2",
         "move-file": "3.0.0",
@@ -50,7 +51,6 @@
         "@types/encoding-japanese": "1.0.18",
         "@types/glob": "8.0.0",
         "@types/markdown-it": "12.2.0",
-        "@types/mousetrap": "1.6.8",
         "@types/multistream": "4.1.0",
         "@types/semver": "7.3.9",
         "@types/unzipper": "0.10.5",
@@ -80,7 +80,6 @@
         "license-checker": "25.0.1",
         "markdownlint": "0.31.1",
         "markdownlint-cli": "0.37.0",
-        "mousetrap": "1.6.5",
         "node-fetch": "3.3.1",
         "optionator": "0.9.1",
         "prettier": "2.3.0",
@@ -1925,12 +1924,6 @@
       "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
       "dev": true
     },
-    "node_modules/@types/mousetrap": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.8.tgz",
-      "integrity": "sha512-zTqjvgCUT5EoXqbqmd8iJMb4NJqyV/V7pK7AIKq7qcaAsJIpGlTVJS1HQM6YkdHCdnkNSbhcQI7MXYxFfE3iCA==",
-      "dev": true
-    },
     "node_modules/@types/ms": {
       "version": "0.7.33",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.33.tgz",
@@ -7769,6 +7762,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/hotkeys-js": {
+      "version": "3.13.6",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.13.6.tgz",
+      "integrity": "sha512-Uw8cUXTjYDgnTaUxJTBc8E5etD8bcxjUm6Y/PEB5tBxIZu+dqTXGNQnWV+8yxdOTdlSdXjlqGeOMWu6Sm02CvA==",
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@@ -9285,12 +9286,6 @@
         "ufo": "^1.3.0"
       }
     },
-    "node_modules/mousetrap": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
-      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==",
-      "dev": true
-    },
     "node_modules/move-file": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/move-file/-/move-file-3.0.0.tgz",
@@ -14502,12 +14497,6 @@
       "integrity": "sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==",
       "dev": true
     },
-    "@types/mousetrap": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.8.tgz",
-      "integrity": "sha512-zTqjvgCUT5EoXqbqmd8iJMb4NJqyV/V7pK7AIKq7qcaAsJIpGlTVJS1HQM6YkdHCdnkNSbhcQI7MXYxFfE3iCA==",
-      "dev": true
-    },
     "@types/ms": {
       "version": "0.7.33",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.33.tgz",
@@ -19260,6 +19249,11 @@
         "lru-cache": "^6.0.0"
       }
     },
+    "hotkeys-js": {
+      "version": "3.13.6",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.13.6.tgz",
+      "integrity": "sha512-Uw8cUXTjYDgnTaUxJTBc8E5etD8bcxjUm6Y/PEB5tBxIZu+dqTXGNQnWV+8yxdOTdlSdXjlqGeOMWu6Sm02CvA=="
+    },
     "http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
@@ -20401,12 +20395,6 @@
         "ufo": "^1.3.0"
       }
     },
-    "mousetrap": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
-      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==",
-      "dev": true
-    },
     "move-file": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/move-file/-/move-file-3.0.0.tgz",
diff --git a/package.json b/package.json
index 1501d637fd..f3860b7edb 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "electron-window-state": "5.0.3",
     "encoding-japanese": "1.0.30",
     "glob": "8.0.3",
+    "hotkeys-js": "3.13.6",
     "immer": "9.0.21",
     "markdown-it": "13.0.2",
     "move-file": "3.0.0",
@@ -80,7 +81,6 @@
     "@types/encoding-japanese": "1.0.18",
     "@types/glob": "8.0.0",
     "@types/markdown-it": "12.2.0",
-    "@types/mousetrap": "1.6.8",
     "@types/multistream": "4.1.0",
     "@types/semver": "7.3.9",
     "@types/unzipper": "0.10.5",
@@ -110,7 +110,6 @@
     "license-checker": "25.0.1",
     "markdownlint": "0.31.1",
     "markdownlint-cli": "0.37.0",
-    "mousetrap": "1.6.5",
     "node-fetch": "3.3.1",
     "optionator": "0.9.1",
     "prettier": "2.3.0",
diff --git a/src/components/App.vue b/src/components/App.vue
index 43ebe88bc8..4d37e0d8aa 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -14,14 +14,13 @@
 </template>
 
 <script setup lang="ts">
-import { watch, onMounted, ref, computed } from "vue";
+import { watch, onMounted, ref, computed, toRaw } from "vue";
 import { useGtm } from "@gtm-support/vue-gtm";
 import { useRoute } from "vue-router";
-import Mousetrap from "mousetrap";
 import { EngineId } from "@/type/preload";
 import ErrorBoundary from "@/components/ErrorBoundary.vue";
 import { useStore } from "@/store";
-import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const store = useStore();
 const route = useRoute();
@@ -48,40 +47,32 @@ watch(
   { immediate: true }
 );
 
+// エディタの切り替えを監視する
+watch(
+  () => route.path,
+  async (unknownPath) => {
+    let path: "talk" | "song";
+    if (["/talk", "/song"].includes(unknownPath)) {
+      path = unknownPath.slice(1) as "talk" | "song";
+    } else {
+      // 不明なパスの場合はトークエディタにする
+      path = "talk";
+      window.electron.logWarn(`unknown path: ${unknownPath}`);
+    }
+
+    hotkeyManager.onEditorChange(path);
+  }
+);
+
 // ソフトウェアを初期化
+const { hotkeyManager } = useHotkeyManager();
 const isEnginesReady = ref(false);
 onMounted(async () => {
   await store.dispatch("INIT_VUEX");
 
-  // Electronのデフォルトのundo/redoを無効化
-  const disableDefaultUndoRedo = (event: KeyboardEvent) => {
-    // ctrl+z, ctrl+shift+z, ctrl+y
-    if (
-      isOnCommandOrCtrlKeyDown(event) &&
-      (event.key == "z" || (!event.shiftKey && event.key == "y"))
-    ) {
-      event.preventDefault();
-    }
-  };
-  document.addEventListener("keydown", disableDefaultUndoRedo);
-
-  // ショートカットキー操作を止める条件の設定
-  // 止めるなら`true`を返す
-  Mousetrap.prototype.stopCallback = (
-    e: Mousetrap.ExtendedKeyboardEvent, // 未使用
-    element: Element,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    combo: string // 未使用
-  ) => {
-    return (
-      element.tagName === "INPUT" ||
-      element.tagName === "SELECT" ||
-      element.tagName === "TEXTAREA" ||
-      (element instanceof HTMLElement && element.contentEditable === "true") ||
-      // メニュー項目ではショートカットキーを無効化
-      element.classList.contains("q-item")
-    );
-  };
+  const hotkeySettings = store.state.hotkeySettings;
+
+  hotkeyManager.load(structuredClone(toRaw(hotkeySettings)));
 
   // エンジンの初期化開始
 
diff --git a/src/components/Dialog/HotkeySettingDialog.vue b/src/components/Dialog/HotkeySettingDialog.vue
index 2800352bbf..3c474cba37 100644
--- a/src/components/Dialog/HotkeySettingDialog.vue
+++ b/src/components/Dialog/HotkeySettingDialog.vue
@@ -215,8 +215,8 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useStore } from "@/store";
-import { parseCombo } from "@/store/setting";
-import { HotkeyActionType, HotkeySettingType } from "@/type/preload";
+import { HotkeyActionNameType, HotkeySettingType } from "@/type/preload";
+import { useHotkeyManager, eventToCombination } from "@/plugins/hotkeyPlugin";
 
 const props =
   defineProps<{
@@ -271,16 +271,21 @@ const recordCombination = (event: KeyboardEvent) => {
   if (!isHotkeyDialogOpened.value) {
     return;
   } else {
-    const recordedCombo = parseCombo(event);
+    const recordedCombo = eventToCombination(event);
     lastRecord.value = recordedCombo;
     event.preventDefault();
   }
 };
 
+const { hotkeyManager } = useHotkeyManager();
 const changeHotkeySettings = (action: string, combo: string) => {
+  hotkeyManager.replace({
+    action: action as HotkeyActionNameType,
+    combination: combo,
+  });
   return store.dispatch("SET_HOTKEY_SETTINGS", {
     data: {
-      action: action as HotkeyActionType,
+      action: action as HotkeyActionNameType,
       combination: combo,
     },
   });
diff --git a/src/components/Menu/MenuBar/BaseMenuBar.vue b/src/components/Menu/MenuBar/BaseMenuBar.vue
index fd28e23fa2..9e0f545e3b 100644
--- a/src/components/Menu/MenuBar/BaseMenuBar.vue
+++ b/src/components/Menu/MenuBar/BaseMenuBar.vue
@@ -34,16 +34,18 @@ import TitleBarButtons from "./TitleBarButtons.vue";
 import TitleBarEditorSwitcher from "./TitleBarEditorSwitcher.vue";
 import { useStore } from "@/store";
 import { base64ImageToUri } from "@/helpers/imageHelper";
-import { HotkeyActionType, HotkeyReturnType } from "@/type/preload";
-import { setHotkeyFunctions } from "@/store/setting";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const props =
   defineProps<{
     /** 「ファイル」メニューのサブメニュー */
     fileSubMenuData: MenuItemData[];
+    /** エディタの種類 */
+    editor: "talk" | "song";
   }>();
 
 const store = useStore();
+const { registerHotkeyWithCleanup } = useHotkeyManager();
 const currentVersion = ref("");
 
 // デフォルトエンジンの代替先ポート
@@ -439,14 +441,26 @@ watch(uiLocked, () => {
   }
 });
 
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  ["新規プロジェクト", createNewProject],
-  ["プロジェクトを上書き保存", saveProject],
-  ["プロジェクトを名前を付けて保存", saveProjectAs],
-  ["プロジェクト読み込み", importProject],
-]);
-
-setHotkeyFunctions(hotkeyMap);
+registerHotkeyWithCleanup({
+  editor: props.editor,
+  callback: createNewProject,
+  name: "新規プロジェクト",
+});
+registerHotkeyWithCleanup({
+  editor: props.editor,
+  callback: saveProject,
+  name: "プロジェクトを上書き保存",
+});
+registerHotkeyWithCleanup({
+  editor: props.editor,
+  callback: saveProjectAs,
+  name: "プロジェクトを名前を付けて保存",
+});
+registerHotkeyWithCleanup({
+  editor: props.editor,
+  callback: importProject,
+  name: "プロジェクト読み込み",
+});
 </script>
 
 <style lang="scss">
diff --git a/src/components/Menu/MenuItem.vue b/src/components/Menu/MenuItem.vue
index 0801c02219..4266b5d4ad 100644
--- a/src/components/Menu/MenuItem.vue
+++ b/src/components/Menu/MenuItem.vue
@@ -74,7 +74,7 @@
 import { ref, computed, watch } from "vue";
 import { MenuItemData } from "./type";
 import { useStore } from "@/store";
-import { hotkeyActionSchema } from "@/type/preload";
+import { hotkeyActionNameSchema } from "@/type/preload";
 const props = withDefaults(
   defineProps<{
     selected?: boolean;
@@ -96,7 +96,7 @@ const hotkeySettingsMap = computed(
     )
 );
 const getMenuBarHotkey = (rawLabel: string) => {
-  const label = hotkeyActionSchema.safeParse(rawLabel);
+  const label = hotkeyActionNameSchema.safeParse(rawLabel);
   if (!label.success) {
     return "";
   }
diff --git a/src/components/Sing/MenuBar.vue b/src/components/Sing/MenuBar.vue
index 465d6c573b..e4f6a6d2ae 100644
--- a/src/components/Sing/MenuBar.vue
+++ b/src/components/Sing/MenuBar.vue
@@ -1,14 +1,12 @@
 <template>
-  <base-menu-bar :file-sub-menu-data="fileSubMenuData" />
+  <base-menu-bar editor="song" :file-sub-menu-data="fileSubMenuData" />
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { MenuItemData } from "@/components/Menu/type";
 import { useStore } from "@/store";
-import { HotkeyActionType, HotkeyReturnType } from "@/type/preload";
-import { setHotkeyFunctions } from "@/store/setting";
 import BaseMenuBar from "@/components/Menu/MenuBar/BaseMenuBar.vue";
+import { MenuItemData } from "@/components/Menu/type";
 
 const store = useStore();
 const uiLocked = computed(() => store.getters.UI_LOCKED);
@@ -55,11 +53,4 @@ const fileSubMenuData: MenuItemData[] = [
     disableWhenUiLocked: true,
   },
 ];
-
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  // NOTE: 初期設定なし
-  // ["新規", createNewSingProject],
-]);
-
-setHotkeyFunctions(hotkeyMap);
 </script>
diff --git a/src/components/Sing/ToolBar.vue b/src/components/Sing/ToolBar.vue
index 8eed8612e9..26671c2da4 100644
--- a/src/components/Sing/ToolBar.vue
+++ b/src/components/Sing/ToolBar.vue
@@ -133,8 +133,22 @@ import {
   isValidVoiceKeyShift,
 } from "@/sing/domain";
 import CharacterMenuButton from "@/components/Sing/CharacterMenuButton/MenuButton.vue";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const store = useStore();
+const { registerHotkeyWithCleanup } = useHotkeyManager();
+
+registerHotkeyWithCleanup({
+  editor: "song",
+  name: "再生/停止",
+  callback: () => {
+    if (nowPlaying.value) {
+      stop();
+    } else {
+      play();
+    }
+  },
+});
 
 const editor = "song";
 const canUndo = computed(() => store.getters.CAN_UNDO(editor));
diff --git a/src/components/Talk/AudioDetail.vue b/src/components/Talk/AudioDetail.vue
index c86bdc4232..2165455dc2 100644
--- a/src/components/Talk/AudioDetail.vue
+++ b/src/components/Talk/AudioDetail.vue
@@ -85,15 +85,10 @@ import { computed, nextTick, ref, watch } from "vue";
 import AccentPhrase from "./AccentPhrase.vue";
 import ToolTip from "@/components/ToolTip.vue";
 import { useStore } from "@/store";
-import {
-  AudioKey,
-  HotkeyActionType,
-  HotkeyReturnType,
-  isMac,
-} from "@/type/preload";
-import { setHotkeyFunctions } from "@/store/setting";
+import { AudioKey, isMac } from "@/type/preload";
 import { EngineManifest } from "@/openapi/models";
 import { useShiftKey, useAltKey } from "@/composables/useModifierKey";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import { handlePossiblyNotMorphableError } from "@/store/audioGenerate";
 
 const props =
@@ -113,70 +108,74 @@ const supportedFeatures = computed(
         .supportedFeatures) as EngineManifest["supportedFeatures"] | undefined
 );
 
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  [
-    "再生/停止",
-    () => {
-      if (!nowPlaying.value && !nowGenerating.value && !uiLocked.value) {
-        play();
-      } else {
-        stop();
-      }
-    },
-  ],
-  [
-    "ｱｸｾﾝﾄ欄を表示",
-    () => {
-      selectedDetail.value = "accent";
-    },
-  ],
-  [
-    "ｲﾝﾄﾈｰｼｮﾝ欄を表示",
-    () => {
-      if (supportedFeatures.value?.adjustMoraPitch) {
-        selectedDetail.value = "pitch";
-      }
-    },
-  ],
-  [
-    "長さ欄を表示",
-    () => {
-      if (supportedFeatures.value?.adjustPhonemeLength) {
-        selectedDetail.value = "length";
-      }
-    },
-  ],
-  [
-    "全体のイントネーションをリセット",
-    () => {
-      if (!uiLocked.value && store.getters.ACTIVE_AUDIO_KEY) {
-        const audioKeys = store.state.experimentalSetting.enableMultiSelect
-          ? store.getters.SELECTED_AUDIO_KEYS
-          : [store.getters.ACTIVE_AUDIO_KEY];
-        store.dispatch("COMMAND_MULTI_RESET_MORA_PITCH_AND_LENGTH", {
-          audioKeys,
-        });
-      }
-    },
-  ],
-  [
-    "選択中のアクセント句のイントネーションをリセット",
-    () => {
-      if (
-        !uiLocked.value &&
-        store.getters.ACTIVE_AUDIO_KEY &&
-        store.getters.AUDIO_PLAY_START_POINT != undefined
-      ) {
-        store.dispatch("COMMAND_RESET_SELECTED_MORA_PITCH_AND_LENGTH", {
-          audioKey: store.getters.ACTIVE_AUDIO_KEY,
-          accentPhraseIndex: store.getters.AUDIO_PLAY_START_POINT,
-        });
-      }
-    },
-  ],
-]);
-// このコンポーネントは遅延評価なので手動でバインディングを行う
-setHotkeyFunctions(hotkeyMap, true);
+const { registerHotkeyWithCleanup } = useHotkeyManager();
+
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "再生/停止",
+  callback: () => {
+    if (!nowPlaying.value && !nowGenerating.value && !uiLocked.value) {
+      play();
+    } else {
+      stop();
+    }
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "ｱｸｾﾝﾄ欄を表示",
+  callback: () => {
+    selectedDetail.value = "accent";
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "ｲﾝﾄﾈｰｼｮﾝ欄を表示",
+  callback: () => {
+    if (supportedFeatures.value?.adjustMoraPitch) {
+      selectedDetail.value = "pitch";
+    }
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "長さ欄を表示",
+  callback: () => {
+    if (supportedFeatures.value?.adjustPhonemeLength) {
+      selectedDetail.value = "length";
+    }
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "全体のイントネーションをリセット",
+  callback: () => {
+    if (!uiLocked.value && store.getters.ACTIVE_AUDIO_KEY) {
+      const audioKeys = store.state.experimentalSetting.enableMultiSelect
+        ? store.getters.SELECTED_AUDIO_KEYS
+        : [store.getters.ACTIVE_AUDIO_KEY];
+      store.dispatch("COMMAND_MULTI_RESET_MORA_PITCH_AND_LENGTH", {
+        audioKeys,
+      });
+    }
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "選択中のアクセント句のイントネーションをリセット",
+  callback: () => {
+    if (
+      !uiLocked.value &&
+      store.getters.ACTIVE_AUDIO_KEY &&
+      store.getters.AUDIO_PLAY_START_POINT != undefined
+    ) {
+      store.dispatch("COMMAND_RESET_SELECTED_MORA_PITCH_AND_LENGTH", {
+        audioKey: store.getters.ACTIVE_AUDIO_KEY,
+        accentPhraseIndex: store.getters.AUDIO_PLAY_START_POINT,
+      });
+    }
+  },
+});
 
 // detail selector
 type DetailTypes = "accent" | "pitch" | "length";
diff --git a/src/components/Talk/MenuBar.vue b/src/components/Talk/MenuBar.vue
index 0bcb2e3002..18b1bfd155 100644
--- a/src/components/Talk/MenuBar.vue
+++ b/src/components/Talk/MenuBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-menu-bar :file-sub-menu-data="fileSubMenuData" />
+  <base-menu-bar editor="talk" :file-sub-menu-data="fileSubMenuData" />
 </template>
 
 <script setup lang="ts">
@@ -14,10 +14,11 @@ import {
 import BaseMenuBar from "@/components/Menu/MenuBar/BaseMenuBar.vue";
 
 import { useStore } from "@/store";
-import { HotkeyActionType, HotkeyReturnType } from "@/type/preload";
-import { setHotkeyFunctions } from "@/store/setting";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const store = useStore();
+const { registerHotkeyWithCleanup } = useHotkeyManager();
+
 const uiLocked = computed(() => store.getters.UI_LOCKED);
 
 const generateAndSaveAllAudio = async () => {
@@ -130,12 +131,32 @@ const fileSubMenuData = computed<MenuItemData[]>(() => [
   },
 ]);
 
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  ["音声書き出し", generateAndSaveAllAudio],
-  ["選択音声を書き出し", generateAndSaveSelectedAudio],
-  ["音声を繋げて書き出し", generateAndConnectAndSaveAllAudio],
-  ["テキスト読み込む", importTextFile],
-]);
-
-setHotkeyFunctions(hotkeyMap);
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "音声書き出し",
+  callback: () => {
+    generateAndSaveAllAudio();
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "選択音声を書き出し",
+  callback: () => {
+    generateAndSaveSelectedAudio();
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "音声を繋げて書き出し",
+  callback: () => {
+    generateAndConnectAndSaveAllAudio();
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "テキスト読み込む",
+  callback: () => {
+    importTextFile();
+  },
+});
 </script>
diff --git a/src/components/Talk/TalkEditor.vue b/src/components/Talk/TalkEditor.vue
index 7faaa4c24f..906f897ebb 100644
--- a/src/components/Talk/TalkEditor.vue
+++ b/src/components/Talk/TalkEditor.vue
@@ -149,7 +149,7 @@
 
 <script setup lang="ts">
 import path from "path";
-import { computed, onBeforeUpdate, onMounted, ref, VNodeRef, watch } from "vue";
+import { computed, onBeforeUpdate, ref, VNodeRef, watch } from "vue";
 import draggable from "vuedraggable";
 import { QResizeObserver } from "quasar";
 import cloneDeep from "clone-deep";
@@ -176,14 +176,12 @@ import EngineStartupOverlay from "@/components/EngineStartupOverlay.vue";
 import { AudioItem } from "@/store/type";
 import {
   AudioKey,
-  HotkeyActionType,
-  HotkeyReturnType,
   PresetKey,
   SplitterPositionType,
   Voice,
 } from "@/type/preload";
 import { filterCharacterInfosByStyleType } from "@/store/utility";
-import { parseCombo, setHotkeyFunctions } from "@/store/setting";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 
 const props =
   defineProps<{
@@ -197,81 +195,64 @@ const audioKeys = computed(() => store.state.audioKeys);
 const uiLocked = computed(() => store.getters.UI_LOCKED);
 
 // hotkeys handled by Mousetrap
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  [
-    "テキスト欄にフォーカスを戻す",
-    () => {
-      if (activeAudioKey.value != undefined) {
-        focusCell({ audioKey: activeAudioKey.value, focusTarget: "textField" });
-      }
-      return false; // this is the same with event.preventDefault()
-    },
-  ],
-  [
-    // FIXME: テキスト欄にフォーカスがある状態でも実行できるようにする
-    // https://github.com/VOICEVOX/voicevox/pull/1096#issuecomment-1378651920
-    "テキスト欄を複製",
-    () => {
-      if (activeAudioKey.value != undefined) {
-        duplicateAudioItem();
-      }
-      return false;
-    },
-  ],
-]);
-
-setHotkeyFunctions(hotkeyMap);
-
-const removeAudioItem = async () => {
-  if (activeAudioKey.value == undefined) throw new Error();
-  audioCellRefs[activeAudioKey.value].removeCell();
-};
-
-// convert the hotkey array to Map to get value with keys easier
-// this only happens here where we deal with native methods
-const hotkeySettingsMap = computed(
-  () =>
-    new Map(
-      store.state.hotkeySettings.map((obj) => [obj.action, obj.combination])
-    )
-);
-
-// hotkeys handled by native, for they are made to be working while focusing input elements
-const hotkeyActionsNative = [
-  (event: KeyboardEvent) => {
-    if (
-      !event.isComposing &&
-      !uiLocked.value &&
-      parseCombo(event) == hotkeySettingsMap.value.get("テキスト欄を追加")
-    ) {
+const { registerHotkeyWithCleanup } = useHotkeyManager();
+
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "テキスト欄にフォーカスを戻す",
+  callback: () => {
+    if (activeAudioKey.value != undefined) {
+      focusCell({ audioKey: activeAudioKey.value, focusTarget: "textField" });
+    }
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  enableInTextbox: true,
+  name: "テキスト欄を複製",
+  callback: () => {
+    if (activeAudioKey.value != undefined) {
+      duplicateAudioItem();
+    }
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  enableInTextbox: true,
+  name: "テキスト欄を追加",
+  callback: () => {
+    if (!uiLocked.value) {
       addAudioItem();
-      event.preventDefault();
     }
   },
-  (event: KeyboardEvent) => {
-    if (
-      !event.isComposing &&
-      !uiLocked.value &&
-      parseCombo(event) == hotkeySettingsMap.value.get("テキスト欄を削除")
-    ) {
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  enableInTextbox: true,
+  name: "テキスト欄を削除",
+  callback: () => {
+    if (!uiLocked.value) {
       removeAudioItem();
-      event.preventDefault();
     }
   },
-  (event: KeyboardEvent) => {
-    if (
-      !event.isComposing &&
-      !uiLocked.value &&
-      parseCombo(event) ==
-        hotkeySettingsMap.value.get("テキスト欄からフォーカスを外す")
-    ) {
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  enableInTextbox: true,
+  name: "テキスト欄からフォーカスを外す",
+  callback: () => {
+    if (!uiLocked.value) {
       if (document.activeElement instanceof HTMLInputElement) {
         document.activeElement.blur();
       }
-      event.preventDefault();
     }
   },
-];
+});
+
+const removeAudioItem = async () => {
+  if (activeAudioKey.value == undefined) throw new Error();
+  audioCellRefs[activeAudioKey.value].removeCell();
+};
 
 // view
 const DEFAULT_PORTRAIT_PANE_WIDTH = 25; // %
@@ -498,13 +479,6 @@ watch(userOrderedCharacterInfos, (userOrderedCharacterInfos) => {
   }
 });
 
-onMounted(async () => {
-  // ショートカットキーの設定
-  hotkeyActionsNative.forEach((item) => {
-    document.addEventListener("keyup", item);
-  });
-});
-
 // エンジン初期化後の処理
 const isCompletedInitialStartup = ref(false);
 const unwatchIsEnginesReady = watch(
diff --git a/src/components/Talk/ToolBar.vue b/src/components/Talk/ToolBar.vue
index 265a123dc0..80d1b323c3 100644
--- a/src/components/Talk/ToolBar.vue
+++ b/src/components/Talk/ToolBar.vue
@@ -26,13 +26,9 @@ import {
   generateAndSaveOneAudioWithDialog,
 } from "@/components/Dialog/Dialog";
 import { useStore } from "@/store";
-import { setHotkeyFunctions } from "@/store/setting";
-import {
-  HotkeyActionType,
-  HotkeyReturnType,
-  ToolbarButtonTagType,
-} from "@/type/preload";
+import { ToolbarButtonTagType } from "@/type/preload";
 import { getToolbarButtonName } from "@/store/utility";
+import { useHotkeyManager } from "@/plugins/hotkeyPlugin";
 import { handlePossiblyNotMorphableError } from "@/store/audioGenerate";
 
 type ButtonContent = {
@@ -56,47 +52,39 @@ const nowPlayingContinuously = computed(
   () => store.state.nowPlayingContinuously
 );
 
-const undoRedoHotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  // undo
-  [
-    "元に戻す",
-    () => {
-      if (!uiLocked.value && canUndo.value) {
-        undo();
-      }
-      return false;
-    },
-  ],
-  // redo
-  [
-    "やり直す",
-    () => {
-      if (!uiLocked.value && canRedo.value) {
-        redo();
-      }
-      return false;
-    },
-  ],
-]);
-setHotkeyFunctions(undoRedoHotkeyMap);
+const { registerHotkeyWithCleanup } = useHotkeyManager();
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "元に戻す",
+  callback: () => {
+    if (!uiLocked.value && canUndo.value) {
+      undo();
+    }
+  },
+});
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "やり直す",
+  callback: () => {
+    if (!uiLocked.value && canRedo.value) {
+      redo();
+    }
+  },
+});
 
-const hotkeyMap = new Map<HotkeyActionType, () => HotkeyReturnType>([
-  // play/stop continuously
-  [
-    "連続再生/停止",
-    () => {
-      if (!uiLocked.value) {
-        if (nowPlayingContinuously.value) {
-          stop();
-        } else {
-          playContinuously();
-        }
+registerHotkeyWithCleanup({
+  editor: "talk",
+  name: "連続再生/停止",
+  callback: () => {
+    if (!uiLocked.value) {
+      if (nowPlayingContinuously.value) {
+        stop();
+      } else {
+        playContinuously();
       }
-    },
-  ],
-]);
-
-setHotkeyFunctions(hotkeyMap);
+    }
+  },
+});
 
 const undo = () => {
   store.dispatch("UNDO", { editor });
diff --git a/src/main.ts b/src/main.ts
index b835cca641..68b2870bce 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import iconSet from "quasar/icon-set/material-icons";
 import router from "./router";
 import { store, storeKey } from "./store";
 import { ipcMessageReceiver } from "./plugins/ipcMessageReceiverPlugin";
+import { hotkeyPlugin } from "./plugins/hotkeyPlugin";
 import App from "@/components/App.vue";
 import { markdownItPlugin } from "@/plugins/markdownItPlugin";
 
@@ -42,6 +43,7 @@ createApp(App)
       Notify,
     },
   })
+  .use(hotkeyPlugin)
   .use(ipcMessageReceiver, { store })
   .use(markdownItPlugin)
   .mount("#app");
diff --git a/src/plugins/hotkeyPlugin.ts b/src/plugins/hotkeyPlugin.ts
new file mode 100644
index 0000000000..796b444e9e
--- /dev/null
+++ b/src/plugins/hotkeyPlugin.ts
@@ -0,0 +1,304 @@
+/**
+ * ショートカットキーを管理するプラグイン。
+ *
+ * HotkeyAction: 実行する処理の名前とコールバックのペア
+ * HotkeySetting: ユーザーが設定できるもの。ActionとCobinationのペア
+ * Combination: ショートカットキーを文字列で表したもの
+ * binding: hotkeys-js に登録したコールバック
+ * bindingKey: hotkeys-js で使う、キーの文字列表記
+ */
+import { Plugin, inject, onMounted, onUnmounted } from "vue";
+import hotkeys from "hotkeys-js";
+import { HotkeyActionNameType, HotkeySettingType } from "@/type/preload";
+
+const hotkeyManagerKey = "hotkeyManager";
+export const useHotkeyManager = () => {
+  const hotkeyManager = inject<HotkeyManager>(hotkeyManagerKey);
+  if (!hotkeyManager) {
+    throw new Error("hotkeyManager not found");
+  }
+  const registerHotkeyWithCleanup = (action: HotkeyAction) => {
+    onMounted(() => {
+      hotkeyManager.register(action);
+    });
+    onUnmounted(() => {
+      hotkeyManager.unregister(action);
+    });
+  };
+  return { hotkeyManager, registerHotkeyWithCleanup };
+};
+
+type Editor = "talk" | "song";
+
+/**
+ * ショートカットキーの処理を登録するための型。
+ */
+export type HotkeyAction = {
+  /** どちらのエディタで有効か */
+  editor: Editor;
+  /** テキストボックス内で有効か。デフォルトはfalse。 */
+  enableInTextbox?: boolean;
+  /** 名前。 */
+  name: HotkeyActionNameType;
+  /** ショートカットキーが押されたときの処理。 */
+  callback: (e: KeyboardEvent) => void;
+};
+
+export type HotkeysJs = {
+  (
+    key: string,
+    options: {
+      scope: string;
+    },
+    callback: (e: KeyboardEvent) => void
+  ): void;
+  unbind: (key: string, scope: string) => void;
+  setScope: (scope: string) => void;
+};
+
+hotkeys.filter = () => {
+  return true;
+};
+type Log = (message: string, ...args: unknown[]) => void;
+
+type RegisteredCombination = {
+  editor: Editor;
+  name: HotkeyActionNameType;
+  combination: string;
+};
+
+interface HotkeyTarget {
+  name: HotkeyActionNameType;
+  editor: Editor;
+}
+const isSameHotkeyTarget = (a: HotkeyTarget) => (b: HotkeyTarget) => {
+  return a.name === b.name && a.editor === b.editor;
+};
+const isNotSameHotkeyTarget = (a: HotkeyTarget) => (b: HotkeyTarget) => {
+  return a.name !== b.name || a.editor !== b.editor;
+};
+
+/**
+ * ショートカットキーの管理を行うクラス。
+ */
+export class HotkeyManager {
+  /** 登録されたHotkeyAction */
+  private actions: HotkeyAction[] = [];
+  /** ユーザーのショートカットキー設定 */
+  private settings: HotkeySettingType[] | undefined; // ユーザーのショートカットキー設定
+  /** hotkeys-jsに登録されたショートカットキーの組み合わせ */
+  private registeredCombinations: RegisteredCombination[] = [];
+
+  private hotkeys: HotkeysJs;
+  private log: Log;
+
+  constructor(
+    hotkeys_: HotkeysJs = hotkeys,
+    log: Log = (message: string, ...args: unknown[]) => {
+      window.electron.logInfo(`[HotkeyManager] ${message}`, ...args);
+    }
+  ) {
+    this.log = log;
+    this.hotkeys = hotkeys_;
+  }
+
+  /**
+   * ショートカットキーの設定を読み込む。
+   */
+  load(data: HotkeySettingType[]): void {
+    this.settings = data;
+    this.refreshBinding();
+  }
+
+  private getSetting(action: HotkeyAction): HotkeySettingType {
+    if (!this.settings) {
+      throw new Error("assert: this.settings != undefined");
+    }
+    const setting = this.settings.find((s) => s.action === action.name);
+    if (!setting) {
+      throw new Error("assert: setting != undefined");
+    }
+    return setting;
+  }
+
+  private getRegisteredCombination(action: HotkeyAction): string | undefined {
+    return this.registeredCombinations.find(isSameHotkeyTarget(action))
+      ?.combination;
+  }
+
+  private refreshBinding(): void {
+    if (!this.settings) {
+      return;
+    }
+
+    const changedActions = this.actions.filter((a) => {
+      const setting = this.getSetting(a);
+      return this.getRegisteredCombination(a) !== setting.combination;
+    });
+
+    // 不要なBindingを削除
+    const unbindedCombinations = changedActions.flatMap((a) => {
+      const combination = this.registeredCombinations.find(
+        isSameHotkeyTarget(a)
+      );
+      // 空じゃないCombinationを探す
+      return combination?.combination ? [combination] : [];
+    });
+    const unregisteredCombinations = this.registeredCombinations.filter(
+      (c) => !this.actions.some(isSameHotkeyTarget(c))
+    );
+    this.unbindActions([...unbindedCombinations, ...unregisteredCombinations]);
+
+    // 新しいBindingを登録
+    const actionsToBind = changedActions.filter((a) => {
+      const setting = this.getSetting(a);
+      // 未割り当て（空文字列）のものを弾く
+      return !!setting.combination;
+    });
+    this.bindActions(actionsToBind);
+  }
+
+  private unbindActions(combinations: RegisteredCombination[]): void {
+    for (const combination of combinations) {
+      const bindingKey = combinationToBindingKey(combination.combination);
+      this.log("Unbind:", bindingKey, "in", combination.editor);
+      this.hotkeys.unbind(bindingKey, combination.editor);
+      this.registeredCombinations = this.registeredCombinations.filter(
+        isNotSameHotkeyTarget(combination)
+      );
+    }
+  }
+
+  private bindActions(actions: HotkeyAction[]): void {
+    for (const action of actions) {
+      const setting = this.getSetting(action);
+      this.log(
+        "Bind:",
+        combinationToBindingKey(setting.combination),
+        "to",
+        action.name,
+        "in",
+        action.editor
+      );
+      this.hotkeys(
+        combinationToBindingKey(setting.combination),
+        { scope: action.editor },
+        (e) => {
+          const element = e.target;
+          // メニュー項目ではショートカットキーを無効化
+          if (
+            element instanceof HTMLElement &&
+            element.classList.contains("q-item")
+          ) {
+            return;
+          }
+          if (!action.enableInTextbox) {
+            if (
+              element instanceof HTMLElement &&
+              (element.tagName === "INPUT" ||
+                element.tagName === "SELECT" ||
+                element.tagName === "TEXTAREA" ||
+                element.contentEditable === "true")
+            ) {
+              return;
+            }
+          }
+          e.preventDefault();
+          action.callback(e);
+        }
+      );
+      this.registeredCombinations = this.registeredCombinations.filter(
+        isNotSameHotkeyTarget(action)
+      );
+      this.registeredCombinations.push({
+        editor: action.editor,
+        name: action.name,
+        combination: setting.combination,
+      });
+    }
+  }
+
+  /**
+   * ショートカットキーの設定を変更する。
+   */
+  replace(data: HotkeySettingType): void {
+    if (!this.settings) {
+      throw new Error("assert: this.settings != undefined");
+    }
+    const index = this.settings.findIndex((s) => s.action === data.action);
+    if (index === -1) {
+      throw new Error("assert: index !== -1");
+    }
+    this.settings[index] = data;
+    this.refreshBinding();
+  }
+
+  /**
+   * ショートカットキーの処理を登録する。
+   */
+  register(data: HotkeyAction): void {
+    if (
+      this.actions.some((a) => a.name === data.name && a.editor === data.editor)
+    ) {
+      throw new Error(`Action ${data.name} in ${data.editor} already exists`);
+    }
+    this.actions.push(data);
+    this.refreshBinding();
+  }
+
+  /**
+   * ショートカットキーの処理の登録を解除する。
+   */
+  unregister(data: HotkeyAction): void {
+    this.actions = this.actions.filter(isNotSameHotkeyTarget(data));
+    this.refreshBinding();
+  }
+
+  /**
+   * エディタが変更されたときに呼び出される。
+   */
+  onEditorChange(editor: "talk" | "song"): void {
+    this.hotkeys.setScope(editor);
+    this.log("Editor changed to", editor);
+  }
+}
+
+const combinationToBindingKey = (combination: string) => {
+  return combination.toLowerCase().replaceAll(" ", "+");
+};
+
+export const hotkeyPlugin: Plugin = {
+  install: (app) => {
+    const hotkeyManager = new HotkeyManager();
+
+    app.provide(hotkeyManagerKey, hotkeyManager);
+  },
+};
+
+export const eventToCombination = (event: KeyboardEvent): string => {
+  let recordedCombination = "";
+  if (event.ctrlKey) {
+    recordedCombination += "Ctrl ";
+  }
+  if (event.altKey) {
+    recordedCombination += "Alt ";
+  }
+  if (event.shiftKey) {
+    recordedCombination += "Shift ";
+  }
+  // event.metaKey は Mac キーボードでは Cmd キー、Windows キーボードでは Windows キーの押下で true になる
+  if (event.metaKey) {
+    recordedCombination += "Meta ";
+  }
+  if (event.key === " ") {
+    recordedCombination += "Space";
+  } else {
+    if (["Control", "Shift", "Alt", "Meta"].includes(event.key)) {
+      recordedCombination = recordedCombination.slice(0, -1);
+    } else {
+      recordedCombination +=
+        event.key.length > 1 ? event.key : event.key.toUpperCase();
+    }
+  }
+  return recordedCombination;
+};
diff --git a/src/store/setting.ts b/src/store/setting.ts
index 0d25d94739..4373eb17e1 100644
--- a/src/store/setting.ts
+++ b/src/store/setting.ts
@@ -1,12 +1,8 @@
-import Mousetrap from "mousetrap";
 import { Dark, setCssVar, colors } from "quasar";
 import { SettingStoreState, SettingStoreTypes } from "./type";
 import { createUILockAction } from "./ui";
 import { createPartialStore } from "./vuex";
-import { useStore } from "@/store";
 import {
-  HotkeyActionType,
-  HotkeyReturnType,
   HotkeySettingType,
   SavingSetting,
   ExperimentalSettingType,
@@ -19,8 +15,6 @@ import {
 } from "@/type/preload";
 import { IsEqual } from "@/type/utility";
 
-const hotkeyFunctionCache: Record<string, () => HotkeyReturnType> = {};
-
 export const settingStoreState: SettingStoreState = {
   savingSetting: {
     fileEncoding: "UTF-8",
@@ -189,25 +183,8 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
       });
       if (flag) state.hotkeySettings.push(newHotkey);
     },
-    action({ state, commit }, { data }: { data: HotkeySettingType }) {
+    action({ commit }, { data }: { data: HotkeySettingType }) {
       window.electron.hotkeySettings(data);
-      const oldHotkey = state.hotkeySettings.find((value) => {
-        return value.action == data.action;
-      });
-      if (oldHotkey != undefined) {
-        if (oldHotkey.combination != "") {
-          Mousetrap.unbind(hotkey2Combo(oldHotkey.combination));
-        }
-      }
-      if (
-        data.combination != "" &&
-        hotkeyFunctionCache[data.action] != undefined
-      ) {
-        Mousetrap.bind(
-          hotkey2Combo(data.combination),
-          hotkeyFunctionCache[data.action]
-        );
-      }
       commit("SET_HOTKEY_SETTINGS", {
         newHotkey: data,
       });
@@ -466,55 +443,3 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
     },
   },
 });
-
-export const setHotkeyFunctions = (
-  hotkeyMap: Map<HotkeyActionType, () => HotkeyReturnType>,
-  reassign?: boolean
-): void => {
-  hotkeyMap.forEach((value, key) => {
-    hotkeyFunctionCache[key] = value;
-  });
-  if (reassign) {
-    const store = useStore();
-    hotkeyMap.forEach((hotkeyFunction, hotkeyAction) => {
-      const hotkey = store.state.hotkeySettings.find((value) => {
-        return value.action == hotkeyAction;
-      });
-      if (hotkey) {
-        store.dispatch("SET_HOTKEY_SETTINGS", { data: { ...hotkey } });
-      }
-    });
-  }
-};
-
-const hotkey2Combo = (hotkeyCombo: string) => {
-  return hotkeyCombo.toLowerCase().replaceAll(" ", "+");
-};
-
-export const parseCombo = (event: KeyboardEvent): string => {
-  let recordedCombo = "";
-  if (event.ctrlKey) {
-    recordedCombo += "Ctrl ";
-  }
-  if (event.altKey) {
-    recordedCombo += "Alt ";
-  }
-  if (event.shiftKey) {
-    recordedCombo += "Shift ";
-  }
-  // event.metaKey は Mac キーボードでは Cmd キー、Windows キーボードでは Windows キーの押下で true になる
-  if (event.metaKey) {
-    recordedCombo += "Meta ";
-  }
-  if (event.key === " ") {
-    recordedCombo += "Space";
-  } else {
-    if (["Control", "Shift", "Alt", "Meta"].includes(event.key)) {
-      recordedCombo = recordedCombo.slice(0, -1);
-    } else {
-      recordedCombo +=
-        event.key.length > 1 ? event.key : event.key.toUpperCase();
-    }
-  }
-  return recordedCombo;
-};
diff --git a/src/type/preload.ts b/src/type/preload.ts
index 4fbe74e603..279ad492e5 100644
--- a/src/type/preload.ts
+++ b/src/type/preload.ts
@@ -403,7 +403,7 @@ export type MorphableTargetInfoTable = {
       };
 };
 
-export const hotkeyActionSchema = z.enum([
+export const hotkeyActionNameSchema = z.enum([
   "音声書き出し",
   "選択音声を書き出し",
   "音声を繋げて書き出し",
@@ -428,12 +428,12 @@ export const hotkeyActionSchema = z.enum([
   "選択中のアクセント句のイントネーションをリセット",
 ]);
 
-export type HotkeyActionType = z.infer<typeof hotkeyActionSchema>;
+export type HotkeyActionNameType = z.infer<typeof hotkeyActionNameSchema>;
 
 export type HotkeyCombo = string;
 
 export const hotkeySettingSchema = z.object({
-  action: hotkeyActionSchema,
+  action: hotkeyActionNameSchema,
   combination: z.string(),
 });
 export type HotkeySettingType = z.infer<typeof hotkeySettingSchema>;
diff --git a/tests/unit/lib/hotkeyManager.spec.ts b/tests/unit/lib/hotkeyManager.spec.ts
new file mode 100644
index 0000000000..c6d5624e9d
--- /dev/null
+++ b/tests/unit/lib/hotkeyManager.spec.ts
@@ -0,0 +1,158 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { HotkeyManager, HotkeysJs, HotkeyAction } from "@/plugins/hotkeyPlugin";
+import { HotkeySettingType } from "@/type/preload";
+
+type DummyHotkeysJs = HotkeysJs & {
+  registeredHotkeys: {
+    key: string;
+    scope: string;
+    // callbackを持たせると比較が面倒になるので持たせない
+    // callback: (e: KeyboardEvent) => void;
+  }[];
+  currentScope: string;
+};
+const createHotkeyManager = (): {
+  hotkeyManager: HotkeyManager;
+  dummyHotkeysJs: DummyHotkeysJs;
+} => {
+  const registeredHotkeys: DummyHotkeysJs["registeredHotkeys"] = [];
+  const dummyHotkeysJs: DummyHotkeysJs = (
+    key: string,
+    { scope }: { scope: string }
+  ) => {
+    if (registeredHotkeys.some((h) => h.key === key && h.scope === scope)) {
+      throw new Error("assert: duplicate key");
+    }
+    registeredHotkeys.push({ key, scope });
+  };
+  dummyHotkeysJs.unbind = (key: string) => {
+    const index = dummyHotkeysJs.registeredHotkeys.findIndex(
+      (h) => h.key === key
+    );
+    if (index === -1) {
+      throw new Error("assert: unknown binding");
+    }
+    registeredHotkeys.splice(index, 1);
+  };
+  dummyHotkeysJs.setScope = (scope: string) => {
+    dummyHotkeysJs.currentScope = scope;
+  };
+  dummyHotkeysJs.registeredHotkeys = registeredHotkeys;
+  dummyHotkeysJs.currentScope = "talk";
+  return {
+    hotkeyManager: new HotkeyManager(dummyHotkeysJs, () => {
+      /* noop */
+    }),
+    dummyHotkeysJs,
+  };
+};
+
+it("registerできる", () => {
+  const { hotkeyManager } = createHotkeyManager();
+  hotkeyManager.register({
+    editor: "talk",
+    name: "音声書き出し",
+    callback: () => {
+      /* noop */
+    },
+  });
+});
+
+it("unregisterできる", () => {
+  const { hotkeyManager, dummyHotkeysJs } = createHotkeyManager();
+  const action = {
+    editor: "talk",
+    name: "音声書き出し",
+    callback: () => {
+      /* noop */
+    },
+  } as const;
+  hotkeyManager.load([
+    {
+      action: "音声書き出し",
+      combination: "1",
+    },
+  ]);
+  hotkeyManager.register(action);
+  expect(dummyHotkeysJs.registeredHotkeys).toEqual([
+    { key: "1", scope: "talk" },
+  ]);
+  hotkeyManager.unregister(action);
+  expect(dummyHotkeysJs.registeredHotkeys).toEqual([]);
+});
+
+const callback = () => {
+  /* noop */
+};
+const dummyAction: HotkeyAction = {
+  editor: "talk",
+  name: "音声書き出し",
+  callback,
+};
+const createDummySetting = (combination: string): HotkeySettingType => ({
+  action: "音声書き出し",
+  combination,
+});
+
+describe("設定変更", () => {
+  let hotkeyManager: HotkeyManager;
+  let dummyHotkeysJs: DummyHotkeysJs;
+  beforeEach(() => {
+    const { hotkeyManager: hotkeyManager_, dummyHotkeysJs: dummyHotkeysJs_ } =
+      createHotkeyManager();
+    hotkeyManager = hotkeyManager_;
+    dummyHotkeysJs = dummyHotkeysJs_;
+  });
+
+  it("設定を登録するとhotkeysが更新される", () => {
+    hotkeyManager.register(dummyAction);
+    hotkeyManager.load([createDummySetting("1")]);
+    expect(dummyHotkeysJs.registeredHotkeys).toEqual([
+      { key: "1", scope: "talk" },
+    ]);
+  });
+
+  it("設定を更新するとhotkeysが更新される", () => {
+    hotkeyManager.register(dummyAction);
+    hotkeyManager.load([createDummySetting("1")]);
+    hotkeyManager.replace(createDummySetting("a"));
+
+    expect(dummyHotkeysJs.registeredHotkeys).toEqual([
+      { key: "a", scope: "talk" },
+    ]);
+  });
+
+  it("未割り当てにするとhotkeysから削除される", () => {
+    hotkeyManager.register(dummyAction);
+    hotkeyManager.load([createDummySetting("1")]);
+    hotkeyManager.replace(createDummySetting(""));
+    expect(dummyHotkeysJs.registeredHotkeys).toEqual([]);
+  });
+
+  it("未割り当てから割り当てるとhotkeysが更新される", () => {
+    hotkeyManager.register(dummyAction);
+    hotkeyManager.load([createDummySetting("")]);
+    expect(dummyHotkeysJs.registeredHotkeys).toEqual([]);
+    hotkeyManager.replace(createDummySetting("1"));
+    expect(dummyHotkeysJs.registeredHotkeys).toEqual([
+      { key: "1", scope: "talk" },
+    ]);
+  });
+
+  it("割り当て -> 未割り当て -> 割り当てでhotkeysが更新される", () => {
+    hotkeyManager.register(dummyAction);
+    hotkeyManager.load([createDummySetting("1")]);
+
+    expect(dummyHotkeysJs.registeredHotkeys).toEqual([
+      { key: "1", scope: "talk" },
+    ]);
+
+    hotkeyManager.replace(createDummySetting(""));
+    expect(dummyHotkeysJs.registeredHotkeys).toEqual([]);
+
+    hotkeyManager.replace(createDummySetting("a"));
+    expect(dummyHotkeysJs.registeredHotkeys).toEqual([
+      { key: "a", scope: "talk" },
+    ]);
+  });
+});