diff --git a/src/vs/workbench/contrib/notebook/browser/media/notebook.css b/src/vs/workbench/contrib/notebook/browser/media/notebook.css index 2bf85c2629515986b30abf6f6ccd603006522dd1..7c2b8a9f405d8b570f94510a4ca3a47bc52d7e70 100644 --- a/src/vs/workbench/contrib/notebook/browser/media/notebook.css +++ b/src/vs/workbench/contrib/notebook/browser/media/notebook.css @@ -22,7 +22,8 @@ } */ .monaco-workbench .part.editor > .content .notebook-editor .cell-list-container .overflowingContentWidgets > div { - z-index: 600 !important; /* @rebornix: larger than the editor title bar */ + z-index: 600 !important; + /* @rebornix: larger than the editor title bar */ } .monaco-workbench .part.editor > .content .notebook-editor .cell-list-container .monaco-list-rows { @@ -74,7 +75,20 @@ } .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image .cell-editor-part { - width: 100%; + width: calc(100% - 32px); + /* minus left gutter */ +} + +.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image .cell-editor-container > div > div { + /* Rendered code content - show a single unwrapped line */ + height: 20px; + overflow: hidden; + white-space: pre-wrap; +} + +.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.cell-drag-image.markdown-cell-row .cell.markdown { + white-space: nowrap; + overflow: hidden; } .monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row .cell { @@ -184,7 +198,8 @@ position: absolute; height: 26px; right: 36px; - top: -14px; /* this lines up the bottom toolbar border with the current line when on line 01 */ + top: -14px; + /* this lines up the bottom toolbar border with the current line when on line 01 */ z-index: 30; } @@ -605,10 +620,6 @@ cursor: pointer; } -.monaco-workbench .part.editor > .content .notebook-editor > .cell-list-container > .monaco-list > .monaco-scrollable-element > .monaco-list-rows > .monaco-list-row.markdown-cell-row .cell-editor-part { - width: 100%; -} - /** Theming */ /* .monaco-workbench .part.editor > .content .notebook-editor .cell.markdown pre { diff --git a/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts b/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts index 682e52c098a9b6112b05f6374553685fc843f23c..8fd1f41dfc6e47ee0d98326bb565c397a384f4ce 100644 --- a/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts +++ b/src/vs/workbench/contrib/notebook/browser/notebookBrowser.ts @@ -13,7 +13,7 @@ import { Event } from 'vs/base/common/event'; import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle'; import { ScrollEvent } from 'vs/base/common/scrollable'; import { URI } from 'vs/base/common/uri'; -import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget'; +import { ICodeEditor } from 'vs/editor/browser/editorBrowser'; import { BareFontInfo } from 'vs/editor/common/config/fontInfo'; import { Range } from 'vs/editor/common/core/range'; import { IPosition } from 'vs/editor/common/core/position'; @@ -420,6 +420,7 @@ export interface MarkdownCellRenderTemplate extends BaseCellRenderTemplate { editorPart: HTMLElement; editorContainer: HTMLElement; foldingIndicator: HTMLElement; + currentEditor?: ICodeEditor; } export interface CodeCellRenderTemplate extends BaseCellRenderTemplate { @@ -429,7 +430,7 @@ export interface CodeCellRenderTemplate extends BaseCellRenderTemplate { runButtonContainer: HTMLElement; executionOrderLabel: HTMLElement; outputContainer: HTMLElement; - editor: CodeEditorWidget; + editor: ICodeEditor; progressBar: ProgressBar; } 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 0e164a8265303ae6fc6a435e268d0ae44ff5c014..49c70babd9385118d450dd015e75f5368c16087c 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts @@ -353,7 +353,7 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR const codeInnerContent = DOM.append(container, $('.cell.code')); const editorPart = DOM.append(codeInnerContent, $('.cell-editor-part')); - const editorContainer = DOM.append(editorPart, $('.markdown-editor-container')); + const editorContainer = DOM.append(editorPart, $('.cell-editor-container')); editorPart.style.display = 'none'; const innerContent = DOM.append(container, $('.cell.markdown')); @@ -385,16 +385,36 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR } private getDragImage(templateData: MarkdownCellRenderTemplate): HTMLElement { + if (templateData.currentRenderedCell!.editState === CellEditState.Editing) { + return this._getEditDragImage(templateData); + } else { + return this._getMarkdownDragImage(templateData); + } + } + + private _getMarkdownDragImage(templateData: MarkdownCellRenderTemplate): HTMLElement { const dragImageContainer = DOM.$('.cell-drag-image.monaco-list-row.focused.markdown-cell-row'); dragImageContainer.innerHTML = templateData.container.innerHTML; + + // Remove all rendered content nodes after the + const markdownContent = dragImageContainer.querySelector('.cell.markdown')!; + const contentNodes = markdownContent.children[0].children; + for (let i = contentNodes.length - 1; i >= 1; i--) { + contentNodes.item(i)!.remove(); + } + return dragImageContainer; } + private _getEditDragImage(templateData: MarkdownCellRenderTemplate): HTMLElement { + return new CodeCellDragImageRenderer().getDragImage(templateData, templateData.currentEditor!, 'markdown'); + } renderElement(element: MarkdownCellViewModel, index: number, templateData: MarkdownCellRenderTemplate, height: number | undefined): void { this.commonRenderElement(element, index, templateData); templateData.currentRenderedCell = element; + templateData.currentEditor = undefined; templateData.editorPart!.style.display = 'none'; templateData.cellContainer.innerHTML = ''; let renderedHTML = element.getHTML(); @@ -520,8 +540,6 @@ export class CellDragAndDropController { templateData.disposables.add(domEvent(container, DOM.EventType.DRAG_OVER)(event => { event.preventDefault(); - - const location = this.getDropInsertLocation(templateData, event); DOM.toggleClass(container, DRAGOVER_TOP_CLASS, location === 'above'); DOM.toggleClass(container, DRAGOVER_BOTTOM_CLASS, location === 'below'); @@ -672,8 +690,8 @@ class EditorTextRenderer { } class CodeCellDragImageRenderer { - getDragImage(templateData: CodeCellRenderTemplate): HTMLElement { - let dragImage = this._getDragImage(templateData); + getDragImage(templateData: BaseCellRenderTemplate, editor: ICodeEditor, type: 'code' | 'markdown'): HTMLElement { + let dragImage = this._getDragImage(templateData, editor, type); if (!dragImage) { // TODO@roblourens I don't think this can happen dragImage = document.createElement('div'); @@ -683,8 +701,8 @@ class CodeCellDragImageRenderer { return dragImage; } - private _getDragImage(templateData: CodeCellRenderTemplate): HTMLElement | null { - const dragImageContainer = DOM.$('.cell-drag-image.monaco-list-row.focused.code-cell-row'); + private _getDragImage(templateData: BaseCellRenderTemplate, editor: ICodeEditor, type: 'code' | 'markdown'): HTMLElement | null { + const dragImageContainer = DOM.$(`.cell-drag-image.monaco-list-row.focused.${type}-cell-row`); dragImageContainer.innerHTML = templateData.container.innerHTML; const editorContainer = dragImageContainer.querySelector('.cell-editor-container'); @@ -697,7 +715,7 @@ class CodeCellDragImageRenderer { focusIndicator.style.height = '40px'; } - const richEditorText = new EditorTextRenderer().getRichText(templateData.editor, new Range(1, 1, 1, 1000)); + const richEditorText = new EditorTextRenderer().getRichText(editor, new Range(1, 1, 1, 1000)); if (!richEditorText) { return null; } @@ -811,7 +829,7 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende toJSON: () => { return {}; } }; - this.dndController.addListeners(templateData, () => new CodeCellDragImageRenderer().getDragImage(templateData)); + this.dndController.addListeners(templateData, () => new CodeCellDragImageRenderer().getDragImage(templateData, templateData.editor, 'code')); return templateData; } diff --git a/src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts b/src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts index 7686dce6989b27abb8d295389197da41902b4a40..7be807d4ac7d5b2fbbb3a494e8c350fcda927995 100644 --- a/src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts +++ b/src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts @@ -87,6 +87,7 @@ export class StatefullMarkdownCell extends Disposable { height: editorHeight } }, {}); + templateData.currentEditor = this.editor; const cts = new CancellationTokenSource(); this._register({ dispose() { cts.dispose(true); } });