Merge branch 'master' into feature/xterm-addon-serialize-restore-layout-and-cursor

README.md

@@ -169,6 +169,7 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**TeleType**](https://github.com/akshaykmr/TeleType): cli tool that allows you to share your terminal online conveniently. Show off mad cli-fu, help a colleague, teach, or troubleshoot.
 - [**Intervue**](https://www.intervue.io): Pair programming for interviews. Multiple programming languages supported, with results displayed by xterm.js.
 - [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP and Database services.  
+- [**Commas**](https://github.com/CyanSalt/commas): Commas is a hackable terminal and command runner.
 [And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
 
 Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it in our list. Note: Please add any new contributions to the end of the list only.

addons/xterm-addon-ligatures/package.json

@@ -31,7 +31,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "font-finder": "^1.0.4",
+    "font-finder": "^1.1.0",
     "font-ligatures": "^1.3.3"
   },
   "devDependencies": {

addons/xterm-addon-ligatures/src/tsconfig.json

@@ -1,16 +1,19 @@
 {
-    "compilerOptions": {
-        "target": "es2017",
-        "module": "commonjs",
-        "sourceMap": true,
-        "outDir": "../out",
-        "rootDir": ".",
-        "strict": true,
-        "noUnusedLocals": true,
-        "preserveWatchOutput": true
-    },
-    "include": [
-        "./**/*",
-        "../../../typings/xterm.d.ts"
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "sourceMap": true,
+    "outDir": "../out",
+    "rootDir": ".",
+    "strict": true,
+    "noUnusedLocals": true,
+    "preserveWatchOutput": true,
+    "types": [
+      "../../../node_modules/@types/mocha"
     ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ]
 }

addons/xterm-addon-ligatures/yarn.lock

@@ -78,13 +78,21 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-font-finder@^1.0.3, font-finder@^1.0.4:
+font-finder@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/font-finder/-/font-finder-1.0.4.tgz#2ca944954dd8d0e1b5bdc4c596cc08607761d89b"
   dependencies:
     get-system-fonts "^2.0.0"
     promise-stream-reader "^1.0.1"
 
+font-finder@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/font-finder/-/font-finder-1.1.0.tgz#2bff2b2762acba720239c8bec898a96daae90858"
+  integrity sha512-wpCL2uIbi6GurJbU7ZlQ3nGd61Ho+dSU6U83/xJT5UPFfN35EeCW/rOtS+5k+IuEZu2SYmHzDIPL9eA5tSYRAw==
+  dependencies:
+    get-system-fonts "^2.0.0"
+    promise-stream-reader "^1.0.1"
+
 font-ligatures@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/font-ligatures/-/font-ligatures-1.3.3.tgz#63fff18dc8adb3a11fe5eec1f4e8d7edfa8075b9"

addons/xterm-addon-search/src/SearchAddon.ts

@@ -158,8 +158,15 @@ export class SearchAddon implements ITerminalAddon {
     };
 
     if (incremental) {
+      // Try to expand selection to right first.
       result = this._findInLine(term, searchPosition, searchOptions, false);
-      if (!(result && result.row === startRow && result.col === startCol)) {
+      const isOldResultHighlighted = result && result.row === startRow && result.col === startCol;
+      if (!isOldResultHighlighted) {
+        // If selection was not able to be expanded to the right, then try reverse search
+        if (currentSelection) {
+          searchPosition.startRow = currentSelection.endRow;
+          searchPosition.startCol = currentSelection.endColumn;
+        }
         result = this._findInLine(term, searchPosition, searchOptions, true);
       }
     } else {
@@ -245,6 +252,7 @@ export class SearchAddon implements ITerminalAddon {
    * @param term The search term.
    * @param position The position to start the search.
    * @param searchOptions Search options.
+   * @param isReverseSearch Whether the search should start from the right side of the terminal and search to the left.
    * @return The search result if it was found.
    */
   protected _findInLine(term: string, searchPosition: ISearchPosition, searchOptions: ISearchOptions = {}, isReverseSearch: boolean = false): ISearchResult | undefined {

bin/extract_vtfeatures.js

@@ -359,7 +359,7 @@ function empty(ar) {
 }
 
 function* parseMultiLineGen(filename, s) {
-  if (!~s.indexOf('@vt:')) {
+  if (!s.includes('@vt:')) {
     return;
   }
   const lines = s.split('\n').map(el => el.trim().replace(/[*]/, '').replace(/\s/, ''));
@@ -413,7 +413,7 @@ function parseSingleLine(filename, s) {
   const line = s.trim();
   const match = line.match(REX_VT_LINE);
   if (match !== null) {
-    if (!~TYPES.indexOf(match[2])) {
+    if (!TYPES.includes(match[2])) {
       throw new Error(`unkown vt-command type "${match[2]}" specified in "${filename}"`);
     }
     return {

bin/install-addons.js

@@ -25,7 +25,7 @@ if (fs.existsSync(addonsPath)) {
 
   // walk all addon folders
   fs.readdir(addonsPath, (err, files) => {
-    files.forEach(folder => {
+    for (const folder of files) {
       const addonPath = path.join(addonsPath, folder);
 
       // install only if there are dependencies listed
@@ -51,6 +51,6 @@ if (fs.existsSync(addonsPath)) {
       } else {
         console.log('Skipped', folder);
       }
-    });
+    }
   });
 }

bin/publish.js

@@ -11,7 +11,7 @@ const path = require('path');
 // Setup auth
 fs.writeFileSync(`${process.env['HOME']}/.npmrc`, `//registry.npmjs.org/:_authToken=${process.env['NPM_AUTH_TOKEN']}`);
 
-const isDryRun = process.argv.indexOf('--dry') !== -1;
+const isDryRun = process.argv.includes('--dry');
 if (isDryRun) {
   console.log('Publish dry run');
 }
@@ -36,13 +36,13 @@ const addonPackageDirs = [
   path.resolve(__dirname, '../addons/xterm-addon-webgl')
 ];
 console.log(`Checking if addons need to be published`);
-addonPackageDirs.forEach(p => {
+for (const p of addonPackageDirs) {
   const addon = path.basename(p);
-  if (changedFiles.some(e => e.indexOf(addon) !== -1)) {
+  if (changedFiles.some(e => e.includes(addon))) {
     console.log(`Try publish ${addon}`);
     checkAndPublishPackage(p);
   }
-});
+}
 
 // Publish website if it's a stable release
 if (isStableRelease) {
@@ -54,7 +54,7 @@ function checkAndPublishPackage(packageDir) {
 
   // Determine if this is a stable or beta release
   const publishedVersions = getPublishedVersions(packageJson);
-  const isStableRelease = publishedVersions.indexOf(packageJson.version) === -1;
+  const isStableRelease = !publishedVersions.includes(packageJson.version);
 
   // Get the next version
   let nextVersion = isStableRelease ? packageJson.version : getNextBetaVersion(packageJson);

bin/test_mousemodes.js

@@ -88,19 +88,19 @@ function evalButtonCode(code) {
   if (code & 64) {
     button |= 4
   }
-  let actionS = 'press';
+  let action = 'press';
   let buttonS = reverseButtons[button];
   if (button === 3) {
     buttonS = '<none>';
-    actionS = 'release';
+    action = 'release';
   }
   if (move) {
-    actionS = 'move';
+    action = 'move';
   } else if (4 <= button && button <= 7) {
     buttonS = 'wheel';
-    actionS = button === 4 ? 'up' : button === 5 ? 'down' : button === 6 ? 'left' : 'right';
+    action = button === 4 ? 'up' : button === 5 ? 'down' : button === 6 ? 'left' : 'right';
   }
-  return {button: buttonS, action: actionS, modifier};
+  return {button: buttonS, action, modifier};
 }
 
 // protocols

demo/client.ts

@@ -93,7 +93,7 @@ const paddingElement = <HTMLInputElement>document.getElementById('padding');
 
 function setPadding(): void {
   term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
-  term.fit();
+  addons.fit.instance.fit();
 }
 
 function getSearchOptions(e: KeyboardEvent): ISearchOptions {

demo/server.js

@@ -43,15 +43,15 @@ function startServer() {
     const env = Object.assign({}, process.env);
     env['COLORTERM'] = 'truecolor';
     var cols = parseInt(req.query.cols),
-        rows = parseInt(req.query.rows),
-        term = pty.spawn(process.platform === 'win32' ? 'cmd.exe' : 'bash', [], {
-          name: 'xterm-256color',
-          cols: cols || 80,
-          rows: rows || 24,
-          cwd: env.PWD,
-          env: env,
-          encoding: USE_BINARY ? null : 'utf8'
-        });
+      rows = parseInt(req.query.rows),
+      term = pty.spawn(process.platform === 'win32' ? 'cmd.exe' : 'bash', [], {
+        name: 'xterm-256color',
+        cols: cols || 80,
+        rows: rows || 24,
+        cwd: process.platform === 'win32' ? undefined : env.PWD,
+        env: env,
+        encoding: USE_BINARY ? null : 'utf8'
+      });
 
     console.log('Created terminal with PID: ' + term.pid);
     terminals[term.pid] = term;

package.json

@@ -52,17 +52,17 @@
     "express-ws": "^4.0.0",
     "glob": "^7.0.5",
     "jsdom": "^16.4.0",
-    "mocha": "^8.2.0",
+    "mocha": "^8.2.1",
     "mustache": "^4.0.1",
     "node-pty": "^0.9.0",
     "nyc": "^15.1.0",
     "playwright": "^1.5.2",
     "source-map-loader": "^1.1.2",
-    "ts-loader": "^8.0.7",
+    "ts-loader": "^8.0.8",
     "typescript": "4.0",
     "utf8": "^3.0.0",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^4.1.0",
+    "webpack": "^5.4.0",
+    "webpack-cli": "^4.2.0",
     "ws": "^7.3.1",
     "xterm-benchmark": "^0.1.3"
   }

src/browser/AccessibilityManager.ts

@@ -56,6 +56,7 @@ export class AccessibilityManager extends Disposable {
     this._accessibilityTreeRoot.classList.add('xterm-accessibility');
 
     this._rowContainer = document.createElement('div');
+    this._rowContainer.setAttribute('role', 'list');
     this._rowContainer.classList.add('xterm-accessibility-tree');
     this._rowElements = [];
     for (let i = 0; i < this._terminal.rows; i++) {
@@ -262,7 +263,7 @@ export class AccessibilityManager extends Disposable {
       const element = this._rowElements[i];
       if (element) {
         if (lineData.length === 0) {
-          element.innerHTML = '&nbsp;';
+          element.innerText = '\u00a0';
         } else {
           element.textContent = lineData;
         }

src/browser/Clipboard.ts

@@ -89,8 +89,8 @@ export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextA
 export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, screenElement: HTMLElement, selectionService: ISelectionService, shouldSelectWord: boolean): void {
   moveTextAreaUnderMouseCursor(ev, textarea, screenElement);
 
-  if (shouldSelectWord && !selectionService.isClickInSelection(ev)) {
-    selectionService.selectWordAtCursor(ev);
+  if (shouldSelectWord) {
+    selectionService.rightClickSelect(ev);
   }
 
   // Get textarea ready to copy from the context menu

src/browser/ColorManager.ts

@@ -17,9 +17,8 @@ const DEFAULT_SELECTION = {
   rgba: 0xFFFFFF4D
 };
 
-// An IIFE to generate DEFAULT_ANSI_COLORS. Do not mutate DEFAULT_ANSI_COLORS, instead make a copy
-// and mutate that.
-export const DEFAULT_ANSI_COLORS = (() => {
+// An IIFE to generate DEFAULT_ANSI_COLORS.
+export const DEFAULT_ANSI_COLORS = Object.freeze((() => {
   const colors = [
     // dark:
     css.toColor('#2e3436'),
@@ -64,7 +63,7 @@ export const DEFAULT_ANSI_COLORS = (() => {
   }
 
   return colors;
-})();
+})());
 
 /**
  * Manages the source of truth for a terminal's colors.

src/browser/Terminal.ts

@@ -39,7 +39,7 @@ import { MouseZoneManager } from 'browser/MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
 import { ITheme, IMarker, IDisposable, ISelectionPosition, ILinkProvider } from 'xterm';
 import { DomRenderer } from 'browser/renderer/dom/DomRenderer';
-import { IKeyboardEvent, KeyboardResultType, CoreMouseEventType, CoreMouseButton, CoreMouseAction, ITerminalOptions } from 'common/Types';
+import { IKeyboardEvent, KeyboardResultType, CoreMouseEventType, CoreMouseButton, CoreMouseAction, ITerminalOptions, IAnsiColorChangeEvent } from 'common/Types';
 import { evaluateKeyboardEvent } from 'common/input/Keyboard';
 import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
@@ -53,6 +53,7 @@ import { Linkifier2 } from 'browser/Linkifier2';
 import { CoreBrowserService } from 'browser/services/CoreBrowserService';
 import { CoreTerminal } from 'common/CoreTerminal';
 import { ITerminalOptions as IInitializedTerminalOptions } from 'common/services/Services';
+import { rgba } from 'browser/Color';
 
 // Let it work inside Node.js for automated testing purposes.
 const document: Document = (typeof window !== 'undefined') ? window.document : null as any;
@@ -148,6 +149,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(this._inputHandler.onRequestReset(() => this.reset()));
     this.register(this._inputHandler.onRequestScroll((eraseAttr, isWrapped) => this.scroll(eraseAttr, isWrapped || undefined)));
     this.register(this._inputHandler.onRequestWindowsOptionsReport(type => this._reportWindowsOptions(type)));
+    this.register(this._inputHandler.onAnsiColorChange((event) => this._changeAnsiColor(event)));
     this.register(forwardEvent(this._inputHandler.onCursorMove, this._onCursorMove));
     this.register(forwardEvent(this._inputHandler.onTitleChange, this._onTitleChange));
     this.register(forwardEvent(this._inputHandler.onA11yChar, this._onA11yCharEmitter));
@@ -157,6 +159,19 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(this._bufferService.onResize(e => this._afterResize(e.cols, e.rows)));
   }
 
+  private _changeAnsiColor(event: IAnsiColorChangeEvent): void {
+    if (!this._colorManager) { return; }
+
+    event.colors.forEach(ansiColor => {
+      const color = rgba.toColor(ansiColor.red, ansiColor.green, ansiColor.blue);
+
+      this._colorManager!.colors.ansi[ansiColor.colorIndex] = color;
+    });
+
+    this._renderService?.setColors(this._colorManager!.colors);
+    this.viewport?.onThemeChange(this._colorManager!.colors);
+  }
+
   public dispose(): void {
     if (this._isDisposed) {
       return;

src/browser/Terminal2.test.ts

@@ -32,7 +32,7 @@ if (os.platform() === 'darwin') {
   );
 }
 // filter skipFilenames
-const FILES = TESTFILES.filter(value => SKIP_FILES.indexOf(value.split('/').slice(-1)[0]) === -1);
+const FILES = TESTFILES.filter(value => !SKIP_FILES.includes(value.split('/').slice(-1)[0]));
 
 describe('Escape Sequence Files', function(): void {
   this.timeout(1000);
@@ -104,7 +104,7 @@ describe('Escape Sequence Files', function(): void {
 function formatError(input: string, output: string, expected: string): string {
   function addLineNumber(start: number, color: string): (s: string) => string {
     let counter = start || 0;
-    return function(s: string): string {
+    return (s: string): string => {
       counter += 1;
       return '\x1b[33m' + (' ' + counter).slice(-2) + color + s;
     };

src/browser/input/CompositionHelper.ts

@@ -35,6 +35,11 @@ export class CompositionHelper {
    */
   private _isSendingComposition: boolean;
 
+  /**
+   * Data already sent due to keydown event.
+   */
+  private _dataAlreadySent: string;
+
   constructor(
     private readonly _textarea: HTMLTextAreaElement,
     private readonly _compositionView: HTMLElement,
@@ -46,6 +51,7 @@ export class CompositionHelper {
     this._isComposing = false;
     this._isSendingComposition = false;
     this._compositionPosition = { start: 0, end: 0 };
+    this._dataAlreadySent = '';
   }
 
   /**
@@ -55,6 +61,7 @@ export class CompositionHelper {
     this._isComposing = true;
     this._compositionPosition.start = this._textarea.value.length;
     this._compositionView.textContent = '';
+    this._dataAlreadySent = '';
     this._compositionView.classList.add('active');
   }
 
@@ -147,6 +154,9 @@ export class CompositionHelper {
         if (this._isSendingComposition) {
           this._isSendingComposition = false;
           let input;
+          // Add length of data already sent due to keydown event,
+          // 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);
@@ -156,7 +166,9 @@ export class CompositionHelper {
             // (eg. 2) after a composition character.
             input = this._textarea.value.substring(currentCompositionPosition.start);
           }
-          this._coreService.triggerDataEvent(input, true);
+          if (input.length > 0) {
+            this._coreService.triggerDataEvent(input, true);
+          }
         }
       }, 0);
     }
@@ -176,6 +188,7 @@ export class CompositionHelper {
         const newValue = this._textarea.value;
         const diff = newValue.replace(oldValue, '');
         if (diff.length > 0) {
+          this._dataAlreadySent = diff;
           this._coreService.triggerDataEvent(diff, true);
         }
       }

src/browser/public/Terminal.ts

@@ -13,11 +13,13 @@ import * as Strings from '../LocalizableStrings';
 import { IEvent, EventEmitter } from 'common/EventEmitter';
 import { AddonManager } from './AddonManager';
 import { IParams } from 'common/parser/Types';
+import { BufferSet } from 'common/buffer/BufferSet';
 
 export class Terminal implements ITerminalApi {
   private _core: ITerminal;
   private _addonManager: AddonManager;
   private _parser: IParser | undefined;
+  private _buffer: BufferNamespaceApi | undefined;
 
   constructor(options?: ITerminalOptions) {
     this._core = new TerminalCore(options);
@@ -58,7 +60,10 @@ export class Terminal implements ITerminalApi {
   public get cols(): number { return this._core.cols; }
   public get buffer(): IBufferNamespaceApi {
     this._checkProposedApi();
-    return new BufferNamespaceApi(this._core.buffers);
+    if (!this._buffer) {
+      this._buffer = new BufferNamespaceApi(this._core);
+    }
+    return this._buffer;
   }
   public get markers(): ReadonlyArray<IMarker> {
     this._checkProposedApi();
@@ -170,7 +175,7 @@ export class Terminal implements ITerminalApi {
     this._core.paste(data);
   }
   public getOption(key: 'bellSound' | 'bellStyle' | 'cursorStyle' | 'fontFamily' | 'logLevel' | 'rendererType' | 'termName' | 'wordSeparator'): string;
-  public getOption(key: 'allowTransparency' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell'): boolean;
+  public getOption(key: 'allowTransparency' | 'altClickMovesCursor' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell'): boolean;
   public getOption(key: 'cols' | 'fontSize' | 'letterSpacing' | 'lineHeight' | 'rows' | 'tabStopWidth' | 'scrollback'): number;
   public getOption(key: 'fontWeight' | 'fontWeightBold'): FontWeight;
   public getOption(key: string): any;
@@ -182,7 +187,7 @@ export class Terminal implements ITerminalApi {
   public setOption(key: 'logLevel', value: 'debug' | 'info' | 'warn' | 'error' | 'off'): void;
   public setOption(key: 'bellStyle', value: 'none' | 'visual' | 'sound' | 'both'): void;
   public setOption(key: 'cursorStyle', value: 'block' | 'underline' | 'bar'): void;
-  public setOption(key: 'allowTransparency' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell', value: boolean): void;
+  public setOption(key: 'allowTransparency' | 'altClickMovesCursor' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell', value: boolean): void;
   public setOption(key: 'fontSize' | 'letterSpacing' | 'lineHeight' | 'tabStopWidth' | 'scrollback', value: number): void;
   public setOption(key: 'theme', value: ITheme): void;
   public setOption(key: 'cols' | 'rows', value: number): void;
@@ -245,21 +250,21 @@ class BufferNamespaceApi implements IBufferNamespaceApi {
   private _onBufferChange = new EventEmitter<IBufferApi>();
   public get onBufferChange(): IEvent<IBufferApi> { return this._onBufferChange.event; }
 
-  constructor(private _buffers: IBufferSet) {
-    this._normal = new BufferApiView(this._buffers.normal, 'normal');
-    this._alternate = new BufferApiView(this._buffers.alt, 'alternate');
-    this._buffers.onBufferActivate(() => this._onBufferChange.fire(this.active));
+  constructor(private _core: ITerminal) {
+    this._normal = new BufferApiView(this._core.buffers.normal, 'normal');
+    this._alternate = new BufferApiView(this._core.buffers.alt, 'alternate');
+    this._core.buffers.onBufferActivate(() => this._onBufferChange.fire(this.active));
   }
   public get active(): IBufferApi {
-    if (this._buffers.active === this._buffers.normal) { return this.normal; }
-    if (this._buffers.active === this._buffers.alt) { return this.alternate; }
+    if (this._core.buffers.active === this._core.buffers.normal) { return this.normal; }
+    if (this._core.buffers.active === this._core.buffers.alt) { return this.alternate; }
     throw new Error('Active buffer is neither normal nor alternate');
   }
   public get normal(): IBufferApi {
-    return this._normal.init(this._buffers.normal);
+    return this._normal.init(this._core.buffers.normal);
   }
   public get alternate(): IBufferApi {
-    return this._alternate.init(this._buffers.alt);
+    return this._alternate.init(this._core.buffers.alt);
   }
 }
 

src/browser/renderer/atlas/CharAtlasUtils.ts

@@ -16,9 +16,7 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     cursor: undefined,
     cursorAccent: undefined,
     selection: undefined,
-    // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
-    // dynamic character atlas.
-    ansi: colors.ansi.slice(0, 16)
+    ansi: colors.ansi
   };
   return {
     devicePixelRatio: window.devicePixelRatio,