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

package/src/syntaxstatus.tsx

@@ -0,0 +1,217 @@
+/*
+ * Copyright (c) Jupyter Development Team.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+import { CodeEditor, IEditorMimeTypeService } from '@jupyterlab/codeeditor';
+import { IEditorLanguageRegistry } from '@jupyterlab/codemirror';
+import { IChangedArgs } from '@jupyterlab/coreutils';
+import { Popup, showPopup, TextItem } from '@jupyterlab/statusbar';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { VDomModel, VDomRenderer } from '@jupyterlab/ui-components';
+import { CommandRegistry } from '@lumino/commands';
+import { JSONObject } from '@lumino/coreutils';
+import { Menu } from '@lumino/widgets';
+import React from 'react';
+
+/**
+ * A namespace for `EditorSyntaxComponentStatics`.
+ */
+namespace EditorSyntaxComponent {
+  /**
+   * The props for the `EditorSyntaxComponent`.
+   */
+  export interface IProps {
+    /**
+     * The current CodeMirror language for an editor.
+     */
+    language: string;
+
+    /**
+     * A function to execute on clicking the component.
+     * By default we provide a function that opens a menu
+     * for CodeMirror language selection.
+     */
+    handleClick: () => void;
+  }
+}
+
+/**
+ * A pure function that returns a tsx component for an editor syntax item.
+ *
+ * @param props: the props for the component.
+ *
+ * @returns an editor syntax component.
+ */
+function EditorSyntaxComponent(
+  props: EditorSyntaxComponent.IProps
+): React.ReactElement<EditorSyntaxComponent.IProps> {
+  return <TextItem source={props.language} onClick={props.handleClick} />;
+}
+
+/**
+ * StatusBar item to change the language syntax highlighting of the file editor.
+ */
+export class EditorSyntaxStatus extends VDomRenderer<EditorSyntaxStatus.Model> {
+  /**
+   * Construct a new VDomRenderer for the status item.
+   */
+  constructor(options: EditorSyntaxStatus.IOptions) {
+    super(new EditorSyntaxStatus.Model(options.languages));
+    this._commands = options.commands;
+    this.translator = options.translator ?? nullTranslator;
+    const trans = this.translator.load('jupyterlab');
+
+    this.addClass('jp-mod-highlighted');
+    this.title.caption = trans.__('Change text editor syntax highlighting');
+  }
+
+  /**
+   * Render the status item.
+   */
+  render(): JSX.Element | null {
+    if (!this.model) {
+      return null;
+    }
+    return (
+      <EditorSyntaxComponent
+        language={this.model.language}
+        handleClick={this._handleClick}
+      />
+    );
+  }
+
+  /**
+   * Create a menu for selecting the language of the editor.
+   */
+  private _handleClick = () => {
+    const languageMenu = new Menu({ commands: this._commands });
+    const command = 'fileeditor:change-language';
+    if (this._popup) {
+      this._popup.dispose();
+    }
+    this.model.languages
+      .getLanguages()
+      .sort((a, b) => {
+        const aName = a.displayName ?? a.name;
+        const bName = b.displayName ?? b.name;
+        return aName.localeCompare(bName);
+      })
+      .forEach(spec => {
+        if (spec.name.toLowerCase().indexOf('brainf') === 0) {
+          return;
+        }
+
+        const args: JSONObject = {
+          name: spec.name,
+          displayName: spec.displayName ?? spec.name
+        };
+
+        languageMenu.addItem({
+          command,
+          args
+        });
+      });
+    this._popup = showPopup({
+      body: languageMenu,
+      anchor: this,
+      align: 'left'
+    });
+  };
+
+  protected translator: ITranslator;
+  private _commands: CommandRegistry;
+  private _popup: Popup | null = null;
+}
+
+/**
+ * A namespace for EditorSyntax statics.
+ */
+export namespace EditorSyntaxStatus {
+  /**
+   * A VDomModel for the current editor/mode combination.
+   */
+  export class Model extends VDomModel {
+    constructor(public languages: IEditorLanguageRegistry) {
+      super();
+    }
+    /**
+     * The current editor language. If no editor is present,
+     * returns the empty string.
+     */
+    get language(): string {
+      return this._language;
+    }
+
+    /**
+     * The current editor for the application editor tracker.
+     */
+    get editor(): CodeEditor.IEditor | null {
+      return this._editor;
+    }
+    set editor(editor: CodeEditor.IEditor | null) {
+      const oldEditor = this._editor;
+      if (oldEditor !== null) {
+        oldEditor.model.mimeTypeChanged.disconnect(this._onMIMETypeChange);
+      }
+      const oldLanguage = this._language;
+      this._editor = editor;
+      if (this._editor === null) {
+        this._language = '';
+      } else {
+        const spec = this.languages.findByMIME(this._editor.model.mimeType);
+        this._language = spec?.name ?? IEditorMimeTypeService.defaultMimeType;
+
+        this._editor.model.mimeTypeChanged.connect(this._onMIMETypeChange);
+      }
+
+      this._triggerChange(oldLanguage, this._language);
+    }
+
+    /**
+     * If the editor mode changes, update the model.
+     */
+    private _onMIMETypeChange = (
+      mode: CodeEditor.IModel,
+      change: IChangedArgs<string>
+    ) => {
+      const oldLanguage = this._language;
+      const spec = this.languages.findByMIME(change.newValue);
+      this._language = spec?.name ?? IEditorMimeTypeService.defaultMimeType;
+
+      this._triggerChange(oldLanguage, this._language);
+    };
+
+    /**
+     * Trigger a rerender of the model.
+     */
+    private _triggerChange(oldState: string, newState: string) {
+      if (oldState !== newState) {
+        this.stateChanged.emit(void 0);
+      }
+    }
+
+    private _language: string = '';
+    private _editor: CodeEditor.IEditor | null = null;
+  }
+
+  /**
+   * Options for the EditorSyntax status item.
+   */
+  export interface IOptions {
+    /**
+     * The application command registry.
+     */
+    commands: CommandRegistry;
+
+    /**
+     * Editor languages.
+     */
+    languages: IEditorLanguageRegistry;
+
+    /**
+     * The language translator.
+     */
+    translator?: ITranslator;
+  }
+}

