Bidi support for Text Direction and Structured Text (#961)

* Bidi support for Text Direction and Structured Text Signed-off-by: Moshe Wajnberg <wajnberg@il.ibm.com> * Adding documentation for functions in bidi.js and format.js Signed-off-by: Moshe Wajnberg <wajnberg@il.ibm.com> * Removing unused functions from format.js Signed-off-by: Moshe Wajnberg <wajnberg@il.ibm.com>
2023-10-10 13:36:53 +02:00 · 2016-08-25 18:47:30 +03:00 · 2016-08-25 18:47:30 +03:00 · ccc08be0ee
commit ccc08be0ee
parent 456fc23463
16 changed files with 1565 additions and 29 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2015 IBM Corp.
+ * Copyright 2013, 2016 IBM Corp.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@ -104,6 +104,8 @@ module.exports = function(grunt) {
                    "editor/js/settings.js",
                    "editor/js/user.js",
                    "editor/js/comms.js",
+					"editor/js/bidi.js",
+					"editor/js/format.js",
                    "editor/js/ui/state.js",
                    "editor/js/nodes.js",
                    "editor/js/history.js",
--- a/editor/js/bidi.js
+++ b/editor/js/bidi.js
@ -0,0 +1,141 @@
+/**
+ * Copyright 2016 IBM Corp.
+ *
+ * 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.
+ **/
+
+RED.bidi = (function() {
+    var textDir = "";
+    var LRE = "\u202A",
+        RLE = "\u202B",
+        PDF = "\u202C";
+        
+    function isRTLValue(stringValue) {
+        for (var ch in stringValue) {
+            if (isBidiChar(stringValue.charCodeAt(ch))) {
+                return true;
+            }
+            else if(isLatinChar(stringValue.charCodeAt(ch))) {
+                return false;
+            }                
+         }
+         return false;
+    }
+
+    function isBidiChar(c)  {
+        if (c >= 0x05d0 && c <= 0x05ff) {
+            return true;
+        }
+        else if (c >= 0x0600 && c <= 0x065f) {
+            return true;
+        }
+        else if (c >= 0x066a && c <= 0x06ef) {
+            return true;
+        }
+        else if (c >= 0x06fa && c <= 0x07ff) {
+            return true;
+        }
+        else if (c >= 0xfb1d && c <= 0xfdff) {
+            return true;
+        }
+        else if (c >= 0xfe70 && c <= 0xfefc) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+
+    function isLatinChar(c){
+        if((c > 64 && c < 91)||(c > 96 && c < 123)) {
+             return true;
+        }
+        else {    
+            return false;
+        }            
+    }
+    
+	/**
+     * Determines the text direction of a given string.
+     * @param value - the string     
+     */
+    function resolveBaseTextDir(value) {
+        if (textDir == "auto") {
+            if (isRTLValue(value)) {
+                return "rtl";
+            } else {
+                return "ltr";
+            }
+        } 
+        else {
+            return textDir;
+        }
+    }
+    
+    function onInputChange() {
+        $(this).attr("dir", resolveBaseTextDir($(this).val()));       
+    }
+
+	/**
+     * Listens to keyup, paste and cut events of a given input field. Upon one of these events the text direction is computed again
+     * @param input - the input field    
+     */
+	function initInputEvents(input) {
+        input.on("keyup",onInputChange).on("paste",onInputChange).on("cut",onInputChange);
+    }
+    
+	/**
+     * Enforces the text direction of a given string by adding UCC (Unicode Control Characters)
+     * @param value - the string   
+     */
+    function enforceTextDirectionWithUCC(value) {
+        if (value) {
+            var dir = resolveBaseTextDir(value);
+            if (dir == "ltr") {
+               return LRE + value + PDF;
+            }
+            else if (dir == "rtl") {
+               return RLE + value + PDF;
+            }
+        }
+        return value;
+    }
+    
+	/**
+     * Enforces the text direction for all the spans with style bidiAware under workpsace or sidebar div
+     */
+    function enforceTextDirectionOnPage() {                  
+        $("#workspace").find('span.bidiAware').each(function() {                       			    
+            $(this).attr("dir", resolveBaseTextDir($(this).html()));
+	    });
+        $("#sidebar").find('span.bidiAware').each(function() {                       			    
+            $(this).attr("dir", resolveBaseTextDir($(this).text()));
+	    });
+    }
+    
+	/**
+     * Sets the text direction preference
+     * @param dir - the text direction preference  
+     */
+    function setTextDirection(dir) {
+        textDir = dir;
+    }
+    
+    return {
+        setTextDirection: setTextDirection,
+        enforceTextDirectionOnPage: enforceTextDirectionOnPage,
+        enforceTextDirectionWithUCC: enforceTextDirectionWithUCC,
+        resolveBaseTextDir: resolveBaseTextDir,
+        initInputEvents: initInputEvents
+    }
+})();
--- a/editor/js/format.js
+++ b/editor/js/format.js
--- a/editor/js/history.js
+++ b/editor/js/history.js
@ -236,7 +236,7 @@ RED.history = (function() {
                        });

                        if (ev.node.type === 'subflow') {
-                            $("#menu-item-workspace-menu-"+ev.node.id.replace(".","-")).text(ev.node.name);
+                            $("#menu-item-workspace-menu-"+ev.node.id.replace(".","-")).text(RED.bidi.enforceTextDirectionWithUCC(ev.node.name));
                        }
                    } else {
                        RED.editor.updateNodeProperties(ev.node);
--- a/editor/js/main.js
+++ b/editor/js/main.js
@ -1,5 +1,5 @@
 /**
- * Copyright 2013, 2015 IBM Corp.
+ * Copyright 2013, 2016 IBM Corp.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
@ -176,7 +176,13 @@ var RED = (function() {
                    {id:"menu-item-view-snap-grid",label:RED._("menu.label.view.snapGrid"),toggle:true,onselect:RED.view.toggleSnapGrid},
                    {id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:toggleStatus, selected: true},
                    null,
-                    {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true}
+                    {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true},
+                    {id:"menu-item-bidi",label:RED._("menu.label.view.textDir"),options:[
+                      {id:"menu-item-bidi-default",toggle:"text-direction",label:RED._("menu.label.view.defaultDir"),selected: true, onselect:function(s) { if(s){RED.view.toggleTextDir("")}}},
+                      {id:"menu-item-bidi-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if(s){RED.view.toggleTextDir("ltr")}}},
+                      {id:"menu-item-bidi-rtl",toggle:"text-direction",label:RED._("menu.label.view.rtl"), onselect:function(s) { if(s){RED.view.toggleTextDir("rtl")}}},
+                      {id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.view.toggleTextDir("auto")}}}
+                    ]}
                ]},
                null,
                {id:"menu-item-import",label:RED._("menu.label.import"),options:[
--- a/editor/js/ui/editor.js
+++ b/editor/js/ui/editor.js
@ -295,17 +295,25 @@ RED.editor = (function() {
     * @param node - the node being edited
     * @param property - the name of the field
     * @param prefix - the prefix to use in the input element ids (node-input|node-config-input)
+	 * @param definition - the definition of the field
     */
-    function preparePropertyEditor(node,property,prefix) {
+    function preparePropertyEditor(node,property,prefix,definition) {
        var input = $("#"+prefix+"-"+property);
        if (input.attr('type') === "checkbox") {
            input.prop('checked',node[property]);
-        } else {
+        } 
+        else {
            var val = node[property];
            if (val == null) {
                val = "";
            }
-            input.val(val);
+            if ("format" in definition[property] && definition[property].format !== "" && input[0].nodeName === "DIV") {
+                input.html(RED.format.getHtml(val, definition[property].format, {}, false, "en"));
+                RED.format.attach(input[0], definition[property].format, {}, false, "en");                         
+            } else {
+                input.val(val).attr("dir", RED.bidi.resolveBaseTextDir(val));
+                RED.bidi.initInputEvents(input);
+            }                
        }
    }

@ -1197,7 +1205,7 @@ RED.editor = (function() {
                            changes['name'] = editing_node.name;
                            editing_node.name = newName;
                            changed = true;
-                            $("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(newName);
+                            $("#menu-item-workspace-menu-"+editing_node.id.replace(".","-")).text(RED.bidi.enforceTextDirectionWithUCC(newName));
                        }

                        var newDescription = subflowEditor.getValue();
@ -1289,7 +1297,8 @@ RED.editor = (function() {
                    value: ""
                });

-                $("#subflow-input-name").val(subflow.name);
+                $("#subflow-input-name").val(subflow.name).attr("dir", RED.bidi.resolveBaseTextDir(subflow.name));
+				RED.bidi.initInputEvents($("#subflow-input-name"));
                subflowEditor.getSession().setValue(subflow.info||"",-1);
                var userCount = 0;
                var subflowType = "subflow:"+editing_node.id;
--- a/editor/js/ui/palette.js
+++ b/editor/js/ui/palette.js
@ -91,15 +91,15 @@ RED.palette = (function() {
        el.css({height:multiLineNodeHeight+"px"});

        var labelElement = el.find(".palette_label");
-        labelElement.html(lines);
+        labelElement.html(lines).attr('dir', RED.bidi.resolveBaseTextDir(lines));

        el.find(".palette_port").css({top:(multiLineNodeHeight/2-5)+"px"});

        var popOverContent;
        try {
-            var l = "<p><b>"+label+"</b></p>";
+            var l = "<p><b>"+RED.bidi.enforceTextDirectionWithUCC(label)+"</b></p>";
            if (label != type) {
-                l = "<p><b>"+label+"</b><br/><i>"+type+"</i></p>";
+                l = "<p><b>"+RED.bidi.enforceTextDirectionWithUCC(label)+"</b><br/><i>"+type+"</i></p>";
            }
            popOverContent = $(l+(info?info:$("script[data-help-name|='"+type+"']").html()||"<p>"+RED._("palette.noInfo")+"</p>").trim())
                                .filter(function(n) {
--- a/editor/js/ui/tab-info.js
+++ b/editor/js/ui/tab-info.js
@ -70,7 +70,7 @@ RED.sidebar.info = (function() {
        var table = '<table class="node-info"><tbody>';
        table += '<tr class="blank"><td colspan="2">'+RED._("sidebar.info.node")+'</td></tr>';
        if (node.type != "subflow" && node.name) {
-            table += "<tr><td>"+RED._("common.label.name")+"</td><td>&nbsp;"+node.name+"</td></tr>";
+            table += '<tr><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>';
        }
        table += "<tr><td>"+RED._("sidebar.info.type")+"</td><td>&nbsp;"+node.type+"</td></tr>";
        table += "<tr><td>"+RED._("sidebar.info.id")+"</td><td>&nbsp;"+node.id+"</td></tr>";
@ -93,7 +93,7 @@ RED.sidebar.info = (function() {
                    userCount++;
                }
            });
-            table += "<tr><td>"+RED._("common.label.name")+"</td><td>"+subflowNode.name+"</td></tr>";
+            table += '<tr><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(subflowNode.name)+'">'+subflowNode.name+'</span></td></tr>';
            table += "<tr><td>"+RED._("sidebar.info.instances")+"</td><td>"+userCount+"</td></tr>";
        }

@ -140,13 +140,14 @@ RED.sidebar.info = (function() {
        table += "</tbody></table><hr/>";
        if (!subflowNode && node.type != "comment") {
            var helpText = $("script[data-help-name|='"+node.type+"']").html()||"";
-            table  += '<div class="node-help">'+helpText+"</div>";
+            table  += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(helpText)+'">'+helpText+'</span></div>';
        }
        if (subflowNode) {
-            table += '<div class="node-help">'+marked(subflowNode.info||"")+'</div>';
+            table += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(subflowNode.info||"")+'">'+marked(subflowNode.info||"")+'</span></div>';
        } else if (node._def && node._def.info) {
            var info = node._def.info;
-            table += '<div class="node-help">'+marked(typeof info === "function" ? info.call(node) : info)+'</div>';
+            var textInfo = (typeof info === "function" ? info.call(node) : info);            
+            table += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(textInfo)+'">'+marked(textInfo)+'</span></div>';
            //table += '<div class="node-help">'+(typeof info === "function" ? info.call(node) : info)+'</div>';
        }

--- a/editor/js/ui/tabs.js
+++ b/editor/js/ui/tabs.js
@ -126,7 +126,8 @@ RED.tabs = (function() {
                if (tab.icon) {
                    $('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
                }
-                $('<span/>').text(tab.label).appendTo(link);
+                var span = $('<span/>',{class:"bidiAware"}).text(tab.label).appendTo(link);
+                span.attr('dir', RED.bidi.resolveBaseTextDir(tab.label));               

                link.on("click",onTabClick);
                link.on("dblclick",onTabDblClick);
@ -239,7 +240,7 @@ RED.tabs = (function() {
                tabs[id].label = label;
                var tab = ul.find("a[href='#"+id+"']");
                tab.attr("title",label);
-                tab.find("span").text(label);
+                tab.find("span").text(label).attr('dir', RED.bidi.resolveBaseTextDir(label));
                updateTabWidths();
            },
            order: function(order) {
--- a/editor/js/ui/view.js
+++ b/editor/js/ui/view.js
@ -1792,6 +1792,7 @@ RED.view = (function() {
                                        l = d._def.label;
                                        try {
                                            l = (typeof l === "function" ? l.call(d) : l)||"";
+											l = RED.bidi.enforceTextDirectionWithUCC(l);
                                        } catch(err) {
                                            console.log("Definition error: "+d.type+".label",err);
                                            l = d.type;
@ -2154,6 +2155,7 @@ RED.view = (function() {
            ).classed("link_selected", false);
        }

+		RED.bidi.enforceTextDirectionOnPage();
 		
        if (d3.event) {
            d3.event.preventDefault();
@ -2357,6 +2359,12 @@ RED.view = (function() {
        toggleSnapGrid: function(state) {
            snapGrid = state;
            redraw();
+        },
+		toggleTextDir: function(value) {
+            RED.bidi.setTextDirection(value);
+            RED.nodes.eachNode(function(n) { n.dirty = true;});
+            redraw();
+            RED.palette.refresh();         
        },
        scale: function() {
            return scaleFactor;
--- a/editor/js/ui/workspaces.js
+++ b/editor/js/ui/workspaces.js
@ -94,7 +94,7 @@ RED.workspaces = (function() {
                            workspace_tabs.renameTab(workspace.id,label);
                            RED.nodes.dirty(true);
                            RED.sidebar.config.refresh();
-                            $("#menu-item-workspace-menu-"+workspace.id.replace(".","-")).text(label);
+                            $("#menu-item-workspace-menu-"+workspace.id.replace(".","-")).text(RED.bidi.enforceTextDirectionWithUCC(label));
                        }
                        RED.tray.close();
                    }
@ -109,7 +109,8 @@ RED.workspaces = (function() {
                '</div>').appendTo(dialogForm);
                $('<input type="text" style="display: none;" />').prependTo(dialogForm);
                dialogForm.submit(function(e) { e.preventDefault();});
-                $("#node-input-name").val(workspace.label);
+                $("#node-input-name").val(workspace.label).attr("dir", RED.bidi.resolveBaseTextDir(workspace.label));
+				RED.bidi.initInputEvents($("#node-input-name"));
                dialogForm.i18n();
            },
            close: function() {
@ -225,7 +226,7 @@ RED.workspaces = (function() {
        refresh: function() {
            RED.nodes.eachWorkspace(function(ws) {
                workspace_tabs.renameTab(ws.id,ws.label);
-                $("#menu-item-workspace-menu-"+ws.id.replace(".","-")).text(ws.label);
+                $("#menu-item-workspace-menu-"+ws.id.replace(".","-")).text(RED.bidi.enforceTextDirectionWithUCC(ws.label));

            })
            RED.nodes.eachSubflow(function(sf) {
--- a/editor/sass/editor.scss
+++ b/editor/sass/editor.scss
@ -196,7 +196,7 @@
    display: inline-block;
    width: 100px;
 }
-.form-row input {
+.form-row input .form-row div[contenteditable="true"] {
    width:70%;
 }

--- a/editor/sass/forms.scss
+++ b/editor/sass/forms.scss
@ -26,6 +26,7 @@
 button,
 input,
 select,
+div[contenteditable="true"],
 textarea {
  margin: 0;
  font-size: 100%;
@ -33,12 +34,14 @@ textarea {
 }

 button,
+div[contenteditable="true"],
 input {
  *overflow: visible;
  line-height: normal;
 }

 button::-moz-focus-inner,
+div[contenteditable="true"]::-moz-focus-inner,
 input::-moz-focus-inner {
  padding: 0;
  border: 0;
@ -110,6 +113,7 @@ legend small {

 label,
 input,
+div[contenteditable="true"],
 button,
 select,
 textarea {
@ -119,6 +123,7 @@ textarea {
 }

 input,
+div[contenteditable="true"],
 button,
 select,
 textarea {
@ -161,6 +166,7 @@ input[type="color"],

 input,
 textarea,
+div[contenteditable="true"],
 .uneditable-input {
  width: 206px;
 }
@ -184,6 +190,7 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"],
+div[contenteditable="true"],
 .uneditable-input {
  background-color: #ffffff;
  border: 1px solid $form-input-border-color;
@ -207,6 +214,7 @@ input[type="url"]:focus,
 input[type="search"]:focus,
 input[type="tel"]:focus,
 input[type="color"]:focus,
+div[contenteditable="true"],
 .uneditable-input:focus {
  border-color: $form-input-focus-color;
  outline: 0;
@ -294,11 +302,13 @@ textarea:-moz-placeholder {
 }

 input:-ms-input-placeholder,
+div[contenteditable="true"]:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
  color: $form-placeholder-color;
 }

 input::-webkit-input-placeholder,
+div[contenteditable="true"]::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
  color: $form-placeholder-color;
 }
@ -384,6 +394,7 @@ textarea[class*="span"],

 input,
 textarea,
+div[contenteditable="true"],
 .uneditable-input {
  margin-left: 0;
 }
@ -515,12 +526,14 @@ input[type="checkbox"][readonly] {
 .control-group.warning .checkbox,
 .control-group.warning .radio,
 .control-group.warning input,
+.control-group.warning div[contenteditable="true"],
 .control-group.warning select,
 .control-group.warning textarea {
  color: #c09853;
 }

 .control-group.warning input,
+.control-group.warning div[contenteditable="true"],
 .control-group.warning select,
 .control-group.warning textarea {
  border-color: #c09853;
@ -530,6 +543,7 @@ input[type="checkbox"][readonly] {
 }

 .control-group.warning input:focus,
+.control-group.warning div[contenteditable="true"]:focus,
 .control-group.warning select:focus,
 .control-group.warning textarea:focus {
  border-color: #a47e3c;
@ -554,12 +568,14 @@ input[type="checkbox"][readonly] {
 .control-group.error .checkbox,
 .control-group.error .radio,
 .control-group.error input,
+.control-group.error div[contenteditable="true"],
 .control-group.error select,
 .control-group.error textarea {
  color: #b94a48;
 }

 .control-group.error input,
+.control-group.error div[contenteditable="true"],
 .control-group.error select,
 .control-group.error textarea {
  border-color: #b94a48;
@ -569,6 +585,7 @@ input[type="checkbox"][readonly] {
 }

 .control-group.error input:focus,
+.control-group.error div[contenteditable="true"]:focus,
 .control-group.error select:focus,
 .control-group.error textarea:focus {
  border-color: #953b39;
@ -593,12 +610,14 @@ input[type="checkbox"][readonly] {
 .control-group.success .checkbox,
 .control-group.success .radio,
 .control-group.success input,
+.control-group.success div[contenteditable="true"],
 .control-group.success select,
 .control-group.success textarea {
  color: #468847;
 }

 .control-group.success input,
+.control-group.success div[contenteditable="true"],
 .control-group.success select,
 .control-group.success textarea {
  border-color: #468847;
@ -608,6 +627,7 @@ input[type="checkbox"][readonly] {
 }

 .control-group.success input:focus,
+.control-group.success div[contenteditable="true"]:focus,
 .control-group.success select:focus,
 .control-group.success textarea:focus {
  border-color: #356635;
@ -632,12 +652,14 @@ input[type="checkbox"][readonly] {
 .control-group.info .checkbox,
 .control-group.info .radio,
 .control-group.info input,
+.control-group.info div[contenteditable="true"],
 .control-group.info select,
 .control-group.info textarea {
  color: #3a87ad;
 }

 .control-group.info input,
+.control-group.info div[contenteditable="true"],
 .control-group.info select,
 .control-group.info textarea {
  border-color: #3a87ad;
@ -647,6 +669,7 @@ input[type="checkbox"][readonly] {
 }

 .control-group.info input:focus,
+.control-group.info div[contenteditable="true"]:focus,
 .control-group.info select:focus,
 .control-group.info textarea:focus {
  border-color: #2d6987;
@ -663,6 +686,7 @@ input[type="checkbox"][readonly] {
 }

 input:focus:invalid,
+div[contenteditable="true"]:focus:invalid,
 textarea:focus:invalid,
 select:focus:invalid {
  color: #b94a48;
@ -670,6 +694,7 @@ select:focus:invalid {
 }

 input:focus:invalid:focus,
+div[contenteditable="true"]:focus:invalid:focus,
 textarea:focus:invalid:focus,
 select:focus:invalid:focus {
  border-color: #e9322d;
@ -727,6 +752,8 @@ select:focus:invalid:focus {

 .input-append input,
 .input-prepend input,
+.input-append div[contenteditable="true"],
+.input-prepend div[contenteditable="true"],
 .input-append select,
 .input-prepend select,
 .input-append .uneditable-input,
@ -740,6 +767,8 @@ select:focus:invalid:focus {

 .input-append input,
 .input-prepend input,
+.input-append div[contenteditable="true"],
+.input-prepend div[contenteditable="true"],
 .input-append select,
 .input-prepend select,
 .input-append .uneditable-input,
@ -755,6 +784,8 @@ select:focus:invalid:focus {

 .input-append input:focus,
 .input-prepend input:focus,
+.input-append div[contenteditable="true"]:focus,
+.input-prepend div[contenteditable="true"]:focus,
 .input-append select:focus,
 .input-prepend select:focus,
 .input-append .uneditable-input:focus,
@ -809,6 +840,7 @@ select:focus:invalid:focus {
 }

 .input-append input,
+.input-append div[contenteditable="true"],
 .input-append select,
 .input-append .uneditable-input {
  -webkit-border-radius: 4px 0 0 4px;
@ -839,6 +871,7 @@ select:focus:invalid:focus {
 }

 .input-prepend.input-append input,
+.input-prepend.input-append div[contenteditable="true"],
 .input-prepend.input-append select,
 .input-prepend.input-append .uneditable-input {
  -webkit-border-radius: 0;
--- a/editor/sass/jquery.scss
+++ b/editor/sass/jquery.scss
@ -18,11 +18,11 @@
    font-size: 14px !important;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
 }
-.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
+.ui-widget input, .ui-widget div[contenteditable="true"], .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-size: 14px !important;
    font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
 }
-.ui-widget input {
+.ui-widget input, .ui-widget div[contenteditable="true"] {
    box-shadow: none;
 }

--- a/nodes/core/io/23-watch.html
+++ b/nodes/core/io/23-watch.html
@ -17,7 +17,7 @@
 <script type="text/x-red" data-template-name="watch">
    <div class="form-row node-input-filename">
         <label for="node-input-files"><i class="fa fa-file"></i> <span data-i18n="watch.label.files"></span></label>
-         <input type="text" id="node-input-files" data-i18n="[placeholder]watch.placeholder.files">
+         <div id="node-input-files" contenteditable="true" tabindex="1" data-i18n="[placeholder]watch.placeholder.files"></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>
@ -46,7 +46,7 @@
        category: 'advanced-input',
        defaults: {
            name: {value:""},
-            files: {value:"",required:true}
+            files: {value:"",required:true, format:"filepath"}
        },
        color:"BurlyWood",
        inputs:0,
--- a/red/api/locales/en-US/editor.json
+++ b/red/api/locales/en-US/editor.json
@ -25,7 +25,12 @@
            "view": {
                "view": "View",
                "showGrid": "Show grid",
-                "snapGrid": "Snap to grid"
+                "snapGrid": "Snap to grid",
+                "textDir": "Text Direction",
+                "defaultDir": "Default",
+                "ltr": "Left-to-right",
+                "rtl": "Right-to-left",
+                "auto": "Contextual"
            },
            "sidebar": {
                "show": "Show sidebar"