Merge branch 'ashrafg-bidi' into bidi

Gruntfile.js

@@ -104,8 +104,10 @@ module.exports = function(grunt) {
                     "editor/js/settings.js",
                     "editor/js/user.js",
                     "editor/js/comms.js",
-                    "editor/js/text/bidi.js",
+                    "editor/js/bidi/bidi.js",
-                    "editor/js/text/format.js",
+                    "editor/js/bidi/base-text-dir.js",
+                    "editor/js/bidi/format.js",
+                    "editor/js/bidi/numeric-shaping.js",
                     "editor/js/ui/state.js",
                     "editor/js/nodes.js",
                     "editor/js/history.js",

editor/js/bidi/base-text-dir.js

@@ -0,0 +1,67 @@
+/**
+ * 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.baseTextDir = (function() {
+    var LRE = "\u202A",
+        RLE = "\u202B",
+        PDF = "\u202C";
+
+    function _isRTLValue(stringValue) {
+        var length = stringValue.length;
+        for (var i = 0 ; i < length; i++) {
+            if (_isBidiChar(stringValue.charCodeAt(i))) {
+                return true;
+            } else if (_isLatinChar(stringValue.charCodeAt(i))) {
+                return false;
+            }
+         }
+           return RED.bidi.isMirroringEnabled();
+    }
+
+    function _isBidiChar(c) {
+        return (c >= 0x05d0 && c <= 0x05ff)||
+               (c >= 0x0600 && c <= 0x065f)||
+               (c >= 0x066a && c <= 0x06ef)||
+               (c >= 0x06fa && c <= 0x07ff)||
+               (c >= 0xfb1d && c <= 0xfdff)||
+               (c >= 0xfe70 && c <= 0xfefc);
+    }
+
+    function _isLatinChar(c) {
+        return (c > 64 && c < 91) || (c > 96 && c < 123);
+    }
+
+    /**
+     * 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 = RED.bidi.resolveBaseTextDir(value);
+            if (dir == "ltr") {
+               return LRE + value + PDF;
+            } else if (dir == "rtl") {
+               return RLE + value + PDF;
+            }
+        }
+        return value;
+    }
+
+    return {
+        enforceTextDirectionWithUCC: _enforceTextDirectionWithUCC,
+        isRTLValue : _isRTLValue
+    }
+})();

editor/js/bidi/bidi.js

@@ -0,0 +1,189 @@
+/**
+ * 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 shaperType = "";
+    var calendarType = "";
+    
+    /**
+     * Indicates the type of bidi-support
+     * BTD : Base text direction
+     * NS : Numeric Shaping
+     * CALENDAR : National Calendar
+     * STT_ATTACH : Structure Text Support, it is using to call attach function located at format.js
+     * STT_GETHTML : STT_ATTACH : Structure Text Support, it is using to call getHtml function located at format.js
+     */
+    var _flags = {
+        BTD: 1,
+        NS: 2,
+        CALENDAR: 4,
+        STT_ATTACH: 8,
+        STT_GETHTML: 16
+    };
+    
+   /**
+    * Reverse component position when mirroring is enabled
+    */
+    var _componentPos = {};
+    
+    /**
+     * Check if browser language is RTL language
+     */
+    function _isMirroringEnabled() {
+        var isRTLLang = new RegExp("^(ar|he)").test(navigator.language);
+        if (isRTLLang) {
+        	_componentPos.left = "right";
+        	_componentPos.right = "left";
+            return true;
+        } else {
+        	_componentPos.left = "left";
+        	_componentPos.right = "right";
+            return false;
+        }
+    }
+   
+    /**
+     * @param val - the numeric shaping type: None , National or contextual
+     */
+    function _setNumericShapingType(val) {
+        shaperType = val;
+        _refreshView();
+    }
+    
+    /**
+     * Sets the national calendar preference
+     * @param val - the calendar type hijri, hebrew or gregorian
+     */
+    function _setCalendarType(val) {
+        calendarType = val;
+    }
+      
+    /**
+     * Formats the date according to the current selected calendar 
+     * @param date - the date object to be formatted
+     */
+    function _getGlobalizedDate(date) {
+        var options = {};
+        var lang = navigator.language;
+        if (calendarType === "hijri") {
+            options = lang + "-u-ca-islamic";
+        } else if (calendarType === "hebrew") {
+            options = lang + "-u-ca-hebrew";
+        }
+        return date.toLocaleString(options);
+    }  
+    
+    /**
+     * Sets the text direction preference
+     * @param dir - the text direction preference
+     */
+    function _setTextDirection(dir) {
+        textDir = dir;
+        _refreshView();
+        _enforceTextDirectionOnPage();
+    }
+    
+    /**
+     * Enforces the text direction for all the spans with style bidiAware under
+     * workspace 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()));
+        });
+    }
+    
+    /**
+     * Determines the text direction of a given string.
+     * @param value - the string
+     */
+    function _resolveBaseTextDir(value) {
+        if (textDir == "auto") {
+            if (RED.bidi.baseTextDir.isRTLValue(value)) {
+                return "rtl";
+            } else {
+                return "ltr";
+            }
+        } else {
+            return textDir;
+        }
+    }
+    
+    /**
+     * Adds event listeners to the Input to ensure its text-direction attribute
+     * is properly set based on its content.
+     * @param input - the input field
+     */
+    function _prepareInput(input) {
+        input.on("keyup",_onInputChange).on("paste",_onInputChange).on("cut",_onInputChange);
+        // Set the initial text direction
+        _onInputChange.call(input);
+    }
+    
+    function _onInputChange() {
+        $(this).attr("dir", _resolveBaseTextDir($(this).val()));
+    }
+    
+    /**
+     * Refreshes the view whenever changing the user preferences
+     */
+    function _refreshView() {
+        RED.nodes.eachNode(function(n) { n.dirty = true;});
+        RED.view.redraw();
+        RED.palette.refresh();
+    }
+    
+    /**
+     * Applying bidi support for these features: base-text-dir ,Numeric-shaping or both, STT ,Calendar which is controlled by the flag value.
+     * @param value- the string to apply the bidi-support on it.
+     * @param flag - indicates the type of bidi-support (Base-text-dir ,Numeric-shaping or both, STT , Calendar)
+     * @param type - could be one of filepath, url, email
+     * @param args - pass additional arguments to the handler. generally null.
+     */
+    function _applyBidiSupport(value, flag, type, args) {
+        switch (flag) {
+        case 0:
+            value = RED.bidi.baseTextDir.enforceTextDirectionWithUCC(value);
+            return RED.bidi.numericShaping.shape(value, shaperType, textDir);
+        case 1:
+            return RED.bidi.baseTextDir.enforceTextDirectionWithUCC(value);
+        case 2:
+            return RED.bidi.numericShaping.shape(value, shaperType, textDir);
+        case 4:
+            return _getGlobalizedDate(value);
+        case 8:
+            return RED.bidi.format.attach(value, type, args, _isMirroringEnabled(), navigator.language);
+        case 16:
+            return RED.bidi.format.getHtml(value, type, args, _isMirroringEnabled(), navigator.language);
+        default:
+            return value;
+        }
+    }
+    return {
+        isMirroringEnabled: _isMirroringEnabled,
+        setNumericShapingType : _setNumericShapingType,
+        setCalendarType: _setCalendarType,
+        setTextDirection : _setTextDirection,
+        applyBidiSupport : _applyBidiSupport,
+        resolveBaseTextDir : _resolveBaseTextDir,
+        prepareInput: _prepareInput,
+        flags: _flags,
+        componentPos: _componentPos
+    }
+ })();

editor/js/bidi/format.js

