reimplement button-to-open-in-new-tab + custom webview #133 (monorepo)

apps/vscode-extension/language-configuration.json

@@ -0,0 +1,40 @@
+{
+  "comments": {
+    "lineComment": {
+      "comment": "//"
+    },
+    "blockComment": ["/*", "*/"]
+  },
+
+  "brackets": [
+    ["{", "}"],
+
+    ["[", "]"],
+
+    ["(", ")"]
+  ],
+
+  "autoClosingPairs": [
+    ["{", "}"],
+
+    ["[", "]"],
+
+    ["(", ")"],
+
+    ["\"", "\""],
+
+    ["'", "'"]
+  ],
+
+  "surroundingPairs": [
+    ["{", "}"],
+
+    ["[", "]"],
+
+    ["(", ")"],
+
+    ["\"", "\""],
+
+    ["'", "'"]
+  ]
+}

apps/vscode-extension/package.json

@@ -45,9 +45,35 @@
     "dist/**/*",
     "assets/**/*",
     "syntaxes/**/*",
+    "webview/**/*",
     "LICENSE"
   ],
   "contributes": {
+    "views": {
+      "explorer": [
+        {
+          "id": "prettyTsErrors.markdownPreview",
+          "icon": "$(open-preview)",
+          "name": "Pretty TypeScript Error",
+          "type": "webview",
+          "visibility": "collapsed"
+        }
+      ]
+    },
+    "commands": [
+      {
+        "command": "prettyTsErrors.openMarkdownPreview",
+        "title": "Open the diagnostic in a new tab",
+        "category": "Pretty TS Errors",
+        "enablement": "!isCommandPanel"
+      },
+      {
+        "command": "prettyTsErrors.revealSelection",
+        "title": "Reveal the given selection",
+        "category": "Pretty TS Errors",
+        "enablement": "!isCommandPanel"
+      }
+    ],
     "languages": [
       {
         "id": "type",
@@ -78,12 +104,16 @@
     "watch-tests": "tsc -p . -w --outDir out",
     "pretest": "npm run compile-tests && npm run compile && npm run lint",
     "lint": "tsc -p . --noEmit",
-    "test": "node ./out/test/runTest.js"
+    "test": "node ./out/test/runTest.js",
+    "webview": "npx http-server ./webview -o -a localhost -p 8080"
   },
   "devDependencies": {
+    "@shikijs/types": "^3.13.0",
     "@types/mocha": "^10.0.10",
     "@types/node": "^16.11.68",
     "@types/vscode": "^1.77.0",
+    "@types/vscode-webview": "^1.57.5",
+    "@vscode/codicons": "^0.0.41",
     "@vscode/test-electron": "^2.5.2",
     "esbuild": "^0.25.11",
     "glob": "^11.0.3",
@@ -93,6 +123,8 @@
   "dependencies": {
     "@pretty-ts-errors/formatter": "*",
     "@pretty-ts-errors/vscode-formatter": "*",
-    "vscode-languageclient": "^9.0.1"
+    "shiki": "^3.13.0",
+    "vscode-languageclient": "^9.0.1",
+    "vscode-shiki-bridge": "^0.2.0"
   }
 }

apps/vscode-extension/src/commands/revealSelection.ts

@@ -0,0 +1,75 @@
+import {
+  type ExtensionContext,
+  commands,
+  Range,
+  Selection,
+  TabInputText,
+  TabInputWebview,
+  TextEditorRevealType,
+  Uri,
+  ViewColumn,
+  window,
+  workspace,
+} from "vscode";
+import { MarkdownWebviewProvider } from "../provider/markdownWebviewProvider";
+
+export function registerRevealSelection(context: ExtensionContext) {
+  context.subscriptions.push(
+    commands.registerCommand(
+      "prettyTsErrors.revealSelection",
+      async (uri: Uri, range: Range) => {
+        // ensure these are real instances
+        uri = Uri.from({ ...uri });
+        range = new Range(
+          range.start.line,
+          range.start.character,
+          range.end.line,
+          range.end.character
+        );
+
+        // default behaviour is to use the active view column
+        let viewColumn = ViewColumn.Active;
+
+        // detect if the active tab is our preview webview
+        let isFromMarkdownPreviewWebview = false;
+        const activeTab = window.tabGroups.activeTabGroup.activeTab;
+        if (activeTab && activeTab.input instanceof TabInputWebview) {
+          // For an unknown reason this string is prefixed with something like `mainthread-${viewType}`
+          // endsWith should handle a full match and the prefixed versions
+          if (
+            activeTab.input.viewType.endsWith(MarkdownWebviewProvider.viewType)
+          ) {
+            isFromMarkdownPreviewWebview = true;
+          }
+        }
+
+        if (isFromMarkdownPreviewWebview) {
+          // find a tab group where the file is open, then use that view column for the `vscode.open` command
+          const tabs = window.tabGroups.all.flatMap(
+            (tabGroup) => tabGroup.tabs
+          );
+          const tabWithFileOpen = tabs.find((tab) => {
+            if (tab.input instanceof TabInputText) {
+              return tab.input.uri.toString() === uri.toString();
+            }
+            return false;
+          });
+          if (tabWithFileOpen) {
+            viewColumn = tabWithFileOpen.group.viewColumn;
+          } else {
+            // If markdown preview is not open on 1, open the link in 1, else open the link in 2
+            viewColumn =
+              activeTab!.group.viewColumn !== 1
+                ? ViewColumn.One
+                : ViewColumn.Two;
+          }
+        }
+
+        return commands.executeCommand("vscode.open", uri, {
+          selection: range,
+          viewColumn,
+        });
+      }
+    )
+  );
+}

apps/vscode-extension/src/extension.ts

@@ -11,6 +11,10 @@ import { createConverter } from "vscode-languageclient/lib/common/codeConverter"
 import { hoverProvider } from "./provider/hoverProvider";
 import { registerSelectedTextHoverProvider } from "./provider/selectedTextHoverProvider";
 import { uriStore } from "./provider/uriStore";
+import { registerTextDocumentProvider } from "./provider/textDocumentContentProvider";
+import { registerMarkdownWebviewProvider } from "./provider/markdownWebviewProvider";
+import { registerRevealSelection } from "./commands/revealSelection";
+import { registerWebviewViewProvider } from "./provider/webviewWebviewProvider";
 
 const cache = new Map();
 
@@ -19,6 +23,10 @@ export function activate(context: ExtensionContext) {
   const converter = createConverter();
 
   registerSelectedTextHoverProvider(context);
+  registerTextDocumentProvider(context);
+  registerMarkdownWebviewProvider(context);
+  registerWebviewViewProvider(context);
+  registerRevealSelection(context);
 
   context.subscriptions.push(
     languages.onDidChangeDiagnostics(async (e) => {
@@ -48,7 +56,7 @@ export function activate(context: ExtensionContext) {
 
             if (!formattedMessage) {
               const markdownString = new MarkdownString(
-                formatDiagnostic(converter.asDiagnostic(diagnostic))
+                formatDiagnostic(converter.asDiagnostic(diagnostic), uri)
               );
 
               markdownString.isTrusted = true;

apps/vscode-extension/src/globals.d.ts

@@ -0,0 +1,13 @@
+// "@types/node": "^16.11.68" misses a bunch of global declarations, this file fixes the one's we use.
+
+declare global {
+  declare const TextDecoder: new (
+    encoding?: string,
+    options?: {
+      fatal?: boolean | undefined;
+      ignoreBOM?: boolean | undefined;
+    }
+  ) => import("util").TextDecoder;
+}
+
+export {};