Skip to content

Fix cell editor size #9218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 1, 2025
Merged

Fix cell editor size #9218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/vs/workbench/contrib/positronNotebook/browser/EnvironmentProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
Expand All @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/vs/workbench/contrib/positronNotebook/browser/PositronNotebookEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
89 changes: 27 additions & 62 deletions src/vs/workbench/contrib/positronNotebook/browser/notebookCells/CellEditorMonacoWidget.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand All @@ -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(() => {
// }));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: unused comment


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

}


Expand Down