@theia/notebook 1.52.0 → 1.53.0-next.4

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

@@ -22,7 +22,8 @@ import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import {
     NOTEBOOK_CELL_MARKDOWN_EDIT_MODE, NOTEBOOK_CELL_TYPE,
     NotebookContextKeys, NOTEBOOK_CELL_EXECUTING, NOTEBOOK_EDITOR_FOCUSED,
-    NOTEBOOK_CELL_FOCUSED
+    NOTEBOOK_CELL_FOCUSED,
+    NOTEBOOK_CELL_LIST_FOCUSED
 } from './notebook-context-keys';
 import { ContextKeyService } from '@theia/core/lib/browser/context-key-service';
 import { NotebookExecutionService } from '../service/notebook-execution-service';
@@ -369,18 +370,25 @@ export class NotebookCellActionContribution implements MenuContribution, Command
                     return;
                 }
                 const language = await this.languageQuickPickService.pickEditorLanguage(selectedCell.language);
-                if (!language?.value || language.value === 'autoDetect') {
+                if (!language?.value || language.value === 'autoDetect' || language.value.id === selectedCell.language) {
                     return;
                 }
-                if (language.value.id === 'markdown') {
-                    selectedCell.language = 'markdown';
-                    changeCellType(activeNotebook, selectedCell, CellKind.Markup);
+                const isMarkdownCell = selectedCell.cellKind === CellKind.Markup;
+                const isMarkdownLanguage = language.value.id === 'markdown';
+                if (isMarkdownLanguage) {
+                    if (!isMarkdownCell) {
+                        changeCellType(activeNotebook, selectedCell, CellKind.Markup, language.value.id);
+                    }
                 } else {
-                    this.notebookEditorWidgetService.focusedEditor?.model?.applyEdits([{
-                        editType: CellEditType.CellLanguage,
-                        index: activeNotebook.cells.indexOf(selectedCell),
-                        language: language.value.id
-                    }], true);
+                    if (isMarkdownCell) {
+                        changeCellType(activeNotebook, selectedCell, CellKind.Code, language.value.id);
+                    } else {
+                        this.notebookEditorWidgetService.focusedEditor?.model?.applyEdits([{
+                            editType: CellEditType.CellLanguage,
+                            index: activeNotebook.cells.indexOf(selectedCell),
+                            language: language.value.id
+                        }], true);
+                    }
                 }
             }
         });
