@xterm/xterm 6.1.0-beta.25 → 6.1.0-beta.251

package/src/browser/decorations/OverviewRulerRenderer.ts

@@ -5,7 +5,7 @@
 
 import { ColorZoneStore, IColorZone, IColorZoneStore } from 'browser/decorations/ColorZoneStore';
 import { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 
 const enum Constants {
@@ -38,7 +38,12 @@ export class OverviewRulerRenderer extends Disposable {
   private readonly _ctx: CanvasRenderingContext2D;
   private readonly _colorZoneStore: IColorZoneStore = new ColorZoneStore();
   private get _width(): number {
-    return this._optionsService.options.overviewRuler?.width || 0;
+    const scrollbar = this._optionsService.rawOptions.scrollbar;
+    const showScrollbar = scrollbar?.showScrollbar ?? true;
+    if (!showScrollbar) {
+      return 0;
+    }
+    return scrollbar?.width ?? 0;
   }
   private _animationFrame: number | undefined;
 
@@ -46,8 +51,6 @@ export class OverviewRulerRenderer extends Disposable {
   private _shouldUpdateAnchor: boolean | undefined = true;
   private _lastKnownBufferLength: number = 0;
 
-  private _containerHeight: number | undefined;
-
   constructor(
     private readonly _viewportElement: HTMLElement,
     private readonly _screenElement: HTMLElement,
@@ -86,17 +89,17 @@ export class OverviewRulerRenderer extends Disposable {
       }
     }));
 
-    // Container height changed
-    this._register(this._renderService.onRender((): void => {
-      if (!this._containerHeight || this._containerHeight !== this._screenElement.clientHeight) {
-        this._queueRefresh(true);
-        this._containerHeight = this._screenElement.clientHeight;
-      }
-    }));
+    this._register(this._renderService.onDimensionsChange(() => this._queueRefresh(true)));
 
     this._register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
-    this._register(this._optionsService.onSpecificOptionChange('overviewRuler', () => this._queueRefresh(true)));
+    this._register(this._optionsService.onSpecificOptionChange('scrollbar', () => this._queueRefresh(true)));
     this._register(this._themeService.onChangeColors(() => this._queueRefresh()));
+    this._register(toDisposable(() => {
+      if (this._animationFrame !== undefined) {
+        this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
+        this._animationFrame = undefined;
+      }
+    }));
     this._queueRefresh(true);
   }
 
@@ -139,15 +142,23 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _refreshCanvasDimensions(): void {
+    if (this._store.isDisposed || !this._renderService.hasRenderer()) {
+      return;
+    }
+    const cssCanvasHeight = this._renderService.dimensions.css.canvas.height;
+    const deviceCanvasHeight = this._renderService.dimensions.device.canvas.height;
     this._canvas.style.width = `${this._width}px`;
     this._canvas.width = Math.round(this._width * this._coreBrowserService.dpr);
-    this._canvas.style.height = `${this._screenElement.clientHeight}px`;
-    this._canvas.height = Math.round(this._screenElement.clientHeight * this._coreBrowserService.dpr);
+    this._canvas.style.height = `${cssCanvasHeight}px`;
+    this._canvas.height = deviceCanvasHeight;
     this._refreshDrawConstants();
     this._refreshColorZonePadding();
   }
 
   private _refreshDecorations(): void {
+    if (this._store.isDisposed || !this._renderService.hasRenderer()) {
+      return;
+    }
     if (this._shouldUpdateDimensions) {
       this._refreshCanvasDimensions();
     }
@@ -176,10 +187,10 @@ export class OverviewRulerRenderer extends Disposable {
   private _renderRulerOutline(): void {
     this._ctx.fillStyle = this._themeService.colors.overviewRulerBorder.css;
     this._ctx.fillRect(0, 0, Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
-    if (this._optionsService.rawOptions.overviewRuler.showTopBorder) {
+    if (this._optionsService.rawOptions.scrollbar?.overviewRuler?.showTopBorder) {
       this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, 0, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, Constants.OVERVIEW_RULER_BORDER_WIDTH);
     }
-    if (this._optionsService.rawOptions.overviewRuler.showBottomBorder) {
+    if (this._optionsService.rawOptions.scrollbar?.overviewRuler?.showBottomBorder) {
       this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
     }
   }
@@ -201,13 +212,18 @@ export class OverviewRulerRenderer extends Disposable {
   }
 
   private _queueRefresh(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void {
+    if (this._store.isDisposed) {
+      return;
+    }
     this._shouldUpdateDimensions = updateCanvasDimensions || this._shouldUpdateDimensions;
     this._shouldUpdateAnchor = updateAnchor || this._shouldUpdateAnchor;
     if (this._animationFrame !== undefined) {
       return;
     }
     this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
-      this._refreshDecorations();
+      if (!this._store.isDisposed) {
+        this._refreshDecorations();
+      }
       this._animationFrame = undefined;
     });
   }

package/src/browser/input/CompositionHelper.ts

@@ -30,6 +30,12 @@ export class CompositionHelper {
    */
   private _compositionPosition: IPosition;
 
+  /**
+   * Text that existed after the composing range when composition started.
+   * This is used to avoid treating existing trailing text as new input.
+   */
+  private _compositionSuffix: string;
+
   /**
    * Whether a composition is in the process of being sent, setting this to false will cancel any
    * in-progress composition.
@@ -41,6 +47,11 @@ export class CompositionHelper {
    */
   private _dataAlreadySent: string;
 
+  /**
+   * The pending textarea change timer, if any.
+   */
+  private _textareaChangeTimer?: number;
+
   constructor(
     private readonly _textarea: HTMLTextAreaElement,
     private readonly _compositionView: HTMLElement,
@@ -52,6 +63,7 @@ export class CompositionHelper {
     this._isComposing = false;
     this._isSendingComposition = false;
     this._compositionPosition = { start: 0, end: 0 };
+    this._compositionSuffix = '';
     this._dataAlreadySent = '';
   }
 
@@ -60,7 +72,13 @@ export class CompositionHelper {
    */
   public compositionstart(): void {
     this._isComposing = true;
-    this._compositionPosition.start = this._textarea.value.length;
+    // It's important to use the selection here instead of textarea length to avoid conflicts with
+    // screen reader mode
+    const start = this._textarea.selectionStart ?? this._textarea.value.length;
+    const end = this._textarea.selectionEnd ?? start;
+    this._compositionPosition.start = Math.min(start, end);
+    this._compositionPosition.end = Math.max(start, end);
+    this._compositionSuffix = this._textarea.value.substring(this._compositionPosition.end);
     this._compositionView.textContent = '';
     this._dataAlreadySent = '';
     this._compositionView.classList.add('active');
@@ -71,10 +89,13 @@ export class CompositionHelper {
    * @param ev The event.
    */
   public compositionupdate(ev: Pick<CompositionEvent, 'data'>): void {
-    this._compositionView.textContent = ev.data;
+    // Mark text as LTR, direction=rtl is used in CSS so the end of the text is followed for long
+    // compositions
+    this._compositionView.textContent = `\u200E${ev.data}\u200E`;
     this.updateCompositionElements();
     setTimeout(() => {
-      this._compositionPosition.end = this._textarea.value.length;
+      const end = this._textarea.selectionEnd ?? this._textarea.value.length;
+      this._compositionPosition.end = Math.max( this._compositionPosition.start, end);
     }, 0);
   }
 
@@ -141,6 +162,7 @@ export class CompositionHelper {
         start: this._compositionPosition.start,
         end: this._compositionPosition.end
       };
+      const currentCompositionSuffix = this._compositionSuffix;
 
       // Since composition* events happen before the changes take place in the textarea on most
       // browsers, use a setTimeout with 0ms time to allow the native compositionend event to
@@ -164,10 +186,14 @@ export class CompositionHelper {
             // if a new composition has started.
             input = this._textarea.value.substring(currentCompositionPosition.start, this._compositionPosition.start);
           } else {
-            // Don't use the end position here in order to pick up any characters after the
-            // composition has finished, for example when typing a non-composition character
-            // (eg. 2) after a composition character.
-            input = this._textarea.value.substring(currentCompositionPosition.start);
+            // Keep support for non-composition characters typed immediately after composition end
+            // while avoiding re-sending the trailing text that was already present
+            // before composition started.
+            const value = this._textarea.value;
+            const valueEnd = currentCompositionSuffix.length > 0 && value.endsWith(currentCompositionSuffix)
+              ? value.length - currentCompositionSuffix.length
+              : value.length;
+            input = value.substring(currentCompositionPosition.start, Math.max(currentCompositionPosition.start, valueEnd));
           }
           if (input.length > 0) {
             this._coreService.triggerDataEvent(input, true);
@@ -184,8 +210,12 @@ export class CompositionHelper {
    * IME is active.
    */
   private _handleAnyTextareaChanges(): void {
+    if (this._textareaChangeTimer) {
+      return;
+    }
     const oldValue = this._textarea.value;
-    setTimeout(() => {
+    this._textareaChangeTimer = window.setTimeout(() => {
+      this._textareaChangeTimer = undefined;
       // Ignore if a composition has started since the timeout
       if (!this._isComposing) {
         const newValue = this._textarea.value;
@@ -230,6 +260,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();

package/src/browser/public/Terminal.ts

@@ -6,14 +6,14 @@
 import * as Strings from 'browser/LocalizableStrings';
 import { CoreBrowserTerminal as TerminalCore } from 'browser/CoreBrowserTerminal';
 import { IBufferRange, ITerminal } from 'browser/Types';
-import { Disposable } from 'vs/base/common/lifecycle';
+import { Disposable } from 'common/Lifecycle';
 import { ITerminalOptions } from 'common/Types';
 import { AddonManager } from 'common/public/AddonManager';
 import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi';
 import { ParserApi } from 'common/public/ParserApi';
 import { UnicodeApi } from 'common/public/UnicodeApi';
-import { IBufferNamespace as IBufferNamespaceApi, IDecoration, IDecorationOptions, IDisposable, ILinkProvider, ILocalizableStrings, IMarker, IModes, IParser, ITerminalAddon, Terminal as ITerminalApi, ITerminalInitOnlyOptions, IUnicodeHandling } from '@xterm/xterm';
-import type { Event } from 'vs/base/common/event';
+import { IBufferNamespace as IBufferNamespaceApi, IDecoration, IDecorationOptions, IDisposable, ILinkProvider, ILocalizableStrings, IMarker, IModes, IParser, IRenderDimensions, ITerminalAddon, Terminal as ITerminalApi, ITerminalInitOnlyOptions, IUnicodeHandling } from '@xterm/xterm';
+import type { IEvent } from 'common/Event';
 
 /**
  * The set of options that only have an effect when set in the Terminal constructor.
@@ -68,25 +68,24 @@ export class Terminal extends Disposable implements ITerminalApi {
     }
   }
 
-  public get onBell(): Event<void> { return this._core.onBell; }
-  public get onBinary(): Event<string> { return this._core.onBinary; }
-  public get onCursorMove(): Event<void> { return this._core.onCursorMove; }
-  public get onData(): Event<string> { return this._core.onData; }
-  public get onKey(): Event<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
-  public get onLineFeed(): Event<void> { return this._core.onLineFeed; }
-  public get onRender(): Event<{ start: number, end: number }> { return this._core.onRender; }
-  public get onResize(): Event<{ cols: number, rows: number }> { return this._core.onResize; }
-  public get onScroll(): Event<number> { return this._core.onScroll; }
-  public get onSelectionChange(): Event<void> { return this._core.onSelectionChange; }
-  public get onTitleChange(): Event<string> { return this._core.onTitleChange; }
-  public get onWriteParsed(): Event<void> { return this._core.onWriteParsed; }
+  public get onBell(): IEvent<void> { return this._core.onBell; }
+  public get onBinary(): IEvent<string> { return this._core.onBinary; }
+  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
+  public get onData(): IEvent<string> { return this._core.onData; }
+  public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
+  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
+  public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; }
+  public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; }
+  public get onScroll(): IEvent<number> { return this._core.onScroll; }
+  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
+  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
+  public get onWriteParsed(): IEvent<void> { return this._core.onWriteParsed; }
+  public get onDimensionsChange(): IEvent<IRenderDimensions> { return this._core.onDimensionsChange; }
 
   public get element(): HTMLElement | undefined { return this._core.element; }
+  public get screenElement(): HTMLElement | undefined { return this._core.screenElement; }
   public get parser(): IParser {
-    if (!this._parser) {
-      this._parser = new ParserApi(this._core);
-    }
-    return this._parser;
+    return this._parser ??= new ParserApi(this._core);
   }
   public get unicode(): IUnicodeHandling {
     this._checkProposedApi();
@@ -96,19 +95,15 @@ export class Terminal extends Disposable implements ITerminalApi {
   public get rows(): number { return this._core.rows; }
   public get cols(): number { return this._core.cols; }
   public get buffer(): IBufferNamespaceApi {
-    if (!this._buffer) {
-      this._buffer = this._register(new BufferNamespaceApi(this._core));
-    }
-    return this._buffer;
+    return this._buffer ??= this._register(new BufferNamespaceApi(this._core));
   }
   public get markers(): ReadonlyArray<IMarker> {
-    this._checkProposedApi();
     return this._core.markers;
   }
   public get modes(): IModes {
     const m = this._core.coreService.decPrivateModes;
     let mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any' = 'none';
-    switch (this._core.coreMouseService.activeProtocol) {
+    switch (this._core.mouseStateService.activeProtocol) {
       case 'X10': mouseTrackingMode = 'x10'; break;
       case 'VT200': mouseTrackingMode = 'vt200'; break;
       case 'DRAG': mouseTrackingMode = 'drag'; break;
@@ -123,10 +118,15 @@ export class Terminal extends Disposable implements ITerminalApi {
       originMode: m.origin,
       reverseWraparoundMode: m.reverseWraparound,
       sendFocusMode: m.sendFocus,
+      showCursor: !this._core.coreService.isCursorHidden,
       synchronizedOutputMode: m.synchronizedOutput,
+      win32InputMode: m.win32InputMode,
       wraparoundMode: m.wraparound
     };
   }
+  public get dimensions(): IRenderDimensions | undefined {
+    return this._core.dimensions;
+  }
   public get options(): Required<ITerminalOptions> {
     return this._publicOptions;
   }
@@ -161,11 +161,9 @@ export class Terminal extends Disposable implements ITerminalApi {
     return this._core.registerLinkProvider(linkProvider);
   }
   public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
-    this._checkProposedApi();
     return this._core.registerCharacterJoiner(handler);
   }
   public deregisterCharacterJoiner(joinerId: number): void {
-    this._checkProposedApi();
     this._core.deregisterCharacterJoiner(joinerId);
   }
   public registerMarker(cursorYOffset: number = 0): IMarker {
@@ -173,7 +171,6 @@ export class Terminal extends Disposable implements ITerminalApi {
     return this._core.registerMarker(cursorYOffset);
   }
   public registerDecoration(decorationOptions: IDecorationOptions): IDecoration | undefined {
-    this._checkProposedApi();
     this._verifyPositiveIntegers(decorationOptions.x ?? 0, decorationOptions.width ?? 0, decorationOptions.height ?? 0);
     return this._core.registerDecoration(decorationOptions);
   }