@theia/notebook 1.53.2 → 1.55.0-next.14

package/src/browser/notebook-editor-widget.tsx

@@ -18,7 +18,7 @@ import * as React from '@theia/core/shared/react';
 import { CommandRegistry, MenuModelRegistry, URI } from '@theia/core';
 import { ReactWidget, Navigatable, SaveableSource, Message, DelegatingSaveable, lock, unlock, animationFrame } from '@theia/core/lib/browser';
 import { ReactNode } from '@theia/core/shared/react';
-import { CellKind } from '../common';
+import { CellKind, NotebookCellsChangeType } from '../common';
 import { CellRenderer as CellRenderer, NotebookCellListView } from './view/notebook-cell-list-view';
 import { NotebookCodeCellRenderer } from './view/notebook-code-cell-view';
 import { NotebookMarkdownCellRenderer } from './view/notebook-markdown-cell-view';
@@ -35,6 +35,8 @@ import { NotebookViewportService } from './view/notebook-viewport-service';
 import { NotebookCellCommands } from './contributions/notebook-cell-actions-contribution';
 import { NotebookFindWidget } from './view/notebook-find-widget';
 import debounce = require('lodash/debounce');
+import { CellOutputWebview, CellOutputWebviewFactory } from './renderers/cell-output-webview';
+import { NotebookCellOutputModel } from './view-model/notebook-cell-output-model';
 const PerfectScrollbar = require('react-perfect-scrollbar');
 
 export const NotebookEditorWidgetContainerFactory = Symbol('NotebookEditorWidgetContainerFactory');
@@ -44,6 +46,9 @@ export function createNotebookEditorWidgetContainer(parent: interfaces.Container
 
     child.bind(NotebookEditorProps).toConstantValue(props);
 
+    const cellOutputWebviewFactory: CellOutputWebviewFactory = parent.get(CellOutputWebviewFactory);
+    child.bind(CellOutputWebview).toConstantValue(cellOutputWebviewFactory());
+
     child.bind(NotebookContextManager).toSelf().inSingletonScope();
     child.bind(NotebookMainToolbarRenderer).toSelf().inSingletonScope();
     child.bind(NotebookCellToolbarFactory).toSelf().inSingletonScope();
@@ -104,6 +109,9 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     @inject(NotebookViewportService)
     protected readonly viewportService: NotebookViewportService;
 
+    @inject(CellOutputWebview)
+    protected readonly cellOutputWebview: CellOutputWebview;
+
     protected readonly onDidChangeModelEmitter = new Emitter<void>();
     readonly onDidChangeModel = this.onDidChangeModelEmitter.event;
 
@@ -173,11 +181,18 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
                 this.commandRegistry.executeCommand(NotebookCellCommands.EDIT_COMMAND.id, model, model.cells[0]);
                 model.setSelectedCell(model.cells[0]);
             }
