Remove markdown cell rendered preview (#10872)

Addresses #10455 

This updates markdown cells so that they:
- show a `pencil` icon in action bar (instead of chevron down) to toggle
edit mode
- show a `checkmark` icon in action bar (instead of chevron up) to
toggle view mode
- do not show a rendered preview of the cell contents when in edit mode

**AFTER**


https://github.com/user-attachments/assets/bec306bf-dcb3-41ac-8cba-b80dd993c45f



### Release Notes

<!--
Optionally, replace `N/A` with text to be included in the next release
notes.
The `N/A` bullets are ignored. If you refer to one or more Positron
issues,
these issues are used to collect information about the feature or
bugfix, such
as the relevant language pack as determined by Github labels of type
`lang: `.
  The note will automatically be tagged with the language.

These notes are typically filled by the Positron team. If you are an
external
  contributor, you may ignore this section.
-->

#### New Features

- N/A

#### Bug Fixes

- N/A


### QA Notes
@:positron-notebooks
<!--
Positron team members: please add relevant e2e test tags, so the tests
can be
  run when you open this pull request.

- Instructions:
https://github.com/posit-dev/positron/blob/main/test/e2e/README.md#pull-requests-and-test-tags
- Available tags:
https://github.com/posit-dev/positron/blob/main/test/e2e/infra/test-runner/test-tags.ts
-->


<!--
  Add additional information for QA on how to validate the change,
  paying special attention to the level of risk, adjacent areas that
  could be affected by the change, and any important contextual
  information not present in the linked issues.
-->

Author: dhruvisompura

src/vs/workbench/contrib/positronNotebook/browser/notebookCells/NotebookCellSelection.css

@@ -99,11 +99,25 @@
 	border: none;
 }
 
