Viewer pane pops out to editor tab

build/lib/i18n.resources.json

@@ -206,6 +206,10 @@
 			"name": "vs/workbench/contrib/positronPreview",
 			"project": "vscode-workbench"
 		},
+		{
+			"name": "vs/workbench/contrib/positronPreviewEditor",
+			"project": "vscode-workbench"
+		},
 		{
 			"name": "vs/workbench/contrib/positronPlots",
 			"project": "vscode-workbench"

src/vs/base/common/network.ts

@@ -128,6 +128,7 @@ export namespace Schemas {
 	export const positronDataExplorer = 'positron-data-explorer';
 	export const positronNotebook = 'positron-notebook';
 	export const positronPlotsEditor = 'positron-plots-editor';
+	export const positronPreviewEditor = 'positron-preview-editor'
 
 	// --- End Positron ---
 

src/vs/workbench/contrib/positronPreview/browser/components/htmlActionBars.tsx

@@ -19,6 +19,7 @@ import { DisposableStore } from 'vs/base/common/lifecycle';
 const reload = localize('positron.preview.html.reload', "Reload the content");
 const clear = localize('positron.preview.html.clear', "Clear the content");
 const openInBrowser = localize('positron.preview.html.openInBrowser', "Open the content in the default browser");
+const openInEditor = localize('positron.preview.html.openInEditor', "Open the content in an editor tab.");
 
 /**
  * HtmlActionBarsProps interface.
@@ -31,7 +32,7 @@ export interface HtmlActionBarsProps extends PreviewActionBarsProps {
 
 export const HtmlActionBars = (props: PropsWithChildren<HtmlActionBarsProps>) => {
 
-	const [title, setTitle] = useState(props.preview.html.title);
+	const [title, setTitle] = useState(props.preview.html?.title);
 
 	// Handler for the reload button.
 	const reloadHandler = () => {
@@ -52,6 +53,11 @@ export const HtmlActionBars = (props: PropsWithChildren<HtmlActionBarsProps>) =>
 			{ openExternal: true, fromUserGesture: true });
 	};
 
+	// Handler for open in editor button
+	const openInEditorHandler = () => {
+		props.positronPreviewService.openEditor(props.preview.uri, title);
+	};
+
 	// Main use effect.
 	useEffect(() => {
 		// Create the disposable store for cleanup.
@@ -89,6 +95,13 @@ export const HtmlActionBars = (props: PropsWithChildren<HtmlActionBarsProps>) =>
 							ariaLabel={openInBrowser}
 							onPressed={openInBrowserHandler} />
 						<ActionBarSeparator />
+						<ActionBarButton
+							iconId='go-to-file'
+							align='right'
+							tooltip={openInEditor}
+							ariaLabel={openInEditor}
+							onPressed={openInEditorHandler} />
+						<ActionBarSeparator />
 						<ActionBarButton
 							iconId='clear-all'
 							align='right'

src/vs/workbench/contrib/positronPreview/browser/components/urlActionBars.tsx

@@ -36,6 +36,7 @@ const reload = localize('positron.preview.reload', "Reload the current URL");
 const clear = localize('positron.preview.clear', "Clear the current URL");
 const openInBrowser = localize('positron.preview.openInBrowser', "Open the current URL in the default browser");
 const currentUrl = localize('positron.preview.currentUrl', "The current URL");
+const openInEditor = localize('positron.preview.html.openInEditor', "Open the content in an editor tab.");
 
 /**
  * UrlActionBars component.
@@ -72,6 +73,10 @@ export const UrlActionBars = (props: PropsWithChildren<UrlActionBarsProps>) => {
 		});
 	};
 
+	const openInEditorHandler = () => {
+		props.positronPreviewService.openEditor(currentUri);
+	};
+
 	// Handler for the clear button.
 	const clearHandler = () => {
 		props.positronPreviewService.clearAllPreviews();
@@ -192,6 +197,13 @@ export const UrlActionBars = (props: PropsWithChildren<UrlActionBarsProps>) => {
 							ariaLabel={openInBrowser}
 							onPressed={openInBrowserHandler} />
 						<ActionBarSeparator />
+						<ActionBarButton
+							iconId='go-to-file'
+							align='right'
+							tooltip={openInEditor}
+							ariaLabel={openInEditor}
+							onPressed={openInEditorHandler} />
+						<ActionBarSeparator />
 						<ActionBarButton
 							iconId='clear-all'
 							align='right'

src/vs/workbench/contrib/positronPreview/browser/positronPreviewServiceImpl.ts

@@ -26,6 +26,8 @@ import { PreviewHtml } from 'vs/workbench/contrib/positronPreview/browser/previe
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { basename } from 'vs/base/common/path';
 import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
+import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
+import { Schemas } from 'vs/base/common/network';
 
 /**
  * Positron preview service; keeps track of the set of active previews and
@@ -45,6 +47,8 @@ export class PositronPreviewService extends Disposable implements IPositronPrevi
 
 	private _onDidChangeActivePreviewWebview = new Emitter<string>;
 
+	private _editors: Map<string, { uri: URI; webview: PreviewWebview; title?: string }> = new Map();
+
 	constructor(
 		@ICommandService private readonly _commandService: ICommandService,
 		@IWebviewService private readonly _webviewService: IWebviewService,
@@ -53,7 +57,8 @@ export class PositronPreviewService extends Disposable implements IPositronPrevi
 		@ILogService private readonly _logService: ILogService,
 		@IOpenerService private readonly _openerService: IOpenerService,
 		@IPositronNotebookOutputWebviewService private readonly _notebookOutputWebviewService: IPositronNotebookOutputWebviewService,
-		@IExtensionService private readonly _extensionService: IExtensionService
+		@IExtensionService private readonly _extensionService: IExtensionService,
+		@IEditorService private readonly _editorService: IEditorService
 	) {
 		super();
 		this.onDidCreatePreviewWebview = this._onDidCreatePreviewWebviewEmitter.event;
@@ -496,4 +501,35 @@ export class PositronPreviewService extends Disposable implements IPositronPrevi
 		// It's a localhost http or https URL; we can handle it in the viewer.
 		return true;
 	}
+
+	public async openEditor(uri: URI, title?: string): Promise<void> {
+		// Create and store webview overlay for editor
+		const previewId = `editorPreview.${PositronPreviewService._previewIdCounter++}`;
+		this._editors.set(previewId, {
+			uri: uri,
+			webview: this.createPreviewUrl(previewId, undefined, uri),
+			title: title
+		});
+
+		await this._editorService.openEditor({
+			resource: URI.from({
+				scheme: Schemas.positronPreviewEditor,
+				path: previewId
+			}),
+		});
+	}
+
+	public editorWebview(editorId: string): PreviewWebview | undefined {
+		return this._editors.get(editorId)?.webview;
+	}
+
+	public editorTitle(previewId: string): string | undefined {
+		return this._editors.get(previewId)?.title;
+	}
+
+	public disposeEditor(previewId: string): void {
+		this._editors.get(previewId)?.webview.dispose();
+		// Remove the preview
+		this._editors.delete(previewId);
+	}
 }

src/vs/workbench/contrib/positronPreview/browser/positronPreviewSevice.ts

@@ -116,4 +116,12 @@ export interface IPositronPreviewService {
 	get activePreviewWebviewId(): string;
 
 	set activePreviewWebviewId(id: string);
+
+	openEditor(uri: URI, title?: string): Promise<void>;
+
+	editorWebview(editorId: string): PreviewWebview | undefined;
+
+	editorTitle(previewId: string): string | undefined;
+
+	disposeEditor(previewId: string): void;
 }

src/vs/workbench/contrib/positronPreview/browser/previewHtml.ts

@@ -30,7 +30,7 @@ export class PreviewHtml extends PreviewWebview {
 		previewId: string,
 		webview: PreviewOverlayWebview,
 		readonly uri: URI,
-		readonly html: ShowHtmlFileEvent
+		readonly html?: ShowHtmlFileEvent
 	) {
 		super(POSITRON_PREVIEW_HTML_VIEW_TYPE, previewId,
 			POSITRON_PREVIEW_HTML_VIEW_TYPE,

src/vs/workbench/contrib/positronPreviewEditor/browser/editorPreviewContainer.tsx

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as React from 'react';
+import * as DOM from '../../../../../vs/base/browser/dom';
+import { useEffect } from 'react'; // eslint-disable-line no-duplicate-imports
+import { PreviewWebview } from '../../../../../vs/workbench/contrib/positronPreview/browser/previewWebview';
+
+interface EditorPreviewContainerProps {
+	/** The preview loaded into the container, if any */
+	preview?: PreviewWebview;
+	height: number;
+	width: number;
+	visible: boolean;
+}
+
+export const EditorPreviewContainer = (props: EditorPreviewContainerProps) => {
+	const webviewRef = React.useRef<HTMLDivElement>(null);
+	// This `useEffect` fires when the preview item changes or visibility of the
+	// pane itself changes. It is responsible for claiming and releasing the
+	// webview.
+	useEffect(() => {
+
+		if (props.preview) {
+			const webview = props.preview.webview;
+
+			// If the preview is visible, claim the webview and release it when
+			// we're unmounted.
+			if (props.visible) {
+				if (webviewRef.current) {
+					const window = DOM.getWindow(webviewRef.current);
+					webview.webview.claim(this, window, undefined);
+					// actually moving preview to webview
+					webview.webview.layoutWebviewOverElement(webviewRef.current);
+					return () => {
+						webview?.webview.release(this);
+					};
+				}
+			}
+			else {
+				webview.webview.release(this);
+			}
+		}
+		return () => { };
+	}, [props.preview, props.visible]);
+
+	// This `useEffect` intentionally runs on every render. It is responsible
+	// for laying out the webview over the preview container; since the webview
+	// is absolutely positioned over the container, it needs to be repositioned
+	// every time the container is resized or moved.
+	useEffect(() => {
+		if (props.preview && webviewRef.current && props.visible) {
+			props.preview.webview.webview.layoutWebviewOverElement(webviewRef.current);
+		}
+	});
+
+	const style = {
+		width: `${props.width}px`,
+		height: `${props.height}px`,
+	};
+
+	// The DOM we render is just a single div that the webview will be
+	// positioned over.
+	return (
+		<div className='preview-container' ref={webviewRef} style={style}>
+		</div>
+	);
+};

src/vs/workbench/contrib/positronPreviewEditor/browser/positronPreviewEditor.contribution.ts

@@ -0,0 +1,77 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Disposable } from 'vs/base/common/lifecycle';
+import { Schemas } from 'vs/base/common/network';
+import { localize } from 'vs/nls';
+import { SyncDescriptor } from 'vs/platform/instantiation/common/descriptors';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { Registry } from 'vs/platform/registry/common/platform';
+import { EditorPaneDescriptor, IEditorPaneRegistry } from 'vs/workbench/browser/editor';
+import { registerWorkbenchContribution2, WorkbenchPhase } from 'vs/workbench/common/contributions';
+import { EditorExtensions } from 'vs/workbench/common/editor';
+import { PositronPreviewEditor } from 'vs/workbench/contrib/positronPreviewEditor/browser/positronPreviewEditor';
+import { PositronPreviewEditorInput } from 'vs/workbench/contrib/positronPreviewEditor/browser/positronPreviewEditorInput';
+import { IEditorResolverService, RegisteredEditorPriority } from 'vs/workbench/services/editor/common/editorResolverService';
+
+export const POSITRON_EDITOR_PREVIEW = 'application.experimental.positronPreviewEditor';
+
+class PositronPreviewEditorContribution extends Disposable {
+	static readonly ID = 'workbench.contrib.positronPreviewEditor';
+
+	constructor(
+		@IEditorResolverService editorResolverService: IEditorResolverService,
+		@IInstantiationService instantiationService: IInstantiationService
+	) {
+		super();
+
+		// Register the editor
+		this._register(editorResolverService.registerEditor(
+			`${Schemas.positronPreviewEditor}:**/**`,
+			{
+				id: PositronPreviewEditorInput.EditorID,
+				label: localize('positronPreivewEditor', 'Editor Preview Tab'),
+				priority: RegisteredEditorPriority.builtin
+			},
+			{
+				singlePerResource: true,
+				canSupportResource: resource => resource.scheme === Schemas.positronPreviewEditor
+			},
+			{
+				createEditorInput: ({ resource, options }) => {
+					return {
+						editor: instantiationService.createInstance(
+							PositronPreviewEditorInput,
+							resource
+						),
+						options: {
+							...options,
+							// open as a regular editor instead of a preview
+							pinned: true
+						}
+					};
+				}
+			}
+		));
+	}
+}
+
+Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane(
+	EditorPaneDescriptor.create(
+		PositronPreviewEditor,
+		PositronPreviewEditorInput.EditorID,
+		'Editor Preview Tab',
+	),
+	[
+		new SyncDescriptor(PositronPreviewEditorInput)
+	]
+);
+
+registerWorkbenchContribution2(
+	PositronPreviewEditorContribution.ID,
+	PositronPreviewEditorContribution,
+	WorkbenchPhase.AfterRestored
+);
+