@jupyterlab/fileeditor 4.0.0-alpha.9 → 4.0.0-beta.0

package/src/toc/python.ts

@@ -0,0 +1,143 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+/*eslint no-invalid-regexp: ["error", { "allowConstructorFlags": ["d"] }]*/
+
+import { DocumentRegistry, IDocumentWidget } from '@jupyterlab/docregistry';
+import { TableOfContents, TableOfContentsModel } from '@jupyterlab/toc';
+import { Widget } from '@lumino/widgets';
+import { FileEditor } from '../widget';
+import { EditorTableOfContentsFactory, IEditorHeading } from './factory';
+
+/**
+ * Regular expression to create the outline
+ */
+let KEYWORDS: RegExp;
+try {
+  // https://github.com/tc39/proposal-regexp-match-indices was accepted
+  // in May 2021 (https://github.com/tc39/proposals/blob/main/finished-proposals.md)
+  // So we will fallback to the polyfill regexp-match-indices if not available
+  KEYWORDS = new RegExp('^\\s*(class |def |from |import )', 'd');
+} catch {
+  KEYWORDS = new RegExp('^\\s*(class |def |from |import )');
+}
+
+/**
+ * Table of content model for Python files.
+ */
+export class PythonTableOfContentsModel extends TableOfContentsModel<
+  IEditorHeading,
+  IDocumentWidget<FileEditor, DocumentRegistry.IModel>
+> {
+  /**
+   * Type of document supported by the model.
+   *
+   * #### Notes
+   * A `data-document-type` attribute with this value will be set
+   * on the tree view `.jp-TableOfContents-content[data-document-type="..."]`
+   */
+  get documentType(): string {
+    return 'python';
+  }
+
+  /**
+   * Produce the headings for a document.
+   *
+   * @returns The list of new headings or `null` if nothing needs to be updated.
+   */
+  protected async getHeadings(): Promise<IEditorHeading[] | null> {
+    if (!this.isActive) {
+      return Promise.resolve(null);
+    }
+
+    // Split the text into lines:
+    const lines = this.widget.content.model.sharedModel
+      .getSource()
+      .split('\n') as Array<string>;
+
+    // Iterate over the lines to get the heading level and text for each line:
+    let headings = new Array<IEditorHeading>();
+    let processingImports = false;
+
+    let indent = 1;
+
+    let lineIdx = -1;
+    for (const line of lines) {
+      lineIdx++;
+      let hasKeyword: RegExpExecArray | null;
+      if (KEYWORDS.flags.includes('d')) {
+        hasKeyword = KEYWORDS.exec(line);
+      } else {
+        const { default: execWithIndices } = await import(
+          'regexp-match-indices'
+        );
+        hasKeyword = execWithIndices(KEYWORDS, line);
+      }
+      if (hasKeyword) {
+        // Index 0 contains the spaces, index 1 is the keyword group
+        const [start] = (hasKeyword as any).indices[1];
+        if (indent === 1 && start > 0) {
+          indent = start;
+        }
+
+        const isImport = ['from ', 'import '].includes(hasKeyword[1]);
+        if (isImport && processingImports) {
+          continue;
+        }
+        processingImports = isImport;
+
+        const level = 1 + start / indent;
+
+        if (level > this.configuration.maximalDepth) {
+          continue;
+        }
+
+        headings.push({
+          text: line.slice(start),
+          level,
+          line: lineIdx
+        });
+      }
+    }
+
+    return Promise.resolve(headings);
+  }
+}
+
+/**
+ * Table of content model factory for Python files.
+ */
+export class PythonTableOfContentsFactory extends EditorTableOfContentsFactory {
+  /**
+   * Whether the factory can handle the widget or not.
+   *
+   * @param widget - widget
+   * @returns boolean indicating a ToC can be generated
+   */
+  isApplicable(widget: Widget): boolean {
+    const isApplicable = super.isApplicable(widget);
+
+    if (isApplicable) {
+      let mime = (widget as any).content?.model?.mimeType;
+      return (
+        mime &&
+        (mime === 'application/x-python-code' || mime === 'text/x-python')
+      );
+    }
+    return false;
+  }
+
+  /**
+   * Create a new table of contents model for the widget
+   *
+   * @param widget - widget
+   * @param configuration - Table of contents configuration
+   * @returns The table of contents model
+   */
+  protected _createNew(
+    widget: IDocumentWidget<FileEditor>,
+    configuration?: TableOfContents.IConfig
+  ): PythonTableOfContentsModel {
+    return new PythonTableOfContentsModel(widget, configuration);
+  }
+}

