@theia/notebook 1.47.1 → 1.48.2

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

@@ -29,6 +29,11 @@ import { CellExecution, NotebookExecutionStateService } from '../service/noteboo
 import { codicon } from '@theia/core/lib/browser';
 import { NotebookCellExecutionState } from '../../common';
 import { DisposableCollection } from '@theia/core';
+import { NotebookContextManager } from '../service/notebook-context-manager';
+import { NotebookViewportService } from './notebook-viewport-service';
+import { EditorPreferences } from '@theia/editor/lib/browser';
+import { BareFontInfo } from '@theia/monaco-editor-core/esm/vs/editor/common/config/fontInfo';
+import { PixelRatio } from '@theia/monaco-editor-core/esm/vs/base/browser/browser';
 
 @injectable()
 export class NotebookCodeCellRenderer implements CellRenderer {
@@ -47,19 +52,33 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(NotebookExecutionStateService)
     protected readonly executionStateService: NotebookExecutionStateService;
 
+    @inject(NotebookContextManager)
+    protected readonly notebookContextManager: NotebookContextManager;
+
+    @inject(NotebookViewportService)
+    protected readonly notebookViewportService: NotebookViewportService;
+
+    @inject(EditorPreferences)
+    protected readonly editorPreferences: EditorPreferences;
+
+    protected fontInfo: BareFontInfo | undefined;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel, handle: number): React.ReactNode {
         return <div>
             <div className='theia-notebook-cell-with-sidebar'>
-                <div>
+                <div className='theia-notebook-cell-sidebar'>
                     {this.notebookCellToolbarFactory.renderSidebar(NotebookCellActionContribution.CODE_CELL_SIDEBAR_MENU, notebookModel, cell)}
-                    {/* cell-execution-order needs an own component. Could be a little more complicated
-                    <p className='theia-notebook-code-cell-execution-order'>{`[${cell.exec ?? ' '}]`}</p> */}
+                    <CodeCellExecutionOrder cell={cell} />
                 </div>
                 <div className='theia-notebook-cell-editor-container'>
-                    <CellEditor notebookModel={notebookModel} cell={cell} monacoServices={this.monacoServices} />
-                    <NotebookCodeCellStatus cell={cell} executionStateService={this.executionStateService}></NotebookCodeCellStatus>
-                </div>
-            </div>
+                    <CellEditor notebookModel={notebookModel} cell={cell}
+                        monacoServices={this.monacoServices}
+                        notebookContextManager={this.notebookContextManager}
+                        notebookViewportService={this.notebookViewportService}
+                        fontInfo={this.getOrCreateMonacoFontInfo()} />
+                    <NotebookCodeCellStatus cell={cell} executionStateService={this.executionStateService} onClick={() => cell.requestFocusEditor()}></NotebookCodeCellStatus>
+                </div >
+            </div >
             <div className='theia-notebook-cell-with-sidebar'>
                 <NotebookCodeCellOutputs cell={cell} notebook={notebookModel} outputWebviewFactory={this.cellOutputWebviewFactory}
                     renderSidebar={() =>
@@ -67,11 +86,31 @@ export class NotebookCodeCellRenderer implements CellRenderer {
             </div>
         </div >;
     }
+
+    protected getOrCreateMonacoFontInfo(): BareFontInfo {
+        if (!this.fontInfo) {
+            this.fontInfo = this.createFontInfo();
+            this.editorPreferences.onPreferenceChanged(e => this.fontInfo = this.createFontInfo());
+        }
+        return this.fontInfo;
+    }
+
+    protected createFontInfo(): BareFontInfo {
+        return BareFontInfo.createFromRawSettings({
+            fontFamily: this.editorPreferences['editor.fontFamily'],
+            fontWeight: String(this.editorPreferences['editor.fontWeight']),
+            fontSize: this.editorPreferences['editor.fontSize'],
+            fontLigatures: this.editorPreferences['editor.fontLigatures'],
+            lineHeight: this.editorPreferences['editor.lineHeight'],
+            letterSpacing: this.editorPreferences['editor.letterSpacing'],
+        }, PixelRatio.value);
+    }
 }
 
 export interface NotebookCodeCellStatusProps {
     cell: NotebookCellModel;
     executionStateService: NotebookExecutionStateService;
+    onClick: () => void;
 }
 
 export interface NotebookCodeCellStatusState {
@@ -114,7 +153,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
     }
 
     override render(): React.ReactNode {
-        return <div className='notebook-cell-status'>
+        return <div className='notebook-cell-status' onClick={() => this.props.onClick()}>
             <div className='notebook-cell-status-left'>
                 {this.renderExecutionState()}
             </div>
@@ -230,3 +269,20 @@ export class NotebookCodeCellOutputs extends React.Component<NotebookCellOutputP
     }
 
 }
