Reduce duplicated code in Function node html

packages/node_modules/@node-red/editor-client/src/js/ui/editors/js.js

@@ -87,6 +87,9 @@
                         expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
                     }
                     dialogForm.i18n();
+                    setTimeout(function() {
+                        expressionEditor.focus();
+                    },300);
                 },
                 close: function() {
                     expressionEditor.destroy();

packages/node_modules/@node-red/nodes/core/function/10-function.html

@@ -109,7 +109,12 @@
                 }
             });
 
-            var globals = {
+            var buildEditor = function(id, value, defaultValue) {
+                var editor = RED.editor.createEditor({
+                    id: id,
+                    mode: 'ace/mode/nrjavascript',
+                    value: value || defaultValue || "",
+                    globals: {
                         msg:true,
                         context:true,
                         RED: true,
@@ -122,40 +127,16 @@
                         clearTimeout: true,
                         setInterval: true,
                         clearInterval: true
-            };
-            this.editor = RED.editor.createEditor({
-                id: 'node-input-func-editor',
-                mode: 'ace/mode/nrjavascript',
-                value: $("#node-input-func").val(),
-                globals: globals
-            });
-            var initCode = $("#node-input-initialize").val();
-            var initText = RED._("node-red:function.text.initialize");
-            var isEmptyInitCode = (initCode === "");
-            this.initEditor = RED.editor.createEditor({
-                id: 'node-input-init-editor',
-                mode: 'ace/mode/nrjavascript',
-                value: (isEmptyInitCode ? initText : initCode),
-                globals: globals
-            });
-            if (isEmptyInitCode) {
-                var count = initText.split("\n").length;
-                this.initEditor.moveCursorTo(count -1, 0);
                     }
-
-            var finalCode = $("#node-input-finalize").val();
-            var finalText = RED._("node-red:function.text.finalize");
-            var isEmptyFinalCode = (finalCode === "");
-            this.finalizeEditor = RED.editor.createEditor({
-                id: 'node-input-finalize-editor',
-                mode: 'ace/mode/nrjavascript',
-                value: (isEmptyFinalCode ? finalText : finalCode),
-                globals: globals
                 });
-            if (isEmptyFinalCode) {
+                if (defaultValue && value === "") {
-                var count = finalText.split("\n").length;
+                    editor.moveCursorTo(defaultValue.split("\n").length - 1, 0);
-                this.finalizeEditor.moveCursorTo(count -1, 0);
                 }
+                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())
+            this.finalizeEditor = buildEditor('node-input-finalize-editor',$("#node-input-finalize").val(),RED._("node-red:function.text.finalize"))
 
             RED.library.create({
                 url:"functions", // where to get the data from
@@ -170,7 +151,7 @@
                             return that.initEditor.getValue();
                         },
                         set: function(v) {
-                            that.initEditor.setValue(v, -1);
+                            that.initEditor.setValue(v||RED._("node-red:function.text.initialize"), -1);
                         }
                     },
                     {
@@ -179,7 +160,7 @@
                             return that.finalizeEditor.getValue();
                         },
                         set: function(v) {
-                            that.finalizeEditor.setValue(v, -1);
+                            that.finalizeEditor.setValue(v||RED._("node-red:function.text.finalize"), -1);
                         }
                     }
                 ],
@@ -187,113 +168,65 @@
             });
             this.editor.focus();
 
+
+            var expandButtonClickHandler = function(editor) {
+                return function(e) {
+                    e.preventDefault();
+                    var value = editor.getValue();
+                    RED.editor.editJavaScript({
+                        value: value,
+                        width: "Infinity",
+                        cursor: editor.getCursorPosition(),
+                        mode: "ace/mode/nrjavascript",
+                        complete: function(v,cursor) {
+                            editor.setValue(v, -1);
+                            editor.gotoLine(cursor.row+1,cursor.column,false);
+                            setTimeout(function() {
+                                editor.focus();
+                            },300);
+                        }
+                    })
+                }
+            }
+            $("#node-init-expand-js").on("click", expandButtonClickHandler(this.initEditor));
+            $("#node-function-expand-js").on("click", expandButtonClickHandler(this.editor));
+            $("#node-finalize-expand-js").on("click", expandButtonClickHandler(this.finalizeEditor));
+
+            RED.popover.tooltip($("#node-init-expand-js"), RED._("node-red:common.label.expand"));
             RED.popover.tooltip($("#node-function-expand-js"), RED._("node-red:common.label.expand"));
+            RED.popover.tooltip($("#node-finalize-expand-js"), RED._("node-red:common.label.expand"));
 