package/src/tabspacestatus.tsx

@@ -0,0 +1,166 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { Popup, showPopup, TextItem } from '@jupyterlab/statusbar';
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+import { VDomModel, VDomRenderer } from '@jupyterlab/ui-components';
+import { Menu } from '@lumino/widgets';
+import React from 'react';
+
+/**
+ * A namespace for TabSpaceComponent statics.
+ */
+namespace TabSpaceComponent {
+  /**
+   * The props for TabSpaceComponent.
+   */
+  export interface IProps {
+    /**
+     * The number of spaces for indentation.
+     *
+     * `null` means use tab character for indentation.
+     */
+    tabSpace: number | null;
+
+    /**
+     * The application language translator.
+     */
+    translator?: ITranslator;
+
+    /**
+     * A click handler for the TabSpace component. By default
+     * opens a menu allowing the user to select tabs vs spaces.
+     */
+    handleClick: () => void;
+  }
+}
+
+/**
+ * A pure functional component for rendering the TabSpace status.
+ */
+function TabSpaceComponent(
+  props: TabSpaceComponent.IProps
+): React.ReactElement<TabSpaceComponent.IProps> {
+  const translator = props.translator || nullTranslator;
+  const trans = translator.load('jupyterlab');
+  const description =
+    typeof props.tabSpace === 'number'
+      ? trans.__('Spaces')
+      : trans.__('Tab Indent');
+  return (
+    <TextItem
+      onClick={props.handleClick}
+      source={
+        typeof props.tabSpace === 'number'
+          ? `${description}: ${props.tabSpace}`
+          : description
+      }
+      title={trans.__('Change the indentation…')}
+    />
+  );
+}
+
+/**
+ * A VDomRenderer for a tabs vs. spaces status item.
+ */
+export class TabSpaceStatus extends VDomRenderer<TabSpaceStatus.Model> {
+  /**
+   * Create a new tab/space status item.
+   */
+  constructor(options: TabSpaceStatus.IOptions) {
+    super(new TabSpaceStatus.Model());
+    this._menu = options.menu;
+    this.translator = options.translator || nullTranslator;
+    this.addClass('jp-mod-highlighted');
+  }
+
+  /**
+   * Render the TabSpace status item.
+   */
+  render(): React.ReactElement<TabSpaceComponent.IProps> | null {
+    if (!this.model?.indentUnit) {
+      return null;
+    } else {
+      const tabSpace =
+        this.model.indentUnit === 'Tab'
+          ? null
+          : parseInt(this.model.indentUnit, 10);
+      return (
+        <TabSpaceComponent
+          tabSpace={tabSpace}
+          handleClick={() => this._handleClick()}
+          translator={this.translator}
+        />
+      );
+    }
+  }
+
+  /**
+   * Handle a click on the status item.
+   */
+  private _handleClick(): void {
+    const menu = this._menu;
+    if (this._popup) {
+      this._popup.dispose();
+    }
+
+    menu.aboutToClose.connect(this._menuClosed, this);
+
+    this._popup = showPopup({
+      body: menu,
+      anchor: this,
+      align: 'right'
+    });
+    // Update the menu items
+    menu.update();
+  }
+
+  private _menuClosed(): void {
+    this.removeClass('jp-mod-clicked');
+  }
+
+  protected translator: ITranslator;
+  private _menu: Menu;
+  private _popup: Popup | null = null;
+}
+
+/**
+ * A namespace for TabSpace statics.
+ */
+export namespace TabSpaceStatus {
+  /**
+   * A VDomModel for the TabSpace status item.
+   */
+  export class Model extends VDomModel {
+    /**
+     * Code editor indentation unit
+     */
+    get indentUnit(): string | null {
+      return this._indentUnit;
+    }
+    set indentUnit(v: string | null) {
+      if (v !== this._indentUnit) {
+        this._indentUnit = v;
+        this.stateChanged.emit();
+      }
+    }
+
+    private _indentUnit: string | null;
+  }
+
+  /**
+   * Options for creating a TabSpace status item.
+   */
+  export interface IOptions {
+    /**
+     * A menu to open when clicking on the status item. This should allow
+     * the user to make a different selection about tabs/spaces.
+     */
+    menu: Menu;
+
+    /**
+     * Language translator.
+     */
+    translator?: ITranslator;
+  }
+}

