How to use @jupyterlab/codeeditor - 10 common examples

constructor(options: RawEditor.IOptions) {
    super({
      orientation: 'horizontal',
      renderer: SplitPanel.defaultRenderer,
      spacing: 1
    });

    const { commands, editorFactory, registry } = options;

    this.registry = registry;
    this._commands = commands;

    // Create read-only defaults editor.
    const defaults = (this._defaults = new CodeEditorWrapper({
      model: new CodeEditor.Model(),
      factory: editorFactory
    }));

    defaults.editor.model.value = '';
    defaults.editor.model.mimeType = 'text/javascript';
    defaults.editor.setOption('readOnly', true);

    // Create read-write user settings editor.
    const user = (this._user = new CodeEditorWrapper({
      model: new CodeEditor.Model(),
      factory: editorFactory,
      config: { lineNumbers: true }
    }));

    user.addClass(USER_CLASS);
    user.editor.model.mimeType = 'text/javascript';

constructor(value?: string, options?: Partial) {
    if (options && options.readOnly) {
      // Prevent readonly editor from trapping tabs
      options.extraKeys = {Tab: false, 'Shift-Tab': false};
    }
    super({
      model: new CodeEditor.Model({value}),
      factory: function() {
        let factory = new CodeMirrorEditorFactory(options);
        return factory.newInlineEditor.bind(factory);
      }()
    });
    this.staticLoaded = false;
    EditorWidget.editors.push(this.cm);
  }

Object.keys(config).forEach((key: keyof CodeEditor.IConfig) => {
      config[key] =
        cached[key] === null || cached[key] === undefined
          ? CodeEditor.defaultConfig[key]
          : cached[key];
    });
    // Trigger a refresh of the rendered commands

export function updateSettings(
    settings: ISettingRegistry.ISettings,
    commands: CommandRegistry
  ): void {
    config = {
      ...CodeEditor.defaultConfig,
      ...(settings.get('editorConfig').composite as JSONObject)
    };

    // Trigger a refresh of the rendered commands
    commands.notifyCommandChanged();
  }

editorServices,
    factoryOptions: {
      name: FACTORY,
      fileTypes: ['markdown', '*'], // Explicitly add the markdown fileType so
      defaultFor: ['markdown', '*'] // it outranks the defaultRendered viewer.
    }
  });
  const { commands, restored, shell } = app;
  const tracker = new InstanceTracker>({
    namespace
  });
  const isEnabled = () =>
    tracker.currentWidget !== null &&
    tracker.currentWidget === shell.currentWidget;

  let config: CodeEditor.IConfig = { ...CodeEditor.defaultConfig };

  // Handle state restoration.
  if (restorer) {
    restorer.restore(tracker, {
      command: 'docmanager:open',
      args: widget => ({ path: widget.context.path, factory: FACTORY }),
      name: widget => widget.context.path
    });
  }

  /**
   * Update the setting values.
   */
  function updateSettings(settings: ISettingRegistry.ISettings): void {
    config = {
      ...CodeEditor.defaultConfig,

function updateSettings(settings: ISettingRegistry.ISettings): void {
    config = {
      ...CodeEditor.defaultConfig,
      ...(settings.get('editorConfig').composite as JSONObject)
    };

    // Trigger a refresh of the rendered commands
    app.commands.notifyCommandChanged();
  }

modelDB.connected.then(() => {
        if (!cell.isDisposed) {
          // Setup the selection style for collaborators.
          let localCollaborator = modelDB.collaborators.localCollaborator;
          cell.editor.uuid = localCollaborator.sessionId;
          cell.editor.selectionStyle = {
            ...CodeEditor.defaultSelectionStyle,
            color: localCollaborator.color
          };
        }
      });
    }

constructor(options: CodeMirrorEditor.IOptions) {
    let host = (this.host = options.host);
    host.classList.add(EDITOR_CLASS);
    host.classList.add('jp-Editor');
    host.addEventListener('focus', this, true);
    host.addEventListener('blur', this, true);
    host.addEventListener('scroll', this, true);

    this._uuid = options.uuid || UUID.uuid4();

    // Handle selection style.
    let style = options.selectionStyle || {};
    this._selectionStyle = {
      ...CodeEditor.defaultSelectionStyle,
      ...(style as CodeEditor.ISelectionStyle)
    };

    let model = (this._model = options.model);
    let config = options.config || {};
    let fullConfig = (this._config = {
      ...CodeMirrorEditor.defaultConfig,
      ...config
    });
    let editor = (this._editor = Private.createEditor(host, fullConfig));

    let doc = editor.getDoc();

    // Handle initial values for text, mimetype, and selections.
    doc.setValue(model.value.text);
    this.clearHistory();

constructor(options: CodeMirrorEditor.IOptions) {
    let host = this.host = options.host;
    host.classList.add(EDITOR_CLASS);
    host.classList.add('jp-Editor');
    host.addEventListener('focus', this, true);
    host.addEventListener('scroll', this, true);

    this._uuid = options.uuid || uuid();

    // Handle selection style.
    let style = options.selectionStyle || {};
    this._selectionStyle = {
        ...CodeEditor.defaultSelectionStyle,
        ...style as CodeEditor.ISelectionStyle
    };

    let model = this._model = options.model;
    let editor = this._editor = CodeMirror(host, {});
    Private.handleConfig(editor, options.config || {});

    let doc = editor.getDoc();

    // Handle initial values for text, mimetype, and selections.
    doc.setValue(model.value.text);
    this._onMimeTypeChanged();
    this._onCursorActivity();

    // Connect to changes.
    model.value.changed.connect(this._onValueChanged, this);

constructor(options: CodeMirrorEditor.IOptions) {
    let host = (this.host = options.host);
    host.classList.add(EDITOR_CLASS);
    host.classList.add('jp-Editor');
    host.addEventListener('focus', this, true);
    host.addEventListener('blur', this, true);
    host.addEventListener('scroll', this, true);

    this._uuid = options.uuid || UUID.uuid4();

    // Handle selection style.
    let style = options.selectionStyle || {};
    this._selectionStyle = {
      ...CodeEditor.defaultSelectionStyle,
      ...(style as CodeEditor.ISelectionStyle)
    };

    let model = (this._model = options.model);
    let config = options.config || {};
    let fullConfig = (this._config = {
      ...CodeMirrorEditor.defaultConfig,
      ...config
    });
    let editor = (this._editor = Private.createEditor(host, fullConfig));

    let doc = editor.getDoc();

    // Handle initial values for text, mimetype, and selections.
    doc.setValue(model.value.text);
    this.clearHistory();