html: Add Unicode 11 xterm.js addon (#1310)

* html: Add Unicode 11 xterm.js addon

Add Unicode 11 addon to xterm.js to enable support for newer Unicode
standards. This addon significantly improves rendering of emojis.

Signed-off-by: Michael Lorant <michael.lorant@nine.com.au>

* html: rebuild header file

---------

Signed-off-by: Michael Lorant <michael.lorant@nine.com.au>
Co-authored-by: Shuanglei Tao <tsl0922@gmail.com>

html/package.json

@@ -55,6 +55,7 @@
     "@xterm/addon-canvas": "^0.6.0",
     "@xterm/addon-fit": "^0.9.0",
     "@xterm/addon-image": "^0.7.0",
+    "@xterm/addon-unicode11": "^0.7.0",
     "@xterm/addon-web-links": "^0.10.0",
     "@xterm/addon-webgl": "^0.17.0",
     "@xterm/xterm": "^5.4.0",

html/src/components/app.tsx

@@ -16,6 +16,7 @@ const clientOptions = {
     enableTrzsz: false,
     enableSixel: false,
     isWindows: false,
+    unicodeVersion: '11',
 } as ClientOptions;
 const termOptions = {
     fontSize: 13,

html/src/components/terminal/xterm/index.ts

@@ -5,6 +5,7 @@ import { WebglAddon } from '@xterm/addon-webgl';
 import { FitAddon } from '@xterm/addon-fit';
 import { WebLinksAddon } from '@xterm/addon-web-links';
 import { ImageAddon } from '@xterm/addon-image';
+import { Unicode11Addon } from '@xterm/addon-unicode11';
 import { OverlayAddon } from './addons/overlay';
 import { ZmodemAddon } from './addons/zmodem';
 
@@ -46,6 +47,7 @@ export interface ClientOptions {
     titleFixed?: string;
     isWindows: boolean;
     trzszDragInitTimeout: number;
+    unicodeVersion: string;
 }
 
 export interface FlowControl {
@@ -386,6 +388,21 @@ export class Xterm {
                 case 'isWindows':
                     if (value) console.log('[ttyd] is windows');
                     break;
+                case 'unicodeVersion':
+                    switch (value) {
+                        case 6:
+                        case '6':
+                            console.log('[ttyd] setting Unicode version: 6');
+                            break;
+                        case 11:
+                        case '11':
+                        default:
+                            console.log('[ttyd] setting Unicode version: 11');
+                            terminal.loadAddon(new Unicode11Addon());
+                            terminal.unicode.activeVersion = '11';
+                            break;
+                    }
+                    break;
                 default:
                     console.log(`[ttyd] option: ${key}=${JSON.stringify(value)}`);
                     if (terminal.options[key] instanceof Object) {

html/yarn.lock

@@ -1120,6 +1120,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@xterm/addon-unicode11@npm:^0.7.0":
+  version: 0.7.0
+  resolution: "@xterm/addon-unicode11@npm:0.7.0"
+  peerDependencies:
+    "@xterm/xterm": ^5.0.0
+  checksum: b8776b6646591ce5c8fa1d413bbd0f0b5c98928877259af97b38ba6d998c2f676d99aaf6dbc173b8d17b9b063bf597be82c5e66d5810a63583b3f0ce262b5a4e
+  languageName: node
+  linkType: hard
+
 "@xterm/addon-web-links@npm:^0.10.0":
   version: 0.10.0
   resolution: "@xterm/addon-web-links@npm:0.10.0"
@@ -10052,6 +10061,7 @@ __metadata:
     "@xterm/addon-canvas": ^0.6.0
     "@xterm/addon-fit": ^0.9.0
     "@xterm/addon-image": ^0.7.0
+    "@xterm/addon-unicode11": ^0.7.0
     "@xterm/addon-web-links": ^0.10.0
     "@xterm/addon-webgl": ^0.17.0
     "@xterm/xterm": ^5.4.0