@xterm/xterm 5.5.0-beta.9 → 5.6.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xterm/xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "5.5.0-beta.9",
+  "version": "5.6.0-beta.1",
   "main": "lib/xterm.js",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",

package/src/browser/input/CompositionHelper.ts

@@ -159,8 +159,9 @@ export class CompositionHelper {
           // otherwise input characters can be duplicated. (Issue #3191)
           currentCompositionPosition.start += this._dataAlreadySent.length;
           if (this._isComposing) {
-            // Use the end position to get the string if a new composition has started.
-            input = this._textarea.value.substring(currentCompositionPosition.start, currentCompositionPosition.end);
+            // Use the start position of the new composition to get the string
+            // 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

package/src/browser/renderer/dom/DomRenderer.ts

@@ -183,14 +183,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       ` font-style: italic;` +
       `}`;
     // Blink animation
+    const blinkAnimationUnderlineId = `blink_underline_${this._terminalClass}`;
+    const blinkAnimationBarId = `blink_bar_${this._terminalClass}`;
+    const blinkAnimationBlockId = `blink_block_${this._terminalClass}`;
     styles +=
-      `@keyframes blink_box_shadow` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationUnderlineId} {` +
       ` 50% {` +
       `  border-bottom-style: hidden;` +
       ` }` +
       `}`;
     styles +=
-      `@keyframes blink_block` + `_` + this._terminalClass + ` {` +
+      `@keyframes ${blinkAnimationBarId} {` +
+      ` 50% {` +
+      `  box-shadow: none;` +
+      ` }` +
+      `}`;
+    styles +=
+      `@keyframes ${blinkAnimationBlockId} {` +
       ` 0% {` +
       `  background-color: ${colors.cursor.css};` +
       `  color: ${colors.cursorAccent.css};` +
@@ -202,13 +211,23 @@ export class DomRenderer extends Disposable implements IRenderer {
       `}`;
     // Cursor
     styles +=
-      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}:not(.${RowCss.CURSOR_STYLE_BLOCK_CLASS}) {` +
-      ` animation: blink_box_shadow` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_UNDERLINE_CLASS} {` +
+      ` animation: ${blinkAnimationUnderlineId} 1s step-end infinite;` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BAR_CLASS} {` +
+      ` animation: ${blinkAnimationBarId} 1s step-end infinite;` +
       `}` +
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_BLINK_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
-      ` animation: blink_block` + `_` + this._terminalClass + ` 1s step-end infinite;` +
+      ` animation: ${blinkAnimationBlockId} 1s step-end infinite;` +
       `}` +
+      // !important helps fix an issue where the cursor will not render on top of the selection,
+      // however it's very hard to fix this issue and retain the blink animation without the use of
+      // !important. So this edge case fails when cursor blink is on.
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS} {` +
+      ` background-color: ${colors.cursor.css};` +
+      ` color: ${colors.cursorAccent.css};` +
+      `}` +
+      `${this._terminalSelector} .${ROW_CONTAINER_CLASS} .${RowCss.CURSOR_CLASS}.${RowCss.CURSOR_STYLE_BLOCK_CLASS}:not(.${RowCss.CURSOR_BLINK_CLASS}) {` +
       ` background-color: ${colors.cursor.css} !important;` +
       ` color: ${colors.cursorAccent.css} !important;` +
       `}` +

package/src/browser/renderer/shared/RendererUtils.ts

@@ -48,11 +48,13 @@ export function allowRescaling(codepoint: number | undefined, width: number, gly
   return (
     // Is single cell width
     width === 1 &&
-    // Glyph exceeds cell bounds, add 25% to avoid hurting readability by rescaling glyphs that
+    // Glyph exceeds cell bounds, add 50% to avoid hurting readability by rescaling glyphs that
     // barely overlap
-    glyphSizeX > deviceCellWidth * 1.25 &&
+    glyphSizeX > Math.ceil(deviceCellWidth * 1.5) &&
+    // Never rescale ascii
+    codepoint !== undefined && codepoint > 0xFF &&
     // Never rescale emoji
-    codepoint !== undefined && !isEmoji(codepoint) &&
+    !isEmoji(codepoint) &&
     // Never rescale powerline or nerd fonts
     !isPowerlineGlyph(codepoint) && !isNerdFontGlyph(codepoint)
   );

package/src/browser/renderer/shared/README.md

@@ -1 +0,0 @@
-This folder contains files that are shared between the renderer addons, but not necessarily bundled into the `xterm` module.

package/src/headless/Terminal.ts

@@ -1,140 +0,0 @@
-/**
- * Copyright (c) 2014 The xterm.js authors. All rights reserved.
- * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
- * @license MIT
- *
- * Originally forked from (with the author's permission):
- *   Fabrice Bellard's javascript vt100 for jslinux:
- *   http://bellard.org/jslinux/
- *   Copyright (c) 2011 Fabrice Bellard
- *   The original design remains. The terminal itself
- *   has been extended to include xterm CSI codes, among
- *   other features.
- *
- * Terminal Emulation References:
- *   http://vt100.net/
- *   http://invisible-island.net/xterm/ctlseqs/ctlseqs.txt
- *   http://invisible-island.net/xterm/ctlseqs/ctlseqs.html
- *   http://invisible-island.net/vttest/
- *   http://www.inwap.com/pdp10/ansicode.txt
- *   http://linux.die.net/man/4/console_codes
- *   http://linux.die.net/man/7/urxvt
- */
-
-import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
-import { IBuffer } from 'common/buffer/Types';
-import { CoreTerminal } from 'common/CoreTerminal';
-import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { IMarker, ITerminalOptions, ScrollSource } from 'common/Types';
-
-export class Terminal extends CoreTerminal {
-  private readonly _onBell = this.register(new EventEmitter<void>());
-  public readonly onBell = this._onBell.event;
-  private readonly _onCursorMove = this.register(new EventEmitter<void>());
-  public readonly onCursorMove = this._onCursorMove.event;
-  private readonly _onTitleChange = this.register(new EventEmitter<string>());
-  public readonly onTitleChange = this._onTitleChange.event;
-  private readonly _onA11yCharEmitter = this.register(new EventEmitter<string>());
-  public readonly onA11yChar = this._onA11yCharEmitter.event;
-  private readonly _onA11yTabEmitter = this.register(new EventEmitter<number>());
-  public readonly onA11yTab = this._onA11yTabEmitter.event;
-
-  constructor(
-    options: ITerminalOptions = {}
-  ) {
-    super(options);
-
-    this._setup();
-
-    // Setup InputHandler listeners
-    this.register(this._inputHandler.onRequestBell(() => this.bell()));
-    this.register(this._inputHandler.onRequestReset(() => this.reset()));
-    this.register(forwardEvent(this._inputHandler.onCursorMove, this._onCursorMove));
-    this.register(forwardEvent(this._inputHandler.onTitleChange, this._onTitleChange));
-    this.register(forwardEvent(this._inputHandler.onA11yChar, this._onA11yCharEmitter));
-    this.register(forwardEvent(this._inputHandler.onA11yTab, this._onA11yTabEmitter));
-  }
-
-  /**
-   * Convenience property to active buffer.
-   */
-  public get buffer(): IBuffer {
-    return this.buffers.active;
-  }
-
-  // TODO: Support paste here?
-
-  public get markers(): IMarker[] {
-    return this.buffer.markers;
-  }
-
-  public addMarker(cursorYOffset: number): IMarker | undefined {
-    // Disallow markers on the alt buffer
-    if (this.buffer !== this.buffers.normal) {
-      return;
-    }
-
-    return this.buffer.addMarker(this.buffer.ybase + this.buffer.y + cursorYOffset);
-  }
-
-  public bell(): void {
-    this._onBell.fire();
-  }
-
-  public input(data: string, wasUserInput: boolean = true): void {
-    this.coreService.triggerDataEvent(data, wasUserInput);
-  }
-
-  /**
-   * Resizes the terminal.
-   *
-   * @param x The number of columns to resize to.
-   * @param y The number of rows to resize to.
-   */
-  public resize(x: number, y: number): void {
-    if (x === this.cols && y === this.rows) {
-      return;
-    }
-
-    super.resize(x, y);
-  }
-
-  /**
-   * Clear the entire buffer, making the prompt line the new first line.
-   */
-  public clear(): void {
-    if (this.buffer.ybase === 0 && this.buffer.y === 0) {
-      // Don't clear if it's already clear
-      return;
-    }
-    this.buffer.lines.set(0, this.buffer.lines.get(this.buffer.ybase + this.buffer.y)!);
-    this.buffer.lines.length = 1;
-    this.buffer.ydisp = 0;
-    this.buffer.ybase = 0;
-    this.buffer.y = 0;
-    for (let i = 1; i < this.rows; i++) {
-      this.buffer.lines.push(this.buffer.getBlankLine(DEFAULT_ATTR_DATA));
-    }
-    this._onScroll.fire({ position: this.buffer.ydisp, source: ScrollSource.TERMINAL });
-  }
-
-  /**
-   * Reset terminal.
-   * Note: Calling this directly from JS is synchronous but does not clear
-   * input buffers and does not reset the parser, thus the terminal will
-   * continue to apply pending input data.
-   * If you need in band reset (synchronous with input data) consider
-   * using DECSTR (soft reset, CSI ! p) or RIS instead (hard reset, ESC c).
-   */
-  public reset(): void {
-    /**
-     * Since _setup handles a full terminal creation, we have to carry forward
-     * a few things that should not reset.
-     */
-    this.options.rows = this.rows;
-    this.options.cols = this.cols;
-
-    this._setup();
-    super.reset();
-  }
-}

package/src/headless/public/Terminal.ts

@@ -1,198 +0,0 @@
-/**
- * Copyright (c) 2018 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { IEvent } from 'common/EventEmitter';
-import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi';
-import { ParserApi } from 'common/public/ParserApi';
-import { UnicodeApi } from 'common/public/UnicodeApi';
-import { IBufferNamespace as IBufferNamespaceApi, IMarker, IModes, IParser, ITerminalAddon, ITerminalInitOnlyOptions, IUnicodeHandling, Terminal as ITerminalApi } from '@xterm/headless';
-import { Terminal as TerminalCore } from 'headless/Terminal';
-import { AddonManager } from 'common/public/AddonManager';
-import { ITerminalOptions } from 'common/Types';
-import { Disposable } from 'common/Lifecycle';
-/**
- * The set of options that only have an effect when set in the Terminal constructor.
- */
-const CONSTRUCTOR_ONLY_OPTIONS = ['cols', 'rows'];
-
-export class Terminal extends Disposable implements ITerminalApi {
-  private _core: TerminalCore;
-  private _addonManager: AddonManager;
-  private _parser: IParser | undefined;
-  private _buffer: BufferNamespaceApi | undefined;
-  private _publicOptions: Required<ITerminalOptions>;
-
-  constructor(options?: ITerminalOptions & ITerminalInitOnlyOptions) {
-    super();
-
-    this._core = this.register(new TerminalCore(options));
-    this._addonManager = this.register(new AddonManager());
-
-    this._publicOptions = { ... this._core.options };
-    const getter = (propName: string): any => {
-      return this._core.options[propName];
-    };
-    const setter = (propName: string, value: any): void => {
-      this._checkReadonlyOptions(propName);
-      this._core.options[propName] = value;
-    };
-
-    for (const propName in this._core.options) {
-      Object.defineProperty(this._publicOptions, propName, {
-        get: () => {
-          return this._core.options[propName];
-        },
-        set: (value: any) => {
-          this._checkReadonlyOptions(propName);
-          this._core.options[propName] = value;
-        }
-      });
-      const desc = {
-        get: getter.bind(this, propName),
-        set: setter.bind(this, propName)
-      };
-      Object.defineProperty(this._publicOptions, propName, desc);
-    }
-  }
-
-  private _checkReadonlyOptions(propName: string): void {
-    // Throw an error if any constructor only option is modified
-    // from terminal.options
-    // Modifications from anywhere else are allowed
-    if (CONSTRUCTOR_ONLY_OPTIONS.includes(propName)) {
-      throw new Error(`Option "${propName}" can only be set in the constructor`);
-    }
-  }
-
-  private _checkProposedApi(): void {
-    if (!this._core.optionsService.options.allowProposedApi) {
-      throw new Error('You must set the allowProposedApi option to true to use proposed API');
-    }
-  }
-
-  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 onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
-  public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; }
-  public get onScroll(): IEvent<number> { return this._core.onScroll; }
-  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
-
-  public get parser(): IParser {
-    this._checkProposedApi();
-    if (!this._parser) {
-      this._parser = new ParserApi(this._core);
-    }
-    return this._parser;
-  }
-  public get unicode(): IUnicodeHandling {
-    this._checkProposedApi();
-    return new UnicodeApi(this._core);
-  }
-  public get rows(): number { return this._core.rows; }
-  public get cols(): number { return this._core.cols; }
-  public get buffer(): IBufferNamespaceApi {
-    this._checkProposedApi();
-    if (!this._buffer) {
-      this._buffer = this.register(new BufferNamespaceApi(this._core));
-    }
-    return this._buffer;
-  }
-  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) {
-      case 'X10': mouseTrackingMode = 'x10'; break;
-      case 'VT200': mouseTrackingMode = 'vt200'; break;
-      case 'DRAG': mouseTrackingMode = 'drag'; break;
-      case 'ANY': mouseTrackingMode = 'any'; break;
-    }
-    return {
-      applicationCursorKeysMode: m.applicationCursorKeys,
-      applicationKeypadMode: m.applicationKeypad,
-      bracketedPasteMode: m.bracketedPasteMode,
-      insertMode: this._core.coreService.modes.insertMode,
-      mouseTrackingMode: mouseTrackingMode,
-      originMode: m.origin,
-      reverseWraparoundMode: m.reverseWraparound,
-      sendFocusMode: m.sendFocus,
-      wraparoundMode: m.wraparound
-    };
-  }
-  public get options(): Required<ITerminalOptions> {
-    return this._publicOptions;
-  }
-  public set options(options: ITerminalOptions) {
-    for (const propName in options) {
-      this._publicOptions[propName] = options[propName];
-    }
-  }
-  public input(data: string, wasUserInput: boolean = true): void {
-    this._core.input(data, wasUserInput);
-  }
-  public resize(columns: number, rows: number): void {
-    this._verifyIntegers(columns, rows);
-    this._core.resize(columns, rows);
-  }
-  public registerMarker(cursorYOffset: number = 0): IMarker | undefined {
-    this._checkProposedApi();
-    this._verifyIntegers(cursorYOffset);
-    return this._core.addMarker(cursorYOffset);
-  }
-  public addMarker(cursorYOffset: number): IMarker | undefined {
-    return this.registerMarker(cursorYOffset);
-  }
-  public dispose(): void {
-    super.dispose();
-  }
-  public scrollLines(amount: number): void {
-    this._verifyIntegers(amount);
-    this._core.scrollLines(amount);
-  }
-  public scrollPages(pageCount: number): void {
-    this._verifyIntegers(pageCount);
-    this._core.scrollPages(pageCount);
-  }
-  public scrollToTop(): void {
-    this._core.scrollToTop();
-  }
-  public scrollToBottom(): void {
-    this._core.scrollToBottom();
-  }
-  public scrollToLine(line: number): void {
-    this._verifyIntegers(line);
-    this._core.scrollToLine(line);
-  }
-  public clear(): void {
-    this._core.clear();
-  }
-  public write(data: string | Uint8Array, callback?: () => void): void {
-    this._core.write(data, callback);
-  }
-  public writeln(data: string | Uint8Array, callback?: () => void): void {
-    this._core.write(data);
-    this._core.write('\r\n', callback);
-  }
-  public reset(): void {
-    this._core.reset();
-  }
-  public loadAddon(addon: ITerminalAddon): void {
-    // TODO: This could cause issues if the addon calls renderer apis
-    this._addonManager.loadAddon(this as any, addon);
-  }
-
-  private _verifyIntegers(...values: number[]): void {
-    for (const value of values) {
-      if (value === Infinity || isNaN(value) || value % 1 !== 0) {
-        throw new Error('This API only accepts integers');
-      }
-    }
-  }
-}