Multi-Editor Support via config (#146)

* feat: add project configuration files for IDE support and code style settings
feat: implement EditorButton component to replace VsCodeButton for better flexibility
fix: update RdtClientConfig to include editorName for improved configuration
fix: refactor editor opening logic to use configurable editor settings in plugin

* rm .idea and added to gitignore

* added docs and removed an extra line added by accident

* Additional improvements

* small change

* doc update

---------

Co-authored-by: Alem Tuzlak <[email protected]>

.gitignore

@@ -131,4 +131,7 @@ dist
 
 .DS_Store
 **/.DS_Store
-.history
+.history
+
+# IDE
+.idea

docs/posts/main/configuration/editor.mdx

@@ -0,0 +1,80 @@
+---
+title: Remix Development Tools Editor Configuration
+description: Configuration options for the Remix Development Tools to interface with your editor
+---
+
+Everyone uses their own editors, so it's important to be able to configure the editor that Remix Development Tools will open your files in.
+
+```ts
+type EditorConfig = {
+  name: string;
+  open(path: string, lineNumber: string | undefined): void;
+}
+```
+
+## `name`
+
+The name of the editor that will be displayed on the Open in Editor button.
+
+## `open`
+
+This function will be called when the user clicks the Open in Editor button. It will receive the path to the file and the line number to open the file at.
+This function will both handle the case where you shift + right click an element on the page AND the open in X button in the UI, they return different values
+so be sure to cover both of them.
+
+```ts
+import { exec } from "node:child_process";
+import { normalizePath } from "vite";
+
+function open(path: string, lineNumber: string | undefined) { 
+  exec(`code -g "${normalizePath(path)}${lineNumber ? `:${lineNumber}` : ""}"`);
+}
+```
+
+## Editors
+
+Below are some examples of configurations for popular editors.
+
+### VS Code
+
+To use VS Code as your editor, you don't need to do anything, it's the default editor.
+
+### WebStorm
+
+To use WebStorm as your editor, you can use the following configuration:
+
+```ts
+import { exec } from "node:child_process";
+import { cwd } from "node:process";
+
+const editor = {
+  name: "WebStorm",
+  open(path, lineNumber) { 
+    exec(
+      `webstorm "${process.cwd()}/${path}" --line ${lineNumber ? `--line ${lineNumber}` : ""}`.replace(
+        /\$/g,
+        "\\$",
+      ),
+    );
+  },
+};
+```
+
+### GoLand
+
+To use WebStorm as your editor, you can use the following configuration:
+
+```ts
+import { exec } from "node:child_process";
+import { cwd } from "node:process";
+
+const editor = {
+  name: "WebStorm",
+  open(path, lineNumber) {
+    if (!path) return;
+    exec(
+      `goland "${process.cwd()}/${path}" ${lineNumber ? `--line ${lineNumber}` : ""}` 
+    );
+  },
+};
+```

src/client/components/EditorButton.tsx

@@ -0,0 +1,21 @@
+import clsx from "clsx";
+
+interface EditorButtonProps {
+  onClick: () => void;
+  name: string;
+}
+
+const EditorButton = ({ name, onClick }: EditorButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      className={clsx(
+        "rdt-flex rdt-cursor-pointer rdt-items-center rdt-gap-1 rdt-rounded rdt-border rdt-border-[#1F9CF0] rdt-px-2.5 rdt-py-0.5 rdt-text-sm rdt-font-medium rdt-text-[#1F9CF0]"
+      )}
+    >
+      Open in {name}
+    </button>
+  );
+};
+
+export { EditorButton };

src/client/components/RouteSegmentInfo.tsx

@@ -3,14 +3,14 @@ import { parseCacheControlHeader } from "../../server/parser.js";
 import { useServerInfo, useSettingsContext } from "../context/useRDTContext.js";
 import { isLayoutRoute } from "../utils/routing.js";
 import { CacheInfo } from "./CacheInfo.js";
-import { VsCodeButton } from "./VScodeButton.js";
+import { EditorButton } from './EditorButton.js';
 import { JsonRenderer } from "./jsonRenderer.js";
 import { ServerRouteInfo, defaultServerRouteState } from "../context/rdtReducer.js";
 import { InfoCard } from "./InfoCard.js";
 import { useDevServerConnection } from "../hooks/useDevServerConnection.js";
 import { Icon } from "./icon/Icon.js";
 import clsx from "clsx";
