Merge pull request #2996 from jeanp413/fix-sync-textarea

Sync textarea with cursor

Author: Tyriar

css/xterm.css

@@ -59,10 +59,10 @@
 }
 
 .xterm .xterm-helper-textarea {
-    /*
-     * HACK: to fix IE's blinking cursor
-     * Move textarea out of the screen to the far left, so that the cursor is not visible.
-     */
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
     position: absolute;
     opacity: 0;
     left: -9999em;

src/browser/Clipboard.ts

@@ -70,25 +70,13 @@ export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextA
   const top = ev.clientY - pos.top - 10;
 
   // Bring textarea at the cursor position
-  textarea.style.position = 'absolute';
   textarea.style.width = '20px';
   textarea.style.height = '20px';
   textarea.style.left = `${left}px`;
   textarea.style.top = `${top}px`;
   textarea.style.zIndex = '1000';
 
   textarea.focus();
-
-  // Reset the terminal textarea's styling
-  // Timeout needs to be long enough for click event to be handled.
-  setTimeout(() => {
-    textarea.style.position = '';
-    textarea.style.width = '';
-    textarea.style.height = '';
-    textarea.style.left = '';
-    textarea.style.top = '';
-    textarea.style.zIndex = '';
-  }, 200);
 }
 
 /**

src/browser/Terminal.ts

@@ -281,6 +281,25 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._onBlur.fire();
   }
 
+  private _syncTextArea(): void {
+    if (!this.textarea || !this.buffer.isCursorInViewport || this._compositionHelper!.isComposing) {
+      return;
+    }
+
+    const cellHeight = Math.ceil(this._charSizeService!.height * this.optionsService.options.lineHeight);
+    const cursorTop = this._bufferService.buffer.y * cellHeight;
+    const cursorLeft = this._bufferService.buffer.x * this._charSizeService!.width;
+
+    // Sync the textarea to the exact position of the composition view so the IME knows where the
+    // text is.
+    this.textarea.style.left = cursorLeft + 'px';
+    this.textarea.style.top = cursorTop + 'px';
+    this.textarea.style.width = this._charSizeService!.width + 'px';
+    this.textarea.style.height = cellHeight + 'px';
+    this.textarea.style.lineHeight = cellHeight + 'px';
+    this.textarea.style.zIndex = '-5';
+  }
+
   /**
    * Initialize default behavior
    */
@@ -436,7 +455,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(this._inputHandler.onRequestSyncScrollBar(() => this.viewport!.syncScrollArea()));
     this.register(this.viewport);
 
-    this.register(this.onCursorMove(() => this._renderService!.onCursorMove()));
+    this.register(this.onCursorMove(() => {
+      this._renderService!.onCursorMove();
+      this._syncTextArea();
+    }));
     this.register(this.onResize(() => this._renderService!.onResize(this.cols, this.rows)));
     this.register(this.onBlur(() => this._renderService!.onBlur()));
     this.register(this.onFocus(() => this._renderService!.onFocus()));

src/browser/TestUtils.test.ts

@@ -309,6 +309,9 @@ export class MockViewport implements IViewport {
 }
 
 export class MockCompositionHelper implements ICompositionHelper {
+  public get isComposing(): boolean {
+    return false;
+  }
   public compositionstart(): void {
     throw new Error('Method not implemented.');
   }

src/browser/Types.d.ts

@@ -87,6 +87,7 @@ export type CustomKeyEventHandler = (event: KeyboardEvent) => boolean;
 export type LineData = CharData[];
 
 export interface ICompositionHelper {
+  readonly isComposing: boolean;
   compositionstart(): void;
   compositionupdate(ev: CompositionEvent): void;
   compositionend(): void;

src/browser/input/CompositionHelper.ts

@@ -22,6 +22,7 @@ export class CompositionHelper {
    * IME. This variable determines whether the compositionText should be displayed on the UI.
    */
   private _isComposing: boolean;
+  public get isComposing(): boolean { return this._isComposing; }
 
   /**
    * The position within the input textarea's value of the current composition.
@@ -118,7 +119,6 @@ export class CompositionHelper {
   private _finalizeComposition(waitForPropagation: boolean): void {
     this._compositionView.classList.remove('active');
     this._isComposing = false;
-    this._clearTextareaPosition();
 
     if (!waitForPropagation) {
       // Cancel any delayed composition send requests and send the input immediately.
@@ -218,13 +218,4 @@ export class CompositionHelper {
       setTimeout(() => this.updateCompositionElements(true), 0);
     }
   }
-
-  /**
-   * Clears the textarea's position so that the cursor does not blink on IE.
-   * @private
-   */
-  private _clearTextareaPosition(): void {
-    this._textarea.style.left = '';
-    this._textarea.style.top = '';
-  }
 }