Completing STT support (#976)

* Completing STT support

Signed-off-by: Moshe Wajnberg <wajnberg@il.ibm.com>

* Adressing Nick comments

Signed-off-by: Moshe Wajnberg <wajnberg@il.ibm.com>

editor/js/ui/editor.js

@@ -163,7 +163,11 @@ RED.editor = (function() {
     function validateNodeEditorProperty(node,defaults,property,prefix) {
         var input = $("#"+prefix+"-"+property);
         if (input.length > 0) {
-            if (!validateNodeProperty(node, defaults, property,input.val())) {
+		    var value = input.val();
+			if (defaults[property].hasOwnProperty("format") && defaults[property].format !== "" && input[0].nodeName === "DIV") {
+			    value = input.text();
+			}
+            if (!validateNodeProperty(node, defaults, property,value)) {
                 input.addClass("input-error");
             } else {
                 input.removeClass("input-error");
@@ -325,12 +329,21 @@ RED.editor = (function() {
      * @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
      */
     function attachPropertyChangeHandler(node,definition,property,prefix) {
+		var input = $("#"+prefix+"-"+property);
+        if (definition !== undefined && "format" in definition[property] && definition[property].format !== "" && input[0].nodeName === "DIV") {
+            $("#"+prefix+"-"+property).on('change keyup', function(event,skipValidation) {
+                if (!skipValidation) {
+                    validateNodeEditor(node,prefix);
+                }
+            });
+        } else {
             $("#"+prefix+"-"+property).change(function(event,skipValidation) {
                 if (!skipValidation) {
                     validateNodeEditor(node,prefix);
                 }
             });
         }
+    }
 
     /**
      * Assign the value to each credential field
@@ -353,7 +366,7 @@ RED.editor = (function() {
                         $('#' + prefix + '-' + cred).val('');
                     }
                 } else {
-                    preparePropertyEditor(credData, cred, prefix);
+                    preparePropertyEditor(credData, cred, prefix, credDef);
                 }
                 attachPropertyChangeHandler(node, credDef, cred, prefix);
             }
@@ -413,10 +426,10 @@ RED.editor = (function() {
                         }
                     } else {
                         console.log("Unknown type:", definition.defaults[d].type);
-                        preparePropertyEditor(node,d,prefix);
+                        preparePropertyEditor(node,d,prefix,definition.defaults);
                     }
                 } else {
-                    preparePropertyEditor(node,d,prefix);
+                    preparePropertyEditor(node,d,prefix,definition.defaults);
                 }
                 attachPropertyChangeHandler(node,definition.defaults,d,prefix);
             }
@@ -597,6 +610,8 @@ RED.editor = (function() {
                                     var newValue;
                                     if (input.attr('type') === "checkbox") {
                                         newValue = input.prop('checked');
+                                    } else if ("format" in editing_node._def.defaults[d] && editing_node._def.defaults[d].format !== "" && input[0].nodeName === "DIV") {
+                                        newValue = input.text();
                                     } else {
                                         newValue = input.val();
                                     }

editor/sass/forms.scss

@@ -151,6 +151,7 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"],
+div[contenteditable="true"],
 .uneditable-input {
   box-sizing: border-box;
   display: inline-block;
@@ -956,6 +957,9 @@ input.search-query {
 .form-search input,
 .form-inline input,
 .form-horizontal input,
+.form-search div[contenteditable="true"],
+.form-inline div[contenteditable="true"],
+.form-horizontal div[contenteditable="true"],
 .form-search textarea,
 .form-inline textarea,
 .form-horizontal textarea,

nodes/core/io/21-httpin.html

@@ -27,7 +27,7 @@
     </div>
     <div class="form-row">
         <label for="node-input-url"><i class="fa fa-globe"></i> <span data-i18n="httpin.label.url"></span></label>
-        <input type="text" id="node-input-url" placeholder="/url">
+        <div id="node-input-url" contenteditable="true" placeholder="/url"></div>
     </div>
     <div class="form-row">
         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
@@ -117,7 +117,7 @@ msg.cookies = {
         color:"rgb(231, 231, 174)",
         defaults: {
             name: {value:""},
-            url: {value:"",required:true},
+            url: {value:"",required:true,format:"url"},
             method: {value:"get",required:true},
             swaggerDoc: {type:"swagger-doc", required:false}
         },

nodes/core/io/21-httprequest.html

@@ -27,7 +27,7 @@
     </div>
     <div class="form-row">
         <label for="node-input-url"><i class="fa fa-globe"></i> <span data-i18n="httpin.label.url"></span></label>        
-        <input type="text" id="node-input-url" placeholder="http://">
+		<div id="node-input-url" contenteditable="true" placeholder="http://"></div>
     </div>
 
     <div class="form-row">
@@ -102,7 +102,7 @@
             name: {value:""},
             method:{value:"GET"},
             ret: {value:"txt"},
-            url:{value:""},
+            url:{value:"",format:"url"},
             tls: {type:"tls-config",required: false}
         },
         credentials: {

nodes/core/io/22-websocket.html

@@ -145,7 +145,7 @@
     RED.nodes.registerType('websocket-listener',{
         category: 'config',
         defaults: {
-            path: {value:"",required:true,validate:RED.validators.regex(/^((?!\/debug\/ws).)*$/) },
+            path: {value:"",required:true,validate:RED.validators.regex(/^((?!\/debug\/ws).)*$/),format:"filepath" },
             wholemsg: {value:"false"}
         },
         inputs:0,
@@ -179,7 +179,7 @@
     RED.nodes.registerType('websocket-client',{
         category: 'config',
         defaults: {
-            path: {value:"",required:true,validate:RED.validators.regex(/^((?!\/debug\/ws).)*$/) },
+            path: {value:"",required:true,validate:RED.validators.regex(/^((?!\/debug\/ws).)*$/),format:"filepath" },
             wholemsg: {value:"false"}
         },
         inputs:0,
@@ -232,7 +232,7 @@
 <script type="text/x-red" data-template-name="websocket-listener">
     <div class="form-row">
         <label for="node-config-input-path"><i class="fa fa-bookmark"></i> <span data-i18n="websocket.label.path"></span></label>        
-        <input type="text" id="node-config-input-path" placeholder="/ws/example">
+	    <div id="node-config-input-path" contenteditable="true" placeholder="/ws/example"></div>
     </div>
     <div class="form-row">
         <label for="node-config-input-wholemsg">&nbsp;</label>
@@ -255,7 +255,7 @@
 <script type="text/x-red" data-template-name="websocket-client">
     <div class="form-row">
         <label for="node-config-input-path"><i class="fa fa-bookmark"></i> <span data-i18n="websocket.label.url"></span></label>        
-        <input type="text" id="node-config-input-path" placeholder="ws://example.com/ws">
+		<div id="node-config-input-path" contenteditable="true" placeholder="ws://example.com/ws"></div>
     </div>
     <div class="form-row">
         <label for="node-config-input-wholemsg">&nbsp;</label>

nodes/core/storage/28-tail.html

@@ -17,7 +17,7 @@
 <script type="text/x-red" data-template-name="tail">
     <div class="form-row">
          <label for="node-input-filename"><i class="fa fa-file"></i> <span data-i18n="tail.label.filename"></span></label>         
-         <input type="text" id="node-input-filename">
+		 <div id="node-input-filename" contenteditable="true"></div>
     </div>
     <div class="form-row">
         <label for="node-input-filetype"><i class="fa fa-file-text-o"></i> <span data-i18n="tail.label.type"></span></label>
@@ -50,7 +50,7 @@
             name: {value:""},
             filetype: {value:"text"},
             split: {value:false},
-            filename: {value:"",required:true}
+            filename: {value:"",required:true,format:"filepath"}
         },
         color:"BurlyWood",
         inputs:0,

nodes/core/storage/50-file.html

@@ -17,7 +17,7 @@
 <script type="text/x-red" data-template-name="file">
     <div class="form-row node-input-filename">
          <label for="node-input-filename"><i class="fa fa-file"></i> <span data-i18n="file.label.filename"></span></label>         
-         <input type="text" id="node-input-filename">
+		 <div id="node-input-filename" contenteditable="true"></div>
     </div>
     <div class="form-row">
         <label for="node-input-overwriteFile"><i class="fa fa-random"></i> <span data-i18n="file.label.action"></span></label>
@@ -55,7 +55,7 @@
 <script type="text/x-red" data-template-name="file in">
     <div class="form-row">
          <label for="node-input-filename"><i class="fa fa-file"></i> <span data-i18n="file.label.filename"></span></label>         
-         <input type="text" id="node-input-filename" data-i18n="[placeholder]file.label.filename">
+		 <div id="node-input-filename" contenteditable="true" data-i18n="[placeholder]file.label.filename"></div>
     </div>
     <div class="form-row">
         <label for="node-input-format"><i class="fa fa-sign-out"></i> <span data-i18n="file.label.outputas"></span></label>
@@ -82,7 +82,7 @@
         category: 'storage-output',
         defaults: {
             name: {value:""},
-            filename: {value:""},
+            filename: {value:"",format:"filepath"},
             appendNewline: {value:true},
             createDir: {value:false},
             overwriteFile: {value:"false"}
@@ -114,7 +114,7 @@
         category: 'storage-input',
         defaults: {
             name: {value:""},
-            filename: {value:""},
+            filename: {value:"",format:"filepath"},
             format: {value:"utf8"},
         },
         color:"BurlyWood",