messages: Add support for right-to-left messages.

This implements right-to-left message automatic detection support in
the compose box as well as the message feed.  Full unit tests and
support in the message-editing UI are for future work (as are
potentially more fancy things like supporting things like
right-to-left multi-word names for users/streams/etc.).

Fixes #3123.

.eslintrc.json

@@ -103,6 +103,7 @@
         "flatpickr": false,
         "pointer": false,
         "util": false,
+        "rtl": false,
         "MessageListData": false,
         "MessageListView": false,
         "blueslip": false,

frontend_tests/node_tests/compose.js

@@ -58,6 +58,7 @@ global.document.location.host = 'foo.com';
 zrequire('zcommand');
 zrequire('compose_ui');
 zrequire('util');
+zrequire('rtl');
 zrequire('common');
 zrequire('Handlebars', 'handlebars');
 zrequire('stream_data');

static/js/compose.js

@@ -565,8 +565,20 @@ exports.validate = function () {
 };
 
 exports.handle_keydown = function (event) {
-    var code = event.keyCode || event.which;
     var textarea = $("#compose-textarea");
+
+    // Set the rtl class if the text has an rtl direction, remove it otherwise
+    var text = textarea.val();
+    if (text.startsWith('```quote')) {
+        text = text.substr(8);
+    }
+    if (rtl.get_direction(text) === 'rtl') {
+        textarea.addClass('rtl');
+    } else {
+        textarea.removeClass('rtl');
+    }
+
+    var code = event.keyCode || event.which;
     var range = textarea.range();
     var isBold = code === 66;
     var isItalic = code === 73 && !event.shiftKey;

static/js/message_list_view.js

@@ -406,6 +406,12 @@ MessageListView.prototype = {
                 blueslip.warn('Only DOM nodes can be passed to _post_process_messages');
             }
             var row = $(dom_message);
+            var content = row.find('.message_content');
+
+            // Set the rtl class if the text has an rtl direction
+            if (rtl.get_direction(content.text()) === 'rtl') {
+                content.addClass('rtl');
+            }
 
             // Save DOM elements by id into self._rows for O(1) lookup
             if (row.hasClass('message_row')) {

static/styles/zulip.scss

@@ -417,6 +417,16 @@ code {
     font-size: 0.857em;
 }
 
+code::before {
+    /* Add a left-to-right embedding character before each code block */
+    content: '\202a';
+}
+
+code::after {
+    /* And add a pop directional formatting character after each code block */
+    content: '\202c';
+}
+
 .message_content code {
     white-space: pre-wrap;
     padding: 0px 4px;
@@ -428,6 +438,10 @@ code {
     margin: 5px 0 5px 20px;
 }
 
+.rtl.message_content ul {
+    margin: 5px 20px 5px 0;
+}
+
 .codehilite {
     display: block !important;
     border: none !important;
@@ -435,6 +449,7 @@ code {
 }
 
 pre {
+    direction: ltr;
     /* code block text is a bit smaller than normal text */
     font-size: 0.8em;
     line-height: 1.4;
@@ -1308,6 +1323,10 @@ div.focused_table {
     position: relative;
 }
 
+.rtl {
+    direction: rtl;
+}
+
 .message_content:empty {
     display: none;
 }
@@ -1477,6 +1496,15 @@ blockquote p {
     border-left-color: hsl(0, 0%, 86%);
 }
 
+.messagebox .rtl blockquote {
+    padding-left: unset;
+    padding-right: 5px;
+    margin-left: unset;
+    margin-right: 10px;
+    border-left: unset;
+    border-right: 5px solid hsl(0, 0%, 86%);
+}
+
 .bookend {
     margin-top: 10px;
     background-color: transparent;
@@ -2058,6 +2086,12 @@ div.floating_recipient {
     border: none !important;
 }
 
+.rtl .twitter-image,
+.rtl .message_inline_image {
+    margin-left: unset;
+    margin-right: 5px;
+}
+
 #message-edit-history .message_inline_image {
     height: auto;
     overflow-y: auto;
@@ -2074,6 +2108,11 @@ div.floating_recipient {
     border: none !important;
 }
 
+.rtl .message_inline_ref {
+    margin-left: unset;
+    margin-right: 5px;
+}
+
 .twitter-image img,
 .message_inline_image img,
 .message_inline_ref img {
@@ -2083,6 +2122,14 @@ div.floating_recipient {
     margin-right: 10px;
 }
 
+.rtl .twitter-image img,
+.rtl .message_inline_image img,
+.rtl .message_inline_ref img {
+    float: right;
+    margin-right: unset;
+    margin-left: 10px;
+}
+
 #message-edit-history .message_inline_image img {
     max-height: 100px;
 }
@@ -2561,6 +2608,7 @@ div.topic_edit_spinner .loading_indicator_spinner {
     padding: 0 0.2em;
     box-shadow: 0px 0px 0px 1px hsl(0, 0%, 80%);
     margin-right: 2px;
+    margin-left: 2px;
     white-space: nowrap;
     background: -moz-linear-gradient(top, hsla(0, 0%, 0%, 0.1) 0%, hsla(0, 0%, 0%, 0.0) 100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0, 0%, 0%, 0.1)), color-stop(100%,hsla(0, 0%, 0%, 0.0)));
@@ -2638,6 +2686,11 @@ div.topic_edit_spinner .loading_indicator_spinner {
     text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
 }
 
+.rtl.message_content .message_embed {
+    border-left: unset;
+    border-right: 3px solid hsl(0, 0%, 93%);
+}
+
 .message_content .message_embed > * {
     display: inherit;
     padding: 5px;

tools/lib/find_add_class.py

@@ -20,6 +20,7 @@ GENERIC_KEYWORDS = [
     'notdisplayed',
     'popover',
     'no-border',
+    'rtl',
     'second',
     'selected',
     'slide-left',