html: add sixel support (#970)

* sixel support

* make linter happy

* picky linters gonna be picky

* simplify worker inlining

* rebuild html

Co-authored-by: Shuanglei Tao <tsl0922@gmail.com>

html/gulpfile.js

@@ -59,4 +59,3 @@ task('default', series('inline', () => {
         .pipe(rename("html.h"))
         .pipe(dest('../src/'));
 }));
-

html/package.json

@@ -52,6 +52,7 @@
     "whatwg-fetch": "^3.6.2",
     "xterm": "^4.19.0",
     "xterm-addon-fit": "^0.5.0",
+    "xterm-addon-image": "^0.1.0",
     "xterm-addon-web-links": "^0.6.0",
     "xterm-addon-webgl": "^0.12.0",
     "zmodem.js": "^0.1.10"

html/src/components/terminal/index.tsx

@@ -4,11 +4,14 @@ import { ITerminalOptions, RendererType, Terminal } from 'xterm';
 import { FitAddon } from 'xterm-addon-fit';
 import { WebglAddon } from 'xterm-addon-webgl';
 import { WebLinksAddon } from 'xterm-addon-web-links';
-
+import { ImageAddon } from 'xterm-addon-image';
 import { OverlayAddon } from './overlay';
 import { ZmodemAddon, FlowControl } from '../zmodem';
 
 import 'xterm/css/xterm.css';
+import worker from 'xterm-addon-image/lib/xterm-addon-image-worker';
+
+const imageWorkerUrl = window.URL.createObjectURL(new Blob([worker], { type: 'text/javascript' }));
 
 interface TtydTerminal extends Terminal {
     fit(): void;
@@ -176,6 +179,7 @@ export class Xterm extends Component<Props> {
         terminal.loadAddon(overlayAddon);
         terminal.loadAddon(new WebLinksAddon());
         terminal.loadAddon(this.zmodemAddon);
+        terminal.loadAddon(new ImageAddon(imageWorkerUrl));
 
         terminal.onTitleChange(data => {
             if (data && data !== '' && !this.titleFixed) {

html/webpack.config.js

@@ -37,6 +37,15 @@ const baseConfig = {
                     'sass-loader',
                 ],
             },
+            {
+                test: /xterm-addon-image-worker/,
+                type: 'asset/inline',
+                generator: {
+                    dataUrl: content => {
+                        return content.toString();
+                    }
+                }
+            },
         ]
     },
     resolve: {

html/yarn.lock

@@ -7171,6 +7171,11 @@ xterm-addon-fit@^0.5.0:
   resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
   integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
 
+xterm-addon-image@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-image/-/xterm-addon-image-0.1.0.tgz#ead96aa224f5fcbfb45da2907f02368fe92985e6"
+  integrity sha512-xMvcEQ2rVUIXbbj5BRhznrZU24CRaMiSo8l2HH/E1FeE+G+KKduoF6mwja856/n4ekZ7K0ALZmmyDsbZODhDqQ==
+
 xterm-addon-web-links@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.6.0.tgz#0296cb6c99588847894670d998c9ea6a6aeb26ee"