-            $("#node-function-expand-js").on("click", function(e) {
-                e.preventDefault();
-                var value = that.editor.getValue();
-                RED.editor.editJavaScript({
-                    value: value,
-                    width: "Infinity",
-                    cursor: that.editor.getCursorPosition(),
-                    mode: "ace/mode/nrjavascript",
-                    complete: function(v,cursor) {
-                        that.editor.setValue(v, -1);
-                        that.editor.gotoLine(cursor.row+1,cursor.column,false);
-                        setTimeout(function() {
-                            that.editor.focus();
-                        },300);
-                    }
-                })
-            });
-
-            $("#node-init-expand-js").on("click", function(e) {
-                e.preventDefault();
-                var editor = that.initEditor;
-                var value = editor.getValue();
-                RED.editor.editJavaScript({
-                    value: value,
-                    width: "Infinity",
-                    cursor: editor.getCursorPosition(),
-                    mode: "ace/mode/nrjavascript",
-                    complete: function(v,cursor) {
-                        editor.setValue(v, -1);
-                        editor.gotoLine(cursor.row+1,cursor.column,false);
-                        setTimeout(function() {
-                            editor.focus();
-                        },300);
-                    }
-                })
-            });
-
-            $("#node-finalize-expand-js").on("click", function(e) {
-                e.preventDefault();
-                var editor = that.finalizeEditor;
-                var value = editor.getValue();
-                RED.editor.editJavaScript({
-                    value: value,
-                    width: "Infinity",
-                    cursor: editor.getCursorPosition(),
-                    mode: "ace/mode/nrjavascript",
-                    complete: function(v,cursor) {
-                        editor.setValue(v, -1);
-                        editor.gotoLine(cursor.row+1,cursor.column,false);
-                        setTimeout(function() {
-                            editor.focus();
-                        },300);
-                    }
-                })
-            });
 
         },
         oneditsave: function() {
             var node = this;
             var noerr = 0;
-            var annot = this.editor.getSession().getAnnotations();
             $("#node-input-noerr").val(0);
+
+            var disposeEditor = function(editorName,targetName,defaultValue) {
+                var editor = node[editorName];
+                var annot = editor.getSession().getAnnotations();
                 for (var k=0; k < annot.length; k++) {
-                //console.log(annot[k].type,":",annot[k].text, "on line", annot[k].row);
                     if (annot[k].type === "error") {
                         noerr += annot.length;
                         break;
                     }
                 }
-            var annotIni = this.initEditor.getSession().getAnnotations();
+                var val = editor.getValue();
-            for (var k=0; k < annotIni.length; k++) {
+                if (defaultValue && val == defaultValue) {
-                if (annotIni[k].type === "error") {
+                    val = "";
-                    noerr += annotIni.length;
-                    break;
-                }
-            }
-            var annotFin = this.finalizeEditor.getSession().getAnnotations();
-            for (var k=0; k < annotFin.length; k++) {
-                if (annotFin[k].type === "error") {
-                    noerr += annotFin.length;
-                    break;
                 }
+                editor.destroy();
+                delete node[editorName];
+                $("#"+targetName).val(val);
             }
+            disposeEditor("editor","node-input-func");
+            disposeEditor("initEditor","node-input-initialize", RED._("node-red:function.text.initialize"));
+            disposeEditor("finalizeEditor","node-input-finalize", RED._("node-red:function.text.finalize"));
+
             $("#node-input-noerr").val(noerr);
             this.noerr = noerr;
 
-            $("#node-input-func").val(node.editor.getValue());
-            node.editor.destroy();
-            delete node.editor;
-
-            var initCode = node.initEditor.getValue();
-            if (initCode === RED._("node-red:function.text.initialize")) {
-                initCode = ""; 
-            }
-            $("#node-input-initialize").val(initCode);
-            node.initEditor.destroy();
-            delete node.initEditor;
-
-            var finalCode = node.finalizeEditor.getValue();
-            if (finalCode === RED._("node-red:function.text.finalize")) {
-                finalCode = "";
-            }
-            $("#node-input-finalize").val(finalCode);
-            node.finalizeEditor.destroy();
-            delete node.finalizeEditor;
         },
         oneditcancel: function() {
             var node = this;
@@ -320,8 +253,13 @@
 
             var height = size.height;
             $("#node-input-init-editor").css("height", (height -105)+"px");
-            $("#node-input-func-editor").css("height", (height -140)+"px");
+            $("#node-input-func-editor").css("height", (height -145)+"px");
             $("#node-input-finalize-editor").css("height", (height -105)+"px");
+
+            this.initEditor.resize();
+            this.editor.resize();
+            this.finalizeEditor.resize();
+
         }
     });
 </script>

packages/node_modules/@node-red/nodes/locales/en-US/messages.json

@@ -212,8 +212,8 @@
             "outputs": "Outputs"
         },
         "text": {
-            "initialize": "// Code added here will be run once whenever the node is deployed.\n",
+            "initialize": "// Code added here will be run once\n// whenever the node is deployed.\n",
-            "finalize": "// Code added here will be run when the node is being stopped or re-deployed.\n"
+            "finalize": "// Code added here will be run when the\n// node is being stopped or re-deployed.\n"
         },
         "error": {
             "inputListener":"Cannot add listener to 'input' event within Function",