@theia/notebook 1.50.0 → 1.51.0

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

@@ -35,14 +35,14 @@ export class NotebookEditorWidgetService {
     @inject(ContextKeyService)
     protected contextKeyService: ContextKeyService;
 
-    private readonly notebookEditors = new Map<string, NotebookEditorWidget>();
+    protected readonly notebookEditors = new Map<string, NotebookEditorWidget>();
 
-    private readonly onNotebookEditorAddEmitter = new Emitter<NotebookEditorWidget>();
-    private readonly onNotebookEditorRemoveEmitter = new Emitter<NotebookEditorWidget>();
+    protected readonly onNotebookEditorAddEmitter = new Emitter<NotebookEditorWidget>();
+    protected readonly onNotebookEditorRemoveEmitter = new Emitter<NotebookEditorWidget>();
     readonly onDidAddNotebookEditor = this.onNotebookEditorAddEmitter.event;
     readonly onDidRemoveNotebookEditor = this.onNotebookEditorRemoveEmitter.event;
 
-    private readonly onDidChangeFocusedEditorEmitter = new Emitter<NotebookEditorWidget | undefined>();
+    protected readonly onDidChangeFocusedEditorEmitter = new Emitter<NotebookEditorWidget | undefined>();
     readonly onDidChangeFocusedEditor = this.onDidChangeFocusedEditorEmitter.event;
 
     focusedEditor?: NotebookEditorWidget = undefined;
@@ -62,6 +62,9 @@ export class NotebookEditorWidgetService {
         }
         this.notebookEditors.set(editor.id, editor);
         this.onNotebookEditorAddEmitter.fire(editor);
+        if (editor.isVisible) {
+            this.notebookEditorFocusChanged(editor, true);
+        }
     }
 
     removeNotebookEditor(editor: NotebookEditorWidget): void {

package/src/browser/service/notebook-execution-service.ts

@@ -50,7 +50,7 @@ export class NotebookExecutionService {
     @inject(NotebookKernelQuickPickService)
     protected notebookKernelQuickPickService: NotebookKernelQuickPickService;
 
-    private readonly cellExecutionParticipants = new Set<CellExecutionParticipant>();
+    protected readonly cellExecutionParticipants = new Set<CellExecutionParticipant>();
 
     async executeNotebookCells(notebook: NotebookModel, cells: Iterable<NotebookCellModel>): Promise<void> {
         const cellsArr = Array.from(cells)
@@ -117,7 +117,7 @@ export class NotebookExecutionService {
         return Disposable.create(() => this.cellExecutionParticipants.delete(participant));
     }
 
-    private async runExecutionParticipants(executions: CellExecution[]): Promise<void> {
+    protected async runExecutionParticipants(executions: CellExecution[]): Promise<void> {
         for (const participant of this.cellExecutionParticipants) {
             await participant.onWillExecuteCell(executions);
         }

package/src/browser/service/notebook-execution-state-service.ts

@@ -69,10 +69,10 @@ export class NotebookExecutionStateService implements Disposable {
 
     protected readonly executions = new Map<string, Map<number, CellExecution>>();
 
-    private readonly onDidChangeExecutionEmitter = new Emitter<CellExecutionStateChangedEvent>();
+    protected readonly onDidChangeExecutionEmitter = new Emitter<CellExecutionStateChangedEvent>();
     onDidChangeExecution = this.onDidChangeExecutionEmitter.event;
 
-    private readonly onDidChangeLastRunFailStateEmitter = new Emitter<NotebookFailStateChangedEvent>();
+    protected readonly onDidChangeLastRunFailStateEmitter = new Emitter<NotebookFailStateChangedEvent>();
     onDidChangeLastRunFailState = this.onDidChangeLastRunFailStateEmitter.event;
 
     getOrCreateCellExecution(notebookUri: URI, cellHandle: number): CellExecution {
@@ -98,7 +98,7 @@ export class NotebookExecutionStateService implements Disposable {
 
     }
 
-    private createNotebookCellExecution(notebook: NotebookModel, cellHandle: number): CellExecution {
+    protected createNotebookCellExecution(notebook: NotebookModel, cellHandle: number): CellExecution {
         const notebookUri = notebook.uri;
         const execution = new CellExecution(cellHandle, notebook);
         execution.toDispose.push(execution.onDidUpdate(() => this.onDidChangeExecutionEmitter.fire(new CellExecutionStateChangedEvent(notebookUri, cellHandle, execution))));
@@ -107,7 +107,7 @@ export class NotebookExecutionStateService implements Disposable {
         return execution;
     }
 
-    private onCellExecutionDidComplete(notebookUri: URI, cellHandle: number, exe: CellExecution, lastRunSuccess?: boolean): void {
+    protected onCellExecutionDidComplete(notebookUri: URI, cellHandle: number, exe: CellExecution, lastRunSuccess?: boolean): void {
         const notebookExecutions = this.executions.get(notebookUri.toString())?.get(cellHandle);
         if (!notebookExecutions) {
             throw new Error('Notebook Cell Execution not found while trying to complete it');
@@ -138,15 +138,15 @@ export class NotebookExecutionStateService implements Disposable {
 }
 
 export class CellExecution implements Disposable {
-    private readonly onDidUpdateEmitter = new Emitter<void>();
+    protected readonly onDidUpdateEmitter = new Emitter<void>();
     readonly onDidUpdate = this.onDidUpdateEmitter.event;
 
-    private readonly onDidCompleteEmitter = new Emitter<boolean | undefined>();
+    protected readonly onDidCompleteEmitter = new Emitter<boolean | undefined>();
     readonly onDidComplete = this.onDidCompleteEmitter.event;
 
     toDispose = new DisposableCollection();
 
-    private _state: NotebookCellExecutionState = NotebookCellExecutionState.Unconfirmed;
+    protected _state: NotebookCellExecutionState = NotebookCellExecutionState.Unconfirmed;
     get state(): NotebookCellExecutionState {
         return this._state;
     }
@@ -155,19 +155,19 @@ export class CellExecution implements Disposable {
         return this.notebook.uri;
     }
 
-    private _didPause = false;
+    protected _didPause = false;
     get didPause(): boolean {
         return this._didPause;
     }
 
-    private _isPaused = false;
+    protected _isPaused = false;
     get isPaused(): boolean {
         return this._isPaused;
     }
 
     constructor(
         readonly cellHandle: number,
-        private readonly notebook: NotebookModel,
+        protected readonly notebook: NotebookModel,
     ) {
         console.debug(`CellExecution#ctor ${this.getCellLog()}`);
     }
@@ -188,7 +188,7 @@ export class CellExecution implements Disposable {
         this.applyCellExecutionEditsToNotebook([startExecuteEdit]);
     }
 
-    private getCellLog(): string {
+    protected getCellLog(): string {
         return `${this.notebookURI.toString()}, ${this.cellHandle}`;
     }
 
@@ -254,7 +254,7 @@ export class CellExecution implements Disposable {
         this.toDispose.dispose();
     }
 
-    private applyCellExecutionEditsToNotebook(edits: CellEditOperation[]): void {
+    protected applyCellExecutionEditsToNotebook(edits: CellEditOperation[]): void {
         this.notebook.applyEdits(edits, false);
     }
 }

package/src/browser/service/notebook-kernel-quick-pick-service.ts

@@ -277,7 +277,7 @@ export class NotebookKernelQuickPickService {
         return true;
     }
 
-    private async displaySelectAnotherQuickPick(editor: NotebookModel, kernelListEmpty: boolean): Promise<boolean> {
+    protected async displaySelectAnotherQuickPick(editor: NotebookModel, kernelListEmpty: boolean): Promise<boolean> {
         const notebook: NotebookModel = editor;
         const disposables = new DisposableCollection();
         const quickPick = this.quickInputService.createQuickPick<KernelQuickPickItem>();
@@ -399,11 +399,11 @@ export class NotebookKernelQuickPickService {
         return false;
     }
 
-    private isUri(value: string): boolean {
+    protected isUri(value: string): boolean {
         return /^(?<scheme>\w[\w\d+.-]*):/.test(value);
     }
 
-    private async calculateKernelSources(editor: NotebookModel): Promise<QuickPickInput<KernelQuickPickItem>[]> {
+    protected async calculateKernelSources(editor: NotebookModel): Promise<QuickPickInput<KernelQuickPickItem>[]> {
         const notebook: NotebookModel = editor;
 
         const actions = await this.notebookKernelService.getKernelSourceActionsFromProviders(notebook);
@@ -448,7 +448,7 @@ export class NotebookKernelQuickPickService {
         return quickPickItems;
     }
 
-    private async selectOneKernel(notebook: NotebookModel, source: string, kernels: NotebookKernel[]): Promise<void> {
+    protected async selectOneKernel(notebook: NotebookModel, source: string, kernels: NotebookKernel[]): Promise<void> {
         const quickPickItems: QuickPickInput<KernelPick>[] = kernels.map(kernel => toKernelQuickPick(kernel, undefined));
         const quickPick = this.quickInputService.createQuickPick<KernelQuickPickItem>();
         quickPick.items = quickPickItems;
@@ -472,7 +472,7 @@ export class NotebookKernelQuickPickService {
         quickPick.show();
     }
 
-    private async executeCommand<T>(notebook: NotebookModel, command: NotebookCommand): Promise<T | undefined | void> {
+    protected async executeCommand<T>(notebook: NotebookModel, command: NotebookCommand): Promise<T | undefined | void> {
         const args = (command.arguments || []).concat([NotebookModelResource.create(notebook.uri)]);
         return this.commandService.executeCommand(command.id, ...args);
     }

package/src/browser/service/notebook-kernel-service.ts

@@ -84,7 +84,7 @@ export interface NotebookTextModelLike { uri: URI; viewType: string }
 
 class KernelInfo {
 
-    private static instanceCounter = 0;
+    protected static instanceCounter = 0;
 
     score: number;
     readonly kernel: NotebookKernel;
@@ -130,7 +130,7 @@ export class SourceCommand implements Disposable {
         this.onDidChangeStateEmitter.fire();
     }
 
-    private async runCommand(commandService: CommandService): Promise<void> {
+    protected async runCommand(commandService: CommandService): Promise<void> {
         try {
             await commandService.executeCommand(this.command.id, {
                 uri: this.model.uri,
@@ -278,7 +278,7 @@ export class NotebookKernelService {
         return this.kernels.get(id)?.kernel;
     }
 
-    private static score(kernel: NotebookKernel, notebook: NotebookTextModelLike): number {
+    protected static score(kernel: NotebookKernel, notebook: NotebookTextModelLike): number {
         if (kernel.viewType === notebook.viewType) {
             return 10;
         } else if (kernel.viewType === '*') {
@@ -288,7 +288,7 @@ export class NotebookKernelService {
         }
     }
 
-    private tryAutoBindNotebook(notebook: NotebookModel, onlyThisKernel?: NotebookKernel): void {
+    protected tryAutoBindNotebook(notebook: NotebookModel, onlyThisKernel?: NotebookKernel): void {
 
         const id = this.notebookBindings[`${notebook.viewType}/${notebook.uri}`];
         if (!id) {

package/src/browser/service/notebook-options.ts

@@ -0,0 +1,154 @@
+
+// *****************************************************************************
+// 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 { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
+import { PreferenceService } from '@theia/core/lib/browser';
+import { Emitter } from '@theia/core';
+import { NotebookPreferences, notebookPreferenceSchema } from '../contributions/notebook-preferences';
+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';
+
+const notebookOutputOptionsRelevantPreferences = [
+    'editor.fontSize',
+    'editor.fontFamily',
+    NotebookPreferences.NOTEBOOK_LINE_NUMBERS,
+    NotebookPreferences.OUTPUT_LINE_HEIGHT,
+    NotebookPreferences.OUTPUT_FONT_SIZE,
+    NotebookPreferences.OUTPUT_FONT_FAMILY,
+    NotebookPreferences.OUTPUT_SCROLLING,
+    NotebookPreferences.OUTPUT_WORD_WRAP,
+    NotebookPreferences.OUTPUT_LINE_LIMIT
+];
+
+export interface NotebookOutputOptions {
+    // readonly outputNodePadding: number;
+    // readonly outputNodeLeftPadding: number;
+    // readonly previewNodePadding: number;
+    // readonly markdownLeftMargin: number;
+    // readonly leftMargin: number;
+    // readonly rightMargin: number;
+    // readonly runGutter: number;
+    // readonly dragAndDropEnabled: boolean;
+    readonly fontSize: number;
+    readonly outputFontSize?: number;
+    readonly fontFamily: string;
+    readonly outputFontFamily?: string;
+    // readonly markupFontSize: number;
+    // readonly markdownLineHeight: number;
+    readonly outputLineHeight: number;
+    readonly outputScrolling: boolean;
+    readonly outputWordWrap: boolean;
+    readonly outputLineLimit: number;
+    // readonly outputLinkifyFilePaths: boolean;
+    // readonly minimalError: boolean;
+
+}
+
+@injectable()
+export class NotebookOptionsService {
+
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
+    @inject(EditorPreferences)
+    protected readonly editorPreferences: EditorPreferences;
+
+    protected outputOptionsChangedEmitter = new Emitter<NotebookOutputOptions>();
+    onDidChangeOutputOptions = this.outputOptionsChangedEmitter.event;
+
+    protected fontInfo?: BareFontInfo;
+    get editorFontInfo(): BareFontInfo {
+        return this.getOrCreateMonacoFontInfo();
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.preferenceService.onPreferencesChanged(async preferenceChanges => {
+            if (notebookOutputOptionsRelevantPreferences.some(p => p in preferenceChanges)) {
+                this.outputOptionsChangedEmitter.fire(this.computeOutputOptions());
+            }
+        });
+    }
+
+    computeOutputOptions(): NotebookOutputOptions {
+        const outputLineHeight = this.getNotebookPreferenceWithDefault<number>(NotebookPreferences.OUTPUT_LINE_HEIGHT);
+
+        const fontSize = this.preferenceService.get<number>('editor.fontSize')!;
+        const outputFontSize = this.getNotebookPreferenceWithDefault<number>(NotebookPreferences.OUTPUT_FONT_SIZE);
+
+        return {
+            fontSize,
+            outputFontSize: outputFontSize,
+            fontFamily: this.preferenceService.get<string>('editor.fontFamily')!,
+            outputFontFamily: this.getNotebookPreferenceWithDefault<string>(NotebookPreferences.OUTPUT_FONT_FAMILY),
+            outputLineHeight: this.computeOutputLineHeight(outputLineHeight, outputFontSize ?? fontSize),
+            outputScrolling: this.getNotebookPreferenceWithDefault<boolean>(NotebookPreferences.OUTPUT_SCROLLING)!,
+            outputWordWrap: this.getNotebookPreferenceWithDefault<boolean>(NotebookPreferences.OUTPUT_WORD_WRAP)!,
+            outputLineLimit: this.getNotebookPreferenceWithDefault<number>(NotebookPreferences.OUTPUT_LINE_LIMIT)!
+        };
+    }
+
+    protected getNotebookPreferenceWithDefault<T>(key: string): T {
+        return this.preferenceService.get<T>(key, notebookPreferenceSchema.properties?.[key]?.default as T);
+    }
+
+    protected computeOutputLineHeight(lineHeight: number, outputFontSize: number): number {
+        const minimumLineHeight = 9;
+
+        if (lineHeight === 0) {
+            // use editor line height
+            lineHeight = this.editorFontInfo.lineHeight;
+        } else if (lineHeight < minimumLineHeight) {
+            // Values too small to be line heights in pixels are in ems.
+            let fontSize = outputFontSize;
+            if (fontSize === 0) {
+                fontSize = this.preferenceService.get<number>('editor.fontSize')!;
+            }
+
+            lineHeight = lineHeight * fontSize;
+        }
+
+        // Enforce integer, minimum constraints
+        lineHeight = Math.round(lineHeight);
+        if (lineHeight < minimumLineHeight) {
+            lineHeight = minimumLineHeight;
+        }
+
+        return lineHeight;
+    }
+
+    protected getOrCreateMonacoFontInfo(): BareFontInfo {
+        if (!this.fontInfo) {
+            this.fontInfo = this.createFontInfo();
+            this.editorPreferences.onPreferenceChanged(e => this.fontInfo = this.createFontInfo());
+        }
+        return this.fontInfo;
+    }
+
+    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);
+    }
+
+}

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

@@ -187,6 +187,14 @@
   overflow: hidden;
 }
 
+.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);
+  background-color: var(--theia-progressBar-background);
+  height: 2px;
+}
+
 .theia-notebook-viewport {
   display: flex;
   overflow: hidden;
@@ -286,6 +294,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-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;