@theia/notebook 1.52.0 → 1.53.0-next.5

package/src/browser/style/index.css

@@ -31,6 +31,10 @@
   margin: 10px 0px;
 }
 
+.theia-notebook-cell:focus {
+  outline: none;
+}
+
 .theia-notebook-cell.draggable {
   cursor: grab;
 }
@@ -62,31 +66,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) {
-  margin-left: 37px;
+.theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.theia-notebook-cell-editor) {
+  margin-left: 36px;
   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);
 }
 
@@ -102,7 +111,7 @@
   width: calc(100% - 46px);
   flex: 1;
   outline: 1px solid var(--theia-notebook-cellBorderColor);
-  margin: 0px 10px;
+  margin: 0px 16px 0px 10px;
 }
 
 .theia-notebook-cell.focused .theia-notebook-cell-editor-container {
@@ -283,7 +292,7 @@
 
 .theia-notebook-cell-output-webview {
   padding: 5px 0px;
-  margin: 0px 10px;
+  margin: 0px 15px 0px 9px;
   width: 100%;
 }
 
@@ -310,3 +319,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
 }
@@ -46,6 +48,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
     protected toDispose = new DisposableCollection();
 
     protected static dragGhost: HTMLElement | undefined;
+    protected cellListRef: React.RefObject<HTMLUListElement> = React.createRef();
 
     constructor(props: CellListProps) {
         super(props);
@@ -66,6 +69,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,
@@ -73,6 +83,24 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                 scrollIntoView: e.scrollIntoView
             });
         }));
+
+        this.toDispose.push(onDomEvent(document, 'focusin', () => {
+            animationFrame().then(() => {
+                if (!this.cellListRef.current) {
+                    return;
+                }
+                let hasCellFocus = false;
+                let hasFocus = false;
+                if (this.cellListRef.current.contains(document.activeElement)) {
+                    if (this.props.notebookModel.selectedCell) {
+                        hasCellFocus = true;
+                    }
+                    hasFocus = true;
+                }
+                this.props.notebookContext.changeCellFocus(hasCellFocus);
+                this.props.notebookContext.changeCellListFocus(hasFocus);
+            });
+        }));
     }
 
     override componentWillUnmount(): void {
@@ -80,7 +108,7 @@ 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={this.cellListRef}>
             {this.props.notebookModel.cells
                 .map((cell, index) =>
                     <React.Fragment key={'cell-' + cell.handle}>
@@ -103,6 +131,7 @@ export class NotebookCellListView extends React.Component<CellListProps, Noteboo
                             onDragOver={e => this.onDragOver(e, cell)}
                             onDrop={e => this.onDrop(e, index)}
                             draggable={true}
+                            tabIndex={-1}
                             ref={ref => cell === this.state.selectedCell && this.state.scrollIntoView && ref?.scrollIntoView({ block: 'nearest' })}>
                             <div className={'theia-notebook-cell-marker' + (this.state.selectedCell === cell ? ' theia-notebook-cell-marker-selected' : '')}></div>
                             <div className='theia-notebook-cell-content'>

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

@@ -150,7 +150,7 @@ export interface NotebookCodeCellStatusProps {
     notebook: NotebookModel;
     cell: NotebookCellModel;
     commandRegistry: CommandRegistry;
-    executionStateService: NotebookExecutionStateService;
+    executionStateService?: NotebookExecutionStateService;
     onClick: () => void;
 }
 
@@ -171,22 +171,24 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
         };
 
         let currentInterval: NodeJS.Timeout | undefined;
-        this.toDispose.push(props.executionStateService.onDidChangeExecution(event => {
-            if (event.affectsCell(this.props.cell.uri)) {
-                this.setState({ currentExecution: event.changed, executionTime: 0 });
-                clearInterval(currentInterval);
-                if (event.changed?.state === NotebookCellExecutionState.Executing) {
-                    const startTime = Date.now();
-                    // The resolution of the time display is only a single digit after the decimal point.
-                    // Therefore, we only need to update the display every 100ms.
-                    currentInterval = setInterval(() => {
-                        this.setState({
-                            executionTime: Date.now() - startTime
-                        });
-                    }, 100);
+        if (props.executionStateService) {
+            this.toDispose.push(props.executionStateService.onDidChangeExecution(event => {
+                if (event.affectsCell(this.props.cell.uri)) {
+                    this.setState({ currentExecution: event.changed, executionTime: 0 });
+                    clearInterval(currentInterval);
+                    if (event.changed?.state === NotebookCellExecutionState.Executing) {
+                        const startTime = Date.now();
+                        // The resolution of the time display is only a single digit after the decimal point.
+                        // Therefore, we only need to update the display every 100ms.
+                        currentInterval = setInterval(() => {
+                            this.setState({
+                                executionTime: Date.now() - startTime
+                            });
+                        }, 100);
+                    }
                 }
-            }
-        }));
+            }));
+        }
 
         this.toDispose.push(props.cell.onDidChangeLanguage(() => {
             this.forceUpdate();
@@ -200,7 +202,7 @@ export class NotebookCodeCellStatus extends React.Component<NotebookCodeCellStat
     override render(): React.ReactNode {
         return <div className='notebook-cell-status' onClick={() => this.props.onClick()}>
             <div className='notebook-cell-status-left'>
-                {this.renderExecutionState()}
+                {this.props.executionStateService && this.renderExecutionState()}
             </div>
             <div className='notebook-cell-status-right'>
                 <span className='notebook-cell-language-label' onClick={() => {