package/src/toc/factory.ts

@@ -0,0 +1,72 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { DocumentRegistry, IDocumentWidget } from '@jupyterlab/docregistry';
+import {
+  TableOfContents,
+  TableOfContentsFactory,
+  TableOfContentsModel
+} from '@jupyterlab/toc';
+import { FileEditor } from '../widget';
+
+/**
+ * Interface describing a file editor heading.
+ */
+export interface IEditorHeading extends TableOfContents.IHeading {
+  /**
+   * Heading line number.
+   */
+  line: number;
+}
+
+/**
+ * Base table of contents model factory for file editor
+ */
+export abstract class EditorTableOfContentsFactory extends TableOfContentsFactory<
+  IDocumentWidget<FileEditor>
+> {
+  /**
+   * 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
+   */
+  createNew(
+    widget: IDocumentWidget<FileEditor, DocumentRegistry.IModel>,
+    configuration?: TableOfContents.IConfig
+  ): TableOfContentsModel<
+    IEditorHeading,
+    IDocumentWidget<FileEditor, DocumentRegistry.IModel>
+  > {
+    const model = super.createNew(
+      widget,
+      configuration
+    ) as TableOfContentsModel<
+      IEditorHeading,
+      IDocumentWidget<FileEditor, DocumentRegistry.IModel>
+    >;
+
+    const onActiveHeadingChanged = (
+      model: TableOfContentsModel<
+        IEditorHeading,
+        IDocumentWidget<FileEditor, DocumentRegistry.IModel>
+      >,
+      heading: IEditorHeading | null
+    ) => {
+      if (heading) {
+        widget.content.editor.setCursorPosition({
+          line: heading.line,
+          column: 0
+        });
+      }
+    };
+
+    model.activeHeadingChanged.connect(onActiveHeadingChanged);
+    widget.disposed.connect(() => {
+      model.activeHeadingChanged.disconnect(onActiveHeadingChanged);
+    });
+
+    return model;
+  }
+}

package/src/toc/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+export * from './factory';
+export * from './latex';
+export * from './markdown';
+export * from './python';

package/src/toc/latex.ts

