@theia/notebook 1.55.0-next.4 → 1.55.0

package/src/browser/contributions/notebook-status-bar-contribution.ts

@@ -14,10 +14,9 @@
 // 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 { FrontendApplicationContribution, StatusBar, StatusBarAlignment } from '@theia/core/lib/browser';
+import { injectable } from '@theia/core/shared/inversify';
+import { StatusBar, StatusBarAlignment, Widget, WidgetStatusBarContribution } from '@theia/core/lib/browser';
 import { Disposable } from '@theia/core/lib/common';
-import { NotebookEditorWidgetService } from '../service/notebook-editor-widget-service';
 import { NotebookEditorWidget } from '../notebook-editor-widget';
 import { nls } from '@theia/core';
 import { NotebookCommands } from './notebook-actions-contribution';
@@ -25,53 +24,43 @@ import { NotebookCommands } from './notebook-actions-contribution';
 export const NOTEBOOK_CELL_SELECTION_STATUS_BAR_ID = 'notebook-cell-selection-position';
 
 @injectable()
-export class NotebookStatusBarContribution implements FrontendApplicationContribution {
+export class NotebookStatusBarContribution implements WidgetStatusBarContribution<NotebookEditorWidget> {
 
-    @inject(StatusBar) protected readonly statusBar: StatusBar;
-    @inject(NotebookEditorWidgetService) protected readonly editorWidgetService: NotebookEditorWidgetService;
+    protected onDeactivate: Disposable | undefined;
 
-    protected currentCellSelectionListener: Disposable | undefined;
-    protected lastFocusedEditor: NotebookEditorWidget | undefined;
+    canHandle(widget: Widget): widget is NotebookEditorWidget {
+        return widget instanceof NotebookEditorWidget;
+    }
 
-    onStart(): void {
-        this.editorWidgetService.onDidChangeFocusedEditor(editor => {
-            this.currentCellSelectionListener?.dispose();
-            this.currentCellSelectionListener = editor?.model?.onDidChangeSelectedCell(() =>
-                this.updateStatusbar(editor)
-            );
-            editor?.onDidDispose(() => {
-                this.lastFocusedEditor = undefined;
-                this.updateStatusbar();
+    activate(statusBar: StatusBar, widget: NotebookEditorWidget): void {
+        widget.ready.then(model => {
+            this.onDeactivate = model.onDidChangeSelectedCell(() => {
+                this.updateStatusbar(statusBar, widget);
             });
-            this.updateStatusbar(editor);
-            this.lastFocusedEditor = editor;
         });
-        if (this.editorWidgetService.focusedEditor) {
-            this.updateStatusbar();
-        }
+        this.updateStatusbar(statusBar, widget);
     }
 
-    protected async updateStatusbar(editor?: NotebookEditorWidget): Promise<void> {
-        if ((!editor && !this.lastFocusedEditor?.isVisible) || editor?.model?.cells.length === 0) {
-            this.statusBar.removeElement(NOTEBOOK_CELL_SELECTION_STATUS_BAR_ID);
-            return;
-        }
+    deactivate(statusBar: StatusBar): void {
+        this.onDeactivate?.dispose();
+        this.updateStatusbar(statusBar);
+    }
 
-        await editor?.ready;
-        if (!editor?.model) {
+    protected async updateStatusbar(statusBar: StatusBar, editor?: NotebookEditorWidget): Promise<void> {
+        const model = await editor?.ready;
+        if (!model || model.cells.length === 0 || !model.selectedCell) {
+            statusBar.removeElement(NOTEBOOK_CELL_SELECTION_STATUS_BAR_ID);
             return;
         }
 
-        const selectedCellIndex = editor.model.selectedCell ? editor.model.cells.indexOf(editor.model.selectedCell) + 1 : '';
+        const selectedCellIndex = model.cells.indexOf(model.selectedCell) + 1;
 
-        this.statusBar.setElement(NOTEBOOK_CELL_SELECTION_STATUS_BAR_ID, {
-            text: nls.localizeByDefault('Cell {0} of {1}', selectedCellIndex, editor.model.cells.length),
+        statusBar.setElement(NOTEBOOK_CELL_SELECTION_STATUS_BAR_ID, {
+            text: nls.localizeByDefault('Cell {0} of {1}', selectedCellIndex, model.cells.length),
             alignment: StatusBarAlignment.RIGHT,
             priority: 100,
             command: NotebookCommands.CENTER_ACTIVE_CELL.id,
             arguments: [editor]
         });
-
     }
-
 }

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(() => {
@@ -261,12 +276,15 @@ 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>;
@@ -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';
@@ -49,6 +51,7 @@ 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';
+import { NotebookCellStatusBarService } from './service/notebook-cell-status-bar-service';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(NotebookColorContribution).toSelf().inSingletonScope();
@@ -72,6 +75,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(NotebookKernelQuickPickService).toSelf().inSingletonScope();
     bind(NotebookClipboardService).toSelf().inSingletonScope();
     bind(NotebookCellEditorService).toSelf().inSingletonScope();
+    bind(NotebookCellStatusBarService).toSelf().inSingletonScope();
 
     bind(NotebookCellResourceResolver).toSelf().inSingletonScope();
     bind(ResourceResolver).toService(NotebookCellResourceResolver);
@@ -117,5 +121,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/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

@@ -15,12 +15,17 @@
 // *****************************************************************************
 
 import { Emitter, URI } from '@theia/core';
-import { injectable } from '@theia/core/shared/inversify';
+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;
 
@@ -31,6 +36,17 @@ export class NotebookCellEditorService {
 
     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());
     }
@@ -46,8 +62,10 @@ export class NotebookCellEditorService {
     }
 
     editorFocusChanged(editor?: SimpleMonacoEditor): void {
-        this.currentActiveCell = editor;
-        this.onDidChangeFocusedCellEditorEmitter.fire(editor);
+        if (editor) {
+            this.currentActiveCell = editor;
+            this.onDidChangeFocusedCellEditorEmitter.fire(editor);
+        }
     }
 
     getActiveCell(): SimpleMonacoEditor | undefined {

package/src/browser/service/notebook-cell-status-bar-service.ts

@@ -0,0 +1,94 @@
+// *****************************************************************************
+// 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
+// *****************************************************************************
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { CancellationToken, Command, Disposable, Emitter, Event, URI } from '@theia/core';
+import { CellStatusbarAlignment } from '../../common';
+import { ThemeColor } from '@theia/core/lib/common/theme';
+import { AccessibilityInformation } from '@theia/core/lib/common/accessibility';
+import { injectable } from '@theia/core/shared/inversify';
+import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
+
+export interface NotebookCellStatusBarItem {
+    readonly alignment: CellStatusbarAlignment;
+    readonly priority?: number;
+    readonly text: string;
+    readonly color?: string | ThemeColor;
+    readonly backgroundColor?: string | ThemeColor;
+    readonly tooltip?: string | MarkdownString;
+    readonly command?: string | (Command & { arguments?: unknown[] });
+    readonly accessibilityInformation?: AccessibilityInformation;
+    readonly opacity?: string;
+    readonly onlyShowWhenActive?: boolean;
+}
+export interface NotebookCellStatusBarItemList {
+    items: NotebookCellStatusBarItem[];
+    dispose?(): void;
+}
+
+export interface NotebookCellStatusBarItemProvider {
+    viewType: string;
+    onDidChangeStatusBarItems?: Event<void>;
+    provideCellStatusBarItems(uri: URI, index: number, token: CancellationToken): Promise<NotebookCellStatusBarItemList | undefined>;
+}
+
+@injectable()
+export class NotebookCellStatusBarService implements Disposable {
+
+    protected readonly onDidChangeProvidersEmitter = new Emitter<void>();
+    readonly onDidChangeProviders: Event<void> = this.onDidChangeProvidersEmitter.event;
+
+    protected readonly onDidChangeItemsEmitter = new Emitter<void>();
+    readonly onDidChangeItems: Event<void> = this.onDidChangeItemsEmitter.event;
+
+    protected readonly providers: NotebookCellStatusBarItemProvider[] = [];
+
+    registerCellStatusBarItemProvider(provider: NotebookCellStatusBarItemProvider): Disposable {
+        this.providers.push(provider);
+        let changeListener: Disposable | undefined;
+        if (provider.onDidChangeStatusBarItems) {
+            changeListener = provider.onDidChangeStatusBarItems(() => this.onDidChangeItemsEmitter.fire());
+        }
+
+        this.onDidChangeProvidersEmitter.fire();
+
+        return Disposable.create(() => {
+            changeListener?.dispose();
+            const idx = this.providers.findIndex(p => p === provider);
+            this.providers.splice(idx, 1);
+        });
+    }
+
+    async getStatusBarItemsForCell(notebookUri: URI, cellIndex: number, viewType: string, token: CancellationToken): Promise<NotebookCellStatusBarItemList[]> {
+        const providers = this.providers.filter(p => p.viewType === viewType || p.viewType === '*');
+        return Promise.all(providers.map(async p => {
+            try {
+                return await p.provideCellStatusBarItems(notebookUri, cellIndex, token) ?? { items: [] };
+            } catch (e) {
+                console.error(e);
+                return { items: [] };
+            }
+        }));
+    }
+
+    dispose(): void {
+        this.onDidChangeItemsEmitter.dispose();
+        this.onDidChangeProvidersEmitter.dispose();
+    }
+}

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,6 +127,7 @@
 }
 
 .theia-notebook-cell-editor-container {
+  pointer-events: all;
   width: calc(100% - 46px);
   flex: 1;
   outline: 1px solid var(--theia-notebook-cellBorderColor);
@@ -149,6 +169,7 @@
 }
 
 .theia-notebook-cell-toolbar {
+  pointer-events: all;
   border: 1px solid var(--theia-notebook-cellToolbarSeparator);
   display: flex;
   position: absolute;
@@ -161,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;
 }
@@ -194,6 +219,7 @@
 }
 
 .theia-notebook-cell-divider {
+  pointer-events: all;
   height: 25px;
   width: 100%;
 }
@@ -303,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;
@@ -482,3 +508,22 @@ mark.theia-find-match.theia-find-match-selected {
   color: var(--theia-editor-findMatchForeground);
   background-color: var(--theia-editor-findMatchBackground);
 }
+
+.cell-status-bar-item {
+  align-items: center;
+  display: flex;
+  height: 16px;
+  margin: 0 3px;
+  overflow: hidden;
+  padding: 0 3px;
+  text-overflow: clip;
+  white-space: pre;
+}
+
+.cell-status-item-has-command {
+  cursor: pointer;
+}
+
+.cell-status-item-has-command:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}

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

@@ -103,15 +103,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_LAST_LINE, currentLine === lineCount);
         }));
 
-        this.toDispose.push(this.props.cell.onWillBlurCellEditor(() => {
-            let parent = this.container?.parentElement;
-            while (parent && !parent.classList.contains('theia-notebook-cell')) {
-                parent = parent.parentElement;
-            }
-            if (parent) {
-                parent.focus();
-            }
-        }));
+        this.toDispose.push(this.props.cell.onWillBlurCellEditor(() => this.blurEditor()));
 
         this.toDispose.push(this.props.cell.onDidChangeEditorOptions(options => {
             this.editor?.getControl().updateOptions(options);
@@ -130,7 +122,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
         this.toDispose.push(this.props.notebookModel.onDidChangeSelectedCell(e => {
             if (e.cell !== this.props.cell && this.editor?.getControl().hasTextFocus()) {
-                this.props.notebookContextManager.context?.focus();
+                this.blurEditor();
             }
         }));
         if (!this.props.notebookViewportService || (this.container && this.props.notebookViewportService.isElementInViewport(this.container))) {
@@ -212,6 +204,11 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
             this.toDispose.push(this.editor.getControl().onDidChangeCursorSelection(e => {
                 const selectedText = this.editor!.getControl().getModel()!.getValueInRange(e.selection);
+                // TODO handle secondary selections
+                this.props.cell.selection = {
+                    start: { line: e.selection.startLineNumber - 1, character: e.selection.startColumn - 1 },
+                    end: { line: e.selection.endLineNumber - 1, character: e.selection.endColumn - 1 }
+                };
                 this.props.notebookModel.selectedText = selectedText;
             }));
             this.toDispose.push(this.editor.getControl().onDidChangeCursorPosition(e => {
@@ -226,7 +223,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             }));
             this.props.notebookCellEditorService.editorCreated(uri, this.editor);
             this.setMatches();
-            if (cell.editing && notebookModel.selectedCell === cell) {
+            if (notebookModel.selectedCell === cell) {
                 this.editor.getControl().focus();
             }
         }
@@ -273,4 +270,14 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
         </div >;
     }
 
+    protected blurEditor(): void {
+        let parent = this.container?.parentElement;
+        while (parent && !parent.classList.contains('theia-notebook-cell')) {
+            parent = parent.parentElement;
+        }
+        if (parent) {
+            parent.focus();
+        }
+    }
+
 }