@theia/notebook 1.46.0-next.226 → 1.46.0-next.233

package/src/browser/service/notebook-renderer-messaging-service.ts

@@ -45,17 +45,17 @@ export interface RendererMessaging extends Disposable {
 @injectable()
 export class NotebookRendererMessagingService implements Disposable {
 
-    private readonly postMessageEmitter = new Emitter<RendererMessage>();
+    protected readonly postMessageEmitter = new Emitter<RendererMessage>();
     readonly onPostMessage = this.postMessageEmitter.event;
 
-    private readonly willActivateRendererEmitter = new Emitter<string>();
+    protected readonly willActivateRendererEmitter = new Emitter<string>();
     readonly onWillActivateRenderer = this.willActivateRendererEmitter.event;
 
     @inject(NotebookEditorWidgetService)
-    private readonly editorWidgetService: NotebookEditorWidgetService;
+    protected readonly editorWidgetService: NotebookEditorWidgetService;
 
-    private readonly activations = new Map<string /* rendererId */, undefined | RendererMessage[]>();
-    private readonly scopedMessaging = new Map<string /* editorId */, RendererMessaging>();
+    protected readonly activations = new Map<string /* rendererId */, undefined | RendererMessage[]>();
+    protected readonly scopedMessaging = new Map<string /* editorId */, RendererMessaging>();
 
     receiveMessage(editorId: string | undefined, rendererId: string, message: unknown): Promise<boolean> {
         if (editorId === undefined) {
@@ -101,7 +101,7 @@ export class NotebookRendererMessagingService implements Disposable {
         return messaging;
     }
 
-    private postMessage(editorId: string, rendererId: string, message: unknown): void {
+    protected postMessage(editorId: string, rendererId: string, message: unknown): void {
         if (!this.activations.has(rendererId)) {
             this.prepare(rendererId);
         }

package/src/browser/style/index.css

@@ -286,6 +286,7 @@
   position: absolute;
   top: -99999px;
   left: -99999px;
-  height: 500px;
-  width: 500px;
+  max-height: 500px;
+  min-height: 100px;
+  background-color: var(--theia-editor-background);
 }

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;