@theia/notebook 1.49.1 → 1.50.1

package/src/browser/style/index.css

@@ -171,7 +171,7 @@
 }
 
 .theia-notebook-cell-divider {
-  height: 20px;
+  height: 25px;
   width: 100%;
 }
 
@@ -225,6 +225,7 @@
 
 .theia-notebook-main-toolbar-item-text {
   padding: 0 4px;
+  white-space: nowrap;
 }
 
 .theia-notebook-toolbar-separator {
@@ -280,3 +281,11 @@
   line-height: 22px;
   opacity: 0.7;
 }
+
+.theia-notebook-drag-ghost-image {
+  position: absolute;
+  top: -99999px;
+  left: -99999px;
+  height: 500px;
+  width: 500px;
+}

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

@@ -25,6 +25,7 @@ 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';
+import { NOTEBOOK_CELL_CURSOR_FIRST_LINE, NOTEBOOK_CELL_CURSOR_LAST_LINE } from '../contributions/notebook-context-keys';
 
 interface CellEditorProps {
     notebookModel: NotebookModel,
@@ -54,8 +55,19 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
     override componentDidMount(): void {
         this.disposeEditor();
-        this.toDispose.push(this.props.cell.onWillFocusCellEditor(() => {
+        this.toDispose.push(this.props.cell.onWillFocusCellEditor(focusRequest => {
             this.editor?.getControl().focus();
+            const lineCount = this.editor?.getControl().getModel()?.getLineCount();
+            if (focusRequest && lineCount) {
+                this.editor?.getControl().setPosition(focusRequest === 'lastLine' ?
+                    { lineNumber: lineCount, column: 1 } :
+                    { lineNumber: focusRequest, column: 1 },
+                    'keyboard');
+            }
+            const currentLine = this.editor?.getControl().getPosition()?.lineNumber;
+            this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_FIRST_LINE, currentLine === 1);
+            this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_LAST_LINE, currentLine === lineCount);
+
         }));
 
         this.toDispose.push(this.props.cell.onDidChangeEditorOptions(options => {
@@ -66,11 +78,9 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             this.editor?.setLanguage(language);
         }));
 
-        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();
-                }
+        this.toDispose.push(this.props.notebookModel.onDidChangeSelectedCell(e => {
+            if (e.cell !== this.props.cell && this.editor?.getControl().hasTextFocus()) {
+                this.props.notebookContextManager.context?.focus();
             }
         }));
         if (!this.props.notebookViewportService || (this.container && this.props.notebookViewportService.isElementInViewport(this.container))) {
@@ -119,10 +129,21 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             }));
             this.toDispose.push(this.editor.getControl().onDidFocusEditorText(() => {
                 this.props.notebookContextManager.onDidEditorTextFocus(true);
+                this.props.notebookModel.setSelectedCell(cell, false);
             }));
             this.toDispose.push(this.editor.getControl().onDidBlurEditorText(() => {
                 this.props.notebookContextManager.onDidEditorTextFocus(false);
             }));
+            this.toDispose.push(this.editor.getControl().onDidChangeCursorPosition(e => {
+                if (e.secondaryPositions.length === 0) {
+                    this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_FIRST_LINE, e.position.lineNumber === 1);
+                    this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_LAST_LINE,
+                        e.position.lineNumber === this.editor!.getControl().getModel()!.getLineCount());
+                } else {
+                    this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_FIRST_LINE, false);
+                    this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_LAST_LINE, false);
+                }
+            }));
             if (cell.editing && notebookModel.selectedCell === cell) {
                 this.editor.getControl().focus();
             }

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