+            model.onDidChangeContent(changeEvents => {
+                const cellEvent = changeEvents.filter(event => event.kind === NotebookCellsChangeType.Move || event.kind === NotebookCellsChangeType.ModelChange);
+                if (cellEvent.length > 0) {
+                    this.cellOutputWebview.cellsChanged(cellEvent);
+                }
+            });
         });
     }
 
     protected async waitForData(): Promise<NotebookModel> {
         this._model = await this.props.notebookData;
+        this.cellOutputWebview.init(this._model, this);
         this.saveable.delegate = this._model;
         this.toDispose.push(this._model);
         this.toDispose.push(this._model.onDidChangeContent(() => {
@@ -212,7 +227,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
 
     protected override onActivateRequest(msg: Message): void {
         super.onActivateRequest(msg);
-        this.node.focus();
+        (this.node.getElementsByClassName('theia-notebook-main-container')[0] as HTMLDivElement)?.focus();
     }
 
     getResourceUri(): URI | undefined {
@@ -233,7 +248,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
 
     protected render(): ReactNode {
         if (this._model) {
-            return <div className='theia-notebook-main-container'>
+            return <div className='theia-notebook-main-container' tabIndex={-1}>
                 <div className='theia-notebook-overlay'>
                     <NotebookFindWidget
                         ref={this._findWidgetRef}
@@ -261,17 +276,20 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
                     <PerfectScrollbar className='theia-notebook-scroll-container'
                         ref={this.scrollBarRef}
                         onScrollY={(e: HTMLDivElement) => this.viewportService.onScroll(e)}>
-                        <NotebookCellListView renderers={this.renderers}
-                            notebookModel={this._model}
-                            notebookContext={this.notebookContextManager}
-                            toolbarRenderer={this.cellToolbarFactory}
-                            commandRegistry={this.commandRegistry}
-                            menuRegistry={this.menuRegistry} />
+                        <div className='theia-notebook-scroll-area'>
+                            {this.cellOutputWebview.render()}
+                            <NotebookCellListView renderers={this.renderers}
+                                notebookModel={this._model}
+                                notebookContext={this.notebookContextManager}
+                                toolbarRenderer={this.cellToolbarFactory}
+                                commandRegistry={this.commandRegistry}
+                                menuRegistry={this.menuRegistry} />
+                        </div>
                     </PerfectScrollbar>
                 </div>
             </div>;
         } else {
-            return <div className='theia-notebook-main-container'>
+            return <div className='theia-notebook-main-container' tabIndex={-1}>
                 <div className='theia-notebook-main-loading-indicator'></div>
             </div>;
         }
@@ -282,6 +300,12 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         this.notebookEditorService.removeNotebookEditor(this);
     }
 
+    requestOuputPresentationChange(cellHandle: number, output?: NotebookCellOutputModel): void {
+        if (output) {
+            this.cellOutputWebview.requestOutputPresentationUpdate(cellHandle, output);
+        }
+    }
+
     postKernelMessage(message: unknown): void {
         this.onDidPostKernelMessageEmitter.fire(message);
     }
@@ -307,6 +331,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     }
 
     override dispose(): void {
+        this.cellOutputWebview.dispose();
         this.notebookContextManager.dispose();
         this.onDidChangeModelEmitter.dispose();
         this.onDidPostKernelMessageEmitter.dispose();

package/src/browser/notebook-frontend-module.ts

@@ -16,7 +16,9 @@
 import '../../src/browser/style/index.css';
 
 import { ContainerModule } from '@theia/core/shared/inversify';
-import { FrontendApplicationContribution, KeybindingContribution, LabelProviderContribution, OpenHandler, UndoRedoHandler, WidgetFactory } from '@theia/core/lib/browser';
+import {
+    FrontendApplicationContribution, KeybindingContribution, LabelProviderContribution, OpenHandler, UndoRedoHandler, WidgetFactory, WidgetStatusBarContribution
+} from '@theia/core/lib/browser';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 import { NotebookOpenHandler } from './notebook-open-handler';
 import { CommandContribution, MenuContribution, ResourceResolver, } from '@theia/core';
@@ -48,6 +50,7 @@ import { bindNotebookPreferences } from './contributions/notebook-preferences';
 import { NotebookOptionsService } from './service/notebook-options';
 import { NotebookUndoRedoHandler } from './contributions/notebook-undo-redo-handler';
 import { NotebookStatusBarContribution } from './contributions/notebook-status-bar-contribution';
+import { NotebookCellEditorService } from './service/notebook-cell-editor-service';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(NotebookColorContribution).toSelf().inSingletonScope();
@@ -70,6 +73,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(NotebookKernelHistoryService).toSelf().inSingletonScope();
     bind(NotebookKernelQuickPickService).toSelf().inSingletonScope();
     bind(NotebookClipboardService).toSelf().inSingletonScope();
+    bind(NotebookCellEditorService).toSelf().inSingletonScope();
 
     bind(NotebookCellResourceResolver).toSelf().inSingletonScope();
     bind(ResourceResolver).toService(NotebookCellResourceResolver);
@@ -115,5 +119,5 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(UndoRedoHandler).toService(NotebookUndoRedoHandler);
 
     bind(NotebookStatusBarContribution).toSelf().inSingletonScope();
-    bind(FrontendApplicationContribution).toService(NotebookStatusBarContribution);
+    bind(WidgetStatusBarContribution).toService(NotebookStatusBarContribution);
 });

package/src/browser/notebook-open-handler.ts

@@ -15,8 +15,8 @@
 // *****************************************************************************
 
 import { URI, MaybePromise, Disposable } from '@theia/core';
-import { NavigatableWidgetOpenHandler, WidgetOpenerOptions } from '@theia/core/lib/browser';
-import { injectable } from '@theia/core/shared/inversify';
+import { NavigatableWidgetOpenHandler, PreferenceService, WidgetOpenerOptions, getDefaultHandler, defaultHandlerPriority } from '@theia/core/lib/browser';
+import { inject, injectable } from '@theia/core/shared/inversify';
 import { NotebookFileSelector, NotebookTypeDescriptor } from '../common/notebook-protocol';
 import { NotebookEditorWidget } from './notebook-editor-widget';
 import { match } from '@theia/core/lib/common/glob';
@@ -33,6 +33,9 @@ export class NotebookOpenHandler extends NavigatableWidgetOpenHandler<NotebookEd
 
     protected notebookTypes: NotebookTypeDescriptor[] = [];
 
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
     registerNotebookType(notebookType: NotebookTypeDescriptor): Disposable {
         this.notebookTypes.push(notebookType);
         return Disposable.create(() => {
@@ -41,15 +44,16 @@ export class NotebookOpenHandler extends NavigatableWidgetOpenHandler<NotebookEd
     }
 
     canHandle(uri: URI, options?: NotebookWidgetOpenerOptions): MaybePromise<number> {
+        const defaultHandler = getDefaultHandler(uri, this.preferenceService);
         if (options?.notebookType) {
-            return this.canHandleType(uri, this.notebookTypes.find(type => type.type === options.notebookType));
+            return this.canHandleType(uri, this.notebookTypes.find(type => type.type === options.notebookType), defaultHandler);
         }
-        return Math.max(...this.notebookTypes.map(type => this.canHandleType(uri, type)));
+        return Math.max(...this.notebookTypes.map(type => this.canHandleType(uri, type), defaultHandler));
     }
 
-    canHandleType(uri: URI, notebookType?: NotebookTypeDescriptor): number {
+    canHandleType(uri: URI, notebookType?: NotebookTypeDescriptor, defaultHandler?: string): number {
         if (notebookType?.selector && this.matches(notebookType.selector, uri)) {
-            return this.calculatePriority(notebookType);
+            return notebookType.type === defaultHandler ? defaultHandlerPriority : this.calculatePriority(notebookType);
         } else {
             return 0;
         }
@@ -93,7 +97,9 @@ export class NotebookOpenHandler extends NavigatableWidgetOpenHandler<NotebookEd
                 ...widgetOptions
             };
         }
-        const notebookType = this.findHighestPriorityType(uri);
+        const defaultHandler = getDefaultHandler(uri, this.preferenceService);
+        const notebookType = this.notebookTypes.find(type => type.type === defaultHandler)
+            || this.findHighestPriorityType(uri);
         if (!notebookType) {
             throw new Error('No notebook types registered for uri: ' + uri.toString());
         }

package/src/browser/renderers/cell-output-webview.ts

@@ -14,20 +14,38 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Disposable } from '@theia/core';
-import { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { Disposable, Event } from '@theia/core';
 import { NotebookModel } from '../view-model/notebook-model';
+import { NotebookEditorWidget } from '../notebook-editor-widget';
+import { NotebookContentChangedEvent } from '../notebook-types';
+import { NotebookCellOutputModel } from '../view-model/notebook-cell-output-model';
+import { NotebookCellModel } from '../view-model/notebook-cell-model';
 
 export const CellOutputWebviewFactory = Symbol('outputWebviewFactory');
+export const CellOutputWebview = Symbol('outputWebview');
 
-export type CellOutputWebviewFactory = (cell: NotebookCellModel, notebook: NotebookModel) => Promise<CellOutputWebview>;
+export type CellOutputWebviewFactory = () => Promise<CellOutputWebview>;
+
+export interface OutputRenderEvent {
+    cellHandle: number;
+    outputId: string;
+    outputHeight: number;
+}
 
 export interface CellOutputWebview extends Disposable {
 
     readonly id: string;
 
+    init(notebook: NotebookModel, editor: NotebookEditorWidget): void;
+
     render(): React.ReactNode;
 
+    setCellHeight(cell: NotebookCellModel, height: number): void;
+    cellsChanged(cellEvent: NotebookContentChangedEvent[]): void;
+    onDidRenderOutput: Event<OutputRenderEvent>
+
+    requestOutputPresentationUpdate(cellHandle: number, output: NotebookCellOutputModel): void;
+
     attachWebview(): void;
     isAttached(): boolean
 }

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

@@ -0,0 +1,74 @@
+// *****************************************************************************
+// 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 { Emitter, URI } from '@theia/core';
+import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
+import { NotebookEditorWidgetService } from './notebook-editor-widget-service';
+import { CellUri } from '../../common';
+
+@injectable()
+export class NotebookCellEditorService {
+
+    @inject(NotebookEditorWidgetService)
+    protected readonly notebookEditorWidgetService: NotebookEditorWidgetService;
+
+    protected onDidChangeCellEditorsEmitter = new Emitter<void>();
+    readonly onDidChangeCellEditors = this.onDidChangeCellEditorsEmitter.event;
+
+    protected onDidChangeFocusedCellEditorEmitter = new Emitter<SimpleMonacoEditor | undefined>();
+    readonly onDidChangeFocusedCellEditor = this.onDidChangeFocusedCellEditorEmitter.event;
+
+    protected currentActiveCell?: SimpleMonacoEditor;
+
+    protected currentCellEditors: Map<string, SimpleMonacoEditor> = new Map();
+
+    @postConstruct()
+    protected init(): void {
+        this.notebookEditorWidgetService.onDidChangeCurrentEditor(editor => {
+            // if defocus notebook editor or another notebook editor is focused, clear the active cell
+            if (!editor || (this.currentActiveCell && CellUri.parse(this.currentActiveCell.uri)?.notebook.toString() !== editor?.model?.uri.toString())) {
+                this.currentActiveCell = undefined;
+                this.onDidChangeFocusedCellEditorEmitter.fire(undefined);
+            }
+        });
+    }
+
+    get allCellEditors(): SimpleMonacoEditor[] {
+        return Array.from(this.currentCellEditors.values());
+    }
+
+    editorCreated(uri: URI, editor: SimpleMonacoEditor): void {
+        this.currentCellEditors.set(uri.toString(), editor);
+        this.onDidChangeCellEditorsEmitter.fire();
+    }
+
+    editorDisposed(uri: URI): void {
+        this.currentCellEditors.delete(uri.toString());
+        this.onDidChangeCellEditorsEmitter.fire();
+    }
+
+    editorFocusChanged(editor?: SimpleMonacoEditor): void {
+        if (editor) {
+            this.currentActiveCell = editor;
+            this.onDidChangeFocusedCellEditorEmitter.fire(editor);
+        }
+    }
+
+    getActiveCell(): SimpleMonacoEditor | undefined {
+        return this.currentActiveCell;
+    }
+}

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

@@ -45,13 +45,23 @@ export class NotebookEditorWidgetService {
     protected readonly onDidChangeFocusedEditorEmitter = new Emitter<NotebookEditorWidget | undefined>();
     readonly onDidChangeFocusedEditor = this.onDidChangeFocusedEditorEmitter.event;
 
+    protected readonly onDidChangeCurrentEditorEmitter = new Emitter<NotebookEditorWidget | undefined>();
+    readonly onDidChangeCurrentEditor = this.onDidChangeCurrentEditorEmitter.event;
+
     focusedEditor?: NotebookEditorWidget = undefined;
 
+    currentEditor?: NotebookEditorWidget = undefined;
+
     @postConstruct()
     protected init(): void {
         this.applicationShell.onDidChangeActiveWidget(event => {
             this.notebookEditorFocusChanged(event.newValue as NotebookEditorWidget, event.newValue instanceof NotebookEditorWidget);
         });
+        this.applicationShell.onDidChangeCurrentWidget(event => {
+            if (event.newValue instanceof NotebookEditorWidget || event.oldValue instanceof NotebookEditorWidget) {
+                this.currentNotebookEditorChanged(event.newValue);
+            }
+        });
     }
 
     // --- editor management
@@ -98,4 +108,14 @@ export class NotebookEditorWidgetService {
         }
     }
 
+    currentNotebookEditorChanged(newEditor: unknown): void {
+        if (newEditor instanceof NotebookEditorWidget) {
+            this.currentEditor = newEditor;
+            this.onDidChangeCurrentEditorEmitter.fire(newEditor);
+        } else if (this.currentEditor?.isDisposed || !this.currentEditor?.isVisible) {
+            this.currentEditor = undefined;
+            this.onDidChangeCurrentEditorEmitter.fire(undefined);
+        }
+    }
+
 }

package/src/browser/style/index.css

@@ -20,10 +20,24 @@
 }
 
 .theia-notebook-cell-list {
+  position: absolute;
+  top: 0;
+  width: 100%;
   overflow-y: auto;
   list-style: none;
   padding-left: 0px;
   background-color: var(--theia-notebook-editorBackground);
+  z-index: 0;
+  pointer-events: none;
+}
+
+
+.theia-notebook-cell-output-webview {
+  padding: 5px 0px;
+  margin: 0px 15px 0px 50px;
+  width: calc(100% - 60px);
+  position: absolute;
+  z-index: 0;
 }
 
 .theia-notebook-cell {
@@ -69,7 +83,8 @@
 /* Rendered Markdown Content */
 
 .theia-notebook-markdown-content {
-  padding: 8px 16px 8px 36px;
+  pointer-events: all;
+  padding: 8px 16px 8px 0px;
   font-size: var(--theia-notebook-markdown-size);
 }
 
@@ -87,9 +102,13 @@
   padding-bottom: 0;
 }
 
+.theia-notebook-markdown-sidebar {
+  width: 35px;
+}
+
 /* Markdown cell edit mode */
 .theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.theia-notebook-cell-editor) {
-  margin-left: 36px;
+  pointer-events: all;
   margin-right: var(--theia-notebook-cell-editor-margin-right);
   outline: 1px solid var(--theia-notebook-cellBorderColor);
 }
@@ -108,13 +127,15 @@
 }
 
 .theia-notebook-cell-editor-container {
+  pointer-events: all;
   width: calc(100% - 46px);
   flex: 1;
   outline: 1px solid var(--theia-notebook-cellBorderColor);
   margin: 0px 16px 0px 10px;
 }
 
-.theia-notebook-cell.focused .theia-notebook-cell-editor-container {
+/* Only mark an editor cell focused if the editor has focus */
+.theia-notebook-cell-editor-container:has(.monaco-editor.focused) {
   outline-color: var(--theia-notebook-focusedEditorBorder);
 }
 
@@ -148,6 +169,7 @@
 }
 
 .theia-notebook-cell-toolbar {
+  pointer-events: all;
   border: 1px solid var(--theia-notebook-cellToolbarSeparator);
   display: flex;
   position: absolute;
@@ -160,11 +182,15 @@
   display: flex;
   flex-direction: column;
   padding: 2px;
-  background-color: var(--theia-editor-background);
   flex-grow: 1;
 }
 
 .theia-notebook-cell-sidebar {
+  pointer-events: all;
+  display: flex;
+}
+
+.theia-notebook-cell-sidebar-actions {
   display: flex;
   flex-direction: column;
 }
@@ -193,6 +219,7 @@
 }
 
 .theia-notebook-cell-divider {
+  pointer-events: all;
   height: 25px;
   width: 100%;
 }
