2014-06-25 05:12:07 +00:00
|
|
|
/* -*- indent-tabs-mode: nil; js-indent-level: 2; fill-column: 80 -*- */
|
2013-09-20 18:34:10 +00:00
|
|
|
/* vim:set ts=2 sw=2 sts=2 et tw=80:
|
|
|
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
|
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
|
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
|
|
|
|
|
|
"use strict";
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
const { Cu, Cc, Ci } = require("chrome");
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2015-09-01 12:24:00 +00:00
|
|
|
const {
|
|
|
|
|
EXPAND_TAB,
|
|
|
|
|
TAB_SIZE,
|
|
|
|
|
DETECT_INDENT,
|
|
|
|
|
getIndentationFromIteration
|
2015-10-07 20:26:58 +00:00
|
|
|
} = require("devtools/shared/indentation");
|
2015-09-01 12:24:00 +00:00
|
|
|
|
2014-09-12 11:36:00 +00:00
|
|
|
const ENABLE_CODE_FOLDING = "devtools.editor.enableCodeFolding";
|
2015-12-25 20:57:20 +00:00
|
|
|
const KEYMAP = "devtools.editor.keymap";
|
|
|
|
|
const AUTO_CLOSE = "devtools.editor.autoclosebrackets";
|
|
|
|
|
const AUTOCOMPLETE = "devtools.editor.autocomplete";
|
2015-11-04 21:35:53 +00:00
|
|
|
const L10N_BUNDLE = "chrome://devtools/locale/sourceeditor.properties";
|
2015-12-25 20:57:20 +00:00
|
|
|
const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
2014-07-07 11:52:00 +00:00
|
|
|
const VALID_KEYMAPS = new Set(["emacs", "vim", "sublime"]);
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2013-10-24 05:01:02 +00:00
|
|
|
// Maximum allowed margin (in number of lines) from top or bottom of the editor
|
|
|
|
|
// while shifting to a line which was initially out of view.
|
|
|
|
|
const MAX_VERTICAL_OFFSET = 3;
|
|
|
|
|
|
2014-06-02 22:33:20 +00:00
|
|
|
// Match @Scratchpad/N:LINE[:COLUMN] or (LINE[:COLUMN]) anywhere at an end of
|
|
|
|
|
// line in text selection.
|
|
|
|
|
const RE_SCRATCHPAD_ERROR = /(?:@Scratchpad\/\d+:|\()(\d+):?(\d+)?(?:\)|\n)/;
|
|
|
|
|
const RE_JUMP_TO_LINE = /^(\d+):?(\d+)?/;
|
|
|
|
|
|
2015-08-26 13:05:13 +00:00
|
|
|
const promise = require("promise");
|
2015-12-25 20:57:20 +00:00
|
|
|
const events = require("devtools/shared/event-emitter");
|
2015-09-21 17:04:18 +00:00
|
|
|
const { PrefObserver } = require("devtools/client/styleeditor/utils");
|
2013-09-20 18:34:10 +00:00
|
|
|
|
|
|
|
|
Cu.import("resource://gre/modules/Services.jsm");
|
|
|
|
|
const L10N = Services.strings.createBundle(L10N_BUNDLE);
|
|
|
|
|
|
2015-06-24 00:18:55 +00:00
|
|
|
const { OS } = Services.appinfo;
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
// CM_STYLES, CM_SCRIPTS and CM_IFRAME represent the HTML,
|
|
|
|
|
// JavaScript and CSS that is injected into an iframe in
|
|
|
|
|
// order to initialize a CodeMirror instance.
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
const CM_STYLES = [
|
2015-12-17 12:34:21 +00:00
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css",
|
2015-09-21 17:02:37 +00:00
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/mozilla.css"
|
2013-09-20 18:34:10 +00:00
|
|
|
];
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
const CM_SCRIPTS = [
|
2015-09-21 17:02:37 +00:00
|
|
|
"chrome://devtools/content/shared/theme-switching.js",
|
2015-12-17 12:34:21 +00:00
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/search/searchcursor.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/search/search.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/edit/matchbrackets.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/edit/closebrackets.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/comment/comment.js",
|
2015-09-21 17:02:37 +00:00
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/mode/javascript.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/mode/xml.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/mode/css.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/mode/htmlmixed.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/mode/clike.js",
|
2015-12-17 12:34:21 +00:00
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/selection/active-line.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/edit/trailingspace.js",
|
2015-09-21 17:02:37 +00:00
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/keymap/emacs.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/keymap/vim.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/keymap/sublime.js",
|
2015-12-17 12:34:21 +00:00
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/fold/foldcode.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/fold/brace-fold.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/fold/comment-fold.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/fold/xml-fold.js",
|
|
|
|
|
"chrome://devtools/content/sourceeditor/codemirror/addon/fold/foldgutter.js"
|
2013-09-20 18:34:10 +00:00
|
|
|
];
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
const CM_IFRAME =
|
2013-09-20 18:34:10 +00:00
|
|
|
"data:text/html;charset=utf8,<!DOCTYPE html>" +
|
|
|
|
|
"<html dir='ltr'>" +
|
|
|
|
|
" <head>" +
|
|
|
|
|
" <style>" +
|
|
|
|
|
" html, body { height: 100%; }" +
|
|
|
|
|
" body { margin: 0; overflow: hidden; }" +
|
2014-04-04 17:44:10 +00:00
|
|
|
" .CodeMirror { width: 100%; height: 100% !important; line-height: 1.25 !important;}" +
|
2013-09-20 18:34:10 +00:00
|
|
|
" </style>" +
|
2015-05-25 12:42:51 +00:00
|
|
|
CM_STYLES.map(style => "<link rel='stylesheet' href='" + style + "'>").join("\n") +
|
2013-09-20 18:34:10 +00:00
|
|
|
" </head>" +
|
2013-10-24 13:41:03 +00:00
|
|
|
" <body class='theme-body devtools-monospace'></body>" +
|
2013-09-20 18:34:10 +00:00
|
|
|
"</html>";
|
|
|
|
|
|
|
|
|
|
const CM_MAPPING = [
|
|
|
|
|
"focus",
|
|
|
|
|
"hasFocus",
|
2013-11-06 09:59:20 +00:00
|
|
|
"lineCount",
|
2013-09-20 18:34:10 +00:00
|
|
|
"somethingSelected",
|
2013-11-06 09:59:20 +00:00
|
|
|
"getCursor",
|
2013-09-20 18:34:10 +00:00
|
|
|
"setSelection",
|
|
|
|
|
"getSelection",
|
|
|
|
|
"replaceSelection",
|
2014-01-07 21:01:38 +00:00
|
|
|
"extendSelection",
|
2013-09-20 18:34:10 +00:00
|
|
|
"undo",
|
|
|
|
|
"redo",
|
|
|
|
|
"clearHistory",
|
2013-10-22 20:53:53 +00:00
|
|
|
"openDialog",
|
2014-01-07 19:24:57 +00:00
|
|
|
"refresh",
|
2015-04-25 03:54:25 +00:00
|
|
|
"getScrollInfo",
|
|
|
|
|
"getViewport"
|
2013-09-20 18:34:10 +00:00
|
|
|
];
|
|
|
|
|
|
2013-10-24 05:01:02 +00:00
|
|
|
const { cssProperties, cssValues, cssColors } = getCSSKeywords();
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
const editors = new WeakMap();
|
|
|
|
|
|
|
|
|
|
Editor.modes = {
|
|
|
|
|
text: { name: "text" },
|
2013-10-22 20:53:53 +00:00
|
|
|
html: { name: "htmlmixed" },
|
2015-12-25 20:57:20 +00:00
|
|
|
css: { name: "css" },
|
|
|
|
|
js: { name: "javascript" },
|
|
|
|
|
vs: { name: "x-shader/x-vertex" },
|
|
|
|
|
fs: { name: "x-shader/x-fragment" }
|
2013-09-20 18:34:10 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* A very thin wrapper around CodeMirror. Provides a number
|
|
|
|
|
* of helper methods to make our use of CodeMirror easier and
|
|
|
|
|
* another method, appendTo, to actually create and append
|
|
|
|
|
* the CodeMirror instance.
|
|
|
|
|
*
|
|
|
|
|
* Note that Editor doesn't expose CodeMirror instance to the
|
|
|
|
|
* outside world.
|
|
|
|
|
*
|
|
|
|
|
* Constructor accepts one argument, config. It is very
|
|
|
|
|
* similar to the CodeMirror configuration object so for most
|
|
|
|
|
* properties go to CodeMirror's documentation (see below).
|
|
|
|
|
*
|
|
|
|
|
* Other than that, it accepts one additional and optional
|
2014-07-31 12:44:00 +00:00
|
|
|
* property contextMenu. This property should be an element, or
|
|
|
|
|
* an ID of an element that we can use as a context menu.
|
2013-09-20 18:34:10 +00:00
|
|
|
*
|
|
|
|
|
* This object is also an event emitter.
|
|
|
|
|
*
|
|
|
|
|
* CodeMirror docs: http://codemirror.net/doc/manual.html
|
|
|
|
|
*/
|
|
|
|
|
function Editor(config) {
|
|
|
|
|
const tabSize = Services.prefs.getIntPref(TAB_SIZE);
|
|
|
|
|
const useTabs = !Services.prefs.getBoolPref(EXPAND_TAB);
|
2014-01-31 04:21:00 +00:00
|
|
|
const useAutoClose = Services.prefs.getBoolPref(AUTO_CLOSE);
|
2013-09-20 18:34:10 +00:00
|
|
|
|
|
|
|
|
this.version = null;
|
|
|
|
|
this.config = {
|
2015-12-25 20:57:20 +00:00
|
|
|
value: "",
|
|
|
|
|
mode: Editor.modes.text,
|
|
|
|
|
indentUnit: tabSize,
|
|
|
|
|
tabSize: tabSize,
|
|
|
|
|
contextMenu: null,
|
|
|
|
|
matchBrackets: true,
|
|
|
|
|
extraKeys: {},
|
|
|
|
|
indentWithTabs: useTabs,
|
|
|
|
|
styleActiveLine: true,
|
2015-03-02 09:59:00 +00:00
|
|
|
autoCloseBrackets: "()[]{}''\"\"``",
|
2015-12-25 20:57:20 +00:00
|
|
|
autoCloseEnabled: useAutoClose,
|
|
|
|
|
theme: "mozilla",
|
|
|
|
|
themeSwitching: true,
|
|
|
|
|
autocomplete: false,
|
|
|
|
|
autocompleteOpts: {}
|
2013-09-20 18:34:10 +00:00
|
|
|
};
|
|
|
|
|
|
2013-11-07 22:39:31 +00:00
|
|
|
// Additional shortcuts.
|
2014-01-17 20:58:45 +00:00
|
|
|
this.config.extraKeys[Editor.keyFor("jumpToLine")] = () => this.jumpToLine();
|
2015-12-25 20:57:20 +00:00
|
|
|
this.config.extraKeys[Editor.keyFor("moveLineUp", { noaccel: true })] =
|
|
|
|
|
() => this.moveLineUp();
|
|
|
|
|
this.config.extraKeys[Editor.keyFor("moveLineDown", { noaccel: true })] =
|
|
|
|
|
() => this.moveLineDown();
|
2013-11-07 22:39:31 +00:00
|
|
|
this.config.extraKeys[Editor.keyFor("toggleComment")] = "toggleComment";
|
|
|
|
|
|
|
|
|
|
// Disable ctrl-[ and ctrl-] because toolbox uses those shortcuts.
|
|
|
|
|
this.config.extraKeys[Editor.keyFor("indentLess")] = false;
|
|
|
|
|
this.config.extraKeys[Editor.keyFor("indentMore")] = false;
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
// Overwrite default config with user-provided, if needed.
|
2015-12-25 20:57:20 +00:00
|
|
|
Object.keys(config).forEach(k => {
|
2014-01-01 03:28:42 +00:00
|
|
|
if (k != "extraKeys") {
|
|
|
|
|
this.config[k] = config[k];
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!config.extraKeys) {
|
2013-11-07 22:39:31 +00:00
|
|
|
return;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
Object.keys(config.extraKeys).forEach(key => {
|
2013-11-07 22:39:31 +00:00
|
|
|
this.config.extraKeys[key] = config.extraKeys[key];
|
|
|
|
|
});
|
|
|
|
|
});
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2014-09-12 11:36:00 +00:00
|
|
|
if (!this.config.gutters) {
|
|
|
|
|
this.config.gutters = [];
|
|
|
|
|
}
|
|
|
|
|
if (this.config.lineNumbers
|
|
|
|
|
&& this.config.gutters.indexOf("CodeMirror-linenumbers") === -1) {
|
|
|
|
|
this.config.gutters.push("CodeMirror-linenumbers");
|
2014-01-17 20:58:45 +00:00
|
|
|
}
|
|
|
|
|
|
2014-07-07 11:52:00 +00:00
|
|
|
// Remember the initial value of autoCloseBrackets.
|
|
|
|
|
this.config.autoCloseBracketsSaved = this.config.autoCloseBrackets;
|
2014-01-31 04:21:00 +00:00
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
// Overwrite default tab behavior. If something is selected,
|
|
|
|
|
// indent those lines. If nothing is selected and we're
|
|
|
|
|
// indenting with tabs, insert one tab. Otherwise insert N
|
|
|
|
|
// whitespaces where N == indentUnit option.
|
2015-12-25 20:57:20 +00:00
|
|
|
this.config.extraKeys.Tab = cm => {
|
2014-01-01 03:28:42 +00:00
|
|
|
if (cm.somethingSelected()) {
|
|
|
|
|
cm.indentSelection("add");
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2014-01-01 03:28:42 +00:00
|
|
|
if (this.config.indentWithTabs) {
|
|
|
|
|
cm.replaceSelection("\t", "end", "+input");
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
let num = cm.getOption("indentUnit");
|
|
|
|
|
if (cm.getCursor().ch !== 0) {
|
|
|
|
|
num -= 1;
|
|
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
cm.replaceSelection(" ".repeat(num), "end", "+input");
|
|
|
|
|
};
|
|
|
|
|
|
2015-04-03 23:17:59 +00:00
|
|
|
// Allow add-ons to inject scripts for their editor instances
|
|
|
|
|
if (!this.config.externalScripts) {
|
|
|
|
|
this.config.externalScripts = [];
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
events.decorate(this);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Editor.prototype = {
|
2013-10-22 20:53:53 +00:00
|
|
|
container: null,
|
2013-09-20 18:34:10 +00:00
|
|
|
version: null,
|
2013-10-22 20:53:53 +00:00
|
|
|
config: null,
|
2013-09-20 18:34:10 +00:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Appends the current Editor instance to the element specified by
|
2013-11-19 23:53:13 +00:00
|
|
|
* 'el'. You can also provide your won iframe to host the editor as
|
|
|
|
|
* an optional second parameter. This method actually creates and
|
|
|
|
|
* loads CodeMirror and all its dependencies.
|
2013-09-20 18:34:10 +00:00
|
|
|
*
|
|
|
|
|
* This method is asynchronous and returns a promise.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
appendTo: function(el, env) {
|
2013-09-20 18:34:10 +00:00
|
|
|
let def = promise.defer();
|
2015-12-25 20:57:20 +00:00
|
|
|
let cm = editors.get(this);
|
2013-11-19 23:53:13 +00:00
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!env) {
|
2013-11-19 23:53:13 +00:00
|
|
|
env = el.ownerDocument.createElementNS(XUL_NS, "iframe");
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-19 23:53:13 +00:00
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
env.flex = 1;
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (cm) {
|
2013-09-20 18:34:10 +00:00
|
|
|
throw new Error("You can append an editor only once.");
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
|
|
|
|
|
let onLoad = () => {
|
|
|
|
|
// Once the iframe is loaded, we can inject CodeMirror
|
|
|
|
|
// and its dependencies into its DOM.
|
2013-10-22 20:53:53 +00:00
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
env.removeEventListener("load", onLoad, true);
|
|
|
|
|
let win = env.contentWindow.wrappedJSObject;
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!this.config.themeSwitching) {
|
2014-06-26 04:14:00 +00:00
|
|
|
win.document.documentElement.setAttribute("force-theme", "light");
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2014-06-26 04:14:00 +00:00
|
|
|
|
2015-04-03 23:17:59 +00:00
|
|
|
let scriptsToInject = CM_SCRIPTS.concat(this.config.externalScripts);
|
2015-12-25 20:57:20 +00:00
|
|
|
scriptsToInject.forEach(url => {
|
|
|
|
|
if (url.startsWith("chrome://")) {
|
2015-04-03 23:17:59 +00:00
|
|
|
Services.scriptloader.loadSubScript(url, win, "utf8");
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2015-04-03 23:17:59 +00:00
|
|
|
});
|
2013-10-24 05:01:02 +00:00
|
|
|
// Replace the propertyKeywords, colorKeywords and valueKeywords
|
|
|
|
|
// properties of the CSS MIME type with the values provided by Gecko.
|
|
|
|
|
let cssSpec = win.CodeMirror.resolveMode("text/css");
|
|
|
|
|
cssSpec.propertyKeywords = cssProperties;
|
|
|
|
|
cssSpec.colorKeywords = cssColors;
|
|
|
|
|
cssSpec.valueKeywords = cssValues;
|
|
|
|
|
win.CodeMirror.defineMIME("text/css", cssSpec);
|
|
|
|
|
|
|
|
|
|
let scssSpec = win.CodeMirror.resolveMode("text/x-scss");
|
|
|
|
|
scssSpec.propertyKeywords = cssProperties;
|
|
|
|
|
scssSpec.colorKeywords = cssColors;
|
|
|
|
|
scssSpec.valueKeywords = cssValues;
|
|
|
|
|
win.CodeMirror.defineMIME("text/x-scss", scssSpec);
|
|
|
|
|
|
2015-08-20 16:55:00 +00:00
|
|
|
win.CodeMirror.commands.save = () => this.emit("saveRequested");
|
2014-01-15 20:04:19 +00:00
|
|
|
|
2013-10-24 05:01:02 +00:00
|
|
|
// Create a CodeMirror instance add support for context menus,
|
2013-09-20 18:34:10 +00:00
|
|
|
// overwrite the default controller (otherwise items in the top and
|
|
|
|
|
// context menus won't work).
|
|
|
|
|
|
|
|
|
|
cm = win.CodeMirror(win.document.body, this.config);
|
2015-12-25 20:57:20 +00:00
|
|
|
cm.getWrapperElement().addEventListener("contextmenu", ev => {
|
2013-09-20 18:34:10 +00:00
|
|
|
ev.preventDefault();
|
2015-12-25 20:57:20 +00:00
|
|
|
|
|
|
|
|
if (!this.config.contextMenu) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2014-07-31 12:44:00 +00:00
|
|
|
let popup = this.config.contextMenu;
|
2015-12-25 20:57:20 +00:00
|
|
|
if (typeof popup == "string") {
|
2014-07-31 12:44:00 +00:00
|
|
|
popup = el.ownerDocument.getElementById(this.config.contextMenu);
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2014-01-17 20:58:45 +00:00
|
|
|
popup.openPopupAtScreen(ev.screenX, ev.screenY, true);
|
2013-09-20 18:34:10 +00:00
|
|
|
}, false);
|
|
|
|
|
|
2015-06-24 00:18:55 +00:00
|
|
|
// Intercept the find and find again keystroke on CodeMirror, to avoid
|
|
|
|
|
// the browser's search
|
|
|
|
|
|
|
|
|
|
let findKey = L10N.GetStringFromName("find.commandkey");
|
|
|
|
|
let findAgainKey = L10N.GetStringFromName("findAgain.commandkey");
|
|
|
|
|
let [accel, modifier] = OS === "Darwin"
|
|
|
|
|
? ["metaKey", "altKey"]
|
|
|
|
|
: ["ctrlKey", "shiftKey"];
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
cm.getWrapperElement().addEventListener("keydown", ev => {
|
2015-06-24 00:18:55 +00:00
|
|
|
let key = ev.key.toUpperCase();
|
|
|
|
|
let node = ev.originalTarget;
|
|
|
|
|
let isInput = node.tagName === "INPUT";
|
|
|
|
|
let isSearchInput = isInput && node.type === "search";
|
|
|
|
|
|
|
|
|
|
// replace box is a different input instance than search, and it is
|
|
|
|
|
// located in a code mirror dialog
|
|
|
|
|
let isDialogInput = isInput &&
|
|
|
|
|
node.parentNode &&
|
|
|
|
|
node.parentNode.classList.contains("CodeMirror-dialog");
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!ev[accel] || !(isSearchInput || isDialogInput)) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2015-06-24 00:18:55 +00:00
|
|
|
|
|
|
|
|
if (key === findKey) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
|
|
|
|
|
if (isSearchInput || ev[modifier]) {
|
|
|
|
|
node.select();
|
|
|
|
|
}
|
|
|
|
|
} else if (key === findAgainKey) {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!isSearchInput) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
2015-06-24 00:18:55 +00:00
|
|
|
|
|
|
|
|
let query = node.value;
|
|
|
|
|
|
|
|
|
|
// If there isn't a search state, or the text in the input does not
|
|
|
|
|
// match with the current search state, we need to create a new one
|
|
|
|
|
if (!cm.state.search || cm.state.search.query !== query) {
|
|
|
|
|
cm.state.search = {
|
|
|
|
|
posFrom: null,
|
|
|
|
|
posTo: null,
|
|
|
|
|
overlay: null,
|
|
|
|
|
query
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (ev.shiftKey) {
|
|
|
|
|
cm.execCommand("findPrev");
|
|
|
|
|
} else {
|
|
|
|
|
cm.execCommand("findNext");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2013-10-25 07:18:41 +00:00
|
|
|
cm.on("focus", () => this.emit("focus"));
|
2013-11-29 14:47:52 +00:00
|
|
|
cm.on("scroll", () => this.emit("scroll"));
|
2013-12-06 18:21:16 +00:00
|
|
|
cm.on("change", () => {
|
|
|
|
|
this.emit("change");
|
|
|
|
|
if (!this._lastDirty) {
|
|
|
|
|
this._lastDirty = true;
|
|
|
|
|
this.emit("dirty-change");
|
|
|
|
|
}
|
|
|
|
|
});
|
2015-12-25 20:57:20 +00:00
|
|
|
cm.on("cursorActivity", () => this.emit("cursorActivity"));
|
2013-10-22 20:53:53 +00:00
|
|
|
|
2013-11-26 22:32:28 +00:00
|
|
|
cm.on("gutterClick", (cm, line, gutter, ev) => {
|
|
|
|
|
let head = { line: line, ch: 0 };
|
|
|
|
|
let tail = { line: line, ch: this.getText(line).length };
|
|
|
|
|
|
|
|
|
|
// Shift-click on a gutter selects the whole line.
|
2014-01-01 03:28:42 +00:00
|
|
|
if (ev.shiftKey) {
|
|
|
|
|
cm.setSelection(head, tail);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-11-26 22:32:28 +00:00
|
|
|
|
2014-05-15 12:51:00 +00:00
|
|
|
this.emit("gutterClick", line, ev.button);
|
2013-11-26 22:32:28 +00:00
|
|
|
});
|
|
|
|
|
|
2013-10-23 21:57:13 +00:00
|
|
|
win.CodeMirror.defineExtension("l10n", (name) => {
|
|
|
|
|
return L10N.GetStringFromName(name);
|
|
|
|
|
});
|
|
|
|
|
|
2013-11-05 18:30:19 +00:00
|
|
|
cm.getInputField().controllers.insertControllerAt(0, controller(this));
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2013-10-22 20:53:53 +00:00
|
|
|
this.container = env;
|
2013-09-20 18:34:10 +00:00
|
|
|
editors.set(this, cm);
|
2014-04-13 19:23:26 +00:00
|
|
|
|
2014-07-07 11:52:00 +00:00
|
|
|
this.reloadPreferences = this.reloadPreferences.bind(this);
|
|
|
|
|
this._prefObserver = new PrefObserver("devtools.editor.");
|
|
|
|
|
this._prefObserver.on(TAB_SIZE, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.on(EXPAND_TAB, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.on(KEYMAP, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.on(AUTO_CLOSE, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.on(AUTOCOMPLETE, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.on(DETECT_INDENT, this.reloadPreferences);
|
2014-09-12 11:36:00 +00:00
|
|
|
this._prefObserver.on(ENABLE_CODE_FOLDING, this.reloadPreferences);
|
2014-04-13 19:23:26 +00:00
|
|
|
|
2014-07-07 11:52:00 +00:00
|
|
|
this.reloadPreferences();
|
2015-04-03 23:17:59 +00:00
|
|
|
|
|
|
|
|
win.editor = this;
|
|
|
|
|
let editorReadyEvent = new win.CustomEvent("editorReady");
|
|
|
|
|
win.dispatchEvent(editorReadyEvent);
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
def.resolve();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
env.addEventListener("load", onLoad, true);
|
|
|
|
|
env.setAttribute("src", CM_IFRAME);
|
|
|
|
|
el.appendChild(env);
|
|
|
|
|
|
|
|
|
|
this.once("destroy", () => el.removeChild(env));
|
|
|
|
|
return def.promise;
|
|
|
|
|
},
|
|
|
|
|
|
2014-07-07 05:45:00 +00:00
|
|
|
/**
|
|
|
|
|
* Returns a boolean indicating whether the editor is ready to
|
2015-12-25 20:57:20 +00:00
|
|
|
* use. Use appendTo(el).then(() => {}) for most cases
|
2014-07-07 05:45:00 +00:00
|
|
|
*/
|
|
|
|
|
isAppended: function() {
|
|
|
|
|
return editors.has(this);
|
|
|
|
|
},
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
/**
|
2013-11-06 09:59:20 +00:00
|
|
|
* Returns the currently active highlighting mode.
|
|
|
|
|
* See Editor.modes for the list of all suppoert modes.
|
2013-09-20 18:34:10 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
getMode: function() {
|
2014-01-07 19:24:57 +00:00
|
|
|
return this.getOption("mode");
|
2013-09-20 18:34:10 +00:00
|
|
|
},
|
|
|
|
|
|
2014-04-16 20:49:28 +00:00
|
|
|
/**
|
2015-12-25 20:57:20 +00:00
|
|
|
* Loads a script into editor's containing window.
|
2014-04-16 20:49:28 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
loadScript: function(url) {
|
2014-04-16 20:49:28 +00:00
|
|
|
if (!this.container) {
|
2015-12-25 20:57:20 +00:00
|
|
|
throw new Error("Can't load a script until the editor is loaded.");
|
2014-04-16 20:49:28 +00:00
|
|
|
}
|
|
|
|
|
let win = this.container.contentWindow.wrappedJSObject;
|
|
|
|
|
Services.scriptloader.loadSubScript(url, win, "utf8");
|
|
|
|
|
},
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
/**
|
2013-11-06 09:59:20 +00:00
|
|
|
* Changes the value of a currently used highlighting mode.
|
2014-06-30 09:23:00 +00:00
|
|
|
* See Editor.modes for the list of all supported modes.
|
2013-09-20 18:34:10 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
setMode: function(value) {
|
2014-01-07 19:24:57 +00:00
|
|
|
this.setOption("mode", value);
|
2014-06-30 09:23:00 +00:00
|
|
|
|
|
|
|
|
// If autocomplete was set up and the mode is changing, then
|
|
|
|
|
// turn it off and back on again so the proper mode can be used.
|
|
|
|
|
if (this.config.autocomplete) {
|
|
|
|
|
this.setOption("autocomplete", false);
|
|
|
|
|
this.setOption("autocomplete", true);
|
|
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
2013-10-22 20:53:53 +00:00
|
|
|
* Returns text from the text area. If line argument is provided
|
|
|
|
|
* the method returns only that line.
|
2013-09-20 18:34:10 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
getText: function(line) {
|
2013-09-20 18:34:10 +00:00
|
|
|
let cm = editors.get(this);
|
2013-11-06 09:59:20 +00:00
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (line == null) {
|
2013-11-06 09:59:20 +00:00
|
|
|
return cm.getValue();
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-06 09:59:20 +00:00
|
|
|
|
|
|
|
|
let info = cm.lineInfo(line);
|
|
|
|
|
return info ? cm.lineInfo(line).text : "";
|
2013-09-20 18:34:10 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Replaces whatever is in the text area with the contents of
|
|
|
|
|
* the 'value' argument.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
setText: function(value) {
|
2013-09-20 18:34:10 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
cm.setValue(value);
|
2014-04-13 19:23:26 +00:00
|
|
|
|
|
|
|
|
this.resetIndentUnit();
|
|
|
|
|
},
|
|
|
|
|
|
2014-07-07 11:52:00 +00:00
|
|
|
/**
|
2015-12-25 20:57:20 +00:00
|
|
|
* Reloads the state of the editor based on all current preferences.
|
2014-07-07 11:52:00 +00:00
|
|
|
* This is called automatically when any of the relevant preferences
|
|
|
|
|
* change.
|
|
|
|
|
*/
|
|
|
|
|
reloadPreferences: function() {
|
|
|
|
|
// Restore the saved autoCloseBrackets value if it is preffed on.
|
|
|
|
|
let useAutoClose = Services.prefs.getBoolPref(AUTO_CLOSE);
|
|
|
|
|
this.setOption("autoCloseBrackets",
|
|
|
|
|
useAutoClose ? this.config.autoCloseBracketsSaved : false);
|
|
|
|
|
|
|
|
|
|
// If alternative keymap is provided, use it.
|
|
|
|
|
const keyMap = Services.prefs.getCharPref(KEYMAP);
|
2015-12-25 20:57:20 +00:00
|
|
|
if (VALID_KEYMAPS.has(keyMap)) {
|
|
|
|
|
this.setOption("keyMap", keyMap);
|
|
|
|
|
} else {
|
2014-07-07 11:52:00 +00:00
|
|
|
this.setOption("keyMap", "default");
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2014-09-12 11:36:00 +00:00
|
|
|
this.updateCodeFoldingGutter();
|
2014-07-07 11:52:00 +00:00
|
|
|
|
|
|
|
|
this.resetIndentUnit();
|
|
|
|
|
this.setupAutoCompletion();
|
|
|
|
|
},
|
|
|
|
|
|
2014-04-13 19:23:26 +00:00
|
|
|
/**
|
2015-12-25 20:57:20 +00:00
|
|
|
* Sets the editor's indentation based on the current prefs and
|
2014-04-13 19:23:26 +00:00
|
|
|
* re-detect indentation if we should.
|
|
|
|
|
*/
|
|
|
|
|
resetIndentUnit: function() {
|
|
|
|
|
let cm = editors.get(this);
|
|
|
|
|
|
2015-09-01 12:24:00 +00:00
|
|
|
let iterFn = function(start, end, callback) {
|
|
|
|
|
cm.eachLine(start, end, (line) => {
|
|
|
|
|
return callback(line.text);
|
|
|
|
|
});
|
|
|
|
|
};
|
2014-04-13 19:23:26 +00:00
|
|
|
|
2015-09-01 12:24:00 +00:00
|
|
|
let {indentUnit, indentWithTabs} = getIndentationFromIteration(iterFn);
|
2014-04-13 19:23:26 +00:00
|
|
|
|
2015-09-01 12:24:00 +00:00
|
|
|
cm.setOption("tabSize", indentUnit);
|
2014-04-13 19:23:26 +00:00
|
|
|
cm.setOption("indentUnit", indentUnit);
|
|
|
|
|
cm.setOption("indentWithTabs", indentWithTabs);
|
2013-09-20 18:34:10 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Replaces contents of a text area within the from/to {line, ch}
|
2015-04-15 15:15:22 +00:00
|
|
|
* range. If neither `from` nor `to` arguments are provided works
|
|
|
|
|
* exactly like setText. If only `from` object is provided, inserts
|
2013-11-05 12:07:37 +00:00
|
|
|
* text at that point, *overwriting* as many characters as needed.
|
2013-09-20 18:34:10 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
replaceText: function(value, from, to) {
|
2013-09-20 18:34:10 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
|
2014-01-01 03:28:42 +00:00
|
|
|
if (!from) {
|
|
|
|
|
this.setText(value);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
|
|
|
|
|
if (!to) {
|
|
|
|
|
let text = cm.getRange({ line: 0, ch: 0 }, from);
|
2014-01-01 03:28:42 +00:00
|
|
|
this.setText(text + value);
|
|
|
|
|
return;
|
2013-09-20 18:34:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
cm.replaceRange(value, from, to);
|
|
|
|
|
},
|
|
|
|
|
|
2013-11-05 12:07:37 +00:00
|
|
|
/**
|
|
|
|
|
* Inserts text at the specified {line, ch} position, shifting existing
|
|
|
|
|
* contents as necessary.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
insertText: function(value, at) {
|
2013-11-05 12:07:37 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
cm.replaceRange(value, at, at);
|
|
|
|
|
},
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
/**
|
|
|
|
|
* Deselects contents of the text area.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
dropSelection: function() {
|
|
|
|
|
if (!this.somethingSelected()) {
|
2013-09-20 18:34:10 +00:00
|
|
|
return;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
|
|
|
|
|
this.setCursor(this.getCursor());
|
|
|
|
|
},
|
|
|
|
|
|
2014-04-01 14:59:00 +00:00
|
|
|
/**
|
|
|
|
|
* Returns true if there is more than one selection in the editor.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
hasMultipleSelections: function() {
|
2014-04-01 14:59:00 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
return cm.listSelections().length > 1;
|
|
|
|
|
},
|
|
|
|
|
|
2013-10-24 05:01:02 +00:00
|
|
|
/**
|
|
|
|
|
* Gets the first visible line number in the editor.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
getFirstVisibleLine: function() {
|
2013-10-24 05:01:02 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
return cm.lineAtHeight(0, "local");
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Scrolls the view such that the given line number is the first visible line.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
setFirstVisibleLine: function(line) {
|
2013-10-24 05:01:02 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let { top } = cm.charCoords({line: line, ch: 0}, "local");
|
|
|
|
|
cm.scrollTo(0, top);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Sets the cursor to the specified {line, ch} position with an additional
|
|
|
|
|
* option to align the line at the "top", "center" or "bottom" of the editor
|
|
|
|
|
* with "top" being default value.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
setCursor: function({line, ch}, align) {
|
2013-10-24 05:01:02 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
this.alignLine(line, align);
|
|
|
|
|
cm.setCursor({line: line, ch: ch});
|
2015-09-28 21:55:51 +00:00
|
|
|
this.emit("cursorActivity");
|
2013-10-24 05:01:02 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Aligns the provided line to either "top", "center" or "bottom" of the
|
|
|
|
|
* editor view with a maximum margin of MAX_VERTICAL_OFFSET lines from top or
|
|
|
|
|
* bottom.
|
|
|
|
|
*/
|
|
|
|
|
alignLine: function(line, align) {
|
|
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let from = cm.lineAtHeight(0, "page");
|
|
|
|
|
let to = cm.lineAtHeight(cm.getWrapperElement().clientHeight, "page");
|
|
|
|
|
let linesVisible = to - from;
|
2015-12-25 20:57:20 +00:00
|
|
|
let halfVisible = Math.round(linesVisible / 2);
|
2013-10-24 05:01:02 +00:00
|
|
|
|
|
|
|
|
// If the target line is in view, skip the vertical alignment part.
|
|
|
|
|
if (line <= to && line >= from) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Setting the offset so that the line always falls in the upper half
|
|
|
|
|
// of visible lines (lower half for bottom aligned).
|
|
|
|
|
// MAX_VERTICAL_OFFSET is the maximum allowed value.
|
|
|
|
|
let offset = Math.min(halfVisible, MAX_VERTICAL_OFFSET);
|
|
|
|
|
|
|
|
|
|
let topLine = {
|
|
|
|
|
"center": Math.max(line - halfVisible, 0),
|
|
|
|
|
"bottom": Math.max(line - linesVisible + offset, 0),
|
|
|
|
|
"top": Math.max(line - offset, 0)
|
|
|
|
|
}[align || "top"] || offset;
|
|
|
|
|
|
|
|
|
|
// Bringing down the topLine to total lines in the editor if exceeding.
|
|
|
|
|
topLine = Math.min(topLine, this.lineCount());
|
|
|
|
|
this.setFirstVisibleLine(topLine);
|
|
|
|
|
},
|
|
|
|
|
|
2013-11-05 12:07:37 +00:00
|
|
|
/**
|
|
|
|
|
* Returns whether a marker of a specified class exists in a line's gutter.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
hasMarker: function(line, gutterName, markerClass) {
|
2014-05-08 12:57:00 +00:00
|
|
|
let marker = this.getMarker(line, gutterName);
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!marker) {
|
2013-11-05 12:07:37 +00:00
|
|
|
return false;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-05 12:07:37 +00:00
|
|
|
|
|
|
|
|
return marker.classList.contains(markerClass);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Adds a marker with a specified class to a line's gutter. If another marker
|
|
|
|
|
* exists on that line, the new marker class is added to its class list.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
addMarker: function(line, gutterName, markerClass) {
|
2013-11-05 12:07:37 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let info = cm.lineInfo(line);
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!info) {
|
2013-11-05 12:07:37 +00:00
|
|
|
return;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-05 12:07:37 +00:00
|
|
|
|
|
|
|
|
let gutterMarkers = info.gutterMarkers;
|
2015-12-25 20:57:20 +00:00
|
|
|
let marker;
|
2013-11-05 12:07:37 +00:00
|
|
|
if (gutterMarkers) {
|
2015-12-25 20:57:20 +00:00
|
|
|
marker = gutterMarkers[gutterName];
|
2013-11-05 12:07:37 +00:00
|
|
|
if (marker) {
|
|
|
|
|
marker.classList.add(markerClass);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
marker = cm.getWrapperElement().ownerDocument.createElement("div");
|
2013-11-05 12:07:37 +00:00
|
|
|
marker.className = markerClass;
|
|
|
|
|
cm.setGutterMarker(info.line, gutterName, marker);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The reverse of addMarker. Removes a marker of a specified class from a
|
|
|
|
|
* line's gutter.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
removeMarker: function(line, gutterName, markerClass) {
|
|
|
|
|
if (!this.hasMarker(line, gutterName, markerClass)) {
|
2013-11-05 12:07:37 +00:00
|
|
|
return;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-05 12:07:37 +00:00
|
|
|
|
|
|
|
|
let cm = editors.get(this);
|
|
|
|
|
cm.lineInfo(line).gutterMarkers[gutterName].classList.remove(markerClass);
|
|
|
|
|
},
|
|
|
|
|
|
2014-08-26 16:25:00 +00:00
|
|
|
/**
|
|
|
|
|
* Adds a marker with a specified class and an HTML content to a line's
|
|
|
|
|
* gutter. If another marker exists on that line, it is overwritten by a new
|
|
|
|
|
* marker.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
addContentMarker: function(line, gutterName, markerClass, content) {
|
2014-08-26 16:25:00 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let info = cm.lineInfo(line);
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!info) {
|
2014-08-26 16:25:00 +00:00
|
|
|
return;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2014-08-26 16:25:00 +00:00
|
|
|
|
|
|
|
|
let marker = cm.getWrapperElement().ownerDocument.createElement("div");
|
|
|
|
|
marker.className = markerClass;
|
|
|
|
|
marker.innerHTML = content;
|
|
|
|
|
cm.setGutterMarker(info.line, gutterName, marker);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The reverse of addContentMarker. Removes any line's markers in the
|
|
|
|
|
* specified gutter.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
removeContentMarker: function(line, gutterName) {
|
2014-08-26 16:25:00 +00:00
|
|
|
let cm = editors.get(this);
|
2015-12-25 20:57:20 +00:00
|
|
|
let info = cm.lineInfo(line);
|
|
|
|
|
if (!info) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2014-08-26 16:25:00 +00:00
|
|
|
cm.setGutterMarker(info.line, gutterName, null);
|
|
|
|
|
},
|
|
|
|
|
|
2014-05-08 12:57:00 +00:00
|
|
|
getMarker: function(line, gutterName) {
|
|
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let info = cm.lineInfo(line);
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!info) {
|
2014-05-08 12:57:00 +00:00
|
|
|
return null;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2014-05-08 12:57:00 +00:00
|
|
|
|
|
|
|
|
let gutterMarkers = info.gutterMarkers;
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!gutterMarkers) {
|
2014-05-08 12:57:00 +00:00
|
|
|
return null;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2014-05-08 12:57:00 +00:00
|
|
|
|
|
|
|
|
return gutterMarkers[gutterName];
|
|
|
|
|
},
|
|
|
|
|
|
2013-11-05 12:07:37 +00:00
|
|
|
/**
|
2015-12-25 20:57:20 +00:00
|
|
|
* Removes all gutter markers in the gutter with the given name.
|
2013-11-05 12:07:37 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
removeAllMarkers: function(gutterName) {
|
2013-11-05 12:07:37 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
cm.clearGutter(gutterName);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Handles attaching a set of events listeners on a marker. They should
|
|
|
|
|
* be passed as an object literal with keys as event names and values as
|
|
|
|
|
* function listeners. The line number, marker node and optional data
|
|
|
|
|
* will be passed as arguments to the function listener.
|
|
|
|
|
*
|
|
|
|
|
* You don't need to worry about removing these event listeners.
|
|
|
|
|
* They're automatically orphaned when clearing markers.
|
|
|
|
|
*/
|
|
|
|
|
setMarkerListeners: function(line, gutterName, markerClass, events, data) {
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!this.hasMarker(line, gutterName, markerClass)) {
|
2013-11-05 12:07:37 +00:00
|
|
|
return;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-05 12:07:37 +00:00
|
|
|
|
|
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let marker = cm.lineInfo(line).gutterMarkers[gutterName];
|
|
|
|
|
|
|
|
|
|
for (let name in events) {
|
|
|
|
|
let listener = events[name].bind(this, line, marker, data);
|
|
|
|
|
marker.addEventListener(name, listener);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns whether a line is decorated using the specified class name.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
hasLineClass: function(line, className) {
|
2013-11-05 12:07:37 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let info = cm.lineInfo(line);
|
2013-11-19 23:53:13 +00:00
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (!info || !info.wrapClass) {
|
2013-11-05 12:07:37 +00:00
|
|
|
return false;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-05 12:07:37 +00:00
|
|
|
|
2013-11-19 23:53:13 +00:00
|
|
|
return info.wrapClass.split(" ").indexOf(className) != -1;
|
2013-11-05 12:07:37 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
2015-12-25 20:57:20 +00:00
|
|
|
* Sets a CSS class name for the given line, including the text and gutter.
|
2013-11-05 12:07:37 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
addLineClass: function(line, className) {
|
2013-11-05 12:07:37 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
cm.addLineClass(line, "wrap", className);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The reverse of addLineClass.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
removeLineClass: function(line, className) {
|
2013-11-05 12:07:37 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
cm.removeLineClass(line, "wrap", className);
|
|
|
|
|
},
|
|
|
|
|
|
2013-11-29 14:47:52 +00:00
|
|
|
/**
|
|
|
|
|
* Mark a range of text inside the two {line, ch} bounds. Since the range may
|
|
|
|
|
* be modified, for example, when typing text, this method returns a function
|
|
|
|
|
* that can be used to remove the mark.
|
|
|
|
|
*/
|
|
|
|
|
markText: function(from, to, className = "marked-text") {
|
|
|
|
|
let cm = editors.get(this);
|
2014-01-08 14:59:00 +00:00
|
|
|
let text = cm.getRange(from, to);
|
|
|
|
|
let span = cm.getWrapperElement().ownerDocument.createElement("span");
|
|
|
|
|
span.className = className;
|
|
|
|
|
span.textContent = text;
|
|
|
|
|
|
|
|
|
|
let mark = cm.markText(from, to, { replacedWith: span });
|
|
|
|
|
return {
|
|
|
|
|
anchor: span,
|
|
|
|
|
clear: () => mark.clear()
|
|
|
|
|
};
|
2013-11-29 14:47:52 +00:00
|
|
|
},
|
|
|
|
|
|
2013-11-06 09:59:20 +00:00
|
|
|
/**
|
|
|
|
|
* Calculates and returns one or more {line, ch} objects for
|
|
|
|
|
* a zero-based index who's value is relative to the start of
|
|
|
|
|
* the editor's text.
|
|
|
|
|
*
|
|
|
|
|
* If only one argument is given, this method returns a single
|
|
|
|
|
* {line,ch} object. Otherwise it returns an array.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
getPosition: function(...args) {
|
2013-11-06 09:59:20 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let res = args.map((ind) => cm.posFromIndex(ind));
|
|
|
|
|
return args.length === 1 ? res[0] : res;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The reverse of getPosition. Similarly to getPosition this
|
|
|
|
|
* method returns a single value if only one argument was given
|
|
|
|
|
* and an array otherwise.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
getOffset: function(...args) {
|
2013-11-06 09:59:20 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let res = args.map((pos) => cm.indexFromPos(pos));
|
|
|
|
|
return args.length > 1 ? res : res[0];
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns a {line, ch} object that corresponds to the
|
|
|
|
|
* left, top coordinates.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
getPositionFromCoords: function({left, top}) {
|
2013-11-06 09:59:20 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
return cm.coordsChar({ left: left, top: top });
|
|
|
|
|
},
|
|
|
|
|
|
2013-11-29 14:47:52 +00:00
|
|
|
/**
|
|
|
|
|
* The reverse of getPositionFromCoords. Similarly, returns a {left, top}
|
|
|
|
|
* object that corresponds to the specified line and character number.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
getCoordsFromPosition: function({line, ch}) {
|
2013-11-29 14:47:52 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
return cm.charCoords({ line: ~~line, ch: ~~ch });
|
|
|
|
|
},
|
|
|
|
|
|
2013-11-06 09:59:20 +00:00
|
|
|
/**
|
|
|
|
|
* Returns true if there's something to undo and false otherwise.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
canUndo: function() {
|
2013-11-06 09:59:20 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
return cm.historySize().undo > 0;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns true if there's something to redo and false otherwise.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
canRedo: function() {
|
2013-11-06 09:59:20 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
return cm.historySize().redo > 0;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Marks the contents as clean and returns the current
|
|
|
|
|
* version number.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
setClean: function() {
|
2013-11-06 09:59:20 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
this.version = cm.changeGeneration();
|
2013-12-06 18:21:16 +00:00
|
|
|
this._lastDirty = false;
|
|
|
|
|
this.emit("dirty-change");
|
2013-11-06 09:59:20 +00:00
|
|
|
return this.version;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns true if contents of the text area are
|
|
|
|
|
* clean i.e. no changes were made since the last version.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
isClean: function() {
|
2013-11-06 09:59:20 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
return cm.isClean(this.version);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* This method opens an in-editor dialog asking for a line to
|
|
|
|
|
* jump to. Once given, it changes cursor to that line.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
jumpToLine: function() {
|
2014-01-17 20:58:45 +00:00
|
|
|
let doc = editors.get(this).getWrapperElement().ownerDocument;
|
2013-11-20 22:39:10 +00:00
|
|
|
let div = doc.createElement("div");
|
|
|
|
|
let inp = doc.createElement("input");
|
2015-12-25 20:57:20 +00:00
|
|
|
let txt =
|
|
|
|
|
doc.createTextNode(L10N.GetStringFromName("gotoLineCmd.promptTitle"));
|
2013-11-20 22:39:10 +00:00
|
|
|
|
|
|
|
|
inp.type = "text";
|
|
|
|
|
inp.style.width = "10em";
|
|
|
|
|
inp.style.MozMarginStart = "1em";
|
|
|
|
|
|
|
|
|
|
div.appendChild(txt);
|
|
|
|
|
div.appendChild(inp);
|
|
|
|
|
|
2014-06-02 22:33:20 +00:00
|
|
|
if (!this.hasMultipleSelections()) {
|
|
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let sel = cm.getSelection();
|
|
|
|
|
// Scratchpad inserts and selects a comment after an error happens:
|
|
|
|
|
// "@Scratchpad/1:10:2". Parse this to get the line and column.
|
|
|
|
|
// In the string above this is line 10, column 2.
|
|
|
|
|
let match = sel.match(RE_SCRATCHPAD_ERROR);
|
|
|
|
|
if (match) {
|
2015-12-25 20:57:20 +00:00
|
|
|
let [, line, column ] = match;
|
2014-06-02 22:33:20 +00:00
|
|
|
inp.value = column ? line + ":" + column : line;
|
|
|
|
|
inp.selectionStart = inp.selectionEnd = inp.value.length;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.openDialog(div, (line) => {
|
|
|
|
|
// Handle LINE:COLUMN as well as LINE
|
|
|
|
|
let match = line.toString().match(RE_JUMP_TO_LINE);
|
|
|
|
|
if (match) {
|
2015-12-25 20:57:20 +00:00
|
|
|
let [, line, column ] = match;
|
2014-06-02 22:33:20 +00:00
|
|
|
this.setCursor({line: line - 1, ch: column ? column - 1 : 0 });
|
|
|
|
|
}
|
|
|
|
|
});
|
2013-11-06 09:59:20 +00:00
|
|
|
},
|
|
|
|
|
|
2013-11-26 03:06:42 +00:00
|
|
|
/**
|
|
|
|
|
* Moves the content of the current line or the lines selected up a line.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
moveLineUp: function() {
|
2013-11-26 03:06:42 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let start = cm.getCursor("start");
|
|
|
|
|
let end = cm.getCursor("end");
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (start.line === 0) {
|
2013-11-26 03:06:42 +00:00
|
|
|
return;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-26 03:06:42 +00:00
|
|
|
|
|
|
|
|
// Get the text in the lines selected or the current line of the cursor
|
|
|
|
|
// and append the text of the previous line.
|
|
|
|
|
let value;
|
|
|
|
|
if (start.line !== end.line) {
|
|
|
|
|
value = cm.getRange({ line: start.line, ch: 0 },
|
|
|
|
|
{ line: end.line, ch: cm.getLine(end.line).length }) + "\n";
|
|
|
|
|
} else {
|
|
|
|
|
value = cm.getLine(start.line) + "\n";
|
|
|
|
|
}
|
|
|
|
|
value += cm.getLine(start.line - 1);
|
|
|
|
|
|
|
|
|
|
// Replace the previous line and the currently selected lines with the new
|
|
|
|
|
// value and maintain the selection of the text.
|
|
|
|
|
cm.replaceRange(value, { line: start.line - 1, ch: 0 },
|
|
|
|
|
{ line: end.line, ch: cm.getLine(end.line).length });
|
|
|
|
|
cm.setSelection({ line: start.line - 1, ch: start.ch },
|
|
|
|
|
{ line: end.line - 1, ch: end.ch });
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Moves the content of the current line or the lines selected down a line.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
moveLineDown: function() {
|
2013-11-26 03:06:42 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let start = cm.getCursor("start");
|
|
|
|
|
let end = cm.getCursor("end");
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (end.line + 1 === cm.lineCount()) {
|
2013-11-26 03:06:42 +00:00
|
|
|
return;
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-11-26 03:06:42 +00:00
|
|
|
|
|
|
|
|
// Get the text of next line and append the text in the lines selected
|
|
|
|
|
// or the current line of the cursor.
|
|
|
|
|
let value = cm.getLine(end.line + 1) + "\n";
|
|
|
|
|
if (start.line !== end.line) {
|
|
|
|
|
value += cm.getRange({ line: start.line, ch: 0 },
|
|
|
|
|
{ line: end.line, ch: cm.getLine(end.line).length });
|
|
|
|
|
} else {
|
|
|
|
|
value += cm.getLine(start.line);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Replace the currently selected lines and the next line with the new
|
|
|
|
|
// value and maintain the selection of the text.
|
|
|
|
|
cm.replaceRange(value, { line: start.line, ch: 0 },
|
|
|
|
|
{ line: end.line + 1, ch: cm.getLine(end.line + 1).length});
|
|
|
|
|
cm.setSelection({ line: start.line + 1, ch: start.ch },
|
|
|
|
|
{ line: end.line + 1, ch: end.ch });
|
|
|
|
|
},
|
|
|
|
|
|
2014-02-11 02:21:42 +00:00
|
|
|
/**
|
|
|
|
|
* Returns current font size for the editor area, in pixels.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
getFontSize: function() {
|
|
|
|
|
let cm = editors.get(this);
|
|
|
|
|
let el = cm.getWrapperElement();
|
2014-02-11 02:21:42 +00:00
|
|
|
let win = el.ownerDocument.defaultView;
|
|
|
|
|
|
|
|
|
|
return parseInt(win.getComputedStyle(el).getPropertyValue("font-size"), 10);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Sets font size for the editor area.
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
setFontSize: function(size) {
|
2014-02-11 02:21:42 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
cm.getWrapperElement().style.fontSize = parseInt(size, 10) + "px";
|
2014-02-26 22:50:26 +00:00
|
|
|
cm.refresh();
|
2014-02-11 02:21:42 +00:00
|
|
|
},
|
|
|
|
|
|
2014-06-30 09:23:00 +00:00
|
|
|
/**
|
|
|
|
|
* Sets an option for the editor. For most options it just defers to
|
|
|
|
|
* CodeMirror.setOption, but certain ones are maintained within the editor
|
|
|
|
|
* instance.
|
|
|
|
|
*/
|
|
|
|
|
setOption: function(o, v) {
|
|
|
|
|
let cm = editors.get(this);
|
2014-07-07 11:52:00 +00:00
|
|
|
|
|
|
|
|
// Save the state of a valid autoCloseBrackets string, so we can reset
|
|
|
|
|
// it if it gets preffed off and back on.
|
|
|
|
|
if (o === "autoCloseBrackets" && v) {
|
|
|
|
|
this.config.autoCloseBracketsSaved = v;
|
|
|
|
|
}
|
|
|
|
|
|
2014-06-30 09:23:00 +00:00
|
|
|
if (o === "autocomplete") {
|
|
|
|
|
this.config.autocomplete = v;
|
|
|
|
|
this.setupAutoCompletion();
|
|
|
|
|
} else {
|
|
|
|
|
cm.setOption(o, v);
|
2015-09-28 21:55:51 +00:00
|
|
|
this.config[o] = v;
|
2014-06-30 09:23:00 +00:00
|
|
|
}
|
2014-09-12 11:36:00 +00:00
|
|
|
|
|
|
|
|
if (o === "enableCodeFolding") {
|
|
|
|
|
// The new value maybe explicitly force foldGUtter on or off, ignoring
|
|
|
|
|
// the prefs service.
|
|
|
|
|
this.updateCodeFoldingGutter();
|
|
|
|
|
}
|
2014-06-30 09:23:00 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Gets an option for the editor. For most options it just defers to
|
|
|
|
|
* CodeMirror.getOption, but certain ones are maintained within the editor
|
|
|
|
|
* instance.
|
|
|
|
|
*/
|
|
|
|
|
getOption: function(o) {
|
|
|
|
|
let cm = editors.get(this);
|
|
|
|
|
if (o === "autocomplete") {
|
|
|
|
|
return this.config.autocomplete;
|
|
|
|
|
}
|
2015-12-25 20:57:20 +00:00
|
|
|
|
|
|
|
|
return cm.getOption(o);
|
2014-06-30 09:23:00 +00:00
|
|
|
},
|
|
|
|
|
|
2014-04-16 20:49:28 +00:00
|
|
|
/**
|
|
|
|
|
* Sets up autocompletion for the editor. Lazily imports the required
|
|
|
|
|
* dependencies because they vary by editor mode.
|
2014-06-30 09:23:00 +00:00
|
|
|
*
|
|
|
|
|
* Autocompletion is special, because we don't want to automatically use
|
|
|
|
|
* it just because it is preffed on (it still needs to be requested by the
|
|
|
|
|
* editor), but we do want to always disable it if it is preffed off.
|
2014-04-16 20:49:28 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
setupAutoCompletion: function() {
|
2014-06-30 09:23:00 +00:00
|
|
|
// The autocomplete module will overwrite this.initializeAutoCompletion
|
|
|
|
|
// with a mode specific autocompletion handler.
|
|
|
|
|
if (!this.initializeAutoCompletion) {
|
2014-04-16 20:49:28 +00:00
|
|
|
this.extend(require("./autocomplete"));
|
2014-06-30 09:23:00 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (this.config.autocomplete && Services.prefs.getBoolPref(AUTOCOMPLETE)) {
|
2014-07-07 11:52:00 +00:00
|
|
|
this.initializeAutoCompletion(this.config.autocompleteOpts);
|
2014-06-30 09:23:00 +00:00
|
|
|
} else {
|
|
|
|
|
this.destroyAutoCompletion();
|
2014-04-16 20:49:28 +00:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2013-11-06 09:59:20 +00:00
|
|
|
/**
|
|
|
|
|
* Extends an instance of the Editor object with additional
|
|
|
|
|
* functions. Each function will be called with context as
|
|
|
|
|
* the first argument. Context is a {ed, cm} object where
|
|
|
|
|
* 'ed' is an instance of the Editor object and 'cm' is an
|
|
|
|
|
* instance of the CodeMirror object. Example:
|
|
|
|
|
*
|
|
|
|
|
* function hello(ctx, name) {
|
|
|
|
|
* let { cm, ed } = ctx;
|
|
|
|
|
* cm; // CodeMirror instance
|
|
|
|
|
* ed; // Editor instance
|
|
|
|
|
* name; // 'Mozilla'
|
|
|
|
|
* }
|
|
|
|
|
*
|
|
|
|
|
* editor.extend({ hello: hello });
|
|
|
|
|
* editor.hello('Mozilla');
|
|
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
extend: function(funcs) {
|
|
|
|
|
Object.keys(funcs).forEach(name => {
|
|
|
|
|
let cm = editors.get(this);
|
2014-01-28 15:08:41 +00:00
|
|
|
let ctx = { ed: this, cm: cm, Editor: Editor};
|
2013-11-06 09:59:20 +00:00
|
|
|
|
2014-01-01 03:28:42 +00:00
|
|
|
if (name === "initialize") {
|
|
|
|
|
funcs[name](ctx);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-11-06 09:59:20 +00:00
|
|
|
|
|
|
|
|
this[name] = funcs[name].bind(null, ctx);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
destroy: function() {
|
2013-10-22 20:53:53 +00:00
|
|
|
this.container = null;
|
|
|
|
|
this.config = null;
|
2013-09-20 18:34:10 +00:00
|
|
|
this.version = null;
|
2014-07-07 11:52:00 +00:00
|
|
|
|
|
|
|
|
if (this._prefObserver) {
|
|
|
|
|
this._prefObserver.off(TAB_SIZE, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.off(EXPAND_TAB, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.off(KEYMAP, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.off(AUTO_CLOSE, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.off(AUTOCOMPLETE, this.reloadPreferences);
|
|
|
|
|
this._prefObserver.off(DETECT_INDENT, this.reloadPreferences);
|
2014-09-12 11:36:00 +00:00
|
|
|
this._prefObserver.off(ENABLE_CODE_FOLDING, this.reloadPreferences);
|
2014-07-07 11:52:00 +00:00
|
|
|
this._prefObserver.destroy();
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
this.emit("destroy");
|
2014-09-12 11:36:00 +00:00
|
|
|
},
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
updateCodeFoldingGutter: function() {
|
|
|
|
|
let shouldFoldGutter = this.config.enableCodeFolding;
|
|
|
|
|
let foldGutterIndex = this.config.gutters.indexOf("CodeMirror-foldgutter");
|
|
|
|
|
let cm = editors.get(this);
|
2014-09-12 11:36:00 +00:00
|
|
|
|
|
|
|
|
if (shouldFoldGutter === undefined) {
|
|
|
|
|
shouldFoldGutter = Services.prefs.getBoolPref(ENABLE_CODE_FOLDING);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (shouldFoldGutter) {
|
|
|
|
|
// Add the gutter before enabling foldGutter
|
|
|
|
|
if (foldGutterIndex === -1) {
|
|
|
|
|
let gutters = this.config.gutters.slice();
|
|
|
|
|
gutters.push("CodeMirror-foldgutter");
|
|
|
|
|
this.setOption("gutters", gutters);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.setOption("foldGutter", true);
|
|
|
|
|
} else {
|
|
|
|
|
// No code should remain folded when folding is off.
|
|
|
|
|
if (cm) {
|
|
|
|
|
cm.execCommand("unfoldAll");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Remove the gutter so it doesn't take up space
|
|
|
|
|
if (foldGutterIndex !== -1) {
|
|
|
|
|
let gutters = this.config.gutters.slice();
|
|
|
|
|
gutters.splice(foldGutterIndex, 1);
|
|
|
|
|
this.setOption("gutters", gutters);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.setOption("foldGutter", false);
|
|
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Since Editor is a thin layer over CodeMirror some methods
|
|
|
|
|
// are mapped directly—without any changes.
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
CM_MAPPING.forEach(name => {
|
|
|
|
|
Editor.prototype[name] = function(...args) {
|
2013-09-20 18:34:10 +00:00
|
|
|
let cm = editors.get(this);
|
|
|
|
|
return cm[name].apply(cm, args);
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
|
2013-11-07 22:39:31 +00:00
|
|
|
// Static methods on the Editor object itself.
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns a string representation of a shortcut 'key' with
|
|
|
|
|
* a OS specific modifier. Cmd- for Macs, Ctrl- for other
|
|
|
|
|
* platforms. Useful with extraKeys configuration option.
|
2013-11-20 19:51:33 +00:00
|
|
|
*
|
|
|
|
|
* CodeMirror defines all keys with modifiers in the following
|
|
|
|
|
* order: Shift - Ctrl/Cmd - Alt - Key
|
2013-11-07 22:39:31 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
Editor.accel = function(key, modifiers = {}) {
|
2013-11-20 19:51:33 +00:00
|
|
|
return (modifiers.shift ? "Shift-" : "") +
|
|
|
|
|
(Services.appinfo.OS == "Darwin" ? "Cmd-" : "Ctrl-") +
|
|
|
|
|
(modifiers.alt ? "Alt-" : "") + key;
|
2013-11-07 22:39:31 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns a string representation of a shortcut for a
|
2014-02-13 15:02:51 +00:00
|
|
|
* specified command 'cmd'. Append Cmd- for macs, Ctrl- for other
|
|
|
|
|
* platforms unless noaccel is specified in the options. Useful when overwriting
|
|
|
|
|
* or disabling default shortcuts.
|
2013-11-07 22:39:31 +00:00
|
|
|
*/
|
2015-12-25 20:57:20 +00:00
|
|
|
Editor.keyFor = function(cmd, opts = { noaccel: false }) {
|
2014-02-13 15:02:51 +00:00
|
|
|
let key = L10N.GetStringFromName(cmd + ".commandkey");
|
|
|
|
|
return opts.noaccel ? key : Editor.accel(key);
|
2013-11-07 22:39:31 +00:00
|
|
|
};
|
|
|
|
|
|
2013-10-24 05:01:02 +00:00
|
|
|
// Since Gecko already provide complete and up to date list of CSS property
|
|
|
|
|
// names, values and color names, we compute them so that they can replace
|
|
|
|
|
// the ones used in CodeMirror while initiating an editor object. This is done
|
|
|
|
|
// here instead of the file codemirror/css.js so as to leave that file untouched
|
|
|
|
|
// and easily upgradable.
|
|
|
|
|
function getCSSKeywords() {
|
|
|
|
|
function keySet(array) {
|
2015-12-25 20:57:20 +00:00
|
|
|
let keys = {};
|
|
|
|
|
for (let i = 0; i < array.length; ++i) {
|
2013-10-24 05:01:02 +00:00
|
|
|
keys[array[i]] = true;
|
|
|
|
|
}
|
|
|
|
|
return keys;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let domUtils = Cc["@mozilla.org/inspector/dom-utils;1"]
|
|
|
|
|
.getService(Ci.inIDOMUtils);
|
|
|
|
|
let cssProperties = domUtils.getCSSPropertyNames(domUtils.INCLUDE_ALIASES);
|
|
|
|
|
let cssColors = {};
|
|
|
|
|
let cssValues = {};
|
|
|
|
|
cssProperties.forEach(property => {
|
2015-04-29 15:32:05 +00:00
|
|
|
if (property.includes("color")) {
|
2013-10-24 05:01:02 +00:00
|
|
|
domUtils.getCSSValuesForProperty(property).forEach(value => {
|
|
|
|
|
cssColors[value] = true;
|
|
|
|
|
});
|
2015-12-25 20:57:20 +00:00
|
|
|
} else {
|
2013-10-24 05:01:02 +00:00
|
|
|
domUtils.getCSSValuesForProperty(property).forEach(value => {
|
|
|
|
|
cssValues[value] = true;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return {
|
|
|
|
|
cssProperties: keySet(cssProperties),
|
|
|
|
|
cssValues: cssValues,
|
|
|
|
|
cssColors: cssColors
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-20 18:34:10 +00:00
|
|
|
/**
|
|
|
|
|
* Returns a controller object that can be used for
|
|
|
|
|
* editor-specific commands such as find, jump to line,
|
|
|
|
|
* copy/paste, etc.
|
|
|
|
|
*/
|
2013-11-05 18:30:19 +00:00
|
|
|
function controller(ed) {
|
2013-09-20 18:34:10 +00:00
|
|
|
return {
|
2015-12-25 20:57:20 +00:00
|
|
|
supportsCommand: function(cmd) {
|
2013-09-20 18:34:10 +00:00
|
|
|
switch (cmd) {
|
|
|
|
|
case "cmd_find":
|
|
|
|
|
case "cmd_findAgain":
|
|
|
|
|
case "cmd_findPrevious":
|
|
|
|
|
case "cmd_gotoLine":
|
|
|
|
|
case "cmd_undo":
|
|
|
|
|
case "cmd_redo":
|
|
|
|
|
case "cmd_delete":
|
|
|
|
|
case "cmd_selectAll":
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
},
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
isCommandEnabled: function(cmd) {
|
2013-09-20 18:34:10 +00:00
|
|
|
let cm = editors.get(ed);
|
|
|
|
|
|
|
|
|
|
switch (cmd) {
|
|
|
|
|
case "cmd_find":
|
|
|
|
|
case "cmd_gotoLine":
|
|
|
|
|
case "cmd_selectAll":
|
|
|
|
|
return true;
|
|
|
|
|
case "cmd_findAgain":
|
|
|
|
|
return cm.state.search != null && cm.state.search.query != null;
|
|
|
|
|
case "cmd_undo":
|
|
|
|
|
return ed.canUndo();
|
|
|
|
|
case "cmd_redo":
|
|
|
|
|
return ed.canRedo();
|
|
|
|
|
case "cmd_delete":
|
|
|
|
|
return ed.somethingSelected();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
},
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
doCommand: function(cmd) {
|
|
|
|
|
let cm = editors.get(ed);
|
2013-09-20 18:34:10 +00:00
|
|
|
let map = {
|
|
|
|
|
"cmd_selectAll": "selectAll",
|
|
|
|
|
"cmd_find": "find",
|
|
|
|
|
"cmd_undo": "undo",
|
|
|
|
|
"cmd_redo": "redo",
|
|
|
|
|
"cmd_delete": "delCharAfter",
|
|
|
|
|
"cmd_findAgain": "findNext"
|
|
|
|
|
};
|
|
|
|
|
|
2014-01-01 03:28:42 +00:00
|
|
|
if (map[cmd]) {
|
|
|
|
|
cm.execCommand(map[cmd]);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
if (cmd == "cmd_gotoLine") {
|
2014-01-17 20:58:45 +00:00
|
|
|
ed.jumpToLine();
|
2015-12-25 20:57:20 +00:00
|
|
|
}
|
2013-09-20 18:34:10 +00:00
|
|
|
},
|
|
|
|
|
|
2015-12-25 20:57:20 +00:00
|
|
|
onEvent: function() {}
|
2013-09-20 18:34:10 +00:00
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2013-10-24 05:01:02 +00:00
|
|
|
module.exports = Editor;
|
