open image

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

@@ -132,7 +132,11 @@ 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.src;
+		const imgSrcAttribute = img.getAttribute('src');
+		const isLocalFile = imageSource !== imgSrcAttribute;
+		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,22 @@
+/*---------------------------------------------------------------------------------------------
+ *  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);
+		const { fsPath } = vscode.Uri.parse(args.imageSource);
+		this._webviewManager.findPreview(source)?.openImage(fsPath);
+	}
+}

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

@@ -443,6 +443,7 @@ export interface IManagedMarkdownPreview {
 	readonly onDidChangeViewState: vscode.Event<vscode.WebviewPanelOnDidChangeViewStateEvent>;
 
 	copyImage(id: string): void;
+	openImage(imagePath: string): void;
 	dispose(): void;
 	refresh(): void;
 	updateConfiguration(): void;
@@ -524,6 +525,12 @@ export class StaticMarkdownPreview extends Disposable implements IManagedMarkdow
 		});
 	}
 
+	openImage(imagePath: string): void {
+		const uri = vscode.Uri.file(imagePath);
+		this._webviewPanel.reveal();
+		vscode.commands.executeCommand('vscode.open', uri);
+	}
+
 	private readonly _onDispose = this._register(new vscode.EventEmitter<void>());
 	public readonly onDispose = this._onDispose.event;
 
@@ -679,6 +686,12 @@ export class DynamicMarkdownPreview extends Disposable implements IManagedMarkdo
 		});
 	}
 
+	openImage(imagePath: string): void {
+		const uri = vscode.Uri.file(imagePath);
+		this._webviewPanel.reveal();
+		vscode.commands.executeCommand('vscode.open', uri);
+	}
+
 	private readonly _onDisposeEmitter = this._register(new vscode.EventEmitter<void>());
 	public readonly onDispose = this._onDisposeEmitter.event;
 

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
 		;
 }