@theia/notebook 1.55.0-next.4 → 1.55.0

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-cell-toolbar.tsx

@@ -48,7 +48,7 @@ abstract class NotebookCellActionBar extends React.Component<NotebookCellToolbar
     }
 
     protected renderItem(item: NotebookCellToolbarItem): React.ReactNode {
-        return <div key={item.id} title={item.label} onClick={item.onClick} className={`${item.icon} ${ACTION_ITEM} theia-notebook-cell-toolbar-item`} />;
+        return <div key={item.id} id={item.id} title={item.label} onClick={item.onClick} className={`${item.icon} ${ACTION_ITEM} theia-notebook-cell-toolbar-item`} />;
     }
 
 }

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

@@ -17,18 +17,17 @@
 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';
 import { codicon } from '@theia/core/lib/browser';
 import { NotebookCellExecutionState } from '../../common';
-import { CommandRegistry, DisposableCollection, nls } from '@theia/core';
+import { CancellationToken, CommandRegistry, DisposableCollection, nls } from '@theia/core';
 import { NotebookContextManager } from '../service/notebook-context-manager';
 import { NotebookViewportService } from './notebook-viewport-service';
 import { EditorPreferences } from '@theia/editor/lib/browser';
@@ -36,6 +35,9 @@ 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';
+import { NotebookCellStatusBarItem, NotebookCellStatusBarItemList, NotebookCellStatusBarService } from '../service/notebook-cell-status-bar-service';
+import { LabelParser } from '@theia/core/lib/browser/label-parser';
 
 @injectable()
 export class NotebookCodeCellRenderer implements CellRenderer {
@@ -45,9 +47,6 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(NotebookRendererRegistry)
     protected readonly notebookRendererRegistry: NotebookRendererRegistry;
 
-    @inject(CellOutputWebviewFactory)
-    protected readonly cellOutputWebviewFactory: CellOutputWebviewFactory;
-
     @inject(NotebookCellToolbarFactory)
     protected readonly notebookCellToolbarFactory: NotebookCellToolbarFactory;
 
@@ -75,40 +74,47 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(MarkdownRenderer)
     protected readonly markdownRenderer: MarkdownRenderer;
 
+    @inject(CellOutputWebview)
+    protected readonly outputWebview: CellOutputWebview;
+
+    @inject(NotebookCellStatusBarService)
+    protected readonly notebookCellStatusBarService: NotebookCellStatusBarService;
+
+    @inject(LabelParser)
+    protected readonly labelParser: LabelParser;
+
     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}
-                        notebookCellEditorService={this.notebookCellEditorService}
-                        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}
+                    cellStatusBarService={this.notebookCellStatusBarService}
+                    labelParser={this.labelParser}
+                    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';
@@ -151,11 +157,44 @@ 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;
     commandRegistry: CommandRegistry;
+    cellStatusBarService: NotebookCellStatusBarService;
     executionStateService?: NotebookExecutionStateService;
+    labelParser: LabelParser;
     onClick: () => void;
 }
 
@@ -168,6 +207,8 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
 
     protected toDispose = new DisposableCollection();
 
