tessl/npm-jupyterlab--codemirror

CodeMirror 6 editor provider for JupyterLab with comprehensive language support, themes, extensions, and collaborative editing capabilities

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Editor Factory

Name: tessl/npm-jupyterlab--codemirror
Author: tessl

The CodeMirrorEditorFactory provides a service for creating CodeMirror editors with different configurations optimized for inline and document use cases.

Capabilities

CodeMirrorEditorFactory Class

Factory service implementing the JupyterLab editor factory interface for creating CodeMirror editors.

/**
 * CodeMirror editor factory service
 * Creates editors with optimized configurations for different use cases
 */
class CodeMirrorEditorFactory implements IEditorFactoryService {
  constructor(options?: IEditorFactoryOptions);
  
  /**
   * Create a new editor for inline code
   * Optimized for single-line or short code snippets
   */
  readonly newInlineEditor: (options: CodeEditor.IOptions) => CodeMirrorEditor;
  
  /**
   * Create a new editor for a full document
   * Optimized for multi-line documents with full editing features
   */
  readonly newDocumentEditor: (options: CodeEditor.IOptions) => CodeMirrorEditor;
  
  // Protected properties for customization
  protected extensions: IEditorExtensionRegistry;
  protected languages: IEditorLanguageRegistry;
  protected translator: ITranslator;
  protected inlineCodeMirrorConfig: Record<string, any>;
  protected documentCodeMirrorConfig: Record<string, any>;
}

interface IEditorFactoryOptions {
  extensions?: IEditorExtensionRegistry;
  languages?: IEditorLanguageRegistry;
  translator?: ITranslator;
}

Usage Examples:

import { CodeMirrorEditorFactory } from "@jupyterlab/codemirror";
import { CodeEditor } from "@jupyterlab/codeeditor";

// Create factory with default registries
const factory = new CodeMirrorEditorFactory();

// Create document editor for full editing experience
const model = new CodeEditor.Model();
const documentEditor = factory.newDocumentEditor({
  model,
  host: document.createElement('div'),
  config: {
    lineNumbers: true,
    scrollPastEnd: true
  }
});

// Create inline editor for simple input
const inlineModel = new CodeEditor.Model();
const inlineEditor = factory.newInlineEditor({
  model: inlineModel,
  host: document.createElement('div'),
  config: {
    searchWithCM: true
  }
});

// Set content and language
model.sharedModel.setSource("# Python Code\nprint('Hello, World!')");
model.mimeType = "text/x-python";

inlineModel.sharedModel.setSource("console.log('Inline JS');");
inlineModel.mimeType = "text/javascript";

Factory Configuration

The factory comes with pre-configured settings for different editor types.

// Default inline editor configuration
protected inlineCodeMirrorConfig: Record<string, any> = {
  searchWithCM: true
};

// Default document editor configuration  
protected documentCodeMirrorConfig: Record<string, any> = {
  lineNumbers: true,
  scrollPastEnd: true
};

Custom Factory Setup

Create a factory with custom registries and configurations.

import { 
  CodeMirrorEditorFactory,
  EditorExtensionRegistry,
  EditorLanguageRegistry,
  EditorThemeRegistry
} from "@jupyterlab/codemirror";
import { nullTranslator } from "@jupyterlab/translation";

// Create custom registries
const extensions = new EditorExtensionRegistry();
const languages = new EditorLanguageRegistry();
const translator = nullTranslator;

// Add custom extensions
extensions.addExtension({
  name: 'myCustomExtension',
  factory: (options) => ({
    instance: (value) => myCustomExtension(value),
    reconfigure: (value) => null
  }),
  default: true
});

// Create factory with custom setup
const customFactory = new CodeMirrorEditorFactory({
  extensions,
  languages,
  translator
});

// Create editors using custom factory
const editor = customFactory.newDocumentEditor({
  model: new CodeEditor.Model(),
  host: document.createElement('div'),
  config: {
    // Custom configuration options
    myCustomExtension: true,
    lineNumbers: false,
    theme: 'dark'
  }
});