@@ -13,7 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  **/
-RED.text.format = (function() {
+
+RED.bidi.format = (function() {
 
     var TextSegment = (function() {
         var TextSegment = function (obj) {

editor/js/bidi/numeric-shaping.js

@@ -0,0 +1,86 @@
+/**
+ * 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.numericShaping = (function(){
+    var regex = /([0-9])|([\u0660-\u0669])|([\u0608\u060B\u060D\u061B-\u064A\u066D-\u066F\u0671-\u06D5\u06E5-\u06E6\u06EE-\u06EF\u06FA-\u06FF\u0750-\u077F\u08A0-\u08E3\u200F\u202B\u202E\u2067\uFB50-\uFD3D\uFD40-\uFDCF\uFDF0-\uFDFC\uFDFE-\uFDFF\uFE70-\uFEFE]+)|([^0-9\u0660-\u0669\u0608\u060B\u060D\u061B-\u064A\u066D-\u066F\u0671-\u06D5\u06E5-\u06E6\u06EE-\u06EF\u06FA-\u06FF\u0750-\u077F\u08A0-\u08E3\u200F\u202B\u202E\u2067\uFB50-\uFD3D\uFD40-\uFDCF\uFDF0-\uFDFC\uFDFE-\uFDFF\uFE70-\uFEFE\u0600-\u0607\u0609-\u060A\u060C\u060E-\u061A\u064B-\u066C\u0670\u06D6-\u06E4\u06E7-\u06ED\u06F0-\u06F9\u08E4-\u08FF\uFD3E-\uFD3F\uFDD0-\uFDEF\uFDFD\uFEFF\u0000-\u0040\u005B-\u0060\u007B-\u007F\u0080-\u00A9\u00AB-\u00B4\u00B6-\u00B9\u00BB-\u00BF\u00D7\u00F7\u02B9-\u02BA\u02C2-\u02CF\u02D2-\u02DF\u02E5-\u02ED\u02EF-\u02FF\u2070\u2074-\u207E\u2080-\u208E\u2100-\u2101\u2103-\u2106\u2108-\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u212E\u213A-\u213B\u2140-\u2144\u214A-\u214D\u2150-\u215F\u2189\uA720-\uA721\uA788\uFF01-\uFF20\uFF3B-\uFF40\uFF5B-\uFF65\uFFE0-\uFFE6\uFFE8-\uFFEE]+)/g;
+	
+    /**
+     * Converts the digits in the text to European or Arabic digits According to
+     * the shaperType & the textDir.
+     */
+    function _shape(text, shaperType, textDir) {
+        text = text.toString();
+        if(textDir === "auto"){
+        	textDir = RED.bidi.resolveBaseTextDir(text);
+        }
+        if (!text) { 
+            return text;
+        }
+        switch (shaperType) {
+            case "defaultNumeral":
+                return _shapeEuropean(text);
+            case "national":
+                return _shapeArabic(text);
+            case "contextual":
+                return _shapeContextual(text, textDir === "rtl" ? 2 : 1);
+            default:
+                return text;
+        }
+    }
+    
+    /**
+     * Converts the digits in the text to European digits.
+     */
+    function _shapeEuropean(text) {
+        return text.replace(/[\u0660-\u0669]/g, function(c) {
+            return c.charCodeAt(0) - 1632;
+        });
+    }
+    
+    /**
+     * Converts the digits in the text to Arabic digits.
+     */
+    function _shapeArabic(text) {
+        return text.replace(/[0-9]/g, function(c) {
+            return String.fromCharCode(parseInt(c) + 1632);
+        });
+    }
+	
+    /**
+     * Converts the digits in the text to European or Arabic digits
+     * According to the type of the preceding strong character.
+     * @param context:The current effective context.
+     * Allowed values:
+     * '1': European context
+     * '2': Arabic context
+     */
+    function _shapeContextual(text, context) {
+        return text.replace(regex, function(match, latinDigit, arabicDigit, strongArabic, strongLatin){
+            if (latinDigit) {
+                return (context === 2) ? String.fromCharCode(parseInt(latinDigit) + 1632) : latinDigit;
+            } else if (arabicDigit) {
+                return (context === 1) ? arabicDigit.charCodeAt(0) - 1632 : arabicDigit;
+            } else if (strongArabic) {
+                context = 2;
+            } else if (strongLatin) {
+                context = 1;
+            }
+            return match;
+        });
+    }
+    return {
+        shape: _shape
+    }
+})();

editor/js/main.js

@@ -180,10 +180,20 @@ var RED = (function() {
             {id:"menu-item-status",label:RED._("menu.label.displayStatus"),toggle:true,onselect:toggleStatus, selected: true},
             null,
             {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.text.bidi.setTextDirection("")}}},
+                {id:"menu-item-bidi-default",toggle:"text-direction",label:RED._("menu.label.view.defaultDir"),selected: true, onselect:function(s) { if (s) {RED.bidi.setTextDirection("")}}},
-                {id:"menu-item-bidi-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("ltr")}}},
+                {id:"menu-item-bidi-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if (s) {RED.bidi.setTextDirection("ltr")}}},
-                {id:"menu-item-bidi-rtl",toggle:"text-direction",label:RED._("menu.label.view.rtl"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("rtl")}}},
+                {id:"menu-item-bidi-rtl",toggle:"text-direction",label:RED._("menu.label.view.rtl"), onselect:function(s) { if (s) {RED.bidi.setTextDirection("rtl")}}},
-                {id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("auto")}}}
+                {id:"menu-item-bidi-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if (s) {RED.bidi.setTextDirection("auto")}}}
+            ]},
+            {id:"menu-item-numerals",label:RED._("menu.label.view.numericShaping"),options:[
+               {id:"menu-item-numerals-default",toggle:"numeral-type",label:RED._("menu.label.view.defaultNumeral"),selected: true, onselect:function(s) { if(s){RED.bidi.setNumericShapingType("defaultNumeral")}}},
+               {id:"menu-item-numerals-national",toggle:"numeral-type",label:RED._("menu.label.view.national"), onselect:function(s) { if (s) {RED.bidi.setNumericShapingType("national")}}},
+               {id:"menu-item-numerals-contextual",toggle:"numeral-type",label:RED._("menu.label.view.contextual"), onselect:function(s) { if (s){RED.bidi.setNumericShapingType("contextual")}}} 
+            ]},
+            {id:"menu-item-calendars",label:RED._("menu.label.view.calendar"),options:[
+               {id:"menu-item-calendars-default",toggle:"calendar-type",label:RED._("menu.label.view.defaultCalendar"),selected: true, onselect:function(s) { if(s) {RED.bidi.setCalendarType("gregorian")}}},
+               {id:"menu-item-calendars-hijri",toggle:"calendar-type",label:RED._("menu.label.view.hijri"), onselect:function(s) { if (s) {RED.bidi.setCalendarType("hijri")}}},
+               {id:"menu-item-calendars-hebrew",toggle:"calendar-type",label:RED._("menu.label.view.hebrew"), onselect:function(s) { if (s) {RED.bidi.setCalendarType("hebrew")}}}
             ]},
             null,
             {id:"menu-item-sidebar",label:RED._("menu.label.sidebar.show"),toggle:true,onselect:RED.sidebar.toggleSidebar, selected: true}
@@ -226,6 +236,11 @@ var RED = (function() {
 
         RED.menu.init({id:"btn-sidemenu",options: menuOptions});
 
+        //apply rtl direction on body tag in case of GUI mirroring is enabled
+        if (RED.bidi.isMirroringEnabled()) {
+            $("body").attr("dir","rtl");
+        }
+        
         RED.user.init();
 
         RED.library.init();

editor/js/text/bidi.js

@@ -1,130 +0,0 @@
-/**
- * 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.text = {};
-RED.text.bidi = (function() {
-    var textDir = "";
-    var LRE = "\u202A",
-        RLE = "\u202B",
-        PDF = "\u202C";
-
-    function isRTLValue(stringValue) {
-        var length = stringValue.length;
-        for (var i=0;i<length;i++) {
-            if (isBidiChar(stringValue.charCodeAt(i))) {
-                return true;
-            }
-            else if(isLatinChar(stringValue.charCodeAt(i))) {
-                return false;
-            }
-         }
-         return false;
-    }
-
-    function isBidiChar(c)  {
-        return (c >= 0x05d0 && c <= 0x05ff)||
-               (c >= 0x0600 && c <= 0x065f)||
-               (c >= 0x066a && c <= 0x06ef)||
-               (c >= 0x06fa && c <= 0x07ff)||
-               (c >= 0xfb1d && c <= 0xfdff)||
-               (c >= 0xfe70 && c <= 0xfefc);
-    }
-
-    function isLatinChar(c){
-        return (c > 64 && c < 91)||(c > 96 && c < 123)
-    }
-
-    /**
-     * 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()));
-    }
-
-    /**
-     * Adds event listeners to the Input to ensure its text-direction attribute
-     * is properly set based on its content.
-     * @param input - the input field
-     */
-    function prepareInput(input) {
-        input.on("keyup",onInputChange).on("paste",onInputChange).on("cut",onInputChange);
-        // Set the initial text direction
-        onInputChange.call(input);
-    }
-
-    /**
-     * 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
-     * workspace 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;
-        RED.nodes.eachNode(function(n) { n.dirty = true;});
-        RED.view.redraw();
-        RED.palette.refresh();
-        enforceTextDirectionOnPage();
-    }
-
-    return {
-        setTextDirection: setTextDirection,
-        enforceTextDirectionWithUCC: enforceTextDirectionWithUCC,
-        resolveBaseTextDir: resolveBaseTextDir,
-        prepareInput: prepareInput
-    }
-})();

editor/js/ui/common/menu.js

@@ -75,7 +75,7 @@ RED.menu = (function() {
                 linkContent += '<span class="menu-label-container"><span class="menu-label">'+opt.label+'</span>'+
                                '<span class="menu-sublabel">'+opt.sublabel+'</span></span>'
             } else {
-                linkContent += '<span class="menu-label">'+opt.label+'</span>'
+                linkContent += '<span class="menu-label">'+RED.bidi.applyBidiSupport(opt.label, RED.bidi.flags.NS)+'</span>'
             }
 
             linkContent += '</a>';

editor/js/ui/common/popover.js

@@ -34,8 +34,8 @@ RED.popover = (function() {
                 var targetHeight = target.height();
 
                 var divHeight = div.height();
-                div.css({top: targetPos.top+targetHeight/2-divHeight/2-10,left:targetPos.left+targetWidth+17});
+                var popoverPos = ((RED.bidi.isMirroringEnabled()) ? targetPos.left-targetWidth-210 : targetPos.left+targetWidth+17);
-
+                div.css({top: targetPos.top+targetHeight/2-divHeight/2-10,left:popoverPos});
                 div.fadeIn("fast");
             }
         }

editor/js/ui/common/searchBox.js

@@ -89,6 +89,7 @@
             if (val === undefined || val === null || val === "") {
                 this.resultCount.text("").hide();
             } else {
+            	val = RED.bidi.applyBidiSupport(val,RED.bidi.flags.NS);
                 this.resultCount.text(val).show();
             }
         }

editor/js/ui/common/tabs.js

@@ -202,9 +202,8 @@ RED.tabs = (function() {
                 if (tab.icon) {
                     $('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
                 }
-                var span = $('<span/>',{class:"bidiAware"}).text(tab.label).appendTo(link);
+                var span = $('<span/>',{class:"bidiAware"});
-                span.attr('dir', RED.text.bidi.resolveBaseTextDir(tab.label));
+                span.attr('dir', RED.bidi.resolveBaseTextDir(tab.label)).text(RED.bidi.applyBidiSupport(tab.label,RED.bidi.flags.NS)).appendTo(link);
-
                 link.on("click",onTabClick);
                 link.on("dblclick",onTabDblClick);
                 if (tab.closeable) {
@@ -314,7 +313,7 @@ RED.tabs = (function() {
                 tabs[id].label = label;
                 var tab = ul.find("a[href='#"+id+"']");
                 tab.attr("title",label);
-                tab.find("span").text(label).attr('dir', RED.text.bidi.resolveBaseTextDir(label));
+                tab.find("span").attr('dir', RED.bidi.resolveBaseTextDir(label)).text(RED.bidi.applyBidiSupport(label,RED.bidi.flags.NS));
                 updateTabWidths();
             },
             order: function(order) {

editor/js/ui/common/typedInput.js

@@ -198,12 +198,12 @@
                 if (opt.label) {
                     op.text(opt.label);
                 }
+                // reverse property direction in case of right directionality
                 if (opt.icon) {
-                    $('<img>',{src:opt.icon,style:"margin-right: 4px; height: 18px;"}).prependTo(op);
+                    $('<img>',{src:opt.icon,style:"margin-"+RED.bidi.componentPos.right+": 4px; height: 18px;"}).prependTo(op);
                 } else {
-                    op.css({paddingLeft: "18px"});
+                	op.css("padding-"+RED.bidi.componentPos.left, "18px");
                 }
-
                 op.click(function(event) {
                     event.preventDefault();
                     callback(opt.value);
@@ -225,15 +225,19 @@
             var that = this;
             var pos = relativeTo.offset();
             var height = relativeTo.height();
+            var width = relativeTo.outerWidth();
             var menuHeight = menu.height();
             var top = (height+pos.top-3);
             if (top+menuHeight > $(window).height()) {
                 top -= (top+menuHeight)-$(window).height()+5;
             }
+            
+            var menuPos = ((RED.bidi.isMirroringEnabled()) ? ((pos.left + width) - (menu.offset().left + menu.outerWidth())) : (2+pos.left));
             menu.css({
                 top: top+"px",
-                left: (2+pos.left)+"px",
+                left: menuPos+"px",
             });
+            
             menu.slideDown(100);
             this._delay(function() {
                 that.uiSelect.addClass('red-ui-typedInput-focus');
@@ -271,9 +275,10 @@
             } else {
                 this.selectTrigger.width('auto');
                 var labelWidth = this._getLabelWidth(this.selectTrigger);
-                this.elementDiv.css('left',labelWidth+"px");
+                // reverse property direction in case of right directionality
+                this.elementDiv.css(RED.bidi.componentPos.left,labelWidth+"px");
                 if (this.optionSelectTrigger) {
-                    this.optionSelectTrigger.css('left',(labelWidth+5)+"px");
+                    this.optionSelectTrigger.css(RED.bidi.componentPos.left,(labelWidth+5)+"px");
                 }
             }
         },
@@ -336,7 +341,7 @@
                         image = new Image();
                         image.name = opt.icon;
                         image.src = opt.icon;
-                        $('<img>',{src:opt.icon,style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel);
+                        $('<img>',{src:opt.icon,style:"margin-"+RED.bidi.componentPos.right+": 4px;height: 18px;"}).prependTo(this.selectLabel);
                     } else {
                         this.selectLabel.text(opt.label);
                     }

editor/js/ui/deploy.js

@@ -114,7 +114,7 @@ RED.deploy = (function() {
                 ],
                 create: function() {
                     $("#node-dialog-confirm-deploy").parent().find("div.ui-dialog-buttonpane")
-                        .prepend('<div style="height:0; vertical-align: middle; display:inline-block; margin-top: 13px; float:left;">'+
+                        .prepend('<div style="height:0; vertical-align: middle; display:inline-block; margin-top: 13px; float:'+RED.bidi.componentPos.left+';">'+
                                    '<input style="vertical-align:top;" type="checkbox" id="node-dialog-confirm-deploy-hide">'+
                                    '<label style="display:inline;" for="node-dialog-confirm-deploy-hide"> do not warn about this again</label>'+
                                    '<input type="hidden" id="node-dialog-confirm-deploy-type">'+
@@ -570,7 +570,7 @@ RED.deploy = (function() {
                     $( "#node-dialog-confirm-deploy-config" ).show();
                     invalidNodes.sort(sortNodeInfo);
                     $( "#node-dialog-confirm-deploy-invalid-list" )
-                        .html("<li>"+invalidNodes.map(function(A) { return (A.tab?"["+A.tab+"] ":"")+A.label+" ("+A.type+")"}).join("</li><li>")+"</li>");
+                        .html("<li>"+invalidNodes.map(function(A) { return (A.tab?"["+RED.bidi.applyBidiSupport(A.tab, RED.bidi.flags.NS)+"] ":"")+RED.bidi.applyBidiSupport(A.label, RED.bidi.flags.NS)+" ("+A.type+")"}).join("</li><li>")+"</li>");
 
                 } else if (hasUnusedConfig && !ignoreDeployWarnings.unusedConfig) {
                     // showWarning = true;

editor/js/ui/editor.js

@@ -315,12 +315,12 @@ RED.editor = (function() {
                 val = "";
             }
             if (definition !== undefined && definition[property].hasOwnProperty("format") && definition[property].format !== "" && input[0].nodeName === "DIV") {
-                input.html(RED.text.format.getHtml(val, definition[property].format, {}, false, "en"));
+                input.html(RED.bidi.applyBidiSupport(val, RED.bidi.flags.STT_GETHTML, definition[property].format, {}));
-                RED.text.format.attach(input[0], definition[property].format, {}, false, "en");
+                RED.bidi.applyBidiSupport(input[0],RED.bidi.flags.STT_ATTACH, definition[property].format, {});
             } else {
                 input.val(val);
                 if (input[0].nodeName === 'INPUT' || input[0].nodeName === 'TEXTAREA') {
-                    RED.text.bidi.prepareInput(input);
+                	RED.bidi.prepareInput(input);
                 }
             }
         }
@@ -1186,7 +1186,7 @@ RED.editor = (function() {
                 }
 
                 configNodes.forEach(function(cn) {
-                    select.append('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'>'+RED.text.bidi.enforceTextDirectionWithUCC(cn.__label__)+'</option>');
+                    select.append('<option value="'+cn.id+'"'+(value==cn.id?" selected":"")+'>'+RED.bidi.applyBidiSupport(cn.__label__,RED.bidi.flags.BTD & RED.bidi.flags.NS)+'</option>');
                     delete cn.__label__;
                 });
 
@@ -1320,7 +1320,7 @@ RED.editor = (function() {
                 });
 
                 $("#subflow-input-name").val(subflow.name);
-                RED.text.bidi.prepareInput($("#subflow-input-name"));
+                RED.bidi.prepareInput($("#subflow-input-name"));
                 subflowEditor.getSession().setValue(subflow.info||"",-1);
                 var userCount = 0;
                 var subflowType = "subflow:"+editing_node.id;

editor/js/ui/keyboard.js

@@ -105,7 +105,7 @@ RED.keyboard = (function() {
         }
         if (!dialog) {
             dialog = $('<div id="keyboard-help-dialog" class="hide">'+
-                '<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
+                '<div id="keyboard-help-dialog-div1">'+
                     '<table class="keyboard-shortcuts">'+
                         '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">a</span></td><td>'+RED._("keyboard.selectAll")+'</td></tr>'+
                         '<tr><td><span class="help-key">Shift</span> + <span class="help-key">Click</span></td><td>'+RED._("keyboard.selectAllConnected")+'</td></tr>'+
@@ -121,7 +121,7 @@ RED.keyboard = (function() {
                         '<tr><td><span class="help-key">Shift</span> + <span class="help-key"> &#x2193; </span></td></tr>'+
                     '</table>'+
                 '</div>'+
-                '<div style="vertical-align: top;display:inline-block; box-sizing: border-box; width:50%; padding: 10px;">'+
+                '<div id="keyboard-help-dialog-div2">'+
                     '<table class="keyboard-shortcuts">'+
                         '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">Space</span></td><td>'+RED._("keyboard.toggleSidebar")+'</td></tr>'+
                         '<tr><td><span class="help-key">Ctrl/&#8984;</span> + <span class="help-key">.</span></td><td>'+RED._("keyboard.searchBox")+'</td></tr>'+

editor/js/ui/notifications.js

@@ -17,6 +17,7 @@ RED.notify = (function() {
     var currentNotifications = [];
     var c = 0;
     return function(msg,type,fixed,timeout) {
+        msg = RED.bidi.applyBidiSupport(msg ,RED.bidi.flags.NS);
         if (currentNotifications.length > 4) {
             var ll = currentNotifications.length;
             for (var i = 0;ll > 4 && i<currentNotifications.length;i+=1) {

editor/js/ui/palette-editor.js

@@ -235,6 +235,7 @@ RED.palette.editor = (function() {
                     }
                 }
                 var nodeCount = (activeTypeCount === typeCount)?typeCount:activeTypeCount+" / "+typeCount;
+                nodeCount = RED.bidi.applyBidiSupport(nodeCount,RED.bidi.flags.NS);
                 nodeEntry.setCount.html(RED._('palette.editor.nodeCount',{count:typeCount,label:nodeCount}));
 
                 if (nodeEntries[module].totalUseCount > 0) {
@@ -454,7 +455,7 @@ RED.palette.editor = (function() {
                     var titleRow = $('<div class="palette-module-meta palette-module-name"><i class="fa fa-cube"></i></div>').appendTo(headerRow);
                     $('<span>').html(entry.name).appendTo(titleRow);
                     var metaRow = $('<div class="palette-module-meta palette-module-version"><i class="fa fa-tag"></i></div>').appendTo(headerRow);
-                    $('<span>').html(entry.version).appendTo(metaRow);
+                    $('<span>').html(RED.bidi.applyBidiSupport(entry.version,RED.bidi.flags.NS)).appendTo(metaRow);
                     var buttonRow = $('<div>',{class:"palette-module-meta"}).appendTo(headerRow);
                     var setButton = $('<a href="#" class="editor-button editor-button-small palette-module-set-button"><i class="fa fa-angle-right palette-module-node-chevron"></i> </a>').appendTo(buttonRow);
                     var setCount = $('<span>').appendTo(setButton);

editor/js/ui/palette.js

@@ -86,20 +86,22 @@ RED.palette = (function() {
         }
         displayLines.push(currentLine);
 
-        var lines = displayLines.join("<br/>");
+        var tempLines = displayLines.join("^&%");
+        tempLines =RED.bidi.applyBidiSupport(tempLines, RED.bidi.flags.NS);
+        var lines = tempLines.replace("^&%", "<br/>");
         var multiLineNodeHeight = 8+(lineHeight*displayLines.length);
         el.css({height:multiLineNodeHeight+"px"});
 
         var labelElement = el.find(".palette_label");
-        labelElement.html(lines).attr('dir', RED.text.bidi.resolveBaseTextDir(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>"+RED.text.bidi.enforceTextDirectionWithUCC(label)+"</b></p>";
+            var l = "<p><b>"+RED.bidi.applyBidiSupport(label,RED.bidi.flags.BTD & RED.bidi.flags.NS)+"</b></p>";
             if (label != type) {
-                l = "<p><b>"+RED.text.bidi.enforceTextDirectionWithUCC(label)+"</b><br/><i>"+type+"</i></p>";
+                l = "<p><b>"+RED.bidi.applyBidiSupport(label,RED.bidi.flags.BTD & RED.bidi.flags.NS)+"</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) {

editor/js/ui/sidebar.js

@@ -113,7 +113,7 @@ RED.sidebar = (function() {
                     sidebarSeparator.opening = true;
                     var newChartRight = 7;
                     $("#sidebar").addClass("closing");
-                    $("#workspace").css("right",newChartRight);
+                    $("#workspace").css(RED.bidi.componentPos.right,newChartRight);
                     $("#editor-stack").css("right",newChartRight+1);
                     $("#sidebar").width(0);
                     RED.menu.setSelected("menu-item-sidebar",true);
@@ -123,16 +123,21 @@ RED.sidebar = (function() {
             },
             drag: function(event,ui) {
                 var d = ui.position.left-sidebarSeparator.start;
-                var newSidebarWidth = sidebarSeparator.width-d;
+                // using to handle sidebar width at both RTL and LTR UIs
+                var newSidebarWidth = (RED.bidi.isMirroringEnabled() ? sidebarSeparator.width + d : sidebarSeparator.width - d);
                 if (sidebarSeparator.opening) {
                     newSidebarWidth -= 3;
                 }
 
                 if (newSidebarWidth > 150) {
-                    if (sidebarSeparator.chartWidth+d < 200) {
+                	// to handle sidebar width at both RTL and LTR UIs
+                	var tempValue = (RED.bidi.isMirroringEnabled() ? sidebarSeparator.chartWidth - d : sidebarSeparator.chartWidth + d);
+                    if (tempValue < 200) {
+                    	
                         ui.position.left = 200+sidebarSeparator.start-sidebarSeparator.chartWidth;
                         d = ui.position.left-sidebarSeparator.start;
-                        newSidebarWidth = sidebarSeparator.width-d;
+                        // to handle sidebar width at both RTL and LTR UIs
+                        newSidebarWidth = (RED.bidi.isMirroringEnabled() ? sidebarSeparator.width + d : sidebarSeparator.width - d);
                     }
                 }
 
@@ -151,8 +156,9 @@ RED.sidebar = (function() {
                     $("#sidebar").removeClass("closing");
                 }
 
-                var newChartRight = sidebarSeparator.chartRight-d;
+                //to handle workspace css right property at both RTL and LTR UIs
-                $("#workspace").css("right",newChartRight);
+                var newChartRight = (RED.bidi.isMirroringEnabled() ? $("#editor-stack").css("right") : sidebarSeparator.chartRight-d);
+                $("#workspace").css(RED.bidi.componentPos.right,(RED.bidi.isMirroringEnabled() ? newSidebarWidth+2 : newChartRight));
                 $("#editor-stack").css("right",newChartRight+1);
                 $("#sidebar").width(newSidebarWidth);
 
@@ -165,12 +171,12 @@ RED.sidebar = (function() {
                     RED.menu.setSelected("menu-item-sidebar",false);
                     if ($("#sidebar").width() < 180) {
                         $("#sidebar").width(180);
-                        $("#workspace").css("right",187);
+                        $("#workspace").css(RED.bidi.componentPos.right,187);
                         $("#editor-stack").css("right",188);
                     }
                 }
-                $("#sidebar-separator").css("left","auto");
+                $("#sidebar-separator").css(RED.bidi.componentPos.left,"auto");
-                $("#sidebar-separator").css("right",($("#sidebar").width()+2)+"px");
+                $("#sidebar-separator").css(RED.bidi.componentPos.right,($("#sidebar").width()+2)+"px");
                 RED.events.emit("sidebar:resize");
             }
     });

editor/js/ui/subflow.js

@@ -139,7 +139,7 @@ RED.subflow = (function() {
         RED.view.select();
         RED.nodes.dirty(true);
         RED.view.redraw();
-        $("#workspace-subflow-output .spinner-value").html(subflow.out.length);
+        $("#workspace-subflow-output .spinner-value").html(RED.bidi.applyBidiSupport(subflow.out.length,RED.bidi.flags.NS));
     }
 
     function removeSubflowOutput(removedSubflowOutputs) {
@@ -216,7 +216,7 @@ RED.subflow = (function() {
             $("#workspace-subflow-input-add").toggleClass("active", activeSubflow.in.length !== 0);
             $("#workspace-subflow-input-remove").toggleClass("active",activeSubflow.in.length === 0);
 
-            $("#workspace-subflow-output .spinner-value").html(activeSubflow.out.length);
+            $("#workspace-subflow-output .spinner-value").html(RED.bidi.applyBidiSupport(activeSubflow.out.length,RED.bidi.flags.NS));
         }
     }
 
@@ -224,15 +224,15 @@ RED.subflow = (function() {
         var toolbar = $("#workspace-toolbar");
         toolbar.empty();
 
-        $('<a class="button" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
+        $('<a class="button subflow-toolbar" id="workspace-subflow-edit" href="#" data-i18n="[append]subflow.editSubflowProperties"><i class="fa fa-pencil"></i> </a>').appendTo(toolbar);
-        $('<span style="margin-left: 5px;" data-i18n="subflow.input"></span> '+
+        $('<span class="workspace-subflow-label" data-i18n="subflow.input"></span> '+
-            '<div style="display: inline-block;" class="button-group">'+
+            '<div style="display: inline-block;" class="button-group subflow-toolbar">'+
-            '<a id="workspace-subflow-input-remove" class="button active" href="#">0</a>'+
+            '<a id="workspace-subflow-input-remove" class="button active subflow-toolbar" href="#">0</a>'+
             '<a id="workspace-subflow-input-add" class="button" href="#">1</a>'+
             '</div>').appendTo(toolbar);
 
-        $('<span style="margin-left: 5px;" data-i18n="subflow.output"></span> <div id="workspace-subflow-output" style="display: inline-block;" class="button-group spinner-group">'+
+        $('<span class="workspace-subflow-label" data-i18n="subflow.output"></span> <div id="workspace-subflow-output" style="display: inline-block;" class="button-group spinner-group">'+
-            '<a id="workspace-subflow-output-remove" class="button" href="#"><i class="fa fa-minus"></i></a>'+
+            '<a id="workspace-subflow-output-remove" class="button subflow-toolbar" href="#"><i class="fa fa-minus"></i></a>'+
             '<div class="spinner-value">3</div>'+
             '<a id="workspace-subflow-output-add" class="button" href="#"><i class="fa fa-plus"></i></a>'+
             '</div>').appendTo(toolbar);
@@ -243,6 +243,11 @@ RED.subflow = (function() {
         toolbar.i18n();
 
 
+        var subflow_add = RED.bidi.applyBidiSupport($("#workspace-subflow-input-add").text(),RED.bidi.flags.NS);
+        var subflow_remove = RED.bidi.applyBidiSupport($("#workspace-subflow-input-remove").text(),RED.bidi.flags.NS);
+        $("#workspace-subflow-input-add").html(subflow_add);
+        $("#workspace-subflow-input-remove").html(subflow_remove);
+        
         $("#workspace-subflow-output-remove").click(function(event) {
             event.preventDefault();
             var wasDirty = RED.nodes.dirty();

editor/js/ui/tab-info.js

@@ -70,10 +70,10 @@ 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;<span class="bidiAware" dir="'+RED.text.bidi.resolveBaseTextDir(node.name)+'">'+node.name+'</span></td></tr>';
+            table += '<tr><td>'+RED._("common.label.name")+'</td><td>&nbsp;<span class="bidiAware" dir="'+RED.bidi.resolveBaseTextDir(node.name)+'">'+RED.bidi.applyBidiSupport(node.name,RED.bidi.flags.NS)+'</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>";
+        table += "<tr><td>"+RED._("sidebar.info.id")+"</td><td>&nbsp;"+RED.bidi.applyBidiSupport(node.id,RED.bidi.flags.NS)+"</td></tr>";
 
         var m = /^subflow(:(.+))?$/.exec(node.type);
         var subflowNode;
@@ -93,8 +93,8 @@ RED.sidebar.info = (function() {
                     userCount++;
                 }
             });
-            table += '<tr><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.name)+'">'+subflowNode.name+'</span></td></tr>';
+            table += '<tr><td>'+RED._("common.label.name")+'</td><td><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(subflowNode.name)+'">'+RED.bidi.applyBidiSupport(subflowNode.name,RED.bidi.flags.NS)+'</span></td></tr>';
-            table += "<tr><td>"+RED._("sidebar.info.instances")+"</td><td>"+userCount+"</td></tr>";
+            table += "<tr><td>"+RED._("sidebar.info.instances")+"</td><td>"+RED.bidi.applyBidiSupport(userCount,RED.bidi.flags.NS)+"</td></tr>";
         }
 
         if (!m && node.type != "subflow" && node.type != "comment") {
@@ -132,7 +132,7 @@ RED.sidebar.info = (function() {
                             val = val.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
                         }
 
-                        table += '<tr class="node-info-property-row'+(propertiesExpanded?"":" hide")+'"><td>'+n+"</td><td>"+val+"</td></tr>";
+                        table += '<tr class="node-info-property-row'+(propertiesExpanded?"":" hide")+'"><td>'+n+"</td><td>"+RED.bidi.applyBidiSupport(val,RED.bidi.flags.NS)+"</td></tr>";
                     }
                 }
             }
@@ -140,14 +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"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(helpText)+'">'+helpText+'</span></div>';
+            table  += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.bidi.resolveBaseTextDir(helpText)+'">'+RED.bidi.applyBidiSupport(helpText,RED.bidi.flags.NS)+'</span></div>';
         }
         if (subflowNode) {
-            table += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(subflowNode.info||"")+'">'+marked(subflowNode.info||"")+'</span></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;
             var textInfo = (typeof info === "function" ? info.call(node) : info);
-            table += '<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(textInfo)+'">'+marked(textInfo)+'</span></div>';
+            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>';
         }
 

editor/js/ui/view.js

@@ -1454,7 +1454,7 @@ RED.view = (function() {
                     .on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
 
                 outGroup.append("svg:text").attr("class","port_label").attr("x",20).attr("y",8).style("font-size","10px").text("output");
-                outGroup.append("svg:text").attr("class","port_label port_index").attr("x",20).attr("y",24).text(function(d,i){ return i+1});
+                outGroup.append("svg:text").attr("class","port_label port_index").attr("x",20).attr("y",24).text(function(d,i){ return RED.bidi.applyBidiSupport(i+1,RED.bidi.flags.NS)});
 
                 var subflowInputs = vis.selectAll(".subflowinput").data(activeSubflow.in,function(d,i){ return d.id;});
                 subflowInputs.exit().remove();
@@ -1503,7 +1503,7 @@ RED.view = (function() {
                     if (d.dirty) {
                         var output = d3.select(this);
                         output.selectAll(".subflowport").classed("node_selected",function(d) { return d.selected; })
-                        output.selectAll(".port_index").text(function(d){ return d.i+1});
+                        output.selectAll(".port_index").text(function(d){ return RED.bidi.applyBidiSupport(d.i+1, RED.bidi.flags.NS)});
                         output.attr("transform", function(d) { return "translate(" + (d.x-d.w/2) + "," + (d.y-d.h/2) + ")"; });
                         dirtyNodes[d.id] = d;
                         d.dirty = false;
@@ -1809,7 +1809,7 @@ RED.view = (function() {
                                         l = d._def.label;
                                         try {
                                             l = (typeof l === "function" ? l.call(d) : l)||"";
-                                            l = RED.text.bidi.enforceTextDirectionWithUCC(l);
+                                            l = RED.bidi.applyBidiSupport(l,RED.bidi.flags.BTD & RED.bidi.flags.NS);
                                         } catch(err) {
                                             console.log("Definition error: "+d.type+".label",err);
                                             l = d.type;

editor/js/ui/workspaces.js

@@ -113,7 +113,7 @@ RED.workspaces = (function() {
                 $('<input type="text" style="display: none;" />').prependTo(dialogForm);
                 dialogForm.submit(function(e) { e.preventDefault();});
                 $("#node-input-name").val(workspace.label);
-                RED.text.bidi.prepareInput($("#node-input-name"))
+                RED.bidi.prepareInput($("#node-input-name"))
                 dialogForm.i18n();
             },
             close: function() {

editor/sass/dropdownMenu.scss

@@ -25,19 +25,41 @@
     margin-left: -25px;
     margin-top: 3px;
 }
+
+[dir="rtl"] .dropdown-menu * .fa-check-square {
+    float: right;
+    margin-left: initial;
+    margin-right: -8px;
+}
+
 .dropdown-menu * a.active > .fa-check-square {
     display: inline-block;
 }
+
+[dir="rtl"] .dropdown-menu * a.active > .fa-check-square {
+    float: right;
+}
+
 .dropdown-menu * .fa-square {
     display: inline-block;
     color: #e0e0e0;
     margin-left: -25px;
     margin-top: 3px;
 }
+
+[dir="rtl"] .dropdown-menu * .fa-square {
+    float: right;
+    margin-left: initial;
+    margin-right: -8px;
+} 
+
 .dropdown-menu * a.active > .fa-square {
     display: none;
 }
 
+[dir="rtl"] .dropdown-menu * a.active > .fa-square {
+    float: right;
+}
 
 .dropdown-menu>li.disabled>a:hover>[class^="icon-"] {
     background-image: url("vendor/bootstrap/img/glyphicons-halflings.png") !important;
@@ -48,6 +70,12 @@
     width: 200px !important;
     margin-left: 0px !important;
 }
+
+[dir="rtl"] .dropdown-menu{
+    right: auto;
+    left: 0;
+}
+
 .dropdown-menu > li > a > i {
     width: 10px;
     text-align: center;
@@ -76,9 +104,18 @@
     content: " ";
 }
 
+[dir="rtl"] .dropdown-submenu>a:before {
+    float : right;
+    transform: rotate(180deg);
+}
+
 .dropdown-submenu.disabled > a:before {
     border-right-color: #444;
 }
 .dropdown-submenu.pull-left>.dropdown-menu {
     border-radius: 0;
 }
+
+[dir="rtl"] .dropdown-submenu.pull-left>.dropdown-menu {
+    right: -250px;
+}

editor/sass/editor.scss

@@ -24,6 +24,11 @@
     width: 0;
     z-index: 5;
 }
+
+[dir="rtl"] #editor-stack {
+    right: 180px;
+}
+
 .editor-tray {
     position:absolute;
     margin: 0;
@@ -48,6 +53,7 @@
 .editor-tray-body {
     margin: 20px;
 }
+
 .editor-tray-header {
     @include disable-selection;
     position: relative;
@@ -118,6 +124,16 @@
     }
 }
 
+[dir="rtl"] .editor-tray-toolbar {
+    text-align: left;
+    
+    button {
+        &.leftButton {
+            float: left;
+        }
+    }
+}
+
 .editor-tray-titlebar {
     border-bottom: 1px solid $secondary-border-color;
     padding: 8px;
@@ -266,6 +282,9 @@
     font-size: 12px !important;
     line-height: 35px;
 }
+[dir="rtl"] #node-config-dialog-scope-container {
+    float: left;
+}
 #node-config-dialog-scope-warning {
     display: inline-block;
     margin-right: 5px;
@@ -287,3 +306,28 @@
     font-size: 12px;
     line-height: 35px;
 }
+[dir="rtl"] #node-config-dialog-user-count {
+    float: right;
+    margin-right: 0;
+    margin-left: 20px;
+}
+
+/*
+* some icons have to be rotated in case of rtl dir
+*/
+[dir="rtl"] .fa-tag,
+[dir="rtl"] .fa-tags,
+[dir="rtl"] .fa-repeat {
+    transform: rotate(90deg);
+}
+
+/*
+* some icons have to be rotated in case of rtl dir
+*/
+[dir="rtl"] .fa-random,
+[dir="rtl"] .fa-tasks,
+[dir="rtl"] .fa-list,
+[dir="rtl"] .fa-sign-out,
+[dir="rtl"] .fa-sign-in {
+    transform: rotate(180deg);
+}

editor/sass/flow.scss

@@ -68,6 +68,10 @@
     @include disable-selection;
 }
 
+[dir="rtl"] .node_label {
+    direction: ltr;
+}
+
 .port_label {
     stroke-width: 0;
     fill: #888;
@@ -179,6 +183,10 @@
     text-anchor:start;
 }
 
+[dir="rtl"] .node_status_label {
+    direction: ltr;
+}
+
 .port_hovered {
     stroke: $port-selected-color;
     fill:  $port-selected-color;

editor/sass/header.scss

@@ -65,6 +65,12 @@ span.logo {
 
 }
 
+[dir="rtl"] span.logo {
+    float: right;
+    direction: ltr;
+    padding-right: 18px;
+}
+
 .header-toolbar {
     padding: 0;
     margin: 0;
@@ -80,6 +86,10 @@ span.logo {
     }
 }
 
+[dir="rtl"] .header-toolbar {
+    float: left;
+}
+
 .button {
     @include disable-selection;
 }
@@ -119,6 +129,10 @@ span.logo {
     margin: 0;
 }
 
+[dir="rtl"] #header .button-group > a {
+    float: right;
+}
+
 .deploy-button {
     background: $deployButton;
     color: #eee !important;
@@ -217,6 +231,11 @@ span.logo {
     display: inline-block;
     text-indent: 0px;
 }
+
+[dir="rtl"] #header ul.dropdown-menu li a span.menu-label {
+    text-indent: 20px;
+} 
+
 #header ul.dropdown-menu li a span.menu-sublabel {
     color: #aeaeae;
     font-size: 13px;
@@ -224,6 +243,10 @@ span.logo {
     text-indent: 0px;
 }
 
+[dir="rtl"] #header ul.dropdown-menu li a span.menu-sublabel {
+    text-indent: 15px;
+}
+
 #header ul.dropdown-menu > li:hover > a,
 #header ul.dropdown-menu > li:focus > a {
     background: $headerMenuItemHover !important;
@@ -251,6 +274,11 @@ span.logo {
     display: inline-block;
     text-indent: 0px;
 }
+
+[dir="rtl"] #header ul#btn-deploy-options-submenu li a span.menu-label {
+    text-indent: 20px;
+}
+
 #header ul#btn-deploy-options-submenu li a {
     padding: 10px 30px;
     color: #fff;

editor/sass/jquery.scss

@@ -49,6 +49,12 @@
 .ui-dialog .ui-dialog-title {
     width: auto;
 }
+
+[dir="rtl"] .ui-dialog .ui-dialog-title {
+    float: right;
+    text-align: right;
+}
+
 .ui-dialog .ui-dialog-titlebar {
     padding: 10px;
     background: #f3f3f3;
@@ -66,10 +72,19 @@
     display: none;
 }
 
+[dir="rtl"] .ui-dialog-titlebar-close{
+    left: 15px;
+    right: auto;
+}
+
 .ui-dialog-buttonset {
     text-align: right;
 }
 
+[dir="rtl"] .ui-dialog-buttonset {
+    text-align: left;
+}
+
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
     float: none;
 }
@@ -119,6 +134,12 @@
     }
 }
 