+    protected statusBarItems: NotebookCellStatusBarItemList[] = [];
+
     constructor(props: NotebookCodeCellStatusProps) {
         super(props);
 
@@ -198,6 +239,19 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         this.toDispose.push(props.cell.onDidChangeLanguage(() => {
             this.forceUpdate();
         }));
+
+        this.updateStatusBarItems();
+        this.props.cellStatusBarService.onDidChangeItems(() => this.updateStatusBarItems());
+        this.props.notebook.onContentChanged(() => this.updateStatusBarItems());
+    }
+
+    async updateStatusBarItems(): Promise<void> {
+        this.statusBarItems = await this.props.cellStatusBarService.getStatusBarItemsForCell(
+            this.props.notebook.uri,
+            this.props.notebook.cells.indexOf(this.props.cell),
+            this.props.notebook.viewType,
+            CancellationToken.None);
+        this.forceUpdate();
     }
 
     override componentWillUnmount(): void {
@@ -208,6 +262,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         return <div className='notebook-cell-status' onClick={() => this.props.onClick()}>
             <div className='notebook-cell-status-left'>
                 {this.props.executionStateService && this.renderExecutionState()}
+                {this.statusBarItems?.length && this.renderStatusBarItems()}
             </div>
             <div className='notebook-cell-status-right'>
                 <span className='notebook-cell-language-label' onClick={() => {
@@ -217,7 +272,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         </div>;
     }
 
-    private renderExecutionState(): React.ReactNode {
+    protected renderExecutionState(): React.ReactNode {
         const state = this.state.currentExecution?.state;
         const { lastRunSuccess } = this.props.cell.internalMetadata;
 
@@ -243,7 +298,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         </>;
     }
 
-    private getExecutionTime(): number {
+    protected getExecutionTime(): number {
         const { runStartTime, runEndTime } = this.props.cell.internalMetadata;
         const { executionTime } = this.state;
         if (runStartTime !== undefined && runEndTime !== undefined) {
@@ -252,87 +307,83 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         return executionTime;
     }
 
-    private renderTime(ms: number): string {
+    protected renderTime(ms: number): string {
         return `${(ms / 1000).toLocaleString(undefined, { maximumFractionDigits: 1, minimumFractionDigits: 1 })}s`;
     }
+
+    protected renderStatusBarItems(): React.ReactNode {
+        return <>
+            {
+                this.statusBarItems.flatMap((itemList, listIndex) =>
+                    itemList.items.map((item, index) => this.renderStatusBarItem(item, `${listIndex}-${index}`)
+                    )
+                )
+            }
+        </>;
+    }
+
+    protected renderStatusBarItem(item: NotebookCellStatusBarItem, key: string): React.ReactNode {
+        const content = this.props.labelParser.parse(item.text).map(part => {
+            if (typeof part === 'string') {
+                return part;
+            } else {
+                return <span key={part.name} className={`codicon codicon-${part.name}`}></span>;
+            }
+        });
+        return <div key={key} className={`cell-status-bar-item ${item.command ? 'cell-status-item-has-command' : ''}`} onClick={async () => {
+            if (item.command) {
+                if (typeof item.command === 'string') {
+                    this.props.commandRegistry.executeCommand(item.command);
+                } else {
+                    this.props.commandRegistry.executeCommand(item.command.id, ...(item.command.arguments ?? []));
+                }
+            }
+        }}>
+            {content}
+        </div>;
+    }
+
 }
 
 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-main-toolbar.tsx

@@ -152,17 +152,17 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
 
     override render(): React.ReactNode {
         const menuItems = this.getMenuItems();
-        return <div className='theia-notebook-main-toolbar'>
+        return <div className='theia-notebook-main-toolbar' id='notebook-main-toolbar'>
             {menuItems.slice(0, menuItems.length - this.calculateNumberOfHiddenItems(menuItems)).map(item => this.renderMenuItem(item))}
             {
                 this.state.numberOfHiddenItems > 0 &&
                 <span className={`${codicon('ellipsis')} action-label theia-notebook-main-toolbar-item`} onClick={e => this.renderContextMenu(e.nativeEvent, menuItems)} />
             }
             <div ref={element => this.gapElementChanged(element)} style={{ flexGrow: 1 }}></div>
-            <div className='theia-notebook-main-toolbar-item action-label'
+            <div className='theia-notebook-main-toolbar-item action-label' id={NotebookCommands.SELECT_KERNEL_COMMAND.id}
                 onClick={() => this.props.commandRegistry.executeCommand(NotebookCommands.SELECT_KERNEL_COMMAND.id, this.props.notebookModel)}>
                 <span className={codicon('server-environment')} />
-                <span className=' theia-notebook-main-toolbar-item-text'>
+                <span className=' theia-notebook-main-toolbar-item-text' id='kernel-text'>
                     {this.state.selectedKernelLabel ?? nls.localizeByDefault('Select Kernel')}
                 </span>
             </div>
@@ -195,7 +195,7 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
             const command = this.props.commandRegistry.getCommand(item.command ?? '') as NotebookCommand | undefined;
             const label = command?.shortTitle ?? item.label;
             const title = command?.tooltip ?? item.label;
-            return <div key={item.id} title={title} className={`theia-notebook-main-toolbar-item action-label${this.getAdditionalClasses(item)}`}
+            return <div key={item.id} id={item.id} title={title} className={`theia-notebook-main-toolbar-item action-label${this.getAdditionalClasses(item)}`}
                 onClick={() => {
                     if (item.command && (!item.when || this.props.contextKeyService.match(item.when, this.props.editorNode))) {
                         this.props.commandRegistry.executeCommand(item.command, this.props.notebookModel.uri);

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';
@@ -30,6 +30,8 @@ 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';
+import { NotebookCellStatusBarService } from '../service/notebook-cell-status-bar-service';
+import { LabelParser } from '@theia/core/lib/browser/label-parser';
 
 @injectable()
 export class NotebookMarkdownCellRenderer implements CellRenderer {
@@ -51,6 +53,12 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
     @inject(NotebookCellEditorService)
     protected readonly notebookCellEditorService: NotebookCellEditorService;
 
+    @inject(NotebookCellStatusBarService)
+    protected readonly notebookCellStatusBarService: NotebookCellStatusBarService;
+
+    @inject(LabelParser)
+    protected readonly labelParser: LabelParser;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
         return <MarkdownCell
             markdownRenderer={this.markdownRenderer}
@@ -60,7 +68,14 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
             cell={cell}
             notebookModel={notebookModel}
             notebookContextManager={this.notebookContextManager}
-            notebookCellEditorService={this.notebookCellEditorService} />;
+            notebookCellEditorService={this.notebookCellEditorService}
+            notebookCellStatusBarService={this.notebookCellStatusBarService}
+            labelParser={this.labelParser}
+        />;
+    }
+
+    renderSidebar(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
+        return <div className='theia-notebook-markdown-sidebar'></div>;
     }
 
     renderDragImage(cell: NotebookCellModel): HTMLElement {
@@ -82,11 +97,15 @@ interface MarkdownCellProps {
     notebookModel: NotebookModel;
     notebookContextManager: NotebookContextManager;
     notebookOptionsService: NotebookOptionsService;
-    notebookCellEditorService: NotebookCellEditorService
+    notebookCellEditorService: NotebookCellEditorService;
+    notebookCellStatusBarService: NotebookCellStatusBarService;
+    labelParser: LabelParser;
 }
 
 function MarkdownCell({
-    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager, notebookOptionsService, commandRegistry, notebookCellEditorService
+    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager,
+    notebookOptionsService, commandRegistry, notebookCellEditorService, notebookCellStatusBarService,
+    labelParser
 }: MarkdownCellProps): React.JSX.Element {
     const [editMode, setEditMode] = React.useState(cell.editing);
     let empty = false;
@@ -135,7 +154,7 @@ 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}
@@ -143,11 +162,16 @@ function MarkdownCell({
                 fontInfo={notebookOptionsService.editorFontInfo} />
             <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
                 commandRegistry={commandRegistry}
+                cellStatusBarService={notebookCellStatusBarService}
+                labelParser={labelParser}
                 onClick={() => cell.requestFocusEditor()} />
         </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

@@ -62,6 +62,10 @@ export interface NotebookCell {
     metadata: NotebookCellMetadata;
     internalMetadata: NotebookCellInternalMetadata;
     text: string;
+    /**
+     * The selection of the cell. Zero-based line/character coordinates.
+     */
+    selection: Range | undefined;
     onDidChangeOutputs?: Event<NotebookCellOutputsSplice>;
     onDidChangeOutputItems?: Event<CellOutput>;
     onDidChangeLanguage: Event<string>;
@@ -129,6 +133,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 +258,28 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         }
     }
 
+    protected _selection: Range | undefined = undefined;
+
+    get selection(): Range | undefined {
+        return this._selection;
+    }
+
+    set selection(selection: Range | undefined) {
+        this._selection = selection;
+    }
+
+    protected _cellheight: number = 0;
+    get cellHeight(): number {
+        return this._cellheight;
+    }
+
+    set cellHeight(height: number) {
+        if (height !== this._cellheight) {
+            this.onDidCellHeightChangeEmitter.fire(height);
+            this._cellheight = height;
+        }
+    }
+
     @postConstruct()
     protected init(): void {
         this._outputs = this.props.outputs.map(op => new NotebookCellOutputModel(op));