Editor Type Differences

Understanding the differences between inline and document editors.

Inline Editor Characteristics:

Optimized for single-line or short snippets
Minimal UI chrome
Search functionality enabled by default
No line numbers by default
Compact appearance

Document Editor Characteristics:

Full-featured editing experience
Line numbers enabled by default
Scroll past end enabled
Optimized for multi-line documents
Complete feature set

// Inline editor optimized configuration
const inlineEditor = factory.newInlineEditor({
  model,
  host: inlineContainer,
  config: {
    searchWithCM: true,    // Enable search panel
    lineNumbers: false,    // No line numbers for compact view
    lineWrap: true        // Wrap long lines
  }
});

// Document editor full-featured configuration
const documentEditor = factory.newDocumentEditor({
  model,
  host: documentContainer,
  config: {
    lineNumbers: true,     // Show line numbers
    scrollPastEnd: true,   // Allow scrolling past document end
    codeFolding: true,     // Enable code folding
    rulers: [80, 120]      // Show ruler lines
  }
});

Advanced Factory Usage

Extending the factory for custom editor types.

class CustomCodeMirrorEditorFactory extends CodeMirrorEditorFactory {
  constructor(options?: IEditorFactoryOptions) {
    super(options);
    
    // Customize configurations
    this.inlineCodeMirrorConfig = {
      ...this.inlineCodeMirrorConfig,
      customInlineFeature: true
    };
    
    this.documentCodeMirrorConfig = {
      ...this.documentCodeMirrorConfig,
      customDocumentFeature: true,
      lineNumbers: true,
      scrollPastEnd: true
    };
  }
  
  // Create specialized editor type
  readonly newConsoleEditor = (options: CodeEditor.IOptions): CodeMirrorEditor => {
    options.host.dataset.type = 'console';
    return this.newEditor({
      ...options,
      config: {
        searchWithCM: false,
        lineNumbers: false,
        scrollPastEnd: false,
        ...options.config
      },
      inline: false
    });
  };
  
  // Override protected method for custom behavior
  protected newEditor(
    options: CodeEditor.IOptions & IEditorExtensionFactory.IOptions
  ): CodeMirrorEditor {
    // Add custom logic before creating editor
    const editor = super.newEditor(options);
    
    // Post-creation customization
    editor.setOption('customSetting', true);
    
    return editor;
  }
}

Integration with JupyterLab

Using the factory within JupyterLab's dependency injection system.

import { JupyterFrontEnd, JupyterFrontEndPlugin } from "@jupyterlab/application";
import { IEditorServices } from "@jupyterlab/codeeditor";
import { 
  CodeMirrorEditorFactory,
  IEditorExtensionRegistry,
  IEditorLanguageRegistry
} from "@jupyterlab/codemirror";

const plugin: JupyterFrontEndPlugin<void> = {
  id: 'my-editor-plugin',
  autoStart: true,
  requires: [IEditorExtensionRegistry, IEditorLanguageRegistry],
  provides: IEditorServices,
  activate: (
    app: JupyterFrontEnd,
    extensions: IEditorExtensionRegistry,
    languages: IEditorLanguageRegistry
  ) => {
    const factory = new CodeMirrorEditorFactory({
      extensions,
      languages,
      translator: app.translator
    });
    
    return {
      factoryService: factory,
      mimeTypeService: new CodeMirrorMimeTypeService(languages)
    };
  }
};

Types

interface IEditorFactoryService {
  newInlineEditor(options: CodeEditor.IOptions): CodeEditor.IEditor;
  newDocumentEditor(options: CodeEditor.IOptions): CodeEditor.IEditor;
}

interface IEditorFactoryOptions {
  extensions?: IEditorExtensionRegistry;
  languages?: IEditorLanguageRegistry;
  translator?: ITranslator;
}

interface IEditorExtensionFactory.IOptions {
  inline: boolean;
  model: CodeEditor.IModel;
}