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

* reimplement #133 in the monorepo setup

* port the changes of web-preview-poc; integrate vscode-shiki-bridge

* stich everything together

* Get the feature working

* implement webview as seperate files, implement csp with a lot of headaches

* finalize implementation

* implement the webviewviewprovider

* finalize webview parts

* remove obsolete files

* remove obsolete file

* implement proper markdown rendering

* bump vscode-shiki-bridge to v0.3.0

* implement vscode-shiki-bridge

* Few minor fixes

* fix copy type button

* only hide new tab button in the new tab markdown preview

* use whitelisted badge urls

* avoid triggering complete rerenders of the webview

* decrease vertical padding

* keep track of shown diagnostic per webview, to ensure the panel is refreshed when the original diagnostic no longer exists

* add missing .delete on the weakmap

* add another .delete to onDidDispose to prevent leaking memory

* fix background color of the panel preview variant

* bump version in lock

* Remove icons not in use to reduce size

---------

Co-authored-by: Yoav Balasiano <yoavbls@gmail.com>

Author: kevinramharak

README.md

@@ -11,11 +11,11 @@
 <b>Make TypeScript errors prettier and human-readable in VSCode.</b>
 
 [![GitHub stars](https://img.shields.io/github/stars/yoavbls/pretty-ts-errors.svg?style=social&label=Star)](https://GitHub.com/yoavbls/pretty-ts-errors/stargazers/)
-[![Visual Studio Code](https://custom-icon-badges.demolab.com/badge/Visual%20Studio%20Code-0078d7.svg?logo=vsc&logoColor=white)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)&nbsp;[![GitHub license](https://badgen.net/github/license/yoavbls/pretty-ts-errors)](https://github.com/yoavbls/pretty-ts-errors/blob/main/LICENSE)&nbsp;[![Visual Studio Code](https://img.shields.io/visual-studio-marketplace/i/yoavbls.pretty-ts-errors)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)
+[![Visual Studio Code][vsc]](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)&nbsp;[![GitHub license](https://badgen.net/github/license/yoavbls/pretty-ts-errors)](https://github.com/yoavbls/pretty-ts-errors/blob/main/LICENSE)&nbsp;[![Visual Studio Code](https://img.shields.io/visual-studio-marketplace/i/yoavbls.pretty-ts-errors)](https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors)
 <a href="https://github.com/yoavbls/pretty-ts-errors/discussions/43#user-content-jetbrains-support"><img src="https://cdn.icon-icons.com/icons2/2530/PNG/512/jetbrains_webstorm_button_icon_151873.png" height="20" alt="Webstorm logo"></a>
-[![Cursor](https://custom-icon-badges.demolab.com/badge/Cursor-000000?logo=cursor-ai-white)](https://open-vsx.org/extension/yoavbls/pretty-ts-errors)
+[![Cursor](https://img.shields.io/badge/Cursor-000000?logo=cursor)](https://open-vsx.org/extension/yoavbls/pretty-ts-errors)
 
-TypeScript errors become messier as the complexity of types increases. At some point, TypeScript will throw on you a shitty heap of parentheses and `"..."`.  
+TypeScript errors become messier as the complexity of types increases. At some point, TypeScript will throw on you a shitty heap of parentheses and `"..."`.
 This extension will help you understand what's going on. For example, in this relatively simple error:
 
 <img src="./assets/this.png" width="340.438px" />&nbsp; &nbsp; <img src="./assets/instead-of-that.png" width="350px" />
@@ -61,10 +61,10 @@ Follow the instructions [there](./docs/hide-original-errors.md). unfortunately,
 
 ## Why isn't it trivial
 
-1. TypeScript errors contain types that are not valid in TypeScript.  
+1. TypeScript errors contain types that are not valid in TypeScript.
    Yes, these types include things like `... more ...`, `{ ... }`, etc in an inconsistent manner. Some are also cutting in the middle because they're too long.
 2. Types can't be syntax highlighted in code blocks because the part of `type X = ...` is missing, so I needed to create a new TextMate grammar, a superset of TypeScript grammar called `type`.
-3. VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.  
+3. VSCode markdown blocks all styling options, so I had to find hacks to style the error messages. e.g., there isn't an inlined code block on VSCode markdown, so I used a code block inside a codicon icon, which is the only thing that can be inlined. That's why it can't be copied. but it isn't a problem because you can still hover on the error and copy things from the original error pane.
    <img src="./assets/errors-hover.png" width="600" />
 
 ## Hype section
@@ -82,7 +82,7 @@ Follow the instructions [there](./docs/hide-original-errors.md). unfortunately,
   </picture>
 </a>
 <a href="https://twitter.com/t3dotgg/status/1647759462709747713">
-  <picture>    
+  <picture>
     <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/main/assets/mentions/theo-dark.png#gh-dark-mode-only">
     <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/main/assets/mentions/theo-light.png#gh-light-mode-only">
     <img width="400" src="https://raw.githubusercontent.com/yoavbls/pretty-ts-errors/main/assets/mentions/theo-dark.png#gh-dark-mode-only" alt="Theo's tweet">
@@ -104,13 +104,13 @@ Follow the instructions [there](./docs/hide-original-errors.md). unfortunately,
       <td align="center">
         <a href="https://github.com/kentcdodds">
           <img src="https://images.weserv.nl/?url=github.com/kentcdodds.png&fit=cover&mask=circle" width="80"><br>
-          Kent C. Dodds  
+          Kent C. Dodds
         <a/>
       </td>
       <td align="center">
         <a href="https://github.com/mattpocock">
           <img src="https://images.weserv.nl/?url=github.com/mattpocock.png&fit=cover&mask=circle" width="80"><br>
-          Matt Pocock  
+          Matt Pocock
         <a/>
       </td>
       <td align="center">
@@ -122,7 +122,7 @@ Follow the instructions [there](./docs/hide-original-errors.md). unfortunately,
       <td align="center">
         <a href="https://github.com/tannerlinsley">
           <img src="https://images.weserv.nl/?url=github.com/tannerlinsley.png&fit=cover&mask=circle" width="80"><br>
-          Tanner Linsley  
+          Tanner Linsley
         <a/>
       </td>
       <td align="center">
@@ -137,10 +137,12 @@ Follow the instructions [there](./docs/hide-original-errors.md). unfortunately,
 
 ## Sponsorship
 
-Every penny will be invested in other contributors to the project, especially ones that work  
+Every penny will be invested in other contributors to the project, especially ones that work
 on things that I can't be doing myself like adding support to the extension for other IDEs 🫂
 
 ## Contribution
 
-Help by upvoting or commenting on issues we need to be resolved [here](https://github.com/yoavbls/pretty-ts-errors/discussions/43)  
+Help by upvoting or commenting on issues we need to be resolved [here](https://github.com/yoavbls/pretty-ts-errors/discussions/43)
 Any other contribution is welcome. Feel free to open any issue / PR you think.
+
+[vsc]: https://img.shields.io/badge/Visual%20Studio%20Code-0078d7?logoColor=white&logo=data:image/png;base64,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

apps/vscode-extension/package.json

@@ -3,7 +3,7 @@
   "displayName": "Pretty TypeScript Errors",
   "publisher": "YoavBls",
   "description": "Make TypeScript errors prettier and more human-readable in VSCode",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "icon": "assets/icon.png",
   "repository": {
     "type": "git",
@@ -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,9 @@
   "dependencies": {
     "@pretty-ts-errors/formatter": "*",
     "@pretty-ts-errors/vscode-formatter": "*",
-    "vscode-languageclient": "^9.0.1"
+    "markdown-exit": "^1.0.0-beta.6",
+    "shiki": "^3.13.0",
+    "vscode-languageclient": "^9.0.1",
+    "vscode-shiki-bridge": "^0.3.0"
   }
-}
+}

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

@@ -0,0 +1,13 @@
+import { commands, env, window, type ExtensionContext } from "vscode";
+
+export function registerCopyError(context: ExtensionContext) {
+  context.subscriptions.push(
+    commands.registerCommand(
+      "prettyTsErrors.copyError",
+      async (errorMessage: string) => {
+        await env.clipboard.writeText(errorMessage);
+        window.showInformationMessage("Copied error message to clipboard!");
+      }
+    )
+  );
+}

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

@@ -0,0 +1,72 @@
+import {
+  type ExtensionContext,
+  commands,
+  Range,
+  TabInputText,
+  TabInputWebview,
+  Uri,
+  ViewColumn,
+  window,
+} 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,
+        });
+      }
+    )
+  );
+}