@theia/notebook 1.52.0 → 1.53.0-next.18

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'
+            });
+        }
+    }
 }