Merge branch 'master' into a11y-char-width2

2026-08-05 13:43:48 -07:00 · 2024-06-04 05:29:06 -07:00
parent 26dc69446e c73793fa11
commit 599cbc49f7
108 changed files with 1988 additions and 587 deletions
@@ -1,13 +1,15 @@
 {
  "name": "xterm.js",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18-buster",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:18-bookworm",
  "features": {
-    "ghcr.io/devcontainers/features/node:1": {} // yarn
+    "ghcr.io/devcontainers/features/node:1": {
+      "version": 18
+    } // yarn
  },
  "forwardPorts": [
    3000
  ],
-  "postCreateCommand": "yarn install",
+  "postCreateCommand": "yarn install && yarn setup",
  "customizations": {
    "vscode": {
      "extensions": [
@@ -18,6 +18,8 @@
      "addons/addon-attach/test/tsconfig.json",
      "addons/addon-canvas/src/tsconfig.json",
      "addons/addon-canvas/test/tsconfig.json",
+      "addons/addon-clipboard/src/tsconfig.json",
+      "addons/addon-clipboard/test/tsconfig.json",
      "addons/addon-fit/src/tsconfig.json",
      "addons/addon-fit/test/tsconfig.json",
      "addons/addon-image/src/tsconfig.json",
@@ -42,6 +44,8 @@
  },
  "ignorePatterns": [
    "addons/*/src/third-party/*.ts",
+    "out/*",
+    "out-test/*",
    "**/inwasm-sdks/*",
    "**/typings/*.d.ts",
    "**/node_modules",
@@ -30,6 +30,8 @@ jobs:
          ./addons/addon-attach/out-test/* \
          ./addons/addon-canvas/out/* \
          ./addons/addon-canvas/out-test/* \
+          ./addons/addon-clipboard/out/* \
+          ./addons/addon-clipboard/out-test/* \
          ./addons/addon-fit/out/* \
          ./addons/addon-fit/out-test/* \
          ./addons/addon-image/out/* \
@@ -148,40 +150,6 @@ jobs:
    - name: Unit tests
      run: yarn test-unit --forbid-only

-  test-unit:
-    needs: build
-    timeout-minutes: 20
-    strategy:
-      matrix:
-        node-version: [16]
-        runs-on: [ubuntu, macos, windows]
-    runs-on: ${{ matrix.runs-on }}-latest
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}.x
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}.x
-        cache: 'yarn'
-    - name: Install dependencies
-      run: |
-        yarn --frozen-lockfile
-        yarn install-addons
-    - uses: actions/download-artifact@v3
-      with:
-        name: build-artifacts
-    - name: Unzip artifacts
-      shell: bash
-      run: |
-        if [ "$RUNNER_OS" == "Windows" ]; then
-          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
-        else
-          unzip -o compressed-build.zip
-        fi
-        ls -R
-    - name: Unit tests
-      run: yarn test-unit --forbid-only
-
  test-api-parallel:
    timeout-minutes: 20
    strategy:
@@ -1 +1 @@
-16
+18
@@ -61,7 +61,7 @@
      "runtimeExecutable": "npm",
      "runtimeArgs": ["start"],
      "stopOnEntry": true,
-      "runtimeVersion": "16",
+      "runtimeVersion": "18",
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "App listening to (http://.*?:[0-9]+)"
@@ -21,7 +21,7 @@ Xterm.js is a front-end component written in TypeScript that lets applications b
 First, you need to install the module, we ship exclusively through [npm](https://www.npmjs.com/), so you need that installed and then add xterm.js as a dependency by running:

 ```bash
-npm install xterm
+npm install @xterm/xterm
 ```

 To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your HTML page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally, instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
@@ -30,8 +30,8 @@ To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to t
 <!doctype html>
  <html>
    <head>
-      <link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
-      <script src="node_modules/xterm/lib/xterm.js"></script>
+      <link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
+      <script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
    </head>
    <body>
      <div id="terminal"></div>
@@ -78,6 +78,7 @@ The xterm.js team maintains the following addons, but anyone can build them:

 - [`@xterm/addon-attach`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-attach): Attaches to a server running a process via a websocket
 - [`@xterm/addon-canvas`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-canvas): Renders xterm.js using a `canvas` element's 2d context
+- [`@xterm/addon-clipboard`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-clipboard): Access the browser's clipboard
 - [`@xterm/addon-fit`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-fit): Fits the terminal to the containing element
 - [`@xterm/addon-image`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-image): Adds image support
 - [`@xterm/addon-search`](https://github.com/xtermjs/xterm.js/tree/master/addons/addon-search): Adds search functionality
@@ -113,7 +114,7 @@ All current and past releases are available on this repo's [Releases page](https
 Our CI releases beta builds to npm for every change that goes into master. Install the latest beta build with:

 ```bash
-npm install -S xterm@beta
+npm install -S @xterm/xterm@beta
 ```

 These should generally be stable, but some bugs may slip in. We recommend using the beta build primarily to test out new features and to verify bug fixes.
@@ -222,6 +223,7 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**Cloudtutor.io**](https://cloudtutor.io): innovative online learning platform that offers users access to an interactive lab.
 - [**Helix Editor Playground**](https://github.com/tomgroenwoldt/helix-editor-playground): Online playground for the terminal based helix editor.
 - [**Coder**](https://github.com/coder/coder): Self-Hosted Remote Development Environments
+- [**Wave Terminal**](https://waveterm.dev): An open-source, ai-native, terminal built for seamless workflows.
 - [And much more...](https://github.com/xtermjs/xterm.js/network/dependents?package_id=UGFja2FnZS0xNjYzMjc4OQ%3D%3D)

 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 on our list. Note: Please add any new contributions to the end of the list only.
@@ -1,6 +1,6 @@
 {
  "name": "@xterm/addon-attach",
-  "version": "0.9.0",
+  "version": "0.11.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -25,7 +25,9 @@ module.exports = {
    filename: mainFile,
    path: path.resolve('./lib'),
    library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    // Force usage of globalThis instead of global / self. (This is cross-env compatible)
+    globalObject: 'globalThis',
  },
  mode: 'production'
 };
@@ -1,6 +1,6 @@
 {
  "name": "@xterm/addon-canvas",
-  "version": "0.5.0",
+  "version": "0.7.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -8,7 +8,7 @@ import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
 import { acquireTextureAtlas } from 'browser/renderer/shared/CharAtlasCache';
 import { TEXT_BASELINE } from 'browser/renderer/shared/Constants';
 import { tryDrawCustomChar } from 'browser/renderer/shared/CustomGlyphs';
-import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
+import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { createSelectionRenderModel } from 'browser/renderer/shared/SelectionRenderModel';
 import { IRasterizedGlyph, IRenderDimensions, ISelectionRenderModel, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
@@ -365,6 +365,8 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
   */
  protected _drawChars(cell: ICellData, x: number, y: number): void {
    const chars = cell.getChars();
+    const code = cell.getCode();
+    const width = cell.getWidth();
    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y, this._deviceCellWidth);

    if (!this._charAtlas) {
@@ -400,6 +402,16 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
      this._bitmapGenerator[glyph.texturePage]!.refresh();
      this._bitmapGenerator[glyph.texturePage]!.version = this._charAtlas.pages[glyph.texturePage].version;
    }
+
+    // Reduce scale horizontally for wide glyphs printed in cells that would overlap with the
+    // following cell (ie. the width is not 2).
+    let renderWidth = glyph.size.x;
+    if (this._optionsService.rawOptions.rescaleOverlappingGlyphs) {
+      if (allowRescaling(code, width, glyph.size.x, this._deviceCellWidth)) {
+        renderWidth = this._deviceCellWidth - 1; // - 1 to improve readability
+      }
+    }
+
    this._ctx.drawImage(
      this._bitmapGenerator[glyph.texturePage]?.bitmap || this._charAtlas!.pages[glyph.texturePage].canvas,
      glyph.texturePosition.x,
@@ -408,7 +420,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
      glyph.size.y,
      x * this._deviceCellWidth + this._deviceCharLeft - glyph.offset.x,
      y * this._deviceCellHeight + this._deviceCharTop - glyph.offset.y,
-      glyph.size.x,
+      renderWidth,
      glyph.size.y
    );
    this._ctx.restore();
@@ -37,7 +37,7 @@ export class CanvasAddon extends Disposable implements ITerminalAddon , ICanvasA
    const coreService = core.coreService;
    const optionsService = core.optionsService;
    const screenElement = core.screenElement!;
-    const linkifier = core.linkifier2;
+    const linkifier = core.linkifier!;

    const unsafeCore = core as any;
    const bufferService: IBufferService = unsafeCore._bufferService;
@@ -10,7 +10,7 @@ import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/shared/Types';
 import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, MutableDisposable, toDisposable } from 'common/Lifecycle';
 import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { Terminal } from '@xterm/xterm';
 import { CursorRenderLayer } from './CursorRenderLayer';
@@ -22,6 +22,7 @@ import { IRenderLayer } from './Types';
 export class CanvasRenderer extends Disposable implements IRenderer {
  private _renderLayers: IRenderLayer[];
  private _devicePixelRatio: number;
+  private _observerDisposable = this.register(new MutableDisposable());

  public dimensions: IRenderDimensions;

@@ -60,7 +61,11 @@ export class CanvasRenderer extends Disposable implements IRenderer {
    this._devicePixelRatio = this._coreBrowserService.dpr;
    this._updateDimensions();

-    this.register(observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
+    this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
+    this.register(this._coreBrowserService.onWindowChange(w => {
+      this._observerDisposable.value = observeDevicePixelDimensions(this._renderLayers[0].canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
+    }));
+
    this.register(toDisposable(() => {
      for (const l of this._renderLayers) {
        l.dispose();
@@ -28,5 +28,10 @@ test.describe('Canvas Renderer Integration Tests', () => {
  test.skip(({ browserName }) => browserName === 'webkit');

  injectSharedRendererTests(ctxWrapper);
-  injectSharedRendererTestsStandalone(ctxWrapper);
+  injectSharedRendererTestsStandalone(ctxWrapper, async () => {
+    await ctx.page.evaluate(`
+      window.addon = new window.CanvasAddon(true);
+      window.term.loadAddon(window.addon);
+    `);
+  });
 });
@@ -33,7 +33,9 @@ module.exports = {
    filename: mainFile,
    path: path.resolve('./lib'),
    library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    // Force usage of globalThis instead of global / self. (This is cross-env compatible)
+    globalObject: 'globalThis',
  },
  mode: 'production'
 };
@@ -0,0 +1,2 @@
+lib
+node_modules
@@ -0,0 +1,29 @@
+# Blacklist - exclude everything except npm defaults such as LICENSE, etc
+*
+!*/
+
+# Whitelist - lib/
+!lib/**/*.d.ts
+
+!lib/**/*.js
+!lib/**/*.js.map
+
+!lib/**/*.css
+
+# Whitelist - src/
+!src/**/*.ts
+!src/**/*.d.ts
+
+!src/**/*.js
+!src/**/*.js.map
+
+!src/**/*.css
+
+# Blacklist - src/ test files
+src/**/*.test.ts
+src/**/*.test.d.ts
+src/**/*.test.js
+src/**/*.test.js.map
+
+# Whitelist - typings/
+!typings/*.d.ts
@@ -0,0 +1,19 @@
+Copyright (c) 2023, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
@@ -0,0 +1,53 @@
+## @xterm/addon-clipboard
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables
+accessing the system clipboard. This addon requires xterm.js v4+.
+
+### Install
+
+```bash
+npm install --save @xterm/addon-clipboard
+```
+
+### Usage
+
+```ts
+import { Terminal } from 'xterm';
+import { ClipboardAddon } from '@xterm/addon-clipboard';
+
+const terminal = new Terminal();
+const clipboardAddon = new ClipboardAddon();
+terminal.loadAddon(clipboardAddon);
+```
+
+To use a custom clipboard provider
+
+```ts
+import { Terminal } from '@xterm/xterm';
+import { ClipboardAddon, IClipboardProvider, ClipboardSelectionType } from '@xterm/addon-clipboard';
+
+function b64Encode(data: string): string {
+  // Base64 encode impl
+}
+
+function b64Decode(data: string): string {
+  // Base64 decode impl
+}
+
+class MyCustomClipboardProvider implements IClipboardProvider {
+  private _data: string
+  public readText(selection: ClipboardSelectionType): Promise<string> {
+    return Promise.resolve(b64Encode(this._data));
+  }
+  public writeText(selection: ClipboardSelectionType, data: string): Promise<void> {
+    this._data = b64Decode(data);
+    return Promise.resolve();
+  }
+}
+
+const terminal = new Terminal();
+const clipboardAddon = new ClipboardAddon(new MyCustomClipboardProvider());
+terminal.loadAddon(clipboardAddon);
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/addon-clipboard/typings/addon-clipboard.d.ts) for more advanced usage.
@@ -0,0 +1,29 @@
+{
+  "name": "@xterm/addon-clipboard",
+  "version": "0.1.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/addon-clipboard.js",
+  "types": "typings/addon-clipboard.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-clipboard",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p .",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package"
+  },
+  "peerDependencies": {
+    "@xterm/xterm": "^5.4.0"
+  },
+  "dependencies": {
+    "js-base64": "^3.7.5"
+  }
+}
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import type { IDisposable, ITerminalAddon, Terminal } from '@xterm/xterm';
+import { type IClipboardProvider, ClipboardSelectionType, type IBase64 } from '@xterm/addon-clipboard';
+import { Base64 as JSBase64 } from 'js-base64';
+
+export class ClipboardAddon implements ITerminalAddon {
+  private _terminal?: Terminal;
+  private _disposable?: IDisposable;
+
+  constructor(
+    private _base64: IBase64 = new Base64(),
+    private _provider: IClipboardProvider = new BrowserClipboardProvider()
+  ) {}
+
+  public activate(terminal: Terminal): void {
+    this._terminal = terminal;
+    this._disposable = terminal.parser.registerOscHandler(52, data => this._setOrReportClipboard(data));
+  }
+
+  public dispose(): void {
+    return this._disposable?.dispose();
+  }
+
+  private _readText(sel: ClipboardSelectionType, data: string): void {
+    const b64 = this._base64.encodeText(data);
+    this._terminal?.input(`\x1b]52;${sel};${b64}\x07`, false);
+  }
+
+  private _setOrReportClipboard(data: string): boolean | Promise<boolean> {
+    const args = data.split(';');
+    if (args.length < 2) {
+      return true;
+    }
+
+    const pc = args[0] as ClipboardSelectionType;
+    const pd = args[1];
+    if (pd === '?') {
+      const text = this._provider.readText(pc);
+
+      // Report clipboard
+      if (text instanceof Promise) {
+        return text.then((data) => {
+          this._readText(pc, data);
+          return true;
+        });
+      }
+
+      this._readText(pc, text);
+      return true;
+    }
+
+    // Clear clipboard if text is not a base64 encoded string.
+    let text = '';
+    try {
+      text = this._base64.decodeText(pd);
+    } catch {}
+
+
+    const result = this._provider.writeText(pc, text);
+    if (result instanceof Promise) {
+      return result.then(() => true);
+    }
+
+    return true;
+  }
+}
+
+export class BrowserClipboardProvider implements IClipboardProvider {
+  public async readText(selection: ClipboardSelectionType): Promise<string> {
+    if (selection !== 'c') {
+      return Promise.resolve('');
+    }
+    return navigator.clipboard.readText();
+  }
+
+  public async writeText(selection: ClipboardSelectionType, text: string): Promise<void> {
+    if (selection !== 'c') {
+      return Promise.resolve();
+    }
+    return navigator.clipboard.writeText(text);
+  }
+}
+
+export class Base64 implements IBase64 {
+  public encodeText(data: string): string {
+    return JSBase64.encode(data);
+  }
+  public decodeText(data: string): string {
+    const text = JSBase64.decode(data);
+    if (!JSBase64.isValid(data) || JSBase64.encode(text) !== data) {
+      return '';
+    }
+    return text;
+  }
+}
--- a/Show More
+++ b/Show More