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

MichaelDimmitt · 2025-06-25T23:52:35Z

This pr adds a button to open the error shown in the tooltip as a file in vs-code
The change is built on top of an attempt made by @kevinramharak

@kevinramharak mentioned the following blocker in issue #107

I have a 99% working implementation with the markdown code block syntax highlighting still missing:

In my most recent commit I was able to get typescript formatted correctly in the markdown file.
Hopefully this helps get the ball rolling on this issue.

Let me know if you want an alternative approach @yoavbls @kevinramharak
Or if I need to write tests or provide any other information.

Happy to make changes or for you guys to make changes.
And thanks to @kevinramharak for being transparent with his code.

I learned how to debug the vs-code extension from looking at his pr and reading through the vs-code guide https://code.visualstudio.com/api/get-started/your-first-extension.

Example 1

Example 2

Here is the markdown file generated in Example 2

MichaelDimmitt · 2025-06-27T03:13:29Z

Side note: It might even be helpful if I added a detail to the readme on how to contribute to the project.
Here is how I was debugging the project:

1. create a vscode profile so you do not have any extensions installed.

clone it down
cd into the folder
run npm install
open vscode for the extension folder: code .
press f5 to activate the extension
in the vscode window that pops up you can open a folder/with typescript files and hover over issues and see it in action. also check your extensions tab in that window to make sure there are no other conflicting extensions adding noise to the debugging environment.

kevinramharak · 2025-06-27T10:03:21Z

Thanks for your PR. I have not been able to work on this, but ill take a look this weekend

kevinramharak · 2025-06-29T11:23:39Z

@MichaelDimmitt I think this is good workaround to deliver the feature in a working state, but it does circumvent the additions in the package.json.

The addition of:

      {
          "language": "type-markdown-injection",
          "scopeName": "markdown.type.codeblock",
          "path": "./syntaxes/type-markdown-injection.tmGrammar.json",
          "injectTo": [
              "text.html.markdown"
          ],
          "embeddedLanguages": {
              "meta.embedded.block.type": "type"
          }
      }

Is supposed to register ```type as a code block where the highlighting is based on the type-markdown-injection.tmGrammar.json definition. I could not figure out why it doesn't get used, even when using examples copied verbatim. Its a bit niche, and hard to debug. So I don't expect to have the time to figure it out. If you have the time, maybe give it a try.

If not I think this is a good alternative, that I had not considered.

MichaelDimmitt · 2025-06-29T20:05:21Z

potentially helpful links:
https://code.visualstudio.com/api/references/contribution-points#contributes.grammars
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#scope-inspector

I think the core issue is that there is no grammar for markdown-preview.
When you modify the grammar for markdown that is for the .md file not the rendered preview.

https://code.visualstudio.com/Docs/languages/markdown#_markdown-preview

With that in mind I looked at one of the extensions that was listed in the extending markdown preview section.
https://code.visualstudio.com/Docs/languages/markdown#_extending-the-markdown-preview

It looks like we to add a css file in the package.json configuration.
http://github.com/mjbvz/vscode-github-markdown-preview-style/blob/master/package.json#L31-L34

This is the direction I am heading. Let me know if you think it is on the right track @kevinramharak

I think one clue here is that you can run Developer: Inspect Editor Tokens and Scopes on the .md file. But that command is unavailable on the rendered markdown preview.

MichaelDimmitt · 2025-06-30T12:07:11Z

Update:
I went to Developer: Open Webview Developer Tools and inspected the html + css that loaded.

It looks like it would not be a simple css change because when the language is typescript the preview unfurls to a bunch of html elements. But when it is language "type" it just renders in a pre + code tag.

MichaelDimmitt · 2025-06-30T13:17:39Z

I looked at another plugin
https://github.com/mjbvz/vscode-github-markdown-preview - which led me to:
https://github.com/mjbvz/vscode-markdown-emoji/blob/master/notebook/index.ts#L16

It looks like vscode-markdown-emoji re-writes the markdown using the following packages.
https://github.com/markdown-it/markdown-it-emoji
https://github.com/markdown-it/markdown-it

MichaelDimmitt · 2025-06-30T13:44:50Z

I guess the question is,
Does it make sense to re-write the markdown that is rendered in vscode by default so that
"```type"