@@ -209,6 +236,10 @@
   overflow: hidden;
 }
 
+.theia-notebook-main-container:focus {
+  outline: none;
+}
+
 .theia-notebook-main-container .theia-notebook-main-loading-indicator {
   /* `progress-animation` is defined in `packages/core/src/browser/style/progress-bar.css` */
   animation: progress-animation 1.8s 0s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -298,19 +329,19 @@
   margin: 1px 0 0 4px;
 }
 
-.theia-notebook-cell-output-webview {
-  padding: 5px 0px;
-  margin: 0px 15px 0px 9px;
-  width: 100%;
-}
-
 .theia-notebook-cell-drop-indicator {
   height: 2px;
   background-color: var(--theia-notebook-focusedCellBorder);
   width: 100%;
 }
 
+.theia-notebook-collapsed-output-container {
+  width: 0;
+  overflow: visible;
+}
+
 .theia-notebook-collapsed-output {
+  text-wrap: nowrap;
   padding: 4px 8px;
   color: var(--theia-foreground);
   margin-left: 30px;

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

@@ -30,13 +30,15 @@ import { EditorExtensionsRegistry } from '@theia/monaco-editor-core/esm/vs/edito
 import { ModelDecorationOptions } from '@theia/monaco-editor-core/esm/vs/editor/common/model/textModel';
 import { IModelDeltaDecoration, OverviewRulerLane, TrackedRangeStickiness } from '@theia/monaco-editor-core/esm/vs/editor/common/model';
 import { animationFrame } from '@theia/core/lib/browser';
+import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
 
 interface CellEditorProps {
-    notebookModel: NotebookModel,
-    cell: NotebookCellModel,
-    monacoServices: MonacoEditorServices,
+    notebookModel: NotebookModel;
+    cell: NotebookCellModel;
+    monacoServices: MonacoEditorServices;
     notebookContextManager: NotebookContextManager;
-    notebookViewportService?: NotebookViewportService,
+    notebookCellEditorService: NotebookCellEditorService;
+    notebookViewportService?: NotebookViewportService;
     fontInfo?: BareFontInfo;
 }
 
@@ -153,6 +155,9 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
     }
 
     protected disposeEditor(): void {
+        if (this.editor) {
+            this.props.notebookCellEditorService.editorDisposed(this.editor.uri);
+        }
         this.toDispose.dispose();
         this.toDispose = new DisposableCollection();
     }
@@ -197,7 +202,14 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             }));
             this.toDispose.push(this.editor.getControl().onDidFocusEditorText(() => {
                 this.props.notebookModel.setSelectedCell(cell, false);
+                this.props.notebookCellEditorService.editorFocusChanged(this.editor);
+            }));
+            this.toDispose.push(this.editor.getControl().onDidBlurEditorText(() => {
+                if (this.props.notebookCellEditorService.getActiveCell()?.uri.toString() === this.props.cell.uri.toString()) {
+                    this.props.notebookCellEditorService.editorFocusChanged(undefined);
+                }
             }));
+
             this.toDispose.push(this.editor.getControl().onDidChangeCursorSelection(e => {
                 const selectedText = this.editor!.getControl().getModel()!.getValueInRange(e.selection);
                 this.props.notebookModel.selectedText = selectedText;
@@ -212,10 +224,11 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
                     this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_LAST_LINE, false);
                 }
             }));
+            this.props.notebookCellEditorService.editorCreated(uri, this.editor);
+            this.setMatches();
             if (cell.editing && notebookModel.selectedCell === cell) {
                 this.editor.getControl().focus();
             }
-            this.setMatches();
         }
     }