@theia/notebook 1.51.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';
@@ -365,9 +366,23 @@ export class NotebookCellActionContribution implements MenuContribution, Command
             execute: async (notebook?: NotebookModel, cell?: NotebookCellModel) => {
                 const selectedCell = cell ?? this.notebookEditorWidgetService.focusedEditor?.model?.selectedCell;
                 const activeNotebook = notebook ?? this.notebookEditorWidgetService.focusedEditor?.model;
-                if (selectedCell && activeNotebook) {
-                    const language = await this.languageQuickPickService.pickEditorLanguage(selectedCell.language);
-                    if (language?.value && language.value !== 'autoDetect') {
+                if (!selectedCell || !activeNotebook) {
+                    return;
+                }
+                const language = await this.languageQuickPickService.pickEditorLanguage(selectedCell.language);
+                if (!language?.value || language.value === 'autoDetect' || language.value.id === selectedCell.language) {
+                    return;
+                }
+                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 {
+                    if (isMarkdownCell) {
+                        changeCellType(activeNotebook, selectedCell, CellKind.Code, language.value.id);
+                    } else {
                         this.notebookEditorWidgetService.focusedEditor?.model?.applyEdits([{
                             editType: CellEditType.CellLanguage,
                             index: activeNotebook.cells.indexOf(selectedCell),
@@ -411,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,
@@ -426,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-preferences.ts

@@ -19,7 +19,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { nls } from '@theia/core';
-import { PreferenceSchema } from '@theia/core/lib/browser';
+import { interfaces } from '@theia/core/shared/inversify';
+import { PreferenceContribution, PreferenceSchema } from '@theia/core/lib/browser';
 
 export namespace NotebookPreferences {
     export const NOTEBOOK_LINE_NUMBERS = 'notebook.lineNumbers';
@@ -81,3 +82,11 @@ export const notebookPreferenceSchema: PreferenceSchema = {
 
     }
 };
+
+export const NotebookPreferenceContribution = Symbol('NotebookPreferenceContribution');
+
+export function bindNotebookPreferences(bind: interfaces.Bind): void {
+    // We don't need a NotebookPreferenceConfiguration class, so there's no preference proxy to bind
+    bind(NotebookPreferenceContribution).toConstantValue({ schema: notebookPreferenceSchema });
+    bind(PreferenceContribution).toService(NotebookPreferenceContribution);
+}

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, PreferenceContribution, 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';
@@ -44,8 +44,9 @@ import { NotebookOutlineContribution } from './contributions/notebook-outline-co
 import { NotebookLabelProviderContribution } from './contributions/notebook-label-provider-contribution';
 import { NotebookOutputActionContribution } from './contributions/notebook-output-action-contribution';
 import { NotebookClipboardService } from './service/notebook-clipboard-service';
-import { notebookPreferenceSchema } from './contributions/notebook-preferences';
+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();
@@ -106,6 +107,9 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(NotebookLabelProviderContribution).toSelf().inSingletonScope();
     bind(LabelProviderContribution).toService(NotebookLabelProviderContribution);
 
-    bind(PreferenceContribution).toConstantValue({ schema: notebookPreferenceSchema });
+    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

@@ -16,6 +16,7 @@
 
 :root {
   --theia-notebook-markdown-size: 17px;
+  --theia-notebook-cell-editor-margin-right: 10px;
 }
 
 .theia-notebook-cell-list {
@@ -61,22 +62,39 @@
   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 > *:first-child {
+.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 {
+.theia-notebook-markdown-content>*:last-child {
   margin-bottom: 0;
   padding-bottom: 0;
 }
 
+/* Markdown cell edit mode */
+.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-markdown-editor-container>.theia-notebook-cell-editor) {
+  outline-color: var(--theia-notebook-focusedEditorBorder);
+}
+
 .theia-notebook-empty-markdown {
   opacity: 0.6;
 }
@@ -189,8 +207,7 @@
 
 .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);
+  animation: progress-animation 1.8s 0s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
   background-color: var(--theia-progressBar-background);
   height: 2px;
 }
@@ -298,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 {