+[dir="rtl"] .ui-dialog-buttonset button {
+    &.leftButton {
+        float: right;
+    }
+}
+
 .ui-dialog .ui-dialog-buttonpane {
     padding: .3em 1em .5em 1em;
 }

editor/sass/keyboard.scss

@@ -38,3 +38,15 @@
     box-shadow: #999 1px 1px 1px;
 }
 
+#keyboard-help-dialog-div1,
+#keyboard-help-dialog-div2 {
+    vertical-align: top;
+    display: inline-block;
+    box-sizing: border-box; 
+    width:50%; 
+    padding: 10px;
+}
+
+[dir="rtl"] #keyboard-help-dialog-div2 {
+    padding: 50px;
+}

editor/sass/palette-editor.scss

@@ -230,3 +230,80 @@
     }
 
 }
+
+[dir="rtl"] #palette-editor {
+    right: 0px;
+    text-align: right;
+    
+    .palette-editor-toolbar {
+        text-align: left;
+
+        .button-group {
+            margin-right: 0px;
+            margin-left: 10px;
+        }
+    }
+    
+    .palette-module-button-group {
+        right: initial;
+        left:0;
+        
+        a {
+            margin-left: 0px;
+            margin-right: 5px;
+            float : left;
+        }
+    }
+    
+    .palette-module-shade {
+        left:0;
+        right:0;
+    }
+
+    .palette-module-meta {
+
+        .fa {
+            margin-left: 5px;
+            margin-right: 0px;
+        }
+    }
+
+    .palette-module-updated {
+        margin-right: 10px;
+        margin-left: 0px;
+    }
+    
+    .palette-module-link {
+        margin-right: 5px;
+        margin-left: 0px;
+    }
+
+    .palette-module-description {
+        margin-right: 20px;
+        margin-left: 0px;
+    }
+    
+    .palette-module-type {
+        padding-right: 5px;
+        padding-left: 0px;
+    }
+    
+    .palette-module-type-swatch {
+        margin-left: 5px;
+        margin-right: 0px;
+    }
+    
+    .palette-module-set-button-group {
+        left: 4px;
+        right: initial;
+    }
+    
+    i.fa.palette-module-node-chevron {
+        transform: rotate(180deg);
+    }
+    .expanded {
+        i.fa.palette-module-node-chevron {
+            transform: rotate(90deg);
+        }
+    }
+}

