Skip to content

Commit bf1cd45

Browse files
knollearyknolleary
committed
Add RED.editor.createEditor utility function
1 parent 8af50a5 commit bf1cd45

8 files changed

Lines changed: 84 additions & 63 deletions

File tree

‎nodes/core/core/80-function.html‎

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -100,32 +100,23 @@
100100
$( "#dialog" ).off("dialogresize",functionDialogResize);
101101
});
102102

103-
ace.require("ace/ext/language_tools");
104-
that.editor = ace.edit('node-input-func-editor');
105-
that.editor.setText = that.editor.setValue; // alias to make library work :-)
106-
that.editor.getText = that.editor.getValue; // alias to make library work
107-
//that.editor.setTheme("ace/theme/solarized_light");
108-
//that.editor.setTheme("ace/theme/crimson_editor");
109-
//that.editor.setTheme("ace/theme/chrome");
110-
that.editor.setTheme("ace/theme/tomorrow");
111-
that.editor.getSession().setMode("ace/mode/javascript");
112-
that.editor.getSession().setFoldStyle("markbeginend");
113-
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
114-
that.editor.$blockScrolling = Infinity;
115-
that.editor.setValue($("#node-input-func").val());
116-
that.editor.gotoLine(1,1);
117-
document.getElementById('node-input-func-editor').style.fontSize='17px';
103+
this.editor = RED.editor.createEditor({
104+
id: 'node-input-func-editor',
105+
mode: 'ace/mode/javascript'
106+
});
107+
this.editor.setValue($("#node-input-func").val(),-1);
108+
118109
RED.library.create({
119110
url:"functions", // where to get the data from
120111
type:"function", // the type of object the library is for
121-
editor:that.editor, // the field name the main text body goes to
112+
editor:this.editor, // the field name the main text body goes to
113+
mode:"ace/mode/javascript",
122114
fields:['name','outputs']
123115
});
124-
$("#node-input-name").focus();
116+
this.editor.focus();
125117
},
126118
oneditsave: function() {
127119
var annot = this.editor.getSession().getAnnotations();
128-
console.log(this);
129120
this.valid = true;
130121
for (var k=0; k < annot.length; k++) {
131122
//console.log(annot[k].type,":",annot[k].text, "on line", annot[k].row);

‎nodes/core/core/80-template.html‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<div class="form-row" style="margin-bottom: 0px;">
2323
<label for="node-input-template"><i class="fa fa-file-code-o"></i> Template</label>
2424
<input type="hidden" id="node-input-template" autofocus="autofocus">
25-
<select id="node-input-mark" style="width:110px; float:right;">
25+
<select id="node-input-format" style=" font-size: 0.8em; margin-bottom: 3px; width:110px; float:right;">
2626
<option value="handlebars">mustache</option>
2727
<option value="html">HTML</option>
2828
<option value="json">JSON</option>
@@ -61,7 +61,7 @@
6161
defaults: {
6262
name: {value:""},
6363
field: {value:"payload"},
64-
mark: {value:"handlebars"},
64+
format: {value:"handlebars"},
6565
template: {value:"This is the payload: {{payload}} !"},
6666
},
6767
inputs:1,
@@ -96,30 +96,21 @@
9696
var height = $( "#dialog" ).dialog('option','height');
9797
$( "#dialog" ).off("dialogresize",templateDialogResize);
9898
});
99-
ace.require("ace/ext/language_tools");
100-
that.editor = ace.edit('node-input-template-editor');
101-
that.editor.setText = that.editor.setValue; // alias to make library work :-)
102-
that.editor.getText = that.editor.getValue; // alias to make library work
103-
//that.editor.setTheme("ace/theme/solarized_light");
104-
//that.editor.setTheme("ace/theme/crimson_editor");
105-
//that.editor.setTheme("ace/theme/chrome");
106-
that.editor.setTheme("ace/theme/tomorrow");
107-
that.editor.getSession().setMode("ace/mode/html");
108-
that.editor.getSession().setFoldStyle("markbeginend");
109-
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
110-
that.editor.$blockScrolling = Infinity;
111-
that.editor.setValue($("#node-input-template").val());
112-
that.editor.gotoLine(1);
113-
document.getElementById('node-input-template-editor').style.fontSize='17px';
99+
this.editor = RED.editor.createEditor({
100+
id: 'node-input-template-editor',
101+
mode: 'ace/mode/html'
102+
});
103+
this.editor.setValue($("#node-input-template").val(),-1);
114104
RED.library.create({
115105
url:"functions", // where to get the data from
116106
type:"function", // the type of object the library is for
117107
editor:that.editor, // the field name the main text body goes to
118108
fields:['name','outputs']
119109
});
120-
$("#node-input-name").focus();
121-
$("#node-input-mark").change(function() {
122-
var mod = "ace/mode/"+$("#node-input-mark").val();
110+
this.editor.focus();
111+
112+
$("#node-input-format").change(function() {
113+
var mod = "ace/mode/"+$("#node-input-format").val();
123114
that.editor.getSession().setMode({
124115
path: mod,
125116
v: Date.now()

‎nodes/core/core/90-comment.html‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -84,16 +84,12 @@
8484
var height = $( "#dialog" ).dialog('option','height');
8585
$( "#dialog" ).off("dialogresize",functionDialogResize);
8686
});
87-
ace.require("ace/ext/language_tools");
88-
that.editor = ace.edit('node-input-info-editor');
89-
that.editor.setTheme("ace/theme/chrome");
90-
that.editor.getSession().setMode("ace/mode/markdown");
91-
that.editor.getSession().setFoldStyle("markbeginend");
92-
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
93-
that.editor.$blockScrolling = Infinity;
94-
that.editor.setValue($("#node-input-info").val());
95-
that.editor.gotoLine(1);
96-
document.getElementById('node-input-info-editor').style.fontSize='17px';
87+
this.editor = RED.editor.createEditor({
88+
id: 'node-input-info-editor',
89+
mode: 'ace/mode/markdown'
90+
});
91+
this.editor.setValue($("#node-input-info").val(),-1);
92+
this.editor.focus();
9793
},
9894
oneditsave: function() {
9995
$("#node-input-info").val(this.editor.getValue());

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="mobile-web-app-capable" content="yes">
77

88
<!--
9-
Copyright 2013, 2014 IBM Corp.
9+
Copyright 2013, 2015 IBM Corp.
1010
1111
Licensed under the Apache License, Version 2.0 (the "License");
1212
you may not use this file except in compliance with the License.

‎public/red/main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,8 @@ var RED = (function() {
369369
document.title = "Node-RED : "+window.location.hostname;
370370
}
371371

372+
ace.require("ace/ext/language_tools");
373+
372374
RED.settings.init(loadEditor);
373375
});
374376

‎public/red/ui/editor.js‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright 2013, 2014 IBM Corp.
2+
* Copyright 2013, 2015 IBM Corp.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -805,6 +805,29 @@ RED.editor = (function() {
805805
editConfig: showEditConfigNodeDialog,
806806
editSubflow: showEditSubflowDialog,
807807
validateNode: validateNode,
808-
updateNodeProperties: updateNodeProperties // TODO: only exposed for edit-undo
808+
updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo
809+
810+
createEditor: function(options) {
811+
var editor = ace.edit(options.id);
812+
editor.setTheme("ace/theme/tomorrow");
813+
if (options.mode) {
814+
editor.getSession().setMode(options.mode);
815+
}
816+
if (options.foldStyle) {
817+
editor.getSession().setFoldStyle(options.foldStyle);
818+
} else {
819+
editor.getSession().setFoldStyle('markbeginend');
820+
}
821+
if (options.options) {
822+
editor.setOptions(options.options);
823+
} else {
824+
editor.setOptions({
825+
enableBasicAutocompletion:true,
826+
enableSnippets:true
827+
});
828+
}
829+
editor.$blockScrolling = Infinity;
830+
return editor;
831+
}
809832
}
810833
})();

‎public/red/ui/library.js‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Copyright 2013 IBM Corp.
2+
* Copyright 2013, 2015 IBM Corp.
33
*
44
* Licensed under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License.
@@ -72,6 +72,19 @@ RED.library = (function() {
7272
var selectedLibraryItem = null;
7373
var libraryEditor = null;
7474

75+
// Orion editor has set/getText
76+
// ACE editor has set/getValue
77+
// normalise to set/getValue
78+
if (options.editor.setText) {
79+
// Orion doesn't like having pos passed in, so proxy the call to drop it
80+
options.editor.setValue = function(text,pos) {
81+
options.editor.setText.call(options.editor,text);
82+
}
83+
}
84+
if (options.editor.getText) {
85+
options.editor.getValue = options.editor.getText;
86+
}
87+
7588
function buildFileListItem(item) {
7689
var li = document.createElement("li");
7790
li.onmouseover = function(e) { $(this).addClass("list-hover"); };
@@ -119,7 +132,7 @@ RED.library = (function() {
119132
$(this).addClass("list-selected");
120133
$.get("library/"+options.url+root+item.fn, function(data) {
121134
selectedLibraryItem = item;
122-
libraryEditor.setText(data);
135+
libraryEditor.setValue(data,-1);
123136
});
124137
}
125138
})();
@@ -144,7 +157,7 @@ RED.library = (function() {
144157
$("#node-select-library").children().remove();
145158
var bc = $("#node-dialog-library-breadcrumbs");
146159
bc.children().first().nextAll().remove();
147-
libraryEditor.setText('');
160+
libraryEditor.setValue('',-1);
148161

149162
$.getJSON("library/"+options.url,function(data) {
150163
$("#node-select-library").append(buildFileList("/",data));
@@ -205,14 +218,18 @@ RED.library = (function() {
205218
e.preventDefault();
206219
});
207220

208-
require(["orion/editor/edit"], function(edit) {
209-
libraryEditor = edit({
210-
parent:document.getElementById('node-select-library-text'),
211-
lang:"js",
212-
readonly: true
213-
});
221+
libraryEditor = ace.edit('node-select-library-text');
222+
libraryEditor.setTheme("ace/theme/tomorrow");
223+
if (options.mode) {
224+
libraryEditor.getSession().setMode(options.mode);
225+
}
226+
libraryEditor.setOptions({
227+
readOnly: true,
228+
highlightActiveLine: false,
229+
highlightGutterLine: false
214230
});
215-
231+
libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
232+
libraryEditor.$blockScrolling = Infinity;
216233

217234
$( "#node-dialog-library-lookup" ).dialog({
218235
title: options.type+" library",
@@ -229,7 +246,7 @@ RED.library = (function() {
229246
var field = options.fields[i];
230247
$("#node-input-"+field).val(selectedLibraryItem[field]);
231248
}
232-
options.editor.setText(libraryEditor.getText());
249+
options.editor.setValue(libraryEditor.getValue(),-1);
233250
}
234251
$( this ).dialog( "close" );
235252
}
@@ -304,7 +321,7 @@ RED.library = (function() {
304321
}
305322
}
306323

307-
data.text = options.editor.getText();
324+
data.text = options.editor.getValue();
308325
$.ajax({
309326
url:"library/"+options.url+'/'+fullpath,
310327
type: "POST",

‎public/style.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -965,6 +965,7 @@ div.node-info {
965965
border:1px solid #ccc;
966966
border-radius:5px;
967967
overflow: hidden;
968+
font-size: 16px !important;
968969
}
969970
#workspace-tabs {
970971
margin-right: 28px;

0 commit comments

Comments
 (0)