From e2e07b01e90bd798db541b44b0f791b25821fbca Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Tue, 27 Jun 2023 09:57:16 -0800
Subject: [PATCH] fix: revert to canvas renderer for xterm (#8138)

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.

In the new version the canvas is enabled via an addon.
---
 site/package.json                                 |  1 +
 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, 19 insertions(+), 4 deletions(-)

diff --git a/site/package.json b/site/package.json
index f1d56ebc68..6b0cee76f7 100644
--- a/site/package.json
+++ b/site/package.json
@@ -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 1a8fa700ae..fd69971f09 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 45675ae547..6412efaaa5 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 cec2209363..09fc1a0633 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 62dfcf073e..c6852e3e0b 100644
--- a/site/yarn.lock
+++ b/site/yarn.lock
@@ -12173,6 +12173,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"