@@ -418,12 +426,12 @@ export class NotebookCellActionContribution implements MenuContribution, Command
             {
                 command: NotebookCellCommands.EDIT_COMMAND.id,
                 keybinding: 'Enter',
-                when: `!editorTextFocus && ${NOTEBOOK_EDITOR_FOCUSED} && ${NOTEBOOK_CELL_FOCUSED}`,
+                when: `!editorTextFocus && !inputFocus && ${NOTEBOOK_EDITOR_FOCUSED} && ${NOTEBOOK_CELL_FOCUSED}`,
             },
             {
                 command: NotebookCellCommands.STOP_EDIT_COMMAND.id,
                 keybinding: KeyCode.createKeyCode({ first: Key.ENTER, modifiers: [KeyModifier.Alt] }).toString(),
-                when: `editorTextFocus && ${NOTEBOOK_EDITOR_FOCUSED}`,
+                when: `editorTextFocus && !inputFocus && ${NOTEBOOK_EDITOR_FOCUSED}`,
             },
             {
                 command: NotebookCellCommands.STOP_EDIT_COMMAND.id,
@@ -433,12 +441,12 @@ export class NotebookCellActionContribution implements MenuContribution, Command
             {
                 command: NotebookCellCommands.EXECUTE_SINGLE_CELL_COMMAND.id,
                 keybinding: KeyCode.createKeyCode({ first: Key.ENTER, modifiers: [KeyModifier.CtrlCmd] }).toString(),
-                when: `${NOTEBOOK_EDITOR_FOCUSED} && ${NOTEBOOK_CELL_FOCUSED} && ${NOTEBOOK_CELL_TYPE} == 'code'`,
+                when: `${NOTEBOOK_CELL_LIST_FOCUSED} && ${NOTEBOOK_EDITOR_FOCUSED} && ${NOTEBOOK_CELL_FOCUSED} && ${NOTEBOOK_CELL_TYPE} == 'code'`,
             },
             {
                 command: NotebookCellCommands.EXECUTE_SINGLE_CELL_AND_FOCUS_NEXT_COMMAND.id,
                 keybinding: KeyCode.createKeyCode({ first: Key.ENTER, modifiers: [KeyModifier.Shift] }).toString(),
-                when: `${NOTEBOOK_EDITOR_FOCUSED} && ${NOTEBOOK_CELL_FOCUSED}`,
+                when: `${NOTEBOOK_CELL_LIST_FOCUSED} && ${NOTEBOOK_EDITOR_FOCUSED} && ${NOTEBOOK_CELL_FOCUSED}`,
             },
             {
                 command: NotebookCellCommands.CLEAR_OUTPUTS_COMMAND.id,

package/src/browser/contributions/notebook-undo-redo-handler.ts

@@ -0,0 +1,41 @@
+// *****************************************************************************
+// 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 } from '@theia/core/shared/inversify';
+import { ApplicationShell, UndoRedoHandler } from '@theia/core/lib/browser';
+import { NotebookEditorWidget } from '../notebook-editor-widget';
+
+@injectable()
+export class NotebookUndoRedoHandler implements UndoRedoHandler<NotebookEditorWidget> {
+
+    @inject(ApplicationShell)
+    protected readonly applicationShell: ApplicationShell;
+
+    priority = 200;
+    select(): NotebookEditorWidget | undefined {
+        const current = this.applicationShell.currentWidget;
+        if (current instanceof NotebookEditorWidget) {
+            return current;
+        }
+        return undefined;
+    }
+    undo(item: NotebookEditorWidget): void {
+        item.undo();
+    }
+    redo(item: NotebookEditorWidget): void {
+        item.redo();
+    }
+}

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

@@ -33,6 +33,8 @@ import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
 import { NotebookContextManager } from './service/notebook-context-manager';
 import { NotebookViewportService } from './view/notebook-viewport-service';
 import { NotebookCellCommands } from './contributions/notebook-cell-actions-contribution';
+import { NotebookFindWidget } from './view/notebook-find-widget';
+import debounce = require('lodash/debounce');
 const PerfectScrollbar = require('react-perfect-scrollbar');
 
 export const NotebookEditorWidgetContainerFactory = Symbol('NotebookEditorWidgetContainerFactory');
@@ -126,7 +128,16 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     protected readonly renderers = new Map<CellKind, CellRenderer>();
     protected _model?: NotebookModel;
     protected _ready: Deferred<NotebookModel> = new Deferred();
+    protected _findWidgetVisible = false;
+    protected _findWidgetRef = React.createRef<NotebookFindWidget>();
     protected scrollBarRef = React.createRef<{ updateScroll(): void }>();
+    protected debounceFind = debounce(() => {
+        this._findWidgetRef.current?.search({});
+    }, 30, {
+        trailing: true,
+        maxWait: 100,
+        leading: false
+    });
 
     get notebookType(): string {
         return this.props.notebookType;
@@ -177,6 +188,11 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
             // Wait one frame to ensure that the content has been rendered
             animationFrame().then(() => this.scrollBarRef.current?.updateScroll());
         }));
