Fix the textarea in the composition view's pos when composing

Fixes xtermjs#322

src/CompositionHelper.js

@@ -187,9 +187,14 @@ CompositionHelper.prototype.updateCompositionElements = function(dontRecurse) {
     this.compositionView.style.top = cursorTop + 'px';
     this.compositionView.style.height = cursor.offsetHeight + 'px';
     this.compositionView.style.lineHeight = cursor.offsetHeight + 'px';
+    // Sync the textarea to the exact position of the composition view so the IME knows where the
+    // text is.
     var compositionViewBounds = this.compositionView.getBoundingClientRect();
-    this.textarea.style.left = cursor.offsetLeft + compositionViewBounds.width + 'px';
-    this.textarea.style.top = cursor.cursorTop + 'px';
+    this.textarea.style.left = cursor.offsetLeft + 'px';
+    this.textarea.style.top = cursorTop + 'px';
+    this.textarea.style.width = compositionViewBounds.width + 'px';
+    this.textarea.style.height = compositionViewBounds.height + 'px';
+    this.textarea.style.lineHeight = compositionViewBounds.height + 'px';
   }
   if (!dontRecurse) {
     setTimeout(this.updateCompositionElements.bind(this, true), 0);

src/xterm.css

@@ -65,6 +65,10 @@
     width: 0;
     height: 0;
     z-index: -10;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
 }
 
 .terminal .terminal-cursor {