Merge pull request #1221 from ajaxorg/textinput

Textinput bugfix

lib/ace/css/editor.css

@@ -98,15 +98,17 @@
     resize: none;
     outline: none;
     overflow: hidden;
+    font: inherit;
 }
 
 .ace_text-input.ace_composition {
-    background: #fff;
+    background: #f8f8f8;
-    color: #000;
+    color: #111;
     z-index: 1000;
     opacity: 1;
     border: solid lightgray 1px;
-    margin: -1px
+    margin: -1px;
+    padding: 0 1px;
 }
 
 .ace_layer {

lib/ace/edit_session.js

@@ -949,7 +949,6 @@ var EditSession = function(text, mode) {
     this.$onChangeMode = function(mode, $isPlaceholder) {
         if (this.$mode === mode) return;
         this.$mode = mode;
-        this.$modeId = mode.$id;
 
         this.$stopWorker();
 
@@ -980,6 +979,7 @@ var EditSession = function(text, mode) {
 
 
         if (!$isPlaceholder) {
+            this.$modeId = mode.$id;
             this.$setFolding(mode.foldingRules);
             this._emit("changeMode");
             this.bgTokenizer.start(0);

lib/ace/keyboard/textinput.js

@@ -35,6 +35,7 @@ var event = require("../lib/event");
 var useragent = require("../lib/useragent");
 var dom = require("../lib/dom");
 var lang = require("../lib/lang");
+var BROKEN_SETDATA = useragent.isChrome < 18;
 
 var TextInput = function(parentNode, host) {
     var text = dom.createElement("textarea");
@@ -50,7 +51,7 @@ var TextInput = function(parentNode, host) {
     text.autocapitalize = "off";
     text.spellcheck = false;
 
-    text.style.top = "-2em";
+    text.style.bottom = "-2em";
     parentNode.insertBefore(text, parentNode.firstChild);
 
     var PLACEHOLDER = "\x01\x01";
@@ -63,7 +64,9 @@ var TextInput = function(parentNode, host) {
     var isSelectionEmpty = true;
 
     // FOCUS
-    var isFocused = document.activeElement === text;
+    // ie9 throws error if document.activeElement is accessed too soon
+    try { var isFocused = document.activeElement === text; } catch(e) {}
+    
     event.addListener(text, "blur", function() {
         host.onBlur();
         isFocused = false;
@@ -230,7 +233,7 @@ var TextInput = function(parentNode, host) {
 
         var clipboardData = e.clipboardData || window.clipboardData;
 
-        if (clipboardData) {
+        if (clipboardData && !BROKEN_SETDATA) {
             // Safari 5 has clipboardData object, but does not handle setData()
             var supported = clipboardData.setData("Text", data);
             if (supported) {
@@ -260,7 +263,7 @@ var TextInput = function(parentNode, host) {
         }
 
         var clipboardData = e.clipboardData || window.clipboardData;
-        if (clipboardData) {
+        if (clipboardData && !BROKEN_SETDATA) {
             // Safari 5 has clipboardData object, but does not handle setData()
             var supported = clipboardData.setData("Text", data);
             if (supported) {
@@ -347,12 +350,10 @@ var TextInput = function(parentNode, host) {
         host.onCompositionEnd();
     };
 
+    var syncComposition = lang.delayedCall(onCompositionUpdate, 50);
 
     event.addListener(text, "compositionstart", onCompositionStart);
-    if (useragent.isGecko)
+    event.addListener(text, useragent.isGecko ? "text" : "keyup", function(){syncComposition.schedule()});
-        event.addListener(text, "text", onCompositionUpdate);
-    else
-        event.addListener(text, "keyup", onCompositionUpdate);
     event.addListener(text, "compositionend", onCompositionEnd);
 
     this.getElement = function() {

lib/ace/lib/dom.js

@@ -210,13 +210,13 @@ else
     };
 
 exports.scrollbarWidth = function(document) {
-
+    var inner = exports.createElement("ace_inner");
-    var inner = exports.createElement("p");
     inner.style.width = "100%";
     inner.style.minWidth = "0px";
     inner.style.height = "200px";
+    inner.style.display = "block";
 
-    var outer = exports.createElement("div");
+    var outer = exports.createElement("ace_outer");
     var style = outer.style;
 
     style.position = "absolute";
@@ -225,10 +225,11 @@ exports.scrollbarWidth = function(document) {
     style.width = "200px";
     style.minWidth = "0px";
     style.height = "150px";
+    style.display = "block";
 
     outer.appendChild(inner);
 
-    var body = document.body || document.documentElement;
+    var body = document.documentElement;
     body.appendChild(outer);
 
     var noScrollbar = inner.offsetWidth;

lib/ace/virtual_renderer.js

@@ -566,28 +566,29 @@ var VirtualRenderer = function(container, theme) {
     this.$moveTextAreaToCursor = function() {
         if (!this.$keepTextAreaAtCursor)
             return;
-
+        var config = this.layerConfig;
         var posTop = this.$cursorLayer.$pixelPos.top;
         var posLeft = this.$cursorLayer.$pixelPos.left;
-        posTop -= this.layerConfig.offset;
+        posTop -= config.offset;
 
-        if (posTop < 0 || posTop > this.layerConfig.height - this.lineHeight)
+        if (posTop < 0 || posTop > config.height - this.lineHeight)
             return;
 
         var w = this.characterWidth;
-        if (this.$composition)
+        if (this.$composition) {
-            w += this.textarea.scrollWidth;
+            var val = this.textarea.value.replace(/^\x01+/, "");
+            w *= this.session.$getStringScreenWidth(val)[0];
+        }
         posLeft -= this.scrollLeft;
         if (posLeft > this.$size.scrollerWidth - w)
             posLeft = this.$size.scrollerWidth - w;
 
-        if (this.showGutter)
+        posLeft -= this.scrollBar.width;
-            posLeft += this.$gutterLayer.gutterWidth;
 
         this.textarea.style.height = this.lineHeight + "px";
         this.textarea.style.width = w + "px";
-        this.textarea.style.left = posLeft + "px";
+        this.textarea.style.right = this.$size.scrollerWidth - posLeft - w + "px";
-        this.textarea.style.top = posTop - 1 + "px";
+        this.textarea.style.bottom = this.$size.height - posTop - this.lineHeight + "px";
     };
 
     /**