Add expand editor button to Template node

packages/node_modules/@node-red/editor-client/locales/en-US/editor.json

@@ -729,6 +729,9 @@
     "jsEditor": {
         "title": "JavaScript editor"
     },
+    "textEditor": {
+        "title": "Text editor"
+    },
     "jsonEditor": {
         "title": "JSON editor",
         "format": "format JSON"

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

@@ -513,6 +513,8 @@ RED.editor = (function() {
                 label = RED._("expressionEditor.title");
             } else if (node.type === '_js') {
                 label = RED._("jsEditor.title");
+            } else if (node.type === '_text') {
+                label = RED._("textEditor.title");
             } else if (node.type === '_json') {
                 label = RED._("jsonEditor.title");
             } else if (node.type === '_markdown') {
@@ -2456,6 +2458,7 @@ RED.editor = (function() {
         editExpression: function(options) { showTypeEditor("_expression", options) },
         editJSON: function(options) { showTypeEditor("_json", options) },
         editMarkdown: function(options) { showTypeEditor("_markdown", options) },
+        editText: function(options) { showTypeEditor("_text", options) },
         editBuffer: function(options) { showTypeEditor("_buffer", options) },
         buildEditForm: buildEditForm,
         validateNode: validateNode,

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

@@ -0,0 +1,90 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+(function() {
+
+
+    var template = '<script type="text/x-red" data-template-name="_text"><div class="form-row node-text-editor-row"><div style="height: 200px;min-height: 150px;" class="node-text-editor" id="node-input-text"></div></div></script>';
+
+    var definition = {
+        show: function(options) {
+            var value = options.value;
+            var onComplete = options.complete;
+            var type = "_text"
+            if ($("script[data-template-name='"+type+"']").length === 0) {
+                $(template).appendTo("#red-ui-editor-node-configs");
+            }
+            RED.view.state(RED.state.EDITING);
+            var expressionEditor;
+            var changeTimer;
+
+            var trayOptions = {
+                title: options.title,
+                width: options.width||"inherit",
+                buttons: [
+                    {
+                        id: "node-dialog-cancel",
+                        text: RED._("common.label.cancel"),
+                        click: function() {
+                            RED.tray.close();
+                        }
+                    },
+                    {
+                        id: "node-dialog-ok",
+                        text: RED._("common.label.done"),
+                        class: "primary",
+                        click: function() {
+                            onComplete(expressionEditor.getValue(),expressionEditor.getCursorPosition());
+                            RED.tray.close();
+                        }
+                    }
+                ],
+                resize: function(dimensions) {
+                    var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+                    var editorRow = $("#dialog-form>div.node-text-editor-row");
+                    var height = $("#dialog-form").height();
+                    // for (var i=0;i<rows.size();i++) {
+                    //     height -= $(rows[i]).outerHeight(true);
+                    // }
+                    // height -= (parseInt($("#dialog-form").css("marginTop"))+parseInt($("#dialog-form").css("marginBottom")));
+                    $(".node-text-editor").css("height",height+"px");
+                    expressionEditor.resize();
+                },
+                open: function(tray) {
+                    var trayBody = tray.find('.red-ui-tray-body');
+                    var dialogForm = RED.editor.buildEditForm(tray.find('.red-ui-tray-body'),'dialog-form',type,'editor');
+                    expressionEditor = RED.editor.createEditor({
+                        id: 'node-input-text',
+                        value: "",
+                        mode:"ace/mode/"+(options.mode||"text")
+                    });
+                    expressionEditor.getSession().setValue(value||"",-1);
+                    if (options.cursor) {
+                        expressionEditor.gotoLine(options.cursor.row+1,options.cursor.column,false);
+                    }
+                },
+                close: function() {
+                    expressionEditor.destroy();
+                    if (options.onclose) {
+                        options.onclose();
+                    }
+                },
+                show: function() {}
+            }
+            RED.tray.show(trayOptions);
+        }
+    }
+    RED.editor.registerTypeEditor("_text", definition);
+})();

packages/node_modules/@node-red/nodes/core/core/80-template.html

@@ -9,14 +9,6 @@
         <input type="text" id="node-input-field" placeholder="payload" style="width:250px;">
         <input type="hidden" id="node-input-fieldType">
     </div>
-    <div class="form-row">
-        <label for="node-input-syntax"><i class="fa fa-code"></i> <span data-i18n="template.label.syntax"></span></label>
-        <select id="node-input-syntax" style="width:180px;">
-            <option value="mustache" data-i18n="template.label.mustache"></option>
-            <option value="plain" data-i18n="template.label.plain"></option>
-        </select>
-    </div>
-
     <div class="form-row" style="position: relative; margin-bottom: 0px;">
         <label for="node-input-template"><i class="fa fa-file-code-o"></i> <span data-i18n="template.label.template"></span></label>
         <input type="hidden" id="node-input-template" autofocus="autofocus">
@@ -32,11 +24,19 @@
                 <option value="yaml">YAML</option>
                 <option value="text" data-i18n="template.label.none"></option>
             </select>
+            <button id="node-template-expand-editor" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button>
         </div>
     </div>
     <div class="form-row node-text-editor-row">
         <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-template-editor" ></div>
     </div>
+    <div class="form-row">
+        <label for="node-input-syntax"><i class="fa fa-code"></i> <span data-i18n="template.label.syntax"></span></label>
+        <select id="node-input-syntax" style="width:180px;">
+            <option value="mustache" data-i18n="template.label.mustache"></option>
+            <option value="plain" data-i18n="template.label.plain"></option>
+        </select>
+    </div>
     <div class="form-row">
         <label for="node-input-output"><i class="fa fa-long-arrow-right"></i> <span data-i18n="template.label.output"></span></label>
         <select id="node-input-output" style="width:180px;">
@@ -109,6 +109,23 @@
                     v: Date.now()
                 });
             });
+            $("#node-template-expand-editor").on("click", function(e) {
+                e.preventDefault();
+                var value = that.editor.getValue();
+                RED.editor.editText({
+                    mode: $("#node-input-format").val(),
+                    value: value,
+                    width: "Infinity",
+                    cursor: that.editor.getCursorPosition(),
+                    complete: function(v,cursor) {
+                        that.editor.setValue(v, -1);
+                        that.editor.gotoLine(cursor.row+1,cursor.column,false);
+                        setTimeout(function() {
+                            that.editor.focus();
+                        },300);
+                    }
+                })
+            })
         },
         oneditsave: function() {
             $("#node-input-template").val(this.editor.getValue());