markdown editor align with code editor

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

@@ -22,6 +22,7 @@ export const EXECUTE_CELL_COMMAND_ID = 'workbench.notebook.cell.execute';
 // Cell sizing related
 export const CELL_MARGIN = 20;
 export const CELL_RUN_GUTTER = 32; // TODO should be dynamic based on execution order width, and runnable enablement
+export const EDITOR_TOP_MARGIN = 8;
 export const EDITOR_TOP_PADDING = 8;
 export const EDITOR_BOTTOM_PADDING = 8;
 export const EDITOR_TOOLBAR_HEIGHT = 22;

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

@@ -321,7 +321,7 @@ registerAction2(class extends Action2 {
 		});
 	}
 
-	async run(accessor: ServicesAccessor): Promise<void> {
+	async run(accessor: ServicesAccessor, context?: INotebookCellActionContext): Promise<void> {
 		return changeActiveCellToKind(CellKind.Markdown, accessor);
 	}
 });
@@ -384,7 +384,7 @@ async function changeActiveCellToKind(kind: CellKind, accessor: ServicesAccessor
 		return;
 	}
 
-	editor.focusNotebookCell(newCell, false);
+	editor.focusNotebookCell(newCell, true);
 	editor.deleteNotebookCell(activeCell);
 }
 

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

@@ -805,6 +805,7 @@ registerThemingParticipant((theme, collector) => {
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .output { margin: 0px ${CELL_MARGIN}px 0px ${CELL_MARGIN + CELL_RUN_GUTTER}px }`);
 
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell .cell-editor-container { width: calc(100% - ${CELL_RUN_GUTTER}px); }`);
+	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell .markdown-editor-container { margin-left: ${CELL_RUN_GUTTER}px; }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .monaco-list-row > div.cell.markdown { padding-left: ${CELL_RUN_GUTTER}px; }`);
 	collector.addRule(`.monaco-workbench .part.editor > .content .notebook-editor .cell .run-button-container { width: ${CELL_RUN_GUTTER}px; }`);
 });

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

@@ -179,7 +179,8 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
 	renderTemplate(container: HTMLElement): CellRenderTemplate {
 		const codeInnerContent = document.createElement('div');
 		DOM.addClasses(codeInnerContent, 'cell', 'code');
-		codeInnerContent.style.display = 'none';
+		const editorContainer = DOM.append(codeInnerContent, $('.markdown-editor-container'));
+		editorContainer.style.display = 'none';
 
 		const disposables = new DisposableStore();
 		const toolbar = this.createToolbar(container);
@@ -196,7 +197,7 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
 		return {
 			container: container,
 			cellContainer: innerContent,
-			editingContainer: codeInnerContent,
+			editingContainer: editorContainer,
 			disposables,
 			toolbar,
 			toJSON: () => { return {}; }

src/vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel.ts

@@ -12,7 +12,7 @@ import { ICellViewModel, CellFindMatch, MarkdownCellLayoutInfo, MarkdownCellLayo
 import { MarkdownRenderer } from 'vs/workbench/contrib/notebook/browser/view/renderers/mdRenderer';
 import { BaseCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/baseCellViewModel';
 import { CellKind, ICell } from 'vs/workbench/contrib/notebook/common/notebookCommon';
-import { CELL_MARGIN } from 'vs/workbench/contrib/notebook/browser/constants';
+import { CELL_MARGIN, CELL_RUN_GUTTER } from 'vs/workbench/contrib/notebook/browser/constants';
 import { NotebookEventDispatcher } from 'vs/workbench/contrib/notebook/browser/viewModel/eventDispatcher';
 
 export class MarkdownCellViewModel extends BaseCellViewModel implements ICellViewModel {
@@ -55,7 +55,7 @@ export class MarkdownCellViewModel extends BaseCellViewModel implements ICellVie
 
 	layoutChange(state: MarkdownCellLayoutChangeEvent) {
 		// recompute
-		const editorWidth = state.outerWidth !== undefined ? state.outerWidth - CELL_MARGIN * 2 : 0;
+		const editorWidth = state.outerWidth !== undefined ? state.outerWidth - CELL_MARGIN * 2 - CELL_RUN_GUTTER : 0;
 
 		this._layoutInfo = {
 			fontInfo: state.font || null,