@theia/notebook 1.53.2 → 1.55.0-next.14

package/src/browser/view/notebook-cell-list-view.tsx

@@ -26,9 +26,19 @@ import { NotebookContextManager } from '../service/notebook-context-manager';
 
 export interface CellRenderer {
     render(notebookData: NotebookModel, cell: NotebookCellModel, index: number): React.ReactNode
+    renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode
     renderDragImage(cell: NotebookCellModel): HTMLElement
 }
 
+export function observeCellHeight(ref: HTMLDivElement | null, cell: NotebookCellModel): void {
+    if (ref) {
+        cell.cellHeight = ref?.getBoundingClientRect().height ?? 0;
+        new ResizeObserver(entries =>
+            cell.cellHeight = ref?.getBoundingClientRect().height ?? 0
+        ).observe(ref);
+    }
+}
+
 interface CellListProps {
     renderers: Map<CellKind, CellRenderer>;
     notebookModel: NotebookModel;
@@ -109,7 +119,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
     }
 
     override render(): React.ReactNode {
-        return <ul className='theia-notebook-cell-list' ref={this.cellListRef}>
+        return <ul className='theia-notebook-cell-list' ref={this.cellListRef} onDragStart={e => this.onDragStart(e)}>
             {this.props.notebookModel.cells
                 .map((cell, index) =>
                     <React.Fragment key={'cell-' + cell.handle}>
@@ -119,13 +129,8 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                             onAddNewCell={(commandId: string) => this.onAddNewCell(commandId, index)}
                             onDrop={e => this.onDrop(e, index)}
                             onDragOver={e => this.onDragOver(e, cell, 'top')} />
-                        {this.shouldRenderDragOverIndicator(cell, 'top') && <CellDropIndicator />}
+                        <CellDropIndicator visible={this.shouldRenderDragOverIndicator(cell, 'top')} />
                         <li className={'theia-notebook-cell' + (this.state.selectedCell === cell ? ' focused' : '') + (this.isEnabled() ? ' draggable' : '')}
-                            onClick={e => {
-                                this.setState({ ...this.state, selectedCell: cell });
-                                this.props.notebookModel.setSelectedCell(cell, false);
-                            }}
-                            onDragStart={e => this.onDragStart(e, index, cell)}
                             onDragEnd={e => {
                                 NotebookCellListView.dragGhost?.remove();
                                 this.setState({ ...this.state, dragOverIndicator: undefined });
@@ -134,6 +139,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                             onDrop={e => this.onDrop(e, index)}
                             draggable={true}
                             tabIndex={-1}
+                            data-cell-handle={cell.handle}
                             ref={ref => {
                                 if (ref && cell === this.state.selectedCell && this.state.scrollIntoView) {
                                     ref.scrollIntoView({ block: 'nearest' });
@@ -141,8 +147,16 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                                         ref.focus();
                                     }
                                 }
-                            }}>
-                            <div className={'theia-notebook-cell-marker' + (this.state.selectedCell === cell ? ' theia-notebook-cell-marker-selected' : '')}></div>
+                            }}
+                            onClick={e => {
+                                this.setState({ ...this.state, selectedCell: cell });
+                                this.props.notebookModel.setSelectedCell(cell, false);
+                            }}
+                        >
+                            <div className='theia-notebook-cell-sidebar'>
+                                <div className={'theia-notebook-cell-marker' + (this.state.selectedCell === cell ? ' theia-notebook-cell-marker-selected' : '')}></div>
+                                {this.renderCellSidebar(cell)}
+                            </div>
                             <div className='theia-notebook-cell-content'>
                                 {this.renderCellContent(cell, index)}
                             </div>
@@ -152,7 +166,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                                 })
                             }
                         </li>
-                        {this.shouldRenderDragOverIndicator(cell, 'bottom') && <CellDropIndicator />}
+                        <CellDropIndicator visible={this.shouldRenderDragOverIndicator(cell, 'bottom')} />
                     </React.Fragment>
                 )
             }
@@ -173,13 +187,30 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
         return renderer.render(this.props.notebookModel, cell, index);
     }
 
