@theia/notebook 1.53.0-next.4 → 1.53.0-next.55

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

@@ -1,208 +1,208 @@
-// *****************************************************************************
-// Copyright (C) 2023 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 * as React from '@theia/core/shared/react';
-import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
-import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering/markdown-string';
-import { NotebookModel } from '../view-model/notebook-model';
-import { CellRenderer } from './notebook-cell-list-view';
-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 { 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 {
-
-    @inject(MarkdownRenderer)
-    private readonly markdownRenderer: MarkdownRenderer;
-    @inject(MonacoEditorServices)
-    protected readonly monacoServices: MonacoEditorServices;
-
-    @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}
-            commandRegistry={this.commandRegistry}
-            monacoServices={this.monacoServices}
-            notebookOptionsService={this.notebookOptionsService}
-            cell={cell}
-            notebookModel={notebookModel}
-            notebookContextManager={this.notebookContextManager} />;
-    }
-
-    renderDragImage(cell: NotebookCellModel): HTMLElement {
-        const dragImage = document.createElement('div');
-        dragImage.style.width = this.notebookContextManager.context?.clientWidth + 'px';
-        const markdownString = new MarkdownStringImpl(cell.source, { supportHtml: true, isTrusted: true });
-        const markdownElement = this.markdownRenderer.render(markdownString).element;
-        dragImage.appendChild(markdownElement);
-        return dragImage;
-    }
-}
-
-interface MarkdownCellProps {
-    markdownRenderer: MarkdownRenderer;
-    monacoServices: MonacoEditorServices;
-
-    commandRegistry: CommandRegistry;
-    cell: NotebookCellModel;
-    notebookModel: NotebookModel;
-    notebookContextManager: NotebookContextManager;
-    notebookOptionsService: NotebookOptionsService;
-}
-
-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]);
-
-    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 });
-        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.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];
-        empty = true;
-    }
-
-    return editMode ?
-        (<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)}
-        />);
-}
-
-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'
-            });
-        }
-    }
-}
+// *****************************************************************************
+// Copyright (C) 2023 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 * as React from '@theia/core/shared/react';
+import { MarkdownRenderer } from '@theia/core/lib/browser/markdown-rendering/markdown-renderer';
+import { MarkdownStringImpl } from '@theia/core/lib/common/markdown-rendering/markdown-string';
+import { NotebookModel } from '../view-model/notebook-model';
+import { CellRenderer } from './notebook-cell-list-view';
+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 { 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 {
+
+    @inject(MarkdownRenderer)
+    private readonly markdownRenderer: MarkdownRenderer;
+    @inject(MonacoEditorServices)
+    protected readonly monacoServices: MonacoEditorServices;
+
+    @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}
+            commandRegistry={this.commandRegistry}
+            monacoServices={this.monacoServices}
+            notebookOptionsService={this.notebookOptionsService}
+            cell={cell}
+            notebookModel={notebookModel}
+            notebookContextManager={this.notebookContextManager} />;
+    }
+
+    renderDragImage(cell: NotebookCellModel): HTMLElement {
+        const dragImage = document.createElement('div');
+        dragImage.style.width = this.notebookContextManager.context?.clientWidth + 'px';
+        const markdownString = new MarkdownStringImpl(cell.source, { supportHtml: true, isTrusted: true });
+        const markdownElement = this.markdownRenderer.render(markdownString).element;
+        dragImage.appendChild(markdownElement);
+        return dragImage;
+    }
+}
+
+interface MarkdownCellProps {
+    markdownRenderer: MarkdownRenderer;
+    monacoServices: MonacoEditorServices;
+
+    commandRegistry: CommandRegistry;
+    cell: NotebookCellModel;
+    notebookModel: NotebookModel;
+    notebookContextManager: NotebookContextManager;
+    notebookOptionsService: NotebookOptionsService;
+}
+
+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]);
+
+    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 });
+        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.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];
+        empty = true;
+    }
+
+    return editMode ?
+        (<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)}
+        />);
+}
+
+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'
+            });
+        }
+    }
+}

package/src/browser/view/notebook-viewport-service.ts

@@ -1,61 +1,61 @@
-// *****************************************************************************
-// 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 { Disposable } from '@theia/core';
-import { injectable } from '@theia/core/shared/inversify';
-import { Emitter } from '@theia/core/shared/vscode-languageserver-protocol';
-
-/**
- * this service is for managing the viewport and scroll state of a notebook editor.
- * its used both for restoring scroll state after reopening an editor and for cell to check if they are in the viewport.
- */
-@injectable()
-export class NotebookViewportService implements Disposable {
-
-    protected onDidChangeViewportEmitter = new Emitter<void>();
-    readonly onDidChangeViewport = this.onDidChangeViewportEmitter.event;
-
-    protected _viewportElement: HTMLDivElement | undefined;
-
-    protected resizeObserver: ResizeObserver;
-
-    set viewportElement(element: HTMLDivElement | undefined) {
-        this._viewportElement = element;
-        if (element) {
-            this.onDidChangeViewportEmitter.fire();
-            this.resizeObserver?.disconnect();
-            this.resizeObserver = new ResizeObserver(() => this.onDidChangeViewportEmitter.fire());
-            this.resizeObserver.observe(element);
-        }
-    }
-
-    isElementInViewport(element: HTMLElement): boolean {
-        if (this._viewportElement) {
-            const rect = element.getBoundingClientRect();
-            const viewRect = this._viewportElement.getBoundingClientRect();
-            return rect.top < viewRect.top ? rect.bottom > viewRect.top : rect.top < viewRect.bottom;
-        }
-        return false;
-    }
-
-    onScroll(e: HTMLDivElement): void {
-        this.onDidChangeViewportEmitter.fire();
-    }
-
-    dispose(): void {
-        this.resizeObserver.disconnect();
-    }
-}
+// *****************************************************************************
+// 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 { Disposable } from '@theia/core';
+import { injectable } from '@theia/core/shared/inversify';
+import { Emitter } from '@theia/core/shared/vscode-languageserver-protocol';
+
+/**
+ * this service is for managing the viewport and scroll state of a notebook editor.
+ * its used both for restoring scroll state after reopening an editor and for cell to check if they are in the viewport.
+ */
+@injectable()
+export class NotebookViewportService implements Disposable {
+
+    protected onDidChangeViewportEmitter = new Emitter<void>();
+    readonly onDidChangeViewport = this.onDidChangeViewportEmitter.event;
+
+    protected _viewportElement: HTMLDivElement | undefined;
+
+    protected resizeObserver: ResizeObserver;
+
+    set viewportElement(element: HTMLDivElement | undefined) {
+        this._viewportElement = element;
+        if (element) {
+            this.onDidChangeViewportEmitter.fire();
+            this.resizeObserver?.disconnect();
+            this.resizeObserver = new ResizeObserver(() => this.onDidChangeViewportEmitter.fire());
+            this.resizeObserver.observe(element);
+        }
+    }
+
+    isElementInViewport(element: HTMLElement): boolean {
+        if (this._viewportElement) {
+            const rect = element.getBoundingClientRect();
+            const viewRect = this._viewportElement.getBoundingClientRect();
+            return rect.top < viewRect.top ? rect.bottom > viewRect.top : rect.top < viewRect.bottom;
+        }
+        return false;
+    }
+
+    onScroll(e: HTMLDivElement): void {
+        this.onDidChangeViewportEmitter.fire();
+    }
+
+    dispose(): void {
+        this.resizeObserver.disconnect();
+    }
+}