Feature - button-to-open-error-in-new-tab

package.json

@@ -56,6 +56,9 @@
         "scopeName": "source.type",
         "path": "./syntaxes/type.tmGrammar.json"
       }
+    ],
+    "markdown.previewStyles": [
+      "./dist/extension.css"
     ]
   },
   "scripts": {

src/components/title.ts

@@ -2,15 +2,18 @@ import { Diagnostic } from "vscode-languageserver-types";
 import { compressToEncodedURIComponent, d } from "../utils";
 import { KNOWN_ERROR_NUMBERS } from "./consts/knownErrorNumbers";
 import { miniLine } from "./miniLine";
+import { Uri } from 'vscode';
+import { PRETTY_TS_ERRORS_SCHEME } from '../provider/textDocumentProvider';
 
-export const title = (diagnostic: Diagnostic) => d/*html*/ `
+export const title = (diagnostic: Diagnostic, uri: Uri) => d/*html*/ `
     <span style="color:#f96363;">⚠ Error </span>${
       typeof diagnostic.code === "number"
         ? d/*html*/ `
             <span style="color:#5f5f5f;">
-            (TS${diagnostic.code}) 
-            ${errorCodeExplanationLink(diagnostic.code)}  | 
+            (TS${diagnostic.code})
+            ${errorCodeExplanationLink(diagnostic.code)}  |
             ${errorMessageTranslationLink(diagnostic.message)}
+            ${errorMessageInANewFile(diagnostic, uri)}
             </span>
           `
         : ""
@@ -37,3 +40,15 @@ export const errorMessageTranslationLink = (message: Diagnostic["message"]) => {
       </span>
     </a>`;
 };
+
+export const errorMessageInANewFile = (diagnostic: Diagnostic, uri: Uri) => {
+  const range = `${diagnostic.range.start.line}:${diagnostic.range.start.character}-${diagnostic.range.end.line}:${diagnostic.range.end.character}`;
+  const virtualFileUri = Uri.parse(`${PRETTY_TS_ERRORS_SCHEME}:${encodeURIComponent(uri.fsPath + '.md')}?range=${encodeURIComponent(range)}`);
+  const args = [virtualFileUri];
+  const href = Uri.parse(`command:markdown.showPreview?${encodeURIComponent(JSON.stringify(args))}`);
+  return d/*html*/ `
+    <a title="Open in new tab" href="${href}">
+      <span class="codicon codicon-new-file">
+      </span>
+    </a>`;
+};

src/extension.css

@@ -0,0 +1,3 @@
+span.hljs-title.class_ {
+    color: #4ec9b0
+}

src/extension.ts

@@ -4,6 +4,7 @@ import {
   MarkdownString,
   Range,
   window,
+  workspace,
 } from "vscode";
 import { createConverter } from "vscode-languageclient/lib/common/codeConverter";
 import { formatDiagnostic } from "./format/formatDiagnostic";
@@ -12,6 +13,8 @@ import { hoverProvider } from "./provider/hoverProvider";
 import { registerSelectedTextHoverProvider } from "./provider/selectedTextHoverProvider";
 import { uriStore } from "./provider/uriStore";
 import { has } from "./utils";
+import { PRETTY_TS_ERRORS_SCHEME, textDocumentContentProvider } from './provider/textDocumentProvider';
+import './extension.css'
 
 const cache = new Map();
 
@@ -21,6 +24,10 @@ export function activate(context: ExtensionContext) {
 
   registerSelectedTextHoverProvider(context);
 
+  context.subscriptions.push(
+    workspace.registerTextDocumentContentProvider(PRETTY_TS_ERRORS_SCHEME, textDocumentContentProvider),
+  );
+
   context.subscriptions.push(
     languages.onDidChangeDiagnostics(async (e) => {
       e.uris.forEach((uri) => {
@@ -49,7 +56,7 @@ export function activate(context: ExtensionContext) {
 
             if (!formattedMessage) {
               const markdownString = new MarkdownString(
-                formatDiagnostic(converter.asDiagnostic(diagnostic), prettify)
+                formatDiagnostic(converter.asDiagnostic(diagnostic), uri, prettify)
               );
 
               markdownString.isTrusted = true;

src/format/embedSymbolLinks.ts

@@ -14,6 +14,7 @@ export function embedSymbolLinks(diagnostic: Diagnostic): Diagnostic {
   if (!symbol) {
     return diagnostic;
   }
+
   return {
     ...diagnostic,
     message: diagnostic.message.replaceAll(

src/format/formatDiagnostic.ts

@@ -4,15 +4,17 @@ import { d } from "../utils";
 import { embedSymbolLinks } from "./embedSymbolLinks";
 import { formatDiagnosticMessage } from "./formatDiagnosticMessage";
 import { identSentences } from "./identSentences";
+import { Uri } from 'vscode';
 
 export function formatDiagnostic(
   diagnostic: Diagnostic,
+  uri: Uri,
   format: (type: string) => string
 ) {
   const newDiagnostic = embedSymbolLinks(diagnostic);
 
   return d/*html*/ `
-    ${title(diagnostic)}
+    ${title(diagnostic, uri)}
     <span>
     ${formatDiagnosticMessage(identSentences(newDiagnostic.message), format)}
     </span>

src/provider/selectedTextHoverProvider.ts

@@ -10,6 +10,7 @@ import { miniLine } from "../components";
 import { formatDiagnostic } from "../format/formatDiagnostic";
 import { prettify } from "../format/prettify";
 import { d } from "../utils";
+import { uriStore } from './uriStore';
 
 /**
  * Register an hover provider in debug only.
@@ -47,14 +48,21 @@ export function registerSelectedTextHoverProvider(context: ExtensionContext) {
                           source: "ts",
                           code: 1337,
                         }),
+                        document.uri,
                         prettify
                       )
                   ),
                 ]
               : [];
 
-          contents[0].isTrusted = true;
-          contents[0].supportHtml = true;
+          if (contents.length) {
+            contents[0].isTrusted = true;
+            contents[0].supportHtml = true;
+          }
+
+          if (range) {
+            uriStore[document.uri.fsPath] = [{ range, contents }];
+          }
 
           return {
             contents,
@@ -65,7 +73,7 @@ export function registerSelectedTextHoverProvider(context: ExtensionContext) {
   );
 }
 
-const debugHoverHeader = d/*html*/ `                        
+const debugHoverHeader = d/*html*/ `
   <span style="color:#f96363;">
     <span class="codicon codicon-debug"></span>
     Formatted selected text (debug only)

src/provider/textDocumentProvider.ts

@@ -0,0 +1,43 @@
+import { Range, TextDocumentContentProvider } from 'vscode';
+import { uriStore } from './uriStore';
+
+export const PRETTY_TS_ERRORS_SCHEME = 'pretty-ts-errors';
+
+export const textDocumentContentProvider: TextDocumentContentProvider = {
+    provideTextDocumentContent(uri) {
+        const searchParams = new URLSearchParams(uri.query);
+        const fsPath = uri.fsPath.replace(/\.md$/, '');
+        if (!searchParams.has('range')) {
+            return `range query parameter is missing for uri: ${uri}`;
+        }
+        const items = uriStore[fsPath];
+        if (!items) {
+            return `no diagnostics found for ${fsPath}`;
+        }
+        const range = createRangeFromString(searchParams.get('range')!);
+        const item = items.find((item) => {
+            return item.range.isEqual(range);
+        });
+        if (!item) {
+            return `no diagnostic found for ${fsPath} with range ${JSON.stringify(range)}`;
+        }
+        const content = item.contents.map(
+            (content) => content.value
+                            .replaceAll("```type\n", '```typescript\n'))
+                            .join('\n');
+        /*
+            Explanation
+            At this point the user has seen the tooltip and needs to see the markdown preview
+            The preview needed ```type to be formatted correctly to the user but this is no longer needed.
+            The markdown preview needs ```typescript to be formatted correctly.
+        */
+        return content;
+    },
+};
+
+function createRangeFromString(range: string) {
+    const [start, end] = range.split('-');
+    const [startLine, startCharacter] = start.split(':').map(Number);
+    const [endLine, endCharacter] = end.split(':').map(Number);
+    return new Range(startLine, startCharacter, endLine, endCharacter);
+}