improved focusing of the notebook cell editors

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

@@ -100,6 +100,9 @@ export class NotebookCellModel implements NotebookCell, Disposable {
     protected readonly onDidRequestCellEditChangeEmitter = new Emitter<boolean>();
     readonly onDidRequestCellEditChange = this.onDidRequestCellEditChangeEmitter.event;
 
+    protected readonly onWillFocusCellEditorEmitter = new Emitter<void>();
+    readonly onWillFocusCellEditor = this.onWillFocusCellEditorEmitter.event;
+
     @inject(NotebookCellModelProps)
     protected readonly props: NotebookCellModelProps;
     @inject(MonacoTextModelService)
@@ -213,6 +216,11 @@ export class NotebookCellModel implements NotebookCell, Disposable {
         this.onDidRequestCellEditChangeEmitter.fire(false);
     }
 
+    requestFocusEditor(): void {
+        this.requestEdit();
+        this.onWillFocusCellEditorEmitter.fire();
+    }
+
     spliceNotebookCellOutputs(splice: NotebookCellOutputsSplice): void {
         if (splice.deleteCount > 0 && splice.newOutputs.length > 0) {
             const commonLen = Math.min(splice.deleteCount, splice.newOutputs.length);

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

@@ -344,6 +344,10 @@ export class NotebookModel implements Saveable, Disposable {
 
         this.onDidAddOrRemoveCellEmitter.fire({ rawEvent: { kind: NotebookCellsChangeType.ModelChange, changes }, newCellIds: cells.map(cell => cell.handle) });
         this.onDidChangeContentEmitter.fire([{ kind: NotebookCellsChangeType.ModelChange, changes }]);
+        if (cells.length > 0) {
+            this.setSelectedCell(cells[cells.length - 1]);
+            cells[cells.length - 1].requestEdit();
+        }
     }
 
     protected changeCellInternalMetadataPartial(cell: NotebookCellModel, internalMetadata: NullablePartialNotebookCellInternalMetadata): void {

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

@@ -53,6 +53,16 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
 
     override componentDidMount(): void {
         this.disposeEditor();
+        this.toDispose.push(this.props.cell.onWillFocusCellEditor(() => {
+            this.editor?.getControl().focus();
+        }));
+        this.toDispose.push(this.props.notebookModel.onDidChangeSelectedCell(() => {
+            if (this.props.notebookModel.selectedCell !== this.props.cell && this.editor?.getControl().hasTextFocus()) {
+                if (document.activeElement && 'blur' in document.activeElement) {
+                    (document.activeElement as HTMLElement).blur();
+                }
+            }
+        }));
         if (!this.props.notebookViewportService || (this.container && this.props.notebookViewportService.isElementInViewport(this.container))) {
             this.initEditor();
         } else {
@@ -103,6 +113,9 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             this.toDispose.push(this.editor.getControl().onDidBlurEditorText(() => {
                 this.props.notebookContextManager.onDidEditorTextFocus(false);
             }));
+            if (cell.editing && notebookModel.selectedCell === cell) {
+                this.editor.getControl().focus();
+            }
         }
     }
 

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

@@ -76,7 +76,7 @@ export class NotebookCodeCellRenderer implements CellRenderer {
                         notebookContextManager={this.notebookContextManager}
                         notebookViewportService={this.notebookViewportService}
                         fontInfo={this.getOrCreateMonacoFontInfo()} />
-                    <NotebookCodeCellStatus cell={cell} executionStateService={this.executionStateService}></NotebookCodeCellStatus>
+                    <NotebookCodeCellStatus cell={cell} executionStateService={this.executionStateService} onClick={() => cell.requestFocusEditor()}></NotebookCodeCellStatus>
                 </div >
             </div >
             <div className='theia-notebook-cell-with-sidebar'>
@@ -110,6 +110,7 @@ export class NotebookCodeCellRenderer implements CellRenderer {
 export interface NotebookCodeCellStatusProps {
     cell: NotebookCellModel;
     executionStateService: NotebookExecutionStateService;
+    onClick: () => void;
 }
 
 export interface NotebookCodeCellStatusState {
@@ -152,7 +153,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
     }
 
     override render(): React.ReactNode {
-        return <div className='notebook-cell-status'>
+        return <div className='notebook-cell-status' onClick={() => this.props.onClick()}>
             <div className='notebook-cell-status-left'>
                 {this.renderExecutionState()}
             </div>

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

@@ -54,7 +54,7 @@ interface MarkdownCellProps {
 }
 
 function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager }: MarkdownCellProps): React.JSX.Element {
-    const [editMode, setEditMode] = React.useState(false);
+    const [editMode, setEditMode] = React.useState(cell.editing);
 
     React.useEffect(() => {
         const listener = cell.onDidRequestCellEditChange(cellEdit => setEditMode(cellEdit));