The one where you can change your hotkeys

Author: AlemTuzlak

package-lock.json

@@ -175,6 +175,7 @@
     "date-fns": "^2.30.0",
     "es-module-lexer": "^1.4.1",
     "react-diff-viewer-continued": "^3.3.1",
+    "react-hotkeys-hook": "^4.5.0",
     "tailwind-merge": "^1.14.0",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"

package.json

@@ -27,6 +27,7 @@ import { useAttachBodyListener } from "./hooks/useAttachListener.js";
 import { useDebounce } from "./hooks/useDebounce.js";
 import { useListenToRouteChange } from "./hooks/detached/useListenToRouteChange.js";
 import { RdtPlugin } from "../index.js"; 
+import { useHotkeys } from "react-hotkeys-hook";
 
 const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   useTimelineHandler();
@@ -48,15 +49,10 @@ const DevTools = ({ plugins: pluginArray }: RemixDevToolsProps) => {
   const leftSideOriented = position.includes("left");
   const plugins = pluginArray?.map((plugin) => (typeof plugin === "function" ? plugin() : plugin));
   const debounceSetOpen = useDebounce(() => {setIsOpen(!isOpen); setPersistOpen(!isOpen)}, 100);
-  useAttachBodyListener("keydown", (e: any) => { 
-    
-    if(isOpen && e.key === "Escape"){
-      debounceSetOpen();
-    }
-    if (e.shiftKey && e.key.toLowerCase() === "a") {
-      debounceSetOpen();
-    }
-  });
+  useHotkeys(settings.openHotkey, () => debounceSetOpen());
+  useHotkeys("esc", () =>  isOpen ? debounceSetOpen() : null);
+
+  
 
   if (settings.requireUrlFlag && !url.includes(settings.urlFlag)) return null;
   // If the dev tools are detached, we don't want to render the main panel

src/client/RemixDevTools.tsx

@@ -86,7 +86,7 @@ export type RemixDevToolsState = {
     routeViewMode: "list" | "tree";
     panelLocation: "top" | "bottom";
     withServerDevTools: boolean;
-    
+    openHotkey: string;
     requireUrlFlag: boolean;
     urlFlag: string;
   };
@@ -119,7 +119,7 @@ export const initialState: RemixDevToolsState = {
     routeViewMode: "tree",
     panelLocation: "bottom",
     withServerDevTools: true,
-    
+    openHotkey: "shift+a",
     requireUrlFlag: false,
     urlFlag: "rdt",
   },
@@ -219,6 +219,7 @@ type SetHtmlErrors = {
   payload: HTMLError[];
 };
 
+
 /** Aggregate of all action types */
 export type RemixDevToolsActions =
   | SetTimelineEvent

src/client/context/rdtReducer.ts

@@ -12,6 +12,7 @@ export const SettingsTab = () => {
   const [minHeight, setMinHeight] = useState(settings.minHeight.toString());
   const [maxHeight, setMaxHeight] = useState(settings.maxHeight.toString());
   const [expansionLevel, setExpansionLevel] = useState(settings.expansionLevel.toString());
+  const [openHotkey, setOpenHotkey] = useState(settings.openHotkey.toString());
 
   return (
     <Stack className="rdt-mb-4">
@@ -74,6 +75,20 @@ export const SettingsTab = () => {
             }
           }}
         />
+        <Input
+          name="openHotkey"
+          id="openHotkey"
+          label="Depth of expansion for JSON objects"
+          hint="This allows you to change the depth of expanded properties of json objects."
+          value={openHotkey}
+          onChange={(e) => setOpenHotkey(e.target.value ?? "")}
+          onBlur={(e) => {
+            const value =  (e.target.value);
+            if (value  ) {
+              setSettings({ openHotkey: value });
+            }
+          }}
+        />
         <div className="rdt-flex rdt-flex-col rdt-gap-2 lg:rdt-flex-row">
           <Input
             name="minHeight"

src/client/tabs/SettingsTab.tsx

@@ -165,7 +165,7 @@ export const remixDevTools: (args?:RemixViteConfig) => Plugin[] = (args) => {
 
           return updatedCode;
         }
-        if (id.endsWith("/root.tsx")) {
+        if (id.endsWith("/root.tsx") || id.endsWith("/root.jsx")) {
           const [, exports] = parse(code);
           const exportNames = exports.map((e) => e.n);
           const hasLinksExport = exportNames.includes("links");