Editor

The Editor is a code-editor component that can be embedded in your addons. All existing Firefox Developer Tools currently use this component. Under the hood, the Editor component is a thin wrapper around the CodeMirror open source editor.

Basic Usage

The easiest way to use the component is to import the module, create an instance of the Editor object, and use its appendTo method to attach the editor instance to a DOM node:

let Editor = require("devtools/sourceeditor/editor");
let editor = new Editor();
editor.appendTo(parentNode);

That code creates a new editor instance, and attaches it to the DOM node references by the parentNode variable. Importantly, parentNode should be an element that can act as a parent.

When creating a new instance, you can pass a configuration object as an optional parameter:

let editor = new Editor({
  value: "// hello",
  mode: Editor.modes.js,
  lineNumbers: true
});

This configuration object can hold same properties as CodeMirror's configuration object. The only difference is the 'mode' property. Currently, it supports these syntax highlighting modes:

• Editor.modes.text for plain text.
• Editor.modes.js for JavaScript (including ES2015).
• Editor.modes.css for CSS.
• Editor.modes.html for HTML (including embedded CSS and JS).
• Editor.modes.vs and Editor.modes.fs for WebGL shaders (x-vertex and x-fragment, respectively).

API

Since our Editor is a thin wrapper around CodeMirror, it exposes some CodeMirror methods as-is. For more information refer to the CodeMirror documentation page. The rest of this page assumes that you're familiar with CodeMirror and its concepts. The following methods are identical to the ones provided by CodeMirror:

• focus()
• hasFocus() → boolean
• lineCount() → integer
• somethingSelected() → boolean
• getCursor(?start: string) → {line, ch}
• setSelection(anchor: {line, ch}, ?head: {line, ch})
• getSelection() → string
• replaceSelection(replacement: string, ?collapse: string)
• extendSelection(from: {line, ch}, ?to: {line, ch})
• undo()
• redo()
• clearHistory()
• openDialog(template: element, callback: function, ?options:object)
• refresh()
• setOption(option: string, value: any)
• getOption(option: string) → any

These methods either don't exist in CodeMirror, or behave differently:

function hello(ctx, name) {
  let { cm, ed } = ctx;
  cm; // CodeMirror instance
  ed; // Editor instance
  name; // "Mozilla"
}
editor.extend({ hello: hello });
editor.hello("Mozilla");

Static Methods

// Assuming Mac platform
Editor.accel("F"); // Cmd-F
Editor.accel("F", { shift: true }); // Shift-Cmd-F
Editor.accel("F", { alt: true }); // Cmd-Alt-F

Addons

We include a few CodeMirror addons with our distribution. To use them, all you need to do is enable the following configuration options:

• styleActiveLine: highlights the currently active line (on by default)
• autoCloseBrackets: automatically adds a closing bracket (on by default)
• matchBrackets: highlights matching brackets (on by default)
• showTrailingSpace: highlights trailing spaces (off by default)
• enableCodeFolding: enables code folding (off by default)

Keymaps

We also include three additional keymaps; for VIM, Emacs, and Sublime Text modes. To enable them, set the keyMap configuration option to either emacs, vim, or sublime. In addition to that, the default keymap can be controlled by the devtools.editor.keymap option in about:config.

Feedback

For feedback please use Developer Tools mailing list. And if you think you found a bug, let us know about it.