WebView link to document line

[RussellSprouts]

Issue Type: Bug

1. Create an extension which shows a WebView.
2. Embed links to workspace documents like <a href="vscode-resource:///d%3A/code/Sample.java#L123">test</a>, using #L123 to anchor on a specific line.
3. Try to click on link
4. Nothing happens -- the document is not opened

I can't figure out how to link to a workspace document in the WebView API. With previewHtml, a link with a file: uri works. I've tried file: and vscode-resource:, but neither work. I use this code in localResourceRoots to whitelist the workspace:

localResourceRoots: (workspace.workspaceFolders || []).map(folder => folder.uri)

VS Code version: Code 1.28.2 (7f3ce96, 2018-10-17T00:23:12.403Z)
OS version: Windows_NT ia32 10.0.17763

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz (8 x 3408)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: enabled video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Memory (System)	63.92GB (43.18GB free)
Process Argv
Screen Reader	no
VM	0%

[vscodebot]

Please ask your question on StackOverflow. We have a great community over there. They have already answered thousands of questions and are happy to answer yours as well. See also our issue reporting guidelines.

Happy Coding!

[mjbvz]

vscode-resource is not intended for clickable links. Either use a command: uri in the link to fire a vscode command that opens the resource or use postMessage to tell your extension to open that resource when the link is clicked

[RussellSprouts]

Thanks. It would be nice to document this difference between WebView and previewHtml, or bring back the old behavior.

For posterity, from your suggestions, this code gives a similar behavior to how the file: links were handled:

In the WebView:

<a href="file://myfile.txt#L1">Sample link</a>

const vscode = acquireVsCodeApi();

for (const link of document.querySelectorAll('a[href^="file:"]')) {
    link.addEventListener('click', () => {
        vscode.postMessage({
            command: "open",
            link: link.getAttribute('href'),
        });
    });
}

In the extension:

panel.webview.onDidReceiveMessage(async message => {
    if (message.command === "open") {
        const uri = Uri.parse(message.link);
        const line = (+uri.fragment.substring(1)) - 1;
        const editor = await window.showTextDocument(uri);
        editor.revealRange(new Range(line, 0, line, 0), TextEditorRevealType.InCenterIfOutsideViewport);
    }
});