Mark selected markdown previews in notebooks

src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts

@@ -468,6 +468,7 @@ export interface INotebookEditor extends IEditor, ICommonNotebookEditor {
 	unhideMarkdownPreview(cell: ICellViewModel): Promise<void>;
 	hideMarkdownPreview(cell: ICellViewModel): Promise<void>;
 	removeMarkdownPreview(cell: ICellViewModel): Promise<void>;
+	updateMarkdownPreviewSelectionState(cell: ICellViewModel, isSelected: boolean): Promise<void>;
 
 	/**
 	 * Render the output in webview layer

src/vs/workbench/contrib/notebook/browser/notebookEditorWidget.ts

@@ -1688,6 +1688,16 @@ export class NotebookEditorWidget extends Disposable implements INotebookEditor
 		await this._webview?.removeMarkdownPreview(cell.id);
 	}
 
+	async updateMarkdownPreviewSelectionState(cell: ICellViewModel, isSelected: boolean): Promise<void> {
+		if (!this._webview) {
+			return;
+		}
+
+		await this._resolveWebview();
+
+		await this._webview?.updateMarkdownPreviewSelectionState(cell.id, isSelected);
+	}
+
 	async createInset(cell: CodeCellViewModel, output: IInsetRenderOutput, offset: number): Promise<void> {
 		this._insetModifyQueueByOutputId.queue(output.source.model.outputId, async () => {
 			if (!this._webview) {

src/vs/workbench/contrib/notebook/browser/view/renderers/backLayerWebView.ts

@@ -261,6 +261,12 @@ export interface IShowMarkdownMessage {
 	top: number;
 }
 
+export interface IUpdateMarkdownPreviewSelectionState {
+	readonly type: 'updateMarkdownPreviewSelectionState',
+	readonly id: string;
+	readonly isSelected: boolean;
+}
+
 export interface IInitializeMarkdownMessage {
 	type: 'initializeMarkdownPreview';
 	cells: Array<{ cellId: string, content: string }>;
@@ -302,6 +308,7 @@ export type ToWebviewMessage =
 	| IShowMarkdownMessage
 	| IHideMarkdownMessage
 	| IUnhideMarkdownMessage
+	| IUpdateMarkdownPreviewSelectionState
 	| IInitializeMarkdownMessage
 	| IViewScrollMarkdownRequestMessage;
 
@@ -410,6 +417,10 @@ export class BackLayerWebView<T extends ICommonCellInfo> extends Disposable {
 						padding-left: ${this.options.leftMargin}px;
 					}
 
+					#container > div > div.preview.selected {
+						background: var(--vscode-notebook-selectedCellBackground);
+					}
+
 					#container > div > div.preview img {
 						max-width: 100%;
 						max-height: 100%;
@@ -1104,6 +1115,30 @@ var requirejs = (function() {
 		});
 	}
 
+	async updateMarkdownPreviewSelectionState(cellId: any, isSelected: boolean) {
+		if (this._disposed) {
+			return;
+		}
+
+		this._sendMessageToWebview({
+			type: 'updateMarkdownPreviewSelectionState',
+			id: cellId,
+			isSelected
+		});
+	}
+
+	async updateMarkdownPreviewDecpratopms(cellId: any, isSelected: boolean) {
+		if (this._disposed) {
+			return;
+		}
+
+		this._sendMessageToWebview({
+			type: 'updateMarkdownPreviewSelectionState',
+			id: cellId,
+			isSelected
+		});
+	}
+
 	async initializeMarkdown(cells: Array<{ cellId: string, content: string }>) {
 		await this._loaded;
 

src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts

@@ -569,7 +569,6 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
 	}
 
 	private updateForLayout(element: MarkdownCellViewModel, templateData: MarkdownCellRenderTemplate): void {
-		// templateData.focusIndicatorLeft.style.height = `${element.layoutInfo.indicatorHeight}px`;
 		templateData.focusIndicatorBottom.style.top = `${element.layoutInfo.totalHeight - BOTTOM_CELL_TOOLBAR_GAP - CELL_BOTTOM_MARGIN}px`;
 
 		const focusSideHeight = element.layoutInfo.totalHeight - BOTTOM_CELL_TOOLBAR_GAP;

src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts

@@ -197,25 +197,46 @@ export class StatefulMarkdownCell extends Disposable {
 			}
 		}));
 
+		// Update for selection
+		if (this.useRenderer) {
+			this._register(this.notebookEditor.onDidChangeSelection(() => {
+				const selectedCells = this.notebookEditor.getSelectionViewModels();
+				const isSelected = selectedCells.length > 1 && selectedCells.some(selectedCell => selectedCell === viewCell);
+				this.notebookEditor.updateMarkdownPreviewSelectionState(viewCell, isSelected);
+			}));
+		}
+
+		// apply decorations
+
 		this._register(viewCell.onCellDecorationsChanged((e) => {
 			e.added.forEach(options => {
 				if (options.className) {
-					templateData.rootContainer.classList.add(options.className);
+					if (this.useRenderer) {
+						this.notebookEditor.deltaCellOutputContainerClassNames(this.viewCell.id, [options.className], []);
+					} else {
+						templateData.rootContainer.classList.add(options.className);
+					}
 				}
 			});
 
 			e.removed.forEach(options => {
 				if (options.className) {
-					templateData.rootContainer.classList.remove(options.className);
+					if (this.useRenderer) {
+						this.notebookEditor.deltaCellOutputContainerClassNames(this.viewCell.id, [], [options.className]);
+					} else {
+						templateData.rootContainer.classList.remove(options.className);
+					}
 				}
 			});
 		}));
 
-		// apply decorations
-
 		viewCell.getCellDecorations().forEach(options => {
 			if (options.className) {
-				templateData.rootContainer.classList.add(options.className);
+				if (this.useRenderer) {
+					this.notebookEditor.deltaCellOutputContainerClassNames(this.viewCell.id, [options.className], []);
+				} else {
+					templateData.rootContainer.classList.add(options.className);
+				}
 			}
 		});
 

src/vs/workbench/contrib/notebook/browser/view/renderers/webviewPreloads.ts

@@ -445,7 +445,16 @@ function webviewPreloads() {
 					const data = event.data;
 					let cellContainer = document.getElementById(data.id);
 					if (cellContainer) {
-						cellContainer?.parentElement?.removeChild(cellContainer);
+						cellContainer.parentElement?.removeChild(cellContainer);
+					}
+				}
+				break;
+			case 'updateMarkdownPreviewSelectionState':
+				{
+					const data = event.data;
+					const previewNode = document.getElementById(`${data.id}_preview`);
+					if (previewNode) {
+						previewNode.classList.toggle('selected', data.isSelected);
 					}
 				}
 				break;

src/vs/workbench/contrib/notebook/test/testNotebookEditor.ts

@@ -111,6 +111,9 @@ export class TestNotebookEditor implements INotebookEditor {
 	markdownCellDragEnd(cellId: string, position: { clientY: number }): void {
 		throw new Error('Method not implemented.');
 	}
+	updateMarkdownPreviewSelectionState(cell: ICellViewModel, isSelected: boolean): Promise<void> {
+		throw new Error('Method not implemented.');
+	}
 	async beginComputeContributedKernels(): Promise<INotebookKernel[]> {
 		return [];
 	}