@theia/notebook 1.48.3 → 1.49.1

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

@@ -61,18 +61,23 @@ function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel, n
         return () => listener.dispose();
     }, [editMode]);
 
-    let markdownContent = React.useMemo(() => markdownRenderer.render(new MarkdownStringImpl(cell.source)).element.innerHTML, [cell, editMode]);
-    if (markdownContent.length === 0) {
-        markdownContent = `<i class="theia-notebook-empty-markdown">${nls.localizeByDefault('Empty markdown cell, double-click or press enter to edit.')}</i>`;
+    let markdownContent: HTMLElement = React.useMemo(() => {
+        const markdownString = new MarkdownStringImpl(cell.source, { supportHtml: true, isTrusted: true });
+        return markdownRenderer.render(markdownString).element;
+    }, [cell, editMode]);
+
+    if (!markdownContent.hasChildNodes()) {
+        const italic = document.createElement('i');
+        italic.className = 'theia-notebook-empty-markdown';
+        italic.innerText = nls.localizeByDefault('Empty markdown cell, double-click or press enter to edit.');
+        italic.style.pointerEvents = 'none';
+        markdownContent = italic;
     }
 
     return editMode ?
         <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
-            // This is currently sadly the best way we have to combine React (Virtual Nodes) and normal dom nodes
-            // the HTML is already sanitized by the markdown renderer, so we don't need to sanitize it again
-            dangerouslySetInnerHTML={{ __html: markdownContent }} // eslint-disable-line react/no-danger
+            ref={node => node?.replaceChildren(markdownContent)}
         />;
 }

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

@@ -21,6 +21,7 @@
 import { Disposable, DisposableCollection, Emitter, Event, URI } from '@theia/core';
 import { inject, injectable, interfaces, postConstruct } from '@theia/core/shared/inversify';
 import { MonacoEditorModel } from '@theia/monaco/lib/browser/monaco-editor-model';
