extract CellEditorOptions which can update based on the underlying config, #95956

src/vs/workbench/contrib/notebook/browser/notebookEditor.ts

@@ -10,7 +10,7 @@ import { IMouseWheelEvent, StandardMouseEvent } from 'vs/base/browser/mouseEvent
 import { CancellationToken, CancellationTokenSource } from 'vs/base/common/cancellation';
 import { Color, RGBA } from 'vs/base/common/color';
 import { Emitter, Event } from 'vs/base/common/event';
-import { DisposableStore, MutableDisposable } from 'vs/base/common/lifecycle';
+import { DisposableStore, MutableDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
 import { BareFontInfo } from 'vs/editor/common/config/fontInfo';
@@ -271,6 +271,7 @@ export class NotebookEditor extends BaseEditor implements INotebookEditor {
 		this.list.rowsContainer.appendChild(this.webview.element);
 
 		this._register(this.list);
+		this._register(combinedDisposable(...renders));
 
 		// transparent cover
 		this.webviewTransparentCover = DOM.append(this.list.rowsContainer, $('.webview-cover'));

src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts

@@ -13,7 +13,7 @@ import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
 import { IAction, ActionRunner } from 'vs/base/common/actions';
 import { Range } from 'vs/editor/common/core/range';
 import { escape } from 'vs/base/common/strings';
-import { DisposableStore } from 'vs/base/common/lifecycle';
+import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle';
 import * as modes from 'vs/editor/common/modes';
 import * as platform from 'vs/base/common/platform';
 import { Color } from 'vs/base/common/color';
@@ -48,6 +48,7 @@ import { domEvent } from 'vs/base/browser/event';
 import { tokenizeLineToHTML } from 'vs/editor/common/modes/textToHtmlTokenizer';
 import { ITextModel } from 'vs/editor/common/model';
 import { BaseCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/baseCellViewModel';
+import { Emitter, Event } from 'vs/base/common/event';
 
 const $ = DOM.$;
 
@@ -94,46 +95,88 @@ export class CodiconActionViewItem extends ContextAwareMenuEntryActionViewItem {
 	}
 }
 
+export class CellEditorOptions {
+
+	private static fixedEditorOptions: IEditorOptions = {
+		padding: {
+			top: EDITOR_TOP_PADDING,
+			bottom: EDITOR_BOTTOM_PADDING
+		},
+		scrollBeyondLastLine: false,
+		scrollbar: {
+			verticalScrollbarSize: 14,
+			horizontal: 'auto',
+			useShadows: true,
+			verticalHasArrows: false,
+			horizontalHasArrows: false,
+			alwaysConsumeMouseWheel: false
+		},
+		renderLineHighlightOnlyWhenFocus: true,
+		overviewRulerLanes: 0,
+		selectOnLineNumbers: false,
+		lineNumbers: 'off',
+		lineDecorationsWidth: 0,
+		glyphMargin: false,
+		fixedOverflowWidgets: false,
+		minimap: { enabled: false },
+	};
+
+	private _value: IEditorOptions;
+	private _disposable: IDisposable;
+
+	private readonly _onDidChange = new Emitter<IEditorOptions>();
+	readonly onDidChange: Event<IEditorOptions> = this._onDidChange.event;
+
+	constructor(configurationService: IConfigurationService, language: string) {
+
+		this._disposable = configurationService.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration('editor')) {
+				this._value = computeEditorOptions();
+				this._onDidChange.fire(this.value);
+			}
+		});
+
+		const computeEditorOptions = () => {
+			const editorOptions = deepClone(configurationService.getValue<IEditorOptions>('editor', { overrideIdentifier: language }));
+			return {
+				...editorOptions,
+				...CellEditorOptions.fixedEditorOptions
+			};
+		};
+
+		this._value = computeEditorOptions();
+	}
+
+	dispose(): void {
+		this._onDidChange.dispose();
+		this._disposable.dispose();
+	}
+
+	get value(): IEditorOptions {
+		return this._value;
+	}
+}
+
 abstract class AbstractCellRenderer {
-	protected editorOptions: IEditorOptions;
+	protected editorOptions: CellEditorOptions;
 	private actionRunner = new ActionRunner();
 
 	constructor(
 		protected readonly instantiationService: IInstantiationService,
 		protected readonly notebookEditor: INotebookEditor,
 		protected readonly contextMenuService: IContextMenuService,
-		private readonly configurationService: IConfigurationService,
+		configurationService: IConfigurationService,
 		private readonly keybindingService: IKeybindingService,
 		private readonly notificationService: INotificationService,
 		protected readonly contextKeyService: IContextKeyService,
 		language: string,
 		protected readonly dndController: CellDragAndDropController
 	) {
-		const editorOptions = deepClone(this.configurationService.getValue<IEditorOptions>('editor', { overrideIdentifier: language }));
-		this.editorOptions = {
-			...editorOptions,
-			padding: {
-				top: EDITOR_TOP_PADDING,
-				bottom: EDITOR_BOTTOM_PADDING
-			},
-			scrollBeyondLastLine: false,
-			scrollbar: {
-				verticalScrollbarSize: 14,
-				horizontal: 'auto',
-				useShadows: true,
-				verticalHasArrows: false,
-				horizontalHasArrows: false,
-				alwaysConsumeMouseWheel: false
-			},
-			renderLineHighlightOnlyWhenFocus: true,
-			overviewRulerLanes: 0,
-			selectOnLineNumbers: false,
-			lineNumbers: 'off',
-			lineDecorationsWidth: 0,
-			glyphMargin: false,
-			fixedOverflowWidgets: false,
-			minimap: { enabled: false },
-		};
+		this.editorOptions = new CellEditorOptions(configurationService, language);
+	}
+
+	dispose() {
+		this.editorOptions.dispose();
 	}
 
 	protected createBottomCellToolbar(container: HTMLElement): ToolBar {
@@ -349,7 +392,9 @@ export class MarkdownCellRenderer extends AbstractCellRenderer implements IListR
 		if (height) {
 			const elementDisposables = templateData.elementDisposables;
 
-			elementDisposables.add(new StatefullMarkdownCell(this.notebookEditor, element, templateData, this.editorOptions, this.instantiationService));
+			const markdownCell = new StatefullMarkdownCell(this.notebookEditor, element, templateData, this.editorOptions.value, this.instantiationService);
+			elementDisposables.add(this.editorOptions.onDidChange(newValue => markdownCell.updateEditorOptions(newValue)));
+			elementDisposables.add(markdownCell);
 
 			const contextKeyService = this.contextKeyService.createScoped(templateData.container);
 			contextKeyService.createKey(NOTEBOOK_CELL_TYPE_CONTEXT_KEY, 'markdown');
@@ -620,13 +665,15 @@ export class CodeCellRenderer extends AbstractCellRenderer implements IListRende
 		const editorPart = DOM.append(cellContainer, $('.cell-editor-part'));
 		const editorContainer = DOM.append(editorPart, $('.cell-editor-container'));
 		const editor = this.instantiationService.createInstance(CodeEditorWidget, editorContainer, {
-			...this.editorOptions,
+			...this.editorOptions.value,
 			dimension: {
 				width: 0,
 				height: 0
 			}
 		}, {});
 
+		disposables.add(this.editorOptions.onDidChange(newValue => editor.updateOptions(newValue)));
+
 		const progressBar = new ProgressBar(editorPart);
 		progressBar.hide();
 		disposables.add(progressBar);

src/vs/workbench/contrib/notebook/browser/view/renderers/markdownCell.ts

@@ -19,7 +19,9 @@ import { CellFoldingState } from 'vs/workbench/contrib/notebook/browser/contrib/
 import { MarkdownCellViewModel } from 'vs/workbench/contrib/notebook/browser/viewModel/markdownCellViewModel';
 
 export class StatefullMarkdownCell extends Disposable {
+
 	private editor: CodeEditorWidget | null = null;
+	private editorOptions: IEditorOptions;
 	private markdownContainer: HTMLElement;
 	private editingContainer: HTMLElement;
 
@@ -37,6 +39,7 @@ export class StatefullMarkdownCell extends Disposable {
 
 		this.markdownContainer = templateData.cellContainer;
 		this.editingContainer = templateData.editingContainer;
+		this.editorOptions = editorOptions;
 		this.localDisposables = new DisposableStore();
 		this._register(this.localDisposables);
 
@@ -65,7 +68,7 @@ export class StatefullMarkdownCell extends Disposable {
 
 					this.editingContainer.innerHTML = '';
 					this.editor = instantiationService.createInstance(CodeEditorWidget, this.editingContainer, {
-						...editorOptions,
+						...this.editorOptions,
 						dimension: {
 							width: width,
 							height: totalHeight
@@ -192,6 +195,13 @@ export class StatefullMarkdownCell extends Disposable {
 		viewUpdate();
 	}
 
+	updateEditorOptions(newValue: IEditorOptions): any {
+		this.editorOptions = newValue;
+		if (this.editor) {
+			this.editor.updateOptions(this.editorOptions);
+		}
+	}
+
 	setFoldingIndicator() {
 		switch (this.foldingState) {
 			case CellFoldingState.None: