@theia/notebook 1.53.0-next.6 → 1.53.0-next.64

package/src/browser/style/index.css

@@ -114,7 +114,8 @@
   margin: 0px 16px 0px 10px;
 }
 
-.theia-notebook-cell.focused .theia-notebook-cell-editor-container {
+/* Only mark an editor cell focused if the editor has focus */
+.theia-notebook-cell-editor-container:has(.monaco-editor.focused) {
   outline-color: var(--theia-notebook-focusedEditorBorder);
 }
 
@@ -209,6 +210,10 @@
   overflow: hidden;
 }
 
+.theia-notebook-main-container:focus {
+  outline: none;
+}
+
 .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);
@@ -272,10 +277,10 @@
   border: 1px solid var(--theia-notebook-cellToolbarSeparator);
   background-color: var(--theia-editor-background);
   color: var(--theia-foreground);
-  vertical-align: middle;
-  text-align: center;
+  display: flex;
   height: 24px;
   margin: 0 8px;
+  padding: 2px 4px;
 }
 
 .theia-notebook-add-cell-button:hover {
@@ -286,10 +291,18 @@
   background-color: var(--theia-toolbar-active);
 }
 
-.theia-notebook-add-cell-button-icon {
+.theia-notebook-add-cell-button>* {
   vertical-align: middle;
 }
 
+.theia-notebook-add-cell-button-icon::before {
+  font: normal normal normal 14px/1 codicon;
+}
+
+.theia-notebook-add-cell-button-text {
+  margin: 1px 0 0 4px;
+}
+
 .theia-notebook-cell-output-webview {
   padding: 5px 0px;
   margin: 0px 15px 0px 9px;

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

@@ -30,13 +30,15 @@ import { EditorExtensionsRegistry } from '@theia/monaco-editor-core/esm/vs/edito
 import { ModelDecorationOptions } from '@theia/monaco-editor-core/esm/vs/editor/common/model/textModel';
 import { IModelDeltaDecoration, OverviewRulerLane, TrackedRangeStickiness } from '@theia/monaco-editor-core/esm/vs/editor/common/model';
 import { animationFrame } from '@theia/core/lib/browser';
+import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
 
 interface CellEditorProps {
-    notebookModel: NotebookModel,
-    cell: NotebookCellModel,
-    monacoServices: MonacoEditorServices,
+    notebookModel: NotebookModel;
+    cell: NotebookCellModel;
+    monacoServices: MonacoEditorServices;
     notebookContextManager: NotebookContextManager;
-    notebookViewportService?: NotebookViewportService,
+    notebookCellEditorService: NotebookCellEditorService;
+    notebookViewportService?: NotebookViewportService;
     fontInfo?: BareFontInfo;
 }
 
@@ -124,20 +126,7 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             animationFrame().then(() => this.setMatches());
         }));
 
-        this.toDispose.push(this.props.cell.onDidSelectFindMatch(match => {
-            const editorDomNode = this.editor?.getControl().getDomNode();
-            if (editorDomNode) {
-                editorDomNode.scrollIntoView({
-                    behavior: 'instant',
-                    block: 'center'
-                });
-            } else {
-                this.container?.scrollIntoView({
-                    behavior: 'instant',
-                    block: 'center'
-                });
-            }
-        }));
+        this.toDispose.push(this.props.cell.onDidSelectFindMatch(match => this.centerEditorInView()));
 
         this.toDispose.push(this.props.notebookModel.onDidChangeSelectedCell(e => {
             if (e.cell !== this.props.cell && this.editor?.getControl().hasTextFocus()) {
@@ -155,6 +144,10 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             });
             this.toDispose.push(disposable);
         }
+
+        this.toDispose.push(this.props.cell.onDidRequestCenterEditor(() => {
+            this.centerEditorInView();
+        }));
     }
 
     override componentWillUnmount(): void {
@@ -162,10 +155,28 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
     }
 
     protected disposeEditor(): void {
+        if (this.editor) {
+            this.props.notebookCellEditorService.editorDisposed(this.editor.uri);
+        }
         this.toDispose.dispose();
         this.toDispose = new DisposableCollection();
     }
 
+    protected centerEditorInView(): void {
+        const editorDomNode = this.editor?.getControl().getDomNode();
+        if (editorDomNode) {
+            editorDomNode.scrollIntoView({
+                behavior: 'instant',
+                block: 'center'
+            });
+        } else {
+            this.container?.scrollIntoView({
+                behavior: 'instant',
+                block: 'center'
+            });
+        }
+    }
+
     protected async initEditor(): Promise<void> {
         const { cell, notebookModel, monacoServices } = this.props;
         if (this.container) {
@@ -191,7 +202,14 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             }));
             this.toDispose.push(this.editor.getControl().onDidFocusEditorText(() => {
                 this.props.notebookModel.setSelectedCell(cell, false);
+                this.props.notebookCellEditorService.editorFocusChanged(this.editor);
+            }));
+            this.toDispose.push(this.editor.getControl().onDidBlurEditorText(() => {
+                if (this.props.notebookCellEditorService.getActiveCell()?.uri.toString() === this.props.cell.uri.toString()) {
+                    this.props.notebookCellEditorService.editorFocusChanged(undefined);
+                }
             }));
+
             this.toDispose.push(this.editor.getControl().onDidChangeCursorSelection(e => {
                 const selectedText = this.editor!.getControl().getModel()!.getValueInRange(e.selection);
                 this.props.notebookModel.selectedText = selectedText;
@@ -206,10 +224,11 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
                     this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_LAST_LINE, false);
                 }
             }));
+            this.props.notebookCellEditorService.editorCreated(uri, this.editor);
+            this.setMatches();
             if (cell.editing && notebookModel.selectedCell === cell) {
                 this.editor.getControl().focus();
             }
-            this.setMatches();
         }
     }
 

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

@@ -18,9 +18,9 @@ import { CellEditType, CellKind, NotebookCellsChangeType } from '../../common';
 import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { NotebookModel } from '../view-model/notebook-model';
 import { NotebookCellToolbarFactory } from './notebook-cell-toolbar-factory';
-import { animationFrame, codicon, onDomEvent } from '@theia/core/lib/browser';
-import { CommandRegistry, DisposableCollection, nls } from '@theia/core';
-import { NotebookCommands } from '../contributions/notebook-actions-contribution';
+import { animationFrame, onDomEvent } from '@theia/core/lib/browser';
+import { CommandRegistry, DisposableCollection, MenuModelRegistry, MenuNode, nls } from '@theia/core';
+import { NotebookCommands, NotebookMenus } from '../contributions/notebook-actions-contribution';
 import { NotebookCellActionContribution } from '../contributions/notebook-cell-actions-contribution';
 import { NotebookContextManager } from '../service/notebook-context-manager';
 
@@ -34,7 +34,8 @@ interface CellListProps {
     notebookModel: NotebookModel;
     notebookContext: NotebookContextManager;
     toolbarRenderer: NotebookCellToolbarFactory;
-    commandRegistry: CommandRegistry
+    commandRegistry: CommandRegistry;
+    menuRegistry: MenuModelRegistry;
 }
 
 interface NotebookCellListState {
@@ -113,8 +114,9 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                 .map((cell, index) =>
                     <React.Fragment key={'cell-' + cell.handle}>
                         <NotebookCellDivider
+                            menuRegistry={this.props.menuRegistry}
                             isVisible={() => this.isEnabled()}
-                            onAddNewCell={(kind: CellKind) => this.onAddNewCell(kind, index)}
+                            onAddNewCell={(commandId: string) => this.onAddNewCell(commandId, index)}
                             onDrop={e => this.onDrop(e, index)}
                             onDragOver={e => this.onDragOver(e, cell, 'top')} />
                         {this.shouldRenderDragOverIndicator(cell, 'top') && <CellDropIndicator />}
@@ -155,8 +157,9 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                 )
             }
             <NotebookCellDivider
+                menuRegistry={this.props.menuRegistry}
                 isVisible={() => this.isEnabled()}
-                onAddNewCell={(kind: CellKind) => this.onAddNewCell(kind, this.props.notebookModel.cells.length)}
+                onAddNewCell={(commandId: string) => this.onAddNewCell(commandId, this.props.notebookModel.cells.length)}
                 onDrop={e => this.onDrop(e, this.props.notebookModel.cells.length - 1)}
                 onDragOver={e => this.onDragOver(e, this.props.notebookModel.cells[this.props.notebookModel.cells.length - 1], 'bottom')} />
         </ul>;
@@ -221,11 +224,11 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
         this.setState({ ...this.state, dragOverIndicator: undefined });
     }
 
-    protected onAddNewCell(kind: CellKind, index: number): void {
+    protected onAddNewCell(commandId: string, index: number): void {
         if (this.isEnabled()) {
-            this.props.commandRegistry.executeCommand(NotebookCommands.ADD_NEW_CELL_COMMAND.id,
+            this.props.commandRegistry.executeCommand(NotebookCommands.CHANGE_SELECTED_CELL.id, index - 1);
+            this.props.commandRegistry.executeCommand(commandId,
                 this.props.notebookModel,
-                kind,
                 index
             );
         }
@@ -242,24 +245,31 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
 
 export interface NotebookCellDividerProps {
     isVisible: () => boolean;
-    onAddNewCell: (type: CellKind) => void;
+    onAddNewCell: (commandId: string) => void;
     onDrop: (event: React.DragEvent<HTMLLIElement>) => void;
     onDragOver: (event: React.DragEvent<HTMLLIElement>) => void;
+    menuRegistry: MenuModelRegistry;
 }
 
-export function NotebookCellDivider({ isVisible, onAddNewCell, onDrop, onDragOver }: NotebookCellDividerProps): React.JSX.Element {
+export function NotebookCellDivider({ isVisible, onAddNewCell, onDrop, onDragOver, menuRegistry }: NotebookCellDividerProps): React.JSX.Element {
     const [hover, setHover] = React.useState(false);
 
+    const menuPath = NotebookMenus.NOTEBOOK_MAIN_TOOLBAR_CELL_ADD_GROUP;
+    const menuItems = menuRegistry.getMenuNode(menuPath).children;
+
+    const renderItem = (item: MenuNode): React.ReactNode => <button
+        key={item.id}
+        className='theia-notebook-add-cell-button'
+        onClick={() => onAddNewCell(item.command || '')}
+        title={nls.localizeByDefault(`Add ${item.label} Cell`)}
+    >
+        <div className={item.icon + ' theia-notebook-add-cell-button-icon'} />
+        <div className='theia-notebook-add-cell-button-text'>{item.label}</div>
+    </button>;
+
     return <li className='theia-notebook-cell-divider' onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onDrop={onDrop} onDragOver={onDragOver}>
         {hover && isVisible() && <div className='theia-notebook-add-cell-buttons'>
-            <button className='theia-notebook-add-cell-button' onClick={() => onAddNewCell(CellKind.Code)} title={nls.localizeByDefault('Add Code Cell')}>
-                <div className={codicon('add') + ' theia-notebook-add-cell-button-icon'} />
-                {nls.localizeByDefault('Code')}
-            </button>
-            <button className='theia-notebook-add-cell-button' onClick={() => onAddNewCell(CellKind.Markup)} title={nls.localizeByDefault('Add Markdown Cell')}>
-                <div className={codicon('add') + ' theia-notebook-add-cell-button-icon'} />
-                {nls.localizeByDefault('Markdown')}
-            </button>
+            {menuItems.map((item: MenuNode) => renderItem(item))}
         </div>}
     </li>;
 }

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

@@ -35,6 +35,7 @@ import { EditorPreferences } from '@theia/editor/lib/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';
+import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
 
 @injectable()
 export class NotebookCodeCellRenderer implements CellRenderer {
@@ -62,6 +63,9 @@ export class NotebookCodeCellRenderer implements CellRenderer {
     @inject(EditorPreferences)
     protected readonly editorPreferences: EditorPreferences;
 
+    @inject(NotebookCellEditorService)
+    protected readonly notebookCellEditorService: NotebookCellEditorService;
+
     @inject(CommandRegistry)
     protected readonly commandRegistry: CommandRegistry;
 
@@ -86,6 +90,7 @@ export class NotebookCodeCellRenderer implements CellRenderer {
                         monacoServices={this.monacoServices}
                         notebookContextManager={this.notebookContextManager}
                         notebookViewportService={this.notebookViewportService}
+                        notebookCellEditorService={this.notebookCellEditorService}
                         fontInfo={this.notebookOptionsService.editorFontInfo} />
                     <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
                         commandRegistry={this.commandRegistry}

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

@@ -29,6 +29,7 @@ import { NotebookOptionsService } from '../service/notebook-options';
 import { NotebookCodeCellStatus } from './notebook-code-cell-view';
 import { NotebookEditorFindMatch, NotebookEditorFindMatchOptions } from './notebook-find-widget';
 import * as mark from 'advanced-mark.js';
+import { NotebookCellEditorService } from '../service/notebook-cell-editor-service';
 
 @injectable()
 export class NotebookMarkdownCellRenderer implements CellRenderer {
@@ -47,6 +48,9 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
     @inject(NotebookOptionsService)
     protected readonly notebookOptionsService: NotebookOptionsService;
 
+    @inject(NotebookCellEditorService)
+    protected readonly notebookCellEditorService: NotebookCellEditorService;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
         return <MarkdownCell
             markdownRenderer={this.markdownRenderer}
@@ -55,7 +59,8 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
             notebookOptionsService={this.notebookOptionsService}
             cell={cell}
             notebookModel={notebookModel}
-            notebookContextManager={this.notebookContextManager} />;
+            notebookContextManager={this.notebookContextManager}
+            notebookCellEditorService={this.notebookCellEditorService} />;
     }
 
     renderDragImage(cell: NotebookCellModel): HTMLElement {
@@ -77,10 +82,11 @@ interface MarkdownCellProps {
     notebookModel: NotebookModel;
     notebookContextManager: NotebookContextManager;
     notebookOptionsService: NotebookOptionsService;
+    notebookCellEditorService: NotebookCellEditorService
 }
 
 function MarkdownCell({
-    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager, notebookOptionsService, commandRegistry
+    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager, notebookOptionsService, commandRegistry, notebookCellEditorService
 }: MarkdownCellProps): React.JSX.Element {
     const [editMode, setEditMode] = React.useState(cell.editing);
     let empty = false;
@@ -133,6 +139,7 @@ function MarkdownCell({
             <CellEditor notebookModel={notebookModel} cell={cell}
                 monacoServices={monacoServices}
                 notebookContextManager={notebookContextManager}
+                notebookCellEditorService={notebookCellEditorService}
                 fontInfo={notebookOptionsService.editorFontInfo} />
             <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
                 commandRegistry={commandRegistry}

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

@@ -126,6 +126,9 @@ export class NotebookCellModel implements NotebookCell, Disposable {
     protected readonly onDidSelectFindMatchEmitter = new Emitter<NotebookCodeEditorFindMatch>();
     readonly onDidSelectFindMatch: Event<NotebookCodeEditorFindMatch> = this.onDidSelectFindMatchEmitter.event;
 
+    protected onDidRequestCenterEditorEmitter = new Emitter<void>();
+    readonly onDidRequestCenterEditor = this.onDidRequestCenterEditorEmitter.event;
+
     @inject(NotebookCellModelProps)
     protected readonly props: NotebookCellModelProps;
 
@@ -299,6 +302,10 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this.onWillBlurCellEditorEmitter.fire();
     }
 
+    requestCenterEditor(): void {
+        this.onDidRequestCenterEditorEmitter.fire();
+    }
+
     spliceNotebookCellOutputs(splice: NotebookCellOutputsSplice): void {
         if (splice.deleteCount > 0 && splice.newOutputs.length > 0) {
             const commonLen = Math.min(splice.deleteCount, splice.newOutputs.length);