+import { type MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import {
     CellKind, NotebookCellCollapseState, NotebookCellInternalMetadata,
     NotebookCellMetadata, CellOutput, CellData, CellOutputItem
@@ -28,6 +29,9 @@ import {
 import { NotebookCellOutputsSplice } from '../notebook-types';
 import { NotebookMonacoTextModelService } from '../service/notebook-monaco-text-model-service';
 import { NotebookCellOutputModel } from './notebook-cell-output-model';
+import { PreferenceService } from '@theia/core/lib/browser';
+import { NOTEBOOK_LINE_NUMBERS } from '../contributions/notebook-preferences';
+import { LanguageService } from '@theia/core/lib/browser/language-service';
 
 export const NotebookCellModelFactory = Symbol('NotebookModelFactory');
 export type NotebookCellModelFactory = (props: NotebookCellModelProps) => NotebookCellModel;
@@ -103,12 +107,27 @@ export class NotebookCellModel implements NotebookCell, Disposable {
     protected readonly onWillFocusCellEditorEmitter = new Emitter<void>();
     readonly onWillFocusCellEditor = this.onWillFocusCellEditorEmitter.event;
 
+    protected readonly onWillBlurCellEditorEmitter = new Emitter<void>();
+    readonly onWillBlurCellEditor = this.onWillBlurCellEditorEmitter.event;
+
+    protected readonly onDidChangeEditorOptionsEmitter = new Emitter<MonacoEditor.IOptions>();
+    readonly onDidChangeEditorOptions: Event<MonacoEditor.IOptions> = this.onDidChangeEditorOptionsEmitter.event;
+
+    protected readonly outputVisibilityChangeEmitter = new Emitter<boolean>();
+    readonly onDidChangeOutputVisibility: Event<boolean> = this.outputVisibilityChangeEmitter.event;
+
     @inject(NotebookCellModelProps)
     protected readonly props: NotebookCellModelProps;
 
     @inject(NotebookMonacoTextModelService)
     protected readonly textModelService: NotebookMonacoTextModelService;
 
+    @inject(LanguageService)
+    protected readonly languageService: LanguageService;
+
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
     get outputs(): NotebookCellOutputModel[] {
         return this._outputs;
     }
@@ -167,16 +186,19 @@ export class NotebookCellModel implements NotebookCell, Disposable {
             return;
         }
 
-        this.props.language = newLanguage;
         if (this.textModel) {
             this.textModel.setLanguageId(newLanguage);
         }
 
-        this.language = newLanguage;
+        this.props.language = newLanguage;
         this.onDidChangeLanguageEmitter.fire(newLanguage);
         this.onDidChangeContentEmitter.fire('language');
     }
 
+    get languageName(): string {
+        return this.languageService.getLanguage(this.language)?.name ?? this.language;
+    }
+
     get uri(): URI {
         return this.props.uri;
     }
@@ -192,11 +214,45 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         return this._editing;
     }
 
+    protected _editorOptions: MonacoEditor.IOptions = {};
+    get editorOptions(): Readonly<MonacoEditor.IOptions> {
+        return this._editorOptions;
+    }
+
+    set editorOptions(options: MonacoEditor.IOptions) {
+        this._editorOptions = options;
+        this.onDidChangeEditorOptionsEmitter.fire(options);
+    }
+
+    protected _outputVisible: boolean = true;
+    get outputVisible(): boolean {
+        return this._outputVisible;
+    }
+
+    set outputVisible(visible: boolean) {
+        if (this._outputVisible !== visible) {
+            this._outputVisible = visible;
+            this.outputVisibilityChangeEmitter.fire(visible);
+        }
+    }
+
     @postConstruct()
     protected init(): void {
         this._outputs = this.props.outputs.map(op => new NotebookCellOutputModel(op));
         this._metadata = this.props.metadata ?? {};
         this._internalMetadata = this.props.internalMetadata ?? {};
+
+        this.editorOptions = {
+            lineNumbers: this.preferenceService.get(NOTEBOOK_LINE_NUMBERS)
+        };
+        this.toDispose.push(this.preferenceService.onPreferenceChanged(e => {
+            if (e.preferenceName === NOTEBOOK_LINE_NUMBERS) {
+                this.editorOptions = {
+                    ...this.editorOptions,
+                    lineNumbers: this.preferenceService.get(NOTEBOOK_LINE_NUMBERS)
+                };
+            }
+        }));
     }
 
     dispose(): void {
@@ -227,6 +283,11 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this.onWillFocusCellEditorEmitter.fire();
     }
 
+    requestBlurEditor(): void {
+        this.requestStopEdit();
+        this.onWillBlurCellEditorEmitter.fire();
+    }
+
     spliceNotebookCellOutputs(splice: NotebookCellOutputsSplice): void {
         if (splice.deleteCount > 0 && splice.newOutputs.length > 0) {
             const commonLen = Math.min(splice.deleteCount, splice.newOutputs.length);
@@ -298,6 +359,13 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         });
         return ref.object;
     }
+
+    restartOutputRenderer(outputId: string): void {
+        const output = this.outputs.find(out => out.outputId === outputId);
+        if (output) {
+            this.onDidChangeOutputItemsEmitter.fire(output);
+        }
+    }
 }
 
 function computeRunStartTimeAdjustment(oldMetadata: NotebookCellInternalMetadata, newMetadata: NotebookCellInternalMetadata): number | undefined {

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

@@ -1,5 +1,5 @@
 // *****************************************************************************
-// Copyright (C) 20023 Typefox and others.
+// Copyright (C) 2023 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
@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Disposable, Emitter, Event, Resource, URI } from '@theia/core';
+import { Disposable, Emitter, Event, QueueableEmitter, Resource, URI } from '@theia/core';
 import { Saveable, SaveOptions } from '@theia/core/lib/browser';
 import {
     CellData, CellEditType, CellUri, NotebookCellInternalMetadata,
@@ -65,12 +65,15 @@ export class NotebookModel implements Saveable, Disposable {
     protected readonly onDidAddOrRemoveCellEmitter = new Emitter<NotebookModelWillAddRemoveEvent>();
     readonly onDidAddOrRemoveCell = this.onDidAddOrRemoveCellEmitter.event;
 
-    protected readonly onDidChangeContentEmitter = new Emitter<NotebookContentChangedEvent[]>();
+    protected readonly onDidChangeContentEmitter = new QueueableEmitter<NotebookContentChangedEvent>();
     readonly onDidChangeContent = this.onDidChangeContentEmitter.event;
 
     protected readonly onDidChangeSelectedCellEmitter = new Emitter<NotebookCellModel | undefined>();
     readonly onDidChangeSelectedCell = this.onDidChangeSelectedCellEmitter.event;
 
+    protected readonly onDidDisposeEmitter = new Emitter<void>();
+    readonly onDidDispose = this.onDidDisposeEmitter.event;
+
     get onDidChangeReadOnly(): Event<boolean | MarkdownString> {
         return this.props.resource.onDidChangeReadOnly ?? Event.None;
     }
@@ -138,7 +141,7 @@ export class NotebookModel implements Saveable, Disposable {
 
         this.addCellOutputListeners(this.cells);
 
-        this.metadata = this.metadata;
+        this.metadata = this.props.data.metadata;
 
         this.nextHandle = this.cells.length;
     }
@@ -148,7 +151,9 @@ export class NotebookModel implements Saveable, Disposable {
         this.onDidSaveNotebookEmitter.dispose();
         this.onDidAddOrRemoveCellEmitter.dispose();
         this.onDidChangeContentEmitter.dispose();
+        this.onDidChangeSelectedCellEmitter.dispose();
         this.cells.forEach(cell => cell.dispose());
+        this.onDidDisposeEmitter.fire();
     }
 
     async save(options: SaveOptions): Promise<void> {
@@ -235,8 +240,10 @@ export class NotebookModel implements Saveable, Disposable {
     }
 
     setSelectedCell(cell: NotebookCellModel): void {
-        this.selectedCell = cell;
-        this.onDidChangeSelectedCellEmitter.fire(cell);
+        if (this.selectedCell !== cell) {
+            this.selectedCell = cell;
+            this.onDidChangeSelectedCellEmitter.fire(cell);
+        }
     }
 
     private addCellOutputListeners(cells: NotebookCellModel[]): void {
@@ -281,13 +288,18 @@ export class NotebookModel implements Saveable, Disposable {
                     } else {
                         // could definitely be more efficient. See vscode __spliceNotebookCellOutputs2
                         // For now, just replace the whole existing output with the new output
-                        cell.spliceNotebookCellOutputs({ start: 0, deleteCount: cell.outputs.length, newOutputs: edit.outputs });
+                        cell.spliceNotebookCellOutputs({ start: 0, deleteCount: edit.deleteCount ?? cell.outputs.length, newOutputs: edit.outputs });
                     }
-
+                    this.onDidChangeContentEmitter.queue({ kind: NotebookCellsChangeType.Output, index: cellIndex, outputs: cell.outputs, append: edit.append ?? false });
                     break;
                 }
                 case CellEditType.OutputItems:
                     cell.changeOutputItems(edit.outputId, !!edit.append, edit.items);
+                    this.onDidChangeContentEmitter.queue({
+                        kind: NotebookCellsChangeType.OutputItem, index: cellIndex, outputItems: edit.items,
+                        outputId: edit.outputId, append: edit.append ?? false
+                    });
+
                     break;
                 case CellEditType.Metadata:
                     this.changeCellMetadata(this.cells[cellIndex], edit.metadata, computeUndoRedo);
@@ -308,12 +320,15 @@ export class NotebookModel implements Saveable, Disposable {
                     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]);
             }
         }
 
