fix editors sometimes not correctly filling

Signed-off-by: Jonah Iden <[email protected]>

packages/notebook/src/browser/notebook-editor-widget.tsx

@@ -235,6 +235,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         this.onDidPostKernelMessageEmitter.dispose();
         this.onDidReceiveKernelMessageEmitter.dispose();
         this.onPostRendererMessageEmitter.dispose();
+        this.viewportService.dispose();
         super.dispose();
     }
 }

packages/notebook/src/browser/view/notebook-cell-editor.tsx

@@ -50,10 +50,12 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
     override componentDidMount(): void {
         this.disposeEditor();
+        console.log('init editor');
         if (!this.props.notebookViewportService || (this.container && this.props.notebookViewportService.isElementInViewport(this.container))) {
             this.initEditor();
         } else {
             const disposable = this.props.notebookViewportService?.onDidChangeViewport(() => {
+                console.log('init editor on viewport change');
                 if (!this.editor && this.container && this.props.notebookViewportService!.isElementInViewport(this.container)) {
                     this.initEditor();
                     disposable.dispose();
@@ -76,6 +78,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
         const { cell, notebookModel, monacoServices } = this.props;
         if (this.container) {
             const editorNode = this.container;
+            editorNode.style.height = '';
             const editorModel = await cell.resolveTextModel();
             const uri = cell.uri;
             this.editor = new SimpleMonacoEditor(uri,
@@ -105,13 +108,12 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
     protected estimateHeight(): string {
         const lineHeight = this.props.fontInfo?.lineHeight ?? 20;
-        return this.props.cell.text.split(OS.backend.EOL).length * lineHeight + 7 + 'px';
+        return this.props.cell.text.split(OS.backend.EOL).length * lineHeight + 10 + 7 + 'px';
     }
 
     override render(): React.ReactNode {
         return <div className='theia-notebook-cell-editor' onResize={this.handleResize} id={this.props.cell.uri.toString()}
             ref={container => this.setContainer(container)} style={{ height: this.editor ? undefined : this.estimateHeight() }}>
-
         </div>;
     }
 

packages/notebook/src/browser/view/notebook-viewport-service.ts

@@ -14,6 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
+import { Disposable } from '@theia/core';
 import { injectable } from '@theia/core/shared/inversify';
 import { Emitter } from '@theia/core/shared/vscode-languageserver-protocol';
 
@@ -22,17 +23,22 @@ import { Emitter } from '@theia/core/shared/vscode-languageserver-protocol';
  * its used both for restoring scroll state after reopening an editor and for cell to check if they are in the viewport.
  */
 @injectable()
-export class NotebookViewportService {
+export class NotebookViewportService implements Disposable {
 
     protected onDidChangeViewportEmitter = new Emitter<void>();
     readonly onDidChangeViewport = this.onDidChangeViewportEmitter.event;
 
     protected _viewportElement: HTMLDivElement | undefined;
 
+    protected resizeObserver: ResizeObserver;
+
     set viewportElement(element: HTMLDivElement | undefined) {
         this._viewportElement = element;
         if (element) {
             this.onDidChangeViewportEmitter.fire();
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = new ResizeObserver(() => this.onDidChangeViewportEmitter.fire());
+            this.resizeObserver.observe(element);
         }
     }
 
@@ -48,4 +54,8 @@ export class NotebookViewportService {
     onScroll(e: HTMLDivElement): void {
         this.onDidChangeViewportEmitter.fire();
     }
+
+    dispose(): void {
+        this.resizeObserver.disconnect();
+    }
 }