-/* When selected/editing AND no outputs: restore bottom rounding */
-.positron-notebook-cell.selected:has(.positron-notebook-cell-outputs.no-outputs) .positron-notebook-editor-container::after,
-.positron-notebook-cell.editing:has(.positron-notebook-cell-outputs.no-outputs) .positron-notebook-editor-container::after,
-.positron-notebook-cell:not(.selected):not(.editing):hover:has(.positron-notebook-cell-outputs.no-outputs) .positron-notebook-editor-container::after {
-	border-bottom-left-radius: var(--_positron-notebook-selection-bar-radius);
+/* Restore bottom rounding when no outputs are shown */
+.positron-notebook-cell {
+	/* Code cells with no outputs */
+	&.selected:has(.positron-notebook-cell-outputs.no-outputs),
+	&.editing:has(.positron-notebook-cell-outputs.no-outputs),
+	&:not(.selected):not(.editing):hover:has(.positron-notebook-cell-outputs.no-outputs) {
+		.positron-notebook-editor-container::after {
+			border-bottom-left-radius: var(--_positron-notebook-selection-bar-radius);
+		}
+	}
+
+	/* Markdown cells in edit mode (no output element) */
+	&.selected:not(:has(.positron-notebook-cell-outputs)),
+	&.editing:not(:has(.positron-notebook-cell-outputs)),
+	&:not(.selected):not(.editing):hover:not(:has(.positron-notebook-cell-outputs)) {
+		.positron-notebook-editor-container::after {
+			border-bottom-left-radius: var(--_positron-notebook-selection-bar-radius);
+		}
+	}
 }
 
 /* When editor container is empty, round both corners of outputs bar (This is the case when markdown has been rendered but doesn't have an editor open) */

src/vs/workbench/contrib/positronNotebook/browser/notebookCells/NotebookMarkdownCell.tsx

@@ -33,20 +33,26 @@ export function NotebookMarkdownCell({ cell }: { cell: PositronNotebookMarkdownC
 			<div className={`positron-notebook-editor-container ${editorShown ? '' : 'editor-hidden'}`}>
 				{editorShown ? <CellEditorMonacoWidget cell={cell} /> : null}
 			</div>
-			<div className='cell-contents positron-notebook-cell-outputs'>
-				<div className='positron-notebook-markdown-rendered' onDoubleClick={() => {
-					cell.toggleEditor();
-				}}>
-					{
-						markdownString.length > 0 ?
-							<Markdown content={markdownString} />
-							: <div className='empty-output-msg'>
-								{emptyMarkdownCell}
-								{!editorShown && doubleClickToEdit}
-							</div>
-					}
-				</div>
-			</div>
+			{!editorShown
+				? (
+					<div className='cell-contents positron-notebook-cell-outputs'>
+						<div
+							className='positron-notebook-markdown-rendered'
+							onDoubleClick={() => cell.toggleEditor()}
+						>
+							{
+								markdownString.length > 0
+									? <Markdown content={markdownString} />
+									: <div className='empty-output-msg'>
+										{emptyMarkdownCell}
+										{doubleClickToEdit}
+									</div>
+							}
+						</div>
+					</div>
+				)
+				: null
+			}
 		</NotebookCellWrapper>
 	);
 }

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

@@ -442,7 +442,7 @@ registerAction2(class extends NotebookAction2 {
  * This command handles the keybinding for all cell types.
  *
  * This action has a counterpart command called
- * `positronNotebook.cell.collapseMarkdownEditor` that is
+ * `positronNotebook.cell.viewMarkdown` that is
  * used to contribute the same functionality to markdown
  * cell action bars. We should keep both commands in sync
  * to ensure consistent behavior.
@@ -864,7 +864,7 @@ registerAction2(class extends NotebookAction2 {
 		super({
 			id: 'positronNotebook.cell.openMarkdownEditor',
 			title: localize2('positronNotebook.cell.openMarkdownEditor', "Open Markdown Editor"),
-			icon: ThemeIcon.fromId('chevron-down'),
+			icon: ThemeIcon.fromId('edit'),
 			menu: {
 				id: MenuId.PositronNotebookCellActionBarLeft,
 				order: 10,
@@ -887,7 +887,7 @@ registerAction2(class extends NotebookAction2 {
 });
 
 /**
- * Collapse markdown editor (For action bar)
+ * View markdown (For action bar)
  *
  * Handles contributing the behavior of
  * `positronNotebook.cell.quitEdit` to markdown cell
@@ -897,9 +897,9 @@ registerAction2(class extends NotebookAction2 {
 registerAction2(class extends NotebookAction2 {
 	constructor() {
 		super({
-			id: 'positronNotebook.cell.collapseMarkdownEditor',
-			title: localize2('positronNotebook.cell.collapseMarkdownEditor', "Collapse Markdown Editor"),
-			icon: ThemeIcon.fromId('chevron-up'),
+			id: 'positronNotebook.cell.viewMarkdown',
+			title: localize2('positronNotebook.cell.viewMarkdown', "View Markdown"),
+			icon: ThemeIcon.fromId('check'),
 			menu: {
 				id: MenuId.PositronNotebookCellActionBarLeft,
 				order: 10,

test/e2e/pages/notebooksPositron.ts

@@ -50,7 +50,7 @@ export class PositronNotebooks extends Notebooks {
 	private spinnerAtIndex = (index: number) => this.cell.nth(index).getByLabel(/cell is executing/i);
 	private executionStatusAtIndex = (index: number) => this.cell.nth(index).locator('[data-execution-status]');
 	private deleteCellButton = this.cell.getByRole('button', { name: /Delete Cell/i });
-	collapseMarkdownEditor = this.code.driver.page.getByRole('button', { name: 'Collapse markdown editor' });
+	viewMarkdown = this.code.driver.page.getByRole('button', { name: 'View markdown' });
 	expandMarkdownEditor = this.code.driver.page.getByRole('button', { name: 'Open markdown editor' });
 
 	constructor(code: Code, quickinput: QuickInput, quickaccess: QuickAccess, hotKeys: HotKeys, private contextMenu: ContextMenu) {
@@ -76,7 +76,7 @@ export class PositronNotebooks extends Notebooks {
 
 		if (cellType === 'markdown') {
 			// Enter edit mode to ensure the monaco view-lines are present
-			const inEditMode = await this.cell.nth(cellIndex).getByRole('button', { name: 'Collapse markdown editor' }).isVisible();
+			const inEditMode = await this.cell.nth(cellIndex).getByRole('button', { name: 'View markdown' }).isVisible();
 			if (!inEditMode) {
 				await this.selectCellAtIndex(cellIndex, { editMode: true });
 			}
@@ -94,7 +94,7 @@ export class PositronNotebooks extends Notebooks {
 		});
 
 		if (cellType === 'markdown') {
-			await this.collapseMarkdownEditor.click();
+			await this.viewMarkdown.click();
 		}
 
 		return content;

test/e2e/tests/notebooks-positron/notebook-markdown.test.ts

@@ -38,6 +38,9 @@ test.describe('Positron Notebooks: Markdown Cells', {
 		const markdownContent = '# Heading 1\n\n## Heading 2\n\n**Bold Text**\n\n*Italic Text*';
 		await notebooksPositron.addCodeToCell(1, markdownContent);
 
+		await notebooksPositron.viewMarkdown.click();
+		await notebooksPositron.expectCellIndexToBeSelected(1, { inEditMode: false });
+
 		// verify markdown rendered correctly
 		await notebooksPositron.expectMarkdownTagToBe('h1', 'Heading 1');
 		await notebooksPositron.expectMarkdownTagToBe('h2', 'Heading 2');
@@ -62,7 +65,7 @@ test.describe('Positron Notebooks: Markdown Cells', {
 		await notebooksPositron.expectCellIndexToBeSelected(1, { inEditMode: true });
 
 		// switch to preview mode and verify
-		await notebooksPositron.collapseMarkdownEditor.click();
+		await notebooksPositron.viewMarkdown.click();
 		await notebooksPositron.expectCellIndexToBeSelected(1, { inEditMode: false });
 		await notebooksPositron.expectMarkdownTagToBe('strong', 'bold');
 		await notebooksPositron.expectMarkdownTagToBe('em', 'italic');