acts like:
"```typescript"

Or should the workaround solution that just replaces the word be used?
I am leaning toward using the workaround solution since this plugin is not trying to re-write readme previews.

MichaelDimmitt · 2025-06-30T13:45:15Z

Sorry for the book. 📚
Curious to hear any thoughts.

I also cleaned up the pr diff to remove the grammar changes since they are now no longer needed.

MichaelDimmitt · 2025-06-30T17:41:51Z

@kevinramharak ,

I noticed the markdown previews only matched 80% with the tooltip that was showing.
Library Types such as ZodDescriminatedUnion were showing as a different color.

So I added a commit in this pr which introduced a css file that overrides the css class that is generated by the markdown preview. In that css file I changed the color to the one showing in the preview.

Do you know if a change will work like this will work when people change vscode color themes?

Screenshots

Here are some screenshots showing old and new with Developer: Open Webview Developer Tools inspecting the dom element styles.

Old

New

Here is what the tooltip looks like (With no style changes applied by this pr)

MichaelDimmitt · 2025-06-30T18:49:18Z

Sidenote: Developer: Open Webview Developer Tools will not work if you are looking solely at a ts file or other file.
However, it will load if you have a markdown preview active and that tab open. Then after opening those dev tools you can close that preview down and the dev tools will still be active. Not sure how useful it is when you are not looking at the preview but that is how I got one of the screenshots posted above.

…own in the preview instead of type

- In this case Library Titles like ZodDiscriminatedUnion were not matching This commit has been edited 1 times

MichaelDimmitt · 2025-08-05T20:39:02Z

@kevinramharak @yoavbls
Is there any interest in this pr?

Happy to make changes.
Please let me know if anything is blocking or needs to get in before the feature is in a mergable state.

Cheers,
Michael Dimmitt

yoavbls

@MichaelDimmitt Sorry it took me so long to get to this, and thank you for this contribution 🙏🏼
I'm not sure that Markdown panel is the right direction because

They render differently and have different kinds of limitations
by default, they're opening as another tab instead of a right panel
A few clicks on the preview opens the Markdown source code in a new tab

I think that a web view with Shiki is the better direction, but I never succeeded in making it load the user theme and "type language" grammar (even though I think I was close)

I suggest starting with your PR and changing to a webview later.

WDYT?

yoavbls · 2025-08-10T00:12:30Z

src/components/title.ts

-            ${errorCodeExplanationLink(diagnostic.code)}  | 
+            (TS${diagnostic.code})
+            ${errorCodeExplanationLink(diagnostic.code)}  |
            ${errorMessageTranslationLink(diagnostic.message)}


Can we add | before the new icon?

yoavbls · 2025-08-10T00:14:08Z

src/components/title.ts

+            (TS${diagnostic.code})
+            ${errorCodeExplanationLink(diagnostic.code)}  |
            ${errorMessageTranslationLink(diagnostic.message)}
+            ${errorMessageInANewFile(diagnostic, uri)}


I'm not sure why, but if a panel is opened and I click on another one, it stays on the previous one.
Is there something to do about it?

yoavbls · 2025-08-10T00:15:44Z

src/extension.css

+span.hljs-title.class_ {
+    color: #4ec9b0
+}


I'm not sure it'll look good for every theme.
Is it crucial?

yoavbls · 2025-08-10T00:18:12Z

src/provider/textDocumentProvider.ts

+        }
+        const content = item.contents.map(
+            (content) => content.value
+                            .replaceAll("```type\n", '```typescript\n'))


I tried to inject the tmGrammer to the markdown rendered but failed to make it work 😣
I guess there is no other option than this hack, which is cool it's working

yoavbls · 2025-08-10T00:20:24Z

src/components/title.ts

+            ${errorCodeExplanationLink(diagnostic.code)}  |
            ${errorMessageTranslationLink(diagnostic.message)}


The links are not working in the preview panel, do you know why?

