Merge pull request #5747 from anthonykim1/anthonykim1/fixIMEoverFlowing

Fix IME composition text overflowing terminal

Author: Tyriar

src/browser/input/CompositionHelper.ts

@@ -239,6 +239,12 @@ export class CompositionHelper {
       this._compositionView.style.lineHeight = cellHeight + 'px';
       this._compositionView.style.fontFamily = this._optionsService.rawOptions.fontFamily;
       this._compositionView.style.fontSize = this._optionsService.rawOptions.fontSize + 'px';
+      // Limit the composition view width to the space between the cursor and
+      // the terminal's right edge, preventing it from overflowing the terminal.
+      const maxWidth = this._bufferService.cols * this._renderService.dimensions.css.cell.width - cursorLeft;
+      this._compositionView.style.maxWidth = maxWidth + 'px';
+      this._compositionView.style.overflow = 'hidden';
+      this._compositionView.style.direction = 'rtl';
       // Sync the textarea to the exact position of the composition view so the IME knows where the
       // text is.
       const compositionViewBounds = this._compositionView.getBoundingClientRect();