Rework bidi file structure

Closes #1026,#983,#982,#978 PR #1026 contains the full history of the changes made herein. Due to the volume of commits with no meaningful comment, they have been squashed down to this one. Adding bidi Files Tuning code style Adding rest of bidi files and its dependencies Tuning code style editing numeric shaping value Tuning Code style adding bidi support Adding Bidi Support for the rest of files Adding Bidi support Editing Bidi menu adding mirroring enablement handeling code style Addinng Bidi Support Adding Bidi Support Adding locale settings to national calendar support Adding Numeric Shaping Support scss files after adding rtl direction part 1 adding rtl direction at scss files part2 adding right directionality at comman typeInput correcting some comments editing spaces applying code style editing code style editing code style editing code style editing code style adding right directionality adding right directionality adding style in case of right directionality adding style in case of right directionality adding style in case of right directionality create a global variable for ui direction to call it once need Update main.js Update typedInput.js Update 10-switch.html manage palette mirroring adding RTL directionality to Tabs and Manage palette Style Editing Adding mirroring to subflow workspace handle mirroring defects at manage palette Handle Mirroring defects at sidebar seperator Numeric Shaping Updates Editing code style Handling mirroring defects Handling mirroring defects Fixing mirroring defects editing code style fixing mirroring defects at deploy dialog editing code style Updating Bidi Support handling some reviewing comments handling chicks Update base-text-dir.js Update bidi-util.js Update bidi-util.js Handling reviewing comment Fixing Popover mirroring defect Handling namespace structure for bidi features reflecting new namespace structure for bidi features at editorfiles Handling comments that related to css moving bidi.js under js/bidi folder
2023-10-10 13:36:53 +02:00 · 2016-10-18 11:26:51 +02:00 · 2016-10-18 11:26:51 +02:00 · e5511ea86d
commit e5511ea86d
parent b67df2c0ab
52 changed files with 1107 additions and 212 deletions
--- a/Gruntfile.js
+++ b/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/text/format.js",
+                    "editor/js/bidi/bidi.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",
--- a/editor/js/bidi/base-text-dir.js
+++ b/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
+    }
+})();
--- a/editor/js/bidi/bidi.js
+++ b/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
+    }
+ })();
--- a/editor/js/bidi/format.js
+++ b/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) {
--- a/editor/js/bidi/numeric-shaping.js
+++ b/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
+    }
+})();
--- a/editor/js/main.js
+++ b/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-ltr",toggle:"text-direction",label:RED._("menu.label.view.ltr"), onselect:function(s) { if(s){RED.text.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-auto",toggle:"text-direction",label:RED._("menu.label.view.auto"), onselect:function(s) { if(s){RED.text.bidi.setTextDirection("auto")}}}
+                {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.bidi.setTextDirection("ltr")}}},
+                {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.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();
--- a/editor/js/text/bidi.js
+++ b/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
-    }
-})();
--- a/editor/js/ui/common/menu.js
+++ b/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>';
--- a/editor/js/ui/common/popover.js
+++ b/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");
            }
        }
--- a/editor/js/ui/common/searchBox.js
+++ b/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();
            }
        }
--- a/editor/js/ui/common/tabs.js
+++ b/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);
-                span.attr('dir', RED.text.bidi.resolveBaseTextDir(tab.label));
-
+                var span = $('<span/>',{class:"bidiAware"});
+                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) {
--- a/editor/js/ui/common/typedInput.js
+++ b/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);
                    }
