@theia/notebook 1.47.1 → 1.48.2

package/src/browser/service/notebook-context-manager.ts

@@ -0,0 +1,127 @@
+// *****************************************************************************
+// Copyright (C) 2024 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { ContextKeyChangeEvent, ContextKeyService, ScopedValueStore } from '@theia/core/lib/browser/context-key-service';
+import { DisposableCollection, Emitter } from '@theia/core';
+import { NotebookKernelService } from './notebook-kernel-service';
+import {
+    NOTEBOOK_CELL_EDITABLE,
+    NOTEBOOK_CELL_EXECUTING, NOTEBOOK_CELL_EXECUTION_STATE,
+    NOTEBOOK_CELL_FOCUSED, NOTEBOOK_CELL_MARKDOWN_EDIT_MODE,
+    NOTEBOOK_CELL_TYPE, NOTEBOOK_KERNEL, NOTEBOOK_KERNEL_SELECTED,
+    NOTEBOOK_VIEW_TYPE
+} from '../contributions/notebook-context-keys';
+import { NotebookEditorWidget } from '../notebook-editor-widget';
+import { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { CellKind } from '../../common';
+import { NotebookExecutionStateService } from './notebook-execution-state-service';
+
+@injectable()
+export class NotebookContextManager {
+    @inject(ContextKeyService) protected contextKeyService: ContextKeyService;
+
+    @inject(NotebookKernelService)
+    protected readonly notebookKernelService: NotebookKernelService;
+
+    @inject(NotebookExecutionStateService)
+    protected readonly executionStateService: NotebookExecutionStateService;
+
+    protected readonly toDispose = new DisposableCollection();
+
+    protected readonly onDidChangeContextEmitter = new Emitter<ContextKeyChangeEvent>();
+    readonly onDidChangeContext = this.onDidChangeContextEmitter.event;
+
+    protected _context?: HTMLElement;
+
+    scopedStore: ScopedValueStore;
+
+    get context(): HTMLElement | undefined {
+        return this._context;
+    }
+
+    init(widget: NotebookEditorWidget): void {
+        this._context = widget.node;
+        this.scopedStore = this.contextKeyService.createScoped(widget.node);
+
+        this.toDispose.dispose();
+
+        this.scopedStore.setContext(NOTEBOOK_VIEW_TYPE, widget?.notebookType);
+
+        // Kernel related keys
+        const kernel = widget?.model ? this.notebookKernelService.getSelectedNotebookKernel(widget.model) : undefined;
+        this.scopedStore.setContext(NOTEBOOK_KERNEL_SELECTED, !!kernel);
+        this.scopedStore.setContext(NOTEBOOK_KERNEL, kernel?.id);
+        this.toDispose.push(this.notebookKernelService.onDidChangeSelectedKernel(e => {
+            if (e.notebook.toString() === widget?.getResourceUri()?.toString()) {
+                this.scopedStore.setContext(NOTEBOOK_KERNEL_SELECTED, !!e.newKernel);
+                this.scopedStore.setContext(NOTEBOOK_KERNEL, e.newKernel);
+                this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_KERNEL_SELECTED, NOTEBOOK_KERNEL]));
+            }
+        }));
+
+        // Cell Selection realted keys
+        this.scopedStore.setContext(NOTEBOOK_CELL_FOCUSED, !!widget.model?.selectedCell);
+        widget.model?.onDidChangeSelectedCell(e => {
+            this.scopedStore.setContext(NOTEBOOK_CELL_FOCUSED, !!e);
+            this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_FOCUSED]));
+        });
+
+        widget.model?.onDidChangeSelectedCell(e => this.selectedCellChanged(e));
+
+        this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_VIEW_TYPE, NOTEBOOK_KERNEL_SELECTED, NOTEBOOK_KERNEL]));
+    }
+
+    protected cellDisposables = new DisposableCollection();
+
+    selectedCellChanged(cell: NotebookCellModel | undefined): void {
+        this.cellDisposables.dispose();
+
+        this.scopedStore.setContext(NOTEBOOK_CELL_TYPE, cell ? cell.cellKind === CellKind.Code ? 'code' : 'markdown' : undefined);
+
+        if (cell) {
+            this.scopedStore.setContext(NOTEBOOK_CELL_MARKDOWN_EDIT_MODE, cell.editing);
+            this.scopedStore.setContext(NOTEBOOK_CELL_EDITABLE, cell.cellKind === CellKind.Markup && !cell.editing);
+            this.cellDisposables.push(cell.onDidRequestCellEditChange(cellEdit => {
+                this.scopedStore.setContext(NOTEBOOK_CELL_MARKDOWN_EDIT_MODE, cellEdit);
+                this.scopedStore.setContext(NOTEBOOK_CELL_EDITABLE, cell.cellKind === CellKind.Markup && !cellEdit);
+                this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_MARKDOWN_EDIT_MODE]));
+            }));
+            this.cellDisposables.push(this.executionStateService.onDidChangeExecution(e => {
+                if (cell && e.affectsCell(cell.uri)) {
+                    this.scopedStore.setContext(NOTEBOOK_CELL_EXECUTING, !!e.changed);
+                    this.scopedStore.setContext(NOTEBOOK_CELL_EXECUTION_STATE, e.changed?.state ?? 'idle');
+                    this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_EXECUTING, NOTEBOOK_CELL_EXECUTION_STATE]));
+                }
+            }));
+        }
+
+        this.onDidChangeContextEmitter.fire(this.createContextKeyChangedEvent([NOTEBOOK_CELL_TYPE]));
+
+    }
+
+    onDidEditorTextFocus(focus: boolean): void {
+        this.scopedStore.setContext('inputFocus', focus);
+    }
+
+    createContextKeyChangedEvent(affectedKeys: string[]): ContextKeyChangeEvent {
+        return { affects: keys => affectedKeys.some(key => keys.has(key)) };
+    }
+
+    dispose(): void {
+        this.toDispose.dispose();
+    }
+}

