Polish markdown dragging

#96308

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 {

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;
 }
 

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;
 	}
 

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); } });