Add a metadata tag to override notebook direction (ltr/rtl) (#5052)

* Add a metadata tag to control notebook/cell direction (ltr/rtl)

* Fix test errors

Author: m2-farzan

notebook/static/base/js/dialog.js

@@ -230,6 +230,7 @@ define(['jquery',
                             return false;
                         }
                         options.callback(new_md);
+                        options.notebook.apply_directionality();
                     }
                 }
             },

notebook/static/notebook/js/actions.js

@@ -65,11 +65,29 @@ define([
      *
      **/
     var _actions = {
+        'toggle-cell-rtl-layout': {
+            cmd: i18n.msg._('toggle current cell ltr/rtl direction'),
+            help: i18n.msg._('Toggle current cell directionality between left-to-right and right-to-left'),
+            handler: function (env) {
+              var notebook_direction = document.body.getAttribute('dir') == 'rtl' ? 'rtl' : 'ltr';
+              var current_cell_default_direction = env.notebook.get_selected_cell().cell_type == 'code' ? 'ltr' : notebook_direction;
+              var current_cell_direction = env.notebook.get_selected_cell().metadata.direction || current_cell_default_direction;
+              var new_direction = current_cell_direction == 'rtl' ? 'ltr' : 'rtl';
+              env.notebook.get_selected_cells().forEach(
+                  function(cell) { cell.metadata.direction = new_direction; }
+              );
+              env.notebook.set_dirty(true);
+              env.notebook.apply_directionality();
+            }
+        },
         'toggle-rtl-layout': {
-            cmd: i18n.msg._('toggle rtl layout'),
-            help: i18n.msg._('Toggle the screen directionality between left-to-right and right-to-left'),
-            handler: function () {
-              (document.body.getAttribute('dir')=='rtl') ? document.body.setAttribute('dir','ltr') : document.body.setAttribute('dir','rtl');
+            cmd: i18n.msg._('toggle notebook ltr/rtl direction'),
+            help: i18n.msg._('Toggle notebook directionality between left-to-right and right-to-left'),
+            handler: function (env) {
+              var new_direction = document.body.getAttribute('dir') == 'rtl' ? 'ltr' : 'rtl';
+              env.notebook.metadata.direction = new_direction;
+              env.notebook.set_dirty(true);
+              env.notebook.apply_directionality();
             }
         },
         'edit-command-mode-keyboard-shortcuts': {

notebook/static/notebook/js/notebook.js

@@ -690,6 +690,27 @@ define([
         this.line_numbers = !this.line_numbers;
     };
 
+    /**
+     * Reads direction settings (LTR/RTL) from notebook/cells metadata
+     * and applies them to display elements.
+     */
+    Notebook.prototype.apply_directionality = function () {
+        var notebook_direction = this.metadata.direction || 'ltr';
+        // html
+        document.body.setAttribute('dir', notebook_direction);
+        // existing cells
+        this.get_cells().forEach( function(cell) {
+            if (cell.cell_type == 'markdown') {
+                cell.code_mirror.setOption('direction', cell.metadata.direction || notebook_direction);
+                cell.element.find('.rendered_html').attr('dir', cell.metadata.direction || notebook_direction);
+            } else if (cell.cell_type == 'code') {
+                cell.element.find('.output_text').attr('dir', cell.metadata.direction || 'auto');
+            }
+        });
+        // new cells
+        textcell.MarkdownCell.options_default.cm_config.direction = notebook_direction;
+    };
+
     /**
      * Get the cell above a given cell.
      * 
@@ -2662,6 +2683,9 @@ define([
             this.trusted = trusted;
             this.events.trigger("trust_changed.Notebook", trusted);
         }
+
+        this.apply_directionality();
+
     };
 
     /**

notebook/static/notebook/js/textcell.js

@@ -303,7 +303,6 @@ define([
     MarkdownCell.options_default = {
         cm_config: {
             mode: 'ipythongfm',
-            direction: bidi.isMirroringEnabled() ? 'rtl' : 'ltr'
         },
         placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$"
     };

notebook/static/notebook/less/outputarea.less

@@ -211,3 +211,7 @@ div.output_unrecognized {
       }
   }
 }
+
+div.output_text[dir="rtl"] {
+  text-align: right;
+}

notebook/static/notebook/less/renderedhtml.less

@@ -131,7 +131,11 @@
     * + .alert {margin-top: 1em;}
 }
 
-[dir="rtl"] .rendered_html {
+// Right align text iff:
+// (a) notebook is rtl and it's not overriden in cell metadata (i.e. rtl or none)
+// (b) notebook is whatever but cell metadata specifies rtl
+// note that cell metadata is used to set 'dir' attribute of rendered_html element.
+[dir="rtl"] .rendered_html:not([dir="ltr"]), .rendered_html[dir="rtl"] {
     p {
         text-align : right;
     }