Markdown Render VSCode Command Link

[rbrisita]

Issue Type: Bug

Hello,

Regarding the MarkdownString, in Markdown this:

[Name](link)

Renders a link. In a VS Code Extension, this is also possible:

[Run It](command:pkg.command)

Creating a link to run a command.

One would think creating an actual anchor link like this:

<a href="command:pkg.command">Run It</a>

Would work but the click does not execute the command.

VS Code version: Code 1.63.0 (7db1a2b, 2021-12-07T05:18:59.299Z)
OS version: Linux arm64 5.15.7-1-MANJARO-ARM
Restricted Mode: No

System Info

Item	Value
CPUs	unknown (6 x 1416)
GPU Status	2d_canvas: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on oop_rasterization: disabled_off opengl: enabled_on rasterization: disabled_software skia_renderer: enabled_on video_decode: disabled_software vulkan: disabled_off webgl: enabled webgl2: enabled
Load (avg)	2, 1, 2
Memory (System)	3.77GB (0.02GB free)
Process Argv	. --crash-reporter-id 2a85f066-a8e2-4971-b1ff-37959f57a0f0
Screen Reader	no
VM	0%
DESKTOP_SESSION	plasma
XDG_CURRENT_DESKTOP	KDE
XDG_SESSION_DESKTOP	KDE
XDG_SESSION_TYPE	x11

Extensions (4)

Extension	Author (truncated)	Version
vscode-eslint	dba	2.2.2
gitlens	eam	11.7.0
vscode-drawio	hed	1.6.4
vsliveshare	ms-	1.0.5242

[WaqasAliAbbasi]

can i take this?

[rbrisita]

I think they'd be happy if you created a PR.

For completeness: data-href works:

<a data-href="command:pkg.command">Run It</a>

but the cursor does not change to a hand icon like if href was populated.

[WaqasAliAbbasi]

I think they'd be happy if you created a PR.

For completeness: data-href works:

<a data-href="command:pkg.command">Run It</a>

but the cursor does not change to a hand icon like if href was populated.

Thanks, will take a look

[WaqasAliAbbasi]

This is what I found. In markdown links are detected at two places:

• src/vs/editor/common/languages/linkComputer.ts detects anything starting with http:// or https:// or file://
• extensions/markdown-language-features/src/features/documentLinkProvider.ts checks for []() and returns anything inside () as URI

That's why [Run It](command:pkg.command) is detected as a link but <a href="command:pkg.command">Run It</a> isn't.

I couldn't get <a data-href="command:pkg.command">Run It</a> to work. I tried holding ctrl while clicking it and tried in preview as well. Can you tell me how to reproduce it?

[rbrisita]

You'll need to register a command for it to take an action. The example in the link is probably the easiest. After registration create a MarkdownString containing the registered command. In regards to the linked example:

<a data-href="command:myExtension.sayHello">Say Hello</a>

You should be able to click on it and see the console log. Note that the cursor doesn't change to a hand icon.

[HadesArchitect]

@rbrisita Have you found any solution? For me even data-href doesn't work. :( I've used a registered and available command.

[rbrisita]

The way I implemented Markdown and executing a registered command (through package.json) was by adding a MarkdownString (mds) to the tooltip of a StatusBarItem. The structure is very particular because it is an implementation of the CommonMark Spec and is something like this:

const stop = '# [$(debug-stop)](command:my_ext.stop)';
const table = `
<table>
<tbody>
<tr>
<td align="center">

${stop}

</td>
</tr>
</tbody>
</table>
`;
mds.value = table;
statusBar.tooltip = mds;

Make sure you are using the correct VS Code version too.

[mjbvz]

Command links in MarkdownString should now also work for normal <a> elements included in the markdown (you have to set isTrusted and supportHtml on the MarkdownString to enable this)

[TylerLeonhardt]

@mjbvz where should links work? I tried this in a completion item MarkdownString and neither link syntaxes work:

snippetCompletion.documentation = new vscode.MarkdownString("Inserts a snippet that lets you select the _appropriate_ part of the day for your greeting.[run it](command:workbench.action.reloadWindow) <a href='command:workbench.action.reloadWindow'>Run It</a>");

[mjbvz]

@TylerLeonhardt Sorry for not adding verification details. The markdown string needs to both trusted and have html enabled:

const docs = new vscode.MarkdownString(`<a href="command:workbench.action.toggleSidebarVisibility">Run It</a>.`);
docs.isTrusted = true;
docs.supportHtml = true;