@jupyterlab/fileeditor 4.0.0-alpha.19 → 4.0.0-alpha.20

package/src/fileeditorlspadapter.ts

@@ -0,0 +1,225 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { CodeMirrorEditor } from '@jupyterlab/codemirror';
+import { DocumentRegistry, IDocumentWidget } from '@jupyterlab/docregistry';
+import {
+  Document,
+  IAdapterOptions,
+  IVirtualPosition,
+  VirtualDocument,
+  WidgetLSPAdapter
+} from '@jupyterlab/lsp';
+import { PromiseDelegate } from '@lumino/coreutils';
+
+import { FileEditor } from './widget';
+
+export interface IFileEditorAdapterOptions extends IAdapterOptions {
+  /**
+   * The document registry instance.
+   */
+  docRegistry: DocumentRegistry;
+}
+
+export class FileEditorAdapter extends WidgetLSPAdapter<
+  IDocumentWidget<FileEditor>
+> {
+  constructor(
+    editorWidget: IDocumentWidget<FileEditor>,
+    options: IFileEditorAdapterOptions
+  ) {
+    const { docRegistry, ...others } = options;
+    super(editorWidget, others);
+    this.editor = editorWidget.content;
+    this._docRegistry = docRegistry;
+
+    // Ensure editor uniqueness
+    this._virtualEditor = Object.freeze({
+      getEditor: () => this.editor.editor,
+      ready: () => Promise.resolve(this.editor.editor),
+      reveal: () => Promise.resolve(this.editor.editor)
+    });
+
+    Promise.all([this.editor.context.ready, this.connectionManager.ready])
+      .then(async () => {
+        await this.initOnceReady();
+        this._readyDelegate.resolve();
+      })
+      .catch(console.error);
+  }
+
+  /**
+   * The wrapped `FileEditor` widget.
+   */
+  readonly editor: FileEditor;
+
+  /**
+   * Promise that resolves once the adapter is initialized
+   */
+  get ready(): Promise<void> {
+    return this._readyDelegate.promise;
+  }
+
+  /**
+   * Get current path of the document.
+   */
+  get documentPath(): string {
+    return this.widget.context.path;
+  }
+
+  /**
+   * Get the mime type of the document.
+   */
+  get mimeType(): string {
+    const mimeTypeFromModel = this.editor.model.mimeType;
+    const codeMirrorMimeType: string = Array.isArray(mimeTypeFromModel)
+      ? mimeTypeFromModel[0] ?? 'text/plain'
+      : mimeTypeFromModel;
+    const contentsModel = this.editor.context.contentsModel;
+
+    // when MIME type is not known it defaults to 'text/plain',
+    // so if it is different we can accept it as it is
+    if (codeMirrorMimeType != 'text/plain') {
+      return codeMirrorMimeType;
+    } else if (contentsModel) {
+      // a script that does not have a MIME type known by the editor
+      // (no syntax highlight mode), can still be known by the document
+      // registry (and this is arguably easier to extend).
+      let fileType = this._docRegistry.getFileTypeForModel(contentsModel);
+      return fileType.mimeTypes[0];
+    } else {
+      // "text/plain" this is
+      return codeMirrorMimeType;
+    }
+  }
+
+  /**
+   * Get the file extension of the document.
+   */
+  get languageFileExtension(): string {
+    let parts = this.documentPath.split('.');
+    return parts[parts.length - 1];
+  }
+
+  /**
+   * Get the CM editor
+   */
+  get ceEditor(): CodeMirrorEditor {
+    return this.editor.editor as CodeMirrorEditor;
+  }
+
+  /**
+   * Get the activated CM editor.
+   */
+  get activeEditor(): Document.IEditor {
+    return this._virtualEditor;
+  }
+
+  /**
+   * Get the inner HTMLElement of the document widget.
+   */
+  get wrapperElement(): HTMLElement {
+    return this.widget.node;
+  }
+
+  /**
+   * Get current path of the document.
+   */
+  get path(): string {
+    return this.widget.context.path;
+  }
+
+  /**
+   *  Get the list of CM editors in the document, there is only one editor
+   * in the case of file editor.
+   */
+  get editors(): Document.ICodeBlockOptions[] {
+    return [
+      {
+        ceEditor: this._virtualEditor,
+        type: 'code',
+        value: this.editor?.model.sharedModel.getSource() ?? ''
+      }
+    ];
+  }
+
+  /**
+   * Dispose the widget.
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this.editor.model.mimeTypeChanged.disconnect(this.reloadConnection);
+    super.dispose();
+  }
+
+  /**
+   * Generate the virtual document associated with the document.
+   */
+  createVirtualDocument(): VirtualDocument {
+    return new VirtualDocument({
+      language: this.language,
+      foreignCodeExtractors: this.options.foreignCodeExtractorsManager,
+      path: this.documentPath,
+      fileExtension: this.languageFileExtension,
+      // notebooks are continuous, each cell is dependent on the previous one
+      standalone: true,
+      // notebooks are not supported by LSP servers
+      hasLspSupportedFile: true
+    });
+  }
+
+  /**
+   * Get the index of editor from the cursor position in the virtual
+   * document. Since there is only one editor, this method always return
+   * 0
+   *
+   * @param position - the position of cursor in the virtual document.
+   * @return  {number} - index of the virtual editor
+   */
+  getEditorIndexAt(position: IVirtualPosition): number {
+    return 0;
+  }
+
+  /**
+   * Get the index of input editor
+   *
+   * @param ceEditor - instance of the code editor
+   */
+  getEditorIndex(ceEditor: Document.IEditor): number {
+    return 0;
+  }
+
+  /**
+   * Get the wrapper of input editor.
+   *
+   * @param ceEditor
+   * @return  {HTMLElement}
+   */
+  getEditorWrapper(ceEditor: Document.IEditor): HTMLElement {
+    return this.wrapperElement;
+  }
+
+  /**
+   * Initialization function called once the editor and the LSP connection
+   * manager is ready. This function will create the virtual document and
+   * connect various signals.
+   */
+  protected async initOnceReady(): Promise<void> {
+    this.initVirtual();
+
+    // connect the document, but do not open it as the adapter will handle this
+    // after registering all features
+    await this.connectDocument(this.virtualDocument!, false);
+
+    this.editor.model.mimeTypeChanged.connect(this.reloadConnection, this);
+  }
+
+  /**
+   * The document registry instance.
+   */
+  private readonly _docRegistry: DocumentRegistry;
+  private readonly _virtualEditor: Document.IEditor;
+  private _readyDelegate = new PromiseDelegate<void>();
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+/**
+ * @packageDocumentation
+ * @module fileeditor
+ */
+
+export * from './fileeditorlspadapter';
+export * from './searchprovider';
+export * from './syntaxstatus';
+export * from './tabspacestatus';
+export * from './toc';
+export * from './tokens';
+export * from './widget';

package/src/searchprovider.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import { MainAreaWidget } from '@jupyterlab/apputils';
+import { CodeMirrorEditor, EditorSearchProvider } from '@jupyterlab/codemirror';
+import { CodeEditor } from '@jupyterlab/codeeditor';
+import {
+  IReplaceOptionsSupport,
+  ISearchProvider
+} from '@jupyterlab/documentsearch';
+import { ITranslator } from '@jupyterlab/translation';
+import { Widget } from '@lumino/widgets';
+import { FileEditor } from './widget';
+
+/**
+ * Helper type
+ */
+export type FileEditorPanel = MainAreaWidget<FileEditor>;
+
+/**
+ * File editor search provider
+ */
+export class FileEditorSearchProvider
+  extends EditorSearchProvider<CodeEditor.IModel>
+  implements ISearchProvider
+{
+  /**
+   * Constructor
+   * @param widget File editor panel
+   */
+  constructor(protected widget: FileEditorPanel) {
+    super();
+  }
+
+  get isReadOnly(): boolean {
+    return this.editor.getOption('readOnly') as boolean;
+  }
+
+  /**
+   * Support for options adjusting replacement behavior.
+   */
+  get replaceOptionsSupport(): IReplaceOptionsSupport {
+    return {
+      preserveCase: true
+    };
+  }
+
+  /**
+   * Text editor
+   */
+  get editor() {
+    return this.widget.content.editor as CodeMirrorEditor;
+  }
+
+  /**
+   * Editor content model
+   */
+  get model(): CodeEditor.IModel {
+    return this.widget.content.model;
+  }
+
+  /**
+   * Instantiate a search provider for the widget.
+   *
+   * #### Notes
+   * The widget provided is always checked using `isApplicable` before calling
+   * this factory.
+   *
+   * @param widget The widget to search on
+   * @param translator [optional] The translator object
+   *
+   * @returns The search provider on the widget
+   */
+  static createNew(
+    widget: FileEditorPanel,
+    translator?: ITranslator
+  ): ISearchProvider {
+    return new FileEditorSearchProvider(widget);
+  }
+
+  /**
+   * Report whether or not this provider has the ability to search on the given object
+   */
+  static isApplicable(domain: Widget): domain is FileEditorPanel {
+    return (
+      domain instanceof MainAreaWidget &&
+      domain.content instanceof FileEditor &&
+      domain.content.editor instanceof CodeMirrorEditor
+    );
+  }
+
+  /**
+   * Get an initial query value if applicable so that it can be entered
+   * into the search box as an initial query
+   *
+   * @returns Initial value used to populate the search box.
+   */
+  getInitialQuery(): string {
+    const cm = this.editor as CodeMirrorEditor;
+    const selection = cm.state.sliceDoc(
+      cm.state.selection.main.from,
+      cm.state.selection.main.to
+    );
+    return selection;
+  }
+}

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