Fix(bidi): Fix for bug /codemirror/issues/4897

Fix for bug codemirror#4897

Author: wajnberg

demo/bidi.html

@@ -60,6 +60,11 @@ <h2>Bi-directional Text Demo</h2>
     <input type="radio" id="ltr" name="direction"/><label for="ltr">LTR</label>
     <input type="radio" id="rtl" name="direction"/><label for="rtl">RTL</label>
   </fieldset>
+  <fieldset>
+    HTML document direction:
+    <input type="radio" id="htmlltr" name="htmldirection"/><label for="htmlltr">LTR</label>
+    <input type="radio" id="htmlrtl" name="htmldirection"/><label for="htmlrtl">RTL</label>
+  </fieldset>
   <fieldset>
     <input type="checkbox" id="rtlMoveVisually"/><label for="rtlMoveVisually">Use visual order for arrow key movement.</label>
   </fieldset>
@@ -80,6 +85,13 @@ <h2>Bi-directional Text Demo</h2>
   editor.setOption("direction", dirRadios["rtl"].checked ? "rtl" : "ltr");
 };
 
+var HtmlDirRadios = {ltr: document.getElementById("htmlltr"),
+                 rtl: document.getElementById("htmlrtl")};
+HtmlDirRadios["ltr"].checked = true;
+HtmlDirRadios["rtl"].onchange = HtmlDirRadios["ltr"].onchange = function() {
+  document.dir = (HtmlDirRadios["rtl"].checked ? "rtl" : "ltr");
+};
+
 var moveCheckbox = document.getElementById("rtlMoveVisually");
 moveCheckbox.checked = editor.getOption("rtlMoveVisually");
 moveCheckbox.onchange = function() {

lib/codemirror.css

@@ -5,6 +5,7 @@
   font-family: monospace;
   height: 300px;
   color: black;
+  direction: ltr;
 }
 
 /* PADDING */