fix(site): render variable width unicode characters in terminal

ammario · ammario · commit 8121e4f79916 · 2023-08-23T00:54:48.000Z
Previously, characters such as 🟢 were given insufficient space, leading
to mangled output.
diff --git a/site/package.json b/site/package.json
@@ -103,6 +103,7 @@
     "xterm": "5.2.1",
     "xterm-addon-canvas": "0.4.0",
     "xterm-addon-fit": "0.7.0",
+    "xterm-addon-unicode11": "0.5.0",
     "xterm-addon-web-links": "0.8.0",
     "yup": "1.2.0"
   },
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -10,6 +10,7 @@ import * as XTerm from "xterm"
 import { CanvasAddon } from "xterm-addon-canvas"
 import { FitAddon } from "xterm-addon-fit"
 import { WebLinksAddon } from "xterm-addon-web-links"
+import { Unicode11Addon } from "xterm-addon-unicode11"
 import "xterm/css/xterm.css"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
 import { pageTitle } from "../../utils/page"
@@ -176,6 +177,7 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
       return
     }
     const terminal = new XTerm.Terminal({
+      allowProposedApi: true,
       allowTransparency: true,
       disableStdin: false,
       fontFamily: MONOSPACE_FONT_FAMILY,
@@ -191,6 +193,8 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
     const fitAddon = new FitAddon()
     setFitAddon(fitAddon)
     terminal.loadAddon(fitAddon)
+    terminal.loadAddon(new Unicode11Addon())
+    terminal.unicode.activeVersion = "11"
     terminal.loadAddon(
       new WebLinksAddon((_, uri) => {
         handleWebLink(uri)
