detached overflow widgets for diff editor.

src/vs/editor/browser/editorBrowser.ts

@@ -348,6 +348,14 @@ export interface IEditorConstructionOptions extends IEditorOptions {
 	overflowWidgetsDomNode?: HTMLElement;
 }
 
+export interface IDiffEditorConstructionOptions extends IDiffEditorOptions {
+	/**
+	 * Place overflow widgets inside an external DOM node.
+	 * Defaults to an internal DOM node.
+	 */
+	overflowWidgetsDomNode?: HTMLElement;
+}
+
 /**
  * A rich code editor.
  */

src/vs/editor/browser/widget/diffEditorWidget.ts

@@ -230,7 +230,7 @@ export class DiffEditorWidget extends Disposable implements editorBrowser.IDiffE
 
 	constructor(
 		domElement: HTMLElement,
-		options: IDiffEditorOptions,
+		options: editorBrowser.IDiffEditorConstructionOptions,
 		@IClipboardService clipboardService: IClipboardService,
 		@IEditorWorkerService editorWorkerService: IEditorWorkerService,
 		@IContextKeyService contextKeyService: IContextKeyService,
@@ -487,7 +487,7 @@ export class DiffEditorWidget extends Disposable implements editorBrowser.IDiffE
 		this._layoutOverviewRulers();
 	}
 