good call out, will look into it and report back

yoavbls · 2025-08-30T21:00:28Z

@MichaelDimmitt BTW, I published the lib I talked about:
https://github.com/yoavbls/vscode-shiki-bridge

Would you like to collaborate on that?

MichaelDimmitt marked this pull request as ready for review June 27, 2025 02:57

MichaelDimmitt changed the title ~~initial working MVP~~ Feature - Button in tooltip to open the error in a temporary markdown:preview file. Jun 27, 2025

MichaelDimmitt changed the title ~~Feature - Button in tooltip to open the error in a temporary markdown:preview file.~~ Feature - Button in tooltip to report as a temporary markdown:preview file. Jun 27, 2025

MichaelDimmitt changed the title ~~Feature - Button in tooltip to report as a temporary markdown:preview file.~~ Feature - Button to report as a temporary markdown:preview file. Jun 27, 2025

MichaelDimmitt mentioned this pull request Jun 27, 2025

Button in vs-code to open a large error as a new file in open a new tab. #107

Open

MichaelDimmitt changed the title ~~Feature - Button to report as a temporary markdown:preview file.~~ Feature - button-to-open-error-in-new-tab Jun 27, 2025

MichaelDimmitt force-pushed the feature/107-button-to-open-error-in-new-tab branch 2 times, most recently from daae816 to 5525b54 Compare June 27, 2025 03:31

MichaelDimmitt force-pushed the feature/107-button-to-open-error-in-new-tab branch from 76acf58 to 27ac00d Compare June 30, 2025 13:27

MichaelDimmitt force-pushed the feature/107-button-to-open-error-in-new-tab branch from c2b5bce to d652004 Compare June 30, 2025 17:33

kevinramharak and others added 5 commits June 30, 2025 15:33

initial working MVP

4f8ec44

fix formatting for generated markdown document

6dcd965

cleanup - messing with grammars were not needed when typescript is sh…

fe57d2f

…own in the preview instead of type

add css styling to make rendered markdown files match tooltip

2709ad8

- In this case Library Titles like ZodDiscriminatedUnion were not matching This commit has been edited 1 times

Cleanup unused

4a72732

MichaelDimmitt force-pushed the feature/107-button-to-open-error-in-new-tab branch from 2a9bb26 to 4a72732 Compare June 30, 2025 19:33

yoavbls reviewed Aug 10, 2025

View reviewed changes

		${errorCodeExplanationLink(diagnostic.code)} \|
		${errorMessageTranslationLink(diagnostic.message)}

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

MichaelDimmitt commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Example 1

Example 2

Here is the markdown file generated in Example 2

Uh oh!

MichaelDimmitt commented Jun 27, 2025

Uh oh!

kevinramharak commented Jun 27, 2025

Uh oh!

kevinramharak commented Jun 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelDimmitt commented Jun 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelDimmitt commented Jun 30, 2025

Uh oh!

MichaelDimmitt commented Jun 30, 2025

Uh oh!

MichaelDimmitt commented Jun 30, 2025

Uh oh!

MichaelDimmitt commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MichaelDimmitt commented Jun 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Screenshots

Old

New

Here is what the tooltip looks like (With no style changes applied by this pr)

Uh oh!

MichaelDimmitt commented Jun 30, 2025

Uh oh!

MichaelDimmitt commented Aug 5, 2025

Uh oh!

yoavbls left a comment

Choose a reason for hiding this comment

Uh oh!

yoavbls Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

yoavbls Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

yoavbls Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

yoavbls Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

yoavbls Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

MichaelDimmitt Aug 10, 2025

Choose a reason for hiding this comment

Uh oh!

yoavbls commented Aug 30, 2025

Uh oh!

Uh oh!

MichaelDimmitt commented Jun 25, 2025 •

edited

Loading

kevinramharak commented Jun 29, 2025 •

edited

Loading

MichaelDimmitt commented Jun 29, 2025 •

edited

Loading

MichaelDimmitt commented Jun 30, 2025 •

edited

Loading

MichaelDimmitt commented Jun 30, 2025 •

edited

Loading