Fixed cursor positioning

lib/ace/keyboard/textinput.js

@@ -46,6 +46,13 @@ var TextInput = function(parentNode, host) {
 
     var text = dom.createElement("textarea");
     text.style.left = "-10000px";
+    // We have too many moving parts in the iPad, so we set the text
+    // positioning to absolute to be able to calculate the precise position for
+    // cursor. Otherwise the cursor position would be relative to the screen
+    // coordinates (position: fixed).
+    if (useragent.isIPad)
+        text.style.position = "absolute";
+
     parentNode.appendChild(text);
 
     var PLACEHOLDER = String.fromCharCode(0);
@@ -164,7 +171,7 @@ var TextInput = function(parentNode, host) {
     };
 
     if (useragent.isIE) {
-        event.addListener(text, "beforecopy", function(e) {        
+        event.addListener(text, "beforecopy", function(e) {
             var copyText = host.getCopyText();
             if(copyText)
                 clipboardData.setData("Text", copyText);

lib/ace/layer/cursor.js

@@ -68,7 +68,9 @@ var Cursor = function(parentEl) {
 
     this.showCursor = function() {
         this.isVisible = true;
-        this.element.appendChild(this.cursor);
+        if (!useragent.isIPad)
+            this.element.appendChild(this.cursor);
+
 
         var cursor = this.cursor;
         cursor.style.visibility = "visible";
@@ -120,16 +122,16 @@ var Cursor = function(parentEl) {
         this.cursor.style.width = config.characterWidth + "px";
         this.cursor.style.height = config.lineHeight + "px";
 
-        if (this.isVisible) {
+        if (this.isVisible && !useragent.isIPad) {
             this.element.appendChild(this.cursor);
         }
-        
+
         if (this.session.getOverwrite()) {
             dom.addCssClass(this.cursor, "ace_overwrite");
         } else {
             dom.removeCssClass(this.cursor, "ace_overwrite");
         }
-        
+
         this.restartTimer();
     };
 

lib/ace/virtual_renderer.js

@@ -277,7 +277,7 @@ var VirtualRenderer = function(container, theme) {
     this.getPrintMarginColumn = function() {
         return this.$printMarginColumn;
     };
-    
+
     this.getShowGutter = function(){
         return this.showGutter;
     }
@@ -319,23 +319,39 @@ var VirtualRenderer = function(container, theme) {
     };
 
     this.getTextAreaContainer = function() {
-        return this.container;
+        // Let's make it play nice wit iPad. Otherwise the default padding of
+        // the container will make the cursor shift to the left.
+        return useragent.isIPad ? this.content : this.container;
+
     };
 
     this.moveTextAreaToCursor = function(textarea) {
-        // in IE the native cursor always shines through
+        if (!this.layerConfig)
-        if (useragent.isIE)
             return;
 
-        var pos = this.$cursorLayer.getPixelPosition();
+        var pos, left, top;
-        if (!pos)
+        if (useragent.isIPad) {
-            return;
+            pos = this.$cursorLayer.getPixelPosition(true);
+            if (!pos)
+                return;
 
-        var bounds = this.content.getBoundingClientRect();
+            left = pos.left + this.$padding - 3;
-        var offset = (this.layerConfig && this.layerConfig.offset) || 0;
+            top  = pos.top;
+        } else {
+            pos = this.$cursorLayer.getPixelPosition();
+            if (!pos)
+                return;
 
-        textarea.style.left = (bounds.left + pos.left + this.$padding) + "px";
+            var bounds = this.content.getBoundingClientRect();
-        textarea.style.top = (bounds.top + pos.top - this.scrollTop + offset) + "px";
+            var offset = this.layerConfig.offset;
+
+            left = bounds.left + pos.left + this.$padding;
+            top  = bounds.top  + pos.top  - this.scrollTop + offset;
+        }
+
+        textarea.style.left = left + "px";
+        textarea.style.top  = top  + "px";
+        textarea.style.lineHeight = this.layerConfig.lineHeight + "px";
     };
 
     this.getFirstVisibleRow = function() {
@@ -592,7 +608,7 @@ var VirtualRenderer = function(container, theme) {
         // the editor is not visible
         if (this.$size.scrollerHeight === 0)
             return;
-            
+
         var pos = this.$cursorLayer.getPixelPosition();
 
         var left = pos.left + this.$padding;
@@ -646,7 +662,7 @@ var VirtualRenderer = function(container, theme) {
         for (var l = 1; l < line; l++) {
             offset += this.session.getRowHeight(lineHeight, l-1);
         }
-            
+
         if (center) {
             offset -= this.$size.scrollerHeight / 2;
         }