frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add RED.editor.createEditor utility function

Browse Source
This commit is contained in:
Nick O'Leary
2015-02-26 21:29:56 +00:00
parent 8af50a51ba
commit bf1cd457cd
8 changed files with 84 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nodes/core/core/80-function.html
View File

@@ -100,32 +100,23 @@
$( "#dialog" ).off("dialogresize",functionDialogResize);
});
ace.require("ace/ext/language_tools");
that.editor = ace.edit('node-input-func-editor');
that.editor.setText = that.editor.setValue; // alias to make library work :-)
that.editor.getText = that.editor.getValue; // alias to make library work
//that.editor.setTheme("ace/theme/solarized_light");
//that.editor.setTheme("ace/theme/crimson_editor");
//that.editor.setTheme("ace/theme/chrome");
that.editor.setTheme("ace/theme/tomorrow");
that.editor.getSession().setMode("ace/mode/javascript");
that.editor.getSession().setFoldStyle("markbeginend");
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
that.editor.$blockScrolling = Infinity;
that.editor.setValue($("#node-input-func").val());
that.editor.gotoLine(1,1);
document.getElementById('node-input-func-editor').style.fontSize='17px';
this.editor = RED.editor.createEditor({
id: 'node-input-func-editor',
mode: 'ace/mode/javascript'
});
this.editor.setValue($("#node-input-func").val(),-1);
RED.library.create({
url:"functions", // where to get the data from
type:"function", // the type of object the library is for
editor:that.editor, // the field name the main text body goes to
editor:this.editor, // the field name the main text body goes to
mode:"ace/mode/javascript",
fields:['name','outputs']
});
$("#node-input-name").focus();
this.editor.focus();
},
oneditsave: function() {
var annot = this.editor.getSession().getAnnotations();
console.log(this);
this.valid = true;
for (var k=0; k < annot.length; k++) {
//console.log(annot[k].type,":",annot[k].text, "on line", annot[k].row);

31
nodes/core/core/80-template.html
View File

@@ -22,7 +22,7 @@
<div class="form-row" style="margin-bottom: 0px;">
<label for="node-input-template"><i class="fa fa-file-code-o"></i> Template</label>
<input type="hidden" id="node-input-template" autofocus="autofocus">
<select id="node-input-mark" style="width:110px; float:right;">
<select id="node-input-format" style=" font-size: 0.8em; margin-bottom: 3px; width:110px; float:right;">
<option value="handlebars">mustache</option>
<option value="html">HTML</option>
<option value="json">JSON</option>
@@ -61,7 +61,7 @@
defaults: {
name: {value:""},
field: {value:"payload"},
mark: {value:"handlebars"},
format: {value:"handlebars"},
template: {value:"This is the payload: {{payload}} !"},
},
inputs:1,
@@ -96,30 +96,21 @@
var height = $( "#dialog" ).dialog('option','height');
$( "#dialog" ).off("dialogresize",templateDialogResize);
});
ace.require("ace/ext/language_tools");
that.editor = ace.edit('node-input-template-editor');
that.editor.setText = that.editor.setValue; // alias to make library work :-)
that.editor.getText = that.editor.getValue; // alias to make library work
//that.editor.setTheme("ace/theme/solarized_light");
//that.editor.setTheme("ace/theme/crimson_editor");
//that.editor.setTheme("ace/theme/chrome");
that.editor.setTheme("ace/theme/tomorrow");
that.editor.getSession().setMode("ace/mode/html");
that.editor.getSession().setFoldStyle("markbeginend");
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
that.editor.$blockScrolling = Infinity;
that.editor.setValue($("#node-input-template").val());
that.editor.gotoLine(1);
document.getElementById('node-input-template-editor').style.fontSize='17px';
this.editor = RED.editor.createEditor({
id: 'node-input-template-editor',
mode: 'ace/mode/html'
});
this.editor.setValue($("#node-input-template").val(),-1);
RED.library.create({
url:"functions", // where to get the data from
type:"function", // the type of object the library is for
editor:that.editor, // the field name the main text body goes to
fields:['name','outputs']
});
$("#node-input-name").focus();
$("#node-input-mark").change(function() {
var mod = "ace/mode/"+$("#node-input-mark").val();
this.editor.focus();
$("#node-input-format").change(function() {
var mod = "ace/mode/"+$("#node-input-format").val();
that.editor.getSession().setMode({
path: mod,
v: Date.now()

16
nodes/core/core/90-comment.html
View File

@@ -84,16 +84,12 @@
var height = $( "#dialog" ).dialog('option','height');
$( "#dialog" ).off("dialogresize",functionDialogResize);
});
ace.require("ace/ext/language_tools");
that.editor = ace.edit('node-input-info-editor');
that.editor.setTheme("ace/theme/chrome");
that.editor.getSession().setMode("ace/mode/markdown");
that.editor.getSession().setFoldStyle("markbeginend");
that.editor.setOptions({enableBasicAutocompletion:true, enableSnippets:true});
that.editor.$blockScrolling = Infinity;
that.editor.setValue($("#node-input-info").val());
that.editor.gotoLine(1);
document.getElementById('node-input-info-editor').style.fontSize='17px';
this.editor = RED.editor.createEditor({
id: 'node-input-info-editor',
mode: 'ace/mode/markdown'
});
this.editor.setValue($("#node-input-info").val(),-1);
this.editor.focus();
},
oneditsave: function() {
$("#node-input-info").val(this.editor.getValue());

2
public/index.html
View File

@@ -6,7 +6,7 @@
<meta name="mobile-web-app-capable" content="yes">
<!--
Copyright 2013, 2014 IBM Corp.
Copyright 2013, 2015 IBM Corp.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.

2
public/red/main.js
View File

@@ -369,6 +369,8 @@ var RED = (function() {
document.title = "Node-RED : "+window.location.hostname;
}
ace.require("ace/ext/language_tools");
RED.settings.init(loadEditor);
});

27
public/red/ui/editor.js
View File

@@ -1,5 +1,5 @@
/**
* Copyright 2013, 2014 IBM Corp.
* Copyright 2013, 2015 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -805,6 +805,29 @@ RED.editor = (function() {
editConfig: showEditConfigNodeDialog,
editSubflow: showEditSubflowDialog,
validateNode: validateNode,
updateNodeProperties: updateNodeProperties // TODO: only exposed for edit-undo
updateNodeProperties: updateNodeProperties, // TODO: only exposed for edit-undo
createEditor: function(options) {
var editor = ace.edit(options.id);
editor.setTheme("ace/theme/tomorrow");
if (options.mode) {
editor.getSession().setMode(options.mode);
}
if (options.foldStyle) {
editor.getSession().setFoldStyle(options.foldStyle);
} else {
editor.getSession().setFoldStyle('markbeginend');
}
if (options.options) {
editor.setOptions(options.options);
} else {
editor.setOptions({
enableBasicAutocompletion:true,
enableSnippets:true
});
}
editor.$blockScrolling = Infinity;
return editor;
}
}
})();

41
public/red/ui/library.js
View File

@@ -1,5 +1,5 @@
/**
* Copyright 2013 IBM Corp.
* Copyright 2013, 2015 IBM Corp.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
@@ -72,6 +72,19 @@ RED.library = (function() {
var selectedLibraryItem = null;
var libraryEditor = null;
// Orion editor has set/getText
// ACE editor has set/getValue
// normalise to set/getValue
if (options.editor.setText) {
// Orion doesn't like having pos passed in, so proxy the call to drop it
options.editor.setValue = function(text,pos) {
options.editor.setText.call(options.editor,text);
}
}
if (options.editor.getText) {
options.editor.getValue = options.editor.getText;
}
function buildFileListItem(item) {
var li = document.createElement("li");
li.onmouseover = function(e) { $(this).addClass("list-hover"); };
@@ -119,7 +132,7 @@ RED.library = (function() {
$(this).addClass("list-selected");
$.get("library/"+options.url+root+item.fn, function(data) {
selectedLibraryItem = item;
libraryEditor.setText(data);
libraryEditor.setValue(data,-1);
});
}
})();
@@ -144,7 +157,7 @@ RED.library = (function() {
$("#node-select-library").children().remove();
var bc = $("#node-dialog-library-breadcrumbs");
bc.children().first().nextAll().remove();
libraryEditor.setText('');
libraryEditor.setValue('',-1);
$.getJSON("library/"+options.url,function(data) {
$("#node-select-library").append(buildFileList("/",data));
@@ -205,14 +218,18 @@ RED.library = (function() {
e.preventDefault();
});
require(["orion/editor/edit"], function(edit) {
libraryEditor = edit({
parent:document.getElementById('node-select-library-text'),
lang:"js",
readonly: true
});
libraryEditor = ace.edit('node-select-library-text');
libraryEditor.setTheme("ace/theme/tomorrow");
if (options.mode) {
libraryEditor.getSession().setMode(options.mode);
}
libraryEditor.setOptions({
readOnly: true,
highlightActiveLine: false,
highlightGutterLine: false
});
libraryEditor.renderer.$cursorLayer.element.style.opacity=0;
libraryEditor.$blockScrolling = Infinity;
$( "#node-dialog-library-lookup" ).dialog({
title: options.type+" library",
@@ -229,7 +246,7 @@ RED.library = (function() {
var field = options.fields[i];
$("#node-input-"+field).val(selectedLibraryItem[field]);
}
options.editor.setText(libraryEditor.getText());
options.editor.setValue(libraryEditor.getValue(),-1);
}
$( this ).dialog( "close" );
}
@@ -304,7 +321,7 @@ RED.library = (function() {
}
}
data.text = options.editor.getText();
data.text = options.editor.getValue();
$.ajax({
url:"library/"+options.url+'/'+fullpath,
type: "POST",

1
public/style.css
View File

@@ -965,6 +965,7 @@ div.node-info {
border:1px solid #ccc;
border-radius:5px;
overflow: hidden;
font-size: 16px !important;
}
#workspace-tabs {
margin-right: 28px;