-	private _createLeftHandSideEditor(options: IDiffEditorOptions, instantiationService: IInstantiationService): CodeEditorWidget {
+	private _createLeftHandSideEditor(options: editorBrowser.IDiffEditorConstructionOptions, instantiationService: IInstantiationService): CodeEditorWidget {
 		const editor = this._createInnerEditor(instantiationService, this._originalDomNode, this._adjustOptionsForLeftHandSide(options, this._originalIsEditable, this._originalCodeLens));
 
 		this._register(editor.onDidScrollChange((e) => {
@@ -532,7 +532,7 @@ export class DiffEditorWidget extends Disposable implements editorBrowser.IDiffE
 		return editor;
 	}
 
-	private _createRightHandSideEditor(options: IDiffEditorOptions, instantiationService: IInstantiationService): CodeEditorWidget {
+	private _createRightHandSideEditor(options: editorBrowser.IDiffEditorConstructionOptions, instantiationService: IInstantiationService): CodeEditorWidget {
 		const editor = this._createInnerEditor(instantiationService, this._modifiedDomNode, this._adjustOptionsForRightHandSide(options, this._modifiedCodeLens));
 
 		this._register(editor.onDidScrollChange((e) => {
@@ -1089,8 +1089,8 @@ export class DiffEditorWidget extends Disposable implements editorBrowser.IDiffE
 		}
 	}
 
-	private _adjustOptionsForSubEditor(options: IDiffEditorOptions): IDiffEditorOptions {
-		let clonedOptions: IDiffEditorOptions = objects.deepClone(options || {});
+	private _adjustOptionsForSubEditor(options: editorBrowser.IDiffEditorConstructionOptions): editorBrowser.IDiffEditorConstructionOptions {
+		let clonedOptions: editorBrowser.IDiffEditorConstructionOptions = objects.deepClone(options || {});
 		clonedOptions.inDiffEditor = true;
 		clonedOptions.wordWrap = 'off';
 		clonedOptions.wordWrapMinified = false;
@@ -1100,6 +1100,7 @@ export class DiffEditorWidget extends Disposable implements editorBrowser.IDiffE
 		clonedOptions.folding = false;
 		clonedOptions.codeLens = false;
 		clonedOptions.fixedOverflowWidgets = true;
+		clonedOptions.overflowWidgetsDomNode = options.overflowWidgetsDomNode;
 		// clonedOptions.lineDecorationsWidth = '2ch';
 		if (!clonedOptions.minimap) {
 			clonedOptions.minimap = {};
@@ -1108,7 +1109,7 @@ export class DiffEditorWidget extends Disposable implements editorBrowser.IDiffE
 		return clonedOptions;
 	}
 
-	private _adjustOptionsForLeftHandSide(options: IDiffEditorOptions, isEditable: boolean, isCodeLensEnabled: boolean): IEditorOptions {
+	private _adjustOptionsForLeftHandSide(options: editorBrowser.IDiffEditorConstructionOptions, isEditable: boolean, isCodeLensEnabled: boolean): editorBrowser.IEditorConstructionOptions {
 		let result = this._adjustOptionsForSubEditor(options);
 		if (isCodeLensEnabled) {
 			result.codeLens = true;
@@ -1118,7 +1119,7 @@ export class DiffEditorWidget extends Disposable implements editorBrowser.IDiffE
 		return result;
 	}
 
-	private _adjustOptionsForRightHandSide(options: IDiffEditorOptions, isCodeLensEnabled: boolean): IEditorOptions {
+	private _adjustOptionsForRightHandSide(options: editorBrowser.IDiffEditorConstructionOptions, isCodeLensEnabled: boolean): editorBrowser.IEditorConstructionOptions {
 		let result = this._adjustOptionsForSubEditor(options);
 		if (isCodeLensEnabled) {
 			result.codeLens = true;

src/vs/monaco.d.ts

@@ -4414,6 +4414,14 @@ declare namespace monaco.editor {
 		overflowWidgetsDomNode?: HTMLElement;
 	}
 
+	export interface IDiffEditorConstructionOptions extends IDiffEditorOptions {
+		/**
+		 * Place overflow widgets inside an external DOM node.
+		 * Defaults to an internal DOM node.
+		 */
+		overflowWidgetsDomNode?: HTMLElement;
+	}
+
 	/**
 	 * A rich code editor.
 	 */

src/vs/vscode.proposed.d.ts

@@ -1616,7 +1616,10 @@ declare module 'vscode' {
 	export namespace notebook {
 		export function registerNotebookContentProvider(
 			notebookType: string,
-			provider: NotebookContentProvider
+			provider: NotebookContentProvider,
+			options?: {
+				transientMetadata?: { [K in keyof NotebookCellMetadata]?: boolean }
+			}
 		): Disposable;
 
 		export function registerNotebookKernelProvider(

src/vs/workbench/contrib/notebook/browser/diff/cellComponents.ts

@@ -339,7 +339,9 @@ abstract class AbstractCellRenderer extends Disposable {
 			const modifiedMetadataSource = this._getFormatedMetadataJSON(this.cell.modified?.metadata || {}, this.cell.modified?.language);
 			if (originalMetadataSource !== modifiedMetadataSource) {
 				this._metadataEditor = this.instantiationService.createInstance(DiffEditorWidget, this._metadataEditorContainer!, {
-					...fixedDiffEditorOptions
+					...fixedDiffEditorOptions,
+					overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
+
 				});
 
 				DOM.addClass(this._metadataEditorContainer!, 'diff');
@@ -371,7 +373,8 @@ abstract class AbstractCellRenderer extends Disposable {
 			dimension: {
 				width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true),
 				height: 0
-			}
+			},
+			overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
 		}, {});
 
 		const mode = this.modeService.create('json');
@@ -408,7 +411,8 @@ abstract class AbstractCellRenderer extends Disposable {
 			const modifiedOutputsSource = this._getFormatedOutputJSON(this.cell.modified?.outputs || []);
 			if (originalOutputsSource !== modifiedOutputsSource) {
 				this._outputEditor = this.instantiationService.createInstance(DiffEditorWidget, this._outputEditorContainer!, {
-					...fixedDiffEditorOptions
+					...fixedDiffEditorOptions,
+					overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
 				});
 
 				DOM.addClass(this._outputEditorContainer!, 'diff');
@@ -440,7 +444,8 @@ abstract class AbstractCellRenderer extends Disposable {
 			dimension: {
 				width: this.cell.getComputedCellContainerWidth(this.notebookEditor.getLayoutInfo(), false, true),
 				height: 0
-			}
+			},
+			overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
 		}, {});
 
 		const mode = this.modeService.create('json');
@@ -514,7 +519,8 @@ export class UnchangedCell extends AbstractCellRenderer {
 			dimension: {
 				width: this.notebookEditor.getLayoutInfo().width - 2 * DIFF_CELL_MARGIN,
 				height: editorHeight
-			}
+			},
+			overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
 		}, {});
 
 		this._register(this._editor.onDidContentSizeChange((e) => {
@@ -601,7 +607,8 @@ export class DeletedCell extends AbstractCellRenderer {
 			dimension: {
 				width: (this.notebookEditor.getLayoutInfo().width - 2 * DIFF_CELL_MARGIN) / 2 - 18,
 				height: editorHeight
-			}
+			},
+			overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
 		}, {});
 		this._layoutInfo.editorHeight = editorHeight;
 
@@ -686,7 +693,8 @@ export class InsertCell extends AbstractCellRenderer {
 			dimension: {
 				width: (this.notebookEditor.getLayoutInfo().width - 2 * DIFF_CELL_MARGIN) / 2 - 18,
 				height: editorHeight
-			}
+			},
+			overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
 		}, {});
 
 		this._layoutInfo.editorHeight = editorHeight;
@@ -768,7 +776,8 @@ export class ModifiedCell extends AbstractCellRenderer {
 		this._editorContainer = DOM.append(sourceContainer, DOM.$('.editor-container'));
 
 		this._editor = this.instantiationService.createInstance(DiffEditorWidget, this._editorContainer, {
-			...fixedDiffEditorOptions
+			...fixedDiffEditorOptions,
+			overflowWidgetsDomNode: this.notebookEditor.getOverflowContainerDomNode()
 		});
 		DOM.addClass(this._editorContainer, 'diff');
 

src/vs/workbench/contrib/notebook/browser/diff/common.ts

@@ -11,6 +11,7 @@ import { DisposableStore } from 'vs/base/common/lifecycle';
 
 export interface INotebookTextDiffEditor {
 	onMouseUp: Event<{ readonly event: MouseEvent; readonly target: CellDiffViewModel; }>;
+	getOverflowContainerDomNode(): HTMLElement;
 	getLayoutInfo(): NotebookLayoutInfo;
 	layoutNotebookCell(cell: CellDiffViewModel, height: number): void;
 }

src/vs/workbench/contrib/notebook/browser/diff/notebookTextDiffEditor.ts

@@ -17,7 +17,7 @@ import { WorkbenchList } from 'vs/platform/list/browser/listService';
 import { CellDiffViewModel } from 'vs/workbench/contrib/notebook/browser/diff/celllDiffViewModel';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
 import { CellDiffRenderer, NotebookCellTextDiffListDelegate, NotebookTextDiffList } from 'vs/workbench/contrib/notebook/browser/diff/notebookTextDiffList';
-import { IContextKey, IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
+import { IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey';
 import { diffDiagonalFill, diffInserted, diffRemoved, editorBackground, focusBorder, foreground } from 'vs/platform/theme/common/colorRegistry';
 import { INotebookEditorWorkerService } from 'vs/workbench/contrib/notebook/common/services/notebookWorkerService';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
@@ -37,6 +37,7 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
 	static readonly ID: string = 'workbench.editor.notebookTextDiffEditor';
 
 	private _rootElement!: HTMLElement;
+	private _overflowContainer!: HTMLElement;
 	private _dimension: DOM.Dimension | null = null;
 	private _list!: WorkbenchList<CellDiffViewModel>;
 	private _fontInfo: BareFontInfo | undefined;
@@ -45,7 +46,6 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
 	public readonly onMouseUp = this._onMouseUp.event;
 	private _eventDispatcher: NotebookDiffEditorEventDispatcher | undefined;
 	protected _scopeContextKeyService!: IContextKeyService;
-	private _inNotebookTextDiffEditor: IContextKey<boolean> | null = null;
 
 	constructor(
 		@IInstantiationService readonly instantiationService: IInstantiationService,
@@ -64,9 +64,10 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
 
 	protected createEditor(parent: HTMLElement): void {
 		this._rootElement = DOM.append(parent, DOM.$('.notebook-text-diff-editor'));
-		// this._scopeContextKeyService = this._register(this.contextKeyService.createScoped(parent));
-		this._inNotebookTextDiffEditor = IN_NOTEBOOK_TEXT_DIFF_EDITOR.bindTo(this.contextKeyService);
-		this._inNotebookTextDiffEditor.set(true);
+		this._overflowContainer = document.createElement('div');
+		DOM.addClass(this._overflowContainer, 'notebook-overflow-widget-container');
+		DOM.addClass(this._overflowContainer, 'monaco-editor');
+		DOM.append(parent, this._overflowContainer);
 
 		const renderer = this.instantiationService.createInstance(CellDiffRenderer, this);
 
@@ -262,6 +263,10 @@ export class NotebookTextDiffEditor extends EditorPane implements INotebookTextD
 		return this._rootElement;
 	}
 
+	getOverflowContainerDomNode(): HTMLElement {
+		return this._overflowContainer;
+	}
+
 	getControl(): NotebookEditorWidget | undefined {
 		return undefined;
 	}