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

code editor ux improvements

Browse Source 
* Save and restore editor selection(s), cursor(s), scroll pos etc
* Improve focusing of editor at appropriate times
* Works with both ace and monaco
* Backwards compatible and (almost) fully functional with existing nodes
This commit is contained in:
Steve-Mcl
2022-04-27 11:23:13 +01:00
parent d802ce1484
commit 194eb4e266
16 changed files with 322 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/node_modules/@node-red/nodes/core/function/10-function.html vendored
View File

@@ -399,11 +399,19 @@
$("#func-tabs-content").children().hide();
$("#" + tab.id).show();
let editor = $("#" + tab.id).find('.monaco-editor').first();
if(editor.length) {
if(editor.length) {
if(that.editor.nodered && that.editor.type == "monaco") {
that.editor.nodered.refreshModuleLibs(getLibsList());
}
RED.tray.resize();
//auto focus editor on tab switch
if (that.initEditor.getDomNode() == editor[0]) {
that.initEditor.focus();
} else if (that.editor.getDomNode() == editor[0]) {
that.editor.focus();
} else if (that.finalizeEditor.getDomNode() == editor[0]) {
that.finalizeEditor.focus();
}
}
}
});
@@ -438,11 +446,13 @@
}
});
var buildEditor = function(id, value, defaultValue, extraLibs) {
var buildEditor = function(id, stateId, focus, value, defaultValue, extraLibs) {
var editor = RED.editor.createEditor({
id: id,
mode: 'ace/mode/nrjavascript',
value: value || defaultValue || "",
stateId: stateId,
focus: true,
globals: {
msg:true,
context:true,
@@ -462,11 +472,12 @@
if (defaultValue && value === "") {
editor.moveCursorTo(defaultValue.split("\n").length - 1, 0);
}
editor.__stateId = stateId;
return editor;
}
this.initEditor = buildEditor('node-input-init-editor',$("#node-input-initialize").val(),RED._("node-red:function.text.initialize"))
this.editor = buildEditor('node-input-func-editor',$("#node-input-func").val(), undefined, that.libs || [])
this.finalizeEditor = buildEditor('node-input-finalize-editor',$("#node-input-finalize").val(),RED._("node-red:function.text.finalize"))
this.initEditor = buildEditor('node-input-init-editor', this.id + "/" + "initEditor", false, $("#node-input-initialize").val(), RED._("node-red:function.text.initialize"))
this.editor = buildEditor('node-input-func-editor', this.id + "/" + "editor", true, $("#node-input-func").val(), undefined, that.libs || [])
this.finalizeEditor = buildEditor('node-input-finalize-editor', this.id + "/" + "finalizeEditor", false, $("#node-input-finalize").val(), RED._("node-red:function.text.finalize"))
RED.library.create({
url:"functions", // where to get the data from
@@ -505,28 +516,33 @@
],
ext:"js"
});
this.editor.focus();
var expandButtonClickHandler = function(editor) {
return function(e) {
return function (e) {
e.preventDefault();
var value = editor.getValue();
editor.saveView(`inside function-expandButtonClickHandler ${editor.__stateId}`);
var extraLibs = that.libs || [];
RED.editor.editJavaScript({
value: value,
width: "Infinity",
cursor: editor.getCursorPosition(),
stateId: editor.__stateId,
mode: "ace/mode/nrjavascript",
complete: function(v,cursor) {
editor.setValue(v, -1);
editor.gotoLine(cursor.row+1,cursor.column,false);
setTimeout(function() {
focus: true,
cancel: function () {
setTimeout(function () {
editor.focus();
},300);
}, 250);
},
complete: function (v, cursor) {
editor.setValue(v, -1);
setTimeout(function () {
editor.restoreView();
editor.focus();
}, 250);
},
extraLibs: extraLibs
})
});
}
}
$("#node-init-expand-js").on("click", expandButtonClickHandler(this.initEditor));

24
packages/node_modules/@node-red/nodes/core/function/80-template.html vendored
View File

@@ -18,7 +18,7 @@
<option value="handlebars">mustache</option>
<option value="html">HTML</option>
<option value="json">JSON</option>
<option value="javascript">Javascript</option>
<option value="javascript">JavaScript</option>
<option value="css">CSS</option>
<option value="markdown">Markdown</option>
<option value="python">Python</option>
@@ -73,7 +73,8 @@
return this.name?"node_label_italic":"";
},
oneditprepare: function() {
var that = this;
const that = this;
const stateId = RED.editor.generateViewStateId("node", this, "");
if (!this.field) {
this.field = 'payload';
$("#node-input-field").val("payload");
@@ -90,10 +91,10 @@
types: ['msg','flow','global'],
typeField: $("#node-input-fieldType")
});
this.editor = RED.editor.createEditor({
id: 'node-input-template-editor',
mode: 'ace/mode/html',
stateId: stateId,
value: $("#node-input-template").val()
});
RED.library.create({
@@ -103,7 +104,6 @@
fields:['name','format','output','syntax'],
ext: "txt"
});
this.editor.focus();
$("#node-input-format").on("change", function() {
var mod = "ace/mode/"+$("#node-input-format").val();
@@ -113,20 +113,22 @@
});
});
RED.popover.tooltip($("#node-template-expand-editor"), RED._("node-red:common.label.expand"));
$("#node-template-expand-editor").on("click", function(e) {
$("#node-template-expand-editor").on("click", function (e) {
e.preventDefault();
var value = that.editor.getValue();
const value = that.editor.getValue();
that.editor.saveView();
RED.editor.editText({
mode: $("#node-input-format").val(),
value: value,
stateId: stateId,
width: "Infinity",
cursor: that.editor.getCursorPosition(),
complete: function(v,cursor) {
focus: true,
complete: function (v, cursor) {
that.editor.setValue(v, -1);
that.editor.gotoLine(cursor.row+1,cursor.column,false);
setTimeout(function() {
setTimeout(function () {
that.editor.restoreView();
that.editor.focus();
},300);
}, 250);
}
})
})