Merge pull request #234649 from notoriousmango/feat-open-image

Add 'open image' context in markdown preview

extensions/markdown-language-features/package.json

@@ -125,6 +125,11 @@
         "title": "%markdown.copyImage.title%",
         "category": "Markdown"
       },
+      {
+        "command": "_markdown.openImage",
+        "title": "%markdown.openImage.title%",
+        "category": "Markdown"
+      },
       {
         "command": "markdown.showPreview",
         "title": "%markdown.preview.title%",
@@ -189,7 +194,11 @@
       "webview/context": [
         {
           "command": "_markdown.copyImage",
-          "when": "webviewId == 'markdown.preview' && webviewSection == 'image'"
+          "when": "webviewId == 'markdown.preview' && (webviewSection == 'image' || webviewSection == 'localImage')"
+        },
+        {
+          "command": "_markdown.openImage",
+          "when": "webviewId == 'markdown.preview' && webviewSection == 'localImage'"
         }
       ],
       "editor/title": [
@@ -244,6 +253,10 @@
         }
       ],
       "commandPalette": [
+        {
+          "command": "_markdown.openImage",
+          "when": "false"
+        },
         {
           "command": "_markdown.copyImage",
           "when": "false"

extensions/markdown-language-features/package.nls.json

@@ -2,6 +2,7 @@
 	"displayName": "Markdown Language Features",
 	"description": "Provides rich language support for Markdown.",
 	"markdown.copyImage.title": "Copy Image",
+	"markdown.openImage.title": "Open Image",
 	"markdown.preview.breaks.desc": "Sets how line-breaks are rendered in the Markdown preview. Setting it to `true` creates a `<br>` for newlines inside paragraphs.",
 	"markdown.preview.linkify": "Convert URL-like text to links in the Markdown preview.",
 	"markdown.preview.typographer": "Enable some language-neutral replacement and quotes beautification in the Markdown preview.",

extensions/markdown-language-features/preview-src/index.ts

@@ -11,6 +11,7 @@ import { SettingsManager, getData } from './settings';
 import throttle = require('lodash.throttle');
 import morphdom from 'morphdom';
 import type { ToWebviewMessage } from '../types/previewMessaging';
+import { isOfScheme, Schemes } from '../src/util/schemes';
 
 let scrollDisabledCount = 0;
 
@@ -132,7 +133,10 @@ function addImageContexts() {
 	for (const img of images) {
 		img.id = 'image-' + idNumber;
 		idNumber += 1;
-		img.setAttribute('data-vscode-context', JSON.stringify({ webviewSection: 'image', id: img.id, 'preventDefaultContextMenuItems': true, resource: documentResource }));
+		const imageSource = img.getAttribute('data-src');
+		const isLocalFile = imageSource && !(isOfScheme(Schemes.http, imageSource) || isOfScheme(Schemes.https, imageSource));
+		const webviewSection = isLocalFile ? 'localImage' : 'image';
+		img.setAttribute('data-vscode-context', JSON.stringify({ webviewSection, id: img.id, 'preventDefaultContextMenuItems': true, resource: documentResource, imageSource }));
 	}
 }
 

extensions/markdown-language-features/src/commands/index.ts

@@ -18,6 +18,7 @@ import { CopyImageCommand } from './copyImage';
 import { ShowPreviewSecuritySelectorCommand } from './showPreviewSecuritySelector';
 import { ShowSourceCommand } from './showSource';
 import { ToggleLockCommand } from './toggleLock';
+import { OpenImageCommand } from './openImage';
 
 export function registerMarkdownCommands(
 	commandManager: CommandManager,
@@ -28,6 +29,7 @@ export function registerMarkdownCommands(
 ): vscode.Disposable {
 	const previewSecuritySelector = new PreviewSecuritySelector(cspArbiter, previewManager);
 
+	commandManager.register(new OpenImageCommand(previewManager));
 	commandManager.register(new CopyImageCommand(previewManager));
 	commandManager.register(new ShowPreviewCommand(previewManager, telemetryReporter));
 	commandManager.register(new ShowPreviewToSideCommand(previewManager, telemetryReporter));

extensions/markdown-language-features/src/commands/openImage.ts

@@ -0,0 +1,21 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as vscode from 'vscode';
+import { Command } from '../commandManager';
+import { MarkdownPreviewManager } from '../preview/previewManager';
+
+export class OpenImageCommand implements Command {
+	public readonly id = '_markdown.openImage';
+
+	public constructor(
+		private readonly _webviewManager: MarkdownPreviewManager,
+	) { }
+
+	public execute(args: { resource: string; imageSource: string }) {
+		const source = vscode.Uri.parse(args.resource);
+		this._webviewManager.openDocumentLink(args.imageSource, source);
+	}
+}

extensions/markdown-language-features/src/preview/previewManager.ts

@@ -170,6 +170,11 @@ export class MarkdownPreviewManager extends Disposable implements vscode.Webview
 		}
 	}
 
+	public openDocumentLink(linkText: string, fromResource: vscode.Uri) {
+		const viewColumn = this.findPreview(fromResource)?.resourceColumn;
+		return this._opener.openDocumentLink(linkText, fromResource, viewColumn);
+	}
+
 	public async deserializeWebviewPanel(
 		webview: vscode.WebviewPanel,
 		state: any

extensions/markdown-language-features/types/previewMessaging.d.ts

@@ -71,10 +71,17 @@ export namespace ToWebviewMessage {
 		readonly id: string;
 	}
 
+	export interface OpenImageContent extends BaseMessage {
+		readonly type: 'openImage';
+		readonly source: string;
+		readonly imageSource: string;
+	}
+
 	export type Type =
 		| OnDidChangeTextEditorSelection
 		| UpdateView
 		| UpdateContent
 		| CopyImageContent
+		| OpenImageContent
 		;
 }