package/src/tokens.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { IWidgetTracker } from '@jupyterlab/apputils';
+import { IDocumentWidget } from '@jupyterlab/docregistry';
+import { Token } from '@lumino/coreutils';
+import { FileEditor } from './widget';
+
+/**
+ * A class that tracks editor widgets.
+ */
+export interface IEditorTracker
+  extends IWidgetTracker<IDocumentWidget<FileEditor>> {}
+
+/**
+ * The editor tracker token.
+ */
+export const IEditorTracker = new Token<IEditorTracker>(
+  '@jupyterlab/fileeditor:IEditorTracker'
+);

package/src/widget.ts

@@ -0,0 +1,267 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import {
+  CodeEditor,
+  CodeEditorWrapper,
+  IEditorMimeTypeService,
+  IEditorServices
+} from '@jupyterlab/codeeditor';
+import {
+  ABCWidgetFactory,
+  DocumentRegistry,
+  DocumentWidget,
+  IDocumentWidget
+} from '@jupyterlab/docregistry';
+import { textEditorIcon } from '@jupyterlab/ui-components';
+import { PromiseDelegate } from '@lumino/coreutils';
+import { Message } from '@lumino/messaging';
+import { StackedLayout, Widget } from '@lumino/widgets';
+
+/**
+ * The data attribute added to a widget that can run code.
+ */
+const CODE_RUNNER = 'jpCodeRunner';
+
+/**
+ * The data attribute added to a widget that can undo.
+ */
+const UNDOER = 'jpUndoer';
+
+/**
+ * A widget for editors.
+ */
+export class FileEditor extends Widget {
+  /**
+   * Construct a new editor widget.
+   */
+  constructor(options: FileEditor.IOptions) {
+    super();
+    this.addClass('jp-FileEditor');
+
+    const context = (this._context = options.context);
+    this._mimeTypeService = options.mimeTypeService;
+
+    const editorWidget = (this._editorWidget = new CodeEditorWrapper({
+      factory: options.factory,
+      model: context.model,
+      editorOptions: {
+        config: FileEditor.defaultEditorConfig
+      }
+    }));
+    this._editorWidget.addClass('jp-FileEditorCodeWrapper');
+    this._editorWidget.node.dataset[CODE_RUNNER] = 'true';
+    this._editorWidget.node.dataset[UNDOER] = 'true';
+
+    this.editor = editorWidget.editor;
+    this.model = editorWidget.model;
+
+    void context.ready.then(() => {
+      this._onContextReady();
+    });
+
+    // Listen for changes to the path.
+    this._onPathChanged();
+    context.pathChanged.connect(this._onPathChanged, this);
+
+    const layout = (this.layout = new StackedLayout());
+    layout.addWidget(editorWidget);
+  }
+
+  /**
+   * Get the context for the editor widget.
+   */
+  get context(): DocumentRegistry.Context {
+    return this._context;
+  }
+
+  /**
+   * A promise that resolves when the file editor is ready.
+   */
+  get ready(): Promise<void> {
+    return this._ready.promise;
+  }
+
+  /**
+   * Handle the DOM events for the widget.
+   *
+   * @param event - The DOM event sent to the widget.
+   *
+   * #### Notes
+   * This method implements the DOM `EventListener` interface and is
+   * called in response to events on the widget's node. It should
+   * not be called directly by user code.
+   */
+  handleEvent(event: Event): void {
+    if (!this.model) {
+      return;
+    }
+    switch (event.type) {
+      case 'mousedown':
+        this._ensureFocus();
+        break;
+      default:
+        break;
+    }
+  }
+
+  /**
+   * Handle `after-attach` messages for the widget.
+   */
+  protected onAfterAttach(msg: Message): void {
+    super.onAfterAttach(msg);
+    const node = this.node;
+    node.addEventListener('mousedown', this);
+  }
+
+  /**
+   * Handle `before-detach` messages for the widget.
+   */
+  protected onBeforeDetach(msg: Message): void {
+    const node = this.node;
+    node.removeEventListener('mousedown', this);
+  }
+
+  /**
+   * Handle `'activate-request'` messages.
+   */
+  protected onActivateRequest(msg: Message): void {
+    this._ensureFocus();
+  }
+
+  /**
+   * Ensure that the widget has focus.
+   */
+  private _ensureFocus(): void {
+    if (!this.editor.hasFocus()) {
+      this.editor.focus();
+    }
+  }
+
+  /**
+   * Handle actions that should be taken when the context is ready.
+   */
+  private _onContextReady(): void {
+    if (this.isDisposed) {
+      return;
+    }
+
+    // Prevent the initial loading from disk from being in the editor history.
+    this.editor.clearHistory();
+    // Resolve the ready promise.
+    this._ready.resolve(undefined);
+  }
+
+  /**
+   * Handle a change to the path.
+   */
+  private _onPathChanged(): void {
+    const editor = this.editor;
+    const localPath = this._context.localPath;
+
+    editor.model.mimeType =
+      this._mimeTypeService.getMimeTypeByFilePath(localPath);
+  }
+
+  model: CodeEditor.IModel;
+  editor: CodeEditor.IEditor;
+  private _context: DocumentRegistry.Context;
+  private _editorWidget: CodeEditorWrapper;
+  private _mimeTypeService: IEditorMimeTypeService;
+  private _ready = new PromiseDelegate<void>();
+}
+
+/**
+ * The namespace for editor widget statics.
+ */
+export namespace FileEditor {
+  /**
+   * The options used to create an editor widget.
+   */
+  export interface IOptions {
+    /**
+     * A code editor factory.
+     */
+    factory: CodeEditor.Factory;
+
+    /**
+     * The mime type service for the editor.
+     */
+    mimeTypeService: IEditorMimeTypeService;
+
+    /**
+     * The document context associated with the editor.
+     */
+    context: DocumentRegistry.CodeContext;
+  }
+
+  /**
+   * File editor default configuration.
+   */
+  export const defaultEditorConfig: Record<string, any> = {
+    lineNumbers: true,
+    scrollPastEnd: true
+  };
+}
+
+/**
+ * A widget factory for editors.
+ */
+export class FileEditorFactory extends ABCWidgetFactory<
+  IDocumentWidget<FileEditor>,
+  DocumentRegistry.ICodeModel
+> {
+  /**
+   * Construct a new editor widget factory.
+   */
+  constructor(options: FileEditorFactory.IOptions) {
+    super(options.factoryOptions);
+    this._services = options.editorServices;
+  }
+
+  /**
+   * Create a new widget given a context.
+   */
+  protected createNewWidget(
+    context: DocumentRegistry.CodeContext
+  ): IDocumentWidget<FileEditor> {
+    const func = this._services.factoryService.newDocumentEditor;
+    const factory: CodeEditor.Factory = options => {
+      // Use same id as document factory
+      return func(options);
+    };
+    const content = new FileEditor({
+      factory,
+      context,
+      mimeTypeService: this._services.mimeTypeService
+    });
+
+    content.title.icon = textEditorIcon;
+    const widget = new DocumentWidget({ content, context });
+    return widget;
+  }
+
+  private _services: IEditorServices;
+}
+
+/**
+ * The namespace for `FileEditorFactory` class statics.
+ */
+export namespace FileEditorFactory {
+  /**
+   * The options used to create an editor widget factory.
+   */
+  export interface IOptions {
+    /**
+     * The editor services used by the factory.
+     */
+    editorServices: IEditorServices;
+
+    /**
+     * The factory options associated with the factory.
+     */
+    factoryOptions: DocumentRegistry.IWidgetFactoryOptions<
+      IDocumentWidget<FileEditor>
+    >;
+  }
+}

