Change:
Verifying in the vscode repo across some of the markdown headers ! If I put them into edit mode, then I see the background change on multiselect
I guess you don't see this issue when commenting out from the workspace setting?
Yeah, that's correct! I see everything get highlighted as expected when that setting is off
The root cause is that the for webview backed markdown cells has a height of zero. This element gets the correct background color during selection, but is not visible due to the height. We have zero height so that you can click through to the webview instead of to the cell I will prototype telling the cell in the webview if it is selected or not. Then we can add styling inside the webview to show selection state

Discussion:
unhideMarkdownPreview(cell: ICellViewModel): Promise<void>; hideMarkdownPreview(cell: ICellViewModel): Promise<void>; removeMarkdownPreview(cell: ICellViewModel): Promise<void>; <ins> updateMarkdownPreviewSelectionState(cell: ICellViewModel, isSelected: boolean): Promise<void>; </ins> /** * Render the output in webview layer

await this._webview?.removeMarkdownPreview(cell.id); } <ins> async updateMarkdownPreviewSelectionState(cell: ICellViewModel, isSelected: boolean): Promise<void> { if (!this._webview) { return; } await this._resolveWebview(); await this._webview?.updateMarkdownPreviewSelectionState(cell.id, isSelected); } </ins> async createInset(cell: CodeCellViewModel, output: IInsetRenderOutput, offset: number): Promise<void> { this._insetModifyQueueByOutputId.queue(output.source.model.outputId, async () => { if (!this._webview) {

top: number; } <ins> export interface IUpdateMarkdownPreviewSelectionState { readonly type: 'updateMarkdownPreviewSelectionState', readonly id: string; readonly isSelected: boolean; } </ins> export interface IInitializeMarkdownMessage { type: 'initializeMarkdownPreview'; cells: Array<{ cellId: string, content: string }>;

| IShowMarkdownMessage | IHideMarkdownMessage | IUnhideMarkdownMessage <ins> | IUpdateMarkdownPreviewSelectionState </ins> | IInitializeMarkdownMessage | IViewScrollMarkdownRequestMessage;

padding-left: ${this.options.leftMargin}px; } <ins> #container > div > div.preview.selected { background: var(--vscode-notebook-selectedCellBackground); } </ins> #container > div > div.preview img { max-width: 100%; max-height: 100%;

}); } <ins> 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 }); } </ins> async initializeMarkdown(cells: Array<{ cellId: string, content: string }>) { await this._loaded;

} private updateForLayout(element: MarkdownCellViewModel, templateData: MarkdownCellRenderTemplate): void { <del> // templateData.focusIndicatorLeft.style.height = `${element.layoutInfo.indicatorHeight}px`; </del> templateData.focusIndicatorBottom.style.top = `${element.layoutInfo.totalHeight - BOTTOM_CELL_TOOLBAR_GAP - CELL_BOTTOM_MARGIN}px`; const focusSideHeight = element.layoutInfo.totalHeight - BOTTOM_CELL_TOOLBAR_GAP;

} })); <ins> // 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 </ins> this._register(viewCell.onCellDecorationsChanged((e) => { e.added.forEach(options => { if (options.className) { <del> templateData.rootContainer.classList.add(options.className); </del> <ins> if (this.useRenderer) { this.notebookEditor.deltaCellOutputContainerClassNames(this.viewCell.id, [options.className], []); } else { templateData.rootContainer.classList.add(options.className); } </ins> } }); e.removed.forEach(options => { if (options.className) { <del> templateData.rootContainer.classList.remove(options.className); </del> <ins> if (this.useRenderer) { this.notebookEditor.deltaCellOutputContainerClassNames(this.viewCell.id, [], [options.className]); } else { templateData.rootContainer.classList.remove(options.className); } </ins> } }); })); <del> // apply decorations </del> viewCell.getCellDecorations().forEach(options => { if (options.className) { <del> templateData.rootContainer.classList.add(options.className); </del> <ins> if (this.useRenderer) { this.notebookEditor.deltaCellOutputContainerClassNames(this.viewCell.id, [options.className], []); } else { templateData.rootContainer.classList.add(options.className); } </ins> } });

const data = event.data; let cellContainer = document.getElementById(data.id); if (cellContainer) { <del> cellContainer?.parentElement?.removeChild(cellContainer); </del> <ins> 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); </ins> } } break;

markdownCellDragEnd(cellId: string, position: { clientY: number }): void { throw new Error('Method not implemented.'); } <ins> updateMarkdownPreviewSelectionState(cell: ICellViewModel, isSelected: boolean): Promise<void> { throw new Error('Method not implemented.'); } </ins> async beginComputeContributedKernels(): Promise<INotebookKernel[]> { return []; }