editor/sass/palette.scss

@@ -28,6 +28,11 @@
     transition: width 0.2s ease-in-out;
 }
 
+[dir="rtl"] #palette {
+    left: initial;
+    right: 0px;
+}
+
 .palette-expanded {
     & #palette {
         width: 380px;
@@ -42,6 +47,18 @@
     & #palette-editor { display: block !important }
 }
 
+[dir="rtl"] .palette-expanded {
+    
+    & #palette {
+        width: 380px;
+        box-shadow: 0 1px 6px rgba(0,0,0,0.1);
+    }
+    
+    & #workspace {
+        left: 315px !important;
+        right: 380px !important;
+    }
+}
 
 .palette-scroll {
     position: absolute;
@@ -74,7 +91,9 @@
     @include component-footer-button;
 }
 
-
+[dir="rtl"] .palette-button {
+    float: left;
+}
 .palette-category {
     border-bottom: 1px solid #ccc;
 }
@@ -95,6 +114,11 @@
     text-overflow: ellipsis;
 
 }
+
+[dir="rtl"] .palette-header {
+    text-align: right;
+}
+
 .palette-header i {
     margin: 3px 10px 3px 3px;
     -webkit-transition: all 0.2s ease-in-out;
@@ -104,6 +128,12 @@
     -moz-transform: rotate(-90deg);
     -o-transform: rotate(-90deg);
 }
