Add xterm/image-addon to web terminal (#48780)

This allows the terminal in the web UI to "pretty print" images based on
the supported protocols (SIXEL and IIP)

web/packages/teleport/package.json

@@ -32,11 +32,12 @@
     "@opentelemetry/sdk-trace-base": "1.26.0",
     "@opentelemetry/sdk-trace-web": "1.26.0",
     "@opentelemetry/semantic-conventions": "1.27.0",
-    "@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"
   },

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;