-import { OpenSourceData } from "../../vite/types.js";
+import { OpenSourceData } from "../../vite/editor.js";
 
 const getLoaderData = (data: string | Record<string, any>) => {
   if (typeof data === "string") {
@@ -69,7 +69,8 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
   const loaderData = getLoaderData(route.data as any);
   const serverInfo = server?.routes?.[route.id];
   const isRoot = route.id === "root";
-  const { setSettings } = useSettingsContext();
+  const { setSettings, settings } = useSettingsContext();
+  const editorName = settings.editorName;
   const cacheControl = serverInfo?.lastLoader.responseHeaders
     ? parseCacheControlHeader(new Headers(serverInfo?.lastLoader.responseHeaders))
     : undefined;
@@ -114,7 +115,8 @@ export const RouteSegmentInfo = ({ route, i }: { route: UIMatch<unknown, unknown
             />
           )}
           {isConnected && import.meta.env.DEV && (
-            <VsCodeButton
+            <EditorButton
+              name={editorName}
               onClick={() =>
                 sendJsonMessage({
                   type: "open-source",

src/client/context/RDTContext.tsx

@@ -65,7 +65,7 @@ export const getSettings = () => {
   };
 };
 
-export const getExistingStateFromStorage = (config?: RdtClientConfig) => {
+export const getExistingStateFromStorage = (config?: RdtClientConfig & { editorName?: string }) => {
   const existingState = getStorageItem(REMIX_DEV_TOOLS_STATE);
   const settings = getSettings();
   const { detachedWindow, detachedWindowOwner } = detachedModeSetup();
@@ -76,6 +76,7 @@ export const getExistingStateFromStorage = (config?: RdtClientConfig) => {
       ...initialState.settings,
       ...config,
       ...settings,
+      editorName: config?.editorName ?? initialState.settings.editorName,
       liveUrls: config?.liveUrls ?? initialState.settings.liveUrls, 
     },
     detachedWindow,
@@ -85,7 +86,7 @@ export const getExistingStateFromStorage = (config?: RdtClientConfig) => {
   return state;
 };
 
-export type RdtClientConfig = Pick<RemixDevToolsState["settings"], "defaultOpen" | "expansionLevel" | "liveUrls" | "position" | "height" | "minHeight" | "maxHeight" | "hideUntilHover" | "panelLocation" | "requireUrlFlag" | "urlFlag" | "routeBoundaryGradient">  
+export type RdtClientConfig = Pick<RemixDevToolsState["settings"], "defaultOpen" | "expansionLevel" | "liveUrls" | "position" | "height" | "minHeight" | "maxHeight" | "hideUntilHover" | "panelLocation" | "requireUrlFlag" | "urlFlag" | "routeBoundaryGradient">
 
 
 export const RDTContextProvider = ({ children, config }: ContextProps) => { 

src/client/context/rdtReducer.ts

@@ -83,6 +83,7 @@ export type RemixDevToolsState = {
      * The route boundary gradient color to use
      * @default "silver"
      */
+    editorName: string;
     routeBoundaryGradient: keyof typeof ROUTE_BOUNDARY_GRADIENTS;
     routeWildcards: RouteWildcards;
     activeTab: Tabs;
@@ -158,6 +159,7 @@ export const initialState: RemixDevToolsState = {
   settings: {
     liveUrls: [],
     liveUrlsPosition: "bottom-left",
+    editorName: "VSCode",
     routeBoundaryGradient: "silver",
     routeWildcards: {},
     activeTab: "page",

src/test-apps/remix-vite/vite.config.ts

@@ -9,6 +9,7 @@ const config = defineRdtConfig({
   panelLocation: "top",
   position: "top-right",
   requireUrlFlag: false,
+
   liveUrls: [
     { url: "https://forge42.dev", name: "Production" }, 
     {
@@ -20,6 +21,7 @@ const config = defineRdtConfig({
   },
   pluginDir: "./plugins",
   includeInProd: true,
+
 
 }, ); 
 export default defineConfig({