@theia/notebook 1.67.0-next.13 → 1.67.0-next.56

package/README.md

@@ -16,7 +16,7 @@ The `@theia/notebook` extension contributes functionality for integrated noteboo
 
 ## Additional Information
 
-- [API documentation for `@theia/notebook`](https://eclipse-theia.github.io/theia/docs/next/modules/notebook.html)
+- [API documentation for `@theia/notebook`](https://eclipse-theia.github.io/theia/docs/next/modules/_theia_notebook.html)
 - [Theia - GitHub](https://github.com/eclipse-theia/theia)
 - [Theia - Website](https://theia-ide.org/)
 

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@theia/notebook",
-  "version": "1.67.0-next.13+c409d5d18",
+  "version": "1.67.0-next.56+d8f18cc386c",
   "description": "Theia - Notebook Extension",
   "dependencies": {
-    "@theia/core": "1.67.0-next.13+c409d5d18",
-    "@theia/editor": "1.67.0-next.13+c409d5d18",
-    "@theia/filesystem": "1.67.0-next.13+c409d5d18",
-    "@theia/monaco": "1.67.0-next.13+c409d5d18",
+    "@theia/core": "1.67.0-next.56+d8f18cc386c",
+    "@theia/editor": "1.67.0-next.56+d8f18cc386c",
+    "@theia/filesystem": "1.67.0-next.56+d8f18cc386c",
+    "@theia/monaco": "1.67.0-next.56+d8f18cc386c",
     "@theia/monaco-editor-core": "1.96.302",
-    "@theia/outline-view": "1.67.0-next.13+c409d5d18",
+    "@theia/outline-view": "1.67.0-next.56+d8f18cc386c",
     "advanced-mark.js": "^2.6.0",
     "react-perfect-scrollbar": "^1.5.8",
     "tslib": "^2.6.2"
@@ -54,5 +54,5 @@
   "nyc": {
     "extends": "../../configs/nyc.json"
   },
-  "gitHead": "c409d5d18d8c4f5a722f87b37ea9d6fd5af47ea8"
+  "gitHead": "d8f18cc386c45a736cd193d42eab02c8f64c6b10"
 }

package/src/browser/contributions/notebook-actions-contribution.ts

@@ -131,13 +131,14 @@ export class NotebookActionsContribution implements CommandContribution, MenuCon
         commands.registerCommand(NotebookCommands.ADD_NEW_CELL_COMMAND, {
             execute: (notebookModel: NotebookModel, cellKind: CellKind = CellKind.Markup, index?: number | 'above' | 'below', focusContainer?: boolean) => {
                 notebookModel = notebookModel ?? this.notebookEditorWidgetService.focusedEditor?.model;
+                const viewModel = this.notebookEditorWidgetService.focusedEditor?.viewModel;
 
                 let insertIndex: number = 0;
                 if (typeof index === 'number' && index >= 0) {
                     insertIndex = index;
-                } else if (notebookModel.selectedCell && typeof index === 'string') {
+                } else if (viewModel?.selectedCell && typeof index === 'string') {
                     // if index is -1 insert below otherwise at the index of the selected cell which is above the selected.
-                    insertIndex = notebookModel.cells.indexOf(notebookModel.selectedCell) + (index === 'below' ? 1 : 0);
+                    insertIndex = notebookModel.cells.indexOf(viewModel.selectedCell) + (index === 'below' ? 1 : 0);
                 }
 
                 let cellLanguage: string = 'markdown';
@@ -158,7 +159,7 @@ export class NotebookActionsContribution implements CommandContribution, MenuCon
                     }]
                 }], true);
                 if (focusContainer) {
-                    notebookModel.selectedCell?.requestBlurEditor();
+                    viewModel?.cellViewModels.get(viewModel.selectedCell?.handle ?? -1)?.requestBlurEditor();
                 }
             }
         });