+        this.toDispose.push(this._model.onContentChanged(() => {
+            if (this._findWidgetVisible) {
+                this.debounceFind();
+            }
+        }));
         this.toDispose.push(this._model.onDidChangeReadOnly(readOnly => {
             if (readOnly) {
                 lock(this.title);
@@ -220,18 +236,41 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
     protected render(): ReactNode {
         if (this._model) {
             return <div className='theia-notebook-main-container'>
+                <div className='theia-notebook-overlay'>
+                    <NotebookFindWidget
+                        ref={this._findWidgetRef}
+                        hidden={!this._findWidgetVisible}
+                        onClose={() => {
+                            this._findWidgetVisible = false;
+                            this._model?.findMatches({
+                                activeFilters: [],
+                                matchCase: false,
+                                regex: false,
+                                search: '',
+                                wholeWord: false
+                            });
+                            this.update();
+                        }}
+                        onSearch={options => this._model?.findMatches(options) ?? []}
+                        onReplace={(matches, replaceText) => this._model?.replaceAll(matches, replaceText)}
+                    />
+                </div>
                 {this.notebookMainToolbarRenderer.render(this._model, this.node)}
-                <div className='theia-notebook-viewport' ref={(ref: HTMLDivElement) => this.viewportService.viewportElement = ref}>
+                <div
+                    className='theia-notebook-viewport'
+                    ref={(ref: HTMLDivElement) => this.viewportService.viewportElement = ref}
+                >
                     <PerfectScrollbar className='theia-notebook-scroll-container'
                         ref={this.scrollBarRef}
                         onScrollY={(e: HTMLDivElement) => this.viewportService.onScroll(e)}>
                         <NotebookCellListView renderers={this.renderers}
                             notebookModel={this._model}
+                            notebookContext={this.notebookContextManager}
                             toolbarRenderer={this.cellToolbarFactory}
                             commandRegistry={this.commandRegistry} />
                     </PerfectScrollbar>
                 </div>
-            </div >;
+            </div>;
         } else {
             return <div className='theia-notebook-main-container'>
                 <div className='theia-notebook-main-loading-indicator'></div>
@@ -260,6 +299,14 @@ export class NotebookEditorWidget extends ReactWidget implements Navigatable, Sa
         this.onDidChangeOutputInputFocusEmitter.fire(focused);
     }
 
+    showFindWidget(): void {
+        if (!this._findWidgetVisible) {
+            this._findWidgetVisible = true;
+            this.update();
+        }
+        this._findWidgetRef.current?.focusSearch(this._model?.selectedText);
+    }
+
     override dispose(): void {
         this.notebookContextManager.dispose();
         this.onDidChangeModelEmitter.dispose();

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

@@ -16,7 +16,7 @@
 import '../../src/browser/style/index.css';
 
 import { ContainerModule } from '@theia/core/shared/inversify';
-import { FrontendApplicationContribution, KeybindingContribution, LabelProviderContribution, OpenHandler, WidgetFactory } from '@theia/core/lib/browser';
+import { FrontendApplicationContribution, KeybindingContribution, LabelProviderContribution, OpenHandler, UndoRedoHandler, WidgetFactory } from '@theia/core/lib/browser';
 import { ColorContribution } from '@theia/core/lib/browser/color-application-contribution';
 import { NotebookOpenHandler } from './notebook-open-handler';
 import { CommandContribution, MenuContribution, ResourceResolver, } from '@theia/core';
@@ -46,6 +46,7 @@ import { NotebookOutputActionContribution } from './contributions/notebook-outpu
 import { NotebookClipboardService } from './service/notebook-clipboard-service';
 import { bindNotebookPreferences } from './contributions/notebook-preferences';
 import { NotebookOptionsService } from './service/notebook-options';
+import { NotebookUndoRedoHandler } from './contributions/notebook-undo-redo-handler';
 
 export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(NotebookColorContribution).toSelf().inSingletonScope();
@@ -108,4 +109,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
     bindNotebookPreferences(bind);
     bind(NotebookOptionsService).toSelf().inSingletonScope();
+
+    bind(NotebookUndoRedoHandler).toSelf().inSingletonScope();
+    bind(UndoRedoHandler).toService(NotebookUndoRedoHandler);
 });

package/src/browser/service/notebook-context-manager.ts

@@ -21,7 +21,7 @@ import { NotebookKernelService } from './notebook-kernel-service';
 import {
     NOTEBOOK_CELL_EDITABLE,
     NOTEBOOK_CELL_EXECUTING, NOTEBOOK_CELL_EXECUTION_STATE,
-    NOTEBOOK_CELL_FOCUSED, NOTEBOOK_CELL_MARKDOWN_EDIT_MODE,
+    NOTEBOOK_CELL_FOCUSED, NOTEBOOK_CELL_LIST_FOCUSED, NOTEBOOK_CELL_MARKDOWN_EDIT_MODE,
     NOTEBOOK_CELL_TYPE, NOTEBOOK_HAS_OUTPUTS, NOTEBOOK_KERNEL, NOTEBOOK_KERNEL_SELECTED,
     NOTEBOOK_OUTPUT_INPUT_FOCUSED,
     NOTEBOOK_VIEW_TYPE
@@ -85,7 +85,7 @@ export class NotebookContextManager {
 
         this.scopedStore.setContext(NOTEBOOK_HAS_OUTPUTS, !!widget.model?.cells.find(cell => cell.outputs.length > 0));
 
-        // Cell Selection realted keys
+        // Cell Selection related keys
         this.scopedStore.setContext(NOTEBOOK_CELL_FOCUSED, !!widget.model?.selectedCell);
         widget.model?.onDidChangeSelectedCell(e => {
             this.selectedCellChanged(e.cell);
@@ -144,8 +144,12 @@ export class NotebookContextManager {
         return this.contextKeyService.createOverlay(Object.entries(this.cellContexts.get(cellHandle) ?? {}));
     }
 
-    onDidEditorTextFocus(focus: boolean): void {
-        this.scopedStore.setContext('inputFocus', focus);
+    changeCellFocus(focus: boolean): void {
+        this.scopedStore.setContext(NOTEBOOK_CELL_FOCUSED, focus);
+    }
+
+    changeCellListFocus(focus: boolean): void {
+        this.scopedStore.setContext(NOTEBOOK_CELL_LIST_FOCUSED, focus);
     }
 
     createContextKeyChangedEvent(affectedKeys: string[]): ContextKeyChangeEvent {

package/src/browser/style/index.css

@@ -62,31 +62,36 @@
   width: calc(100% - 15px);
 }
 
+/* Rendered Markdown Content */
+
 .theia-notebook-markdown-content {
   padding: 8px 16px 8px 36px;
   font-size: var(--theia-notebook-markdown-size);
 }
 
+.theia-notebook-markdown-content>* {
+  font-weight: 400;
+}
+
 .theia-notebook-markdown-content>*:first-child {
   margin-top: 0;
   padding-top: 0;
 }
 
-.theia-notebook-markdown-content>*:only-child,
 .theia-notebook-markdown-content>*:last-child {
   margin-bottom: 0;
   padding-bottom: 0;
 }
 
 /* Markdown cell edit mode */
-.theia-notebook-cell-content:has(> .theia-notebook-cell-editor) {
+.theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.theia-notebook-cell-editor) {
   margin-left: 37px;
   margin-right: var(--theia-notebook-cell-editor-margin-right);
   outline: 1px solid var(--theia-notebook-cellBorderColor);
 }
 
 /* Markdown cell edit mode focused */
-.theia-notebook-cell.focused .theia-notebook-cell-content:has(> .theia-notebook-cell-editor) {
+.theia-notebook-cell.focused .theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.theia-notebook-cell-editor) {
   outline-color: var(--theia-notebook-focusedEditorBorder);
 }
 
@@ -310,3 +315,153 @@
   min-height: 100px;
   background-color: var(--theia-editor-background);
 }
+
+/* Notebook Find Widget */
+
+.theia-notebook-overlay {
+  position: absolute;
+  z-index: 100;
+  right: 18px;
+}
+
+.theia-notebook-find-widget {
+  /* position: absolute;
+  z-index: 35;
+  height: 33px;
+  overflow: hidden; */
+  line-height: 19px;
+  transition: transform 200ms linear;
+  display: flex;
+  flex-direction: row;
+  padding: 0 4px;
+  box-sizing: border-box;
+  box-shadow: 0 0 8px 2px var(--theia-widget-shadow);
+  background-color: var(--theia-editorWidget-background);
+  color: var(--theia-editorWidget-foreground);
+  border-left: 1px solid var(--theia-widget-border);
+  border-right: 1px solid var(--theia-widget-border);
+  border-bottom: 1px solid var(--theia-widget-border);
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.theia-notebook-find-widget.hidden {
+  display: none;
+  transform: translateY(calc(-100% - 10px));
+}
+
+.theia-notebook-find-widget.search-mode > * > *:nth-child(2) {
+  display: none;
+}
+
+.theia-notebook-find-widget-expand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 0;
+  margin-right: 4px;
+}
+
+.theia-notebook-find-widget-expand:focus {
+  outline: 1px solid var(--theia-focusBorder);
+}
+
+.theia-notebook-find-widget-expand:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-notebook-find-widget-buttons-first {
+  margin-bottom: 4px;
+  height: 26px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.theia-notebook-find-widget-buttons-first > div,
+.theia-notebook-find-widget-buttons-second > div {
+    margin-right: 4px;
+}
+
+.theia-notebook-find-widget-buttons-second {
+  height: 26px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.theia-notebook-find-widget-inputs {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.theia-notebook-find-widget-buttons {
+  margin-top: 4px;
+  margin-left: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.theia-notebook-find-widget-matches-count {
+  width: 72px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theia-notebook-find-widget-input-wrapper {
+  display: flex;
+  align-items: center;
+  background: var(--theia-input-background);
+  border-style: solid;
+  border-width: var(--theia-border-width);
+  border-color: var(--theia-input-background);
+  border-radius: 2px;
+  margin-bottom: 4px;
+}
+
+.theia-notebook-find-widget-input-wrapper:focus-within {
+  border-color: var(--theia-focusBorder);
+}
+
+.theia-notebook-find-widget-input-wrapper .option.enabled {
+  color: var(--theia-inputOption-activeForeground);
+  outline: 1px solid var(--theia-inputOption-activeBorder);
+  background-color: var(--theia-inputOption-activeBackground);
+}
+
+.theia-notebook-find-widget-input-wrapper .option {
+  margin: 2px;
+}
+
+.theia-notebook-find-widget-input-wrapper .theia-notebook-find-widget-input:focus {
+  border: none;
+  outline: none;
+}
+
+.theia-notebook-find-widget-input-wrapper .theia-notebook-find-widget-input {
+  background: none;
+  border: none;
+}
+
+.theia-notebook-find-widget-replace {
+  margin-bottom: 4px;
+}
+
+.theia-notebook-find-widget-buttons .disabled {
+  opacity: 0.5;
+}
+
+mark.theia-find-match {
+    color: var(--theia-editor-findMatchHighlightForeground);
+    background-color: var(--theia-editor-findMatchHighlightBackground);
+}
+
+mark.theia-find-match.theia-find-match-selected {
+    color: var(--theia-editor-findMatchForeground);
+    background-color: var(--theia-editor-findMatchBackground);
+}

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

@@ -16,7 +16,7 @@
 
 import * as React from '@theia/core/shared/react';
 import { NotebookModel } from '../view-model/notebook-model';
-import { NotebookCellModel } from '../view-model/notebook-cell-model';
+import { NotebookCellModel, NotebookCodeEditorFindMatch } from '../view-model/notebook-cell-model';
 import { SimpleMonacoEditor } from '@theia/monaco/lib/browser/simple-monaco-editor';
 import { MonacoEditor, MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
 import { MonacoEditorProvider } from '@theia/monaco/lib/browser/monaco-editor-provider';
@@ -27,6 +27,9 @@ 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';
+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';
 
 interface CellEditorProps {
     notebookModel: NotebookModel,
@@ -48,18 +51,46 @@ const DEFAULT_EDITOR_OPTIONS: MonacoEditor.IOptions = {
     lineDecorationsWidth: 10,
 };
 
+export const CURRENT_FIND_MATCH_DECORATION = ModelDecorationOptions.register({
+    description: 'current-find-match',
+    stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
+    zIndex: 13,
+    className: 'currentFindMatch',
+    inlineClassName: 'currentFindMatchInline',
+    showIfCollapsed: true,
+    overviewRuler: {
+        color: 'editorOverviewRuler.findMatchForeground',
+        position: OverviewRulerLane.Center
+    }
+});
+
+export const FIND_MATCH_DECORATION = ModelDecorationOptions.register({
+    description: 'find-match',
+    stickiness: TrackedRangeStickiness.NeverGrowsWhenTypingAtEdges,
+    zIndex: 10,
+    className: 'findMatch',
+    inlineClassName: 'findMatchInline',
+    showIfCollapsed: true,
+    overviewRuler: {
+        color: 'editorOverviewRuler.findMatchForeground',
+        position: OverviewRulerLane.Center
+    }
+});
+
 export class CellEditor extends React.Component<CellEditorProps, {}> {
 
     protected editor?: SimpleMonacoEditor;
     protected toDispose = new DisposableCollection();
     protected container?: HTMLDivElement;
+    protected matches: NotebookCodeEditorFindMatch[] = [];
+    protected oldMatchDecorations: string[] = [];
 
     override componentDidMount(): void {
         this.disposeEditor();
         this.toDispose.push(this.props.cell.onWillFocusCellEditor(focusRequest => {
             this.editor?.getControl().focus();
             const lineCount = this.editor?.getControl().getModel()?.getLineCount();
-            if (focusRequest && lineCount) {
+            if (focusRequest && lineCount !== undefined) {
                 this.editor?.getControl().setPosition(focusRequest === 'lastLine' ?
                     { lineNumber: lineCount, column: 1 } :
                     { lineNumber: focusRequest, column: 1 },
@@ -68,7 +99,6 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             const currentLine = this.editor?.getControl().getPosition()?.lineNumber;
             this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_FIRST_LINE, currentLine === 1);
             this.props.notebookContextManager.scopedStore.setContext(NOTEBOOK_CELL_CURSOR_LAST_LINE, currentLine === lineCount);
-
         }));
 
         this.toDispose.push(this.props.cell.onDidChangeEditorOptions(options => {
@@ -79,6 +109,26 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             this.editor?.setLanguage(language);
         }));
 
+        this.toDispose.push(this.props.cell.onDidFindMatches(matches => {
+            this.matches = matches;
+            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.notebookModel.onDidChangeSelectedCell(e => {
             if (e.cell !== this.props.cell && this.editor?.getControl().hasTextFocus()) {
                 this.props.notebookContextManager.context?.focus();
@@ -130,11 +180,11 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
                 notebookModel.cellDirtyChanged(cell, true);
             }));
             this.toDispose.push(this.editor.getControl().onDidFocusEditorText(() => {
-                this.props.notebookContextManager.onDidEditorTextFocus(true);
                 this.props.notebookModel.setSelectedCell(cell, false);
             }));
-            this.toDispose.push(this.editor.getControl().onDidBlurEditorText(() => {
-                this.props.notebookContextManager.onDidEditorTextFocus(false);
+            this.toDispose.push(this.editor.getControl().onDidChangeCursorSelection(e => {
+                const selectedText = this.editor!.getControl().getModel()!.getValueInRange(e.selection);
+                this.props.notebookModel.selectedText = selectedText;
             }));
             this.toDispose.push(this.editor.getControl().onDidChangeCursorPosition(e => {
                 if (e.secondaryPositions.length === 0) {
@@ -149,7 +199,30 @@ export class CellEditor extends React.Component<CellEditorProps, {}> {
             if (cell.editing && notebookModel.selectedCell === cell) {
                 this.editor.getControl().focus();
             }
+            this.setMatches();
+        }
+    }
+
+    protected setMatches(): void {
+        if (!this.editor) {
+            return;
         }
+        const decorations: IModelDeltaDecoration[] = [];
+        for (const match of this.matches) {
+            const decoration = match.selected ? CURRENT_FIND_MATCH_DECORATION : FIND_MATCH_DECORATION;
+            decorations.push({
+                range: {
+                    startLineNumber: match.range.start.line,
+                    startColumn: match.range.start.character,
+                    endLineNumber: match.range.end.line,
+                    endColumn: match.range.end.character
+                },
+                options: decoration
+            });
+        }
+
+        this.oldMatchDecorations = this.editor.getControl()
+            .changeDecorations(accessor => accessor.deltaDecorations(this.oldMatchDecorations, decorations));
     }
 
     protected setContainer(component: HTMLDivElement | null): void {

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

@@ -14,14 +14,15 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 import * as React from '@theia/core/shared/react';
-import { CellEditType, CellKind } from '../../common';
+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 { codicon } from '@theia/core/lib/browser';
+import { animationFrame, codicon, onDomEvent } from '@theia/core/lib/browser';
 import { CommandRegistry, DisposableCollection, nls } from '@theia/core';
 import { NotebookCommands } from '../contributions/notebook-actions-contribution';
 import { NotebookCellActionContribution } from '../contributions/notebook-cell-actions-contribution';
+import { NotebookContextManager } from '../service/notebook-context-manager';
 
 export interface CellRenderer {
     render(notebookData: NotebookModel, cell: NotebookCellModel, index: number): React.ReactNode
@@ -31,6 +32,7 @@ export interface CellRenderer {
 interface CellListProps {
     renderers: Map<CellKind, CellRenderer>;
     notebookModel: NotebookModel;
+    notebookContext: NotebookContextManager;
     toolbarRenderer: NotebookCellToolbarFactory;
     commandRegistry: CommandRegistry
 }
@@ -66,6 +68,13 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
             }
         }));
 
+        this.toDispose.push(props.notebookModel.onDidChangeContent(events => {
+            if (events.some(e => e.kind === NotebookCellsChangeType.Move)) {
+                // When a cell has been moved, we need to rerender the whole component
+                this.forceUpdate();
+            }
+        }));
+
         this.toDispose.push(props.notebookModel.onDidChangeSelectedCell(e => {
             this.setState({
                 ...this.state,
@@ -80,7 +89,24 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
     }
 
     override render(): React.ReactNode {
-        return <ul className='theia-notebook-cell-list'>
+        return <ul className='theia-notebook-cell-list' ref={
+            ref => {
+                this.toDispose.push(onDomEvent(document, 'focusin', () => {
+                    animationFrame().then(() => {
+                        let hasCellFocus = false;
+                        let hasFocus = false;
+                        if (ref?.contains(document.activeElement)) {
+                            if (this.props.notebookModel.selectedCell) {
+                                hasCellFocus = true;
+                            }
+                            hasFocus = true;
+                        }
+                        this.props.notebookContext.changeCellFocus(hasCellFocus);
+                        this.props.notebookContext.changeCellListFocus(hasFocus);
+                    });
+                }));
+            }
+        }>
             {this.props.notebookModel.cells
                 .map((cell, index) =>
                     <React.Fragment key={'cell-' + cell.handle}>