package/style/base.css

@@ -10,3 +10,11 @@
 .jp-mod-presentationMode .jp-FileEditor {
   --jp-code-font-size: var(--jp-code-presentation-font-size);
 }
+
+.jp-FileEditorCodeWrapper {
+  overflow: auto;
+}
+
+.jp-FileEditorCodeWrapper .cm-editor {
+  height: 100%;
+}

package/style/index.css

@@ -8,6 +8,10 @@
 @import url('~@jupyterlab/ui-components/style/index.css');
 @import url('~@jupyterlab/apputils/style/index.css');
 @import url('~@jupyterlab/codeeditor/style/index.css');
+@import url('~@jupyterlab/documentsearch/style/index.css');
+@import url('~@jupyterlab/codemirror/style/index.css');
 @import url('~@jupyterlab/docregistry/style/index.css');
+@import url('~@jupyterlab/lsp/style/index.css');
+@import url('~@jupyterlab/toc/style/index.css');
 
 @import url('./base.css');

package/style/index.js

@@ -8,6 +8,10 @@ import '@lumino/widgets/style/index.js';
 import '@jupyterlab/ui-components/style/index.js';
 import '@jupyterlab/apputils/style/index.js';
 import '@jupyterlab/codeeditor/style/index.js';
+import '@jupyterlab/documentsearch/style/index.js';
+import '@jupyterlab/codemirror/style/index.js';
 import '@jupyterlab/docregistry/style/index.js';
+import '@jupyterlab/lsp/style/index.js';
+import '@jupyterlab/toc/style/index.js';
 
 import './base.css';