+
+[dir="rtl"] .palette-header i {
+    margin: 3px 3px 3px 10px;
+    transform: rotate(90deg);
+}
+
 .palette-header i.expanded {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
@@ -123,6 +153,10 @@
     margin: 4px 28px 4px 0;
 }
 
+[dir="rtl"] .palette_label_right {
+    margin: 4px 0 4px 28px;
+}
+
 .palette_node {
     cursor:move;
     background: #ddd;
@@ -177,6 +211,12 @@
     border-right: none;
     border-left: 1px solid rgba(0,0,0,0.1);
 }
+[dir="rtl"] .palette_icon_container_right {
+    left: 0;
+    right: auto;
+    border-left: none;
+    border-right: 1px solid rgba(0,0,0,0.1);
+}
 .palette_icon {
     display: inline-block;
     width: 20px;

editor/sass/popover.scss

@@ -28,6 +28,12 @@
      line-height: 1.4em;
      @include component-shadow;
  }
+ [dir="rtl"] .red-ui-popover {
+     transform: rotateY(180deg);
+     p {
+         transform: rotateY(180deg);
+     }
+ }
  .red-ui-popover:after, .red-ui-popover:before {
  	right: 100%;
  	top: 50%;

editor/sass/sidebar.scss

@@ -26,6 +26,11 @@
     @include component-border;
 }
 