--- a/editor/js/ui/deploy.js
+++ b/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;
--- a/editor/js/ui/editor.js
+++ b/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"));
-                RED.text.format.attach(input[0], definition[property].format, {}, false, "en");
+                input.html(RED.bidi.applyBidiSupport(val, RED.bidi.flags.STT_GETHTML, definition[property].format, {}));
+                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;
--- a/editor/js/ui/keyboard.js
+++ b/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>'+
--- a/editor/js/ui/notifications.js
+++ b/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) {
--- a/editor/js/ui/palette-editor.js
+++ b/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);
--- a/editor/js/ui/palette.js
+++ b/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) {
--- a/editor/js/ui/sidebar.js
+++ b/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;
-                $("#workspace").css("right",newChartRight);
+                //to handle workspace css right property at both RTL and LTR UIs
+                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("right",($("#sidebar").width()+2)+"px");
+                $("#sidebar-separator").css(RED.bidi.componentPos.left,"auto");
+                $("#sidebar-separator").css(RED.bidi.componentPos.right,($("#sidebar").width()+2)+"px");
                RED.events.emit("sidebar:resize");
            }
    });
--- a/editor/js/ui/subflow.js
+++ b/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);
-        $('<span style="margin-left: 5px;" data-i18n="subflow.input"></span> '+
-            '<div style="display: inline-block;" class="button-group">'+
-            '<a id="workspace-subflow-input-remove" class="button active" href="#">0</a>'+
+        $('<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 class="workspace-subflow-label" data-i18n="subflow.input"></span> '+
+            '<div style="display: inline-block;" class="button-group subflow-toolbar">'+
+            '<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">'+
-            '<a id="workspace-subflow-output-remove" class="button" href="#"><i class="fa fa-minus"></i></a>'+
+        $('<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 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();
--- a/editor/js/ui/tab-info.js
+++ b/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._("sidebar.info.instances")+"</td><td>"+userCount+"</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>"+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>';
        }

--- a/editor/js/ui/view.js
+++ b/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;
--- a/editor/js/ui/workspaces.js
+++ b/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() {
--- a/editor/sass/dropdownMenu.scss
+++ b/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;
+}
--- a/editor/sass/editor.scss
+++ b/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);
+}
--- a/editor/sass/flow.scss
+++ b/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;
--- a/editor/sass/header.scss
+++ b/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;
--- a/editor/sass/jquery.scss
+++ b/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;
 }
--- a/editor/sass/keyboard.scss
+++ b/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;
+}
--- a/editor/sass/palette-editor.scss
+++ b/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);
+        }
+    }
+}
--- a/editor/sass/palette.scss
+++ b/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;
--- a/editor/sass/popover.scss
+++ b/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%;
--- a/editor/sass/sidebar.scss
+++ b/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;
--- a/editor/sass/tab-config.scss
+++ b/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;
--- a/editor/sass/tab-info.scss
+++ b/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;
--- a/editor/sass/tabs.scss
+++ b/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;
+}
+
--- a/editor/sass/ui/common/editableList.scss
+++ b/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;
+        }
+    }
+}
--- a/editor/sass/ui/common/searchBox.scss
+++ b/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;
+    }
+}
+
--- a/editor/sass/ui/common/typedInput.scss
+++ b/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;
--- a/editor/sass/workspace.scss
+++ b/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;
+}
--- a/editor/sass/workspaceToolbar.scss
+++ b/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;
+}
--- a/editor/templates/index.mst
+++ b/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">
-            <ul style="font-size: 0.9em; width: 400px; margin: 10px auto; text-align: left;" id="node-dialog-confirm-deploy-invalid-list"></ul>
+        <div id="node-dialog-confirm-deploy-config" data-i18n="[prepend]deploy.confirm.improperlyConfigured;[append]deploy.confirm.confirm">
+            <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>
--- a/nodes/core/core/25-catch.html
+++ b/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',{
--- a/nodes/core/core/25-status.html
+++ b/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;
--- a/nodes/core/core/58-debug.html
+++ b/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++;
--- a/nodes/core/core/60-link.html
+++ b/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 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-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 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>'+
--- a/nodes/core/core/80-template.html
+++ b/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>
--- a/nodes/core/core/89-delay.html
+++ b/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>
--- a/nodes/core/core/89-trigger.html
+++ b/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>
--- a/nodes/core/io/10-mqtt.html
+++ b/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>
--- a/nodes/core/logic/10-switch.html
+++ b/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);
--- a/red/api/locales/en-US/editor.json
+++ b/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"