function loadEditor(container) {
var catalog = require("pilot/plugin_manager").catalog;
var env = null;
var loaded = catalog.registerPlugins(["pilot/index"]).isResolved();
env = require("pilot/environment").create();
loaded = catalog.startupPlugins({ env: env }).isResolved() && loaded;
if (!loaded)
throw new Error("Environment loading was not synchronous");
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
var TextMode = require("ace/mode/text").Mode;
var theme = {}; // prevent default textmate theme from loading
env.editor = new RStudioEditor(new Renderer(container, theme), new RStudioEditSession(""));
var session = env.editor.getSession();
session.setMode(new TextMode());
session.setUndoManager(new RStudioUndoManager());
// We handle these commands ourselves.
var canon = require("pilot/canon");
function squelch(cmd) {
canon.getCommand(cmd).exec = function() {};
}
squelch("findnext");
squelch("findprevious");
squelch("find");
squelch("replace");
squelch("togglecomment");
squelch("gotoline");
return env.editor;
}
edit: function(el) {
if (typeof(el) == "string") {
el = document.getElementById(el);
}
var doc = new EditSession(Dom.getInnerText(el));
doc.setMode(new JavaScriptMode());
doc.setUndoManager(new UndoManager());
el.innerHTML = '';
var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
editor.setSession(doc);
var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
env.document = doc;
env.editor = env;
editor.resize();
Event.addListener(window, "resize", function() {
editor.resize();
});
el.env = env;
});
return editor;
}
exports.edit = function(el) {
if (typeof(el) == "string") {
el = document.getElementById(el);
}
var doc = new EditSession(Dom.getInnerText(el));
doc.setUndoManager(new UndoManager());
el.innerHTML = '';
var editor = new Editor(new Renderer(el, require("ace/theme/textmate")));
editor.setSession(doc);
var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
env.document = doc;
env.editor = editor;
editor.resize();
Event.addListener(window, "resize", function() {
editor.resize();
});
el.env = env;
});
// Store env on editor such that it can be accessed later on from
// the returned object.
editor.env = env;
return editor;
};
buildAce: function buildAce() {
var doc, editor, env, self = this,
target = this.pre[0];
// set up ace editor
this.doc = doc = new EditSession(Dom.getInnerText(target));
doc.setUndoManager(new UndoManager());
this.pre.html('');
// textmate theme by default
this.editor = editor = new Editor(new Renderer(target, "ace/theme/textmate"));
editor.setSession(doc);
env = Env.create();
catalog.startupPlugins({ env: env }).then(function() {
env.document = doc;
env.editor = editor;
editor.resize();
Event.addListener(window, "resize", function() {
editor.resize();
});
self.dom.env = env;
});
// Store env on editor such that it can be accessed later on from
// the returned object.
editor.env = env;
return this;
},
require(deps, function() {
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins([ "pilot/index", "cockpit/index" ]).then(function() {
var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
require("startup").launch(env);
});
});
});
require(deps, function() {
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins(plugins).then(function() {
var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
createPloneIDE(env);
});
});
});
require(deps, function(Application) {
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins(plugins).then(function() {
var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
require("sourcekit/application").start();
});
});
});
define(function(require, exports, module) {
var catalog = require("pilot/plugin_manager").catalog;
require("pilot/index");
catalog.registerPlugins([ "pilot/index" ]);
var Dom = require("pilot/dom");
var Event = require("pilot/event");
var Editor = require("ace/editor").Editor;
var EditSession = require("ace/edit_session").EditSession;
var UndoManager = require("ace/undomanager").UndoManager;
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
exports.edit = function(el) {
if (typeof(el) == "string") {
el = document.getElementById(el);
}
var doc = new EditSession(Dom.getInnerText(el));
doc.setUndoManager(new UndoManager());
el.innerHTML = '';
var editor = new Editor(new Renderer(el, require("ace/theme/textmate")));
editor.setSession(doc);
var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
env.document = doc;
env.editor = editor;
editor.resize();
Event.addListener(window, "resize", function() {
editor.resize();
});
el.env = env;
});
// Store env on editor such that it can be accessed later on from
// the returned object.
editor.env = env;
return editor;
};
});
(function() {
var require = window.__ace_shadowed__.require;
require("pilot/index");
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins([ "pilot/index" ]);
var Dom = require("pilot/dom");
var Event = require("pilot/event");
var UA = require("pilot/useragent")
var Editor = require("ace/editor").Editor;
var EditSession = require("ace/edit_session").EditSession;
var UndoManager = require("ace/undomanager").UndoManager;
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins([ "pilot/index" ]);
window.__ace_shadowed__.edit = function(el) {
if (typeof(el) == "string") {
el = document.getElementById(el);
}
var doc = new EditSession(Dom.getInnerText(el));
doc.setUndoManager(new UndoManager());
el.innerHTML = '';
var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
editor.setSession(doc);
var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
env.document = doc;
env.editor = env;
editor.resize();
Event.addListener(window, "resize", function() {
editor.resize();
});
el.env = env;
});
return editor;
}
/**
* Returns the CSS property of element.
* 1) If the CSS property is on the style object of the element, use it, OR
* 2) Compute the CSS property
*
* If the property can't get computed, is 'auto' or 'intrinsic', the former
* calculated property is uesd (this can happen in cases where the textarea
* is hidden and has no dimension styles).
*/
var getCSSProperty = function(element, container, property) {
var ret = element.style[property];
if (!ret) {
if (window.getComputedStyle) {
ret = window.getComputedStyle(element, '').getPropertyValue(property);
} else {
ret = element.currentStyle[property];
}
}
if (!ret || ret == 'auto' || ret == 'intrinsic') {
ret = container.style[property];
}
return ret;
};
function applyStyles(elm, styles) {
for (style in styles) {
elm.style[style] = styles[style];
}
}
function setupContainer(element, getValue) {
if (element.type != 'textarea') {
throw "Textarea required!";
}
var parentNode = element.parentNode;
// This will hold the editor.
var container = document.createElement('div');
// To put Ace in the place of the textarea, we have to copy a few of the
// textarea's style attributes to the div container.
//
// The problem is that the properties have to get computed (they might be
// defined by a CSS file on the page - you can't access such rules that
// apply to an element via elm.style). Computed properties are converted to
// pixels although the dimension might be given as percentage. When the
// window resizes, the dimensions defined by percentages changes, so the
// properties have to get recomputed to get the new/true pixels.
var resizeEvent = function() {
var style = 'position:relative;';
[
'margin-top', 'margin-left', 'margin-right', 'margin-bottom'
].forEach(function(item) {
style += item + ':' +
getCSSProperty(element, container, item) + ';';
});
// Calculating the width/height of the textarea is somewhat tricky. To
// do it right, you have to include the paddings to the sides as well
// (eg. width = width + padding-left, -right). This works well, as
// long as the width of the element is not set or given in pixels. In
// this case and after the textarea is hidden, getCSSProperty(element,
// container, 'width') will still return pixel value. If the element
// has realtiv dimensions (e.g. width='95<percent>')
// getCSSProperty(...) will return pixel values only as long as the
// textarea is visible. After it is hidden getCSSProperty will return
// the relative dimensions as they are set on the element (in the case
// of width, 95<percent>).
// Making the sum of pixel vaules (e.g. padding) and realtive values
// (e.g. <percent>) is not possible. As such the padding styles are
// ignored.
// The complete width is the width of the textarea + the padding
// to the left and right.
var width = getCSSProperty(element, container, 'width') || (element.clientWidth + "px");
var height = getCSSProperty(element, container, 'height') || (element.clientHeight + "px");
style += 'height:' + height + ';width:' + width + ';';
// Set the display property to 'inline-block'.
style += 'display:inline-block;';
container.setAttribute('style', style);
};
Event.addListener(window, 'resize', resizeEvent);
// Call the resizeEvent once, so that the size of the container is
// calculated.
resizeEvent();
// Insert the div container after the element.
if (element.nextSibling) {
parentNode.insertBefore(container, element.nextSibling);
} else {
parentNode.appendChild(container);
}
// Override the forms onsubmit function. Set the innerHTML and value
// of the textarea before submitting.
while (parentNode !== document) {
if (parentNode.tagName.toUpperCase() === 'FORM') {
var oldSumit = parentNode.onsubmit;
// Override the onsubmit function of the form.
parentNode.onsubmit = function(evt) {
element.value = getValue();
element.innerHTML = getValue();
// If there is a onsubmit function already, then call
// it with the current context and pass the event.
if (oldSumit) {
oldSumit.call(this, evt);
}
}
break;
}
parentNode = parentNode.parentNode;
}
return container;
}
window.__ace_shadowed__.transformTextarea = function(element) {
var session;
var container = setupContainer(element, function() {
return session.getValue();
});
// Hide the element.
element.style.display = 'none';
container.style.background = 'white';
//
var editorDiv = document.createElement("div");
applyStyles(editorDiv, {
top: "0px",
left: "0px",
right: "0px",
bottom: "0px",
border: "1px solid gray"
});
container.appendChild(editorDiv);
var settingOpener = document.createElement("div");
applyStyles(settingOpener, {
position: "absolute",
width: "15px",
right: "0px",
bottom: "0px",
background: "red",
cursor: "pointer",
textAlign: "center",
fontSize: "12px"
});
settingOpener.innerHTML = "I";
var settingDiv = document.createElement("div");
var settingDivStyles = {
top: "0px",
left: "0px",
right: "0px",
bottom: "0px",
position: "absolute",
padding: "5px",
zIndex: 100,
color: "white",
display: "none",
overflow: "auto",
fontSize: "14px"
};
if (!UA.isIE) {
settingDivStyles.backgroundColor = "rgba(0, 0, 0, 0.6)";
} else {
settingDivStyles.backgroundColor = "#333";
}
applyStyles(settingDiv, settingDivStyles);
container.appendChild(settingDiv);
// Power up ace on the textarea:
var ace = window.__ace_shadowed__;
var require = ace.require;
var define = ace.define;
var options = {};
var editor = ace.edit(editorDiv);
session = editor.getSession();
session.setValue(element.value || element.innerHTML);
editor.focus();
// Add the settingPanel opener to the editor's div.
editorDiv.appendChild(settingOpener);
// Create the API.
var api = setupApi(editor, editorDiv, settingDiv, ace, options)
// Create the setting's panel.
setupSettingPanel(settingDiv, settingOpener, api, options);
return api;
}
function setupApi(editor, editorDiv, settingDiv, ace, options) {
var session = editor.getSession();
var renderer = editor.renderer;
function toBool(value) {
return value == "true";
}
var ret = {
setDisplaySettings: function(display) {
settingDiv.style.display = display ? "block" : "none";
},
setOption: function(key, value) {
if (options[key] == value) return;
var load = window.__ace_shadowed_load__;
switch (key) {
case "gutter":
renderer.setShowGutter(toBool(value));
break;
case "mode":
if (value != "text") {
// Load the required mode file. Files get loaded only once.
load("mode-" + value + ".js", "ace/mode/" + value, function() {
var aceMode = require("ace/mode/" + value).Mode;
session.setMode(new aceMode());
});
} else {
session.setMode(new (require("ace/mode/text").Mode));
}
break;
case "theme":
if (value != "textmate") {
// Load the required theme file. Files get loaded only once.
load("theme-" + value + ".js", "ace/theme/" + value, function() {
editor.setTheme("ace/theme/" + value);
});
} else {
editor.setTheme("ace/theme/textmate");
}
break;
case "fontSize":
editorDiv.style.fontSize = value;
break;
case "softWrap":
switch (value) {
case "off":
session.setUseWrapMode(false);
renderer.setPrintMarginColumn(80);
break;
case "40":
session.setUseWrapMode(true);
session.setWrapLimitRange(40, 40);
renderer.setPrintMarginColumn(40);
break;
case "80":
session.setUseWrapMode(true);
session.setWrapLimitRange(80, 80);
renderer.setPrintMarginColumn(80);
break;
case "free":
session.setUseWrapMode(true);
session.setWrapLimitRange(null, null);
renderer.setPrintMarginColumn(80);
break;
}
break;
case "useSoftTabs":
session.setUseSoftTabs(toBool(value));
break;
case "showPrintMargin":
renderer.setShowPrintMargin(toBool(value));
break
case "showInvisibles":
editor.setShowInvisibles(toBool(value));
break;
}
options[key] = value;
},
getOption: function(key) {
return options[key];
},
getOptions: function() {
return options;
}
}
for (var option in ace.options) {
ret.setOption(option, ace.options[option]);
}
return ret;
}
function setupSettingPanel(settingDiv, settingOpener, api, options) {
var BOOL = {
"true": true,
"false": false
}
var desc = {
mode: "Mode:",
gutter: "Display Gutter:",
theme: "Theme:",
fontSize: "Font Size:",
softWrap: "Soft Wrap:",
showPrintMargin: "Show Print Margin:",
useSoftTabs: "Use Soft Tabs:",
showInvisibles: "Show Invisibles"
}
var optionValues = {
mode: {
text: "Plain",
javascript: "JavaScript",
coffee: "CoffeeScript",
html: "HTML",
css: "CSS",
scss: "SCSS",
xml: "XML",
svg: "SVG",
c_cpp: "C++",
csharp: "C#",
java: "Java",
php: "PHP",
ruby: "Ruby",
perl: "Perl",
python: "Python",
clojure: "Clojure"
},
theme: {
textmate: "Textmate",
eclipse: "Eclipse",
clouds: "Clouds",
clouds_midnight: "Clouds Midnight",
cobalt: "Cobalt",
dawn: "Dawn",
idle_fingers: "Idle Fingers",
kr_theme: "Kr Theme",
mono_industrial: "Mono Industrial",
monokai: "Monokai",
pastel_on_dark: "Pastel On Dark",
twilight: "Twilight"
},
gutter: BOOL,
fontSize: {
"10px": "10px",
"11px": "11px",
"12px": "12px",
"14px": "14px",
"16px": "16px"
},
softWrap: {
off: "Off",
40: "40",
80: "80",
free: "Free"
},
showPrintMargin: BOOL,
useSoftTabs: BOOL,
showInvisibles: BOOL
}
var table = [];
table.push("<table><tr><th>Setting</th><th>Value</th></tr>");
function renderOption(builder, option, obj, cValue) {
builder.push("<select title='" + option + "'>")
for (var value in obj) {
builder.push("<option value='" + value + "' ");
if (cValue == value) {
builder.push(" selected ");
}
builder.push(">",
obj[value],
"</option>");
}
builder.push("</select>")
}
for (var option in options) {
table.push("<tr><td>", desc[option], "</td>");
table.push("<td>");
renderOption(table, option, optionValues[option], options[option]);
table.push("</td></tr>");
}
table.push("</table>");
settingDiv.innerHTML = table.join("");
var selects = settingDiv.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
var onChange = (function() {
var select = selects[i];
return function() {
var option = select.title;
var value = select.value;
api.setOption(option, value);
}
})();
selects[i].onchange = onChange;
}
var button = document.createElement("input");
button.type = "button";
button.value = "Hide";
button.onclick = function() {
api.setDisplaySettings(false);
}
settingDiv.appendChild(button);
settingOpener.onclick = function() {
api.setDisplaySettings(true);
}
}
// Default startup options.
window.__ace_shadowed__.options = {
mode: "text",
theme: "textmate",
gutter: "false",
fontSize: "12px",
softWrap: "off",
showPrintMargin: "false",
useSoftTabs: "true",
showInvisibles: "true"
}
})()
(function($, undefined) {
// require ace deps
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins([ "pilot/index" ]);
var Dom = require("pilot/dom");
var Event = require("pilot/event");
var Editor = require("ace/editor").Editor;
var EditSession = require("ace/edit_session").EditSession;
var UndoManager = require("ace/undomanager").UndoManager;
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
var Env = require("pilot/environment");
var MarkdownMode = require("ace/mode/markdown").Mode;
var canon = require("pilot/canon");
// ## editor
// this object is a plain js object, then passed in Object.create.
// Generally, these object follows a consistent pattern in that they should define
// an `options` property (a default hash option, mixed in with options provided at instantiation)
// and an `init(options, el)` method.
var editor = {
// ### default options
options: {},
// ### init(options, el)
init: function init(options, el) {
this.options = $.extend({}, this.options, options);
this.el = $(el);
this.dom = el;
// creepy, change this asap
this.form = this.el.find('form');
this.bodyField = this.el.find('textarea[name="post[body]"]');
this.commitField = this.el.find('input[name="post[commit]"]');
this.converter = new Showdown.converter();
this.pre = this.el.find('pre');
// wrap in the pre element with a relative div
this.wrapper = this.el.find('.nabe-editor-wrapper');
// dialog, append to document.body
this.dialog = $(this.el).nabeDialog()
// reference the dialog instance
.data('nabeDialog');
this.buildAce();
this.markdownMode();
this.keybind();
this.events();
return this;
},
// ### buildAce()
buildAce: function buildAce() {
var doc, editor, env, self = this,
target = this.pre[0];
// set up ace editor
this.doc = doc = new EditSession(Dom.getInnerText(target));
doc.setUndoManager(new UndoManager());
this.pre.html('');
// textmate theme by default
this.editor = editor = new Editor(new Renderer(target, "ace/theme/textmate"));
editor.setSession(doc);
env = Env.create();
catalog.startupPlugins({ env: env }).then(function() {
env.document = doc;
env.editor = editor;
editor.resize();
Event.addListener(window, "resize", function() {
editor.resize();
});
self.dom.env = env;
});
// Store env on editor such that it can be accessed later on from
// the returned object.
editor.env = env;
return this;
},
// ### markdownMode()
markdownMode: function markdownMode() {
var editorWrapper = $('#gollum-editor-body-wrapper');
//editor.setTheme("ace/theme/twilight");
this.doc.setMode(new MarkdownMode());
this.doc.setUseWrapMode(true);
this.doc.setWrapLimitRange(null, null);
this.editor.renderer.setPrintMarginColumn(400);
return this;
},
// ##keybind()
keybind: function() {
var self = this;
canon.addCommand({
name: 'fullsize',
bindKey: this.bindKey('Ctrl-M', 'Command-M'),
exec: function() {
var pos = self.wrapper.hasClass('relative');
self.wrapper[(pos ? 'remove' : 'add') + 'Class']('relative');
self.editor.blur();
self.editor.resize();
self.editor.focus();
}
});
canon.addCommand({
name: "preview",
bindKey: this.bindKey('Ctrl-P', 'Command-P'),
exec: function(env, args, request) {
self.previewHandler();
self.editor.blur();
}
});
canon.addCommand({
name: "save",
bindKey: this.bindKey('Ctrl-S', 'Command-S'),
exec: function(env, args, request) {
self.save();
self.editor.blur();
}
});
},
bindKey: function(win, mac) {
return {win: win, mac: mac, sender: 'editor'};
},
events: function() {
this.form.delegate('a.nabe-editor-preview', 'click', $.proxy(this.previewHandler, this));
this.form.delegate('select', 'change', $.proxy(this.themeHandler, this));
this.form.bind('submit', $.proxy(this.save, this));
return this;
},
submitHandler: function(message) {
var src = this.getSource();
this.bodyField.val(src);
this.commitField.val(message);
this.form.get(0).submit();
},
save: function(e) {
var self = this;
self.dialog.open({
title: 'Save file - commit message',
markup: '<form><input type="text" class="nabe-commit-msg" placeholder="Write a commit message here explaining this change. (Optional)" /><form>'
}).on('submitDialog', function(){
// creepy, change this asap
self.submitHandler($('.nabe-commit-msg').val());
});
return false;
},
// ### submitHandler()
previewHandler: function() {
var src = this.getSource(),
markup = this.converter.makeHtml(src);
this.dialog.open({
title: 'Preview',
markup: markup,
force: true
});
return false;
},
// ## changeHandler
themeHandler: function(e) {
this.editor.setTheme(e.target.value);
},
getSource: function() {
return this.editor.env.document.doc.$lines.join('\n');
}
};
// ## $().nabeEditor(options)
// bridge in the editor object and API to the DOM using this helper function
// It basically creates a new function on the jQuery prototype (a plugin) that
// iterates through the jQuery selection, instantiate a new editor for each one,
// pass in options provided and store this instance as $(el).data('nabeEditor');
$.fn.nabeEditor = function(options) {
// don't act on absent element
if(!this.length) {return this;}
// on each jq element
return this.each(function() {
// creates a new editor instance, using es5 sugar
var instance = Object.create(editor);
// Init the instance, `init` is just our constructor enhanced.
// init should follow the `.init(options, el)` pattern with options argument
// as an hash option.
instance.init(options, this);
// now provide a way to get this object from `$.data` and `$.fn.data`
$.data(this, 'nabeEditor', instance);
});
};
})(this.jQuery, this);
catalog.registerPlugins(plugins).then(function() {
var env = require("pilot/environment").create();
catalog.startupPlugins({ env: env }).then(function() {
require("demo/startup").launch(env);
});
});
if (window.document) {
require("pilot/fixoldbrowsers");
require("pilot/settings");
var Event = require("pilot/event");
var Dom = require("pilot/dom");
var EditSession = require("ace/edit_session").EditSession;
var JavaScriptMode = require("ace/mode/javascript").Mode;
var UndoManager = require("ace/undomanager").UndoManager;
var Editor = require("ace/editor").Editor;
var Renderer = require("ace/virtual_renderer").VirtualRenderer;
var Theme = require("ace/theme/textmate");
var catalog = require("pilot/plugin_manager").catalog;
catalog.registerPlugins([ "pilot/index" ]);
var ace = {
edit: function(el) {
if (typeof(el) == "string") {
el = document.getElementById(el);
}
var doc = new EditSession(Dom.getInnerText(el));
doc.setMode(new JavaScriptMode());
doc.setUndoManager(new UndoManager());
el.innerHTML = '';
var editor = new Editor(new Renderer(el, "ace/theme/textmate"));
editor.setSession(doc);