@theia/notebook 1.50.1 → 1.52.0

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

@@ -26,6 +26,7 @@ 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';
+import { EditorExtensionsRegistry } from '@theia/monaco-editor-core/esm/vs/editor/browser/editorExtensions';
 
 interface CellEditorProps {
     notebookModel: NotebookModel,
@@ -117,7 +118,8 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
                 editorNode,
                 monacoServices,
                 { ...DEFAULT_EDITOR_OPTIONS, ...cell.editorOptions },
-                [[IContextKeyService, this.props.notebookContextManager.scopedStore]]);
+                [[IContextKeyService, this.props.notebookContextManager.scopedStore]],
+                { contributions: EditorExtensionsRegistry.getEditorContributions().filter(c => c.id !== 'editor.contrib.findController') });
             this.toDispose.push(this.editor);
             this.editor.setLanguage(cell.language);
             this.toDispose.push(this.editor.getControl().onDidContentSizeChange(() => {

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

@@ -45,7 +45,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
 
     protected toDispose = new DisposableCollection();
 
-    protected dragGhost: HTMLElement | undefined;
+    protected static dragGhost: HTMLElement | undefined;
 
     constructor(props: CellListProps) {
         super(props);
@@ -96,6 +96,10 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                                 this.props.notebookModel.setSelectedCell(cell, false);
                             }}
                             onDragStart={e => this.onDragStart(e, index, cell)}
+                            onDragEnd={e => {
+                                NotebookCellListView.dragGhost?.remove();
+                                this.setState({ ...this.state, dragOverIndicator: undefined });
+                            }}
                             onDragOver={e => this.onDragOver(e, cell)}
                             onDrop={e => this.onDrop(e, index)}
                             draggable={true}
@@ -137,14 +141,11 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
             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);
+        NotebookCellListView.dragGhost = document.createElement('div');
+        NotebookCellListView.dragGhost.classList.add('theia-notebook-drag-ghost-image');
+        NotebookCellListView.dragGhost.appendChild(this.props.renderers.get(cell.cellKind)?.renderDragImage(cell) ?? document.createElement('div'));
+        document.body.appendChild(NotebookCellListView.dragGhost);
+        event.dataTransfer.setDragImage(NotebookCellListView.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

@@ -32,8 +32,9 @@ import { CommandRegistry, DisposableCollection, nls } from '@theia/core';
 import { NotebookContextManager } from '../service/notebook-context-manager';
 import { NotebookViewportService } from './notebook-viewport-service';
 import { EditorPreferences } from '@theia/editor/lib/browser';
-import { BareFontInfo } from '@theia/monaco-editor-core/esm/vs/editor/common/config/fontInfo';
-import { PixelRatio } from '@theia/monaco-editor-core/esm/vs/base/browser/browser';
+import { NotebookOptionsService } from '../service/notebook-options';
+import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
+import { MarkdownString } from '@theia/monaco-editor-core/esm/vs/base/common/htmlContent';
 
 @injectable()
 export class NotebookCodeCellRenderer implements CellRenderer {
@@ -64,7 +65,11 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(CommandRegistry)
     protected readonly commandRegistry: CommandRegistry;
 
-    protected fontInfo: BareFontInfo | undefined;
+    @inject(NotebookOptionsService)
+    protected readonly notebookOptionsService: NotebookOptionsService;
+
+    @inject(MarkdownRenderer)
+    protected readonly markdownRenderer: MarkdownRenderer;
 
     render(notebookModel: NotebookModel, cell: NotebookCellModel, handle: number): React.ReactNode {
         return <div>
@@ -81,7 +86,7 @@ export class NotebookCodeCellRenderer implements CellRenderer {
                         monacoServices={this.monacoServices}
                         notebookContextManager={this.notebookContextManager}
                         notebookViewportService={this.notebookViewportService}
-                        fontInfo={this.getOrCreateMonacoFontInfo()} />
+                        fontInfo={this.notebookOptionsService.editorFontInfo} />
                     <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
                         commandRegistry={this.commandRegistry}
                         executionStateService={this.executionStateService}
@@ -102,28 +107,43 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     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');
+        dragImage.style.width = this.notebookContextManager.context?.clientWidth + 'px';
+        dragImage.style.height = '100px';
+        dragImage.style.display = 'flex';
+
+        const fakeRunButton = document.createElement('span');
+        fakeRunButton.className = `${codicon('play')} theia-notebook-cell-status-item`;
+        dragImage.appendChild(fakeRunButton);
+
+        const fakeEditor = document.createElement('div');
+        dragImage.appendChild(fakeEditor);
+        const lines = cell.source.split('\n').slice(0, 5).join('\n');
+        const codeSequence = this.getMarkdownCodeSequence(lines);
+        const firstLine = new MarkdownString(`${codeSequence}${cell.language}\n${lines}\n${codeSequence}`, { supportHtml: true, isTrusted: false });
+        fakeEditor.appendChild(this.markdownRenderer.render(firstLine).element);
+        fakeEditor.classList.add('theia-notebook-cell-editor-container');
+        fakeEditor.style.padding = '10px';
         return dragImage;
     }
 
-    protected getOrCreateMonacoFontInfo(): BareFontInfo {
-        if (!this.fontInfo) {
-            this.fontInfo = this.createFontInfo();
-            this.editorPreferences.onPreferenceChanged(e => this.fontInfo = this.createFontInfo());
+    protected getMarkdownCodeSequence(input: string): string {
+        // We need a minimum of 3 backticks to start a code block.
+        let longest = 2;
+        let current = 0;
+        for (let i = 0; i < input.length; i++) {
+            const char = input.charAt(i);
+            if (char === '`') {
+                current++;
+                if (current > longest) {
+                    longest = current;
+                }
+            } else {
+                current = 0;
+            }
         }
-        return this.fontInfo;
+        return Array(longest + 1).fill('`').join('');
     }
 
-    protected createFontInfo(): BareFontInfo {
-        return BareFontInfo.createFromRawSettings({
-            fontFamily: this.editorPreferences['editor.fontFamily'],
-            fontWeight: String(this.editorPreferences['editor.fontWeight']),
-            fontSize: this.editorPreferences['editor.fontSize'],
-            fontLigatures: this.editorPreferences['editor.fontLigatures'],
-            lineHeight: this.editorPreferences['editor.lineHeight'],
-            letterSpacing: this.editorPreferences['editor.letterSpacing'],
-        }, PixelRatio.value);
-    }
 }
 
 export interface NotebookCodeCellStatusProps {

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

@@ -44,8 +44,10 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
 
     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');
+        dragImage.style.width = this.notebookContextManager.context?.clientWidth + 'px';
+        const markdownString = new MarkdownStringImpl(cell.source, { supportHtml: true, isTrusted: true });
+        const markdownElement = this.markdownRenderer.render(markdownString).element;
+        dragImage.appendChild(markdownElement);
         return dragImage;
     }
 }

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

@@ -30,7 +30,7 @@ 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 { NotebookPreferences } from '../contributions/notebook-preferences';
 import { LanguageService } from '@theia/core/lib/browser/language-service';
 
 export const NotebookCellModelFactory = Symbol('NotebookModelFactory');
@@ -245,13 +245,13 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this._internalMetadata = this.props.internalMetadata ?? {};
 
         this.editorOptions = {
-            lineNumbers: this.preferenceService.get(NOTEBOOK_LINE_NUMBERS)
+            lineNumbers: this.preferenceService.get(NotebookPreferences.NOTEBOOK_LINE_NUMBERS)
         };
         this.toDispose.push(this.preferenceService.onPreferenceChanged(e => {
-            if (e.preferenceName === NOTEBOOK_LINE_NUMBERS) {
+            if (e.preferenceName === NotebookPreferences.NOTEBOOK_LINE_NUMBERS) {
                 this.editorOptions = {
                     ...this.editorOptions,
-                    lineNumbers: this.preferenceService.get(NOTEBOOK_LINE_NUMBERS)
+                    lineNumbers: this.preferenceService.get(NotebookPreferences.NOTEBOOK_LINE_NUMBERS)
                 };
             }
         }));

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

@@ -38,7 +38,7 @@ export class NotebookCellOutputModel implements Disposable {
         return this.rawOutput.metadata;
     }
 
-    constructor(private rawOutput: CellOutput) { }
+    constructor(protected rawOutput: CellOutput) { }
 
     replaceData(rawData: CellOutput): void {
         this.rawOutput = rawData;

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

@@ -34,6 +34,7 @@ import { inject, injectable, interfaces, postConstruct } from '@theia/core/share
 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';
+import { BinaryBuffer } from '@theia/core/lib/common/buffer';
 
 export const NotebookModelFactory = Symbol('NotebookModelFactory');
 
@@ -176,8 +177,7 @@ export class NotebookModel implements Saveable, Disposable {
         this.dirtyCells = [];
         this.dirty = false;
 
-        const data = this.getData();
-        const serializedNotebook = await this.props.serializer.fromNotebook(data);
+        const serializedNotebook = await this.serialize();
         this.fileService.writeFile(this.uri, serializedNotebook);
 
         this.onDidSaveNotebookEmitter.fire();
@@ -189,8 +189,12 @@ export class NotebookModel implements Saveable, Disposable {
         };
     }
 
+    serialize(): Promise<BinaryBuffer> {
+        return this.props.serializer.fromNotebook(this.getData());
+    }
+
     async applySnapshot(snapshot: Saveable.Snapshot): Promise<void> {
-        const rawData = 'read' in snapshot ? snapshot.read() : snapshot.value;
+        const rawData = Saveable.Snapshot.read(snapshot);
         if (!rawData) {
             throw new Error('could not read notebook snapshot');
         }