@@ -25,6 +25,7 @@ import { NotebookCellActionContribution } from '../contributions/notebook-cell-a
 
 export interface CellRenderer {
     render(notebookData: NotebookModel, cell: NotebookCellModel, index: number): React.ReactNode
+    renderDragImage(cell: NotebookCellModel): HTMLElement
 }
 
 interface CellListProps {
@@ -36,6 +37,7 @@ interface CellListProps {
 
 interface NotebookCellListState {
     selectedCell?: NotebookCellModel;
+    scrollIntoView: boolean;
     dragOverIndicator: { cell: NotebookCellModel, position: 'top' | 'bottom' } | undefined;
 }
 
@@ -43,19 +45,33 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
 
     protected toDispose = new DisposableCollection();
 
+    protected dragGhost: HTMLElement | undefined;
+
     constructor(props: CellListProps) {
         super(props);
-        this.state = { selectedCell: props.notebookModel.selectedCell, dragOverIndicator: undefined };
+        this.state = { selectedCell: props.notebookModel.selectedCell, dragOverIndicator: undefined, scrollIntoView: true };
         this.toDispose.push(props.notebookModel.onDidAddOrRemoveCell(e => {
             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]) });
+                this.setState({
+                    ...this.state,
+                    selectedCell: this.props.notebookModel.cells.find(model => model.handle === e.newCellIds![e.newCellIds!.length - 1]),
+                    scrollIntoView: true
+                });
             } 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),
+                    scrollIntoView: false
+                });
             }
         }));
 
-        this.toDispose.push(props.notebookModel.onDidChangeSelectedCell(cell => {
-            this.setState({ ...this.state, selectedCell: cell });
+        this.toDispose.push(props.notebookModel.onDidChangeSelectedCell(e => {
+            this.setState({
+                ...this.state,
+                selectedCell: e.cell,
+                scrollIntoView: e.scrollIntoView
+            });
         }));
     }
 
@@ -77,13 +93,13 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                         <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);
+                                this.props.notebookModel.setSelectedCell(cell, false);
                             }}
-                            onDragStart={e => this.onDragStart(e, index)}
+                            onDragStart={e => this.onDragStart(e, index, cell)}
                             onDragOver={e => this.onDragOver(e, cell)}
                             onDrop={e => this.onDrop(e, index)}
                             draggable={true}
-                            ref={ref => cell === this.state.selectedCell && ref?.scrollIntoView({ block: 'nearest' })}>
+                            ref={ref => cell === this.state.selectedCell && this.state.scrollIntoView && 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)}
@@ -114,12 +130,22 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
         return renderer.render(this.props.notebookModel, cell, index);
     }
 
