feat(console): open error links using the active code editor (#4084)

Use [launch-editor](https://www.npmjs.com/package/launch-editor) to open the wing file in the currently active code editor.

https://github.com/winglang/wing/assets/5547636/cda55017-ded4-4b85-80f0-875465d7227a

resolves #4067

*By submitting this pull request, I confirm that my contribution is made under the terms of the [Wing Cloud Contribution License](https://github.com/winglang/wing/blob/main/CONTRIBUTION_LICENSE.md)*.

Author: polamoros

apps/wing-console/console/server/package.json

@@ -22,6 +22,7 @@
     "@winglang/sdk": "workspace:^",
     "codespan-wasm": "^0.4.0",
     "debug": "^4.3.4",
+    "launch-editor": "^2.6.0",
     "ms": "^2.1.3"
   },
   "devDependencies": {

apps/wing-console/console/server/src/launch-editor.d.ts

@@ -0,0 +1,3 @@
+declare module "launch-editor" {
+  export default function launchEditor(file: string): void;
+}

apps/wing-console/console/server/src/router/app.ts

@@ -601,12 +601,23 @@ export const createAppRouter = () => {
         }),
       )
       .mutation(async ({ ctx, input }) => {
-        ctx.emitter.emit("openFileInEditor", {
-          path: input.path,
-          line: input.line,
-          column: input.column,
-        });
+        if (ctx.emitter.listenerCount("openFileInEditor") > 0) {
+          ctx.emitter.emit("openFileInEditor", {
+            path: input.path,
+            line: input.line,
+            column: input.column,
+          });
+          return;
+        }
+        const { default: launch } = await import("launch-editor");
+        launch(`${input.path}:${input.line}:${input.column}`);
       }),
+
+    /**
+     * Warning! Subscribing to this procedure will override the default behavior of opening files in the editor
+     * provided by the "app.openFileInEditor" procedure.
+     * Needed to manage file opening within the vs-code extension.
+     */
     "app.openFileInEditorSubscription": createProcedure.subscription(
       ({ ctx }) => {
         return observable<FileLink>((emit) => {

apps/wing-console/console/ui/src/features/console-logs.tsx

@@ -9,10 +9,7 @@ import classNames from "classnames";
 import throttle from "lodash.throttle";
 import { Fragment, useEffect, useRef, useState } from "react";
 
-import {
-  OpenFileInEditorButton,
-  useFileLink,
-} from "../shared/use-file-link.js";
+import { OpenFileInEditorButton } from "../shared/use-file-link.js";
 import { createHtmlLink } from "../shared/use-file-link.js";
 
 const dateTimeFormat = new Intl.DateTimeFormat(undefined, {

apps/wing-console/console/ui/src/shared/use-file-link.tsx

@@ -11,8 +11,7 @@ export const createHtmlLink = (
     .replaceAll(
       /\B((?:[a-z]:)?[/\\]\S+):(\d+):(\d+)/gi,
       (match, path, line, column) => {
-        const link = `vscode://file/${path}:${line}:${column}`;
-        return `<a class="${className}" href="${link}" path="${path}" line="${line}" column="${column}" >${match}</a>`;
+        return `<a class="${className}" path="${path}" line="${line}" column="${column}" >${match}</a>`;
       },
     )
     .replaceAll(/(\r\n|\n|\r)/gm, expanded ? "<br />" : "\n");
@@ -25,6 +24,7 @@ export const OpenFileInEditorButton = ({ children }: PropsWithChildren) => {
     <button
       className="appearance-none text-left"
       onClick={(event) => {
+        event.preventDefault();
         const target = event.target as HTMLElement;
         if (target.tagName === "A") {
           const path = target.getAttribute("path")!;