+[dir="rtl"] #sidebar {
+    right: auto;
+    left: 0px;
+}
+
 #sidebar.closing {
     background: #eee;
     border-color: #900;
@@ -52,9 +57,26 @@
     cursor: col-resize;
 }
 
+[dir="rtl"] #sidebar-separator {
+    left: 315px;
+    right: auto;
+}
+
 .sidebar-closed > #sidebar { display: none; }
 .sidebar-closed > #sidebar-separator { right: 0px !important; }
+
+[dir="rtl"] .sidebar-closed > #sidebar-separator { 
+    left: 0px !important; 
+    right: auto !important; 
+}
+
 .sidebar-closed > #workspace { right: 7px !important; }
+
+[dir="rtl"] .sidebar-closed > #workspace { 
+    left: 7px !important;
+    right: 179px !important;
+}
+
 .sidebar-closed > #editor-stack { right: 8px !important; }
 
 #sidebar .button {
@@ -73,6 +95,10 @@
     border-bottom: 1px solid $secondary-border-color;
 }
 
+[dir="rtl"] .sidebar-header {
+    text-align: left;
+}
+
 #sidebar-footer {
     @include component-footer;
 }
@@ -96,6 +122,11 @@
     border-left: none;
 }
 
+[dir="rtl"] .button-group .sidebar-header-button:not(:first-child) {
+    border-left: solid 1px;
+    border-right: none;
+}
+
 .sidebar-shade {
     position: absolute;
     top:0;

editor/sass/tab-config.scss

@@ -49,6 +49,14 @@
          border-bottom-right-radius: 4px;
      }
 }
+[dir="rtl"] .config_node {
+    .palette_label {
+       margin-left: 0px;
+       margin-right: 8px;
+       text-align: right;
+
+   } 
+}
 .config_node_type {
     color: #999;
     text-align: right;
@@ -57,11 +65,21 @@
         margin-top: 20px;
     }
 }
+[dir="rtl"] .config_node_type {
+    text-align: left;
+    padding-right: 0px;
+    padding-left: 3px;
+}
 .config_node_none {
     color: #ddd;
     text-align:right;
     padding-right: 3px;
 }
+[dir="rtl"] .config_node_none {
+    text-align: left;
+    padding-right: 0px;
+    padding-left: 3px;
+}
 .config_node_unused {
     border-color: #aaa;
     background: #f9f9f9;

editor/sass/tab-info.scss

@@ -51,6 +51,13 @@ div.node-info {
 .node-info-property-header {
     color: #666;
 }
+
+[dir="rtl"] .node-info-property-header {
+    i{
+        transform: rotate(180deg);
+     }
+}
+
 .node-info-property-header:hover,
 .node-info-property-header:focus {
     color: #666;

editor/sass/tabs.scss

@@ -114,6 +114,22 @@
         padding-right: 59px;
     }
 }
+
+[dir="rtl"] .red-ui-tabs {
+    & ul {
+        li {
+            a.red-ui-tab-label {
+                padding-left: 0px;
+                padding-right: 12px;
+            }
+        }
+    }
+    &.red-ui-tabs-add.red-ui-tabs-scrollable {
+        padding-left: 59px;
+        padding-right: 21px;
+    }
+}
+
 .red-ui-tab-button {
     position: absolute;
     box-sizing: border-box;
@@ -137,6 +153,11 @@
     }
 }
 
+[dir="rtl"] .red-ui-tab-button {
+	right: initial;
+	left: 0;
+}
+
 .red-ui-tab-scroll {
     width: 21px;
     top: 0;
@@ -160,6 +181,19 @@
         // box-shadow: 8px 0px 5px -2px rgba(0,0,0,0.1);
     }
 }
+[dir="rtl"] ul.red-ui-tabs li a.red-ui-tab-label {
+    padding-left: 0px;
+    padding-right: 12px;
+}
+ul.red-ui-tabs li {
+    position: relative;
+}
+
+[dir="rtl"] .red-ui-tab-scroll-left {
+    right: 0;
+    left: initial;
+}
+
 .red-ui-tab-scroll-right {
     right: 0px;
     a {
@@ -172,6 +206,11 @@
     right: 38px;
 }
 
+[dir="rtl"] .red-ui-tabs.red-ui-tabs-add .red-ui-tab-scroll-right {
+    right: initial;
+    left: 38px;
+}
+
 .red-ui-tab-icon {
     margin-left: -8px;
     margin-right: 3px;
@@ -182,6 +221,11 @@
     vertical-align: middle;
 }
 
+[dir="rtl"] .red-ui-tab-icon{
+    margin-left: 0;
+    margin-right: 0;
+}
+
 .red-ui-tabs-badges {
     position: absolute;
     top:2px;
@@ -223,3 +267,9 @@
         opacity: 1;
     }
 }
