ショートカットキーとしてCommandキーを使えるようにする (#1865)

* HotkeyComboブランド型を導入

* 忘れ物

* cmdを使えるようにする

* resolve conflict

* Update src/plugins/hotkeyPlugin.ts

* コメントを変更

---------

Co-authored-by: y-chan <[email protected]>

src/plugins/hotkeyPlugin.ts

@@ -34,6 +34,8 @@ export const useHotkeyManager = () => {
 
 type Editor = "talk" | "song";
 
+type BindingKey = string & { __brand: "BindingKey" }; // BindingKey専用のブランド型
+
 /**
  * ショートカットキーの処理を登録するための型。
  */
@@ -50,16 +52,17 @@ export type HotkeyAction = {
 
 export type HotkeysJs = {
   (
-    key: string,
+    key: BindingKey,
     options: {
       scope: string;
     },
     callback: (e: KeyboardEvent) => void
   ): void;
-  unbind: (key: string, scope: string) => void;
+  unbind: (key: BindingKey, scope: string) => void;
   setScope: (scope: string) => void;
 };
 
+// デフォルトはテキストボックス内でショートカットキー無効なので有効にする
 hotkeys.filter = () => {
   return true;
 };
@@ -269,8 +272,19 @@ export class HotkeyManager {
   }
 }
 
-const combinationToBindingKey = (combination: HotkeyCombination) => {
-  return combination.toLowerCase().replaceAll(" ", "+");
+/** hotkeys-js用のキーに変換する */
+const combinationToBindingKey = (
+  combination: HotkeyCombination
+): BindingKey => {
+  // MetaキーはCommandキーとして扱う
+  // NOTE: hotkeys-jsにはWinキーが無く、Commandキーとして扱われている
+  // NOTE: Metaキーは以前採用していたmousetrapがそうだった名残り
+  const bindingKey = combination
+    .toLowerCase()
+    .split(" ")
+    .map((key) => (key === "meta" ? "command" : key))
+    .join("+");
+  return bindingKey as BindingKey;
 };
 
 export const hotkeyPlugin: Plugin = {