+        this.onDidChangeContentEmitter.fire();
+
     }
 
     protected async replaceCells(start: number, deleteCount: number, newCells: CellData[], computeUndoRedo: boolean): Promise<void> {
@@ -352,7 +367,7 @@ export class NotebookModel implements Saveable, Disposable {
         await Promise.all(cells.map(cell => cell.resolveTextModel()));
 
         this.onDidAddOrRemoveCellEmitter.fire({ rawEvent: { kind: NotebookCellsChangeType.ModelChange, changes }, newCellIds: cells.map(cell => cell.handle) });
-        this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ModelChange, changes }]);
+        this.onDidChangeContentEmitter.queue({ kind: NotebookCellsChangeType.ModelChange, changes });
         if (cells.length > 0) {
             this.setSelectedCell(cells[cells.length - 1]);
             cells[cells.length - 1].requestEdit();
@@ -370,9 +385,7 @@ export class NotebookModel implements Saveable, Disposable {
         }
 
         cell.internalMetadata = newInternalMetadata;
-        this.onDidChangeContentEmitter.fire([
-            { kind: NotebookCellsChangeType.ChangeCellInternalMetadata, index: this.cells.indexOf(cell), internalMetadata: newInternalMetadata }
-        ]);
+        this.onDidChangeContentEmitter.queue({ kind: NotebookCellsChangeType.ChangeCellInternalMetadata, index: this.cells.indexOf(cell), internalMetadata: newInternalMetadata });
     }
 
     protected updateNotebookMetadata(metadata: NotebookDocumentMetadata, computeUndoRedo: boolean): void {
@@ -385,7 +398,7 @@ export class NotebookModel implements Saveable, Disposable {
         }
 
         this.metadata = metadata;
-        this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ChangeDocumentMetadata, metadata: this.metadata }]);
+        this.onDidChangeContentEmitter.queue({ kind: NotebookCellsChangeType.ChangeDocumentMetadata, metadata: this.metadata });
     }
 
     protected changeCellMetadataPartial(cell: NotebookCellModel, metadata: NullablePartialNotebookCellMetadata, computeUndoRedo: boolean): void {
@@ -417,7 +430,7 @@ export class NotebookModel implements Saveable, Disposable {
         }
 
         cell.metadata = metadata;
-        this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ChangeCellMetadata, index: this.cells.indexOf(cell), metadata: cell.metadata }]);
+        this.onDidChangeContentEmitter.queue({ kind: NotebookCellsChangeType.ChangeCellMetadata, index: this.cells.indexOf(cell), metadata: cell.metadata });
     }
 
     protected changeCellLanguage(cell: NotebookCellModel, languageId: string, computeUndoRedo: boolean): void {
@@ -427,7 +440,7 @@ export class NotebookModel implements Saveable, Disposable {
 
         cell.language = languageId;
 
-        this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ChangeCellLanguage, index: this.cells.indexOf(cell), language: languageId }]);
+        this.onDidChangeContentEmitter.queue({ kind: NotebookCellsChangeType.ChangeCellLanguage, index: this.cells.indexOf(cell), language: languageId });
     }
 
     protected moveCellToIndex(fromIndex: number, length: number, toIndex: number, computeUndoRedo: boolean): boolean {
@@ -440,7 +453,7 @@ export class NotebookModel implements Saveable, Disposable {
 
         const cells = this.cells.splice(fromIndex, length);
         this.cells.splice(toIndex, 0, ...cells);
-        this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.Move, index: fromIndex, length, newIdx: toIndex, cells }]);
+        this.onDidChangeContentEmitter.queue({ kind: NotebookCellsChangeType.Move, index: fromIndex, length, newIdx: toIndex, cells });
 
         return true;
     }

