From 9030a3914a21e4abf619a8c53791cadebbfc01ac Mon Sep 17 00:00:00 2001 From: rebornix Date: Fri, 27 Mar 2020 10:13:00 -0700 Subject: [PATCH] markdown editor align with code editor --- src/vs/workbench/contrib/notebook/browser/constants.ts | 1 + .../contrib/notebook/browser/contrib/notebookActions.ts | 4 ++-- src/vs/workbench/contrib/notebook/browser/notebookEditor.ts | 1 + .../contrib/notebook/browser/view/renderers/cellRenderer.ts | 5 +++-- .../notebook/browser/viewModel/markdownCellViewModel.ts | 4 ++-- 5 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/contrib/notebook/browser/constants.ts b/src/vs/workbench/contrib/notebook/browser/constants.ts index 3fe4d2a5005..d61caad77f2 100644 --- a/src/vs/workbench/contrib/notebook/browser/constants.ts +++ b/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; diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/notebookActions.ts b/src/vs/workbench/contrib/notebook/browser/contrib/notebookActions.ts index a556413769c..9371e7e14eb 100644 --- a/src/vs/workbench/contrib/notebook/browser/contrib/notebookActions.ts +++ b/src/vs/workbench/contrib/notebook/browser/contrib/notebookActions.ts @@ -321,7 +321,7 @@ registerAction2(class extends Action2 { }); } - async run(accessor: ServicesAccessor): Promise { + async run(accessor: ServicesAccessor, context?: INotebookCellActionContext): Promise { 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); } diff --git a/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts b/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts index c1eaaffb65c..4c1ed0d9004 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookEditor.ts +++ b/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; }`); }); diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts index 2aad988a759..79bbe961fe9 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts +++ b/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 {}; } diff --git a/src/vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel.ts b/src/vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel.ts index 3655ff16ce9..352918939aa 100644 --- a/src/vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel.ts +++ b/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, -- GitLab