-    protected onDragStart(event: React.DragEvent<HTMLLIElement>, index: number): void {
+    protected onDragStart(event: React.DragEvent<HTMLLIElement>, index: number, cell: NotebookCellModel): void {
         event.stopPropagation();
         if (!this.isEnabled()) {
             event.preventDefault();
             return;
         }
+
+        if (this.dragGhost) {
+            this.dragGhost.remove();
+        }
+        this.dragGhost = document.createElement('div');
+        this.dragGhost.classList.add('theia-notebook-drag-ghost-image');
+        this.dragGhost.appendChild(this.props.renderers.get(cell.cellKind)?.renderDragImage(cell) ?? document.createElement('div'));
+        document.body.appendChild(this.dragGhost);
+        event.dataTransfer.setDragImage(this.dragGhost, -10, 0);
+
         event.dataTransfer.setData('text/theia-notebook-cell-index', index.toString());
         event.dataTransfer.setData('text/plain', this.props.notebookModel.cells[index].source);
     }

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

@@ -99,6 +99,13 @@ export class NotebookCodeCellRenderer implements CellRenderer {
         </div >;
     }
 
+    renderDragImage(cell: NotebookCellModel): HTMLElement {
+        const dragImage = document.createElement('div');
+        dragImage.className = 'theia-notebook-drag-image';
+        dragImage.textContent = nls.localize('theia/notebook/dragGhostImage/codeText', 'Code cell selected');
+        return dragImage;
+    }
+
     protected getOrCreateMonacoFontInfo(): BareFontInfo {
         if (!this.fontInfo) {
             this.fontInfo = this.createFontInfo();

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

@@ -15,7 +15,7 @@
 // *****************************************************************************
 import { ArrayUtils, CommandRegistry, CompoundMenuNodeRole, DisposableCollection, MenuModelRegistry, MenuNode, nls } from '@theia/core';
 import * as React from '@theia/core/shared/react';
-import { codicon } from '@theia/core/lib/browser';
+import { codicon, ContextMenuRenderer } from '@theia/core/lib/browser';
 import { NotebookCommands, NotebookMenus } from '../contributions/notebook-actions-contribution';
 import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookKernelService } from '../service/notebook-kernel-service';
@@ -32,6 +32,7 @@ export interface NotebookMainToolbarProps {
     contextKeyService: ContextKeyService;
     editorNode: HTMLElement;
     notebookContextManager: NotebookContextManager;
+    contextMenuRenderer: ContextMenuRenderer;
 }
 
 @injectable()
@@ -41,6 +42,7 @@ export class NotebookMainToolbarRenderer {
     @inject(MenuModelRegistry) protected readonly menuRegistry: MenuModelRegistry;
     @inject(ContextKeyService) protected readonly contextKeyService: ContextKeyService;
     @inject(NotebookContextManager) protected readonly notebookContextManager: NotebookContextManager;
+    @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
 
     render(notebookModel: NotebookModel, editorNode: HTMLElement): React.ReactNode {
         return <NotebookMainToolbar notebookModel={notebookModel}
@@ -49,11 +51,20 @@ export class NotebookMainToolbarRenderer {
             commandRegistry={this.commandRegistry}
             contextKeyService={this.contextKeyService}
             editorNode={editorNode}
-            notebookContextManager={this.notebookContextManager} />;
+            notebookContextManager={this.notebookContextManager}
+            contextMenuRenderer={this.contextMenuRenderer} />;
     }
 }
 
-export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProps, { selectedKernelLabel?: string }> {
+interface NotebookMainToolbarState {
+    selectedKernelLabel?: string;
+    numberOfHiddenItems: number;
+}
+
+export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProps, NotebookMainToolbarState> {
+
+    // The minimum area between items and kernel select before hiding items in a context menu
+    static readonly MIN_FREE_AREA = 10;
 
     protected toDispose = new DisposableCollection();
 
@@ -61,10 +72,18 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_CELL_ADD_GROUP[NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_CELL_ADD_GROUP.length - 1],
         NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_EXECUTION_GROUP[NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_EXECUTION_GROUP.length - 1]];
 
+    protected gapElement: HTMLDivElement | undefined;
+    protected lastGapElementWidth: number = 0;
+
+    protected resizeObserver: ResizeObserver = new ResizeObserver(() => this.calculateItemsToHide());
+
     constructor(props: NotebookMainToolbarProps) {
         super(props);
 
-        this.state = { selectedKernelLabel: props.notebookKernelService.getSelectedOrSuggestedKernel(props.notebookModel)?.label };
+        this.state = {
+            selectedKernelLabel: props.notebookKernelService.getSelectedOrSuggestedKernel(props.notebookModel)?.label,
+            numberOfHiddenItems: 0,
+        };
         this.toDispose.push(props.notebookKernelService.onDidChangeSelectedKernel(event => {
             if (props.notebookModel.uri.isEqual(event.notebook)) {
                 this.setState({ selectedKernelLabel: props.notebookKernelService.getKernel(event.newKernel ?? '')?.label });
@@ -97,10 +116,49 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         this.toDispose.dispose();
     }
 
+    override componentDidUpdate(): void {
+        this.calculateItemsToHide();
+    }
+
+    override componentDidMount(): void {
+        this.calculateItemsToHide();
+    }
+
+    protected calculateItemsToHide(): void {
+        const numberOfMenuItems = this.getMenuItems().length;
+        if (this.gapElement && this.gapElement.getBoundingClientRect().width < NotebookMainToolbar.MIN_FREE_AREA && this.state.numberOfHiddenItems < numberOfMenuItems) {
+            this.setState({ ...this.state, numberOfHiddenItems: this.state.numberOfHiddenItems + 1 });
+            this.lastGapElementWidth = this.gapElement.getBoundingClientRect().width;
+        } else if (this.gapElement && this.gapElement.getBoundingClientRect().width > this.lastGapElementWidth && this.state.numberOfHiddenItems > 0) {
+            this.setState({ ...this.state, numberOfHiddenItems: 0 });
+            this.lastGapElementWidth = this.gapElement.getBoundingClientRect().width;
+        }
+    }
+
+    protected renderContextMenu(event: MouseEvent, menuItems: readonly MenuNode[]): void {
+        const hiddenItems = menuItems.slice(menuItems.length - this.calculateNumberOfHiddenItems(menuItems));
+        const contextMenu = this.props.menuRegistry.getMenu([NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_HIDDEN_ITEMS_CONTEXT_MENU]);
+
+        contextMenu.children.map(item => item.id).forEach(id => contextMenu.removeNode(id));
+        hiddenItems.forEach(item => contextMenu.addNode(item));
+
+        this.props.contextMenuRenderer.render({
+            anchor: event,
+            menuPath: [NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_HIDDEN_ITEMS_CONTEXT_MENU],
+            context: this.props.editorNode,
+            args: [this.props.notebookModel.uri]
+        });
+    }
+
     override render(): React.ReactNode {
+        const menuItems = this.getMenuItems();
         return <div className='theia-notebook-main-toolbar'>
-            {this.getMenuItems().map(item => this.renderMenuItem(item))}
-            <div style={{ flexGrow: 1 }}></div>
+            {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'
                 onClick={() => this.props.commandRegistry.executeCommand(NotebookCommands.SELECT_KERNEL_COMMAND.id, this.props.notebookModel)}>
                 <span className={codicon('server-environment')} />
@@ -108,7 +166,18 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
                     {this.state.selectedKernelLabel ?? nls.localizeByDefault('Select Kernel')}
                 </span>
             </div>
-        </div>;
+        </div >;
+    }
+
+    protected gapElementChanged(element: HTMLDivElement | null): void {
+        if (this.gapElement) {
+            this.resizeObserver.unobserve(this.gapElement);
+        }
+        this.gapElement = element ?? undefined;
+        if (this.gapElement) {
+            this.lastGapElementWidth = this.gapElement.getBoundingClientRect().width;
+            this.resizeObserver.observe(this.gapElement);
+        }
     }
 
     protected renderMenuItem(item: MenuNode, submenu?: string): React.ReactNode {
@@ -157,4 +226,10 @@ export class NotebookMainToolbar extends React.Component<NotebookMainToolbarProp
         menus.filter(item => item.children && item.children.length > 0)
             .forEach(item => this.getAllContextKeys(item.children!, keySet));
     }
+
+    protected calculateNumberOfHiddenItems(allMenuItems: readonly MenuNode[]): number {
+        return this.state.numberOfHiddenItems >= allMenuItems.length ?
+            allMenuItems.length :
+            this.state.numberOfHiddenItems % allMenuItems.length;
+    }
 }

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

@@ -42,6 +42,12 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
             cell={cell} notebookModel={notebookModel} notebookContextManager={this.notebookContextManager} />;
     }
 
+    renderDragImage(cell: NotebookCellModel): HTMLElement {
+        const dragImage = document.createElement('div');
+        dragImage.className = 'theia-notebook-drag-image';
+        dragImage.textContent = nls.localize('theia/notebook/dragGhostImage/markdownText', 'Mardown cell selected');
+        return dragImage;
+    }
 }
 
 interface MarkdownCellProps {

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

@@ -36,6 +36,8 @@ import { LanguageService } from '@theia/core/lib/browser/language-service';
 export const NotebookCellModelFactory = Symbol('NotebookModelFactory');
 export type NotebookCellModelFactory = (props: NotebookCellModelProps) => NotebookCellModel;
 
+export type CellEditorFocusRequest = number | 'lastLine' | undefined;
+
 export function createNotebookCellModelContainer(parent: interfaces.Container, props: NotebookCellModelProps): interfaces.Container {
     const child = parent.createChild();
 
@@ -104,7 +106,7 @@ export class NotebookCellModel implements NotebookCell, Disposable {
     protected readonly onDidRequestCellEditChangeEmitter = new Emitter<boolean>();
     readonly onDidRequestCellEditChange = this.onDidRequestCellEditChangeEmitter.event;
 
-    protected readonly onWillFocusCellEditorEmitter = new Emitter<void>();
+    protected readonly onWillFocusCellEditorEmitter = new Emitter<CellEditorFocusRequest>();
     readonly onWillFocusCellEditor = this.onWillFocusCellEditorEmitter.event;
 
     protected readonly onWillBlurCellEditorEmitter = new Emitter<void>();
@@ -262,7 +264,6 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this.onDidChangeMetadataEmitter.dispose();
         this.onDidChangeInternalMetadataEmitter.dispose();
         this.onDidChangeLanguageEmitter.dispose();
-        this.textModel?.dispose();
         this.toDispose.dispose();
     }
 
@@ -278,9 +279,9 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this.onDidRequestCellEditChangeEmitter.fire(false);
     }
 
-    requestFocusEditor(): void {
+    requestFocusEditor(focusRequest?: CellEditorFocusRequest): void {
         this.requestEdit();
-        this.onWillFocusCellEditorEmitter.fire();
+        this.onWillFocusCellEditorEmitter.fire(focusRequest);
     }
 
     requestBlurEditor(): void {
@@ -354,9 +355,10 @@ export class NotebookCellModel implements NotebookCell, Disposable {
 
         const ref = await this.textModelService.getOrCreateNotebookCellModelReference(this.uri);
         this.textModel = ref.object;
-        this.textModel.onDidChangeContent(e => {
+        this.toDispose.push(ref);
+        this.toDispose.push(this.textModel.onDidChangeContent(e => {
             this.props.source = e.model.getText();
-        });
+        }));
         return ref.object;
     }
 

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

@@ -33,6 +33,7 @@ import { NotebookCellModel, NotebookCellModelFactory } from './notebook-cell-mod
 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';
+import type { NotebookModelResolverService } from '../service/notebook-model-resolver-service';
 
 export const NotebookModelFactory = Symbol('NotebookModelFactory');
 
@@ -45,6 +46,8 @@ export function createNotebookModelContainer(parent: interfaces.Container, props
     return child;
 }
 
+export const NotebookModelResolverServiceProxy = Symbol('NotebookModelResolverServiceProxy');
+
 const NotebookModelProps = Symbol('NotebookModelProps');
 export interface NotebookModelProps {
     data: NotebookData;
@@ -53,6 +56,11 @@ export interface NotebookModelProps {
     serializer: NotebookSerializer;
 }
 
+export interface SelectedCellChangeEvent {
+    cell: NotebookCellModel | undefined;
+    scrollIntoView: boolean;
+}
+
 @injectable()
 export class NotebookModel implements Saveable, Disposable {
 
@@ -68,7 +76,10 @@ export class NotebookModel implements Saveable, Disposable {
     protected readonly onDidChangeContentEmitter = new QueueableEmitter<NotebookContentChangedEvent>();
     readonly onDidChangeContent = this.onDidChangeContentEmitter.event;
 
-    protected readonly onDidChangeSelectedCellEmitter = new Emitter<NotebookCellModel | undefined>();
+    protected readonly onContentChangedEmitter = new Emitter<void>();
+    readonly onContentChanged = this.onContentChangedEmitter.event;
+
+    protected readonly onDidChangeSelectedCellEmitter = new Emitter<SelectedCellChangeEvent>();
     readonly onDidChangeSelectedCell = this.onDidChangeSelectedCellEmitter.event;
 
     protected readonly onDidDisposeEmitter = new Emitter<void>();
@@ -89,15 +100,20 @@ export class NotebookModel implements Saveable, Disposable {
 
     @inject(NotebookCellModelFactory)
     protected cellModelFactory: NotebookCellModelFactory;
-    readonly autoSave: 'off' | 'afterDelay' | 'onFocusChange' | 'onWindowChange';
+
+    @inject(NotebookModelResolverServiceProxy)
+    protected modelResolverService: NotebookModelResolverService;
 
     protected nextHandle: number = 0;
 
     protected _dirty = false;
 
     set dirty(dirty: boolean) {
+        const oldState = this._dirty;
         this._dirty = dirty;
-        this.onDirtyChangedEmitter.fire();
+        if (oldState !== dirty) {
+            this.onDirtyChangedEmitter.fire();
+        }
     }
 
     get dirty(): boolean {
@@ -156,28 +172,20 @@ export class NotebookModel implements Saveable, Disposable {
         this.onDidDisposeEmitter.fire();
     }
 
-    async save(options: SaveOptions): Promise<void> {
+    async save(options?: SaveOptions): Promise<void> {
         this.dirtyCells = [];
         this.dirty = false;
 
-        const serializedNotebook = await this.props.serializer.fromNotebook({
-            cells: this.cells.map(cell => cell.getData()),
-            metadata: this.metadata
-        });
+        const data = this.getData();
+        const serializedNotebook = await this.props.serializer.fromNotebook(data);
         this.fileService.writeFile(this.uri, serializedNotebook);
 
         this.onDidSaveNotebookEmitter.fire();
     }
 
     createSnapshot(): Saveable.Snapshot {
-        const model = this;
         return {
-            read(): string {
-                return JSON.stringify({
-                    cells: model.cells.map(cell => cell.getData()),
-                    metadata: model.metadata
-                });
-            }
+            read: () => JSON.stringify(this.getData())
         };
     }
 
@@ -186,28 +194,20 @@ export class NotebookModel implements Saveable, Disposable {
         if (!rawData) {
             throw new Error('could not read notebook snapshot');
         }
-        const data = JSON.parse(rawData);
-        const cells = data.cells.map((cell: CellData, index: number) => {
-            const handle = this.nextHandle++;
-            return this.cellModelFactory({
-                uri: CellUri.generate(this.uri, handle),
-                handle: handle,
-                source: cell.source,
-                language: cell.language,
-                cellKind: cell.cellKind,
-                outputs: cell.outputs,
-                metadata: cell.metadata,
-                internalMetadata: cell.internalMetadata,
-                collapseState: cell.collapseState
-            });
-        });
-        this.addCellOutputListeners(cells);
-
-        this.metadata = data.metadata;
-
+        const data = JSON.parse(rawData) as NotebookData;
+        this.setData(data);
     }
 
     async revert(options?: Saveable.RevertOptions): Promise<void> {
+        if (!options?.soft) {
+            // Load the data from the file again
+            try {
+                const data = await this.modelResolverService.resolveExistingNotebookData(this.props.resource, this.props.viewType);
+                this.setData(data, false);
+            } catch (err) {
+                console.error('Failed to revert notebook', err);
+            }
+        }
         this.dirty = false;
     }
 
@@ -222,11 +222,23 @@ export class NotebookModel implements Saveable, Disposable {
             this.dirtyCells.splice(this.dirtyCells.indexOf(cell), 1);
         }
 
-        const oldDirtyState = this._dirty;
-        this._dirty = this.dirtyCells.length > 0;
-        if (this.dirty !== oldDirtyState) {
-            this.onDirtyChangedEmitter.fire();
-        }
+        this.dirty = this.dirtyCells.length > 0;
+    }
+
+    setData(data: NotebookData, markDirty = true): void {
+        // Replace all cells in the model
+        this.dirtyCells = [];
+        this.replaceCells(0, this.cells.length, data.cells, false);
+        this.metadata = data.metadata;
+        this.dirty = markDirty;
+        this.onDidChangeContentEmitter.fire();
+    }
+
+    getData(): NotebookData {
+        return {
+            cells: this.cells.map(cell => cell.getData()),
+            metadata: this.metadata
+        };
     }
 
     undo(): void {
@@ -239,10 +251,10 @@ export class NotebookModel implements Saveable, Disposable {
         this.undoRedoService.redo(this.uri);
     }
 
-    setSelectedCell(cell: NotebookCellModel): void {
+    setSelectedCell(cell: NotebookCellModel, scrollIntoView?: boolean): void {
         if (this.selectedCell !== cell) {
             this.selectedCell = cell;
-            this.onDidChangeSelectedCellEmitter.fire(cell);
+            this.onDidChangeSelectedCellEmitter.fire({ cell, scrollIntoView: scrollIntoView ?? true });
         }
     }
 
@@ -271,16 +283,19 @@ export class NotebookModel implements Saveable, Disposable {
                 end: edit.editType === CellEditType.Replace ? edit.index + edit.count : cellIndex,
                 originalIndex: index
             };
-        }).filter(edit => !!edit);
+        });
 
         for (const { edit, cellIndex } of editsWithDetails) {
             const cell = this.cells[cellIndex];
             if (cell) {
                 this.cellDirtyChanged(cell, true);
             }
+
+            let scrollIntoView = true;
             switch (edit.editType) {
                 case CellEditType.Replace:
                     this.replaceCells(edit.index, edit.count, edit.cells, computeUndoRedo);
+                    scrollIntoView = edit.cells.length > 0;
                     break;
                 case CellEditType.Output: {
                     if (edit.append) {
@@ -323,15 +338,15 @@ export class NotebookModel implements Saveable, Disposable {
 
             // if selected cell is affected update it because it can potentially have been replaced
             if (cell === this.selectedCell) {
-                this.setSelectedCell(this.cells[cellIndex]);
+                this.setSelectedCell(this.cells[Math.min(cellIndex, this.cells.length - 1)], scrollIntoView);
             }
         }
 
         this.onDidChangeContentEmitter.fire();
-
+        this.onContentChangedEmitter.fire();
     }
 
-    protected async replaceCells(start: number, deleteCount: number, newCells: CellData[], computeUndoRedo: boolean): Promise<void> {
+    protected replaceCells(start: number, deleteCount: number, newCells: CellData[], computeUndoRedo: boolean): void {
         const cells = newCells.map(cell => {
             const handle = this.nextHandle++;
             return this.cellModelFactory({
@@ -362,10 +377,6 @@ export class NotebookModel implements Saveable, Disposable {
                 async () => this.replaceCells(start, deleteCount, newCells, false));
         }
 
-        // Ensure that all text model have been created
-        // Otherwise we run into a race condition once we fire `onDidChangeContent`
-        await Promise.all(cells.map(cell => cell.resolveTextModel()));
-
         this.onDidAddOrRemoveCellEmitter.fire({ rawEvent: { kind: NotebookCellsChangeType.ModelChange, changes }, newCellIds: cells.map(cell => cell.handle) });
         this.onDidChangeContentEmitter.queue({ kind: NotebookCellsChangeType.ModelChange, changes });
         if (cells.length > 0) {

package/src/common/notebook-common.ts

@@ -273,7 +273,7 @@ export namespace CellUri {
         const s = handle.toString(_radix);
         const p = s.length < _lengths.length ? _lengths[s.length - 1] : 'z';
 
-        const fragment = `${p}${s}s${Buffer.from(BinaryBuffer.fromString(notebook.scheme).buffer).toString('base64')} `;
+        const fragment = `${p}${s}s${Buffer.from(BinaryBuffer.fromString(notebook.scheme).buffer).toString('base64')}`;
         return notebook.withScheme(cellUriScheme).withFragment(fragment);
     }