+
+interface NotebookCellExecutionOrderProps {
+    cell: NotebookCellModel;
+}
+
+function CodeCellExecutionOrder({ cell }: NotebookCellExecutionOrderProps): React.JSX.Element {
+    const [executionOrder, setExecutionOrder] = React.useState(cell.internalMetadata.executionOrder ?? ' ');
+
+    React.useEffect(() => {
+        const listener = cell.onDidChangeInternalMetadata(e => {
+            setExecutionOrder(cell.internalMetadata.executionOrder ?? ' ');
+        });
+        return () => listener.dispose();
+    }, []);
+
+    return <span className='theia-notebook-code-cell-execution-order'>{`[${executionOrder}]`}</span>;
+}

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

@@ -22,6 +22,7 @@ import { NotebookKernelService } from '../service/notebook-kernel-service';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { NotebookCommand } from '../../common';
+import { NotebookContextManager } from '../service/notebook-context-manager';
 
 export interface NotebookMainToolbarProps {
     notebookModel: NotebookModel
@@ -29,6 +30,8 @@ export interface NotebookMainToolbarProps {
     notebookKernelService: NotebookKernelService;
     commandRegistry: CommandRegistry;
     contextKeyService: ContextKeyService;
+    editorNode: HTMLElement;
+    notebookContextManager: NotebookContextManager;
 }
 
 @injectable()
@@ -37,14 +40,16 @@ export class NotebookMainToolbarRenderer {
     @inject(CommandRegistry) protected readonly commandRegistry: CommandRegistry;
     @inject(MenuModelRegistry) protected readonly menuRegistry: MenuModelRegistry;
     @inject(ContextKeyService) protected readonly contextKeyService: ContextKeyService;
+    @inject(NotebookContextManager) protected readonly notebookContextManager: NotebookContextManager;
 
-    render(notebookModel: NotebookModel): React.ReactNode {
+    render(notebookModel: NotebookModel, editorNode: HTMLElement): React.ReactNode {
         return <NotebookMainToolbar notebookModel={notebookModel}
             menuRegistry={this.menuRegistry}
             notebookKernelService={this.notebookKernelService}
             commandRegistry={this.commandRegistry}
             contextKeyService={this.contextKeyService}
-        />;
+            editorNode={editorNode}
+            notebookContextManager={this.notebookContextManager} />;
     }
 }
 
@@ -70,12 +75,18 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
 
         // TODO maybe we need a mechanism to check for changes in the menu to update this toolbar
         const contextKeys = new Set<string>();
-        this.getMenuItems().filter(item => item.when).forEach(item => props.contextKeyService.parseKeys(item.when!)?.forEach(key => contextKeys.add(key)));
+        this.getAllContextKeys(this.getMenuItems(), contextKeys);
+        props.notebookContextManager.onDidChangeContext(e => {
+            if (e.affects(contextKeys)) {
+                this.forceUpdate();
+            }
+        });
         props.contextKeyService.onDidChange(e => {
             if (e.affects(contextKeys)) {
                 this.forceUpdate();
             }
         });
+
     }
 
     override componentWillUnmount(): void {
@@ -103,7 +114,7 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
                 {itemNodes}
                 {itemNodes && itemNodes.length > 0 && <span key={`${item.id}-separator`} className='theia-notebook-toolbar-separator'></span>}
             </React.Fragment>;
-        } else if (!item.when || this.props.contextKeyService.match(item.when)) {
+        } else if (!item.when || this.props.contextKeyService.match(item.when, this.props.editorNode)) {
             const visibleCommand = Boolean(this.props.commandRegistry.getVisibleHandler(item.command ?? '', this.props.notebookModel));
             if (!visibleCommand) {
                 return undefined;
@@ -125,6 +136,16 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
     private getMenuItems(): readonly MenuNode[] {
         const menuPath = NotebookMenus.NOTEBOOK_MAIN_TOOLBAR;
         const pluginCommands = this.props.menuRegistry.getMenuNode(menuPath).children;
-        return this.props.menuRegistry.getMenu([menuPath]).children.concat(pluginCommands);
+        const theiaCommands = this.props.menuRegistry.getMenu([menuPath]).children;
+        // TODO add specifc arguments to commands
+        return theiaCommands.concat(pluginCommands);
+    }
+
+    private getAllContextKeys(menus: readonly MenuNode[], keySet: Set<string>): void {
+        menus.filter(item => item.when)
+            .forEach(item => this.props.contextKeyService.parseKeys(item.when!)?.forEach(key => keySet.add(key)));
+
+        menus.filter(item => item.children && item.children.length > 0)
+            .forEach(item => this.getAllContextKeys(item.children!, keySet));
     }
 }

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

@@ -24,6 +24,7 @@ import { CellEditor } from './notebook-cell-editor';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
 import { nls } from '@theia/core';
+import { NotebookContextManager } from '../service/notebook-context-manager';
 
 @injectable()
 export class NotebookMarkdownCellRenderer implements CellRenderer {
@@ -33,9 +34,12 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
     @inject(MonacoEditorServices)
     protected readonly monacoServices: MonacoEditorServices;
 
+    @inject(NotebookContextManager)
+    protected readonly notebookContextManager: NotebookContextManager;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
         return <MarkdownCell markdownRenderer={this.markdownRenderer} monacoServices={this.monacoServices}
-            cell={cell} notebookModel={notebookModel} />;
+            cell={cell} notebookModel={notebookModel} notebookContextManager={this.notebookContextManager} />;
     }
 
 }
@@ -46,10 +50,11 @@ interface MarkdownCellProps {
 
     cell: NotebookCellModel,
     notebookModel: NotebookModel
+    notebookContextManager: NotebookContextManager;
 }
 
-function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel }: MarkdownCellProps): React.JSX.Element {
-    const [editMode, setEditMode] = React.useState(false);
+function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager }: MarkdownCellProps): React.JSX.Element {
+    const [editMode, setEditMode] = React.useState(cell.editing);
 
     React.useEffect(() => {
         const listener = cell.onDidRequestCellEditChange(cellEdit => setEditMode(cellEdit));
@@ -62,7 +67,7 @@ function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel }:
     }
 
     return editMode ?
-        <CellEditor cell={cell} notebookModel={notebookModel} monacoServices={monacoServices} /> :
+        <CellEditor cell={cell} notebookModel={notebookModel} monacoServices={monacoServices} notebookContextManager={notebookContextManager} /> :
         <div className='theia-notebook-markdown-content'
             onDoubleClick={() => cell.requestEdit()}
             // This sets the non React HTML node from the markdown renderers output as a child node to this react component

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

@@ -0,0 +1,61 @@
+// *****************************************************************************
+// 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 { Disposable } from '@theia/core';
+import { injectable } from '@theia/core/shared/inversify';
+import { Emitter } from '@theia/core/shared/vscode-languageserver-protocol';
+
+/**
+ * this service is for managing the viewport and scroll state of a notebook editor.
+ * 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 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);
+        }
+    }
+
+    isElementInViewport(element: HTMLElement): boolean {
+        if (this._viewportElement) {
+            const rect = element.getBoundingClientRect();
+            const viewRect = this._viewportElement.getBoundingClientRect();
+            return rect.top < viewRect.top ? rect.bottom > viewRect.top : rect.top < viewRect.bottom;
+        }
+        return false;
+    }
+
+    onScroll(e: HTMLDivElement): void {
+        this.onDidChangeViewportEmitter.fire();
+    }
+
+    dispose(): void {
+        this.resizeObserver.disconnect();
+    }
+}

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

@@ -20,38 +20,27 @@
 
 import { Disposable, DisposableCollection, Emitter, Event, URI } from '@theia/core';
 import { inject, injectable, interfaces, postConstruct } from '@theia/core/shared/inversify';
-import { ContextKeyChangeEvent } from '@theia/core/lib/browser/context-key-service';
 import { MonacoEditorModel } from '@theia/monaco/lib/browser/monaco-editor-model';
-import { MonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
 import {
     CellKind, NotebookCellCollapseState, NotebookCellInternalMetadata,
     NotebookCellMetadata, CellOutput, CellData, CellOutputItem
 } from '../../common';
 import { NotebookCellOutputsSplice } from '../notebook-types';
+import { NotebookMonacoTextModelService } from '../service/notebook-monaco-text-model-service';
 import { NotebookCellOutputModel } from './notebook-cell-output-model';
 
 export const NotebookCellModelFactory = Symbol('NotebookModelFactory');
 export type NotebookCellModelFactory = (props: NotebookCellModelProps) => NotebookCellModel;
 
-export function createNotebookCellModelContainer(parent: interfaces.Container, props: NotebookCellModelProps,
-    notebookCellContextManager: new (...args: never[]) => unknown): interfaces.Container {
+export function createNotebookCellModelContainer(parent: interfaces.Container, props: NotebookCellModelProps): interfaces.Container {
     const child = parent.createChild();
 
     child.bind(NotebookCellModelProps).toConstantValue(props);
-    // We need the constructor as property here to avoid circular dependencies for the context manager
-    child.bind(NotebookCellContextManager).to(notebookCellContextManager).inSingletonScope();
     child.bind(NotebookCellModel).toSelf();
 
     return child;
 }
 
-const NotebookCellContextManager = Symbol('NotebookCellContextManager');
-interface NotebookCellContextManager {
-    updateCellContext(cell: NotebookCellModel, context: HTMLElement): void;
-    dispose(): void;
-    onDidChangeContext: Event<ContextKeyChangeEvent>;
-}
-
 export interface CellInternalMetadataChangedEvent {
     readonly lastRunSuccessChanged?: boolean;
 }
@@ -111,13 +100,14 @@ export class NotebookCellModel implements NotebookCell, Disposable {
     protected readonly onDidRequestCellEditChangeEmitter = new Emitter<boolean>();
     readonly onDidRequestCellEditChange = this.onDidRequestCellEditChangeEmitter.event;
 
-    @inject(NotebookCellContextManager)
-    readonly notebookCellContextManager: NotebookCellContextManager;
+    protected readonly onWillFocusCellEditorEmitter = new Emitter<void>();
+    readonly onWillFocusCellEditor = this.onWillFocusCellEditorEmitter.event;
 
     @inject(NotebookCellModelProps)
     protected readonly props: NotebookCellModelProps;
-    @inject(MonacoTextModelService)
-    protected readonly textModelService: MonacoTextModelService;
+
+    @inject(NotebookMonacoTextModelService)
+    protected readonly textModelService: NotebookMonacoTextModelService;
 
     get outputs(): NotebookCellOutputModel[] {
         return this._outputs;
@@ -129,6 +119,11 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         return this._metadata;
     }
 
+    set metadata(newMetadata: NotebookCellMetadata) {
+        this._metadata = newMetadata;
+        this.onDidChangeMetadataEmitter.fire();
+    }
+
     protected _metadata: NotebookCellMetadata;
 
     protected toDispose = new DisposableCollection();
@@ -152,14 +147,8 @@ export class NotebookCellModel implements NotebookCell, Disposable {
 
     protected textModel?: MonacoEditorModel;
 
-    protected htmlContext: HTMLLIElement;
-
-    get context(): HTMLLIElement {
-        return this.htmlContext;
-    }
-
     get text(): string {
-        return this.textModel ? this.textModel.getText() : this.source;
+        return this.textModel && !this.textModel.isDisposed() ? this.textModel.getText() : this.source;
     }
 
     get source(): string {
@@ -198,6 +187,11 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         return this.props.cellKind;
     }
 
+    protected _editing: boolean = false;
+    get editing(): boolean {
+        return this._editing;
+    }
+
     @postConstruct()
     protected init(): void {
         this._outputs = this.props.outputs.map(op => new NotebookCellOutputModel(op));
@@ -205,13 +199,6 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this._internalMetadata = this.props.internalMetadata ?? {};
     }
 
-    refChanged(node: HTMLLIElement): void {
-        if (node) {
-            this.htmlContext = node;
-            this.notebookCellContextManager.updateCellContext(this, node);
-        }
-    }
-
     dispose(): void {
         this.onDidChangeOutputsEmitter.dispose();
         this.onDidChangeOutputItemsEmitter.dispose();
@@ -219,21 +206,27 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this.onDidChangeMetadataEmitter.dispose();
         this.onDidChangeInternalMetadataEmitter.dispose();
         this.onDidChangeLanguageEmitter.dispose();
-        this.notebookCellContextManager.dispose();
         this.textModel?.dispose();
         this.toDispose.dispose();
     }
 
     requestEdit(): void {
         if (!this.textModel || !this.textModel.readOnly) {
+            this._editing = true;
             this.onDidRequestCellEditChangeEmitter.fire(true);
         }
     }
 
     requestStopEdit(): void {
+        this._editing = false;
         this.onDidRequestCellEditChangeEmitter.fire(false);
     }
 
+    requestFocusEditor(): void {
+        this.requestEdit();
+        this.onWillFocusCellEditorEmitter.fire();
+    }
+
     spliceNotebookCellOutputs(splice: NotebookCellOutputsSplice): void {
         if (splice.deleteCount > 0 && splice.newOutputs.length > 0) {
             const commonLen = Math.min(splice.deleteCount, splice.newOutputs.length);
@@ -298,7 +291,7 @@ export class NotebookCellModel implements NotebookCell, Disposable {
             return this.textModel;
         }
 
-        const ref = await this.textModelService.createModelReference(this.uri);
+        const ref = await this.textModelService.getOrCreateNotebookCellModelReference(this.uri);
         this.textModel = ref.object;
         this.textModel.onDidChangeContent(e => {
             this.props.source = e.model.getText();

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

@@ -18,14 +18,18 @@ import { Disposable, Emitter, Event, Resource, URI } from '@theia/core';
 import { Saveable, SaveOptions } from '@theia/core/lib/browser';
 import {
     CellData, CellEditType, CellUri, NotebookCellInternalMetadata,
+    NotebookCellMetadata,
     NotebookCellsChangeType, NotebookCellTextModelSplice, NotebookData,
     NotebookDocumentMetadata,
 } from '../../common';
-import { NotebookContentChangedEvent, NotebookModelWillAddRemoveEvent, CellEditOperation, NullablePartialNotebookCellInternalMetadata } from '../notebook-types';
+import {
+    NotebookContentChangedEvent, NotebookModelWillAddRemoveEvent,
+    CellEditOperation, NullablePartialNotebookCellInternalMetadata,
+    NullablePartialNotebookCellMetadata
+} from '../notebook-types';
 import { NotebookSerializer } from '../service/notebook-service';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
 import { NotebookCellModel, NotebookCellModelFactory } from './notebook-cell-model';
-import { MonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
 import { inject, injectable, interfaces, postConstruct } from '@theia/core/shared/inversify';
 import { UndoRedoService } from '@theia/editor/lib/browser/undo-redo-service';
 import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
@@ -64,6 +68,9 @@ export class NotebookModel implements Saveable, Disposable {
     protected readonly onDidChangeContentEmitter = new Emitter<NotebookContentChangedEvent[]>();
     readonly onDidChangeContent = this.onDidChangeContentEmitter.event;
 
+    protected readonly onDidChangeSelectedCellEmitter = new Emitter<NotebookCellModel | undefined>();
+    readonly onDidChangeSelectedCell = this.onDidChangeSelectedCellEmitter.event;
+
     get onDidChangeReadOnly(): Event<boolean | MarkdownString> {
         return this.props.resource.onDidChangeReadOnly ?? Event.None;
     }
@@ -77,9 +84,6 @@ export class NotebookModel implements Saveable, Disposable {
     @inject(NotebookModelProps)
     protected props: NotebookModelProps;
 
-    @inject(MonacoTextModelService)
-    protected modelService: MonacoTextModelService;
-
     @inject(NotebookCellModelFactory)
     protected cellModelFactory: NotebookCellModelFactory;
     readonly autoSave: 'off' | 'afterDelay' | 'onFocusChange' | 'onWindowChange';
@@ -232,6 +236,7 @@ export class NotebookModel implements Saveable, Disposable {
 
     setSelectedCell(cell: NotebookCellModel): void {
         this.selectedCell = cell;
+        this.onDidChangeSelectedCellEmitter.fire(cell);
     }
 
     private addCellOutputListeners(cells: NotebookCellModel[]): void {
@@ -285,7 +290,10 @@ export class NotebookModel implements Saveable, Disposable {
                     cell.changeOutputItems(edit.outputId, !!edit.append, edit.items);
                     break;
                 case CellEditType.Metadata:
-                    this.updateNotebookMetadata(edit.metadata, computeUndoRedo);
+                    this.changeCellMetadata(this.cells[cellIndex], edit.metadata, computeUndoRedo);
+                    break;
+                case CellEditType.PartialMetadata:
+                    this.changeCellMetadataPartial(this.cells[cellIndex], edit.metadata, computeUndoRedo);
                     break;
                 case CellEditType.PartialInternalMetadata:
                     this.changeCellInternalMetadataPartial(this.cells[cellIndex], edit.internalMetadata);
@@ -294,13 +302,18 @@ export class NotebookModel implements Saveable, Disposable {
                     this.changeCellLanguage(this.cells[cellIndex], edit.language, computeUndoRedo);
                     break;
                 case CellEditType.DocumentMetadata:
+                    this.updateNotebookMetadata(edit.metadata, computeUndoRedo);
                     break;
                 case CellEditType.Move:
                     this.moveCellToIndex(cellIndex, edit.length, edit.newIdx, computeUndoRedo);
                     break;
-
+            }
+            // if selected cell is affected update it because it can potentially have been replaced
+            if (cell === this.selectedCell) {
+                this.setSelectedCell(this.cells[cellIndex]);
             }
         }
+
     }
 
     protected async replaceCells(start: number, deleteCount: number, newCells: CellData[], computeUndoRedo: boolean): Promise<void> {
@@ -340,6 +353,10 @@ export class NotebookModel implements Saveable, Disposable {
 
         this.onDidAddOrRemoveCellEmitter.fire({ rawEvent: { kind: NotebookCellsChangeType.ModelChange, changes }, newCellIds: cells.map(cell => cell.handle) });
         this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ModelChange, changes }]);
+        if (cells.length > 0) {
+            this.setSelectedCell(cells[cells.length - 1]);
+            cells[cells.length - 1].requestEdit();
+        }
     }
 
     protected changeCellInternalMetadataPartial(cell: NotebookCellModel, internalMetadata: NullablePartialNotebookCellInternalMetadata): void {
@@ -371,6 +388,38 @@ export class NotebookModel implements Saveable, Disposable {
         this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ChangeDocumentMetadata, metadata: this.metadata }]);
     }
 
+    protected changeCellMetadataPartial(cell: NotebookCellModel, metadata: NullablePartialNotebookCellMetadata, computeUndoRedo: boolean): void {
+        const newMetadata: NotebookCellMetadata = {
+            ...cell.metadata
+        };
+        let k: keyof NullablePartialNotebookCellMetadata;
+        // eslint-disable-next-line guard-for-in
+        for (k in metadata) {
+            const value = metadata[k] ?? undefined;
+            newMetadata[k] = value as unknown;
+        }
+
+        this.changeCellMetadata(cell, newMetadata, computeUndoRedo);
+    }
+
+    protected changeCellMetadata(cell: NotebookCellModel, metadata: NotebookCellMetadata, computeUndoRedo: boolean): void {
+        const triggerDirtyChange = this.isCellMetadataChanged(cell.metadata, metadata);
+
+        if (triggerDirtyChange) {
+            if (computeUndoRedo) {
+                const oldMetadata = cell.metadata;
+                cell.metadata = metadata;
+                this.undoRedoService.pushElement(this.uri,
+                    async () => { cell.metadata = oldMetadata; },
+                    async () => { cell.metadata = metadata; }
+                );
+            }
+        }
+
+        cell.metadata = metadata;
+        this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ChangeCellMetadata, index: this.cells.indexOf(cell), metadata: cell.metadata }]);
+    }
+
     protected changeCellLanguage(cell: NotebookCellModel, languageId: string, computeUndoRedo: boolean): void {
         if (cell.language === languageId) {
             return;
@@ -399,4 +448,18 @@ export class NotebookModel implements Saveable, Disposable {
     protected getCellIndexByHandle(handle: number): number {
         return this.cells.findIndex(c => c.handle === handle);
     }
+
+    protected isCellMetadataChanged(a: NotebookCellMetadata, b: NotebookCellMetadata): boolean {
+        const keys = new Set([...Object.keys(a || {}), ...Object.keys(b || {})]);
+        for (const key of keys) {
+            if (
+                (a[key as keyof NotebookCellMetadata] !== b[key as keyof NotebookCellMetadata])
+            ) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
 }

package/src/common/notebook-common.ts

@@ -179,6 +179,19 @@ export namespace NotebookModelResource {
     }
 }
 
+export interface NotebookCellModelResource {
+    notebookCellModelUri: URI;
+}
+
+export namespace NotebookCellModelResource {
+    export function is(item: unknown): item is NotebookCellModelResource {
+        return isObject<NotebookCellModelResource>(item) && item.notebookCellModelUri instanceof URI;
+    }
+    export function create(uri: URI): NotebookCellModelResource {
+        return { notebookCellModelUri: uri };
+    }
+}
+
 export enum NotebookCellExecutionState {
     Unconfirmed = 1,
     Pending = 2,

package/lib/browser/service/notebook-cell-context-manager.d.ts

@@ -1,16 +0,0 @@
-import { ContextKeyChangeEvent, ContextKeyService, ScopedValueStore } from '@theia/core/lib/browser/context-key-service';
-import { NotebookCellModel } from '../view-model/notebook-cell-model';
-import { Disposable, DisposableCollection, Emitter } from '@theia/core';
-import { NotebookExecutionStateService } from '../service/notebook-execution-state-service';
-export declare class NotebookCellContextManager implements NotebookCellContextManager, Disposable {
-    protected contextKeyService: ContextKeyService;
-    protected readonly executionStateService: NotebookExecutionStateService;
-    protected readonly toDispose: DisposableCollection;
-    protected currentStore: ScopedValueStore;
-    protected currentContext: HTMLLIElement;
-    protected readonly onDidChangeContextEmitter: Emitter<ContextKeyChangeEvent>;
-    readonly onDidChangeContext: import("@theia/core").Event<ContextKeyChangeEvent>;
-    updateCellContext(cell: NotebookCellModel, newHtmlContext: HTMLLIElement): void;
-    dispose(): void;
-}
-//# sourceMappingURL=notebook-cell-context-manager.d.ts.map

package/lib/browser/service/notebook-cell-context-manager.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"notebook-cell-context-manager.d.ts","sourceRoot":"","sources":["../../../src/browser/service/notebook-cell-context-manager.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AACzH,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAExE,OAAO,EAAE,6BAA6B,EAAE,MAAM,6CAA6C,CAAC;AAE5F,qBACa,0BAA2B,YAAW,0BAA0B,EAAE,UAAU;IAC1D,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;IAG1E,SAAS,CAAC,QAAQ,CAAC,qBAAqB,EAAE,6BAA6B,CAAC;IAExE,SAAS,CAAC,QAAQ,CAAC,SAAS,uBAA8B;IAE1D,SAAS,CAAC,YAAY,EAAE,gBAAgB,CAAC;IACzC,SAAS,CAAC,cAAc,EAAE,aAAa,CAAC;IAExC,SAAS,CAAC,QAAQ,CAAC,yBAAyB,iCAAwC;IACpF,QAAQ,CAAC,kBAAkB,qDAAwC;IAEnE,iBAAiB,CAAC,IAAI,EAAE,iBAAiB,EAAE,cAAc,EAAE,aAAa,GAAG,IAAI;IA4B/E,OAAO,IAAI,IAAI;CAIlB"}