@@ -191,27 +192,28 @@ export class NotebookActionsContribution implements CommandContribution, MenuCon
                 execute: (change: number | CellChangeDirection) => {
                     const focusedEditor = this.notebookEditorWidgetService.focusedEditor;
                     const model = focusedEditor?.model;
+                    const viewModel = focusedEditor?.viewModel;
                     if (model && typeof change === 'number') {
-                        model.setSelectedCell(model.cells[change]);
-                    } else if (model && model.selectedCell) {
-                        const currentIndex = model.cells.indexOf(model.selectedCell);
+                        viewModel?.setSelectedCell(model.cells[change]);
+                    } else if (model && viewModel?.selectedCell) {
+                        const currentIndex = model.cells.indexOf(viewModel?.selectedCell);
                         const shouldFocusEditor = this.contextKeyService.match('editorTextFocus');
 
                         if (change === CellChangeDirection.Up && currentIndex > 0) {
-                            model.setSelectedCell(model.cells[currentIndex - 1]);
-                            if ((model.selectedCell?.cellKind === CellKind.Code
-                                || (model.selectedCell?.cellKind === CellKind.Markup && model.selectedCell?.editing)) && shouldFocusEditor) {
-                                model.selectedCell.requestFocusEditor('lastLine');
+                            viewModel?.setSelectedCell(model.cells[currentIndex - 1]);
+                            if ((viewModel?.selectedCell?.cellKind === CellKind.Code
+                                || (viewModel?.selectedCell?.cellKind === CellKind.Markup && viewModel?.selectedCellViewModel?.editing)) && shouldFocusEditor) {
+                                viewModel?.cellViewModels.get(viewModel.selectedCell.handle)?.requestFocusEditor('lastLine');
                             }
                         } else if (change === CellChangeDirection.Down && currentIndex < model.cells.length - 1) {
-                            model.setSelectedCell(model.cells[currentIndex + 1]);
-                            if ((model.selectedCell?.cellKind === CellKind.Code
-                                || (model.selectedCell?.cellKind === CellKind.Markup && model.selectedCell?.editing)) && shouldFocusEditor) {
-                                model.selectedCell.requestFocusEditor();
+                            viewModel?.setSelectedCell(model.cells[currentIndex + 1]);
+                            if ((viewModel?.selectedCell?.cellKind === CellKind.Code
+                                || (viewModel?.selectedCell?.cellKind === CellKind.Markup && viewModel?.selectedCellViewModel?.editing)) && shouldFocusEditor) {
+                                viewModel?.cellViewModels.get(viewModel.selectedCell.handle)?.requestFocusEditor();
                             }
                         }
 
-                        if (model.selectedCell.cellKind === CellKind.Markup) {
+                        if (viewModel?.selectedCell.cellKind === CellKind.Markup) {
                             // since were losing focus from the cell editor, we need to focus the notebook editor again
                             focusedEditor?.node.focus();
                         }
@@ -229,8 +231,8 @@ export class NotebookActionsContribution implements CommandContribution, MenuCon
         commands.registerCommand(NotebookCommands.CUT_SELECTED_CELL, this.editableCommandHandler(
             () => {
                 const model = this.notebookEditorWidgetService.focusedEditor?.model;
-                const selectedCell = model?.selectedCell;
-                if (selectedCell) {
+                const selectedCell = this.notebookEditorWidgetService.focusedEditor?.viewModel?.selectedCell;
+                if (selectedCell && model) {
                     model.applyEdits([{ editType: CellEditType.Replace, index: model.cells.indexOf(selectedCell), count: 1, cells: [] }], true);
                     this.notebookClipboardService.copyCell(selectedCell);
                 }
@@ -238,8 +240,8 @@ export class NotebookActionsContribution implements CommandContribution, MenuCon
 
         commands.registerCommand(NotebookCommands.COPY_SELECTED_CELL, {
             execute: () => {
-                const model = this.notebookEditorWidgetService.focusedEditor?.model;
-                const selectedCell = model?.selectedCell;
+                const viewModel = this.notebookEditorWidgetService.focusedEditor?.viewModel;
+                const selectedCell = viewModel?.selectedCell;
                 if (selectedCell) {
                     this.notebookClipboardService.copyCell(selectedCell);
                 }
@@ -253,7 +255,8 @@ export class NotebookActionsContribution implements CommandContribution, MenuCon
                 const copiedCell = this.notebookClipboardService.getCell();
                 if (copiedCell) {
                     const model = this.notebookEditorWidgetService.focusedEditor?.model;
-                    const insertIndex = model?.selectedCell ? model.cells.indexOf(model.selectedCell) + (position === 'above' ? 0 : 1) : 0;
+                    const viewModel = this.notebookEditorWidgetService.focusedEditor?.viewModel;
+                    const insertIndex = viewModel?.selectedCell && model ? model.cells.indexOf(viewModel?.selectedCell) + (position === 'above' ? 0 : 1) : 0;
                     model?.applyEdits([{ editType: CellEditType.Replace, index: insertIndex, count: 0, cells: [copiedCell] }], true);
                 }
             }
@@ -267,8 +270,8 @@ export class NotebookActionsContribution implements CommandContribution, MenuCon
 
         commands.registerCommand(NotebookCommands.CENTER_ACTIVE_CELL, {
             execute: (editor?: NotebookEditorWidget) => {
-                const model = editor ? editor.model : this.notebookEditorWidgetService.focusedEditor?.model;
-                model?.selectedCell?.requestCenterEditor();
+                const viewModel = editor ? editor.viewModel : this.notebookEditorWidgetService.focusedEditor?.viewModel;
+                viewModel?.selectedCell?.requestCenterEditor();
             }
         });
 

package/src/browser/contributions/notebook-cell-actions-contribution.ts

@@ -284,8 +284,16 @@ export class NotebookCellActionContribution implements MenuContribution, Command
     }
 
     registerCommands(commands: CommandRegistry): void {
-        commands.registerCommand(NotebookCellCommands.EDIT_COMMAND, this.editableCellCommandHandler((_, cell) => cell.requestFocusEditor()));
-        commands.registerCommand(NotebookCellCommands.STOP_EDIT_COMMAND, { execute: (_, cell: NotebookCellModel) => (cell ?? this.getSelectedCell()).requestBlurEditor() });
+        commands.registerCommand(NotebookCellCommands.EDIT_COMMAND, this.editableCellCommandHandler((_, cell) => {
+            const cellViewModel = this.notebookEditorWidgetService.focusedEditor?.viewModel.cellViewModels.get(cell.handle);
+            cellViewModel?.requestFocusEditor();
+        }));
+        commands.registerCommand(NotebookCellCommands.STOP_EDIT_COMMAND, {
+            execute: (_, cell: NotebookCellModel) => {
+                const cellViewModel = this.notebookEditorWidgetService.focusedEditor?.viewModel.cellViewModels.get(cell.handle);
+                cellViewModel?.requestBlurEditor();
+            }
+        });
         commands.registerCommand(NotebookCellCommands.DELETE_COMMAND,
             this.editableCellCommandHandler((notebookModel, cell) => {
                 notebookModel.applyEdits([{
@@ -346,6 +354,8 @@ export class NotebookCellActionContribution implements MenuContribution, Command
 
         commands.registerCommand(NotebookCellCommands.EXECUTE_SINGLE_CELL_AND_FOCUS_NEXT_COMMAND, this.editableCellCommandHandler(
             (notebookModel, cell) => {
+                const viewModel = this.notebookEditorWidgetService.focusedEditor?.viewModel;
+
                 if (cell.cellKind === CellKind.Code) {
                     commands.executeCommand(NotebookCellCommands.EXECUTE_SINGLE_CELL_COMMAND.id, notebookModel, cell);
                 } else {
@@ -353,7 +363,7 @@ export class NotebookCellActionContribution implements MenuContribution, Command
                 }
                 const index = notebookModel.cells.indexOf(cell);
                 if (index < notebookModel.cells.length - 1) {
-                    notebookModel.setSelectedCell(notebookModel.cells[index + 1]);
+                    viewModel?.setSelectedCell(notebookModel.cells[index + 1]);
                 } else if (cell.cellKind === CellKind.Code) {
                     commands.executeCommand(NotebookCellCommands.INSERT_NEW_CELL_BELOW_COMMAND.id);
                 } else {
@@ -375,7 +385,8 @@ export class NotebookCellActionContribution implements MenuContribution, Command
                 }
 
                 const index = notebookModel.cells.indexOf(cell);
-                notebookModel.setSelectedCell(notebookModel.cells[index + 1]);
+                const viewModel = this.notebookEditorWidgetService.focusedEditor?.viewModel;
+                viewModel?.setSelectedCell(notebookModel.cells[index + 1]);
             })
         );
 
@@ -436,7 +447,7 @@ export class NotebookCellActionContribution implements MenuContribution, Command
 
         commands.registerCommand(NotebookCellCommands.TOGGLE_CELL_OUTPUT, {
             execute: () => {
-                const selectedCell = this.notebookEditorWidgetService.focusedEditor?.model?.selectedCell;
+                const selectedCell = this.notebookEditorWidgetService.focusedEditor?.viewModel?.selectedCell;
                 if (selectedCell) {
                     selectedCell.outputVisible = !selectedCell.outputVisible;
                 }
@@ -444,9 +455,9 @@ export class NotebookCellActionContribution implements MenuContribution, Command
         });
 
         commands.registerCommand(NotebookCellCommands.CHANGE_CELL_LANGUAGE, {
-            isVisible: () => !!this.notebookEditorWidgetService.focusedEditor?.model?.selectedCell,
+            isVisible: () => !!this.notebookEditorWidgetService.focusedEditor?.viewModel?.selectedCell,
             execute: async (notebook?: NotebookModel, cell?: NotebookCellModel) => {
-                const selectedCell = cell ?? this.notebookEditorWidgetService.focusedEditor?.model?.selectedCell;
+                const selectedCell = cell ?? this.notebookEditorWidgetService.focusedEditor?.viewModel?.selectedCell;
                 const activeNotebook = notebook ?? this.notebookEditorWidgetService.focusedEditor?.model;
                 if (!selectedCell || !activeNotebook) {
                     return;
@@ -475,7 +486,7 @@ export class NotebookCellActionContribution implements MenuContribution, Command
 
         commands.registerCommand(NotebookCellCommands.TOGGLE_LINE_NUMBERS, {
             execute: () => {
-                const selectedCell = this.notebookEditorWidgetService.focusedEditor?.model?.selectedCell;
+                const selectedCell = this.notebookEditorWidgetService.focusedEditor?.viewModel?.selectedCell;
                 if (selectedCell) {
                     const currentLineNumber = selectedCell.editorOptions?.lineNumbers;
                     selectedCell.editorOptions = { ...selectedCell.editorOptions, lineNumbers: !currentLineNumber || currentLineNumber === 'off' ? 'on' : 'off' };
@@ -498,7 +509,7 @@ export class NotebookCellActionContribution implements MenuContribution, Command
     }
 
     protected getSelectedCell(): NotebookCellModel | undefined {
-        return this.notebookEditorWidgetService.focusedEditor?.model?.selectedCell;
+        return this.notebookEditorWidgetService.focusedEditor?.viewModel?.selectedCell;
     }
 
     registerKeybindings(keybindings: KeybindingRegistry): void {

package/src/browser/contributions/notebook-label-provider-contribution.ts

@@ -21,6 +21,7 @@ import { NotebookService } from '../service/notebook-service';
 import { NotebookCellOutlineNode } from './notebook-outline-contribution';
 import type Token = require('markdown-it/lib/token');
 import markdownit = require('@theia/core/shared/markdown-it');
+import * as markdownitemoji from '@theia/core/shared/markdown-it-emoji';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { URI } from '@theia/core';
 
@@ -33,7 +34,7 @@ export class NotebookLabelProviderContribution implements LabelProviderContribut
     @inject(LabelProvider)
     protected readonly labelProvider: LabelProvider;
 
-    protected markdownIt = markdownit();
+    protected markdownIt = markdownit().use(markdownitemoji.full);
 
     canHandle(element: object): number {
         if (NotebookCellOutlineNode.is(element)) {

package/src/browser/contributions/notebook-outline-contribution.ts

@@ -24,6 +24,7 @@ import { NotebookEditorWidget } from '../notebook-editor-widget';
 import { DisposableCollection, isObject, URI } from '@theia/core';
 import { CellKind, CellUri } from '../../common';
 import { NotebookService } from '../service/notebook-service';
+import { NotebookViewModel } from '../view-model/notebook-view-model';
 export interface NotebookCellOutlineNode extends OutlineSymbolInformationNode {
     uri: URI;
 }
@@ -77,36 +78,37 @@ export class NotebookOutlineContribution implements FrontendApplicationContribut
             }));
             if (editor.model) {
                 this.editorModelListeners.dispose();
-                this.editorModelListeners.push(editor.model.onDidChangeSelectedCell(() => {
+                this.editorModelListeners.push(editor.viewModel.onDidChangeSelectedCell(() => {
                     if (editor === this.currentEditor) {
                         this.updateOutline(editor);
                     }
                 }));
-                const roots = editor && editor.model && await this.createRoots(editor.model);
+                const roots = editor && editor.model && await this.createRoots(editor.model, editor.viewModel);
                 this.outlineViewService.publish(roots || []);
             }
         }
     }
 
-    protected async createRoots(model: NotebookModel): Promise<OutlineSymbolInformationNode[] | undefined> {
+    protected async createRoots(model: NotebookModel, viewModel: NotebookViewModel): Promise<OutlineSymbolInformationNode[] | undefined> {
         return model.cells.map(cell => ({
             id: cell.uri.toString(),
             iconClass: cell.cellKind === CellKind.Markup ? codicon('markdown') : codicon('code'),
             parent: undefined,
             children: [],
-            selected: model.selectedCell === cell,
+            selected: viewModel.selectedCell === cell,
             expanded: false,
             uri: cell.uri,
         } as NotebookCellOutlineNode));
     }
 
-    selectCell(node: object): void {
+    protected selectCell(node: object): void {
         if (NotebookCellOutlineNode.is(node)) {
             const parsed = CellUri.parse(node.uri);
             const model = parsed && this.notebookService.getNotebookEditorModel(parsed.notebook);
+            const viewModel = this.currentEditor?.viewModel;
             const cell = model?.cells.find(c => c.handle === parsed?.handle);
             if (model && cell) {
-                model.setSelectedCell(cell);
+                viewModel?.setSelectedCell(cell);
             }
         }
     }

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

@@ -33,10 +33,8 @@ export class NotebookStatusBarContribution implements WidgetStatusBarContributio
     }
 
     activate(statusBar: StatusBar, widget: NotebookEditorWidget): void {
-        widget.ready.then(model => {
-            this.onDeactivate = model.onDidChangeSelectedCell(() => {
-                this.updateStatusbar(statusBar, widget);
-            });
+        this.onDeactivate = widget.viewModel.onDidChangeSelectedCell(() => {
+            this.updateStatusbar(statusBar, widget);
         });
         this.updateStatusbar(statusBar, widget);
     }
@@ -48,12 +46,12 @@ export class NotebookStatusBarContribution implements WidgetStatusBarContributio
 
     protected async updateStatusbar(statusBar: StatusBar, editor?: NotebookEditorWidget): Promise<void> {
         const model = await editor?.ready;
-        if (!model || model.cells.length === 0 || !model.selectedCell) {
+        if (!model || model.cells.length === 0 || !editor?.viewModel.selectedCell) {
             statusBar.removeElement(NOTEBOOK_CELL_SELECTION_STATUS_BAR_ID);
             return;
         }
 
-        const selectedCellIndex = model.cells.indexOf(model.selectedCell) + 1;
+        const selectedCellIndex = model.cells.indexOf(editor.viewModel.selectedCell) + 1;
 
         statusBar.setElement(NOTEBOOK_CELL_SELECTION_STATUS_BAR_ID, {
             text: nls.localizeByDefault('Cell {0} of {1}', selectedCellIndex, model.cells.length),

package/src/browser/index.ts

@@ -26,3 +26,4 @@ export * from './service/notebook-renderer-messaging-service';
 export * from './service/notebook-cell-editor-service';
 export * from './renderers/cell-output-webview';
 export * from './notebook-types';
+export * from './notebook-editor-split-contribution';

package/src/browser/notebook-cell-open-handler.ts

@@ -44,9 +44,9 @@ export class NotebookCellOpenHandler implements OpenHandler {
 
         const executionCount = parseInt(executionCountParam);
 
-        this.notebookEditorWidgetService.currentEditor?.model?.cells
-            .find(c => c.metadata.execution_count === executionCount)
-            ?.requestFocusEditor(parseInt(lineParam));
+        const cell = this.notebookEditorWidgetService.currentEditor?.model?.cells
+            .find(c => c.metadata.execution_count === executionCount);
+        this.notebookEditorWidgetService.currentEditor?.viewModel.cellViewModels.get(cell?.handle ?? -1)?.requestFocusEditor();
     }
 
 }

package/src/browser/notebook-editor-split-contribution.ts

@@ -0,0 +1,51 @@
+// *****************************************************************************
+// Copyright (C) 2025 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 } from '@theia/core/shared/inversify';
+import { Widget, DockLayout } from '@theia/core/lib/browser';
+import { SplitEditorContribution } from '@theia/editor/lib/browser/split-editor-contribution';
+import { NotebookEditorWidget } from './notebook-editor-widget';
+import { NotebookOpenHandler } from './notebook-open-handler';
+
+/**
+ * Implementation of SplitEditorContribution for notebook editors (NotebookEditorWidget).
+ * Delegates to NotebookOpenHandler.openToSide which handles counter management for splits.
+ */
+@injectable()
+export class NotebookEditorSplitContribution implements SplitEditorContribution<NotebookEditorWidget> {
+
+    @inject(NotebookOpenHandler)
+    protected readonly notebookOpenHandler: NotebookOpenHandler;
+
+    canHandle(widget: Widget): number {
+        return widget instanceof NotebookEditorWidget ? 100 : 0;
+    }
+
+    async split(widget: NotebookEditorWidget, splitMode: DockLayout.InsertMode): Promise<NotebookEditorWidget | undefined> {
+        const uri = widget.getResourceUri();
+        if (!uri) {
+            return undefined;
+        }
+
+        const newNotebook = await this.notebookOpenHandler.openToSide(uri, {
+            notebookType: widget.notebookType,
+            widgetOptions: { mode: splitMode, ref: widget }
+        });
+
+        return newNotebook;
+    }
+}
+

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

@@ -17,7 +17,7 @@
 import { nls, URI } from '@theia/core';
 import { WidgetFactory, NavigatableWidgetOptions, LabelProvider } from '@theia/core/lib/browser';
 import { inject, injectable } from '@theia/core/shared/inversify';
-import { NotebookEditorWidget, NotebookEditorWidgetContainerFactory, NotebookEditorProps } from './notebook-editor-widget';
+import { NotebookEditorWidget, NotebookEditorWidgetContainerFactory, NotebookEditorProps, NOTEBOOK_EDITOR_ID_PREFIX } from './notebook-editor-widget';
 import { NotebookService } from './service/notebook-service';
 import { NotebookModelResolverService } from './service/notebook-model-resolver-service';
 import { Deferred } from '@theia/core/lib/common/promise-util';
@@ -29,6 +29,13 @@ export interface NotebookEditorWidgetOptions extends NavigatableWidgetOptions {
 
 @injectable()
 export class NotebookEditorWidgetFactory implements WidgetFactory {
+
+    static createID(uri: URI, counter?: number): string {
+        return NOTEBOOK_EDITOR_ID_PREFIX
+            + uri.toString()
+            + (counter !== undefined ? `:${counter}` : '');
+    }
+
     readonly id: string = NotebookEditorWidget.ID;
 
     @inject(NotebookService)
@@ -53,6 +60,9 @@ export class NotebookEditorWidgetFactory implements WidgetFactory {
 
         const editor = await this.createEditor(uri, options.notebookType);
 
+        // Set the widget ID with counter to support multiple instances
+        editor.id = NotebookEditorWidgetFactory.createID(uri, options.counter);
+
         this.setLabels(editor, uri);
         const labelListener = this.labelProvider.onDidChange(event => {
             if (event.affects(uri)) {

package/src/browser/notebook-editor-widget.tsx

@@ -37,6 +37,7 @@ import { NotebookFindWidget } from './view/notebook-find-widget';
 import debounce = require('@theia/core/shared/lodash.debounce');
 import { CellOutputWebview, CellOutputWebviewFactory } from './renderers/cell-output-webview';
 import { NotebookCellOutputModel } from './view-model/notebook-cell-output-model';
+import { NotebookViewModel } from './view-model/notebook-view-model';
 const PerfectScrollbar = require('react-perfect-scrollbar');
 
 export const NotebookEditorWidgetContainerFactory = Symbol('NotebookEditorWidgetContainerFactory');
@@ -49,6 +50,8 @@ export function createNotebookEditorWidgetContainer(parent: interfaces.Container
     const cellOutputWebviewFactory: CellOutputWebviewFactory = parent.get(CellOutputWebviewFactory);
     child.bind(CellOutputWebview).toConstantValue(cellOutputWebviewFactory());
 
+    child.bind(NotebookViewModel).toSelf().inSingletonScope();
+
     child.bind(NotebookContextManager).toSelf().inSingletonScope();
     child.bind(NotebookMainToolbarRenderer).toSelf().inSingletonScope();
     child.bind(NotebookCellToolbarFactory).toSelf().inSingletonScope();
@@ -113,6 +116,9 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     @inject(CellOutputWebview)
     protected readonly cellOutputWebview: CellOutputWebview;
 
+    @inject(NotebookViewModel)
+    protected readonly _viewModel: NotebookViewModel;
+
     protected readonly onDidChangeModelEmitter = new Emitter<void>();
     readonly onDidChangeModel = this.onDidChangeModelEmitter.event;
 
@@ -161,9 +167,16 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         return this._model;
     }
 
+    get viewModel(): NotebookViewModel {
+        return this._viewModel;
+    }
+
     @postConstruct()
     protected init(): void {
-        this.id = NOTEBOOK_EDITOR_ID_PREFIX + this.props.uri.toString();
+        // ID is set by NotebookEditorWidgetFactory to include counter for multiple instances
+        if (!this.id) {
+            this.id = NOTEBOOK_EDITOR_ID_PREFIX + this.props.uri.toString();
+        }
 
         this.scrollOptions = {
             suppressScrollY: true
@@ -181,7 +194,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         this.ready.then(model => {
             if (model.cells.length === 1 && model.cells[0].source === '') {
                 this.commandRegistry.executeCommand(NotebookCellCommands.EDIT_COMMAND.id, model, model.cells[0]);
-                model.setSelectedCell(model.cells[0]);
+                this.viewModel.setSelectedCell(model.cells[0]);
             }
             model.onDidChangeContent(changeEvents => {
                 const cellEvent = changeEvents.filter(event => event.kind === NotebookCellsChangeType.Move || event.kind === NotebookCellsChangeType.ModelChange);
@@ -198,6 +211,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
 
     protected async waitForData(): Promise<NotebookModel> {
         this._model = await this.props.notebookData;
+        this.viewModel.initDataModel(this._model);
         this.cellOutputWebview.init(this._model, this);
         this.saveable.delegate = this._model;
         this.toDispose.push(this._model);
@@ -225,7 +239,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         }
         // Ensure that the model is loaded before adding the editor
         this.notebookEditorService.addNotebookEditor(this);
-        this._model.selectedCell = this._model.cells[0];
+        this.viewModel.selectedCell = this._model.cells[0];
         this.update();
         this.notebookContextManager.init(this);
         return this._model;
@@ -286,6 +300,7 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
                             {this.cellOutputWebview.render()}
                             <NotebookCellListView renderers={this.renderers}
                                 notebookModel={this._model}
+                                notebookViewModel={this.viewModel}
                                 notebookContext={this.notebookContextManager}
                                 toolbarRenderer={this.cellToolbarFactory}
                                 commandRegistry={this.commandRegistry}

package/src/browser/notebook-frontend-module.ts

@@ -55,11 +55,16 @@ import { NotebookCellStatusBarService } from './service/notebook-cell-status-bar
 import { MonacoEditorModelFilter } from '@theia/monaco/lib/browser/monaco-text-model-service';
 import { ActiveMonacoEditorContribution } from '@theia/monaco/lib/browser/monaco-editor-service';
 import { NotebookCellOpenHandler } from './notebook-cell-open-handler';
+import { SplitEditorContribution } from '@theia/editor/lib/browser/split-editor-contribution';
+import { NotebookEditorSplitContribution } from './notebook-editor-split-contribution';
 
 export default new ContainerModule(bind => {
     bind(NotebookColorContribution).toSelf().inSingletonScope();
     bind(ColorContribution).toService(NotebookColorContribution);
 
+    bind(NotebookEditorSplitContribution).toSelf().inSingletonScope();
+    bind(SplitEditorContribution).toService(NotebookEditorSplitContribution);
+
     bind(NotebookOpenHandler).toSelf().inSingletonScope();
     bind(OpenHandler).toService(NotebookOpenHandler);
     bind(NotebookCellOpenHandler).toSelf().inSingletonScope();

package/src/browser/notebook-open-handler.ts

@@ -24,6 +24,7 @@ import { NotebookEditorWidgetOptions } from './notebook-editor-widget-factory';
 
 export interface NotebookWidgetOpenerOptions extends WidgetOpenerOptions {
     notebookType?: string;
+    counter?: number;
 }
 
 @injectable()
@@ -91,24 +92,31 @@ export class NotebookOpenHandler extends NavigatableWidgetOpenHandler<NotebookEd
 
     protected override createWidgetOptions(uri: URI, options?: NotebookWidgetOpenerOptions): NotebookEditorWidgetOptions {
         const widgetOptions = super.createWidgetOptions(uri, options);
-        if (options?.notebookType) {
-            return {
-                notebookType: options.notebookType,
-                ...widgetOptions
-            };
-        }
-        const defaultHandler = getDefaultHandler(uri, this.preferenceService);
-        const notebookType = this.notebookTypes.find(type => type.type === defaultHandler)
-            || this.findHighestPriorityType(uri);
+        const notebookType = options?.notebookType
+            ? options.notebookType
+            : (this.notebookTypes.find(type => type.type === getDefaultHandler(uri, this.preferenceService))
+                || this.findHighestPriorityType(uri))?.type;
+
         if (!notebookType) {
             throw new Error('No notebook types registered for uri: ' + uri.toString());
         }
         return {
-            notebookType: notebookType.type,
-            ...widgetOptions
+            notebookType,
+            ...widgetOptions,
+            counter: options?.counter ?? widgetOptions.counter
         };
     }
 
+    /**
+     * Opens a notebook to the side of the current notebook.
+     * Uses timestamp to ensure unique widget IDs for multiple instances without needing to track state.
+     */
+    openToSide(uri: URI, options?: NotebookWidgetOpenerOptions): Promise<NotebookEditorWidget> {
+        const counter = Date.now();
+        const splitOptions: NotebookWidgetOpenerOptions = { widgetOptions: { mode: 'split-right' }, ...options, counter };
+        return this.open(uri, splitOptions);
+    }
+
     protected matches(selectors: readonly NotebookFileSelector[], resource: URI): boolean {
         return selectors.some(selector => this.selectorMatches(selector, resource));
     }

package/src/browser/notebook-types.ts

@@ -105,6 +105,7 @@ export type SelectionState = SelectionHandleState | SelectionIndexState;
 export interface NotebookModelWillAddRemoveEvent {
     readonly newCellIds?: number[];
     readonly rawEvent: NotebookCellsModelChangedEvent<CellData>;
+    readonly externalEvent?: boolean;
 };
 
 export interface CellOutputEdit {