package/src/common/notebook-common.ts

@@ -261,7 +261,8 @@ export function isTextStreamMime(mimeType: string): boolean {
 
 export namespace CellUri {
 
-    export const scheme = 'vscode-notebook-cell';
+    export const cellUriScheme = 'vscode-notebook-cell';
+    export const outputUriScheme = 'vscode-notebook-cell-output';
 
     const _lengths = ['W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f'];
     const _padRegexp = new RegExp(`^[${_lengths.join('')}]+`);
@@ -273,11 +274,11 @@ export namespace CellUri {
         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')} `;
-        return notebook.withScheme(scheme).withFragment(fragment);
+        return notebook.withScheme(cellUriScheme).withFragment(fragment);
     }
 
     export function parse(cell: URI): { notebook: URI; handle: number } | undefined {
-        if (cell.scheme !== scheme) {
+        if (cell.scheme !== cellUriScheme) {
             return undefined;
         }
 
@@ -298,6 +299,30 @@ export namespace CellUri {
         };
     }
 
+    export function generateCellOutputUri(notebook: URI, outputId?: string): URI {
+        return notebook
+            .withScheme(outputUriScheme)
+            .withQuery(`op${outputId ?? ''},${notebook.scheme !== 'file' ? notebook.scheme : ''}`);
+    };
+
+    export function parseCellOutputUri(uri: URI): { notebook: URI; outputId?: string } | undefined {
+        if (uri.scheme !== outputUriScheme) {
+            return;
+        }
+
+        const match = /^op([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})?\,(.*)$/i.exec(uri.query);
+        if (!match) {
+            return undefined;
+        }
+
+        const outputId = match[1] || undefined;
+        const scheme = match[2];
+        return {
+            outputId,
+            notebook: uri.withScheme(scheme || 'file').withoutQuery()
+        };
+    }
+
     export function generateCellPropertyUri(notebook: URI, handle: number, cellScheme: string): URI {
         return CellUri.generate(notebook, handle).withScheme(cellScheme);
     }
@@ -307,6 +332,6 @@ export namespace CellUri {
             return undefined;
         }
 
-        return CellUri.parse(uri.withScheme(scheme));
+        return CellUri.parse(uri.withScheme(cellUriScheme));
     }
 }