feat: make errors copyable (#156)

* feat: make errors copyable

Author: Vinayak9769

apps/vscode-extension/src/extension.ts

@@ -1,6 +1,8 @@
 import { has } from "@pretty-ts-errors/utils";
 import { formatDiagnostic } from "@pretty-ts-errors/vscode-formatter";
 import {
+  commands,
+  env,
   ExtensionContext,
   languages,
   MarkdownString,
@@ -18,6 +20,16 @@ export function activate(context: ExtensionContext) {
   const registeredLanguages = new Set<string>();
   const converter = createConverter();
 
+  // register the copy command
+  context.subscriptions.push(
+    commands.registerCommand(
+      "prettyTsErrors.copyError",
+      async (errorMessage: string) => {
+        await env.clipboard.writeText(errorMessage);
+      }
+    )
+  );
+
   registerSelectedTextHoverProvider(context);
 
   context.subscriptions.push(

packages/vscode-formatter/src/components/title.ts

@@ -11,7 +11,8 @@ export const title = (diagnostic: Diagnostic) => d/*html*/ `
             <span style="color:#5f5f5f;">
             (TS${diagnostic.code}) 
             ${errorCodeExplanationLink(diagnostic.code)}  | 
-            ${errorMessageTranslationLink(diagnostic.message)}
+            ${errorMessageTranslationLink(diagnostic.message)}  | 
+            ${copyErrorLink(diagnostic.message)}
             </span>
           `
         : ""
@@ -38,3 +39,12 @@ const errorMessageTranslationLink = (message: Diagnostic["message"]) => {
       </span>
     </a>`;
 };
+
+const copyErrorLink = (message: Diagnostic["message"]) => {
+  const args = encodeURIComponent(JSON.stringify(message));
+  return d/*html*/ `
+    <a title="Copy error to clipboard" href="command:prettyTsErrors.copyError?${args}">
+      <span class="codicon codicon-copy">
+      </span>
+    </a>`;
+};