componentDidMount() {
let self = this;
self.htmlEditor = ace.edit('html-editor');
self.htmlEditor.setOptions(getEditorConfig('html'));
// convert event on change
self.htmlEditor.getSession().on('change', self.convertHtmlToJade);
self.jadeEditor = ace.edit('jade-editor');
self.jadeEditor.setOptions(getEditorConfig('jade'));
}
module.exports = function editor(elementId) {
var codeEditor,
ace = require('brace'),
marker = 0, session,
Range = ace.acequire('ace/range').Range;
require('brace/theme/monokai');
codeEditor = ace.edit(elementId);
codeEditor.setTheme('ace/theme/monokai');
codeEditor.setValue(["var arr <- [];",
"for(var i <- 0; i < 5; i++) {",
"\tarr.push(i);",
"}",
"print(arr);"].join('\n'));
codeEditor.clearSelection();
session = codeEditor.session;
return {
getContent: function () {
return session.getValue();
},
removeHighlight: function () {
if (marker !== undefined) {
session.removeMarker(marker);
}
},
setHighlight: function (fistLine, lastLine, firstColumn, lastColumn) {
var range = new Range(fistLine - 1, firstColumn - 1, lastLine - 1, lastColumn - 1);
marker = session.addMarker(range, "warning", null, true);
}
};
};
.forEach(element => {
element.innerHTML = fixIndentation(element.innerHTML)
const editor = ace.edit(element)
editor.setTheme('ace/theme/tomorrow_night')
// Disable annotations
editor
.getSession()
.setUseWorker(false)
if (element.dataset.lang) {
editor
.getSession()
.setMode('ace/mode/' + element.dataset.lang)
if (element.dataset.lang === 'html') {
editor.setReadOnly(true)
}
}
// TODO: Re-enable editing
editor.setReadOnly(true)
// if (!element.hasAttribute('readonly')) {
// editor.container.classList.add('editable')
// editor.getSession().on('change', event => {
//
// })
// }
editor.setOptions({minLines: 1, maxLines: 50})
})
export function createAceEditor(element) {
const editor = ACE.edit(element);
editor.$blockScrolling = Infinity;
inheritFontStylesFromParentElement(editor);
disableAutoClosing(editor);
return editor;
}
(() => {
'use strict';
const Chain = require('./chain.js');
const ace = require('brace');
require('brace/mode/javascript');
require('brace/theme/clouds_midnight');
const chain = new Chain();
const editor = ace.edit('chain-code');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/clouds_midnight');
const modes = ['#chain-canvas', '#chain-code'].map((a) => document.querySelector(a));
const changeMode = () => {
const hash = location.hash.slice(1);
if (hash === 'chain-canvas') {
chain.plugin = editor.getValue();
}
if (modes.map((mode) => mode.style.display = (mode.id === hash) ? '' : 'none').includes('')) {
return;
}
modes[0].style.display = '';
};
setTimeout(changeMode, 0);
window.addEventListener('hashchange', changeMode);
})();
ready: function () {
var vm = this;
var lang = this.lang||'text';
var theme = this.theme||'chrome';
if(!init){
vm.$dispatch('vue-ace-editor:init');
init = true;
}
require('brace/ext/emmet');
var editor = vm.editor = ace.edit(this.$el);
editor.$blockScrolling = Infinity;
editor.setOption("enableEmmet", true);
editor.getSession().setMode('ace/mode/'+lang);
editor.setTheme('ace/theme/'+theme);
editor.setValue(this.content,1);
editor.on('change',function () {
vm.content = editor.getValue();
vm.contentBackup = vm.content;
});
}
function createEditor(options) {
var mode = options && options.mode || "ace/mode/javascript",
el = options && options.el,
changeHandler = options && options.onchange,
changeDelay = options && options.changeDelay || 1000,
debounce;
if (!el) {
throw new Error("createEditor needs an element");
}
var editor = ace.edit(el);
editor.$blockScrolling = Infinity;
editor.getSession().setMode(mode);
editor.setTheme("ace/theme/monokai");
if (typeof changeHandler === "function") {
editor.on("change", function() {
if (debounce !== undefined) {
clearTimeout(debounce);
debounce = undefined;
}
debounce = setTimeout(changeHandler.bind(editor), changeDelay);
});
}
return editor;
}
componentDidUpdate: function(){
if (this.state.hidden == false && History.length() > 0){
if (typeof(this.editor) == 'undefined' || this.editor == null){
this.editor = Ace.edit("history_view");
this.editor.setOptions({
maxLines: 30,
showGutter: false,
highlightActiveLine: false,
readOnly: true,
});
this.editor.renderer.$cursorLayer.element.style.opacity=0;
this.editor.getSession().setMode('ace/mode/pgsql');
this.editor.setTheme('ace/theme/' + TabsStore.getEditorTheme());
}
var item = History.get(this.state.idx);
if (item != null){
this.editor.session.setValue(item.query, -1);
}
if (this.state.filter != ""){
this.editor.findAll(this.state.filter, {caseSensitive: false});
}
}
if (this.state.hidden == false){
var history_filter = ReactDOM.findDOMNode(this.refs.history_filter);
history_filter.focus();
} else {
$(".edit-area:visible").focus();
}
},
componentDidMount: function(){
TabsStore.bind('change-theme', this.changeThemeHandler);
if (this.scripts.length > 0){
this.editor = Ace.edit("script_"+this.props.eventKey);
this.editor.setOptions({
maxLines: 1000,
showGutter: false,
showPrintMargin: false,
highlightActiveLine: false,
readOnly: true,
});
this.editor.renderer.$cursorLayer.element.style.opacity=0;
this.editor.getSession().setMode('ace/mode/pgsql');
this.editor.setTheme('ace/theme/' + TabsStore.getEditorTheme());
var script = '';
for (var i=0; i<this.scripts.length; i++){
script += this.scripts[i];
script += ';\n---\n\n';
}
this.editor.session.setValue(script, -1);
}
},
.controller('Base', function($scope, $timeout, $rootScope, userService, documentsService) {
var updateDocument;
$scope.profile = userService.profile;
$rootScope.currentDocument = documentsService.getCurrentDocument();
$rootScope.editor = ace.edit('editor');
$rootScope.editor.getSession().setMode('ace/mode/markdown');
$rootScope.editor.setTheme('ace/theme/solarized_dark');
$rootScope.editor.getSession().setUseWrapMode(true);
$rootScope.editor.renderer.setShowGutter(false);
$rootScope.editor.setShowPrintMargin(false);
$rootScope.editor.getSession().setValue($rootScope.currentDocument.body);
$rootScope.editor.setOption('minLines', 50);
$rootScope.editor.setOption('maxLines', 90000);
updateDocument = function() {
$rootScope.currentDocument = documentsService.getCurrentDocument();
return $rootScope.editor.getSession().setValue($rootScope.currentDocument.body);
};
$scope.updateDocument = updateDocument;
$rootScope.$on('document.refresh', updateDocument);
});
function init (socket) {
var ace = require('brace')
require('brace/mode/javascript')
require('brace/theme/monokai')
var editor = ace.edit('editor')
editor.getSession().setMode('ace/mode/javascript')
editor.setTheme('ace/theme/monokai')
editor.clearSelection()
var ignore
var changed
var handleInput = throttle(function () {
if (changed) {
var editorValue = editor.getSession().getValue()
socket.emit('change', editorValue)
}
changed = false
}, 1500)
editor.on('input', handleInput)
editor.on('change', function () {
if (!ignore) changed = true
})
socket.on('change', function (value) {
ignore = true
editor.getSession().setValue(value)
ignore = false
})
}
function loadAceEditor(mode, readonly) {
const editor = ace.edit(angular.element.find('.ace-editor')[0]);
editor.session.setMode('ace/mode/' + mode);
editor.renderer.setShowPrintMargin(false);
editor.setReadOnly(readonly);
return editor;
}
var go = module.exports = function (md) {
var editor = ace.edit('editor');
editor.getSession().setMode('ace/mode/markdown');
editor.setTheme('ace/theme/monokai');
editor.setValue(md);
editor.clearSelection();
return editor;
};
return function(e) {
var editor = ace.edit([c.data.ItemId, c.data._TempId, "config"].join(""));
editor.getSession().setMode('ace/mode/toml');
// editor.setTheme('ace/theme/monokai');
editor.setValue(value());
editor.getSession().on('change', function() {
value(editor.getSession().getValue());
});
}
return function(e) {
var editor = ace.edit(config.id);
editor.getSession().setMode(config.mode); // 'ace/mode/html'
// editor.setTheme('ace/theme/monokai');
editor.setValue(config.value());
editor.getSession().on('change', function() {
config.value(editor.getSession().getValue());
});
editor.$blockScrolling = Infinity;
}
componentDidMount: function () {
var editor = ace.edit('editor');
this.editor = editor;
editor.getSession().setMode('ace/mode/json');
editor.setTheme('ace/theme/tomorrow_night');
// paste code in editor as JSON
editor.setValue(JSON.stringify(this.props.initialData, null, '\t'), -1);
this.initEvents(editor);
},
code$.take(1).subscribe(code => {
editor = ace.edit('editor-inner');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');
editor.getSession().setOptions({
tabSize: 2
});
editor.on('input', sendCodeToSource);
});
componentDidMount: function () {
this.editor = ace.edit(this.refs.ide.getDOMNode());
this.editor.setTheme('ace/theme/tomorrow');
this.editor.setReadOnly(this.props.disable);
var session = this.editor.getSession();
session.setMode('ace/mode/javascript');
session.setTabSize(2);
session.setUseSoftTabs(true);
session.on('change', this.onChange);
},
/**
* Binds the ace component to the editor div
*/
function initAce() {
// import ace, mode, and theme
const ace = require('brace');
require('brace/mode/javascript');
require('brace/theme/monokai');
// create the editor
editor = ace.edit('editor');
editor.getSession().setMode('ace/mode/javascript');
editor.setTheme('ace/theme/monokai');
}
afterRender: function() {
var view = this, promises = [];
// Setup editor for data field
this.editor = ace.edit('data');
this.editor.setShowPrintMargin(false);
this.editor.setTheme('ace/theme/textmate');
this.editor.setWrapBehavioursEnabled(true);
var session = this.editor.getSession();
session.setMode('ace/mode/json');
session.setUseWrapMode(true);
this.editor.renderer.setHScrollBarAlwaysVisible(false);
var editor_data = JSON.stringify(this.model.get('data'), null, ' ');
this.editor.setValue(editor_data ? editor_data : '{}', -1);
if(this.model.get('parent_data')){
this.readonlyEditor = ace.edit('readonly-data');
this.readonlyEditor.setShowPrintMargin(false);
this.readonlyEditor.setTheme('ace/theme/textmate');
this.readonlyEditor.setWrapBehavioursEnabled(true);
this.readonlyEditor.setReadOnly(true);
this.readonlyEditor.renderer.setHScrollBarAlwaysVisible(false);
this.readonlyEditor.setValue(JSON.stringify(this.model.get('parent_data'), null, ' '));
var readonlySession = this.readonlyEditor.getSession();
readonlySession.setMode('ace/mode/json');
readonlySession.setUseWrapMode(true);
}
// initialize color pickers
$('.colorpicker').spectrum({
showInput: true,
preferredFormat: 'hex'
});
this.listenForChanges();
},
var Editor = function(controller) {
this.controller_ = controller;
this.editor_ = ace.edit('editor');
// Editor config.
this.editor_.getSession().setMode('ace/mode/javascript');
this.editor_.setHighlightActiveLine(true);
this.editor_.getSession().setUseWrapMode(true);
this.editor_.getSession().setWrapLimitRange(0, 80);
this.editor_.setOption("showPrintMargin", false);
// Disables warning message.
this.editor_.$blockScrolling = Infinity;
this.initListeners_(1000);
};
ready: function() {
this.sessions = [];
this.$on('open-file', this.openFile);
this.$on('save-project-as', this.saveProjectAs);
this.$on('reformat', this.reformat);
this.$on('settings-changed', this.updateSettings);
this.ace = window.ace = ace.edit('editor');
this.ace.setTheme('ace/theme/tomorrow');
this.ace.setReadOnly(true);
this.customizeCommands();
},
_.each(arguments, function(el){
el.attr('class', '');
var id = el.attr('id'),
type = el.data('type'),
editor = ace.edit(id);
if (['javascript', 'json'].indexOf(type)>-1){
editor.setOptions({
maxLines: Infinity
});
editor.getSession().setMode('ace/mode/' + type);
}
editor.setTheme('ace/theme/monokai');
editor.setReadOnly(true);
});
_updateAce: function() {
var container = this.refs.editor.getDOMNode();
var editor = ace.edit(container);
var session = editor.getSession();
editor.setReadOnly(this.props.readOnly === true || this.props.disabled === true);
if(editor.getValue() !== this.state.value) {
// I THINK this always means the value got updated programmatically so we can safely update the editor's value
if(this.props.tail){
session.setValue(this.state.value, 1);
editor.scrollToRow(session.getLength() - 1)
} else {
session.setValue(this.state.value, -1);
}
}
},
setupEditor: function () {
var ace = require('brace');
require('brace/mode/json');
require('brace/theme/solarized_light');
var value = JSON.stringify(sorted_json(this.props.data), null, 4);
var editor = ace.edit(this.refs.editor.getDOMNode());
var session = editor.getSession();
session.setMode('ace/mode/json');
editor.setValue(value);
editor.setOptions({
maxLines: 1000,
minLines: 24
});
editor.clearSelection();
this.setState({editor: editor});
session.on("changeAnnotation", this.hasErrors);
},
this.converterWorker.addEventListener('message', (e) => {
this.setState({converting: false});
const response = e.data;
const rightEditor = ace.edit(App.rightEditorId);
rightEditor.setValue(response.result);
rightEditor.gotoLine(0);
if (response.error || response.message) {
this.setState({
errorMessage: response.message,
errorDetail: response.error,
showAlert: true
});
}
}, false);
var createEditor = function (id, mode, readOnly) {
var editor = ace.edit(id);
editor.setTheme(editorTheme);
editor.$blockScrolling = Infinity;
editor.getSession().setOptions({
mode: "ace/mode/" + mode,
tabSize: 2,
useSoftTabs: true
});
editor.setDisplayIndentGuides(true);
editor.setFontSize(17);
if (readOnly) editor.setReadOnly(readOnly);
return editor
};
loadTabs: function() {
this._loadSessions();
this.editor = ace.edit(this.$el.find("#editor")[0]);
if(!Object.keys(this.current_sessions).length) {
var n = this.newFile();
this.selectTab(n);
return
}
var selected = cache.get("selected_session");
_.each(this.current_sessions,_.bind(function(session) {
this.openTab(session["path"]);
},this));
this.$el.find(".tab").removeClass("selected");
this.selectTab(selected);
},
// Spell check the Ace editor contents.
function spell_check() {
// Wait for the dictionary to be loaded.
if (dictionary == null) {
return;
}
if (currently_spellchecking) {
return;
}
if (!contents_modified) {
return;
}
currently_spellchecking = true;
var session = ace.edit(editor).getSession();
// Clear the markers.
for (var i in markers_present) {
session.removeMarker(markers_present[i]);
}
markers_present = [];
try {
var lines = session.getDocument().getAllLines();
for (var i in lines) {
// Clear the gutter.
session.removeGutterDecoration(i, "misspelled");
// Check spelling of this line.
var misspellings = misspelled(lines[i]);
// Add markers and gutter markings.
if (misspellings.length > 0) {
session.addGutterDecoration(i, "misspelled");
}
for (var j in misspellings) {
var range = new Range(i, misspellings[j][0], i, misspellings[j][1]);
markers_present[markers_present.length] = session.addMarker(range, "misspelled", "typo", true);
}
}
} finally {
currently_spellchecking = false;
contents_modified = false;
}
}
} // end FUNCTION onRun()
/**
* FUNCTION: create( ctx, el )
* Creates a new JavaScript editor instance.
*
* @param {DOMElement} ctx - `this` context
* @param {DOMElement} el - DOM element in which to create the editor
* @returns {Editor} Editor instance
*/
function create( ctx, el ) {
var editor, session;
editor = ace.edit( el );
editor.setOptions({
'maxLines': 100
});
editor.setFontSize( 16 );
editor.setBehavioursEnabled( true );
editor.setHighlightActiveLine( true );
editor.setShowPrintMargin( false );
session = editor.getSession();
// TODO: mode should be dynamic.
if ( ctx.mode === 'markdown' ) {
session.setMode( 'ace/mode/text' );
} else {
session.setMode( 'ace/mode/'+ctx.mode );
}
// TODO: settings should be configurable.
session.setTabSize( 4 );
session.setUseSoftTabs( false );
session.setUseWrapMode( true );
// TODO: validate that this is what is wanted.
editor.setValue( ctx.body, 1 );
// TODO: shift-enter
// TODO: extract to separate file
// TODO: callbacks need to be carefully considered in terms of communicating back up to the `note` element.
editor.commands.addCommand({
'name': 'run',
'bindKey': {
'win': 'Ctrl-Enter',
'mac': 'Command-Enter'
},
'exec': onRun.bind( ctx )
});
return editor;
} // end FUNCTION create()