@@ -0,0 +1,145 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { DocumentRegistry, IDocumentWidget } from '@jupyterlab/docregistry';
+import {
+  TableOfContents,
+  TableOfContentsModel,
+  TableOfContentsUtils
+} from '@jupyterlab/toc';
+import { Widget } from '@lumino/widgets';
+import { FileEditor } from '../widget';
+import { EditorTableOfContentsFactory, IEditorHeading } from './factory';
+
+/**
+ * Maps LaTeX section headings to HTML header levels.
+ *
+ * ## Notes
+ *
+ * -   As `part` and `chapter` section headings appear to be less common, assign them to heading level 1.
+ *
+ * @private
+ */
+const LATEX_LEVELS: { [label: string]: number } = {
+  part: 1, // Only available for report and book classes
+  chapter: 1, // Only available for report and book classes
+  section: 1,
+  subsection: 2,
+  subsubsection: 3,
+  paragraph: 4,
+  subparagraph: 5
+};
+
+/**
+ * Regular expression to create the outline
+ */
+const SECTIONS = /^\s*\\(section|subsection|subsubsection){(.+)}/;
+
+/**
+ * Table of content model for LaTeX files.
+ */
+export class LaTeXTableOfContentsModel 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 'latex';
+  }
+
+  /**
+   * List of configuration options supported by the model.
+   */
+  get supportedOptions(): (keyof TableOfContents.IConfig)[] {
+    return ['maximalDepth', 'numberHeaders'];
+  }
+
+  /**
+   * Produce the headings for a document.
+   *
+   * @returns The list of new headings or `null` if nothing needs to be updated.
+   */
+  protected 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>;
+
+    const levels = new Array<number>();
+    let previousLevel = levels.length;
+    const headings = new Array<IEditorHeading>();
+    for (let i = 0; i < lines.length; i++) {
+      const match = lines[i].match(SECTIONS);
+      if (match) {
+        const level = LATEX_LEVELS[match[1]];
+        if (level <= this.configuration.maximalDepth) {
+          const prefix = TableOfContentsUtils.getPrefix(
+            level,
+            previousLevel,
+            levels,
+            {
+              ...this.configuration,
+              // Force base numbering and numbering first level
+              baseNumbering: 1,
+              numberingH1: true
+            }
+          );
+          previousLevel = level;
+
+          headings.push({
+            text: match[2],
+            prefix: prefix,
+            level,
+            line: i
+          });
+        }
+      }
+    }
+    return Promise.resolve(headings);
+  }
+}
+
+/**
+ * Table of content model factory for LaTeX files.
+ */
+export class LaTeXTableOfContentsFactory 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 === 'text/x-latex' || mime === 'text/x-stex');
+    }
+    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, DocumentRegistry.IModel>,
+    configuration?: TableOfContents.IConfig
+  ): LaTeXTableOfContentsModel {
+    return new LaTeXTableOfContentsModel(widget, configuration);
+  }
+}

package/src/toc/markdown.ts

@@ -0,0 +1,90 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { DocumentRegistry, IDocumentWidget } from '@jupyterlab/docregistry';
+import {
+  TableOfContents,
+  TableOfContentsModel,
+  TableOfContentsUtils
+} from '@jupyterlab/toc';
+import { Widget } from '@lumino/widgets';
+import { FileEditor } from '../widget';
+import { EditorTableOfContentsFactory, IEditorHeading } from './factory';
+
+/**
+ * Table of content model for Markdown files.
+ */
+export class MarkdownTableOfContentsModel 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 'markdown';
+  }
+
+  /**
+   * Produce the headings for a document.
+   *
+   * @returns The list of new headings or `null` if nothing needs to be updated.
+   */
+  protected getHeadings(): Promise<IEditorHeading[] | null> {
+    if (!this.isActive) {
+      return Promise.resolve(null);
+    }
+
+    const content = this.widget.content.model.sharedModel.getSource();
+
+    const headings = TableOfContentsUtils.filterHeadings(
+      TableOfContentsUtils.Markdown.getHeadings(content),
+      {
+        ...this.configuration,
+        // Force removing numbering as they cannot be displayed
+        // in the document
+        numberHeaders: false
+      }
+    );
+    return Promise.resolve(headings);
+  }
+}
+
+/**
+ * Table of content model factory for Markdown files.
+ */
+export class MarkdownTableOfContentsFactory 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 && TableOfContentsUtils.Markdown.isMarkdown(mime);
+    }
+    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, DocumentRegistry.IModel>,
+    configuration?: TableOfContents.IConfig
+  ): MarkdownTableOfContentsModel {
+    return new MarkdownTableOfContentsModel(widget, configuration);
+  }
+}