+
+[dir="rtl"] .red-ui-tab-close {
+    right: initial;
+    left: 0px;
+}
+

editor/sass/ui/common/editableList.scss

@@ -69,3 +69,16 @@
      }
 
  }
+
+[dir="rtl"] .red-ui-editableList-container {
+    li {
+        .red-ui-editableList-item-handle {
+            left: auto;
+            right: 2px;
+        }
+        .red-ui-editableList-item-remove {
+            right: auto;
+            left: 0px;
+        }
+    }
+}

editor/sass/ui/common/searchBox.scss

@@ -68,3 +68,18 @@
         border-radius: 4px;
     }
 }
+
+[dir="rtl"] .red-ui-searchBox-container {
+    input {
+        text-indent: 6px;
+    }
+    i.fa-search {
+        left: initial;
+        right: 8px
+    }
+    .red-ui-searchBox-resultCount {
+        left: 18px;
+        right: initial;
+    }
+}
+

editor/sass/ui/common/typedInput.scss

@@ -122,6 +122,27 @@
         }
     }
 }
+
+[dir="rtl"] .red-ui-typedInput-container {
+    a {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+        
+        span {
+            padding: 0 5px 0 1px;
+        }
+    }
+    a.red-ui-typedInput-option-trigger {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        padding: 0 0 0 5px;
+    }
+}
+
 .red-ui-typedInput-options {
     @include component-shadow;
     position: absolute;

editor/sass/workspace.scss

@@ -27,6 +27,11 @@
    transition: right 0.2s ease;
 }
 
+[dir="rtl"] #chart {
+    direction: rtl;
+    text-align: right;
+}
+
 #chart:focus {
     outline: none;
 }
@@ -44,10 +49,54 @@
 
 }
 
+[dir="rtl"] #workspace {
+    left: 322px;
+    right: 179px;
+}
+
 .workspace-footer-button {
     @include component-footer-button;
 }
 
+#workspace-tabs {
+    margin-right: 35px;
+}
+
+[dir="rtl"] #workspace-tabs {
+    margin-left: 35px;
+    margin-right: initial;
+}
+
+#workspace-add-tab {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0;
+    right: 0;
+    height: 35px;
+    width: 35px;
+    background: #fff;
+    border-bottom: 1px solid $primary-border-color;
+}
+
+[dir="rtl"] #workspace-add-tab {
+    left: 0px;
+    right: initial;
+}
+
+#btn-workspace-add-tab {
+    @include workspace-button;
+    line-height: 32px;
+    height: 32px;
+    width: 32px;
+    margin-top: 3px;
+    margin-right:3px;
+    border: 1px solid $primary-border-color;
+}
+
 #workspace-footer {
     @include component-footer;
 }
+
+[dir="rtl"] #workspace-footer {
+    text-align: left;
+}

editor/sass/workspaceToolbar.scss

@@ -74,3 +74,35 @@
     }
 
 }
+
+[dir="rtl"] #workspace-toolbar {
+    .button {
+        margin-right: 0px;
+    }
+    .button-group {
+        &:not(.spinner-group) {
+            .button:not(:first-child) {
+                border-right: none;
+                border-left: solid 0.25px;
+            }
+        }
+    }
+}
+
+.workspace-subflow-label {
+     margin-left: 5px;
+ }
+ 
+ [dir="rtl"] .workspace-subflow-label {
+     margin-right: 15px;
+     margin-top: 3px;
+     float: right;
+ }
+
+[dir="rtl"] .subflow-toolbar {
+    float: right;
+}
+
+[dir="rtl"] #workspace-subflow-delete {
+    margin-right: 15px !important;
+}

editor/templates/index.mst

@@ -87,13 +87,13 @@
 
 <div id="node-dialog-confirm-deploy" class="hide">
     <form class="form-horizontal">
-        <div id="node-dialog-confirm-deploy-config" style="text-align: left; padding-top: 30px;" data-i18n="[prepend]deploy.confirm.improperlyConfigured;[append]deploy.confirm.confirm">
+        <div id="node-dialog-confirm-deploy-config" data-i18n="[prepend]deploy.confirm.improperlyConfigured;[append]deploy.confirm.confirm">
-            <ul style="font-size: 0.9em; width: 400px; margin: 10px auto; text-align: left;" id="node-dialog-confirm-deploy-invalid-list"></ul>
+            <ul id="node-dialog-confirm-deploy-invalid-list"></ul>
         </div>
         <div id="node-dialog-confirm-deploy-unknown" style="text-align: left; padding-top: 10px;" data-i18n="[prepend]deploy.confirm.unknown;[append]deploy.confirm.confirm">
-            <ul style="font-size: 0.9em; width: 400px; margin: 10px auto; text-align: left;" id="node-dialog-confirm-deploy-unknown-list"></ul>
+            <ul class="node-dialog-confirm-deploy" id="node-dialog-confirm-deploy-unknown-list"></ul>
         </div>
-        <div id="node-dialog-confirm-deploy-conflict" style="text-align: left; padding-top: 10px;" data-i18n="[prepend]deploy.confirm.conflict;[append]deploy.confirm.confirm">
+        <div id="node-dialog-confirm-deploy-conflict" data-i18n="[prepend]deploy.confirm.conflict;[append]deploy.confirm.confirm">
         </div>
     </form>
 </div>
@@ -164,5 +164,30 @@
 <script src="vendor/ace/ext-language_tools.js"></script>
 <script src="{{ asset.red }}"></script>
 
+<style>
+#node-dialog-confirm-deploy-invalid-list {
+    font-size: 0.9em;
+    width: 400px;
+    margin: 10px auto;
+    text-align: left;
+}
+[dir="rtl"] #node-dialog-confirm-deploy-invalid-list {
+    text-align: right;
+}
+#node-dialog-confirm-deploy-conflict {
+    text-align: left;
+    padding-top: 10px;
+}
+[dir="rtl"] #node-dialog-confirm-deploy-conflict {
+    text-align: right;
+}
+#node-dialog-confirm-deploy-config {
+    text-align: left;
+    padding-top: 30px;
+}
+[dir="rtl"] #node-dialog-confirm-deploy-config {
+    text-align: right;
+}
+</style>
 </body>
 </html>

nodes/core/core/25-catch.html

@@ -27,7 +27,7 @@
             <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">
               <input type="checkbox" data-i18n="[title]catch.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;">
               <div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]catch.label.sortByLabel"><span data-i18n="catch.label.node"></span> <i class="node-input-catch-sort-label-a fa fa-caret-down"></i><i class="node-input-catch-sort-label-d fa fa-caret-up"></i></a></div>
-              <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-target-sort-type" href="#" data-i18n="[title]catch.label.sortByType"><i class="node-input-catch-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-catch-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="catch.label.type"></span></a></div>
+              <div id="node-input-catch-target-sort-type"><a id="node-input-target-sort-type" href="#" data-i18n="[title]catch.label.sortByType"><i class="node-input-catch-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-catch-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="catch.label.type"></span></a></div>
             </div>
             <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">
                 <ul id="node-input-catch-target-container" style=" list-style-type:none; margin: 0;"></ul>
@@ -85,6 +85,17 @@
 #node-input-catch-target-container li:hover .node-input-target-node-sublabel {
     background: #f0f0f0;
 }
+#node-input-catch-target-sort-type {
+    position: absolute;
+    right: 10px; 
+    width: 50px; 
+    display: inline-block; 
+    text-align: right;
+}
+[dir="rtl"] #node-input-catch-target-sort-type {
+    right: auto;
+    left: 0px;
+}
 .node-input-target-node-sublabel {
     position:absolute;
     right: 0px;
@@ -93,6 +104,10 @@
     font-size: 0.8em;
     background: #fbfbfb;
 }
+[dir="rtl"] .node-input-target-node-sublabel {
+	right: auto;
+	left: 0;
+}
 </style>
 <script type="text/javascript">
     RED.nodes.registerType('catch',{

nodes/core/core/25-status.html

@@ -27,7 +27,7 @@
             <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">
               <input type="checkbox" data-i18n="[title]status.label.selectAll" id="node-input-target-node-checkbox-all" style="width: 30px; margin: 0 2px 1px 2px;">
               <div style="display: inline-block;"><a id="node-input-target-sort-label" href="#" data-i18n="[title]status.label.sortByLabel"><span data-i18n="status.label.node"></span> <i class="node-input-status-sort-label-a fa fa-caret-down"></i><i class="node-input-status-sort-label-d fa fa-caret-up"></i></a></div>
-              <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-target-sort-type" href="#" data-i18n="[title]status.label.sortByType"><i class="node-input-status-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-status-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="status.label.type"></span></a></div>
+              <div id="node-input-status-target-sort-type"><a id="node-input-target-sort-type" href="#" data-i18n="[title]status.label.sortByType"><i class="node-input-status-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-status-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="status.label.type"></span></a></div>
             </div>
             <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">
                 <ul id="node-input-status-target-container" style=" list-style-type:none; margin: 0;"></ul>
@@ -76,6 +76,17 @@
 #node-input-status-target-container li:hover .node-input-target-node-sublabel {
     background: #f0f0f0;
 }
+#node-input-status-target-sort-type {
+    position: absolute;
+    right: 10px;
+    width: 50px;
+    display: inline-block;
+    text-align: right;"
+}
+[dir="rtl"] #node-input-status-target-sort-type {
+    right: auto;
+    left: 0;
+}
 .node-input-target-node-sublabel {
     position:absolute;
     right: 0px;

nodes/core/core/58-debug.html

@@ -119,7 +119,7 @@
 
             function getTimestamp() {
                 var d = new Date();
-                return d.toLocaleString();
+                return RED.bidi.applyBidiSupport(d,RED.bidi.flags.CALENDAR);
             }
 
             var sbc = document.getElementById("debug-content");
@@ -198,10 +198,11 @@
                 } else {
                     msg.innerHTML += '<span class="debug-message-topic">'+
                                     (o.topic?topic+' : ':'')+
-                                    (o.property?'msg.'+property:'msg')+" : "+format+
+                                    (o.property?'msg.'+property:'msg')+" : "+RED.bidi.applyBidiSupport(format,RED.bidi.flags.NS)+
 
                                     '</span>';
                 }