package/src/browser/service/notebook-editor-widget-service.ts

@@ -23,6 +23,8 @@ import { Emitter } from '@theia/core';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { ApplicationShell } from '@theia/core/lib/browser';
 import { NotebookEditorWidget } from '../notebook-editor-widget';
+import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
+import { NOTEBOOK_EDITOR_FOCUSED } from '../contributions/notebook-context-keys';
 
 @injectable()
 export class NotebookEditorWidgetService {
@@ -30,6 +32,9 @@ export class NotebookEditorWidgetService {
     @inject(ApplicationShell)
     protected applicationShell: ApplicationShell;
 
+    @inject(ContextKeyService)
+    protected contextKeyService: ContextKeyService;
+
     private readonly notebookEditors = new Map<string, NotebookEditorWidget>();
 
     private readonly onNotebookEditorAddEmitter = new Emitter<NotebookEditorWidget>();
@@ -45,16 +50,7 @@ export class NotebookEditorWidgetService {
     @postConstruct()
     protected init(): void {
         this.applicationShell.onDidChangeActiveWidget(event => {
-            if (event.newValue instanceof NotebookEditorWidget) {
-                if (event.newValue !== this.focusedEditor) {
-                    this.focusedEditor = event.newValue;
-                    this.onDidChangeFocusedEditorEmitter.fire(this.focusedEditor);
-                }
-            } else if (event.newValue) {
-                // Only unfocus editor if a new widget has been focused
-                this.focusedEditor = undefined;
-                this.onDidChangeFocusedEditorEmitter.fire(undefined);
-            }
+            this.notebookEditorFocusChanged(event.newValue as NotebookEditorWidget, event.newValue instanceof NotebookEditorWidget);
         });
     }
 
@@ -85,4 +81,18 @@ export class NotebookEditorWidgetService {
         return Array.from(this.notebookEditors.values());
     }
 
+    notebookEditorFocusChanged(editor: NotebookEditorWidget, focus: boolean): void {
+        if (focus) {
+            if (editor !== this.focusedEditor) {
+                this.focusedEditor = editor;
+                this.contextKeyService.setContext(NOTEBOOK_EDITOR_FOCUSED, true);
+                this.onDidChangeFocusedEditorEmitter.fire(this.focusedEditor);
+            }
+        } else if (this.focusedEditor) {
+            this.focusedEditor = undefined;
+            this.contextKeyService.setContext(NOTEBOOK_EDITOR_FOCUSED, false);
+            this.onDidChangeFocusedEditorEmitter.fire(undefined);
+        }
+    }
+
 }

package/src/browser/service/notebook-kernel-service.ts

@@ -239,14 +239,18 @@ export class NotebookKernelService {
         const all = kernels.map(obj => obj.kernel);
 
         // bound kernel
-        const selectedId = this.notebookBindings[`${notebook.viewType}/${notebook.uri}`];
-        const selected = selectedId ? this.kernels.get(selectedId)?.kernel : undefined;
+        const selected = this.getSelectedNotebookKernel(notebook);
         const suggestions = kernels.filter(item => item.instanceAffinity > 1).map(item => item.kernel); // TODO implement notebookAffinity
         const hidden = kernels.filter(item => item.instanceAffinity < 0).map(item => item.kernel);
         return { all, selected, suggestions, hidden };
 
     }
 
+    getSelectedNotebookKernel(notebook: NotebookTextModelLike): NotebookKernel | undefined {
+        const selectedId = this.notebookBindings[`${notebook.viewType}/${notebook.uri}`];
+        return selectedId ? this.kernels.get(selectedId)?.kernel : undefined;
+    }
+
     selectKernelForNotebook(kernel: NotebookKernel | undefined, notebook: NotebookTextModelLike): void {
         const key = `${notebook.viewType}/${notebook.uri}`;
         const oldKernel = this.notebookBindings[key];

package/src/browser/service/notebook-monaco-text-model-service.ts

@@ -0,0 +1,48 @@
+// *****************************************************************************
+// Copyright (C) 2024 TypeFox and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ReferenceCollection, URI, Reference, Event } from '@theia/core';
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { MonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
+import { MonacoEditorModel } from '@theia/monaco/lib/browser/monaco-editor-model';
+import { NotebookModel } from '../view-model/notebook-model';
+
+/**
+ * special service for creating monaco textmodels for notebook cells.
+ * Its for optimization purposes since there is alot of overhead otherwise with calling the backend to create a document for each cell and other smaller things.
+ */
+@injectable()
+export class NotebookMonacoTextModelService {
+
+    @inject(MonacoTextModelService)
+    protected readonly monacoTextModelService: MonacoTextModelService;
+
+    protected readonly cellmodels = new ReferenceCollection<string, MonacoEditorModel>(
+        uri => this.monacoTextModelService.createUnmangedModel(new URI(uri))
+    );
+
+    getOrCreateNotebookCellModelReference(uri: URI): Promise<Reference<MonacoEditorModel>> {
+        return this.cellmodels.acquire(uri.toString());
+    }
+
+    async createTextModelsForNotebook(notebook: NotebookModel): Promise<void> {
+        await Promise.all(notebook.cells.map(cell => this.getOrCreateNotebookCellModelReference(cell.uri)));
+    }
+
+    get onDidCreateNotebookCellModel(): Event<MonacoEditorModel> {
+        return this.cellmodels.onDidCreate;
+    }
+}

package/src/browser/service/notebook-service.ts

@@ -20,9 +20,10 @@ import { BinaryBuffer } from '@theia/core/lib/common/buffer';
 import { NotebookData, TransientOptions } from '../../common';
 import { NotebookModel, NotebookModelFactory, NotebookModelProps } from '../view-model/notebook-model';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
-import { MonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
 import { NotebookCellModel, NotebookCellModelFactory, NotebookCellModelProps } from '../view-model/notebook-cell-model';
 import { Deferred } from '@theia/core/lib/common/promise-util';
+import { NotebookMonacoTextModelService } from './notebook-monaco-text-model-service';
+import { CellEditOperation } from '../notebook-types';
 
 export const NotebookProvider = Symbol('notebook provider');
 
@@ -37,21 +38,28 @@ export interface NotebookSerializer {
     fromNotebook(data: NotebookData): Promise<BinaryBuffer>;
 }
 
+export interface NotebookWorkspaceEdit {
+    edits: {
+        resource: URI;
+        edit: CellEditOperation
+    }[]
+}
+
 @injectable()
 export class NotebookService implements Disposable {
 
     @inject(FileService)
     protected fileService: FileService;
 
-    @inject(MonacoTextModelService)
-    protected modelService: MonacoTextModelService;
-
     @inject(NotebookModelFactory)
     protected notebookModelFactory: (props: NotebookModelProps) => NotebookModel;
 
     @inject(NotebookCellModelFactory)
     protected notebookCellModelFactory: (props: NotebookCellModelProps) => NotebookCellModel;
 
+    @inject(NotebookMonacoTextModelService)
+    protected textModelService: NotebookMonacoTextModelService;
+
     protected willUseNotebookSerializerEmitter = new Emitter<string>();
     readonly onWillUseNotebookSerializer = this.willUseNotebookSerializerEmitter.event;
 
@@ -111,7 +119,7 @@ export class NotebookService implements Disposable {
         this.notebookModels.set(resource.uri.toString(), model);
         // Resolve cell text models right after creating the notebook model
         // This ensures that all text models are available in the plugin host
-        await Promise.all(model.cells.map(e => e.resolveTextModel()));
+        this.textModelService.createTextModelsForNotebook(model);
         this.didAddNotebookDocumentEmitter.fire(model);
         return model;
     }
@@ -178,4 +186,17 @@ export class NotebookService implements Disposable {
     listNotebookDocuments(): NotebookModel[] {
         return [...this.notebookModels.values()];
     }
+
+    applyWorkspaceEdit(workspaceEdit: NotebookWorkspaceEdit): boolean {
+        try {
+            workspaceEdit.edits.forEach(edit => {
+                const notebook = this.getNotebookEditorModel(edit.resource);
+                notebook?.applyEdits([edit.edit], true);
+            });
+            return true;
+        } catch (e) {
+            console.error(e);
+            return false;
+        }
+    }
 }

package/src/browser/style/index.css

@@ -129,11 +129,27 @@
   background-color: var(--theia-editor-background);
 }
 
-.theia-notebook-cell-sidebar {
+.theia-notebook-cell-sidebar-toolbar {
   display: flex;
   flex-direction: column;
   padding: 2px;
   background-color: var(--theia-editor-background);
+  flex-grow: 1;
+}
+
+.theia-notebook-cell-sidebar {
+  display: flex;
+  flex-direction: column;
+}
+
+.theia-notebook-code-cell-execution-order {
+  display: block;
+  font-family: var(--monaco-monospace-font);
+  font-size: 10px;
+  opacity: 0.7;
+  text-align: center;
+  white-space: pre;
+  padding: 5px 0;
 }
 
 .theia-notebook-cell-toolbar-item {
@@ -159,22 +175,23 @@
   flex-direction: row;
 }
 
-.theia-notebook-cell-sidebar {
+.theia-notebook-main-container {
   display: flex;
   flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 }
 
-.theia-notebook-main-container {
+.theia-notebook-viewport {
   display: flex;
-  flex-direction: column;
-  height: 100%;
   overflow: hidden;
+  height: 100%;
 }
 
 .theia-notebook-scroll-container {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
 }
 
 .theia-notebook-main-toolbar {

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

@@ -18,17 +18,24 @@ import * as React from '@theia/core/shared/react';
 import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
-import { MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
+import { MonacoEditor, MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
-import { DisposableCollection } from '@theia/core';
+import { IContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
+import { NotebookContextManager } from '../service/notebook-context-manager';
+import { DisposableCollection, OS } from '@theia/core';
+import { NotebookViewportService } from './notebook-viewport-service';
+import { BareFontInfo } from '@theia/monaco-editor-core/esm/vs/editor/common/config/fontInfo';
 
 interface CellEditorProps {
     notebookModel: NotebookModel,
     cell: NotebookCellModel,
-    monacoServices: MonacoEditorServices
+    monacoServices: MonacoEditorServices,
+    notebookContextManager: NotebookContextManager;
+    notebookViewportService?: NotebookViewportService,
+    fontInfo?: BareFontInfo;
 }
 
-const DEFAULT_EDITOR_OPTIONS = {
+const DEFAULT_EDITOR_OPTIONS: MonacoEditor.IOptions = {
     ...MonacoEditorProvider.inlineOptions,
     minHeight: -1,
     maxHeight: -1,
@@ -46,7 +53,27 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
     override componentDidMount(): void {
         this.disposeEditor();
-        this.initEditor();
+        this.toDispose.push(this.props.cell.onWillFocusCellEditor(() => {
+            this.editor?.getControl().focus();
+        }));
+        this.toDispose.push(this.props.notebookModel.onDidChangeSelectedCell(() => {
+            if (this.props.notebookModel.selectedCell !== this.props.cell && this.editor?.getControl().hasTextFocus()) {
+                if (document.activeElement && 'blur' in document.activeElement) {
+                    (document.activeElement as HTMLElement).blur();
+                }
+            }
+        }));
+        if (!this.props.notebookViewportService || (this.container && this.props.notebookViewportService.isElementInViewport(this.container))) {
+            this.initEditor();
+        } else {
+            const disposable = this.props.notebookViewportService?.onDidChangeViewport(() => {
+                if (!this.editor && this.container && this.props.notebookViewportService!.isElementInViewport(this.container)) {
+                    this.initEditor();
+                    disposable.dispose();
+                }
+            });
+            this.toDispose.push(disposable);
+        }
     }
 
     override componentWillUnmount(): void {
@@ -62,13 +89,15 @@ 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,
                 editorModel,
                 editorNode,
                 monacoServices,
-                DEFAULT_EDITOR_OPTIONS);
+                DEFAULT_EDITOR_OPTIONS,
+                [[IContextKeyService, this.props.notebookContextManager.scopedStore]]);
             this.toDispose.push(this.editor);
             this.editor.setLanguage(cell.language);
             this.toDispose.push(this.editor.getControl().onDidContentSizeChange(() => {
@@ -78,6 +107,15 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             this.toDispose.push(this.editor.onDocumentContentChanged(e => {
                 notebookModel.cellDirtyChanged(cell, true);
             }));
+            this.toDispose.push(this.editor.getControl().onDidFocusEditorText(() => {
+                this.props.notebookContextManager.onDidEditorTextFocus(true);
+            }));
+            this.toDispose.push(this.editor.getControl().onDidBlurEditorText(() => {
+                this.props.notebookContextManager.onDidEditorTextFocus(false);
+            }));
+            if (cell.editing && notebookModel.selectedCell === cell) {
+                this.editor.getControl().focus();
+            }
         }
     }
 
@@ -89,11 +127,15 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
         this.editor?.refresh();
     };
 
+    protected estimateHeight(): string {
+        const lineHeight = this.props.fontInfo?.lineHeight ?? 20;
+        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)}>
-
-        </div>;
-     }
+            ref={container => this.setContainer(container)} style={{ height: this.editor ? undefined : this.estimateHeight() }}>
+        </div >;
+    }
 
 }

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

@@ -50,9 +50,13 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
             if (e.newCellIds && e.newCellIds.length > 0) {
                 this.setState({ ...this.state, selectedCell: this.props.notebookModel.cells.find(model => model.handle === e.newCellIds![e.newCellIds!.length - 1]) });
             } else {
-                this.setState({ ...this.state, selectedCell: this.props.notebookModel.cells.find(cell => cell === this.state.selectedCell)});
+                this.setState({ ...this.state, selectedCell: this.props.notebookModel.cells.find(cell => cell === this.state.selectedCell) });
             }
         }));
+
+        this.toDispose.push(props.notebookModel.onDidChangeSelectedCell(cell => {
+            this.setState({ ...this.state, selectedCell: cell });
+        }));
     }
 
     override componentWillUnmount(): void {
@@ -71,15 +75,15 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                             onDragOver={e => this.onDragOver(e, cell, 'top')} />
                         {this.shouldRenderDragOverIndicator(cell, 'top') && <CellDropIndicator />}
                         <li className={'theia-notebook-cell' + (this.state.selectedCell === cell ? ' focused' : '') + (this.isEnabled() ? ' draggable' : '')}
-                            onClick={() => {
-                                this.setState({ selectedCell: cell });
+                            onClick={e => {
+                                this.setState({ ...this.state, selectedCell: cell });
                                 this.props.notebookModel.setSelectedCell(cell);
                             }}
                             onDragStart={e => this.onDragStart(e, index)}
                             onDragOver={e => this.onDragOver(e, cell)}
                             onDrop={e => this.onDrop(e, index)}
                             draggable={true}
-                            ref={(node: HTMLLIElement) => cell.refChanged(node)}>
+                            ref={ref => cell === this.state.selectedCell && ref?.scrollIntoView({ block: 'nearest' })}>
                             <div className={'theia-notebook-cell-marker' + (this.state.selectedCell === cell ? ' theia-notebook-cell-marker-selected' : '')}></div>
                             <div className='theia-notebook-cell-content'>
                                 {this.renderCellContent(cell, index)}

package/src/browser/view/notebook-cell-toolbar-factory.tsx

@@ -23,6 +23,7 @@ import { ContextMenuRenderer } from '@theia/core/lib/browser';
 import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { NotebookCellOutputModel } from '../view-model/notebook-cell-output-model';
+import { NotebookContextManager } from '../service/notebook-context-manager';
 
 export interface NotebookCellToolbarItem {
     id: string;
@@ -48,21 +49,24 @@ export class NotebookCellToolbarFactory {
     @inject(CommandRegistry)
     protected readonly commandRegistry: CommandRegistry;
 
+    @inject(NotebookContextManager)
+    protected readonly notebookContextManager: NotebookContextManager;
+
     renderCellToolbar(menuPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
         return <NotebookCellToolbar getMenuItems={() => this.getMenuItems(menuPath, notebookModel, cell)}
-            onContextKeysChanged={cell.notebookCellContextManager.onDidChangeContext} />;
+            onContextKeysChanged={this.notebookContextManager.onDidChangeContext} />;
     }
 
     renderSidebar(menuPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): React.ReactNode {
         return <NotebookCellSidebar getMenuItems={() => this.getMenuItems(menuPath, notebookModel, cell, output)}
-            onContextKeysChanged={cell.notebookCellContextManager.onDidChangeContext} />;
+            onContextKeysChanged={this.notebookContextManager.onDidChangeContext} />;
     }
 
     private getMenuItems(menuItemPath: string[], notebookModel: NotebookModel, cell: NotebookCellModel, output?: NotebookCellOutputModel): NotebookCellToolbarItem[] {
         const inlineItems: NotebookCellToolbarItem[] = [];
 
         for (const menuNode of this.menuRegistry.getMenu(menuItemPath).children) {
-            if (!menuNode.when || this.contextKeyService.match(menuNode.when, cell.context ?? undefined)) {
+            if (!menuNode.when || this.contextKeyService.match(menuNode.when, this.notebookContextManager.context)) {
                 if (menuNode.role === CompoundMenuNodeRole.Flat) {
                     inlineItems.push(...menuNode.children?.map(child => this.createToolbarItem(child, notebookModel, cell, output)) ?? []);
                 } else {
@@ -85,7 +89,8 @@ export class NotebookCellToolbarFactory {
                         anchor: e.nativeEvent,
                         menuPath,
                         includeAnchorArg: false,
-                        args: [notebookModel, cell, output]
+                        args: [cell],
+                        context: this.notebookContextManager.context
                     }) :
                 () => this.commandRegistry.executeCommand(menuNode.command!, notebookModel, cell, output),
             isVisible: () => menuPath ? true : Boolean(this.commandRegistry.getVisibleHandler(menuNode.command!, notebookModel, cell, output)),

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

@@ -65,7 +65,7 @@ export class NotebookCellToolbar extends NotebookCellActionBar {
 export class NotebookCellSidebar extends NotebookCellActionBar {
 
     override render(): React.ReactNode {
-        return <div className='theia-notebook-cell-sidebar'>
+        return <div className='theia-notebook-cell-sidebar-toolbar'>
             {this.state.inlineItems.filter(e => e.isVisible()).map(item => this.renderItem(item))}
         </div>;
     }