@theia/notebook 1.51.0 → 1.53.0-next.4

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}>

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={() => {

package/src/browser/view/notebook-find-widget.tsx

@@ -0,0 +1,335 @@
+// *****************************************************************************
+// 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 { nls } from '@theia/core';
+import * as React from '@theia/core/shared/react';
+import { codicon } from '@theia/core/lib/browser';
+import debounce = require('lodash/debounce');
+
+export interface NotebookEditorFindMatch {
+    selected: boolean;
+    show(): void;
+    replace?(value: string): void;
+}
+
+export interface NotebookEditorFindMatchOptions {
+    search: string;
+    matchCase: boolean;
+    wholeWord: boolean;
+    regex: boolean;
+    activeFilters: string[];
+}
+
+export interface NotebookEditorFindFilter {
+    id: string;
+    label: string;
+    active: boolean;
+}
+
+export interface NotebookEditorFindOptions {
+    search?: string;
+    jumpToMatch?: boolean;
+    matchCase?: boolean;
+    wholeWord?: boolean;
+    regex?: boolean;
+    modifyIndex?: (matches: NotebookEditorFindMatch[], index: number) => number;
+}
+
+export interface NotebookFindWidgetProps {
+    hidden?: boolean;
+    filters?: NotebookEditorFindFilter[];
+    onClose(): void;
+    onSearch(options: NotebookEditorFindMatchOptions): NotebookEditorFindMatch[];
+    onReplace(matches: NotebookEditorFindMatch[], value: string): void;
+}
+
+export interface NotebookFindWidgetState {
+    search: string;
+    replace: string;
+    expanded: boolean;
+    matchCase: boolean;
+    wholeWord: boolean;
+    regex: boolean;
+    activeFilters: string[];
+    currentMatch: number;
+    matches: NotebookEditorFindMatch[];
+}
+
+export class NotebookFindWidget extends React.Component<NotebookFindWidgetProps, NotebookFindWidgetState> {
+
+    private searchRef = React.createRef<HTMLInputElement>();
+    private debounceSearch = debounce(this.search.bind(this), 50);
+
+    constructor(props: NotebookFindWidgetProps) {
+        super(props);
+        this.state = {
+            search: '',
+            replace: '',
+            currentMatch: 0,
+            matches: [],
+            expanded: false,
+            matchCase: false,
+            regex: false,
+            wholeWord: false,
+            activeFilters: props.filters?.filter(filter => filter.active).map(filter => filter.id) || []
+        };
+    }
+
+    override render(): React.ReactNode {
+        const hasMatches = this.hasMatches();
+        const canReplace = this.canReplace();
+        const canReplaceAll = this.canReplaceAll();
+        return (
+            <div onKeyUp={event => {
+                if (event.key === 'Escape') {
+                    this.props.onClose();
+                }
+            }} className={`theia-notebook-find-widget ${!this.state.expanded ? 'search-mode' : ''} ${this.props.hidden ? 'hidden' : ''}`}>
+                <div className='theia-notebook-find-widget-expand' title={nls.localizeByDefault('Toggle Replace')} onClick={() => {
+                    this.setState({
+                        expanded: !this.state.expanded
+                    });
+                }}>
+                    <div className={codicon(`chevron-${this.state.expanded ? 'down' : 'right'}`)}></div>
+                </div>
+                <div className='theia-notebook-find-widget-inputs'>
+                    <div className='theia-notebook-find-widget-input-wrapper'>
+                        <input
+                            ref={this.searchRef}
+                            type='text'
+                            className='theia-input theia-notebook-find-widget-input'
+                            placeholder={nls.localizeByDefault('Find')}
+                            value={this.state.search}
+                            onChange={event => {
+                                this.setState({
+                                    search: event.target.value
+                                });
+                                this.debounceSearch({});
+                            }}
+                            onKeyDown={event => {
+                                if (event.key === 'Enter') {
+                                    if (event.shiftKey) {
+                                        this.gotoPreviousMatch();
+                                    } else {
+                                        this.gotoNextMatch();
+                                    }
+                                    event.preventDefault();
+                                }
+                            }}
+                        />
+                        <div
+                            className={`${codicon('case-sensitive', true)} option ${this.state.matchCase ? 'enabled' : ''}`}
+                            title={nls.localizeByDefault('Match Case')}
+                            onClick={() => {
+                                this.search({
+                                    matchCase: !this.state.matchCase
+                                });
+                            }}></div>
+                        <div
+                            className={`${codicon('whole-word', true)} option ${this.state.wholeWord ? 'enabled' : ''}`}
+                            title={nls.localizeByDefault('Match Whole Word')}
+                            onClick={() => {
+                                this.search({
+                                    wholeWord: !this.state.wholeWord
+                                });
+                            }}></div>
+                        <div
+                            className={`${codicon('regex', true)} option ${this.state.regex ? 'enabled' : ''}`}
+                            title={nls.localizeByDefault('Use Regular Expression')}
+                            onClick={() => {
+                                this.search({
+                                    regex: !this.state.regex
+                                });
+                            }}></div>
+                        {/* <div
+                            className={`${codicon('filter', true)} option ${this.state.wholeWord ? 'enabled' : ''}`}
+                            title={nls.localizeByDefault('Find Filters')}></div> */}
+                    </div>
+                    <input
+                        type='text'
+                        className='theia-input theia-notebook-find-widget-replace'
+                        placeholder={nls.localizeByDefault('Replace')}
+                        value={this.state.replace}
+                        onChange={event => {
+                            this.setState({
+                                replace: event.target.value
+                            });
+                        }}
+                        onKeyDown={event => {
+                            if (event.key === 'Enter') {
+                                this.replaceOne();
+                                event.preventDefault();
+                            }
+                        }}
+                    />
+                </div>
+                <div className='theia-notebook-find-widget-buttons'>
+                    <div className='theia-notebook-find-widget-buttons-first'>
+                        <div className='theia-notebook-find-widget-matches-count'>
+                            {this.getMatchesCount()}
+                        </div>
+                        <div
+                            className={`${codicon('arrow-up', hasMatches)} ${hasMatches ? '' : 'disabled'}`}
+                            title={nls.localizeByDefault('Previous Match')}
+                            onClick={() => {
+                                this.gotoPreviousMatch();
+                            }}
+                        ></div>
+                        <div
+                            className={`${codicon('arrow-down', hasMatches)} ${hasMatches ? '' : 'disabled'}`}
+                            title={nls.localizeByDefault('Next Match')}
+                            onClick={() => {
+                                this.gotoNextMatch();
+                            }}
+                        ></div>
+                        <div
+                            className={codicon('close', true)}
+                            title={nls.localizeByDefault('Close')}
+                            onClick={() => {
+                                this.props.onClose();
+                            }}
+                        ></div>
+                    </div>
+                    <div className='theia-notebook-find-widget-buttons-second'>
+                        <div
+                            className={`${codicon('replace', canReplace)} ${canReplace ? '' : 'disabled'}`}
+                            title={nls.localizeByDefault('Replace')}
+                            onClick={() => {
+                                this.replaceOne();
+                            }}
+                        ></div>
+                        <div
+                            className={`${codicon('replace-all', canReplaceAll)} ${canReplaceAll ? '' : 'disabled'}`}
+                            title={nls.localizeByDefault('Replace All')}
+                            onClick={() => {
+                                this.replaceAll();
+                            }}
+                        ></div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    private hasMatches(): boolean {
+        return this.state.matches.length > 0;
+    }
+
+    private canReplace(): boolean {
+        return Boolean(this.state.matches[this.state.currentMatch]?.replace);
+    }
+
+    private canReplaceAll(): boolean {
+        return this.state.matches.some(match => Boolean(match.replace));
+    }
+
+    private getMatchesCount(): string {
+        if (this.hasMatches()) {
+            return nls.localizeByDefault('{0} of {1}', this.state.currentMatch + 1, this.state.matches.length);
+        } else {
+            return nls.localizeByDefault('No results');
+        }
+    }
+
+    private gotoNextMatch(): void {
+        this.search({
+            modifyIndex: (matches, index) => (index + 1) % matches.length,
+            jumpToMatch: true
+        });
+    }
+
+    private gotoPreviousMatch(): void {
+        this.search({
+            modifyIndex: (matches, index) => (index === 0 ? matches.length : index) - 1,
+            jumpToMatch: true
+        });
+    }
+
+    private replaceOne(): void {
+        const existingMatches = this.state.matches;
+        const match = existingMatches[this.state.currentMatch];
+        if (match) {
+            match.replace?.(this.state.replace);
+            this.search({
+                jumpToMatch: true,
+                modifyIndex: (matches, index) => {
+                    if (matches.length < existingMatches.length) {
+                        return index % matches.length;
+                    } else {
+                        const diff = matches.length - existingMatches.length;
+                        return (index + diff + 1) % matches.length;
+                    }
+                }
+            });
+        }
+    }
+
+    private replaceAll(): void {
+        this.props.onReplace(this.state.matches, this.state.replace);
+        this.search({});
+    }
+
+    override componentDidUpdate(prevProps: Readonly<NotebookFindWidgetProps>, prevState: Readonly<NotebookFindWidgetState>): void {
+        if (!this.props.hidden && prevProps.hidden) {
+            // Focus the search input when the widget switches from hidden to visible.
+            this.searchRef.current?.focus();
+        }
+    }
+
+    focusSearch(content?: string): void {
+        this.searchRef.current?.focus();
+        if (content) {
+            this.search({
+                search: content,
+                jumpToMatch: false
+            });
+        }
+    }
+
+    search(options: NotebookEditorFindOptions): void {
+        const matchCase = options.matchCase ?? this.state.matchCase;
+        const wholeWord = options.wholeWord ?? this.state.wholeWord;
+        const regex = options.regex ?? this.state.regex;
+        const search = options.search ?? this.state.search;
+        const matches = this.props.onSearch({
+            search,
+            matchCase,
+            wholeWord,
+            regex,
+            activeFilters: this.state.activeFilters
+        });
+        let currentMatch = Math.max(0, Math.min(this.state.currentMatch, matches.length - 1));
+        if (options.modifyIndex && matches.length > 0) {
+            currentMatch = options.modifyIndex(matches, currentMatch);
+        }
+        const selectedMatch = matches[currentMatch];
+        if (selectedMatch) {
+            selectedMatch.selected = true;
+            if (options.jumpToMatch) {
+                selectedMatch.show();
+            }
+        }
+        this.setState({
+            search,
+            matches,
+            currentMatch,
+            matchCase,
+            wholeWord,
+            regex
+        });
+    }
+
+}

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

@@ -23,8 +23,12 @@ import { NotebookCellModel } from '../view-model/notebook-cell-model';
 import { CellEditor } from './notebook-cell-editor';
 import { inject, injectable } from '@theia/core/shared/inversify';
 import { MonacoEditorServices } from '@theia/monaco/lib/browser/monaco-editor';
-import { nls } from '@theia/core';
+import { CommandRegistry, nls } from '@theia/core';
 import { NotebookContextManager } from '../service/notebook-context-manager';
+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';
 
 @injectable()
 export class NotebookMarkdownCellRenderer implements CellRenderer {
@@ -37,9 +41,21 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
     @inject(NotebookContextManager)
     protected readonly notebookContextManager: NotebookContextManager;
 
+    @inject(CommandRegistry)
+    protected readonly commandRegistry: CommandRegistry;
+
+    @inject(NotebookOptionsService)
+    protected readonly notebookOptionsService: NotebookOptionsService;
+
     render(notebookModel: NotebookModel, cell: NotebookCellModel): React.ReactNode {
-        return <MarkdownCell markdownRenderer={this.markdownRenderer} monacoServices={this.monacoServices}
-            cell={cell} notebookModel={notebookModel} notebookContextManager={this.notebookContextManager} />;
+        return <MarkdownCell
+            markdownRenderer={this.markdownRenderer}
+            commandRegistry={this.commandRegistry}
+            monacoServices={this.monacoServices}
+            notebookOptionsService={this.notebookOptionsService}
+            cell={cell}
+            notebookModel={notebookModel}
+            notebookContextManager={this.notebookContextManager} />;
     }
 
     renderDragImage(cell: NotebookCellModel): HTMLElement {
@@ -53,39 +69,140 @@ export class NotebookMarkdownCellRenderer implements CellRenderer {
 }
 
 interface MarkdownCellProps {
-    markdownRenderer: MarkdownRenderer,
-    monacoServices: MonacoEditorServices
+    markdownRenderer: MarkdownRenderer;
+    monacoServices: MonacoEditorServices;
 
-    cell: NotebookCellModel,
-    notebookModel: NotebookModel
+    commandRegistry: CommandRegistry;
+    cell: NotebookCellModel;
+    notebookModel: NotebookModel;
     notebookContextManager: NotebookContextManager;
+    notebookOptionsService: NotebookOptionsService;
 }
 
-function MarkdownCell({ markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager }: MarkdownCellProps): React.JSX.Element {
+function MarkdownCell({
+    markdownRenderer, monacoServices, cell, notebookModel, notebookContextManager, notebookOptionsService, commandRegistry
+}: MarkdownCellProps): React.JSX.Element {
     const [editMode, setEditMode] = React.useState(cell.editing);
+    let empty = false;
 
     React.useEffect(() => {
         const listener = cell.onDidRequestCellEditChange(cellEdit => setEditMode(cellEdit));
         return () => listener.dispose();
     }, [editMode]);
 
-    let markdownContent: HTMLElement = React.useMemo(() => {
+    React.useEffect(() => {
+        if (!editMode) {
+            const instance = new mark(markdownContent);
+            cell.onMarkdownFind = options => {
+                instance.unmark();
+                if (empty) {
+                    return [];
+                }
+                return searchInMarkdown(instance, options);
+            };
+            return () => {
+                cell.onMarkdownFind = undefined;
+                instance.unmark();
+            };
+        }
+    }, [editMode, cell.source]);
+
+    let markdownContent: HTMLElement[] = React.useMemo(() => {
         const markdownString = new MarkdownStringImpl(cell.source, { supportHtml: true, isTrusted: true });
-        return markdownRenderer.render(markdownString).element;
-    }, [cell, editMode]);
+        const rendered = markdownRenderer.render(markdownString).element;
+        const children: HTMLElement[] = [];
+        rendered.childNodes.forEach(child => {
+            if (child instanceof HTMLElement) {
+                children.push(child);
+            }
+        });
+        return children;
+    }, [cell.source]);
 
-    if (!markdownContent.hasChildNodes()) {
+    if (markdownContent.length === 0) {
         const italic = document.createElement('i');
         italic.className = 'theia-notebook-empty-markdown';
         italic.innerText = nls.localizeByDefault('Empty markdown cell, double-click or press enter to edit.');
         italic.style.pointerEvents = 'none';
-        markdownContent = italic;
+        markdownContent = [italic];
+        empty = true;
     }
 
     return editMode ?
-        <CellEditor cell={cell} notebookModel={notebookModel} monacoServices={monacoServices} notebookContextManager={notebookContextManager} /> :
-        <div className='theia-notebook-markdown-content'
+        (<div className='theia-notebook-markdown-editor-container' key="code">
+            <CellEditor notebookModel={notebookModel} cell={cell}
+                monacoServices={monacoServices}
+                notebookContextManager={notebookContextManager}
+                fontInfo={notebookOptionsService.editorFontInfo} />
+            <NotebookCodeCellStatus cell={cell} notebook={notebookModel}
+                commandRegistry={commandRegistry}
+                onClick={() => cell.requestFocusEditor()} />
+        </div >) :
+        (<div className='theia-notebook-markdown-content' key="markdown"
             onDoubleClick={() => cell.requestEdit()}
-            ref={node => node?.replaceChildren(markdownContent)}
-        />;
+            ref={node => node?.replaceChildren(...markdownContent)}
+        />);
+}
+
+function searchInMarkdown(instance: mark, options: NotebookEditorFindMatchOptions): NotebookEditorFindMatch[] {
+    const matches: NotebookEditorFindMatch[] = [];
+    const markOptions: mark.MarkOptions & mark.RegExpOptions = {
+        className: 'theia-find-match',
+        diacritics: false,
+        caseSensitive: options.matchCase,
+        acrossElements: true,
+        separateWordSearch: false,
+        each: node => {
+            matches.push(new MarkdownEditorFindMatch(node));
+        }
+    };
+    if (options.regex || options.wholeWord) {
+        let search = options.search;
+        if (options.wholeWord) {
+            if (!options.regex) {
+                search = escapeRegExp(search);
+            }
+            search = '\\b' + search + '\\b';
+        }
+        instance.markRegExp(new RegExp(search, options.matchCase ? '' : 'i'), markOptions);
+    } else {
+        instance.mark(options.search, markOptions);
+    }
+    return matches;
+}
+
+function escapeRegExp(value: string): string {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+class MarkdownEditorFindMatch implements NotebookEditorFindMatch {
+
+    constructor(readonly node: Node) { }
+
+    private _selected = false;
+
+    get selected(): boolean {
+        return this._selected;
+    }
+
+    set selected(selected: boolean) {
+        this._selected = selected;
+        const className = 'theia-find-match-selected';
+        if (this.node instanceof HTMLElement) {
+            if (selected) {
+                this.node.classList.add(className);
+            } else {
+                this.node.classList.remove(className);
+            }
+        }
+    }
+
+    show(): void {
+        if (this.node instanceof HTMLElement) {
+            this.node.scrollIntoView({
+                behavior: 'instant',
+                block: 'center'
+            });
+        }
+    }
 }