Use Codemirror in a custom Lumino widget

Widgets
1

Hi all,
I have an extension that opens up a form for configuring some objects. I need few of the input widgets to be codemirror instances.
What is the best way to use codemirror (which I suppose is already part of Jupyterlab) in custom Lumino widgets?
Thanks a lot!

2

You can get the editorServices plugin (provided at jupyterlab/index.ts at 5645283bd0b1fc8cd7a8d517f4ca7eb084cd8b25 · jupyterlab/jupyterlab · GitHub) and use it to instantiate an editor factoryService (defined at jupyterlab/index.ts at 5645283bd0b1fc8cd7a8d517f4ca7eb084cd8b25 · jupyterlab/jupyterlab · GitHub), and use that to create new inline or document-style editors (sounds like you want an inline editor, like a code cell): jupyterlab/factory.ts at 5645283bd0b1fc8cd7a8d517f4ca7eb084cd8b25 · jupyterlab/jupyterlab · GitHub

You can search the codebase for newInlineEditor for some examples of how it is used.

2 Likes
3

It took me a while to synthesize the information mostly from here.

Reporting it … maybe it’ll be useful for someone else.

//the required imports
import { CodeEditor } from '@jupyterlab/codeeditor';
import { editorServices } from '@jupyterlab/codemirror';

...

//the following lines are the ones to create the inlined code editor
const editorFactory = editorServices.factoryService.newInlineEditor;

//I create a very simple default Model that I use only for setting the language
let model = new CodeEditor.Model();
// this is how you get/set text when using it as simple text editor (no document, db or whatsoever)
model.value.text = "#Initial text you'd want to appear in the editor";

//setting the mimeType in order to have Codemirror react to the proper language. You can get the correct formats from Codemirro site
model.mimeType = "text/x-python"; 
editor = editorFactory({ 
    host: this.node, //host is the node of the widget I'm including the codemirror into since I'm doing it in a Widget, I get it as this.node
    model : model,
    config : {
        lineNumbers : true //other config options at https://github.com/jupyterlab/jupyterlab/blob/f0790b3ffd187b7dc923156b8ae227855abecefb/packages/codeeditor/src/editor.ts#L585 
    }
});
this.editor.refresh(); //call this because it fixes visual tweaks on first show-up

...
2 Likes