From 029c6d3d79b0f4fb0b2d23cc6264f27df024ef69 Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Wed, 21 Jun 2023 12:31:40 -0800
Subject: [PATCH] Go back to canvas renderer for xterm

The default changed from canvas to DOM in the last update.  The canvas
renderer resolves line spacing issues and has better performance, as
well as bringing us back to the previous status quo.
---
 site/package.json                                 |  3 ++-
 site/src/AppRouter.tsx                            |  2 +-
 site/src/pages/TerminalPage/TerminalPage.test.tsx |  2 +-
 site/src/pages/TerminalPage/TerminalPage.tsx      | 13 +++++++++++--
 site/yarn.lock                                    |  5 +++++
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/site/package.json b/site/package.json
index 8f7f8f4f7c44a..c7a26c7af378c 100644
--- a/site/package.json
+++ b/site/package.json
@@ -32,9 +32,9 @@
   "dependencies": {
     "@emoji-mart/data": "1.0.5",
     "@emoji-mart/react": "1.0.1",
-    "@fastly/performance-observer-polyfill": "2.0.0",
     "@emotion/react": "11.10.8",
     "@emotion/styled": "11.11.0",
+    "@fastly/performance-observer-polyfill": "2.0.0",
     "@fontsource/ibm-plex-mono": "4.5.10",
     "@fontsource/inter": "5.0.2",
     "@monaco-editor/react": "4.5.0",
@@ -94,6 +94,7 @@
     "vite": "4.3.9",
     "xstate": "4.37.2",
     "xterm": "5.1.0",
+    "xterm-addon-canvas": "0.4.0",
     "xterm-addon-fit": "0.7.0",
     "xterm-addon-web-links": "0.8.0",
     "yup": "0.32.11"
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index 1a8fa700ae77c..fd69971f09b36 100644
--- a/site/src/AppRouter.tsx
+++ b/site/src/AppRouter.tsx
@@ -317,7 +317,7 @@ export const AppRouter: FC = () => {
             {/* Terminal and CLI auth pages don't have the dashboard layout */}
             <Route
               path="/:username/:workspace/terminal"
-              element={<TerminalPage />}
+              element={<TerminalPage renderer="canvas" />}
             />
             <Route path="cli-auth" element={<CliAuthenticationPage />} />
           </Route>
diff --git a/site/src/pages/TerminalPage/TerminalPage.test.tsx b/site/src/pages/TerminalPage/TerminalPage.test.tsx
index 45675ae547db5..6412efaaa519a 100644
--- a/site/src/pages/TerminalPage/TerminalPage.test.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.test.tsx
@@ -38,7 +38,7 @@ Object.defineProperty(window, "TextEncoder", {
 const renderTerminal = async (
   route = `/${MockUser.username}/${MockWorkspace.name}/terminal`,
 ) => {
-  const utils = renderWithAuth(<TerminalPage />, {
+  const utils = renderWithAuth(<TerminalPage renderer="dom" />, {
     route,
     path: "/:username/:workspace/terminal",
   })
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index cec22093632d7..09fc1a0633511 100644
--- a/site/src/pages/TerminalPage/TerminalPage.tsx
+++ b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -8,6 +8,7 @@ import { useNavigate, useParams, useSearchParams } from "react-router-dom"
 import { colors } from "theme/colors"
 import { v4 as uuidv4 } from "uuid"
 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 "xterm/css/xterm.css"
@@ -69,7 +70,11 @@ const useTerminalWarning = ({
   }
 }
 
-const TerminalPage: FC = () => {
+type TerminalPageProps = React.PropsWithChildren<{
+  renderer: "canvas" | "dom"
+}>
+
+const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
   const navigate = useNavigate()
   const styles = useStyles()
   const { proxy } = useProxy()
@@ -194,6 +199,10 @@ const TerminalPage: FC = () => {
         background: colors.gray[16],
       },
     })
+    // DOM is the default renderer.
+    if (renderer === "canvas") {
+      terminal.loadAddon(new CanvasAddon())
+    }
     const fitAddon = new FitAddon()
     setFitAddon(fitAddon)
     terminal.loadAddon(fitAddon)
@@ -230,7 +239,7 @@ const TerminalPage: FC = () => {
       window.removeEventListener("resize", listener)
       terminal.dispose()
     }
-  }, [sendEvent, xtermRef, handleWebLink])
+  }, [renderer, sendEvent, xtermRef, handleWebLink])
 
   // Triggers the initial terminal connection using
   // the reconnection token and workspace name found
diff --git a/site/yarn.lock b/site/yarn.lock
index 740ebb2dd4cfb..7f3bde87749c5 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -12043,6 +12043,11 @@ xtend@^4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
+xterm-addon-canvas@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/xterm-addon-canvas/-/xterm-addon-canvas-0.4.0.tgz#a6ee6a56deb0c495fcef29afe6d94b7119a0f334"
+  integrity sha512-iTC8CdjX9+hGX7jiEuiDMXzHsY/FKJdVnbjep5xjRXNu7RKOk15xuecIkJ7HZORqMVPpr4DGS3jyd9XUoBuxqw==
+
 xterm-addon-fit@0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.7.0.tgz#b8ade6d96e63b47443862088f6670b49fb752c6a"