From d93a7ae944d003982d1fca16208e1c8d2ea0c187 Mon Sep 17 00:00:00 2001 From: Michael Date: Tue, 12 Nov 2024 12:29:29 -0600 Subject: [PATCH] [v16] Add xterm/image-addon to web terminal Backport https://github.com/gravitational/teleport/pull/48780 --- pnpm-lock.yaml | 12 ++++++++++++ web/packages/teleport/package.json | 3 ++- web/packages/teleport/src/lib/term/terminal.ts | 4 ++++ 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0527d31bcdcec..4d553ba21ac2e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -363,6 +363,9 @@ importers: '@xterm/addon-fit': specifier: ^0.10.0 version: 0.10.0(@xterm/xterm@5.5.0) + '@xterm/addon-image': + specifier: ^0.8.0 + version: 0.8.0(@xterm/xterm@5.5.0) '@xterm/addon-web-links': specifier: ^0.11.0 version: 0.11.0(@xterm/xterm@5.5.0) @@ -2931,6 +2934,11 @@ packages: peerDependencies: '@xterm/xterm': ^5.0.0 + '@xterm/addon-image@0.8.0': + resolution: {integrity: sha512-b/dqpFn3jUad2pUP5UpF4scPIh0WdxRQL/1qyiahGfUI85XZTCXo0py9G6AcOR2QYUw8eJ8EowGspT7BQcgw6A==} + peerDependencies: + '@xterm/xterm': ^5.2.0 + '@xterm/addon-web-links@0.11.0': resolution: {integrity: sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==} peerDependencies: @@ -11898,6 +11906,10 @@ snapshots: dependencies: '@xterm/xterm': 5.5.0 + '@xterm/addon-image@0.8.0(@xterm/xterm@5.5.0)': + dependencies: + '@xterm/xterm': 5.5.0 + '@xterm/addon-web-links@0.11.0(@xterm/xterm@5.5.0)': dependencies: '@xterm/xterm': 5.5.0 diff --git a/web/packages/teleport/package.json b/web/packages/teleport/package.json index cf7bbcafc55d9..ea079f2d399ba 100644 --- a/web/packages/teleport/package.json +++ b/web/packages/teleport/package.json @@ -32,11 +32,12 @@ "@opentelemetry/sdk-trace-base": "1.25.1", "@opentelemetry/sdk-trace-web": "1.25.1", "@opentelemetry/semantic-conventions": "1.25.1", - "@xterm/xterm": "^5.5.0", "@xterm/addon-canvas": "^0.7.0", "@xterm/addon-fit": "^0.10.0", + "@xterm/addon-image": "^0.8.0", "@xterm/addon-web-links": "^0.11.0", "@xterm/addon-webgl": "^0.18.0", + "@xterm/xterm": "^5.5.0", "create-react-class": "^15.6.3", "events": "3.3.0" }, diff --git a/web/packages/teleport/src/lib/term/terminal.ts b/web/packages/teleport/src/lib/term/terminal.ts index cc8f68a2ff12b..d4b4e40dfda57 100644 --- a/web/packages/teleport/src/lib/term/terminal.ts +++ b/web/packages/teleport/src/lib/term/terminal.ts @@ -19,6 +19,7 @@ import '@xterm/xterm/css/xterm.css'; import { ITheme, Terminal } from '@xterm/xterm'; import { FitAddon } from '@xterm/addon-fit'; +import { ImageAddon } from '@xterm/addon-image'; import { WebglAddon } from '@xterm/addon-webgl'; import { WebLinksAddon } from '@xterm/addon-web-links'; import { CanvasAddon } from '@xterm/addon-canvas'; @@ -50,6 +51,7 @@ export default class TtyTerminal { _convertEol: boolean; _debouncedResize: DebouncedFunc<() => void>; _fitAddon = new FitAddon(); + _imageAddon = new ImageAddon(); _webLinksAddon = new WebLinksAddon(); _webglAddon: WebglAddon; _canvasAddon = new CanvasAddon(); @@ -88,6 +90,7 @@ export default class TtyTerminal { this.term.loadAddon(this._fitAddon); this.term.loadAddon(this._webLinksAddon); + this.term.loadAddon(this._imageAddon); // handle context loss and load webgl addon try { // try to create a new WebglAddon. If webgl is not supported, this @@ -155,6 +158,7 @@ export default class TtyTerminal { this._disconnect(); this._debouncedResize.cancel(); this._fitAddon.dispose(); + this._imageAddon.dispose(); this._webglAddon?.dispose(); this._canvasAddon?.dispose(); this._el.innerHTML = null;