-    protected onDragStart(event: React.DragEvent<HTMLLIElement>, index: number, cell: NotebookCellModel): void {
+    renderCellSidebar(cell: NotebookCellModel): React.ReactNode {
+        const renderer = this.props.renderers.get(cell.cellKind);
+        if (!renderer) {
+            throw new Error(`No renderer found for cell type ${cell.cellKind}`);
+        }
+        return renderer.renderSidebar(this.props.notebookModel, cell);
+    }
+
+    protected onDragStart(event: React.DragEvent<HTMLElement>): void {
         event.stopPropagation();
         if (!this.isEnabled()) {
             event.preventDefault();
             return;
         }
 
+        const cellHandle = (event.target as HTMLLIElement).getAttribute('data-cell-handle');
+
+        if (!cellHandle) {
+            throw new Error('Cell handle not found in element for cell drag event');
+        }
+
+        const index = this.props.notebookModel.getCellIndexByHandle(parseInt(cellHandle));
+        const cell = this.props.notebookModel.cells[index];
+
         NotebookCellListView.dragGhost = document.createElement('div');
         NotebookCellListView.dragGhost.classList.add('theia-notebook-drag-ghost-image');
         NotebookCellListView.dragGhost.appendChild(this.props.renderers.get(cell.cellKind)?.renderDragImage(cell) ?? document.createElement('div'));
@@ -274,6 +305,6 @@ export function NotebookCellDivider({ isVisible, onAddNewCell, onDrop, onDragOve
     </li>;
 }
 
-function CellDropIndicator(): React.JSX.Element {
-    return <div className='theia-notebook-cell-drop-indicator' />;
+function CellDropIndicator(props: { visible: boolean }): React.JSX.Element {
+    return <div className='theia-notebook-cell-drop-indicator' style={{ visibility: props.visible ? 'visible' : 'hidden' }} />;
 }

package/src/browser/view/notebook-code-cell-view.tsx

@@ -17,12 +17,11 @@
 import { inject, injectable } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 import { MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
-import { CellOutputWebviewFactory, CellOutputWebview } from '../renderers/cell-output-webview';
 import { NotebookRendererRegistry } from '../notebook-renderer-registry';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { NotebookModel } from '../view-model/notebook-model';
 import { CellEditor } from './notebook-cell-editor';
-import { CellRenderer } from './notebook-cell-list-view';
+import { CellRenderer, observeCellHeight } from './notebook-cell-list-view';
 import { NotebookCellToolbarFactory } from './notebook-cell-toolbar-factory';
 import { NotebookCellActionContribution, NotebookCellCommands } from '../contributions/notebook-cell-actions-contribution';
 import { CellExecution, NotebookExecutionStateService } from '../service/notebook-execution-state-service';
@@ -35,6 +34,8 @@ import { EditorPreferences } from '@theia/editor/lib/browser';
 import { NotebookOptionsService } from '../service/notebook-options';
 import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
 import { MarkdownString } from '@theia/monaco-editor-core/esm/vs/base/common/htmlContent';
+import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
+import { CellOutputWebview } from '../renderers/cell-output-webview';
 
 @injectable()
 export class NotebookCodeCellRenderer implements CellRenderer {
@@ -44,9 +45,6 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(NotebookRendererRegistry)
     protected readonly notebookRendererRegistry: NotebookRendererRegistry;
 
-    @inject(CellOutputWebviewFactory)
-    protected readonly cellOutputWebviewFactory: CellOutputWebviewFactory;
-
     @inject(NotebookCellToolbarFactory)
     protected readonly notebookCellToolbarFactory: NotebookCellToolbarFactory;
 
@@ -62,6 +60,9 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(EditorPreferences)
     protected readonly editorPreferences: EditorPreferences;
 
+    @inject(NotebookCellEditorService)
+    protected readonly notebookCellEditorService: NotebookCellEditorService;
+
     @inject(CommandRegistry)
     protected readonly commandRegistry: CommandRegistry;
 
@@ -71,39 +72,39 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(MarkdownRenderer)
     protected readonly markdownRenderer: MarkdownRenderer;
 
+    @inject(CellOutputWebview)
+    protected readonly outputWebview: CellOutputWebview;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel, handle: number): React.ReactNode {
-        return <div>
-            <div className='theia-notebook-cell-with-sidebar'>
-                <div className='theia-notebook-cell-sidebar'>
-                    {this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, cell, {
-                        contextMenuArgs: () => [cell], commandArgs: () => [notebookModel, cell]
-                    })
-                    }
-                    <CodeCellExecutionOrder cell={cell} />
-                </div>
-                <div className='theia-notebook-cell-editor-container'>
-                    <CellEditor notebookModel={notebookModel} cell={cell}
-                        monacoServices={this.monacoServices}
-                        notebookContextManager={this.notebookContextManager}
-                        notebookViewportService={this.notebookViewportService}
-                        fontInfo={this.notebookOptionsService.editorFontInfo} />
-                    <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
-                        commandRegistry={this.commandRegistry}
-                        executionStateService={this.executionStateService}
-                        onClick={() => cell.requestFocusEditor()} />
-                </div >
+        return <div className='theia-notebook-cell-with-sidebar' ref={ref => observeCellHeight(ref, cell)}>
+            <div className='theia-notebook-cell-editor-container'>
+                <CellEditor notebookModel={notebookModel} cell={cell}
+                    monacoServices={this.monacoServices}
+                    notebookContextManager={this.notebookContextManager}
+                    notebookViewportService={this.notebookViewportService}
+                    notebookCellEditorService={this.notebookCellEditorService}
+                    fontInfo={this.notebookOptionsService.editorFontInfo} />
+                <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
+                    commandRegistry={this.commandRegistry}
+                    executionStateService={this.executionStateService}
+                    onClick={() => cell.requestFocusEditor()} />
             </div >
-            <div className='theia-notebook-cell-with-sidebar'>
-                <NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebviewFactory={this.cellOutputWebviewFactory}
-                    renderSidebar={() =>
-                        this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, cell, {
-                            contextMenuArgs: () => [notebookModel, cell, cell.outputs[0]]
-                        })
-                    } />
-            </div>
         </div >;
     }
 
+    renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
+        return <div>
+            <NotebookCodeCellSidebar cell={cell} notebook={notebookModel} notebookCellToolbarFactory={this.notebookCellToolbarFactory} />
+            <NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebview={this.outputWebview}
+                renderSidebar={() =>
+                    this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.OUTPUT_SIDEBAR_MENU, cell, {
+                        contextMenuArgs: () => [notebookModel, cell, cell.outputs[0]]
+                    })
+                } />
+        </div>;
+
+    }
+
     renderDragImage(cell: NotebookCellModel): HTMLElement {
         const dragImage = document.createElement('div');
         dragImage.className = 'theia-notebook-drag-image';
@@ -146,6 +147,37 @@ export class NotebookCodeCellRenderer implements CellRenderer {
 
 }
 
+export interface NotebookCodeCellSidebarProps {
+    cell: NotebookCellModel;
+    notebook: NotebookModel;
+    notebookCellToolbarFactory: NotebookCellToolbarFactory
+}
+
+export class NotebookCodeCellSidebar extends React.Component<NotebookCodeCellSidebarProps> {
+
+    protected toDispose = new DisposableCollection();
+
+    constructor(props: NotebookCodeCellSidebarProps) {
+        super(props);
+
+        this.toDispose.push(props.cell.onDidCellHeightChange(() => this.forceUpdate()));
+    }
+
+    override componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    override render(): React.ReactNode {
+        return <div className='theia-notebook-cell-sidebar-actions' style={{ height: `${this.props.cell.cellHeight}px` }}>
+            {this.props.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, this.props.cell, {
+                contextMenuArgs: () => [this.props.cell], commandArgs: () => [this.props.notebook, this.props.cell]
+            })
+            }
+            <CodeCellExecutionOrder cell={this.props.cell} />
+        </div>;
+    }
+}
+
 export interface NotebookCodeCellStatusProps {
     notebook: NotebookModel;
     cell: NotebookCellModel;
@@ -255,79 +287,42 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
 interface NotebookCellOutputProps {
     cell: NotebookCellModel;
     notebook: NotebookModel;
-    outputWebviewFactory: CellOutputWebviewFactory;
+    outputWebview: CellOutputWebview;
     renderSidebar: () => React.ReactNode;
 }
 
 export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputProps> {
 
-    protected outputsWebview: CellOutputWebview | undefined;
-    protected outputsWebviewPromise: Promise<CellOutputWebview> | undefined;
-
     protected toDispose = new DisposableCollection();
 
-    constructor(props: NotebookCellOutputProps) {
-        super(props);
-    }
+    protected outputHeight: number = 0;
 
     override async componentDidMount(): Promise<void> {
-        const { cell, notebook, outputWebviewFactory } = this.props;
-        this.toDispose.push(cell.onDidChangeOutputs(() => this.updateOutputs()));
-        this.toDispose.push(cell.onDidChangeOutputVisibility(visible => {
-            if (!visible && this.outputsWebview) {
-                this.outputsWebview?.dispose();
-                this.outputsWebview = undefined;
-                this.outputsWebviewPromise = undefined;
+        const { cell } = this.props;
+        this.toDispose.push(cell.onDidChangeOutputs(() => this.forceUpdate()));
+        this.toDispose.push(this.props.cell.onDidChangeOutputVisibility(() => this.forceUpdate()));
+        this.toDispose.push(this.props.outputWebview.onDidRenderOutput(event => {
+            if (event.cellHandle === this.props.cell.handle) {
+                this.outputHeight = event.outputHeight;
                 this.forceUpdate();
-            } else {
-                this.updateOutputs();
             }
         }));
-        if (cell.outputs.length > 0) {
-            this.outputsWebviewPromise = outputWebviewFactory(cell, notebook).then(webview => {
-                this.outputsWebview = webview;
-                this.forceUpdate();
-                return webview;
-            });
-        }
     }
 
-    protected async updateOutputs(): Promise<void> {
-        const { cell, notebook, outputWebviewFactory } = this.props;
-        if (!this.outputsWebviewPromise && cell.outputs.length > 0) {
-            this.outputsWebviewPromise = outputWebviewFactory(cell, notebook).then(webview => {
-                this.outputsWebview = webview;
-                this.forceUpdate();
-                return webview;
-            });
-            this.forceUpdate();
-        } else if (this.outputsWebviewPromise && cell.outputs.length === 0 && cell.internalMetadata.runEndTime) {
-            (await this.outputsWebviewPromise).dispose();
-            this.outputsWebview = undefined;
-            this.outputsWebviewPromise = undefined;
-            this.forceUpdate();
-        }
-    }
-
-    override async componentDidUpdate(): Promise<void> {
-        if (!(await this.outputsWebviewPromise)?.isAttached()) {
-            (await this.outputsWebviewPromise)?.attachWebview();
-        }
-    }
-
-    override async componentWillUnmount(): Promise<void> {
+    override componentWillUnmount(): void {
         this.toDispose.dispose();
-        (await this.outputsWebviewPromise)?.dispose();
     }
 
     override render(): React.ReactNode {
-        return this.outputsWebview && this.props.cell.outputVisible ?
-            <>
+        if (!this.props.cell.outputs?.length) {
+            return <></>;
+        }
+        if (this.props.cell.outputVisible) {
+            return <div style={{ minHeight: this.outputHeight }}>
                 {this.props.renderSidebar()}
-                {this.outputsWebview.render()}
-            </> :
-            this.props.cell.outputs?.length ? <i className='theia-notebook-collapsed-output'>{nls.localizeByDefault('Outputs are collapsed')}</i> : <></>;
-
+            </div>;
+        }
+        return <div className='theia-notebook-collapsed-output-container'><i className='theia-notebook-collapsed-output'>{nls.localizeByDefault('Outputs are collapsed')}</i></div>;
     }
 
 }

package/src/browser/view/notebook-markdown-cell-view.tsx

@@ -18,7 +18,7 @@ import * as React from '@theia/core/shared/react';
 import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
 import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering/markdown-string';
 import { NotebookModel } from '../view-model/notebook-model';
-import { CellRenderer } from './notebook-cell-list-view';
+import { CellRenderer, observeCellHeight } from './notebook-cell-list-view';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { CellEditor } from './notebook-cell-editor';
 import { inject, injectable } from '@theia/core/shared/inversify';
@@ -29,6 +29,7 @@ import { NotebookOptionsService } from '../service/notebook-options';
 import { NotebookCodeCellStatus } from './notebook-code-cell-view';
 import { NotebookEditorFindMatch, NotebookEditorFindMatchOptions } from './notebook-find-widget';
 import * as mark from 'advanced-mark.js';
+import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
 
 @injectable()
 export class NotebookMarkdownCellRenderer implements CellRenderer {
@@ -47,6 +48,9 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
     @inject(NotebookOptionsService)
     protected readonly notebookOptionsService: NotebookOptionsService;
 
+    @inject(NotebookCellEditorService)
+    protected readonly notebookCellEditorService: NotebookCellEditorService;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
         return <MarkdownCell
             markdownRenderer={this.markdownRenderer}
@@ -55,7 +59,12 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
             notebookOptionsService={this.notebookOptionsService}
             cell={cell}
             notebookModel={notebookModel}
-            notebookContextManager={this.notebookContextManager} />;
+            notebookContextManager={this.notebookContextManager}
+            notebookCellEditorService={this.notebookCellEditorService} />;
+    }
+
+    renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
+        return <div className='theia-notebook-markdown-sidebar'></div>;
     }
 
     renderDragImage(cell: NotebookCellModel): HTMLElement {
@@ -77,10 +86,11 @@ interface MarkdownCellProps {
     notebookModel: NotebookModel;
     notebookContextManager: NotebookContextManager;
     notebookOptionsService: NotebookOptionsService;
+    notebookCellEditorService: NotebookCellEditorService
 }
 
 function MarkdownCell({
-    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager, notebookOptionsService, commandRegistry
+    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager, notebookOptionsService, commandRegistry, notebookCellEditorService
 }: MarkdownCellProps): React.JSX.Element {
     const [editMode, setEditMode] = React.useState(cell.editing);
     let empty = false;
@@ -129,10 +139,11 @@ function MarkdownCell({
     }
 
     return editMode ?
-        (<div className='theia-notebook-markdown-editor-container' key="code">
+        (<div className='theia-notebook-markdown-editor-container' key="code" ref={ref => observeCellHeight(ref, cell)}>
             <CellEditor notebookModel={notebookModel} cell={cell}
                 monacoServices={monacoServices}
                 notebookContextManager={notebookContextManager}
+                notebookCellEditorService={notebookCellEditorService}
                 fontInfo={notebookOptionsService.editorFontInfo} />
             <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
                 commandRegistry={commandRegistry}
@@ -140,7 +151,10 @@ function MarkdownCell({
         </div >) :
         (<div className='theia-notebook-markdown-content' key="markdown"
             onDoubleClick={() => cell.requestEdit()}
-            ref={node => node?.replaceChildren(...markdownContent)}
+            ref={node => {
+                node?.replaceChildren(...markdownContent);
+                observeCellHeight(node, cell);
+            }}
         />);
 }
 

package/src/browser/view-model/notebook-cell-model.ts

@@ -129,6 +129,9 @@ export class NotebookCellModel implements NotebookCell, Disposable {
     protected onDidRequestCenterEditorEmitter = new Emitter<void>();
     readonly onDidRequestCenterEditor = this.onDidRequestCenterEditorEmitter.event;
 
+    protected onDidCellHeightChangeEmitter = new Emitter<number>();
+    readonly onDidCellHeightChange = this.onDidCellHeightChangeEmitter.event;
+
     @inject(NotebookCellModelProps)
     protected readonly props: NotebookCellModelProps;
 
@@ -251,6 +254,16 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         }
     }
 
+    protected _cellheight: number = 0;
+    get cellHeight(): number {
+        return this._cellheight;
+    }
+
+    set cellHeight(height: number) {
+        this.onDidCellHeightChangeEmitter.fire(height);
+        this._cellheight = height;
+    }
+
     @postConstruct()
     protected init(): void {
         this._outputs = this.props.outputs.map(op => new NotebookCellOutputModel(op));

package/src/browser/view-model/notebook-cell-output-model.ts

@@ -23,9 +23,6 @@ export class NotebookCellOutputModel implements Disposable {
     private didChangeDataEmitter = new Emitter<void>();
     readonly onDidChangeData = this.didChangeDataEmitter.event;
 
-    private requestOutputPresentationChangeEmitter = new Emitter<void>();
-    readonly onRequestOutputPresentationChange = this.requestOutputPresentationChangeEmitter.event;
-
     get outputId(): string {
         return this.rawOutput.outputId;
     }
@@ -54,11 +51,6 @@ export class NotebookCellOutputModel implements Disposable {
 
     dispose(): void {
         this.didChangeDataEmitter.dispose();
-        this.requestOutputPresentationChangeEmitter.dispose();
-    }
-
-    requestOutputPresentationUpdate(): void {
-        this.requestOutputPresentationChangeEmitter.fire();
     }
 
     getData(): CellOutput {

package/src/browser/view-model/notebook-model.ts

@@ -509,10 +509,14 @@ export class NotebookModel implements Saveable, Disposable {
         return true;
     }
 
-    protected getCellIndexByHandle(handle: number): number {
+    getCellIndexByHandle(handle: number): number {
         return this.cells.findIndex(c => c.handle === handle);
     }
 
+    getCellByHandle(handle: number): NotebookCellModel | undefined {
+        return this.cells.find(c => c.handle === handle);
+    }
+
     protected isCellMetadataChanged(a: NotebookCellMetadata, b: NotebookCellMetadata): boolean {
         const keys = new Set<keyof NotebookCellMetadata>([...Object.keys(a || {}), ...Object.keys(b || {})]);
         for (const key of keys) {