Fix cell editor size (#9218)

Main goal here is to correctly size cell code editors, so things like
breakpoints are accessible. Also removed some parts that didn't seem to
be doing anything - hopefully nothing breaks!

### Release Notes

#### New Features

- N/A

#### Bug Fixes

- N/A

### QA Notes

Author: seeM

src/vs/workbench/contrib/positronNotebook/browser/EnvironmentProvider.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 // Other dependencies.
 import { ISize } from '../../../../base/browser/positronReactRenderer.js';
-import { ISettableObservable } from '../../../../base/common/observableInternal/base.js';
+import { ISettableObservable } from '../../../../base/common/observable.js';
 import { IScopedContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
 
 /**
@@ -18,7 +18,7 @@ interface EnvironmentBundle {
 	/**
 	 * An observable for the size of the notebook.
 	 */
-	sizeObservable: ISettableObservable<ISize>;
+	size: ISettableObservable<ISize>;
 
 	/**
 	 * A callback to get the scoped context key service for a given container.

src/vs/workbench/contrib/positronNotebook/browser/PositronNotebookEditor.tsx

@@ -468,7 +468,7 @@ export class PositronNotebookEditor extends EditorPane {
 			<NotebookVisibilityProvider isVisible={this._isVisible}>
 				<NotebookInstanceProvider instance={notebookInstance}>
 					<EnvironentProvider environmentBundle={{
-						sizeObservable: this._size,
+						size: this._size,
 						scopedContextKeyProviderCallback: container => scopedContextKeyService.createScoped(container),
 					}}>
 						<PositronNotebookComponent />

src/vs/workbench/contrib/positronNotebook/browser/notebookCells/CellEditorMonacoWidget.tsx

@@ -9,7 +9,6 @@ import './CellEditorMonacoWidget.css';
 // React.
 import React from 'react';
 
-import * as DOM from '../../../../../base/browser/dom.js';
 import { EditorExtensionsRegistry, IEditorContributionDescription } from '../../../../../editor/browser/editorExtensions.js';
 import { CodeEditorWidget } from '../../../../../editor/browser/widget/codeEditor/codeEditorWidget.js';
 import { Event } from '../../../../../base/common/event.js';
@@ -37,10 +36,6 @@ export function CellEditorMonacoWidget({ cell }: { cell: PositronNotebookCellGen
 	/>;
 }
 
-// Padding for the editor widget. The sizing is not perfect but this helps the editor not overflow
-// its container. In the future we should figure out how to make sure this is sized correctly.
-const EDITOR_INSET_PADDING_PX = 1;
-
 /**
  * Create a cell editor widget for a cell.
  * @param cell Cell whose editor is to be created
@@ -51,107 +46,77 @@ export function useCellEditorWidget(cell: PositronNotebookCellGeneral) {
 	const environment = useEnvironment();
 	const instance = useNotebookInstance();
 
-	const sizeObservable = environment.sizeObservable;
-
-	// Grab the wrapping div for the editor. This is used for passing context key service
+	// Create an element ref to contain the editor
 	const editorPartRef = React.useRef<HTMLDivElement>(null);
-	// Grab a ref to the div that will hold the editor. This is needed to pass an element to the
-	// editor creation function.
-
 
 	// Create the editor
 	React.useEffect(() => {
 		if (!editorPartRef.current) { return; }
 
-		const disposableStore = new DisposableStore();
-
-		// We need to use a native dom element here instead of a react ref one because the elements
-		// created by react's refs are not _true_ dom elements and thus calls like `refEl instanceof
-		// HTMLElement` will return false. This is a problem when we hand the elements into the
-		// editor widget as it expects a true dom element.
-		const nativeContainer = DOM.$('.positron-monaco-editor-container');
-		editorPartRef.current.appendChild(nativeContainer);
+		const disposables = new DisposableStore();
 
 		const language = cell.cellModel.language;
-		const editorContextKeyService = environment.scopedContextKeyProviderCallback(editorPartRef.current);
-		disposableStore.add(editorContextKeyService);
+		const editorContextKeyService = disposables.add(environment.scopedContextKeyProviderCallback(editorPartRef.current));
 		const editorInstaService = services.instantiationService.createChild(new ServiceCollection([IContextKeyService, editorContextKeyService]));
 		const editorOptions = new CellEditorOptions(instance.getBaseCellEditorOptions(language), instance.notebookOptions, services.configurationService);
 
-
-		const editor = editorInstaService.createInstance(CodeEditorWidget, nativeContainer, {
+		const editor = disposables.add(editorInstaService.createInstance(CodeEditorWidget, editorPartRef.current, {
 			...editorOptions.getDefaultValue(),
-			// Turns off the margin of the editor. This should probably be placed in a settable
-			// option somewhere eventually.
-			glyphMargin: false,
 			dimension: {
-				width: 500,
-				height: 200
+				width: 0,
+				height: 0,
 			},
 		}, {
 			contributions: getNotebookEditorContributions()
-		});
-		disposableStore.add(editor);
+		}));
 		cell.attachEditor(editor);
 
-		editor.setValue(cell.getContent());
-
-		disposableStore.add(
-			editor.onDidFocusEditorWidget(() => {
-				instance.setEditingCell(cell);
-			})
-		);
+		// Request model for cell and pass to editor.
+		cell.getTextEditorModel().then(model => {
+			editor.setModel(model);
+		});
 
-		disposableStore.add(
-			editor.onDidBlurEditorWidget(() => {
-			})
-		);
+		disposables.add(editor.onDidFocusEditorWidget(() => {
+			instance.setEditingCell(cell);
+		}));
 
+		// disposables.add(editor.onDidBlurEditorWidget(() => {
+		// }));
 
 		/**
 		 * Resize the editor widget to fill the width of its container and the height of its
 		 * content.
 		 * @param height Height to set. Defaults to checking content height.
 		 */
 		function resizeEditor(height: number = editor.getContentHeight()) {
+			if (!editorPartRef.current) { return; }
 			editor.layout({
 				height,
-				width: (editorPartRef.current?.offsetWidth ?? 500) - EDITOR_INSET_PADDING_PX * 2
+				width: editorPartRef.current.offsetWidth,
 			});
 		}
 
-		// Request model for cell and pass to editor.
-		cell.getTextEditorModel().then(model => {
-			editor.setModel(model);
-			resizeEditor();
-
-			editor.onDidContentSizeChange(e => {
-				if (!(e.contentHeightChanged || e.contentWidthChanged)) { return; }
-				resizeEditor(e.contentHeight);
-			});
-		});
-
-		// Keep the width up-to-date as the window resizes.
+		// Resize the editor when its content size changes
+		disposables.add(editor.onDidContentSizeChange(e => {
+			if (!(e.contentHeightChanged || e.contentWidthChanged)) { return; }
+			resizeEditor(e.contentHeight);
+		}));
 
-		disposableStore.add(Event.fromObservable(sizeObservable)(() => {
+		// Resize the editor as the window resizes.
+		disposables.add(Event.fromObservable(environment.size)(() => {
 			resizeEditor();
 		}));
 
 		services.logService.info('Positron Notebook | useCellEditorWidget() | Setting up editor widget');
 
-
 		return () => {
 			services.logService.info('Positron Notebook | useCellEditorWidget() | Disposing editor widget');
-			disposableStore.dispose();
-			nativeContainer.remove();
+			disposables.dispose();
 			cell.detachEditor();
 		};
-	}, [cell, environment, instance, services.configurationService, services.instantiationService, services.logService, sizeObservable]);
-
-
+	}, [cell, environment, instance, services.configurationService, services.instantiationService, services.logService]);
 
 	return { editorPartRef };
-
 }