+                payload = RED.bidi.applyBidiSupport(payload,RED.bidi.flags.NS);
                 msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
                 var atBottom = (sbc.scrollHeight-messages.height()-sbc.scrollTop) < 5;
                 messageCount++;

nodes/core/core/60-link.html

@@ -70,6 +70,25 @@
 #node-input-link-container li:hover .node-input-target-node-sublabel {
     background: #f0f0f0;
 }
+#node-input-link-sort-type-div {
+    position: absolute;
+    right: 10px;
+    width: 50px;
+    display: inline-block;
+    text-align: right;"
+}
+[dir="rtl"] #node-input-link-sort-type-div {
+    right: auto;
+    left: 0;
+}
+#node-input-link-sort-label-div {
+    display: inline-block;
+    margin-left: 5px;
+}
+[dir="rtl"] #node-input-link-sort-label-div {
+	margin-left: 0;
+	margin-right: 5px;
+}
 .node-input-link-node-sublabel {
     position:absolute;
     right: 0px;
@@ -131,8 +150,8 @@
 
         $('<div id="node-input-link-container-div" style="min-height: 100px;position: relative;   box-sizing: border-box; border-radius: 2px; height: 180px;  border: 1px solid #ccc;overflow:hidden; ">'+
             '    <div style="box-sizing: border-box; line-height: 20px; font-size: 0.8em; border-bottom: 1px solid #ddd; height: 20px;">'+
-            '        <div style="display: inline-block;margin-left: 5px;"><a id="node-input-link-sort-label" href="#" data-i18n="[title]link.label.sortByLabel"><span data-i18n="link.label.node">name</span> <i class="node-input-link-sort-label-a fa fa-caret-down"></i><i class="node-input-link-sort-label-d fa fa-caret-up"></i></a></div>'+
+            '        <div id="node-input-link-sort-label-div"><a id="node-input-link-sort-label" href="#" data-i18n="[title]link.label.sortByLabel"><span data-i18n="link.label.node">name</span> <i class="node-input-link-sort-label-a fa fa-caret-down"></i><i class="node-input-link-sort-label-d fa fa-caret-up"></i></a></div>'+
-            '        <div style="position: absolute; right: 10px; width: 50px; display: inline-block; text-align: right;"><a id="node-input-link-sort-type" href="#" data-i18n="[title]link.label.sortByFlow"><i class="node-input-link-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-link-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="link.label.type">flow</span></a></div>'+
+            '        <div id="node-input-link-sort-type-div"><a id="node-input-link-sort-type" href="#" data-i18n="[title]link.label.sortByFlow"><i class="node-input-link-sort-sublabel-a fa fa-caret-down"></i><i class="node-input-link-sort-sublabel-d fa fa-caret-up"></i> <span data-i18n="link.label.type">flow</span></a></div>'+
             '    </div>'+
             '    <div style="background: #fbfbfb; box-sizing: border-box; position:absolute; top:20px;bottom:0;left:0px;right:0px; overflow-y: scroll; overflow-x: hidden;">'+
             '        <ul id="node-input-link-container" style=" list-style-type:none; margin: 0;"></ul>'+

nodes/core/core/80-template.html

@@ -27,7 +27,7 @@
     <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">
-        <div style="position: absolute; right:0;display:inline-block; text-align: right; font-size: 0.8em;">
+        <div class="template-div-format">
             <span data-i18n="template.label.format"></span>:
             <select id="node-input-format" style="width:110px; font-size: 10px !important;  height: 24px; padding:0;">
                 <option value="handlebars">mustache</option>
@@ -141,3 +141,18 @@
         }
     });
 </script>
+
+<style>
+.template-div-format {
+    position: absolute;
+    right:0;
+    display:inline-block;
+    text-align: right;
+    font-size: 0.8em;
+}
+
+[dir="rtl"] .template-div-format {
+    right: auto;
+    left: 0px;
+}
+</style>

nodes/core/core/89-delay.html

@@ -50,7 +50,7 @@
           <option value="day" data-i18n="delay.label.units.day.singular"></option>
         </select>
         <br/>
-        <div id="node-input-dr"><input style="margin: 20px 0 20px 100px; width: 30px;" type="checkbox" id="node-input-drop"><label style="width: 250px;" for="node-input-drop"><span data-i18n="delay.dropmsg"></span></label></div>
+        <div id="node-input-dr"><input type="checkbox" id="node-input-drop"><label style="width: 250px;" for="node-input-drop"><span data-i18n="delay.dropmsg"></span></label></div>
     </div>
 
 
@@ -241,3 +241,12 @@
         }
     });
 </script>
+<style>
+#node-input-drop {
+    margin: 20px 0 20px 100px;
+    width: 30px;"
+}
+[dir="rtl"] #node-input-drop {
+    margin: 20px 100px 20px 0;
+}
+</style>

nodes/core/core/89-trigger.html

@@ -48,7 +48,7 @@
     </div>
     <div class="form-row">
         <label data-i18n="trigger.label.reset" style="width:auto"></label>
-        <div style="display:inline-block; width:70%;vertical-align:top">
+        <div class="trigger-reset-options-div" >
         <ul>
             <li data-i18n="trigger.label.resetMessage"></li>
             <li><span data-i18n="trigger.label.resetPayload"></span> <input type="text" id="node-input-reset" style="width:150px" data-i18n="[placeholder]trigger.label.resetprompt"></li>
@@ -171,3 +171,13 @@
         }
     });
 </script>
+<style>
+.trigger-reset-options-div {
+    display:inline-block;
+    width:70%;
+    vertical-align:top;
+}
+[dir="rtl"] .trigger-reset-options-div {
+    padding-right: 13px;
+}
+</style>

nodes/core/io/10-mqtt.html

@@ -148,7 +148,7 @@
             <div class="form-row node-input-broker">
                 <label for="node-config-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
                 <input class="input-append-left" type="text" id="node-config-input-broker" placeholder="e.g. localhost" style="width: 40%;" >
-                <label for="node-config-input-port" style="margin-left: 10px; width: 35px; "> <span data-i18n="mqtt.label.port"></span></label>
+                <label for="node-config-input-port" id="node-config-label-port"> <span data-i18n="mqtt.label.port"></span></label>
                 <input type="text" id="node-config-input-port" data-i18n="[placeholder]mqtt.label.port" style="width:45px">
             </div>
             <div class="form-row">
@@ -165,7 +165,7 @@
             <div class="form-row">
                 <label for="node-config-input-keepalive" style="width: auto"><i class="fa fa-clock-o"></i> <span data-i18n="mqtt.label.keepalive"></span></label>
                 <input type="text" id="node-config-input-keepalive" style="width: 50px">
-                <input type="checkbox" id="node-config-input-cleansession" style="margin-left: 30px; height: 1em;display: inline-block; width: auto; vertical-align: middle;">
+                <input type="checkbox" id="node-config-input-cleansession">
                 <label for="node-config-input-cleansession" style="width: auto;" data-i18n="mqtt.label.cleansession"></label>
             </div>
             <div class="form-row">
@@ -357,3 +357,25 @@
         }
     });
 </script>
+
+<style>
+#node-config-label-port {
+    margin-left: 10px;
+    width: 35px;
+}
+[dir="rtl"] #node-config-label-port{
+    margin-left: 0;
+    margin-right: 10px;
+}
+#node-config-input-cleansession {
+    margin-left: 30px;
+    height: 1em;
+    display: inline-block;
+    width: auto;
+    vertical-align: middle;
+}
+[dir="rtl"] #node-config-input-cleansession {
+    margin-left: 0px;
+    margin-right: 30px;
+}
+</style>

nodes/core/logic/10-switch.html

@@ -130,7 +130,8 @@
                     var btwnValueField = $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',types:['msg','flow','global','str','num',previousValueType]});
                     var btwnAndLabel = $('<span/>',{class:"node-input-rule-btwn-label"}).text(" "+andLabel+" ").appendTo(row3);
                     var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"margin-left:2px;"}).appendTo(row3).typedInput({default:'num',types:['msg','flow','global','str','num',previousValueType]});
-                    var finalspan = $('<span/>',{style:"float: right;margin-top: 6px;"}).appendTo(row);
+                    // reverse float property in case of right directionality
+                    var finalspan = $('<span/>',{style:"float: "+RED.bidi.componentPos.right+";margin-top: 6px;"}).appendTo(row);
                     finalspan.append(' &#8594; <span class="node-input-rule-index">'+(i+1)+'</span> ');
                     var caseSensitive = $('<input/>',{id:"node-input-rule-case-"+i,class:"node-input-rule-case",type:"checkbox",style:"width:auto;vertical-align:top"}).appendTo(row2);
                     $('<label/>',{for:"node-input-rule-case-"+i,style:"margin-left: 3px;"}).text(caseLabel).appendTo(row2);

red/api/locales/en-US/editor.json

@@ -30,7 +30,15 @@
                 "defaultDir": "Default",
                 "ltr": "Left-to-right",
                 "rtl": "Right-to-left",
-                "auto": "Contextual"
+                "auto": "Contextual",
+                "numericShaping": "Numeric Shaping",
+                "defaultNumeral":"None",
+                "national":"National",
+                "contextual":"Contextual",
+                "calendar": "National Calendar",
+                "defaultCalendar": "Gregorian",
+                "hijri": "Hijri",
+                "hebrew": "Hebrew"
             },
             "sidebar": {
                 "show": "Show sidebar"