refactor: migrate mod + k to useHotkeys to reduce usage

Author: moonrailgun

pnpm-lock.yaml

@@ -19,7 +19,10 @@ interface HtmlEditorProps {
 }
 
 export const HtmlEditor = React.forwardRef<HtmlEditorRef, HtmlEditorProps>(
-  ({ value, onChange, height = 400, readOnly = false, onValidate, onSave }, ref) => {
+  (
+    { value, onChange, height = 400, readOnly = false, onValidate, onSave },
+    ref
+  ) => {
     const editorRef = useRef<any>(null);
     const monacoRef = useRef<any>(null);
     const colorScheme = useTheme();

src/client/components/CodeEditor/html.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   Command,
   CommandDialog,
@@ -25,6 +25,7 @@ import {
 import { RiSurveyLine } from 'react-icons/ri';
 
 import { NavigateOptions, useNavigate } from '@tanstack/react-router';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useEvent } from '@/hooks/useEvent';
 import { useCommandState } from 'cmdk';
 import { useTranslation } from '@i18next-toolkit/react';
@@ -62,19 +63,11 @@ export const CommandPanel: React.FC<CommandPanelProps> = React.memo((props) => {
     };
   });
 
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen((open) => !open);
-      }
-    };
-
-    document.addEventListener('keydown', down);
-    return () => {
-      document.removeEventListener('keydown', down);
-    };
-  }, []);
+  // Handle keyboard shortcut Cmd+K / Ctrl+K to toggle command panel
+  useHotkeys('mod+k', (event) => {
+    event.preventDefault();
+    setOpen((open) => !open);
+  });
 
   return (
     <>

src/client/components/CommandPanel/index.tsx

@@ -99,6 +99,7 @@
     "react-grid-layout": "1.4.2",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.54.2",
+    "react-hotkeys-hook": "^5.2.4",
     "react-icons": "^5.5.0",
     "react-identicons": "^1.2.5",
     "react-leaflet": "^4.2.1",