Merge pull request #3465 from xtermjs/release_4_14_0

v4.14.0

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10
+FROM node:14
 
 # Configure apt
 ENV DEBIAN_FRONTEND=noninteractive

.eslintrc.json

@@ -9,6 +9,7 @@
     "project": [
       "src/browser/tsconfig.json",
       "src/common/tsconfig.json",
+      "src/headless/tsconfig.json",
       "test/api/tsconfig.json",
       "test/benchmark/tsconfig.json",
       "addons/xterm-addon-attach/src/tsconfig.json",
@@ -43,10 +44,11 @@
     "@typescript-eslint/array-type": [
       "warn",
       {
-        "default": "array-simple",
+        "default": "array",
         "readonly": "generic"
       }
     ],
+    "@typescript-eslint/consistent-type-assertions": "warn",
     "@typescript-eslint/consistent-type-definitions": "warn",
     "@typescript-eslint/explicit-function-return-type": [
       "warn",
@@ -151,6 +153,10 @@
       "warn",
       "never"
     ],
+    "object-curly-spacing": [
+      "warn",
+      "always"
+    ],
     "prefer-const": "warn",
     "spaced-comment": [
       "warn",
@@ -160,5 +166,13 @@
         "exceptions": ["-"]
       }
     ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.ts"],
+      "rules": {
+        "object-curly-spacing": "off"
+      }
+    }
+  ]
 }

.mocha.env

@@ -0,0 +1 @@
+NODE_PATH=./out

.mocharc.yml

@@ -0,0 +1,11 @@
+require:
+  - source-map-support/register
+spec:
+  - out/**/*.test.js
+  - addons/**/out/*.test.js
+watch-files:
+  - out/**/*.js
+  - addons/**/out/*.js
+reporter: spec
+color: true
+check-leaks: true

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
     "typescript.preferences.importModuleSpecifier": "non-relative",
-    "typescript.preferences.quoteStyle": "single"
+    "typescript.preferences.quoteStyle": "single",
+    "mochaExplorer.envPath": ".mocha.env"
 }

.vscode/tasks.json

@@ -1,51 +1,70 @@
 {
-	"version": "2.0.0",
-	"presentation": {
-		"echo": false,
-		"reveal": "always",
-		"focus": false,
-		"panel": "dedicated",
-		"showReuseMessage": true
-	},
-	"tasks": [
-		{
-			"type": "npm",
-			"script": "test",
-			"group": "test",
-			"problemMatcher": []
-		},
-		{
-			"type": "npm",
-			"script": "watch",
-			"group": "build",
-			"isBackground": true,
-			"problemMatcher": [],
-			"presentation": {
-				"group": "vscode"
-			}
-		},
-		{
-			"type": "npm",
-			"script": "start",
-			"group": "build",
-			"isBackground": true,
-			"problemMatcher": [],
-			"presentation": {
-				"group": "vscode"
-			}
-		},
-		{
-			"label": "Start demo",
-			"dependsOn": ["npm: watch", "npm: start"],
-			"group": {
-				"kind": "build",
-				"isDefault": true
-			},
-			"isBackground": true,
-			"problemMatcher": [],
-			"presentation": {
-				"group": "vscode"
-			}
-		}
-	]
+  "version": "2.0.0",
+  "presentation": {
+    "echo": false,
+    "reveal": "always",
+    "focus": false,
+    "panel": "dedicated",
+    "showReuseMessage": true
+  },
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "test",
+      "group": "test",
+      "problemMatcher": []
+    },
+    {
+      "type": "npm",
+      "script": "watch",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": "$tsc-watch",
+      "presentation": {
+        "group": "vscode"
+      }
+    },
+    {
+      "type": "npm",
+      "script": "start",
+      "dependsOn": "npm: watch",
+      "group": "build",
+      "isBackground": true,
+      "problemMatcher": [],
+      "presentation": {
+        "group": "vscode"
+      }
+    },
+    {
+      "label": "Start demo",
+      "dependsOn": "npm: start",
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": [
+          "relative",
+          "${workspaceFolder}"
+        ],
+        "pattern": [
+          {
+            "regexp": "^([^\\\\s].*)\\\\((\\\\d+,\\\\d+)\\\\):\\\\s*(.*)$",
+            "file": 1,
+            "location": 2,
+            "message": 3
+          }
+        ],
+        "background": {
+          "beginsPattern": "assets by",
+          "endsPattern": "webpack \\d+\\.\\d+\\.\\d+ compiled successfully"
+        }
+      },
+      "presentation": {
+        "group": "vscode"
+      }
+    }
+  ]
 }

README.md

@@ -6,11 +6,11 @@ Xterm.js is a front-end component written in TypeScript that lets applications b
 
 ## Features
 
-- **Terminal apps just work**: Xterm.js works with most terminal apps such as `bash`, `vim` and `tmux`, this includes support for curses-based apps and mouse event support.
+- **Terminal apps just work**: Xterm.js works with most terminal apps such as `bash`, `vim`, and `tmux`, including support for curses-based apps and mouse events.
 - **Performant**: Xterm.js is *really* fast, it even includes a GPU-accelerated renderer.
-- **Rich unicode support**: Supports CJK, emojis and IMEs.
+- **Rich Unicode support**: Supports CJK, emojis, and IMEs.
 - **Self-contained**: Requires zero dependencies to work.
-- **Accessible**: Screen reader and minimum contrast ratio support can be turned on
+- **Accessible**: Screen reader and minimum contrast ratio support can be turned on.
 - **And much more**: Links, theming, addons, well documented API, etc.
 
 ## What xterm.js is not
@@ -20,13 +20,13 @@ Xterm.js is a front-end component written in TypeScript that lets applications b
 
 ## Getting Started
 
-First you need to install the module, we ship exclusively through [npm](https://www.npmjs.com/) so you need that installed and then add xterm.js as a dependency by running:
+First, you need to install the module, we ship exclusively through [npm](https://www.npmjs.com/), so you need that installed and then add xterm.js as a dependency by running:
 
-```
+```bash
 npm install xterm
 ```
 
-To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your html page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
+To start using xterm.js on your browser, add the `xterm.js` and `xterm.css` to the head of your HTML page. Then create a `<div id="terminal"></div>` onto which xterm can attach itself. Finally, instantiate the `Terminal` object and then call the `open` function with the DOM object of the `div`.
 
 ```html
 <!doctype html>
@@ -58,7 +58,7 @@ import { Terminal } from 'xterm';
 
 ⚠️ *This section describes the new addon format introduced in v3.14.0, see [here](https://github.com/xtermjs/xterm.js/blob/3.14.2/README.md#addons) for the instructions on the old format*
 
-Addons are separate modules that extend the `Terminal` by building on the [xterm.js API](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts). To use an addon you first need to install it in your project:
+Addons are separate modules that extend the `Terminal` by building on the [xterm.js API](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts). To use an addon, you first need to install it in your project:
 
 ```bash
 npm i -S xterm-addon-web-links
@@ -76,7 +76,7 @@ const terminal = new Terminal();
 terminal.loadAddon(new WebLinksAddon());
 ```
 
-The xterm.js team maintains the following addons but they can be built by anyone:
+The xterm.js team maintains the following addons, but anyone can build them:
 
 - [`xterm-addon-attach`](https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-attach): Attaches to a server running a process via a websocket
 - [`xterm-addon-fit`](https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-fit): Fits the terminal to the containing element
@@ -85,23 +85,27 @@ The xterm.js team maintains the following addons but they can be built by anyone
 
 ## Browser Support
 
-Since xterm.js is typically implemented as a developer tool, only modern browsers are supported officially. Specifically the latest versions of *Chrome*, *Edge*, *Firefox* and *Safari*.
+Since xterm.js is typically implemented as a developer tool, only modern browsers are supported officially. Specifically the latest versions of *Chrome*, *Edge*, *Firefox*, and *Safari*.
 
 We also partially support *Internet Explorer 11*, meaning xterm.js should work for the most part, but we reserve the right to not provide workarounds specifically for it unless it's absolutely necessary to get the basic input/output flow working.
 
-Xterm.js works seamlessly in [Electron](https://electronjs.org/) apps and may even work on earlier versions of the browsers, these are the versions we strive to keep working.
+Xterm.js works seamlessly in [Electron](https://electronjs.org/) apps and may even work on earlier versions of the browsers. These are the versions we strive to keep working.
+
+### Node.js Support
+
+We also publish [`xterm-headless`](https://www.npmjs.com/package/xterm-headless) which is a stripped down version of xterm.js that runs in Node.js. An example use case for this is to keep track of a terminal's state where the process is running and using the serialize addon so it can get all state restored upon reconnection.
 
 ## API
 
 The full API for xterm.js is contained within the [TypeScript declaration file](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts), use the branch/tag picker in GitHub (`w`) to navigate to the correct version of the API.
 
-Note that some APIs are marked *experimental*, these are added to enable experimentation with new ideas without committing to support it like a normal [semver](https://semver.org/) API. Note that these APIs can change radically between versions so be sure to read release notes if you plan on using experimental APIs.
+Note that some APIs are marked *experimental*, these are added to enable experimentation with new ideas without committing to support it like a normal [semver](https://semver.org/) API. Note that these APIs can change radically between versions, so be sure to read release notes if you plan on using experimental APIs.
 
 ## Real-world uses
 Xterm.js is used in several world-class applications to provide great terminal experiences.
 
 - [**SourceLair**](https://www.sourcelair.com/): In-browser IDE that provides its users with fully-featured Linux terminals based on xterm.js.
-- [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile and powerful open source code editor that provides an integrated terminal based on xterm.js.
+- [**Microsoft Visual Studio Code**](http://code.visualstudio.com/): Modern, versatile, and powerful open source code editor that provides an integrated terminal based on xterm.js.
 - [**ttyd**](https://github.com/tsl0922/ttyd): A command-line tool for sharing terminal over the web, with fully-featured terminal emulation based on xterm.js.
 - [**Katacoda**](https://www.katacoda.com/): Katacoda is an Interactive Learning Platform for software developers, covering the latest Cloud Native technologies.
 - [**Eclipse Che**](http://www.eclipse.org/che): Developer workspace server, cloud IDE, and Eclipse next-generation IDE.
@@ -113,10 +117,10 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**Next Tech**](https://next.tech "Next Tech"): Online platform for interactive coding and web development courses. Live container-backed terminal uses xterm.js.
 - [**RStudio**](https://www.rstudio.com/products/RStudio "RStudio"): RStudio is an integrated development environment (IDE) for R.
 - [**Terminal for Atom**](https://github.com/jsmecham/atom-terminal-tab): A simple terminal for the Atom text editor.
-- [**Eclipse Orion**](https://orionhub.org): A modern, open source software development environment that runs in the cloud. Code, deploy and run in the cloud.
+- [**Eclipse Orion**](https://orionhub.org): A modern, open source software development environment that runs in the cloud. Code, deploy, and run in the cloud.
 - [**Gravitational Teleport**](https://github.com/gravitational/teleport): Gravitational Teleport is a modern SSH server for remotely accessing clusters of Linux servers via SSH or HTTPS.
 - [**Hexlet**](https://en.hexlet.io): Practical programming courses (JavaScript, PHP, Unix, databases, functional programming). A steady path from the first line of code to the first job.
-- [**Selenoid UI**](https://github.com/aerokube/selenoid-ui): Simple UI for the scallable golang implementation of Selenium Hub named Selenoid. We use XTerm for streaming logs over websockets from docker containers.
+- [**Selenoid UI**](https://github.com/aerokube/selenoid-ui): Simple UI for the scalable golang implementation of Selenium Hub named Selenoid. We use XTerm for streaming logs over websockets from docker containers.
 - [**Portainer**](https://portainer.io): Simple management UI for Docker.
 - [**SSHy**](https://github.com/stuicey/SSHy): HTML5 Based SSHv2 Web Client with E2E encryption utilising xterm.js, SJCL & websockets.
 - [**JupyterLab**](https://github.com/jupyterlab/jupyterlab): An extensible computational environment for Jupyter, supporting interactive data science and scientific computing across all programming languages.
@@ -143,7 +147,6 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**cPanel & WHM**](https://cpanel.com): The hosting platform of choice.
 - [**Nutanix**](https://github.com/nutanix): Nutanix Enterprise Cloud uses xterm in the webssh functionality within Nutanix Calm, and is also looking to move our old noserial (termjs) functionality to xterm.js.
 - [**SSH Web Client**](https://github.com/roke22/PHP-SSH2-Web-Client): SSH Web Client with PHP.
-- [**Shellvault**](https://www.shellvault.io): The cloud-based SSH terminal you can access from anywhere.
 - [**Juno**](http://junolab.org/): A flexible Julia IDE, based on Atom.
 - [**webssh**](https://github.com/huashengdun/webssh): Web based ssh client.
 - [**info-beamer hosted**](https://info-beamer.com): Uses xterm.js to manage digital signage devices from the web dashboard.
@@ -163,18 +166,26 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**CoCalc**](https://cocalc.com/): Lots of free software pre-installed, to chat, collaborate, develop, program, publish, research, share, teach, in C++, HTML, Julia, Jupyter, LaTeX, Markdown, Python, R, SageMath, Scala, ...
 - [**Dank Domain**](https://www.DDgame.us/): Open source multiuser medieval game supporting old & new terminal emulation.
 - [**DockerStacks**](https://docker-stacks.com/): Local LAMP/LEMP development studio
-- [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash. 
+- [**Codecademy**](https://codecademy.com/): Uses xterm.js in its courses on Bash.
 - [**Laravel Ssh Web Client**](https://github.com/roke22/Laravel-ssh-client): Laravel server inventory with ssh web client to connect at server using xterm.js
 - [**Repl.it**](https://repl.it): Collaborative browser based IDE with support for 50+ different languages.
 - [**TeleType**](https://github.com/akshaykmr/TeleType): cli tool that allows you to share your terminal online conveniently. Show off mad cli-fu, help a colleague, teach, or troubleshoot.
-- [**Intervue**](https://www.intervue.io): Pair programming for interviews. Multiple programming languages supported, with results displayed by xterm.js.
-- [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP and Database services.  
+- [**Intervue**](https://www.intervue.io): Pair programming for interviews. Multiple programming languages are supported, with results displayed by xterm.js.
+- [**TRASA**](https://trasa.io): Zero trust access to Web, SSH, RDP, and Database services.
 - [**Commas**](https://github.com/CyanSalt/commas): Commas is a hackable terminal and command runner.
-- [**Devtron**](https://github.com/devtron-labs/devtron): Software Delivery Workflow For Kubernetes. 
+- [**Devtron**](https://github.com/devtron-labs/devtron): Software Delivery Workflow For Kubernetes.
 - [**NxShell**](https://github.com/nxshell/nxshell): An easy to use new terminal for SSH.
-[And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
+- [**gifcast**](https://dstein64.github.io/gifcast/): Converts an asciinema cast to an animated GIF.
+- [**WizardWebssh**](https://gitlab.com/mikeramsey/wizardwebssh): A terminal with Pyqt5 Widget for embedding, which can be used as an ssh client to connect to your ssh servers. It is written in Python, based on tornado, paramiko, and xterm.js.
+- [**Wizard Assistant**](https://wizardassistant.com/): Wizard Assistant comes with advanced automation tools, preloaded common and special time-saving commands, and a built-in SSH terminal. Now you can remotely administer, troubleshoot, and analyze any system with ease.
+- [**ucli**](https://github.com/tsadarsh/ucli): Command Line for everyone :family_man_woman_girl_boy: at [www.ucli.tech](https://www.ucli.tech).
+- [**Tess**](https://github.com/SquitchYT/Tess/): Simple Terminal Fully Customizable for Everyone.
+- [**HashiCorp Nomad**](https://www.nomadproject.io/): A container orchestrator with the ability to connect to remote tasks via a web interface using websockets and xterm.js.
+- [**TermPair**](https://github.com/cs01/termpair): View and control terminals from your browser with end-to-end encryption
+- [**gdbgui**](https://github.com/cs01/gdbgui): Browser-based frontend to gdb (gnu debugger)
+- [And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
 
-Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it in our list. Note: Please add any new contributions to the end of the list only.
+Do you use xterm.js in your application as well? Please [open a Pull Request](https://github.com/sourcelair/xterm.js/pulls) to include it here. We would love to have it on our list. Note: Please add any new contributions to the end of the list only.
 
 ## Releases
 
@@ -184,21 +195,21 @@ All current and past releases are available on this repo's [Releases page](https
 
 ### Beta builds
 
-Our CI releases beta builds to npm for every change that goes into master, install the latest beta build with:
+Our CI releases beta builds to npm for every change that goes into master. Install the latest beta build with:
 
-```
+```bash
 npm install -S xterm@beta
 ```
 
-These should generally be stable but some bugs may slip in, we recommend using the beta build primarily to test out new features and for verifying bug fixes.
+These should generally be stable, but some bugs may slip in. We recommend using the beta build primarily to test out new features and to verify bug fixes.
 
 ## Contributing
 
-You can read the [guide on the wiki](https://github.com/xtermjs/xterm.js/wiki/Contributing) to learn how to contribute and setup xterm.js for development.
+You can read the [guide on the wiki](https://github.com/xtermjs/xterm.js/wiki/Contributing) to learn how to contribute and set up xterm.js for development.
 
 ## License Agreement
 
-If you contribute code to this project, you are implicitly allowing your code to be distributed under the MIT license. You are also implicitly verifying that all code is your original work.
+If you contribute code to this project, you implicitly allow your code to be distributed under the MIT license. You are also implicitly verifying that all code is your original work.
 
 Copyright (c) 2017-2019, [The xterm.js authors](https://github.com/xtermjs/xterm.js/graphs/contributors) (MIT License)<br>
 Copyright (c) 2014-2017, SourceLair, Private Company ([www.sourcelair.com](https://www.sourcelair.com/home)) (MIT License)<br>

addons/xterm-addon-attach/src/AttachAddon.ts

@@ -20,7 +20,7 @@ export class AttachAddon implements ITerminalAddon {
     this._socket = socket;
     // always set binary type to arraybuffer, we do not handle blobs
     this._socket.binaryType = 'arraybuffer';
-    this._bidirectional = (options && options.bidirectional === false) ? false : true;
+    this._bidirectional = !(options && options.bidirectional === false);
   }
 
   public activate(terminal: Terminal): void {
@@ -41,7 +41,9 @@ export class AttachAddon implements ITerminalAddon {
   }
 
   public dispose(): void {
-    this._disposables.forEach(d => d.dispose());
+    for (const d of this._disposables) {
+      d.dispose();
+    }
   }
 
   private _sendData(data: string): void {

addons/xterm-addon-attach/test/AttachAddon.api.ts

@@ -4,10 +4,10 @@
  */
 
 import WebSocket = require('ws');
-import { openTerminal, pollFor, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, pollFor, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
 let browser: Browser;
 let page: Page;
@@ -16,10 +16,7 @@ const height = 600;
 
 describe('AttachAddon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.indexOf('--headless') !== -1
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
   });

addons/xterm-addon-fit/test/FitAddon.api.ts

@@ -4,10 +4,10 @@
  */
 
 import { assert } from 'chai';
-import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
 let browser: Browser;
 let page: Page;
@@ -16,10 +16,7 @@ const height = 768;
 
 describe('FitAddon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.indexOf('--headless') !== -1
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
     await page.goto(APP);
@@ -45,7 +42,7 @@ describe('FitAddon', () => {
 
   describe('proposeDimensions', () => {
     afterEach(async () => {
-      return unloadFit();
+      return await unloadFit();
     });
 
     it('default', async function(): Promise<any> {
@@ -84,7 +81,7 @@ describe('FitAddon', () => {
 
   describe('fit', () => {
     afterEach(async () => {
-      return unloadFit();
+      return await unloadFit();
     });
 
     it('default', async function(): Promise<any> {

addons/xterm-addon-ligatures/README.md

@@ -51,3 +51,4 @@ This package makes use of the following fonts for testing:
 [Fira Code License]: https://github.com/tonsky/FiraCode/blob/master/LICENSE
 [Iosevka]: https://github.com/be5invis/Iosevka
 [Iosevka License]: https://github.com/be5invis/Iosevka/blob/master/LICENSE.md
+

addons/xterm-addon-ligatures/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-ligatures",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Add support for programming ligatures to xterm.js",
   "author": {
     "name": "The xterm.js authors",
@@ -32,7 +32,7 @@
   "license": "MIT",
   "dependencies": {
     "font-finder": "^1.1.0",
-    "font-ligatures": "^1.3.3"
+    "font-ligatures": "^1.4.0"
   },
   "devDependencies": {
     "@types/sinon": "^5.0.1",

addons/xterm-addon-ligatures/src/font.ts

@@ -3,12 +3,28 @@
  * @license MIT
  */
 
-import * as fontFinder from 'font-finder';
-import * as fontLigatures from 'font-ligatures';
+import { FontList } from 'font-finder';
+import { Font, loadBuffer, loadFile } from 'font-ligatures';
 
 import parse from './parse';
 
-let fontsPromise: Promise<fontFinder.FontList> | undefined = undefined;
+interface IFontMetadata {
+  family: string;
+  fullName: string;
+  postscriptName: string;
+  blob: () => Promise<Blob>;
+}
+
+interface IFontAccessNavigator {
+  fonts: {
+    query: () => Promise<IFontMetadata[]>;
+  };
+  permissions: {
+    request?: (permission: { name: string }) => Promise<{state: string}>;
+  };
+}
+
+let fontsPromise: Promise<FontList | Record<string, IFontMetadata[]>> | undefined = undefined;
 
 /**
  * Loads the font ligature wrapper for the specified font family if it could be
@@ -16,9 +32,50 @@ let fontsPromise: Promise<fontFinder.FontList> | undefined = undefined;
  * @param fontFamily The CSS font family definition to resolve
  * @param cacheSize The size of the ligature cache to maintain if the font is resolved
  */
-export default async function load(fontFamily: string, cacheSize: number): Promise<fontLigatures.Font | undefined> {
+export default async function load(fontFamily: string, cacheSize: number): Promise<Font | undefined> {
   if (!fontsPromise) {
-    fontsPromise = fontFinder.list();
+    // Web environment that supports font access API
+    if (typeof navigator !== 'undefined' && 'fonts' in navigator) {
+      try {
+        const status = await (navigator as unknown as IFontAccessNavigator).permissions.request?.({
+          name: 'local-fonts'
+        });
+        if (status && status.state !== 'granted') {
+          throw new Error('Permission to access local fonts not granted.');
+        }
+      } catch (err) {
+        // A `TypeError` indicates the 'local-fonts'
+        // permission is not yet implemented, so
+        // only `throw` if this is _not_ the problem.
+        if (err.name !== 'TypeError') {
+          throw err;
+        }
+      }
+      const fonts: Record<string, IFontMetadata[]> = {};
+      try {
+        const fontsIterator = await (navigator as unknown as IFontAccessNavigator).fonts.query();
+        for (const metadata of fontsIterator) {
+          if (!fonts.hasOwnProperty(metadata.family)) {
+            fonts[metadata.family] = [];
+          }
+          fonts[metadata.family].push(metadata);
+        }
+        fontsPromise = Promise.resolve(fonts);
+      } catch (err) {
+        console.error(err.name, err.message);
+      }
+    }
+    // Node environment or no font access API
+    else {
+      try {
+        fontsPromise = (await import('font-finder')).list();
+      } catch (err) {
+        // No-op
+      }
+    }
+    if (!fontsPromise) {
+      fontsPromise = Promise.resolve({});
+    }
   }
 
   const fonts = await fontsPromise;
@@ -31,7 +88,11 @@ export default async function load(fontFamily: string, cacheSize: number): Promi
     }
 
     if (fonts.hasOwnProperty(family) && fonts[family].length > 0) {
-      return await fontLigatures.loadFile(fonts[family][0].path, { cacheSize });
+      const font = fonts[family][0];
+      if ('blob' in font) {
+        return loadBuffer(await (await font.blob()).arrayBuffer(), { cacheSize });
+      }
+      return await loadFile(font.path, { cacheSize });
     }
   }
 

addons/xterm-addon-ligatures/src/parse.ts

@@ -68,7 +68,7 @@ function parseString(context: IParseContext, quoteChar: '\'' | '"'): string {
   while (context.offset < context.input.length) {
     const char = context.input[context.offset++];
     if (escaped) {
-      if (/[0-9a-fA-F]/.test(char)) {
+      if (/[\dA-Fa-f]/.test(char)) {
         // Unicode escape
         context.offset--;
         str += parseUnicode(context);
@@ -107,7 +107,7 @@ function parseIdentifier(context: IParseContext): string {
   while (context.offset < context.input.length) {
     const char = context.input[context.offset++];
     if (escaped) {
-      if (/[0-9a-fA-F]/.test(char)) {
+      if (/[\dA-Fa-f]/.test(char)) {
         // Unicode escape
         context.offset--;
         str += parseUnicode(context);
@@ -156,7 +156,7 @@ function parseUnicode(context: IParseContext): string {
       // of the escape and is swallowed.
       return unicodeToString(str);
     }
-    if (str.length >= 6 || !/[0-9a-fA-F]/.test(char)) {
+    if (str.length >= 6 || !/[\dA-Fa-f]/.test(char)) {
       // If the next character is not a valid hex digit or we have reached the
       // maximum of 6 digits in the escape, terminate the escape.
       context.offset--;

addons/xterm-addon-ligatures/webpack.config.js

@@ -30,7 +30,18 @@ module.exports = {
   },
   mode: 'production',
   externals: {
-    'font-finder':'font-finder',
-    'font-ligatures':'font-ligatures'
+    'font-finder': 'font-finder',
+    'stream': 'stream',
+    'os': 'os',
+    'util': 'util'
+  },
+  resolve: {
+    // The ligature modules contains fallbacks for node environments, we never want to browserify them
+    fallback: {
+      stream: false,
+      util: false,
+      os: false,
+      path: false
+    }
   }
 };

addons/xterm-addon-ligatures/yarn.lock

@@ -87,19 +87,19 @@ font-finder@^1.0.3:
 
 font-finder@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/font-finder/-/font-finder-1.1.0.tgz#2bff2b2762acba720239c8bec898a96daae90858"
+  resolved "https://registry.npmjs.org/font-finder/-/font-finder-1.1.0.tgz#2bff2b2762acba720239c8bec898a96daae90858"
   integrity sha512-wpCL2uIbi6GurJbU7ZlQ3nGd61Ho+dSU6U83/xJT5UPFfN35EeCW/rOtS+5k+IuEZu2SYmHzDIPL9eA5tSYRAw==
   dependencies:
     get-system-fonts "^2.0.0"
     promise-stream-reader "^1.0.1"
 
-font-ligatures@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/font-ligatures/-/font-ligatures-1.3.3.tgz#63fff18dc8adb3a11fe5eec1f4e8d7edfa8075b9"
-  integrity sha512-NSGpHgVNX81M7AWS1XylK1UZbN3QllfUIDAAuPv6TUcl5O2b781JcKS5L2RopAU0AqlTyX3ZuX/04eaMpbVrHA==
+font-ligatures@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/font-ligatures/-/font-ligatures-1.4.0.tgz#6a7b370d96be1358dddfad67830e82fbfd59e6dc"
+  integrity sha512-n7DFnnEpJ0NrVoLqZIL4tMGVs+CnFwQc92m80LWyrbgAFO4x234+t2/H9o4eOYA1eh6ta9dZAEEsJAwsBdNezA==
   dependencies:
     font-finder "^1.0.3"
-    lru-cache "^4.1.3"
+    lru-cache "^6.0.0"
     opentype.js "^0.8.0"
 
 get-system-fonts@^2.0.0:
@@ -128,9 +128,9 @@ lodash.get@^4.4.2:
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
 
 lodash@^4.17.15:
-  version "4.17.19"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
-  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 lolex@^2.7.5:
   version "2.7.5"
@@ -144,12 +144,12 @@ lolex@^5.0.1:
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
-lru-cache@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
   dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
+    yallist "^4.0.0"
 
 minimist@^1.2.5:
   version "1.2.5"
@@ -198,10 +198,6 @@ promise-stream-reader@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-stream-reader/-/promise-stream-reader-1.0.1.tgz#4e793a79c9d49a73ccd947c6da9c127f12923649"
 
-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-
 sinon@6.3.5:
   version "6.3.5"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-6.3.5.tgz#0f6d6a5b4ebaad1f6e8e019395542d1d02c144a0"
@@ -232,9 +228,10 @@ type-detect@4.0.8, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
 
-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
 yauzl@^2.10.0:
   version "2.10.0"

addons/xterm-addon-search/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-search",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-search/src/SearchAddon.ts

@@ -23,7 +23,7 @@ export interface ISearchResult {
   row: number;
 }
 
-const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\;:"\',./<>?';
+const NON_WORD_CHARACTERS = ' ~!@#$%^&*()+`-=[]{}|\\;:"\',./<>?';
 const LINES_CACHE_TIME_TO_LIVE = 15 * 1000; // 15 secs
 
 export class SearchAddon implements ITerminalAddon {
@@ -240,8 +240,8 @@ export class SearchAddon implements ITerminalAddon {
    * @param term the substring that starts at searchIndex
    */
   private _isWholeWord(searchIndex: number, line: string, term: string): boolean {
-    return (((searchIndex === 0) || (NON_WORD_CHARACTERS.indexOf(line[searchIndex - 1]) !== -1)) &&
-      (((searchIndex + term.length) === line.length) || (NON_WORD_CHARACTERS.indexOf(line[searchIndex + term.length]) !== -1)));
+    return ((searchIndex === 0) || (NON_WORD_CHARACTERS.includes(line[searchIndex - 1]))) &&
+      (((searchIndex + term.length) === line.length) || (NON_WORD_CHARACTERS.includes(line[searchIndex + term.length])));
   }
 
   /**
@@ -262,7 +262,7 @@ export class SearchAddon implements ITerminalAddon {
 
     // Ignore wrapped lines, only consider on unwrapped line (first row of command string).
     const firstLine = terminal.buffer.active.getLine(row);
-    if (firstLine && firstLine.isWrapped) {
+    if (firstLine?.isWrapped) {
       if (isReverseSearch) {
         searchPosition.startCol += terminal.cols;
         return;
@@ -394,7 +394,7 @@ export class SearchAddon implements ITerminalAddon {
     // If it is not in the viewport then we scroll else it just gets selected
     if (result.row >= (terminal.buffer.active.viewportY + terminal.rows) || result.row < terminal.buffer.active.viewportY) {
       let scroll = result.row - terminal.buffer.active.viewportY;
-      scroll = scroll - Math.floor(terminal.rows / 2);
+      scroll -= Math.floor(terminal.rows / 2);
       terminal.scrollLines(scroll);
     }
     return true;

addons/xterm-addon-search/test/SearchAddon.api.ts

@@ -6,10 +6,10 @@
 import { assert } from 'chai';
 import { readFile } from 'fs';
 import { resolve } from 'path';
-import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
 let browser: Browser;
 let page: Page;
@@ -18,10 +18,7 @@ const height = 600;
 
 describe('Search Tests', function(): void {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.indexOf('--headless') !== -1
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
     await page.goto(APP);

addons/xterm-addon-serialize/benchmark/SerializeAddon.benchmark.ts

@@ -35,7 +35,7 @@ perfContext('Terminal: sh -c "dd if=/dev/urandom count=40 bs=1k | hexdump | lolc
       chunks.push(data as unknown as Buffer);
       length += data.length;
     });
-    await new Promise(resolve => p.on('exit', () => resolve()));
+    await new Promise<void>(resolve => p.on('exit', () => resolve()));
     contentUtf8 = Buffer.concat(chunks, length);
     // translate to content string
     const buffer = new Uint32Array(contentUtf8.length);

addons/xterm-addon-serialize/package.json

@@ -1,12 +1,13 @@
 {
   "name": "xterm-addon-serialize",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
   },
   "main": "lib/xterm-addon-serialize.js",
   "types": "typings/xterm-addon-serialize.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js",
   "license": "MIT",
   "scripts": {
     "build": "../../node_modules/.bin/tsc -p .",

addons/xterm-addon-serialize/src/SerializeAddon.ts

@@ -7,13 +7,17 @@
 
 import { Terminal, ITerminalAddon, IBuffer, IBufferCell } from 'xterm';
 
+
 function constrain(value: number, low: number, high: number): number {
   return Math.max(low, Math.min(value, high));
 }
 
 // TODO: Refine this template class later
 abstract class BaseSerializeHandler {
-  constructor(private _buffer: IBuffer) { }
+  constructor(
+    protected readonly _buffer: IBuffer
+  ) {
+  }
 
   public serialize(startRow: number, endRow: number): string {
     // we need two of them to flip between old and new cell
@@ -71,8 +75,6 @@ function equalFlags(cell1: IBufferCell, cell2: IBufferCell): boolean {
     && cell1.isDim() === cell2.isDim();
 }
 
-
-
 class StringSerializeHandler extends BaseSerializeHandler {
   private _rowIndex: number = 0;
   private _allRows: string[] = new Array<string>();
@@ -83,7 +85,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
   // we can see a full colored cell and a null cell that only have background the same style
   // but the information isn't preserved by null cell itself
   // so wee need to record it when required.
-  private _cursorStyle: IBufferCell = this._buffer1.getNullCell();
+  private _cursorStyle: IBufferCell = this._buffer.getNullCell();
 
   // where exact the cursor styles comes from
   // because we can't copy the cell directly
@@ -92,7 +94,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
   private _cursorStyleCol: number = 0;
 
   // this is a null cell for reference for checking whether background is empty or not
-  private _backgroundCell: IBufferCell = this._buffer1.getNullCell();
+  private _backgroundCell: IBufferCell = this._buffer.getNullCell();
 
   private _firstRow: number = 0;
   private _lastCursorRow: number = 0;
@@ -100,8 +102,11 @@ class StringSerializeHandler extends BaseSerializeHandler {
   private _lastContentCursorRow: number = 0;
   private _lastContentCursorCol: number = 0;
 
-  constructor(private _buffer1: IBuffer, private _terminal: Terminal) {
-    super(_buffer1);
+  constructor(
+    buffer: IBuffer,
+    private readonly _terminal: Terminal
+  ) {
+    super(buffer);
   }
 
   protected _beforeSerialize(rows: number, start: number, end: number): void {
@@ -111,14 +116,14 @@ class StringSerializeHandler extends BaseSerializeHandler {
     this._firstRow = start;
   }
 
-  private _thisRowLastChar: IBufferCell = this._buffer1.getNullCell();
-  private _thisRowLastSecondChar: IBufferCell = this._buffer1.getNullCell();
-  private _nextRowFirstChar: IBufferCell = this._buffer1.getNullCell();
+  private _thisRowLastChar: IBufferCell = this._buffer.getNullCell();
+  private _thisRowLastSecondChar: IBufferCell = this._buffer.getNullCell();
+  private _nextRowFirstChar: IBufferCell = this._buffer.getNullCell();
   protected _rowEnd(row: number, isLastRow: boolean): void {
     // if there is colorful empty cell at line end, whe must pad it back, or the the color block will missing
     if (this._nullCellCount > 0 && !equalBg(this._cursorStyle, this._backgroundCell)) {
       // use clear right to set background.
-      this._currentRow += `\x1b[${this._nullCellCount}X`;
+      this._currentRow += `\u001b[${this._nullCellCount}X`;
     }
 
     let rowSeparator = '';
@@ -127,13 +132,13 @@ class StringSerializeHandler extends BaseSerializeHandler {
     if (!isLastRow) {
       // Enable BCE
       if (row - this._firstRow >= this._terminal.rows) {
-        this._buffer1.getLine(this._cursorStyleRow)?.getCell(this._cursorStyleCol, this._backgroundCell);
+        this._buffer.getLine(this._cursorStyleRow)?.getCell(this._cursorStyleCol, this._backgroundCell);
       }
 
       // Fetch current line
-      const currentLine = this._buffer1.getLine(row)!;
+      const currentLine = this._buffer.getLine(row)!;
       // Fetch next line
-      const nextLine = this._buffer1.getLine(row + 1)!;
+      const nextLine = this._buffer.getLine(row + 1)!;
 
       if (!nextLine.isWrapped) {
         // just insert the line break
@@ -187,15 +192,15 @@ class StringSerializeHandler extends BaseSerializeHandler {
           // insert enough character to force the wrap
           rowSeparator = '-'.repeat(this._nullCellCount + 1);
           // move back and erase next line head
-          rowSeparator += '\x1b[1D\x1b[1X';
+          rowSeparator += '\u001b[1D\u001b[1X';
 
           if (this._nullCellCount > 0) {
             // do these because we filled the last several null slot, which we shouldn't
-            rowSeparator += '\x1b[A';
-            rowSeparator += `\x1b[${currentLine.length - this._nullCellCount}C`;
-            rowSeparator += `\x1b[${this._nullCellCount}X`;
-            rowSeparator += `\x1b[${currentLine.length - this._nullCellCount}D`;
-            rowSeparator += '\x1b[B';
+            rowSeparator += '\u001b[A';
+            rowSeparator += `\u001b[${currentLine.length - this._nullCellCount}C`;
+            rowSeparator += `\u001b[${this._nullCellCount}X`;
+            rowSeparator += `\u001b[${currentLine.length - this._nullCellCount}D`;
+            rowSeparator += '\u001b[B';
           }
 
           // This is content and need the be serialized even it is invisible.
@@ -285,20 +290,20 @@ class StringSerializeHandler extends BaseSerializeHandler {
       if (this._nullCellCount > 0) {
         // use clear right to set background.
         if (!equalBg(this._cursorStyle, this._backgroundCell)) {
-          this._currentRow += `\x1b[${this._nullCellCount}X`;
+          this._currentRow += `\u001b[${this._nullCellCount}X`;
         }
         // use move right to move cursor.
-        this._currentRow += `\x1b[${this._nullCellCount}C`;
+        this._currentRow += `\u001b[${this._nullCellCount}C`;
         this._nullCellCount = 0;
       }
 
       this._lastContentCursorRow = this._lastCursorRow = row;
       this._lastContentCursorCol = this._lastCursorCol = col;
 
-      this._currentRow += `\x1b[${sgrSeq.join(';')}m`;
+      this._currentRow += `\u001b[${sgrSeq.join(';')}m`;
 
       // update the last cursor style
-      const line = this._buffer1.getLine(row);
+      const line = this._buffer.getLine(row);
       if (line !== undefined) {
         line.getCell(col, this._cursorStyle);
         this._cursorStyleRow = row;
@@ -317,10 +322,10 @@ class StringSerializeHandler extends BaseSerializeHandler {
         // because style change is handled by previous stage
         // use move right when background is empty, use clear right when there is background.
         if (equalBg(this._cursorStyle, this._backgroundCell)) {
-          this._currentRow += `\x1b[${this._nullCellCount}C`;
+          this._currentRow += `\u001b[${this._nullCellCount}C`;
         } else {
-          this._currentRow += `\x1b[${this._nullCellCount}X`;
-          this._currentRow += `\x1b[${this._nullCellCount}C`;
+          this._currentRow += `\u001b[${this._nullCellCount}X`;
+          this._currentRow += `\u001b[${this._nullCellCount}C`;
         }
         this._nullCellCount = 0;
       }
@@ -338,7 +343,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
 
     // the fixup is only required for data without scrollback
     // because it will always be placed at last line otherwise
-    if (this._buffer1.length - this._firstRow <= this._terminal.rows) {
+    if (this._buffer.length - this._firstRow <= this._terminal.rows) {
       rowEnd = this._lastContentCursorRow + 1 - this._firstRow;
       this._lastCursorCol = this._lastContentCursorCol;
       this._lastCursorRow = this._lastContentCursorRow;
@@ -354,8 +359,8 @@ class StringSerializeHandler extends BaseSerializeHandler {
     }
 
     // restore the cursor
-    const realCursorRow = this._buffer1.baseY + this._buffer1.cursorY;
-    const realCursorCol = this._buffer1.cursorX;
+    const realCursorRow = this._buffer.baseY + this._buffer.cursorY;
+    const realCursorCol = this._buffer.cursorX;
 
     const cursorMoved = (realCursorRow !== this._lastCursorRow || realCursorCol !== this._lastCursorCol);
 
@@ -379,7 +384,6 @@ class StringSerializeHandler extends BaseSerializeHandler {
       moveRight(realCursorCol - this._lastCursorCol);
     }
 
-
     return content;
   }
 }
@@ -393,14 +397,40 @@ export class SerializeAddon implements ITerminalAddon {
     this._terminal = terminal;
   }
 
-  private _getString(buffer: IBuffer, scrollback?: number): string {
+  private _serializeBuffer(terminal: Terminal, buffer: IBuffer, scrollback?: number): string {
     const maxRows = buffer.length;
-    const handler = new StringSerializeHandler(buffer, this._terminal!);
+    const handler = new StringSerializeHandler(buffer, terminal);
+    const correctRows = (scrollback === undefined) ? maxRows : constrain(scrollback + terminal.rows, 0, maxRows);
+    return handler.serialize(maxRows - correctRows, maxRows);
+  }
 
-    const correctRows = (scrollback === undefined) ? maxRows : constrain(scrollback + this!._terminal!.rows, 0, maxRows);
-    const result = handler.serialize(maxRows - correctRows, maxRows);
+  private _serializeModes(terminal: Terminal): string {
+    let content = '';
+    const modes = terminal.modes;
 
-    return result;
+    // Default: false
+    if (modes.applicationCursorKeysMode) content += '\x1b[?1h';
+    if (modes.applicationKeypadMode) content += '\x1b[?66h';
+    if (modes.bracketedPasteMode) content += '\x1b[?2004h';
+    if (modes.insertMode) content += '\x1b[4h';
+    if (modes.originMode) content += '\x1b[?6h';
+    if (modes.reverseWraparoundMode) content += '\x1b[?45h';
+    if (modes.sendFocusMode) content += '\x1b[?1004h';
+
+    // Default: true
+    if (modes.wraparoundMode === false) content += '\x1b[?7l';
+
+    // Default: 'none'
+    if (modes.mouseTrackingMode !== 'none') {
+      switch (modes.mouseTrackingMode) {
+        case 'x10': content += '\x1b[?9h'; break;
+        case 'vt200': content += '\x1b[?1000h'; break;
+        case 'drag': content += '\x1b[?1002h'; break;
+        case 'any': content += '\x1b[?1003h'; break;
+      }
+    }
+
+    return content;
   }
 
   public serialize(scrollback?: number): string {
@@ -409,17 +439,19 @@ export class SerializeAddon implements ITerminalAddon {
       throw new Error('Cannot use addon until it has been loaded');
     }
 
-    if (this._terminal.buffer.active.type === 'normal') {
-      return this._getString(this._terminal.buffer.active, scrollback);
+    // Normal buffer
+    let content = this._serializeBuffer(this._terminal, this._terminal.buffer.normal, scrollback);
+
+    // Alternate buffer
+    if (this._terminal.buffer.active.type === 'alternate') {
+      const alternativeScreenContent = this._serializeBuffer(this._terminal, this._terminal.buffer.alternate, undefined);
+      content += `\u001b[?1049h\u001b[H${alternativeScreenContent}`;
     }
 
-    const normalScreenContent = this._getString(this._terminal.buffer.normal, scrollback);
-    // alt screen don't have scrollback
-    const alternativeScreenContent = this._getString(this._terminal.buffer.alternate, undefined);
+    // Modes
+    content += this._serializeModes(this._terminal);
 
-    return normalScreenContent
-      + '\u001b[?1049h\u001b[H'
-      + alternativeScreenContent;
+    return content;
   }
 
   public dispose(): void { }

addons/xterm-addon-serialize/test/SerializeAddon.api.ts

@@ -4,10 +4,10 @@
  */
 
 import { assert } from 'chai';
-import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
 let browser: Browser;
 let page: Page;
@@ -30,12 +30,15 @@ const testNormalScreenEqual = async (page: any, str: string): Promise<void> => {
   assert.equal(JSON.stringify(originalBuffer), JSON.stringify(newBuffer));
 };
 
+async function testSerializeEquals(writeContent: string, expectedSerialized: string): Promise<void> {
+  await writeRawSync(page, writeContent);
+  const result = await page.evaluate(`serializeAddon.serialize();`) as string;
+  assert.strictEqual(result, expectedSerialized);
+}
+
 describe('SerializeAddon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.indexOf('--headless') !== -1
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
     await page.goto(APP);
@@ -89,8 +92,6 @@ describe('SerializeAddon', () => {
   });
 
   it('empty content', async function(): Promise<any> {
-    const rows = 10;
-    const cols = 10;
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), '');
   });
 
@@ -177,17 +178,17 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P16_GREEN) + line,  // Workaround: If we clear all flags a the end, serialize will use \x1b[0m to clear instead of the sepcific disable sequence
-      mkSGR(INVERSE) + line,
-      mkSGR(BOLD) + line,
-      mkSGR(UNDERLINED) + line,
-      mkSGR(BLINK) + line,
-      mkSGR(INVISIBLE) + line,
-      mkSGR(NO_INVERSE) + line,
-      mkSGR(NO_BOLD) + line,
-      mkSGR(NO_UNDERLINED) + line,
-      mkSGR(NO_BLINK) + line,
-      mkSGR(NO_INVISIBLE) + line
+      sgr(FG_P16_GREEN) + line,  // Workaround: If we clear all flags a the end, serialize will use \x1b[0m to clear instead of the sepcific disable sequence
+      sgr(INVERSE) + line,
+      sgr(BOLD) + line,
+      sgr(UNDERLINED) + line,
+      sgr(BLINK) + line,
+      sgr(INVISIBLE) + line,
+      sgr(NO_INVERSE) + line,
+      sgr(NO_BOLD) + line,
+      sgr(NO_UNDERLINED) + line,
+      sgr(NO_BLINK) + line,
+      sgr(NO_INVISIBLE) + line
     ];
     const rows = lines.length;
     await writeSync(page, lines.join('\\r\\n'));
@@ -209,16 +210,16 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P16_RED) + line,     // fg Red,
-      mkSGR(UNDERLINED) + line,     // fg Red, Underlined
-      mkSGR(FG_P16_GREEN) + line,   // fg Green, Underlined
-      mkSGR(INVERSE) + line,        // fg Green, Underlined, Inverse
-      mkSGR(NO_INVERSE) + line,     // fg Green, Underlined
-      mkSGR(INVERSE) + line,        // fg Green, Underlined, Inverse
-      mkSGR(BG_P16_YELLOW) + line,  // fg Green, bg Yellow, Underlined, Inverse
-      mkSGR(FG_RESET) + line,       // bg Yellow, Underlined, Inverse
-      mkSGR(BG_RESET) + line,       // Underlined, Inverse
-      mkSGR(NORMAL) + line          // Back to normal
+      sgr(FG_P16_RED) + line,     // fg Red,
+      sgr(UNDERLINED) + line,     // fg Red, Underlined
+      sgr(FG_P16_GREEN) + line,   // fg Green, Underlined
+      sgr(INVERSE) + line,        // fg Green, Underlined, Inverse
+      sgr(NO_INVERSE) + line,     // fg Green, Underlined
+      sgr(INVERSE) + line,        // fg Green, Underlined, Inverse
+      sgr(BG_P16_YELLOW) + line,  // fg Green, bg Yellow, Underlined, Inverse
+      sgr(FG_RESET) + line,       // bg Yellow, Underlined, Inverse
+      sgr(BG_RESET) + line,       // Underlined, Inverse
+      sgr(NORMAL) + line          // Back to normal
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -228,19 +229,19 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P16_RED) + line,                   // fg Red
-      mkSGR(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
-      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
-      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
-      mkSGR(BG_RESET) + line,                     // Italic
-      mkSGR(NORMAL) + line,                       // Back to normal
-      mkSGR(FG_P16_RED) + line,                   // fg Red
-      mkSGR(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
-      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
-      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
-      mkSGR(BG_RESET) + line                      // Italic
+      sgr(FG_P16_RED) + line,                   // fg Red
+      sgr(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
+      sgr(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
+      sgr(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
+      sgr(BG_RESET) + line,                     // Italic
+      sgr(NORMAL) + line,                       // Back to normal
+      sgr(FG_P16_RED) + line,                   // fg Red
+      sgr(FG_P16_GREEN, BG_P16_YELLOW) + line,  // fg Green, bg Yellow
+      sgr(UNDERLINED, ITALIC) + line,           // fg Green, bg Yellow, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green, bg Yellow
+      sgr(FG_RESET, ITALIC) + line,             // bg Yellow, Italic
+      sgr(BG_RESET) + line                      // Italic
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -250,16 +251,16 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P256_RED) + line,    // fg Red 256,
-      mkSGR(UNDERLINED) + line,     // fg Red 256, Underlined
-      mkSGR(FG_P256_GREEN) + line,  // fg Green 256, Underlined
-      mkSGR(INVERSE) + line,        // fg Green 256, Underlined, Inverse
-      mkSGR(NO_INVERSE) + line,     // fg Green 256, Underlined
-      mkSGR(INVERSE) + line,        // fg Green 256, Underlined, Inverse
-      mkSGR(BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256, Underlined, Inverse
-      mkSGR(FG_RESET) + line,       // bg Yellow 256, Underlined, Inverse
-      mkSGR(BG_RESET) + line,       // Underlined, Inverse
-      mkSGR(NORMAL) + line          // Back to normal
+      sgr(FG_P256_RED) + line,    // fg Red 256,
+      sgr(UNDERLINED) + line,     // fg Red 256, Underlined
+      sgr(FG_P256_GREEN) + line,  // fg Green 256, Underlined
+      sgr(INVERSE) + line,        // fg Green 256, Underlined, Inverse
+      sgr(NO_INVERSE) + line,     // fg Green 256, Underlined
+      sgr(INVERSE) + line,        // fg Green 256, Underlined, Inverse
+      sgr(BG_P256_YELLOW) + line, // fg Green 256, bg Yellow 256, Underlined, Inverse
+      sgr(FG_RESET) + line,       // bg Yellow 256, Underlined, Inverse
+      sgr(BG_RESET) + line,       // Underlined, Inverse
+      sgr(NORMAL) + line          // Back to normal
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -269,19 +270,19 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_P256_RED) + line,                    // fg Red 256
-      mkSGR(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
-      mkSGR(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
-      mkSGR(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
-      mkSGR(BG_RESET) + line,                       // Italic
-      mkSGR(NORMAL) + line,                         // Back to normal
-      mkSGR(FG_P256_RED) + line,                    // fg Red 256
-      mkSGR(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
-      mkSGR(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
-      mkSGR(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
-      mkSGR(BG_RESET) + line                        // Italic
+      sgr(FG_P256_RED) + line,                    // fg Red 256
+      sgr(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
+      sgr(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
+      sgr(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
+      sgr(BG_RESET) + line,                       // Italic
+      sgr(NORMAL) + line,                         // Back to normal
+      sgr(FG_P256_RED) + line,                    // fg Red 256
+      sgr(FG_P256_GREEN, BG_P256_YELLOW) + line,  // fg Green 256, bg Yellow 256
+      sgr(UNDERLINED, ITALIC) + line,             // fg Green 256, bg Yellow 256, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,       // fg Green 256, bg Yellow 256
+      sgr(FG_RESET, ITALIC) + line,               // bg Yellow 256, Italic
+      sgr(BG_RESET) + line                        // Italic
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -291,16 +292,16 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_RGB_RED) + line,     // fg Red RGB,
-      mkSGR(UNDERLINED) + line,     // fg Red RGB, Underlined
-      mkSGR(FG_RGB_GREEN) + line,   // fg Green RGB, Underlined
-      mkSGR(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
-      mkSGR(NO_INVERSE) + line,     // fg Green RGB, Underlined
-      mkSGR(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
-      mkSGR(BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB, Underlined, Inverse
-      mkSGR(FG_RESET) + line,       // bg Yellow RGB, Underlined, Inverse
-      mkSGR(BG_RESET) + line,       // Underlined, Inverse
-      mkSGR(NORMAL) + line          // Back to normal
+      sgr(FG_RGB_RED) + line,     // fg Red RGB,
+      sgr(UNDERLINED) + line,     // fg Red RGB, Underlined
+      sgr(FG_RGB_GREEN) + line,   // fg Green RGB, Underlined
+      sgr(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
+      sgr(NO_INVERSE) + line,     // fg Green RGB, Underlined
+      sgr(INVERSE) + line,        // fg Green RGB, Underlined, Inverse
+      sgr(BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB, Underlined, Inverse
+      sgr(FG_RESET) + line,       // bg Yellow RGB, Underlined, Inverse
+      sgr(BG_RESET) + line,       // Underlined, Inverse
+      sgr(NORMAL) + line          // Back to normal
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -310,19 +311,19 @@ describe('SerializeAddon', () => {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
-      mkSGR(FG_RGB_RED) + line,                   // fg Red RGB
-      mkSGR(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
-      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
-      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
-      mkSGR(BG_RESET) + line,                     // Italic
-      mkSGR(NORMAL) + line,                       // Back to normal
-      mkSGR(FG_RGB_RED) + line,                   // fg Red RGB
-      mkSGR(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
-      mkSGR(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
-      mkSGR(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
-      mkSGR(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
-      mkSGR(BG_RESET) + line                      // Italic
+      sgr(FG_RGB_RED) + line,                   // fg Red RGB
+      sgr(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
+      sgr(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
+      sgr(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
+      sgr(BG_RESET) + line,                     // Italic
+      sgr(NORMAL) + line,                       // Back to normal
+      sgr(FG_RGB_RED) + line,                   // fg Red RGB
+      sgr(FG_RGB_GREEN, BG_RGB_YELLOW) + line,  // fg Green RGB, bg Yellow RGB
+      sgr(UNDERLINED, ITALIC) + line,           // fg Green RGB, bg Yellow RGB, Underlined, Italic
+      sgr(NO_UNDERLINED, NO_ITALIC) + line,     // fg Green RGB, bg Yellow RGB
+      sgr(FG_RESET, ITALIC) + line,             // bg Yellow RGB, Italic
+      sgr(BG_RESET) + line                      // Italic
     ];
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
@@ -481,15 +482,61 @@ describe('SerializeAddon', () => {
 
     await testNormalScreenEqual(page, lines.join(''));
   });
+
+  describe('handle modes', () => {
+    it('applicationCursorKeysMode', async () => {
+      await testSerializeEquals('test\u001b[?1h', 'test\u001b[?1h');
+      await testSerializeEquals('\u001b[?1l', 'test');
+    });
+    it('applicationKeypadMode', async () => {
+      await testSerializeEquals('test\u001b[?66h', 'test\u001b[?66h');
+      await testSerializeEquals('\u001b[?66l', 'test');
+    });
+    it('bracketedPasteMode', async () => {
+      await testSerializeEquals('test\u001b[?2004h', 'test\u001b[?2004h');
+      await testSerializeEquals('\u001b[?2004l', 'test');
+    });
+    it('insertMode', async () => {
+      await testSerializeEquals('test\u001b[4h', 'test\u001b[4h');
+      await testSerializeEquals('\u001b[4l', 'test');
+    });
+    it('mouseTrackingMode', async () => {
+      await testSerializeEquals('test\u001b[?9h', 'test\u001b[?9h');
+      await testSerializeEquals('\u001b[?9l', 'test');
+      await testSerializeEquals('\u001b[?1000h', 'test\u001b[?1000h');
+      await testSerializeEquals('\u001b[?1000l', 'test');
+      await testSerializeEquals('\u001b[?1002h', 'test\u001b[?1002h');
+      await testSerializeEquals('\u001b[?1002l', 'test');
+      await testSerializeEquals('\u001b[?1003h', 'test\u001b[?1003h');
+      await testSerializeEquals('\u001b[?1003l', 'test');
+    });
+    it('originMode', async () => {
+      // origin mode moves cursor to (0,0)
+      await testSerializeEquals('test\u001b[?6h', 'test\u001b[4D\u001b[?6h');
+      await testSerializeEquals('\u001b[?6l', 'test\u001b[4D');
+    });
+    it('reverseWraparoundMode', async () => {
+      await testSerializeEquals('test\u001b[?45h', 'test\u001b[?45h');
+      await testSerializeEquals('\u001b[?45l', 'test');
+    });
+    it('sendFocusMode', async () => {
+      await testSerializeEquals('test\u001b[?1004h', 'test\u001b[?1004h');
+      await testSerializeEquals('\u001b[?1004l', 'test');
+    });
+    it('wraparoundMode', async () => {
+      await testSerializeEquals('test\u001b[?7l', 'test\u001b[?7l');
+      await testSerializeEquals('\u001b[?7h', 'test');
+    });
+  });
 });
 
 function newArray<T>(initial: T | ((index: number) => T), count: number): T[] {
   const array: T[] = new Array<T>(count);
   for (let i = 0; i < array.length; i++) {
     if (typeof initial === 'function') {
-      array[i] = (<(index: number) => T>initial)(i);
+      array[i] = (initial as (index: number) => T)(i);
     } else {
-      array[i] = <T>initial;
+      array[i] = initial as T;
     }
   }
   return array;
@@ -503,7 +550,7 @@ function digitsString(length: number, from: number = 0, sgr: string = ''): strin
   return s;
 }
 
-function mkSGR(...seq: string[]): string {
+function sgr(...seq: string[]): string {
   return `\x1b[${seq.join(';')}m`;
 }
 

addons/xterm-addon-serialize/typings/xterm-addon-serialize.d.ts

@@ -3,7 +3,6 @@
  * @license MIT
  */
 
-
 import { Terminal, ITerminalAddon } from 'xterm';
 
 declare module 'xterm-addon-serialize' {
@@ -21,12 +20,13 @@ declare module 'xterm-addon-serialize' {
     public activate(terminal: Terminal): void;
 
     /**
-     * Serializes terminal rows into a string that can be written back to the terminal
-     * to restore the state. The cursor will also be positioned to the correct cell.
-     * When restoring a terminal it is best to do before `Terminal.open` is called
-     * to avoid wasting CPU cycles rendering incomplete frames.
-     * @param scrollback The number of rows in scrollback buffer to serialize, starting from the bottom of the
-     * scrollback buffer. This defaults to the all available rows in the scrollback buffer.
+     * Serializes terminal rows into a string that can be written back to the terminal to restore
+     * the state. The cursor will also be positioned to the correct cell. When restoring a terminal
+     * it is best to do before `Terminal.open` is called to avoid wasting CPU cycles rendering
+     * incomplete frames.
+     * @param scrollback The number of rows in scrollback buffer to serialize, starting from the
+     * bottom of the scrollback buffer. This defaults to the all available rows in the scrollback
+     * buffer.
      */
     public serialize(scrollback?: number): string;
 

addons/xterm-addon-serialize/webpack.config.js

@@ -25,7 +25,8 @@ module.exports = {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    globalObject: 'this'
   },
   mode: 'production'
 };

addons/xterm-addon-unicode11/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-unicode11",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-unicode11/src/Unicode11Addon.ts

@@ -8,6 +8,7 @@
 import { Terminal, ITerminalAddon } from 'xterm';
 import { UnicodeV11 } from './UnicodeV11';
 
+
 export class Unicode11Addon implements ITerminalAddon {
   public activate(terminal: Terminal): void {
     terminal.unicode.register(new UnicodeV11());

addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts

@@ -4,10 +4,10 @@
  */
 
 import { assert } from 'chai';
-import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
 let browser: Browser;
 let page: Page;
@@ -16,10 +16,7 @@ const height = 600;
 
 describe('Unicode11Addon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.indexOf('--headless') !== -1
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
   });

addons/xterm-addon-unicode11/webpack.config.js

@@ -32,7 +32,8 @@ module.exports = {
     filename: mainFile,
     path: path.resolve('./lib'),
     library: addonName,
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    globalObject: 'this'
   },
   mode: 'production'
 };

addons/xterm-addon-web-links/src/WebLinkProvider.ts

@@ -41,7 +41,7 @@ export class WebLinkProvider implements ILinkProvider {
 }
 
 export class LinkComputer {
-  public static computeLink(y: number, regex: RegExp, terminal: Terminal, handler: (event: MouseEvent, uri: string) => void): ILink[] {
+  public static computeLink(y: number, regex: RegExp, terminal: Terminal, activate: (event: MouseEvent, uri: string) => void): ILink[] {
     const rex = new RegExp(regex.source, (regex.flags || '') + 'g');
 
     const [line, startLineIndex] = LinkComputer._translateBufferLineToStringWithWrap(y - 1, false, terminal);
@@ -89,7 +89,7 @@ export class LinkComputer {
         }
       };
 
-      result.push({ range, text, activate: handler });
+      result.push({ range, text, activate });
     }
 
     return result;

addons/xterm-addon-web-links/test/WebLinksAddon.api.ts

@@ -4,10 +4,10 @@
  */
 
 import { assert } from 'chai';
-import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { openTerminal, pollFor, writeSync, launchBrowser } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
 let browser: Browser;
 let page: Page;
@@ -16,10 +16,7 @@ const height = 600;
 
 describe('WebLinksAddon', () => {
   before(async function(): Promise<any> {
-    const browserType = getBrowserType();
-    browser = await browserType.launch({
-      headless: process.argv.indexOf('--headless') !== -1
-    });
+    browser = await launchBrowser();
     page = await (await browser.newContext()).newPage();
     await page.setViewportSize({ width, height });
   });

addons/xterm-addon-webgl/README.md

@@ -1,8 +1,6 @@
 ## xterm-addon-webgl
 
-An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a WebGL-based renderer. This addon requires xterm.js v4+.
-
-⚠️ This is an experimental addon that is [missing some features and may be unstable](https://github.com/xtermjs/xterm.js/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Faddon%2Fwebgl) ⚠️
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a WebGL2-based renderer. This addon requires xterm.js v4+.
 
 ### Install
 
@@ -21,3 +19,18 @@ terminal.loadAddon(new WebglAddon());
 ```
 
 See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/xterm-addon-webgl/typings/xterm-addon-webgl.d.ts) for more advanced usage.
+
+### Handling Context Loss
+
+The browser may drop WebGL contexts for various reasons like OOM or after the system has been suspended. There is an API exposed that fires the `webglcontextlost` event fired on the canvas so embedders can handle it however they wish. An easy, but suboptimal way, to handle this is by disposing of WebglAddon when the event fires:
+
+```ts
+const terminal = new Terminal();
+const addon = new WebglAddon();
+addon.onContextLoss(e => {
+  addon.dispose();
+});
+terminal.loadAddon(addon);
+```
+
+Read more about handling WebGL context losses on the [Khronos wiki](https://www.khronos.org/webgl/wiki/HandlingContextLost).

addons/xterm-addon-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-webgl",
-  "version": "0.10.0",
+  "version": "0.11.2",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-webgl/src/GlyphRenderer.ts

@@ -176,8 +176,9 @@ export class GlyphRenderer {
 
     const i = (y * terminal.cols + x) * INDICES_PER_CELL;
 
-    // Exit early if this is a null/space character
-    if (code === NULL_CELL_CODE || code === WHITESPACE_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) {
+    // Exit early if this is a null character, allow space character to continue as it may have
+    // underline/strikethrough styles
+    if (code === NULL_CELL_CODE || code === undefined/* This is used for the right side of wide chars */) {
       fill(array, 0, i, i + INDICES_PER_CELL - 1 - CELL_POSITION_INDICES);
       return;
     }
@@ -263,7 +264,7 @@ export class GlyphRenderer {
         // Get attributes from fg (excluding inverse) and resolve inverse by pullibng rgb colors
         // from bg. This is needed since the inverse fg color should be based on the original bg
         // color, not on the selection color
-        fg = (fg & ~(Attributes.CM_MASK | Attributes.RGB_MASK | FgFlags.INVERSE));
+        fg &= ~(Attributes.CM_MASK | Attributes.RGB_MASK | FgFlags.INVERSE);
         switch (workCell.getBgColorMode()) {
           case Attributes.CM_P16:
           case Attributes.CM_P256:

addons/xterm-addon-webgl/src/WebglAddon.ts

@@ -3,14 +3,17 @@
  * @license MIT
  */
 
-import { Terminal, ITerminalAddon } from 'xterm';
+import { Terminal, ITerminalAddon, IEvent } from 'xterm';
 import { WebglRenderer } from './WebglRenderer';
-import { IRenderService } from 'browser/services/Services';
+import { ICharacterJoinerService, IRenderService } from 'browser/services/Services';
 import { IColorSet } from 'browser/Types';
+import { EventEmitter } from 'common/EventEmitter';
 
 export class WebglAddon implements ITerminalAddon {
   private _terminal?: Terminal;
   private _renderer?: WebglRenderer;
+  private _onContextLoss = new EventEmitter<void>();
+  public get onContextLoss(): IEvent<void> { return this._onContextLoss.event; }
 
   constructor(
     private _preserveDrawingBuffer?: boolean
@@ -21,9 +24,11 @@ export class WebglAddon implements ITerminalAddon {
       throw new Error('Cannot activate WebglAddon before Terminal.open');
     }
     this._terminal = terminal;
-    const renderService: IRenderService = (<any>terminal)._core._renderService;
-    const colors: IColorSet = (<any>terminal)._core._colorManager.colors;
-    this._renderer = new WebglRenderer(terminal, colors, this._preserveDrawingBuffer);
+    const renderService: IRenderService = (terminal as any)._core._renderService;
+    const characterJoinerService: ICharacterJoinerService = (terminal as any)._core._characterJoinerService;
+    const colors: IColorSet = (terminal as any)._core._colorManager.colors;
+    this._renderer = new WebglRenderer(terminal, colors, characterJoinerService, this._preserveDrawingBuffer);
+    this._renderer.onContextLoss(() => this._onContextLoss.fire());
     renderService.setRenderer(this._renderer);
   }
 

addons/xterm-addon-webgl/src/WebglRenderer.ts

@@ -12,13 +12,17 @@ import { RectangleRenderer } from './RectangleRenderer';
 import { IWebGL2RenderingContext } from './Types';
 import { RenderModel, COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
 import { Disposable } from 'common/Lifecycle';
-import { NULL_CELL_CODE } from 'common/buffer/Constants';
+import { Content, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Terminal, IEvent } from 'xterm';
 import { IRenderLayer } from './renderLayer/Types';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { ITerminal, IColorSet } from 'browser/Types';
 import { EventEmitter } from 'common/EventEmitter';
 import { CellData } from 'common/buffer/CellData';
+import { addDisposableDomListener } from 'browser/Lifecycle';
+import { ICharacterJoinerService } from 'browser/services/Services';
+import { CharData, ICellData } from 'common/Types';
+import { AttributeData } from 'common/buffer/AttributeData';
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
@@ -41,9 +45,13 @@ export class WebglRenderer extends Disposable implements IRenderer {
   private _onRequestRedraw = new EventEmitter<IRequestRedrawEvent>();
   public get onRequestRedraw(): IEvent<IRequestRedrawEvent> { return this._onRequestRedraw.event; }
 
+  private _onContextLoss = new EventEmitter<void>();
+  public get onContextLoss(): IEvent<void> { return this._onContextLoss.event; }
+
   constructor(
     private _terminal: Terminal,
     private _colors: IColorSet,
+    private readonly _characterJoinerService: ICharacterJoinerService,
     preserveDrawingBuffer?: boolean
   ) {
     super();
@@ -52,7 +60,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     this._renderLayers = [
       new LinkRenderLayer(this._core.screenElement!, 2, this._colors, this._core),
-      new CursorRenderLayer(this._core.screenElement!, 3, this._colors, this._onRequestRedraw)
+      new CursorRenderLayer(this._core.screenElement!, 3, this._colors, this._core, this._onRequestRedraw)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -82,6 +90,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
     if (!this._gl) {
       throw new Error('WebGL2 not supported ' + this._gl);
     }
+
+    this.register(addDisposableDomListener(this._canvas, 'webglcontextlost', (e) => { this._onContextLoss.fire(e); }));
+
     this._core.screenElement!.appendChild(this._canvas);
 
     this._rectangleRenderer = new RectangleRenderer(this._terminal, this._colors, this._gl, this.dimensions);
@@ -94,8 +105,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
   }
 
   public dispose(): void {
-    this._renderLayers.forEach(l => l.dispose());
-    this._core.screenElement!.removeChild(this._canvas);
+    for (const l of this._renderLayers) {
+      l.dispose();
+    }
+    this._canvas.parentElement?.removeChild(this._canvas);
     super.dispose();
   }
 
@@ -106,10 +119,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
   public setColors(colors: IColorSet): void {
     this._colors = colors;
     // Clear layers and force a full render
-    this._renderLayers.forEach(l => {
+    for (const l of this._renderLayers) {
       l.setColors(this._terminal, this._colors);
       l.reset(this._terminal);
-    });
+    }
 
     this._rectangleRenderer.setColors();
     this._glyphRenderer.setColors();
@@ -136,7 +149,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._model.resize(this._terminal.cols, this._terminal.rows);
 
     // Resize all render layers
-    this._renderLayers.forEach(l => l.resize(this._terminal, this.dimensions));
+    for (const l of this._renderLayers) {
+      l.resize(this._terminal, this.dimensions);
+    }
 
     // Resize the canvas
     this._canvas.width = this.dimensions.scaledCanvasWidth;
@@ -168,15 +183,21 @@ export class WebglRenderer extends Disposable implements IRenderer {
   }
 
   public onBlur(): void {
-    this._renderLayers.forEach(l => l.onBlur(this._terminal));
+    for (const l of this._renderLayers) {
+      l.onBlur(this._terminal);
+    }
   }
 
   public onFocus(): void {
-    this._renderLayers.forEach(l => l.onFocus(this._terminal));
+    for (const l of this._renderLayers) {
+      l.onFocus(this._terminal);
+    }
   }
 
   public onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
-    this._renderLayers.forEach(l => l.onSelectionChanged(this._terminal, start, end, columnSelectMode));
+    for (const l of this._renderLayers) {
+      l.onSelectionChanged(this._terminal, start, end, columnSelectMode);
+    }
 
     this._updateSelectionModel(start, end, columnSelectMode);
 
@@ -184,11 +205,15 @@ export class WebglRenderer extends Disposable implements IRenderer {
   }
 
   public onCursorMove(): void {
-    this._renderLayers.forEach(l => l.onCursorMove(this._terminal));
+    for (const l of this._renderLayers) {
+      l.onCursorMove(this._terminal);
+    }
   }
 
   public onOptionsChanged(): void {
-    this._renderLayers.forEach(l => l.onOptionsChanged(this._terminal));
+    for (const l of this._renderLayers) {
+      l.onOptionsChanged(this._terminal);
+    }
     this._updateDimensions();
     this._refreshCharAtlas();
   }
@@ -205,7 +230,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
       return;
     }
 
-    const atlas = acquireCharAtlas(this._terminal, this._colors, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight);
+    const atlas = acquireCharAtlas(this._terminal, this._colors, this.dimensions.scaledCellWidth, this.dimensions.scaledCellHeight, this.dimensions.scaledCharWidth, this.dimensions.scaledCharHeight);
     if (!('getRasterizedGlyph' in atlas)) {
       throw new Error('The webgl renderer only works with the webgl char atlas');
     }
@@ -222,7 +247,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
   }
 
   public clear(): void {
-    this._renderLayers.forEach(l => l.reset(this._terminal));
+    for (const l of this._renderLayers) {
+      l.reset(this._terminal);
+    }
   }
 
   public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
@@ -245,7 +272,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
     }
 
     // Update render layers
-    this._renderLayers.forEach(l => l.onGridChanged(this._terminal, start, end));
+    for (const l of this._renderLayers) {
+      l.onGridChanged(this._terminal, start, end);
+    }
 
     // Tell renderer the frame is beginning
     if (this._glyphRenderer.beginFrame()) {
@@ -263,16 +292,41 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   private _updateModel(start: number, end: number): void {
     const terminal = this._core;
+    let cell: ICellData = this._workCell;
 
     for (let y = start; y <= end; y++) {
       const row = y + terminal.buffer.ydisp;
       const line = terminal.buffer.lines.get(row)!;
       this._model.lineLengths[y] = 0;
+      const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
       for (let x = 0; x < terminal.cols; x++) {
-        line.loadCell(x, this._workCell);
+        line.loadCell(x, cell);
 
-        const chars = this._workCell.getChars();
-        let code = this._workCell.getCode();
+        // If true, indicates that the current character(s) to draw were joined.
+        let isJoined = false;
+        let lastCharX = x;
+
+        // Process any joined character ranges as needed. Because of how the
+        // ranges are produced, we know that they are valid for the characters
+        // and attributes of our input.
+        if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
+          isJoined = true;
+          const range = joinedRanges.shift()!;
+
+          // We already know the exact start and end column of the joined range,
+          // so we get the string and width representing it directly
+          cell = new JoinedCellData(
+            cell,
+            line!.translateToString(true, range[0], range[1]),
+            range[1] - range[0]
+          );
+
+          // Skip over the cells occupied by this range in the loop
+          lastCharX = range[1] - 1;
+        }
+
+        const chars = cell.getChars();
+        let code = cell.getCode();
         const i = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
 
         if (code !== NULL_CELL_CODE) {
@@ -281,22 +335,36 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // Nothing has changed, no updates needed
         if (this._model.cells[i] === code &&
-            this._model.cells[i + RENDER_MODEL_BG_OFFSET] === this._workCell.bg &&
-            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === this._workCell.fg) {
+            this._model.cells[i + RENDER_MODEL_BG_OFFSET] === cell.bg &&
+            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === cell.fg) {
           continue;
         }
 
         // Flag combined chars with a bit mask so they're easily identifiable
         if (chars.length > 1) {
-          code = code | COMBINED_CHAR_BIT_MASK;
+          code |= COMBINED_CHAR_BIT_MASK;
         }
 
         // Cache the results in the model
         this._model.cells[i] = code;
-        this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._workCell.bg;
-        this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._workCell.fg;
+        this._model.cells[i + RENDER_MODEL_BG_OFFSET] = cell.bg;
+        this._model.cells[i + RENDER_MODEL_FG_OFFSET] = cell.fg;
 
-        this._glyphRenderer.updateCell(x, y, code, this._workCell.bg, this._workCell.fg, chars);
+        this._glyphRenderer.updateCell(x, y, code, cell.bg, cell.fg, chars);
+
+        if (isJoined) {
+          // Restore work cell
+          cell = this._workCell;
+
+          // Null out non-first cells
+          for (x++; x < lastCharX; x++) {
+            const j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
+            this._glyphRenderer.updateCell(x, y, NULL_CELL_CODE, 0, 0, NULL_CELL_CHAR);
+            this._model.cells[j] = NULL_CELL_CODE;
+            this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._workCell.bg;
+            this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._workCell.fg;
+          }
+        }
       }
     }
     this._rectangleRenderer.updateBackgrounds(this._model);
@@ -413,3 +481,49 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this.dimensions.actualCellWidth = this.dimensions.scaledCellWidth / this._devicePixelRatio;
   }
 }
+
+// TODO: Share impl with core
+export class JoinedCellData extends AttributeData implements ICellData {
+  private _width: number;
+  // .content carries no meaning for joined CellData, simply nullify it
+  // thus we have to overload all other .content accessors
+  public content: number = 0;
+  public fg: number;
+  public bg: number;
+  public combinedData: string = '';
+
+  constructor(firstCell: ICellData, chars: string, width: number) {
+    super();
+    this.fg = firstCell.fg;
+    this.bg = firstCell.bg;
+    this.combinedData = chars;
+    this._width = width;
+  }
+
+  public isCombined(): number {
+    // always mark joined cell data as combined
+    return Content.IS_COMBINED_MASK;
+  }
+
+  public getWidth(): number {
+    return this._width;
+  }
+
+  public getChars(): string {
+    return this.combinedData;
+  }
+
+  public getCode(): number {
+    // code always gets the highest possible fake codepoint (read as -1)
+    // this is needed as code is used by caches as identifier
+    return 0x1FFFFF;
+  }
+
+  public setFromCharData(value: CharData): void {
+    throw new Error('not implemented');
+  }
+
+  public getAsCharData(): CharData {
+    return [this.fg, this.getChars(), this.getWidth(), this.getCode()];
+  }
+}

addons/xterm-addon-webgl/src/atlas/CharAtlasCache.ts

@@ -28,10 +28,12 @@ const charAtlasCache: ICharAtlasCacheEntry[] = [];
 export function acquireCharAtlas(
   terminal: Terminal,
   colors: IColorSet,
+  scaledCellWidth: number,
+  scaledCellHeight: number,
   scaledCharWidth: number,
   scaledCharHeight: number
 ): WebglCharAtlas {
-  const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, terminal, colors);
+  const newConfig = generateConfig(scaledCellWidth, scaledCellHeight, scaledCharWidth, scaledCharHeight, terminal, colors);
 
   // Check to see if the terminal already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts

@@ -13,7 +13,7 @@ const NULL_COLOR: IColor = {
   rgba: 0
 };
 
-export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet): ICharAtlasConfig {
+export function generateConfig(scaledCellWidth: number, scaledCellHeight: number, scaledCharWidth: number, scaledCharHeight: number, terminal: Terminal, colors: IColorSet): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IColorSet = {
     foreground: colors.foreground,
@@ -28,7 +28,12 @@ export function generateConfig(scaledCharWidth: number, scaledCharHeight: number
     contrastCache: colors.contrastCache
   };
   return {
+    customGlyphs: terminal.getOption('customGlyphs'),
     devicePixelRatio: window.devicePixelRatio,
+    letterSpacing: terminal.getOption('letterSpacing'),
+    lineHeight: terminal.getOption('lineHeight'),
+    scaledCellWidth,
+    scaledCellHeight,
     scaledCharWidth,
     scaledCharHeight,
     fontFamily: terminal.getOption('fontFamily'),
@@ -49,6 +54,9 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
     }
   }
   return a.devicePixelRatio === b.devicePixelRatio &&
+      a.customGlyphs === b.customGlyphs &&
+      a.lineHeight === b.lineHeight &&
+      a.letterSpacing === b.letterSpacing &&
       a.fontFamily === b.fontFamily &&
       a.fontSize === b.fontSize &&
       a.fontWeight === b.fontWeight &&

addons/xterm-addon-webgl/src/atlas/Types.d.ts

@@ -17,11 +17,16 @@ export interface IGlyphIdentifier {
 }
 
 export interface ICharAtlasConfig {
+  customGlyphs: boolean;
   devicePixelRatio: number;
+  letterSpacing: number;
+  lineHeight: number;
   fontSize: number;
   fontFamily: string;
   fontWeight: FontWeight;
   fontWeightBold: FontWeight;
+  scaledCellWidth: number;
+  scaledCellHeight: number;
   scaledCharWidth: number;
   scaledCharHeight: number;
   allowTransparency: boolean;

addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts

@@ -12,6 +12,7 @@ import { IColor } from 'browser/Types';
 import { IDisposable } from 'xterm';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { channels, rgba } from 'browser/Color';
+import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs';
 
 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -80,12 +81,12 @@ export class WebglCharAtlas implements IDisposable {
     // The canvas needs alpha because we use clearColor to convert the background color to alpha.
     // It might also contain some characters with transparent backgrounds if allowTransparency is
     // set.
-    this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', {alpha: true}));
+    this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', { alpha: true }));
 
     this._tmpCanvas = document.createElement('canvas');
-    this._tmpCanvas.width = this._config.scaledCharWidth * 2 + TMP_CANVAS_GLYPH_PADDING * 2;
-    this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2;
-    this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency}));
+    this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2;
+    this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2;
+    this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
   }
 
   public dispose(): void {
@@ -317,6 +318,13 @@ export class WebglCharAtlas implements IDisposable {
 
     this.hasCanvasChanged = true;
 
+    // Allow 1 cell width per character, with a minimum of 2 (CJK), plus some padding. This is used
+    // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure
+    // giant ligatures (eg. =====>) don't impact overall performance.
+    const allowedWidth = this._config.scaledCharWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2;
+    if (this._tmpCanvas.width < allowedWidth) {
+      this._tmpCanvas.width = allowedWidth;
+    }
     this._tmpCtx.save();
 
     this._workAttributeData.fg = fg;
@@ -331,6 +339,8 @@ export class WebglCharAtlas implements IDisposable {
     const inverse = !!this._workAttributeData.isInverse();
     const dim = !!this._workAttributeData.isDim();
     const italic = !!this._workAttributeData.isItalic();
+    const underline = !!this._workAttributeData.isUnderline();
+    const strikethrough = !!this._workAttributeData.isStrikethrough();
     let fgColor = this._workAttributeData.getFgColor();
     let fgColorMode = this._workAttributeData.getFgColorMode();
     let bgColor = this._workAttributeData.getBgColor();
@@ -358,7 +368,7 @@ export class WebglCharAtlas implements IDisposable {
     const fontStyle = italic ? 'italic' : '';
     this._tmpCtx.font =
       `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
-    this._tmpCtx.textBaseline = 'middle';
+    this._tmpCtx.textBaseline = 'ideographic';
 
     this._tmpCtx.fillStyle = this._getForegroundCss(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, inverse, bold);
 
@@ -367,8 +377,66 @@ export class WebglCharAtlas implements IDisposable {
       this._tmpCtx.globalAlpha = DIM_OPACITY;
     }
 
+    // Check if the char is a powerline glyph, these will be restricted to a single cell glyph, no
+    // padding on either side that are allowed for other glyphs since they are designed to be pixel
+    // perfect but may render with "bad" anti-aliasing
+    let isPowerlineGlyph = false;
+    if (chars.length === 1) {
+      const code = chars.charCodeAt(0);
+      if (code >= 0xE0A0 && code <= 0xE0D6) {
+        isPowerlineGlyph = true;
+      }
+    }
+
+    // For powerline glyphs left/top padding is excluded (https://github.com/microsoft/vscode/issues/120129)
+    const padding = isPowerlineGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING;
+
+    // Draw custom characters if applicable
+    let drawSuccess = false;
+    if (this._config.customGlyphs !== false) {
+      drawSuccess = tryDrawCustomChar(this._tmpCtx, chars, padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight);
+    }
+
     // Draw the character
-    this._tmpCtx.fillText(chars, TMP_CANVAS_GLYPH_PADDING, TMP_CANVAS_GLYPH_PADDING + this._config.scaledCharHeight / 2);
+    if (!drawSuccess) {
+      this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
+    }
+
+    // If this charcater is underscore and beyond the cell bounds, shift it up until it is visible,
+    // try for a maximum of 5 pixels.
+    if (chars === '_' && !this._config.allowTransparency) {
+      let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor);
+      if (isBeyondCellBounds) {
+        for (let offset = 1; offset <= 5; offset++) {
+          this._tmpCtx.clearRect(0, 0, this._tmpCanvas.width, this._tmpCanvas.height);
+          this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight - offset);
+          isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor);
+          if (!isBeyondCellBounds) {
+            break;
+          }
+        }
+      }
+    }
+
+    // Draw underline and strikethrough
+    if (underline || strikethrough) {
+      const lineWidth = Math.max(1, Math.floor(this._config.fontSize / 10));
+      const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position
+      this._tmpCtx.lineWidth = lineWidth;
+      this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle;
+      this._tmpCtx.beginPath();
+      if (underline) {
+        this._tmpCtx.moveTo(padding, padding + this._config.scaledCharHeight - yOffset);
+        this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + this._config.scaledCharHeight - yOffset);
+      }
+      if (strikethrough) {
+        this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);
+        this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);
+      }
+      this._tmpCtx.stroke();
+      this._tmpCtx.closePath();
+    }
+
     this._tmpCtx.restore();
 
     // clear the background from the character to avoid issues with drawing over the previous
@@ -391,7 +459,7 @@ export class WebglCharAtlas implements IDisposable {
       return NULL_RASTERIZED_GLYPH;
     }
 
-    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox);
+    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, isPowerlineGlyph, drawSuccess);
     const clippedImageData = this._clipImageData(imageData, this._workBoundingBox);
 
     // Check if there is enough room in the current row and go to next if needed
@@ -424,11 +492,13 @@ export class WebglCharAtlas implements IDisposable {
    * @param imageData The image data to read.
    * @param boundingBox An IBoundingBox to put the clipped bounding box values.
    */
-  private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox): IRasterizedGlyph {
+  private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean, customGlyph: boolean): IRasterizedGlyph {
     boundingBox.top = 0;
+    const height = restrictedGlyph ? this._config.scaledCharHeight : this._tmpCanvas.height;
+    const width = restrictedGlyph ? this._config.scaledCharWidth : allowedWidth;
     let found = false;
-    for (let y = 0; y < this._tmpCanvas.height; y++) {
-      for (let x = 0; x < this._tmpCanvas.width; x++) {
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
           boundingBox.top = y;
@@ -442,8 +512,8 @@ export class WebglCharAtlas implements IDisposable {
     }
     boundingBox.left = 0;
     found = false;
-    for (let x = 0; x < this._tmpCanvas.width; x++) {
-      for (let y = 0; y < this._tmpCanvas.height; y++) {
+    for (let x = 0; x < width; x++) {
+      for (let y = 0; y < height; y++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
           boundingBox.left = x;
@@ -455,10 +525,10 @@ export class WebglCharAtlas implements IDisposable {
         break;
       }
     }
-    boundingBox.right = this._tmpCanvas.width;
+    boundingBox.right = width;
     found = false;
-    for (let x = this._tmpCanvas.width - 1; x >= 0; x--) {
-      for (let y = 0; y < this._tmpCanvas.height; y++) {
+    for (let x = width - 1; x >= 0; x--) {
+      for (let y = 0; y < height; y++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
           boundingBox.right = x;
@@ -470,10 +540,10 @@ export class WebglCharAtlas implements IDisposable {
         break;
       }
     }
-    boundingBox.bottom = this._tmpCanvas.height;
+    boundingBox.bottom = height;
     found = false;
-    for (let y = this._tmpCanvas.height - 1; y >= 0; y--) {
-      for (let x = 0; x < this._tmpCanvas.width; x++) {
+    for (let y = height - 1; y >= 0; y--) {
+      for (let x = 0; x < width; x++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
           boundingBox.bottom = y;
@@ -497,8 +567,8 @@ export class WebglCharAtlas implements IDisposable {
         y: (boundingBox.bottom - boundingBox.top + 1) / TEXTURE_HEIGHT
       },
       offset: {
-        x: -boundingBox.left + TMP_CANVAS_GLYPH_PADDING,
-        y: -boundingBox.top + TMP_CANVAS_GLYPH_PADDING
+        x: -boundingBox.left + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + (customGlyph ? Math.floor(this._config.letterSpacing / 2) : 0),
+        y: -boundingBox.top + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + (customGlyph ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.scaledCellHeight - this._config.scaledCharHeight) / 2) : 0)
       }
     };
   }

addons/xterm-addon-webgl/src/renderLayer/BaseRenderLayer.ts

@@ -46,7 +46,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   }
 
   private _initCanvas(): void {
-    this._ctx = throwIfFalsy(this._canvas.getContext('2d', {alpha: this._alpha}));
+    this._ctx = throwIfFalsy(this._canvas.getContext('2d', { alpha: this._alpha }));
     // Draw the background if this is an opaque layer
     if (!this._alpha) {
       this._clearAll();
@@ -92,7 +92,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCharWidth, this._scaledCharHeight);
+    this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCellWidth, this._scaledCellHeight, this._scaledCharWidth, this._scaledCharHeight);
     this._charAtlas.warmUp();
   }
 
@@ -224,12 +224,12 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected _fillCharTrueColor(terminal: Terminal, cell: CellData, x: number, y: number): void {
     this._ctx.font = this._getFont(terminal, false, false);
-    this._ctx.textBaseline = 'middle';
+    this._ctx.textBaseline = 'ideographic';
     this._clipRow(terminal, y);
     this._ctx.fillText(
       cell.getChars(),
       x * this._scaledCellWidth + this._scaledCharLeft,
-      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
+      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
   }
 
   /**

addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts

@@ -7,7 +7,7 @@ import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, ITerminal } from 'browser/Types';
 import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { IEventEmitter } from 'common/EventEmitter';
 
@@ -34,6 +34,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
     container: HTMLElement,
     zIndex: number,
     colors: IColorSet,
+    private readonly _terminal: ITerminal,
     private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRedrawEvent>
   ) {
     super(container, 'cursor', zIndex, true, colors);
@@ -120,7 +121,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _render(terminal: Terminal, triggeredByAnimationFrame: boolean): void {
     // Don't draw the cursor if it's hidden
     // TODO: Need to expose API for this
-    if (!(terminal as any)._core._coreService.isCursorInitialized || (terminal as any)._core._coreService.isCursorHidden) {
+    if (!this._terminal.coreService.isCursorInitialized || this._terminal.coreService.isCursorHidden) {
       this._clearCursor();
       return;
     }
@@ -193,7 +194,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
   private _clearCursor(): void {
     if (this._state) {
-      this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      // Avoid potential rounding errors when device pixel ratio is less than 1
+      if (window.devicePixelRatio < 1) {
+        this._clearAll();
+      } else {
+        this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      }
       this._state = {
         x: 0,
         y: 0,

addons/xterm-addon-webgl/test/WebglRenderer.api.ts

@@ -3,13 +3,13 @@
  * @license MIT
  */
 
-import { ITerminalOptions } from '../../../src/common/Types';
-import { ITheme } from 'xterm';
 import { assert } from 'chai';
-import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
 import { Browser, Page } from 'playwright';
+import { ITheme } from 'xterm';
+import { getBrowserType, launchBrowser, openTerminal, pollFor, writeSync } from '../../../out-test/api/TestUtils';
+import { ITerminalOptions } from '../../../src/common/Types';
 
-const APP = 'http://127.0.0.1:3000/test';
+const APP = 'http://127.0.0.1:3001/test';
 
 let browser: Browser;
 let page: Page;
@@ -18,7 +18,7 @@ const height = 600;
 
 describe('WebGL Renderer Integration Tests', async () => {
   const browserType = getBrowserType();
-  const isHeadless = process.argv.indexOf('--headless') !== -1;
+  const isHeadless = process.argv.includes('--headless');
   // Firefox works only in non-headless mode https://github.com/microsoft/playwright/issues/1032
   const areTestsEnabled = browserType.name() === 'chromium' || (browserType.name() === 'firefox' && !isHeadless);
   const itWebgl = areTestsEnabled ? it : it.skip;
@@ -890,11 +890,22 @@ async function getCellColor(col: number, row: number): Promise<number[]> {
   return await page.evaluate(`Array.from(window.result)`);
 }
 
+async function getCellPixels(col: number, row: number): Promise<number[]> {
+  await page.evaluate(`
+    window.gl = window.term._core._renderService._renderer._gl;
+    window.result = new Uint8Array(window.d.scaledCellWidth * window.d.scaledCellHeight * 4);
+    window.d = window.term._core._renderService.dimensions;
+    window.gl.readPixels(
+      Math.floor(${col - 1} * window.d.scaledCellWidth),
+      Math.floor(window.gl.drawingBufferHeight - ${row} * window.d.scaledCellHeight),
+      window.d.scaledCellWidth, window.d.scaledCellHeight, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result
+    );
+  `);
+  return await page.evaluate(`Array.from(window.result)`);
+}
+
 async function setupBrowser(options: ITerminalOptions = { rendererType: 'dom' }): Promise<void> {
-  const browserType = getBrowserType();
-  browser = await browserType.launch({
-    headless: process.argv.indexOf('--headless') !== -1
-  });
+  browser = await launchBrowser();
   page = await (await browser.newContext()).newPage();
   await page.setViewportSize({ width, height });
   await page.goto(APP);

addons/xterm-addon-webgl/typings/xterm-addon-webgl.d.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { Terminal, ITerminalAddon } from 'xterm';
+import { Terminal, ITerminalAddon, IEvent } from 'xterm';
 
 declare module 'xterm-addon-webgl' {
   /**
@@ -29,5 +29,10 @@ declare module 'xterm-addon-webgl' {
      * Clears the terminal's texture atlas and triggers a redraw.
      */
     public clearTextureAtlas(): void;
+
+    /**
+     * Fired when the WebglRenderer loses context
+     */
+    public get onContextLoss(): IEvent<void>;
   }
 }

azure-pipelines.yml

@@ -10,7 +10,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -43,7 +43,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: CacheBeta@1
     inputs:
@@ -63,7 +63,7 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: CacheBeta@1
     inputs:
@@ -92,7 +92,7 @@ jobs:
     displayName: Install required packages
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -100,10 +100,6 @@ jobs:
     displayName: 'Install Yarn'
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
-  - script: |
-      yarn start &
-      sleep 10
-    displayName: 'Start test server'
   - script: yarn test-api-chromium --headless --forbid-only
     displayName: 'Integration tests (Chromium)'
   - script: xvfb-run --auto-servernum -- bash -c "yarn test-api-firefox --headless --forbid-only"
@@ -115,14 +111,10 @@ jobs:
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
-  - script: |
-      yarn start &
-      sleep 10
-    displayName: 'Start test server'
   - script: yarn test-api-chromium --headless --forbid-only
     displayName: 'Integration tests (Chromium)'
   - script: yarn test-api-firefox --headless --forbid-only
@@ -130,6 +122,21 @@ jobs:
   - script: yarn test-api-webkit --headless --forbid-only
     displayName: 'Integration tests (Webkit)'
 
+- job: Windows_IntegrationTests
+  pool:
+    vmImage: 'vs2017-win2016'
+  steps:
+  - task: NodeTool@0
+    inputs:
+      versionSpec: '14.x'
+    displayName: 'Install Node.js'
+  - script: yarn --frozen-lockfile
+    displayName: 'Install dependencies and build'
+  - script: yarn test-api-chromium --headless --forbid-only
+    displayName: 'Integration tests (Chromium)'
+  - script: yarn test-api-firefox --headless --forbid-only
+    displayName: 'Integration tests (Firefox)'
+
 - job: Release
   dependsOn:
   - Linux
@@ -137,13 +144,14 @@ jobs:
   - Windows
   - Linux_IntegrationTests
   - macOS_IntegrationTests
+  - Windows_IntegrationTests
   condition: and(succeeded(), or(eq(variables['Build.SourceBranch'], 'refs/heads/master'), eq(variables['FORCE_RELEASE'], 'true')))
   pool:
     vmImage: 'ubuntu-16.04'
   steps:
   - task: NodeTool@0
     inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
     displayName: 'Install Node.js'
   - task: YarnInstaller@3
     inputs:
@@ -156,5 +164,9 @@ jobs:
     displayName: Cache node modules
   - script: yarn --frozen-lockfile
     displayName: 'Install dependencies and build'
+  - script: |
+      yarn package-headless
+      node ./bin/package_headless.js
+    displayName: 'Package xterm-headless'
   - script: NPM_AUTH_TOKEN="$(NPM_AUTH_TOKEN)" node ./bin/publish.js
     displayName: 'Package and publish to npm'

bin/package_headless.js

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const { exec } = require('child_process');
+const fs = require('fs');
+const { join } = require('path');
+
+const repoRoot = join(__dirname, '..');
+const headlessRoot = join(repoRoot, 'headless');
+
+console.log('> headless/package.json');
+const xtermPackageJson = require('../package.json');
+const xtermHeadlessPackageJson = {
+  ...xtermPackageJson,
+  name: 'xterm-headless',
+  description: 'A headless terminal component that runs in Node.js',
+  main: 'lib-headless/xterm-headless.js',
+  types: 'typings/xterm-headless.d.ts',
+};
+delete xtermHeadlessPackageJson['scripts'];
+delete xtermHeadlessPackageJson['devDependencies'];
+delete xtermHeadlessPackageJson['style'];
+fs.writeFileSync(join(headlessRoot, 'package.json'), JSON.stringify(xtermHeadlessPackageJson, null, 1));
+console.log(fs.readFileSync(join(headlessRoot, 'package.json')).toString());
+
+console.log('> headless/typings/');
+mkdirF(join(headlessRoot, 'typings'));
+fs.copyFileSync(
+  join(repoRoot, 'typings/xterm-headless.d.ts'),
+  join(headlessRoot, 'typings/xterm-headless.d.ts')
+);
+
+console.log('> headless/logo-full.png');
+fs.copyFileSync(
+  join(repoRoot, 'logo-full.png'),
+  join(headlessRoot, 'logo-full.png')
+);
+
+function mkdirF(p) {
+  if (!fs.existsSync(p)) {
+    fs.mkdirSync(p);
+  }
+}
+
+console.log('> Publish dry run');
+exec('npm publish --dry-run', { cwd: headlessRoot }, (error, stdout, stderr) => {
+  if (error) {
+    console.log(`error: ${error.message}`);
+    return;
+  }
+  if (stderr) {
+      console.error(`stderr:\n${stderr}`);
+  }
+  console.log(`stdout:\n${stdout}`);
+});

bin/publish.js

@@ -22,6 +22,7 @@ const changedFiles = getChangedFilesInCommit('HEAD');
 let isStableRelease = false;
 if (changedFiles.some(e => e.search(/^addons\//) === -1)) {
   isStableRelease = checkAndPublishPackage(path.resolve(__dirname, '..'));
+  checkAndPublishPackage(path.resolve(__dirname, '../headless'));
 }
 
 // Publish addons if any files were changed inside of the addon

bin/test_api.js

@@ -34,19 +34,37 @@ if (process.argv.length > 2) {
 
 
 env.DEBUG = flagArgs.indexOf('--debug') >= 0 ? 'debug' : '';
+env.PORT = 3001;
 
-const run = cp.spawnSync(
-  npmBinScript('mocha'),
-  [...testFiles, ...flagArgs],
-  {
-    cwd: path.resolve(__dirname, '..'),
-    env,
-    stdio: 'inherit'
+const server = cp.spawn('node', ['demo/start'], {
+  cwd: path.resolve(__dirname, '..'),
+  env,
+  stdio: 'pipe'
+})
+
+server.stdout.on('data', (data) => {
+  // await for the server to fully start
+  if (data.indexOf("successfully") !== -1) {
+    const run = cp.spawnSync(
+      npmBinScript('mocha'),
+      [...testFiles, ...flagArgs], {
+        cwd: path.resolve(__dirname, '..'),
+        env,
+        stdio: 'inherit'
+      }
+    );
+
+    function npmBinScript(script) {
+      return path.resolve(__dirname, `../node_modules/.bin/` + (process.platform === 'win32' ?
+        `${script}.cmd` : script));
+    }
+
+    server.kill();
+
+    process.exit(run.status);
   }
-);
+});
 
-function npmBinScript(script) {
-  return path.resolve(__dirname, `../node_modules/.bin/` + (process.platform === 'win32' ? `${script}.cmd` : script));
-}
-
-process.exit(run.status);
+server.stderr.on('data', (data) => {
+  console.error(data.toString());
+});

css/xterm.css

@@ -36,7 +36,6 @@
  */
 
 .xterm {
-    font-feature-settings: "liga" 0;
     position: relative;
     user-select: none;
     -ms-user-select: none;
@@ -169,3 +168,7 @@
 .xterm-underline {
     text-decoration: underline;
 }
+
+.xterm-strikethrough {
+    text-decoration: line-through;
+}

demo/client.ts

@@ -16,6 +16,7 @@ import { SerializeAddon } from '../addons/xterm-addon-serialize/out/SerializeAdd
 import { WebLinksAddon } from '../addons/xterm-addon-web-links/out/WebLinksAddon';
 import { WebglAddon } from '../addons/xterm-addon-webgl/out/WebglAddon';
 import { Unicode11Addon } from '../addons/xterm-addon-unicode11/out/Unicode11Addon';
+import { LigaturesAddon } from '../addons/xterm-addon-ligatures/out/LigaturesAddon';
 
 // Use webpacked version (yarn package)
 // import { Terminal } from '../lib/xterm';
@@ -26,6 +27,7 @@ import { Unicode11Addon } from '../addons/xterm-addon-unicode11/out/Unicode11Add
 // import { WebLinksAddon } from 'xterm-addon-web-links';
 // import { WebglAddon } from 'xterm-addon-webgl';
 // import { Unicode11Addon } from 'xterm-addon-unicode11';
+// import { LigaturesAddon } from 'xterm-addon-ligatures';
 
 // Pulling in the module's types relies on the <reference> above, it's looks a
 // little weird here as we're importing "this" module
@@ -41,6 +43,7 @@ export interface IWindowWithTerminal extends Window {
   WebLinksAddon?: typeof WebLinksAddon;
   WebglAddon?: typeof WebglAddon;
   Unicode11Addon?: typeof Unicode11Addon;
+  LigaturesAddon?: typeof LigaturesAddon;
 }
 declare let window: IWindowWithTerminal;
 
@@ -50,7 +53,7 @@ let socketURL;
 let socket;
 let pid;
 
-type AddonType = 'attach' | 'fit' | 'search' | 'serialize' | 'unicode11' | 'web-links' | 'webgl';
+type AddonType = 'attach' | 'fit' | 'search' | 'serialize' | 'unicode11' | 'web-links' | 'webgl' | 'ligatures';
 
 interface IDemoAddon<T extends AddonType> {
   name: T;
@@ -62,8 +65,9 @@ interface IDemoAddon<T extends AddonType> {
     T extends 'serialize' ? typeof SerializeAddon :
     T extends 'web-links' ? typeof WebLinksAddon :
     T extends 'unicode11' ? typeof Unicode11Addon :
+    T extends 'ligatures' ? typeof LigaturesAddon :
     typeof WebglAddon;
-  instance?:
+    instance?:
     T extends 'attach' ? AttachAddon :
     T extends 'fit' ? FitAddon :
     T extends 'search' ? SearchAddon :
@@ -71,6 +75,7 @@ interface IDemoAddon<T extends AddonType> {
     T extends 'web-links' ? WebLinksAddon :
     T extends 'webgl' ? WebglAddon :
     T extends 'unicode11' ? typeof Unicode11Addon :
+    T extends 'ligatures' ? typeof LigaturesAddon :
     never;
 }
 
@@ -81,7 +86,8 @@ const addons: { [T in AddonType]: IDemoAddon<T>} = {
   serialize: { name: 'serialize', ctor: SerializeAddon, canChange: true },
   'web-links': { name: 'web-links', ctor: WebLinksAddon, canChange: true },
   webgl: { name: 'webgl', ctor: WebglAddon, canChange: true },
-  unicode11: { name: 'unicode11', ctor: Unicode11Addon, canChange: true }
+  unicode11: { name: 'unicode11', ctor: Unicode11Addon, canChange: true },
+  ligatures: { name: 'ligatures', ctor: LigaturesAddon, canChange: true }
 };
 
 const terminalContainer = document.getElementById('terminal-container');
@@ -117,6 +123,7 @@ const disposeRecreateButtonHandler = () => {
     addons.search.instance = undefined;
     addons.serialize.instance = undefined;
     addons.unicode11.instance = undefined;
+    addons.ligatures.instance = undefined;
     addons['web-links'].instance = undefined;
     addons.webgl.instance = undefined;
     document.getElementById('dispose').innerHTML = 'Recreate Terminal';
@@ -133,12 +140,15 @@ if (document.location.pathname === '/test') {
   window.SearchAddon = SearchAddon;
   window.SerializeAddon = SerializeAddon;
   window.Unicode11Addon = Unicode11Addon;
+  window.LigaturesAddon = LigaturesAddon;
   window.WebLinksAddon = WebLinksAddon;
   window.WebglAddon = WebglAddon;
 } else {
   createTerminal();
   document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler);
   document.getElementById('serialize').addEventListener('click', serializeButtonHandler);
+  document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler);
+  document.getElementById('load-test').addEventListener('click', loadTest);
 }
 
 function createTerminal(): void {
@@ -149,7 +159,8 @@ function createTerminal(): void {
 
   const isWindows = ['Windows', 'Win16', 'Win32', 'WinCE'].indexOf(navigator.platform) >= 0;
   term = new Terminal({
-    windowsMode: isWindows
+    windowsMode: isWindows,
+    fontFamily: 'Fira Code, courier-new, courier, monospace'
   } as ITerminalOptions);
 
   // Load addons
@@ -339,6 +350,9 @@ function initOptions(term: TerminalType): void {
       } else if (o === 'lineHeight' || o === 'scrollSensitivity') {
         term.setOption(o, parseFloat(input.value));
         updateTerminalSize();
+      } else if(o === 'scrollback') {
+        term.setOption(o, parseInt(input.value));
+        setTimeout(() => updateTerminalSize(), 5);
       } else {
         term.setOption(o, parseInt(input.value));
       }
@@ -363,6 +377,9 @@ function initAddons(term: TerminalType): void {
     if (!addon.canChange) {
       checkbox.disabled = true;
     }
+    if(name === 'unicode11' && checkbox.checked) {
+      term.unicode.activeVersion = '11';
+    }
     addDomListener(checkbox, 'change', () => {
       if (checkbox.checked) {
         addon.instance = new addon.ctor();
@@ -371,10 +388,14 @@ function initAddons(term: TerminalType): void {
           setTimeout(() => {
             document.body.appendChild((addon.instance as WebglAddon).textureAtlas);
           }, 0);
+        } else if (name === 'unicode11') {
+          term.unicode.activeVersion = '11';
         }
       } else {
         if (name === 'webgl') {
           document.body.removeChild((addon.instance as WebglAddon).textureAtlas);
+        } else if (name === 'unicode11') {
+          term.unicode.activeVersion = '6';
         }
         addon.instance!.dispose();
         addon.instance = undefined;
@@ -422,3 +443,82 @@ function serializeButtonHandler(): void {
     term.write(output);
   }
 }
+
+
+function writeCustomGlyphHandler() {
+  term.write('\n\r');
+  term.write('\n\r');
+  term.write('Box styles:       ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐\n\r');
+  term.write('┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤\n\r');
+  term.write('│ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘\n\r');
+  term.write('├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐\n\r');
+  term.write('│ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤\n\r');
+  term.write('└─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘\n\r');
+  term.write('\n\r');
+  term.write('Other:\n\r');
+  term.write('╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈\n\r');
+  term.write('│ │  ╳  ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉\n\r');
+  term.write('╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋\n\r');
+  term.write('\n\r');
+  term.write('All box drawing characters:\n\r');
+  term.write('─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏\n\r');
+  term.write('┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟\n\r');
+  term.write('┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯\n\r');
+  term.write('┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿\n\r');
+  term.write('╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏\n\r');
+  term.write('═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟\n\r');
+  term.write('╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯\n\r');
+  term.write('╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿\n\r');
+  term.write('Box drawing alignment tests:\x1b[31m                                          █\n\r');
+  term.write('                                                                      ▉\n\r');
+  term.write('  ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳\n\r');
+  term.write('  ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳\n\r');
+  term.write('  ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳\n\r');
+  term.write('  ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳\n\r');
+  term.write('  ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎\n\r');
+  term.write('  ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏\n\r');
+  term.write('  ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█\n\r');
+  term.write('Box drawing alignment tests:\x1b[32m                                          █\n\r');
+  term.write('                                                                      ▉\n\r');
+  term.write('  ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳\n\r');
+  term.write('  ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳\n\r');
+  term.write('  ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳\n\r');
+  term.write('  ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳\n\r');
+  term.write('  ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎\n\r');
+  term.write('  ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏\n\r');
+  term.write('  ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█\n\r');
+  window.scrollTo(0, 0);
+}
+
+function loadTest() {
+  const isWebglEnabled = !!addons.webgl.instance;
+  const testData = [];
+  let byteCount = 0;
+  for (let i = 0; i < 50; i++) {
+    const count = 1 + Math.floor(Math.random() * 79);
+    byteCount += count + 2;
+    const data = new Uint8Array(count + 2);
+    data[0] = 0x0A; // \n
+    for (let i = 1; i < count + 1; i++) {
+      data[i] = 0x61 + Math.floor(Math.random() * (0x7A - 0x61));
+    }
+    // End each line with \r so the cursor remains constant, this is what ls/tree do and improves
+    // performance significantly due to the cursor DOM element not needing to change
+    data[data.length - 1] = 0x0D; // \r
+    testData.push(data);
+  }
+  const start = performance.now();
+  for (let i = 0; i < 1024; i++) {
+    for (const d of testData) {
+      term.write(d);
+    }
+  }
+  // Wait for all data to be parsed before evaluating time
+  term.write('', () => {
+    const time = Math.round(performance.now() - start);
+    const mbs = ((byteCount / 1024) * (1 / (time / 1000))).toFixed(2);
+    term.write(`\n\r\nWrote ${byteCount}kB in ${time}ms (${mbs}MB/s) using the (${isWebglEnabled ? 'webgl' : 'canvas'} renderer)`);
+    // Send ^C to get a new prompt
+    term._core._onData.fire('\x03');
+  });
+}

demo/index.html

@@ -15,41 +15,91 @@
   </head>
   <body>
     <h1 style="color: #2D2E2C">xterm.js: A terminal for the <em style="color: #5DA5D5">web</em></h1>
-    <div id="terminal-container"></div>
-    <div>
-      <h3>Options</h3>
-      <p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
-      <div id="options-container"></div>
-    </div>
-    <div>
-      <h3>Addons</h3>
-      <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
-      <div id="addons-container"></div>
-      <h3>Addons Control</h3>
-      <h4>SearchAddon</h4>
-      <p>
-        <label>Find next <input id="find-next"/></label>
-        <label>Find previous <input id="find-previous"/></label>
-        <label>Use regex<input type="checkbox" id="regex"/></label>
-        <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
-        <label>Whole word<input type="checkbox" id="whole-word"/></label>
-      </p>
-      <h4>SerializeAddon</h4>
-      <p>
-        <button id="serialize">Serialize the content of terminal</button>
-        <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
-        <div><pre id="serialize-output"></pre></div>
-      </p>
-    </div>
-    <div>
-      <h3>Style</h3>
-      <div style="display: inline-block; margin-right: 16px;">
-        <label for="padding">Padding</label>
-        <input type="number" id="padding" />
+    <div id="container">
+      <div id="grid">
+        <div id="terminal-container"></div>
+      </div>
+      <div id="grid">
+        <div class="tab">
+          <button id= "optionsbutton" class="tabLinks" onclick="openSection(event, 'options')">Options</button>
+          <button id= "addonsbutton" class="tabLinks" onclick="openSection(event, 'addons')">Addons</button>
+          <button id= "stylebutton" class="tabLinks" onclick="openSection(event, 'style')">Style</button>
+          <button id= "testbutton" class="tabLinks" onclick="openSection(event, 'test')">Test</button>
+        </div>
+        <div id="options" class="tabContent">
+          <h3>Options</h3>
+          <p>These options can be set in the <code>Terminal</code> constructor or by using the <code>Terminal.setOption</code> function.</p>
+          <div id="options-container"></div>
+        </div>
+        <div id="addons" class="tabContent">
+          <h3>Addons</h3>
+          <p>Addons can be loaded and unloaded on a particular terminal to extend its functionality.</p>
+          <div id="addons-container"></div>
+          <h3>Addons Control</h3>
+          <h4>SearchAddon</h4>
+          <div style= "display:flex; flex-direction:column;">
+            <label>Find next <input id="find-next"/></label>
+            <label>Find previous <input id="find-previous"/></label>
+            <label><input type="checkbox" id="regex"/>Use regex</label>
+            <label><input type="checkbox" id="case-sensitive"/>Case sensitive</label>
+            <label><input type="checkbox" id="whole-word"/>Whole word</label>
+          </div>
+          <h4>SerializeAddon</h4>
+          <div>
+            <button id="serialize">Serialize the content of terminal</button>
+            <label><input type="checkbox" id="write-to-terminal">Write back to terminal</label>
+            <div><pre id="serialize-output"></pre></div>
+          </div>
+        </div>
+        <div id="style" class="tabContent">
+          <h3>Style</h3>
+          <div style="display: inline-block; margin-right: 16px;">
+            <label for="padding">Padding</label>
+            <input type="number" id="padding" />
+          </div>
+        </div>
+        <div id="test" class="tabContent">
+          <h3>Test</h3>
+          <div style="display: inline-block; margin-right: 16px;">
+            <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
+            <button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
+            <button id="load-test" title="Write several MB of data to simulate a lot of data coming from the process">Load test</button>
+          </div>
+        </div>
       </div>
     </div>
-    <hr/>
-    <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
-    <script src="dist/client-bundle.js" defer ></script>
-  </body>
+      <script src="dist/client-bundle.js" defer ></script>
+      <script>
+      var tab = localStorage.getItem("tab");
+
+        if(tab === null){
+            document.getElementById("options").style.display = "block";
+            document.getElementById("optionsbutton").classList.add("active");
+        }
+        else {
+          const tabContent = document.getElementsByClassName("tabContent");
+          let itr;
+          for (itr = 0; itr < tabContent.length; itr+=1) {
+            tabContent[itr].style.display = "none";
+          }
+          document.getElementById(""+tab+"").style.display = "block";
+          document.getElementById(""+tab+"button").classList.add("active");
+        }
+        function openSection(event, section) {
+          const tabContent = document.getElementsByClassName("tabContent");
+          let itr;
+          for (itr = 0; itr < tabContent.length; itr+=1) {
+            tabContent[itr].style.display = "none";
+          }
+          const tabLinks = document.getElementsByClassName("tabLinks");
+          for (itr = 0; itr < tabLinks.length; itr+=1) {
+            tabLinks[itr].className = tabLinks[itr].className.replace(" active", "");
+          }
+          document.getElementById(section).style.display = "block";
+          localStorage.setItem("tab", section);
+          event.currentTarget.className += " active";
+        }
+
+      </script>
+    </body>
 </html>

demo/start.js

@@ -49,6 +49,14 @@ const clientConfig = {
     alias: {
       common: path.resolve('./out/common'),
       browser: path.resolve('./out/browser')
+    },
+    fallback: {
+      // The ligature modules contains fallbacks for node environments, we never want to browserify them
+      stream: false,
+      util: false,
+      os: false,
+      path: false,
+      fs: false
     }
   },
   output: {

demo/style.css

@@ -41,3 +41,52 @@ pre {
     word-wrap: break-word;
     white-space: pre-wrap;
 }
+
+
+#container {
+    display: flex;
+    height: 75vh;
+}
+#grid {
+    flex: 1;
+    /* max-height: 80vh;
+    overflow-y: auto; */
+    width: 100%;
+}
+.tab {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+/* Style the buttons inside the tab */
+.tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    font-size: 17px;
+}
+
+/* Change background color of buttons on hover */
+.tab button:hover {
+    background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.tab button.active {
+    background-color: #ccc;
+  }
+
+/* Style the tab content */
+.tabContent {
+    display: none;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-top: none;
+    max-height: 100vh;
+    overflow-y: auto;
+}

headless/.gitignore

@@ -0,0 +1,4 @@
+lib-headless/
+typings/
+logo-full.png
+./package.json

headless/.npmignore

@@ -0,0 +1,6 @@
+# Include
+!typings/*.d.ts
+!lib-headless/
+
+# Exclude
+test/

headless/README.md

@@ -0,0 +1,31 @@
+# [![xterm.js logo](logo-full.png)](https://xtermjs.org)
+
+⚠ This package is experimental
+
+`xterm-headless` is a headless terminal that can be run in node.js. This is useful in combination with the frontend [`xterm`](https://www.npmjs.com/package/xterm) for example to keep track of a terminal's state on a remote server where the process is hosted.
+
+## Getting Started
+
+First, you need to install the module, we ship exclusively through npm, so you need that installed and then add xterm.js as a dependency by running:
+
+```sh
+npm install xterm-headless
+```
+
+Then import as you would a regular node package. The recommended way to load `xterm-headless` is with TypeScript and the ES6 module syntax:
+
+```javascript
+import { Terminal } from 'xterm-headless';
+```
+
+## API
+
+The full API for `xterm-headless` is contained within the [TypeScript declaration file](https://github.com/xtermjs/xterm.js/blob/master/typings/xterm-headless.d.ts), use the branch/tag picker in GitHub (`w`) to navigate to the correct version of the API.
+
+Note that some APIs are marked *experimental*, these are added to enable experimentation with new ideas without committing to support it like a normal [semver](https://semver.org/) API. Note that these APIs can change radically between versions, so be sure to read release notes if you plan on using experimental APIs.
+
+### Addons
+
+Addons in `xterm-headless` work the [same as in `xterm`](https://github.com/xtermjs/xterm.js/blob/master/README.md#addons) with the one caveat being that the addon needs to be packaged for node.js and not use any DOM APIs.
+
+Currently no official addons are packaged on npm.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "4.11.0",
+  "version": "4.14.0",
   "main": "lib/xterm.js",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",
@@ -10,6 +10,8 @@
   "scripts": {
     "prepackage": "npm run build",
     "package": "webpack",
+    "package-headless": "webpack --config ./webpack.config.headless.js",
+    "postpackage-headless": "node ./bin/package_headless.js",
     "start": "node demo/start",
     "start-debug": "node --inspect-brk demo/start",
     "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
@@ -21,6 +23,7 @@
     "test-api-webkit": "node ./bin/test_api.js --browser=webkit --timeout=20000",
     "test-unit": "node ./bin/test.js",
     "test-unit-coverage": "node ./bin/test.js --coverage",
+    "test-unit-dev": "cross-env NODE_PATH='./out' mocha",
     "build": "tsc -b ./tsconfig.all.json",
     "prepare": "npm run setup",
     "setup": "npm run build",
@@ -34,37 +37,39 @@
     "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
   },
   "devDependencies": {
-    "@types/chai": "^4.2.14",
+    "@types/chai": "^4.2.18",
     "@types/debug": "^4.1.5",
     "@types/deep-equal": "^1.0.1",
     "@types/glob": "^7.1.3",
-    "@types/jsdom": "^16.2.5",
-    "@types/mocha": "^8.0.3",
-    "@types/node": "^10.17.17",
+    "@types/jsdom": "^16.2.10",
+    "@types/mocha": "^8.2.2",
+    "@types/node": "^14.14.44",
     "@types/utf8": "^2.1.6",
-    "@types/webpack": "^4.41.24",
-    "@types/ws": "^7.2.9",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^3.10.1",
-    "chai": "^4.2.0",
-    "deep-equal": "^2.0.4",
-    "eslint": "^7.12.1",
+    "@types/webpack": "^5.28.0",
+    "@types/ws": "^7.4.4",
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/parser": "^4.23.0",
+    "chai": "^4.3.4",
+    "cross-env": "^7.0.3",
+    "deep-equal": "^2.0.5",
+    "eslint": "^7.26.0",
     "express": "^4.17.1",
     "express-ws": "^4.0.0",
-    "glob": "^7.0.5",
-    "jsdom": "^16.4.0",
-    "mocha": "^8.2.1",
-    "mustache": "^4.0.1",
-    "node-pty": "^0.9.0",
+    "glob": "^7.1.7",
+    "jsdom": "^16.5.3",
+    "mocha": "^8.4.0",
+    "mustache": "^4.2.0",
+    "node-pty": "^0.10.1",
     "nyc": "^15.1.0",
-    "playwright": "^1.5.2",
-    "source-map-loader": "^1.1.2",
-    "ts-loader": "^8.0.8",
-    "typescript": "4.0",
+    "playwright": "^1.11.0",
+    "source-map-loader": "^2.0.1",
+    "source-map-support": "^0.5.19",
+    "ts-loader": "^9.1.2",
+    "typescript": "^4.2.4",
     "utf8": "^3.0.0",
-    "webpack": "^5.4.0",
-    "webpack-cli": "^4.2.0",
-    "ws": "^7.3.1",
-    "xterm-benchmark": "^0.1.3"
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0",
+    "ws": "^7.4.5",
+    "xterm-benchmark": "^0.2.1"
   }
 }

src/browser/AccessibilityManager.ts

@@ -4,10 +4,10 @@
  */
 
 import * as Strings from 'browser/LocalizableStrings';
-import { ITerminal } from 'browser/Types';
+import { ITerminal, IRenderDebouncer } from 'browser/Types';
 import { IBuffer } from 'common/buffer/Types';
 import { isMac } from 'common/Platform';
-import { RenderDebouncer } from 'browser/RenderDebouncer';
+import { TimeBasedDebouncer } from 'browser/TimeBasedDebouncer';
 import { addDisposableDomListener } from 'browser/Lifecycle';
 import { Disposable } from 'common/Lifecycle';
 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
@@ -28,7 +28,7 @@ export class AccessibilityManager extends Disposable {
   private _liveRegion: HTMLElement;
   private _liveRegionLineCount: number = 0;
 
-  private _renderRowsDebouncer: RenderDebouncer;
+  private _renderRowsDebouncer: IRenderDebouncer;
   private _screenDprMonitor: ScreenDprMonitor;
 
   private _topBoundaryFocusListener: (e: FocusEvent) => void;
@@ -72,7 +72,7 @@ export class AccessibilityManager extends Disposable {
     this._refreshRowsDimensions();
     this._accessibilityTreeRoot.appendChild(this._rowContainer);
 
-    this._renderRowsDebouncer = new RenderDebouncer(this._renderRows.bind(this));
+    this._renderRowsDebouncer = new TimeBasedDebouncer(this._renderRows.bind(this));
     this._refreshRows();
 
     this._liveRegion = document.createElement('div');
@@ -112,7 +112,7 @@ export class AccessibilityManager extends Disposable {
   }
 
   private _onBoundaryFocus(e: FocusEvent, position: BoundaryPosition): void {
-    const boundaryElement = <HTMLElement>e.target;
+    const boundaryElement = e.target as HTMLElement;
     const beforeBoundaryElement = this._rowElements[position === BoundaryPosition.TOP ? 1 : this._rowElements.length - 2];
 
     // Don't scroll if the buffer top has reached the end in that direction

src/browser/ColorManager.test.ts

@@ -17,7 +17,7 @@ describe('ColorManager', () => {
     dom = new jsdom.JSDOM('');
     window = dom.window;
     document = window.document;
-    (<any>window).HTMLCanvasElement.prototype.getContext = () => ({
+    (window as any).HTMLCanvasElement.prototype.getContext = () => ({
       createLinearGradient(): any {
         return null;
       },
@@ -36,7 +36,7 @@ describe('ColorManager', () => {
       for (const key of Object.keys(cm.colors)) {
         if (key !== 'ansi' && key !== 'contrastCache') {
           // A #rrggbb or rgba(...)
-          assert.ok((<any>cm.colors)[key].css.length >= 7);
+          assert.ok((cm.colors as any)[key].css.length >= 7);
         }
       }
       assert.equal(cm.colors.ansi.length, 256);

src/browser/Linkifier.test.ts

@@ -174,7 +174,7 @@ describe('Linkifier', () => {
             assert.equal(mouseZoneManager.zones[0].y1, 1);
             assert.equal(mouseZoneManager.zones[0].y2, 1);
             // Fires done()
-            mouseZoneManager.zones[0].clickCallback(<any>{});
+            mouseZoneManager.zones[0].clickCallback({} as any);
           }
         });
         linkifier.linkifyRows();
@@ -210,7 +210,7 @@ describe('Linkifier', () => {
         let count = 0;
         linkifier.registerLinkMatcher(/test/, () => assert.fail(), {
           validationCallback: (url, cb) => {
-            count += 1;
+            count++;
             if (count === 2) {
               done();
             }

src/browser/Linkifier.ts

@@ -89,7 +89,9 @@ export class Linkifier implements ILinkifier {
     if (this._rowsTimeoutId) {
       clearTimeout(this._rowsTimeoutId);
     }
-    this._rowsTimeoutId = <number><any>setTimeout(() => this._linkifyRows(), Linkifier._timeBeforeLatency);
+
+    // Cannot use window.setTimeout since tests need to run in node
+    this._rowsTimeoutId = setTimeout(() => this._linkifyRows(), Linkifier._timeBeforeLatency) as any as number;
   }
 
   /**

src/browser/Linkifier2.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { ILinkifier2, ILinkProvider, IBufferCellPosition, ILink, ILinkifierEvent, ILinkDecorations } from 'browser/Types';
+import { ILinkifier2, ILinkProvider, IBufferCellPosition, ILink, ILinkifierEvent, ILinkDecorations, ILinkWithState } from 'browser/Types';
 import { IDisposable } from 'common/Types';
 import { IMouseService, IRenderService } from './services/Services';
 import { IBufferService } from 'common/services/Services';
@@ -11,21 +11,12 @@ import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { Disposable, getDisposeArrayDisposable, disposeArray } from 'common/Lifecycle';
 import { addDisposableDomListener } from 'browser/Lifecycle';
 
-interface ILinkState {
-  decorations: ILinkDecorations;
-  isHovered: boolean;
-}
-
-interface ILinkWithState {
-  link: ILink;
-  state?: ILinkState;
-}
-
 export class Linkifier2 extends Disposable implements ILinkifier2 {
   private _element: HTMLElement | undefined;
   private _mouseService: IMouseService | undefined;
   private _renderService: IRenderService | undefined;
   private _linkProviders: ILinkProvider[] = [];
+  public get currentLink(): ILinkWithState | undefined { return this._currentLink; }
   protected _currentLink: ILinkWithState | undefined;
   private _lastMouseEvent: MouseEvent | undefined;
   private _linkCacheDisposables: IDisposable[] = [];

src/browser/MouseZoneManager.ts

@@ -156,9 +156,7 @@ export class MouseZoneManager extends Disposable implements IMouseZoneManager {
   private _onTooltip(e: MouseEvent): void {
     this._tooltipTimeout = undefined;
     const zone = this._findZoneEventAt(e);
-    if (zone && zone.tooltipCallback) {
-      zone.tooltipCallback(e);
-    }
+    zone?.tooltipCallback(e);
   }
 
   private _onMouseDown(e: MouseEvent): void {

src/browser/RenderDebouncer.ts

@@ -3,12 +3,12 @@
  * @license MIT
  */
 
-import { IDisposable } from 'common/Types';
+import { IRenderDebouncer } from 'browser/Types';
 
 /**
  * Debounces calls to render terminal rows using animation frames.
  */
-export class RenderDebouncer implements IDisposable {
+export class RenderDebouncer implements IRenderDebouncer {
   private _rowStart: number | undefined;
   private _rowEnd: number | undefined;
   private _rowCount: number | undefined;

src/browser/Terminal.ts

@@ -21,8 +21,8 @@
  *   http://linux.die.net/man/7/urxvt
  */
 
-import { ICompositionHelper, ITerminal, IBrowser, CustomKeyEventHandler, ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport, ILinkifier2 } from 'browser/Types';
-import { IRenderer, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { ICompositionHelper, ITerminal, IBrowser, CustomKeyEventHandler, ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport, ILinkifier2, CharacterJoinerHandler } from 'browser/Types';
+import { IRenderer } from 'browser/renderer/Types';
 import { CompositionHelper } from 'browser/input/CompositionHelper';
 import { Viewport } from 'browser/Viewport';
 import { rightClickHandler, moveTextAreaUnderMouseCursor, handlePasteEvent, copyHandler, paste } from 'browser/Clipboard';
@@ -39,13 +39,13 @@ import { MouseZoneManager } from 'browser/MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
 import { ITheme, IMarker, IDisposable, ISelectionPosition, ILinkProvider } from 'xterm';
 import { DomRenderer } from 'browser/renderer/dom/DomRenderer';
-import { IKeyboardEvent, KeyboardResultType, CoreMouseEventType, CoreMouseButton, CoreMouseAction, ITerminalOptions, IAnsiColorChangeEvent } from 'common/Types';
+import { IKeyboardEvent, KeyboardResultType, CoreMouseEventType, CoreMouseButton, CoreMouseAction, ITerminalOptions, ScrollSource, IAnsiColorChangeEvent } from 'common/Types';
 import { evaluateKeyboardEvent } from 'common/input/Keyboard';
 import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { ColorManager } from 'browser/ColorManager';
 import { RenderService } from 'browser/services/RenderService';
-import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService } from 'browser/services/Services';
+import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService, ICharacterJoinerService } from 'browser/services/Services';
 import { CharSizeService } from 'browser/services/CharSizeService';
 import { IBuffer } from 'common/buffer/Types';
 import { MouseService } from 'browser/services/MouseService';
@@ -54,6 +54,7 @@ import { CoreBrowserService } from 'browser/services/CoreBrowserService';
 import { CoreTerminal } from 'common/CoreTerminal';
 import { ITerminalOptions as IInitializedTerminalOptions } from 'common/services/Services';
 import { rgba } from 'browser/Color';
+import { CharacterJoinerService } from 'browser/services/CharacterJoinerService';
 
 // Let it work inside Node.js for automated testing purposes.
 const document: Document = (typeof window !== 'undefined') ? window.document : null as any;
@@ -71,7 +72,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
   // private _visualBellTimer: number;
 
-  public browser: IBrowser = <any>Browser;
+  public browser: IBrowser = Browser as any;
 
   // TODO: We should remove options once components adopt optionsService
   public get options(): IInitializedTerminalOptions { return this.optionsService.options; }
@@ -82,6 +83,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _charSizeService: ICharSizeService | undefined;
   private _mouseService: IMouseService | undefined;
   private _renderService: IRenderService | undefined;
+  private _characterJoinerService: ICharacterJoinerService | undefined;
   private _selectionService: ISelectionService | undefined;
   private _soundService: ISoundService | undefined;
 
@@ -92,6 +94,20 @@ export class Terminal extends CoreTerminal implements ITerminal {
    */
   private _keyDownHandled: boolean = false;
 
+  /**
+   * Records whether the keypress event has already been handled and triggered a data event, if so
+   * the input event should not trigger a data event but should still print to the textarea so
+   * screen readers will announce it.
+   */
+  private _keyPressHandled: boolean = false;
+
+  /**
+   * Records whether there has been a keydown event for a dead key without a corresponding keydown
+   * event for the composed/alternative character. If we cancel the keydown event for the dead key,
+   * no events will be emitted for the final character.
+   */
+  private _unprocessedDeadKey: boolean = false;
+
   public linkifier: ILinkifier;
   public linkifier2: ILinkifier2;
   public viewport: IViewport | undefined;
@@ -111,6 +127,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
   public get onSelectionChange(): IEvent<void> { return this._onSelectionChange.event; }
   private _onTitleChange = new EventEmitter<string>();
   public get onTitleChange(): IEvent<string> { return this._onTitleChange.event; }
+  private _onBell = new EventEmitter<void>();
+  public get onBell(): IEvent<void> { return this._onBell.event; }
 
   private _onFocus = new EventEmitter<void>();
   public get onFocus(): IEvent<void> { return this._onFocus.event; }
@@ -147,7 +165,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(this._inputHandler.onRequestBell(() => this.bell()));
     this.register(this._inputHandler.onRequestRefreshRows((start, end) => this.refresh(start, end)));
     this.register(this._inputHandler.onRequestReset(() => this.reset()));
-    this.register(this._inputHandler.onRequestScroll((eraseAttr, isWrapped) => this.scroll(eraseAttr, isWrapped || undefined)));
     this.register(this._inputHandler.onRequestWindowsOptionsReport(type => this._reportWindowsOptions(type)));
     this.register(this._inputHandler.onAnsiColorChange((event) => this._changeAnsiColor(event)));
     this.register(forwardEvent(this._inputHandler.onCursorMove, this._onCursorMove));
@@ -162,11 +179,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _changeAnsiColor(event: IAnsiColorChangeEvent): void {
     if (!this._colorManager) { return; }
 
-    event.colors.forEach(ansiColor => {
+    for (const ansiColor of event.colors) {
       const color = rgba.toColor(ansiColor.red, ansiColor.green, ansiColor.blue);
 
       this._colorManager!.colors.ansi[ansiColor.colorIndex] = color;
-    });
+    }
 
     this._renderService?.setColors(this._colorManager!.colors);
     this.viewport?.onThemeChange(this._colorManager!.colors);
@@ -221,6 +238,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
         // The DOM renderer needs a row refresh to update the cursor styles
         this.refresh(this.buffer.y, this.buffer.y);
         break;
+      case 'customGlyphs':
       case 'drawBoldTextInBrightColors':
       case 'letterSpacing':
       case 'lineHeight':
@@ -264,8 +282,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
    * Binds the desired focus behavior on a given terminal object.
    */
   private _onTextAreaFocus(ev: KeyboardEvent): void {
-    if (this._coreService.decPrivateModes.sendFocus) {
-      this._coreService.triggerDataEvent(C0.ESC + '[I');
+    if (this.coreService.decPrivateModes.sendFocus) {
+      this.coreService.triggerDataEvent(C0.ESC + '[I');
     }
     this.updateCursorStyle(ev);
     this.element!.classList.add('focus');
@@ -289,27 +307,34 @@ export class Terminal extends CoreTerminal implements ITerminal {
     // screen readers reading it out.
     this.textarea!.value = '';
     this.refresh(this.buffer.y, this.buffer.y);
-    if (this._coreService.decPrivateModes.sendFocus) {
-      this._coreService.triggerDataEvent(C0.ESC + '[O');
+    if (this.coreService.decPrivateModes.sendFocus) {
+      this.coreService.triggerDataEvent(C0.ESC + '[O');
     }
     this.element!.classList.remove('focus');
     this._onBlur.fire();
   }
 
   private _syncTextArea(): void {
-    if (!this.textarea || !this.buffer.isCursorInViewport || this._compositionHelper!.isComposing) {
+    if (!this.textarea || !this.buffer.isCursorInViewport || this._compositionHelper!.isComposing || !this._renderService) {
       return;
     }
-
-    const cellHeight = Math.ceil(this._charSizeService!.height * this.optionsService.options.lineHeight);
-    const cursorTop = this._bufferService.buffer.y * cellHeight;
-    const cursorLeft = this._bufferService.buffer.x * this._charSizeService!.width;
+    const cursorY = this.buffer.ybase + this.buffer.y;
+    const bufferLine = this.buffer.lines.get(cursorY);
+    if (!bufferLine) {
+      return;
+    }
+    const cursorX = Math.min(this.buffer.x, this.cols - 1);
+    const cellHeight = this._renderService.dimensions.actualCellHeight;
+    const width = bufferLine.getWidth(cursorX);
+    const cellWidth = this._renderService.dimensions.actualCellWidth * width;
+    const cursorTop = this.buffer.y * this._renderService.dimensions.actualCellHeight;
+    const cursorLeft = cursorX * this._renderService.dimensions.actualCellWidth;
 
     // Sync the textarea to the exact position of the composition view so the IME knows where the
     // text is.
     this.textarea.style.left = cursorLeft + 'px';
     this.textarea.style.top = cursorTop + 'px';
-    this.textarea.style.width = this._charSizeService!.width + 'px';
+    this.textarea.style.width = cellWidth + 'px';
     this.textarea.style.height = cellHeight + 'px';
     this.textarea.style.lineHeight = cellHeight + 'px';
     this.textarea.style.zIndex = '-5';
@@ -330,7 +355,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       }
       copyHandler(event, this._selectionService!);
     }));
-    const pasteHandlerWrapper = (event: ClipboardEvent): void => handlePasteEvent(event, this.textarea!, this._coreService);
+    const pasteHandlerWrapper = (event: ClipboardEvent): void => handlePasteEvent(event, this.textarea!, this.coreService);
     this.register(addDisposableDomListener(this.textarea!, 'paste', pasteHandlerWrapper));
     this.register(addDisposableDomListener(this.element!, 'paste', pasteHandlerWrapper));
 
@@ -372,6 +397,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(addDisposableDomListener(this.textarea!, 'compositionstart', () => this._compositionHelper!.compositionstart()));
     this.register(addDisposableDomListener(this.textarea!, 'compositionupdate', (e: CompositionEvent) => this._compositionHelper!.compositionupdate(e)));
     this.register(addDisposableDomListener(this.textarea!, 'compositionend', () => this._compositionHelper!.compositionend()));
+    this.register(addDisposableDomListener(this.textarea!, 'input', (ev: InputEvent) => this._inputEvent(ev), true));
     this.register(this.onRender(() => this._compositionHelper!.updateCompositionElements()));
     this.register(this.onRender(e => this._queueLinkification(e.start, e.end)));
   }
@@ -398,7 +424,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.element.classList.add('terminal');
     this.element.classList.add('xterm');
     this.element.setAttribute('tabindex', '0');
-    this.element.setAttribute('role', 'document');
     parent.appendChild(this.element);
 
     // Performance: Use a document fragment to build the terminal
@@ -438,6 +463,20 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
     this._instantiationService.setService(ICharSizeService, this._charSizeService);
 
+    this._theme = this.options.theme || this._theme;
+    this._colorManager = new ColorManager(document, this.options.allowTransparency);
+    this.register(this.optionsService.onOptionChange(e => this._colorManager!.onOptionsChange(e)));
+    this._colorManager.setTheme(this._theme);
+
+    this._characterJoinerService = this._instantiationService.createInstance(CharacterJoinerService);
+    this._instantiationService.setService(ICharacterJoinerService, this._characterJoinerService);
+
+    const renderer = this._createRenderer();
+    this._renderService = this.register(this._instantiationService.createInstance(RenderService, renderer, this.rows, this.screenElement));
+    this._instantiationService.setService(IRenderService, this._renderService);
+    this.register(this._renderService.onRenderedBufferChange(e => this._onRender.fire(e)));
+    this.onResize(e => this._renderService!.resize(e.cols, e.rows));
+
     this._compositionView = document.createElement('div');
     this._compositionView.classList.add('composition-view');
     this._compositionHelper = this._instantiationService.createInstance(CompositionHelper, this.textarea, this._compositionView);
@@ -446,24 +485,13 @@ export class Terminal extends CoreTerminal implements ITerminal {
     // Performance: Add viewport and helper elements from the fragment
     this.element.appendChild(fragment);
 
-    this._theme = this.options.theme || this._theme;
-    this._colorManager = new ColorManager(document, this.options.allowTransparency);
-    this.register(this.optionsService.onOptionChange(e => this._colorManager!.onOptionsChange(e)));
-    this._colorManager.setTheme(this._theme);
-
-    const renderer = this._createRenderer();
-    this._renderService = this.register(this._instantiationService.createInstance(RenderService, renderer, this.rows, this.screenElement));
-    this._instantiationService.setService(IRenderService, this._renderService);
-    this.register(this._renderService.onRenderedBufferChange(e => this._onRender.fire(e)));
-    this.onResize(e => this._renderService!.resize(e.cols, e.rows));
-
     this._soundService = this._instantiationService.createInstance(SoundService);
     this._instantiationService.setService(ISoundService, this._soundService);
     this._mouseService = this._instantiationService.createInstance(MouseService);
     this._instantiationService.setService(IMouseService, this._mouseService);
 
     this.viewport = this._instantiationService.createInstance(Viewport,
-      (amount: number, suppressEvent: boolean) => this.scrollLines(amount, suppressEvent),
+      (amount: number) => this.scrollLines(amount, true, ScrollSource.VIEWPORT),
       this._viewportElement,
       this._viewportScrollArea
     );
@@ -482,7 +510,9 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this._selectionService = this.register(this._instantiationService.createInstance(SelectionService,
       this.element,
-      this.screenElement));
+      this.screenElement,
+      this.linkifier2
+    ));
     this._instantiationService.setService(ISelectionService, this._selectionService);
     this.register(this._selectionService.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent)));
     this.register(this._selectionService.onSelectionChange(() => this._onSelectionChange.fire()));
@@ -495,7 +525,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this.textarea!.focus();
       this.textarea!.select();
     }));
-    this.register(this.onScroll(() => {
+    this.register(this._onScroll.event(ev => {
       this.viewport!.syncScrollArea();
       this._selectionService!.refresh();
     }));
@@ -511,7 +541,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.onMouseDown(e)));
 
     // apply mouse event classes set by escape codes before terminal was attached
-    if (this._coreMouseService.areMouseEventsActive) {
+    if (this.coreMouseService.areMouseEventsActive) {
       this._selectionService.disable();
       this.element.classList.add('enable-mouse-events');
     } else {
@@ -586,7 +616,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
       let but: CoreMouseButton;
       let action: CoreMouseAction | undefined;
-      switch ((<any>ev).overrideType || ev.type) {
+      switch ((ev as any).overrideType || ev.type) {
         case 'mousemove':
           action = CoreMouseAction.MOVE;
           if (ev.buttons === undefined) {
@@ -629,7 +659,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
         return false;
       }
 
-      return self._coreMouseService.triggerMouseEvent({
+      return self.coreMouseService.triggerMouseEvent({
         col: pos.x - 33, // FIXME: why -33 here?
         row: pos.y - 33,
         button: but,
@@ -684,11 +714,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
         }
       }
     };
-    this.register(this._coreMouseService.onProtocolChange(events => {
+    this.register(this.coreMouseService.onProtocolChange(events => {
       // apply global changes on events
       if (events) {
         if (this.optionsService.options.logLevel === 'debug') {
-          this._logService.debug('Binding to mouse events:', this._coreMouseService.explainEvents(events));
+          this._logService.debug('Binding to mouse events:', this.coreMouseService.explainEvents(events));
         }
         this.element!.classList.add('enable-mouse-events');
         this._selectionService!.disable();
@@ -731,7 +761,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       }
     }));
     // force initial onProtocolChange so we dont miss early mouse requests
-    this._coreMouseService.activeProtocol = this._coreMouseService.activeProtocol;
+    this.coreMouseService.activeProtocol = this.coreMouseService.activeProtocol;
 
     /**
      * "Always on" event listeners.
@@ -743,7 +773,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       // Don't send the mouse button to the pty if mouse events are disabled or
       // if the selection manager is having selection forced (ie. a modifier is
       // held).
-      if (!this._coreMouseService.areMouseEventsActive || this._selectionService!.shouldForceSelection(ev)) {
+      if (!this.coreMouseService.areMouseEventsActive || this._selectionService!.shouldForceSelection(ev)) {
         return;
       }
 
@@ -776,12 +806,12 @@ export class Terminal extends CoreTerminal implements ITerminal {
           }
 
           // Construct and send sequences
-          const sequence = C0.ESC + (this._coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B');
+          const sequence = C0.ESC + (this.coreService.decPrivateModes.applicationCursorKeys ? 'O' : '[') + (ev.deltaY < 0 ? 'A' : 'B');
           let data = '';
           for (let i = 0; i < Math.abs(amount); i++) {
             data += sequence;
           }
-          this._coreService.triggerDataEvent(data, true);
+          this.coreService.triggerDataEvent(data, true);
         }
         return;
       }
@@ -797,13 +827,13 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }, { passive: false }));
 
     this.register(addDisposableDomListener(el, 'touchstart', (ev: TouchEvent) => {
-      if (this._coreMouseService.areMouseEventsActive) return;
+      if (this.coreMouseService.areMouseEventsActive) return;
       this.viewport!.onTouchStart(ev);
       return this.cancel(ev);
     }, { passive: true }));
 
     this.register(addDisposableDomListener(el, 'touchmove', (ev: TouchEvent) => {
-      if (this._coreMouseService.areMouseEventsActive) return;
+      if (this.coreMouseService.areMouseEventsActive) return;
       if (!this.viewport!.onTouchMove(ev)) {
         return this.cancel(ev);
       }
@@ -834,7 +864,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
    * Change the cursor style for different selection modes
    */
   public updateCursorStyle(ev: KeyboardEvent): void {
-    if (this._selectionService && this._selectionService.shouldColumnSelect(ev)) {
+    if (this._selectionService?.shouldColumnSelect(ev)) {
       this.element!.classList.add('column-select');
     } else {
       this.element!.classList.remove('column-select');
@@ -845,19 +875,19 @@ export class Terminal extends CoreTerminal implements ITerminal {
    * Display the cursor element
    */
   private _showCursor(): void {
-    if (!this._coreService.isCursorInitialized) {
-      this._coreService.isCursorInitialized = true;
+    if (!this.coreService.isCursorInitialized) {
+      this.coreService.isCursorInitialized = true;
       this.refresh(this.buffer.y, this.buffer.y);
     }
   }
 
-  public scrollLines(disp: number, suppressScrollEvent?: boolean): void {
-    super.scrollLines(disp, suppressScrollEvent);
+  public scrollLines(disp: number, suppressScrollEvent?: boolean, source = ScrollSource.TERMINAL): void {
+    super.scrollLines(disp, suppressScrollEvent, source);
     this.refresh(0, this.rows - 1);
   }
 
   public paste(data: string): void {
-    paste(data, this.textarea!, this._coreService);
+    paste(data, this.textarea!, this.coreService);
   }
 
   /**
@@ -904,13 +934,19 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
-    const joinerId = this._renderService!.registerCharacterJoiner(handler);
+    if (!this._characterJoinerService) {
+      throw new Error('Terminal must be opened first');
+    }
+    const joinerId = this._characterJoinerService.register(handler);
     this.refresh(0, this.rows - 1);
     return joinerId;
   }
 
   public deregisterCharacterJoiner(joinerId: number): void {
-    if (this._renderService!.deregisterCharacterJoiner(joinerId)) {
+    if (!this._characterJoinerService) {
+      throw new Error('Terminal must be opened first');
+    }
+    if (this._characterJoinerService.deregister(joinerId)) {
       this.refresh(0, this.rows - 1);
     }
   }
@@ -999,12 +1035,16 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     if (!this._compositionHelper!.keydown(event)) {
       if (this.buffer.ybase !== this.buffer.ydisp) {
-        this.scrollToBottom();
+        this._bufferService.scrollToBottom();
       }
       return false;
     }
 
-    const result = evaluateKeyboardEvent(event, this._coreService.decPrivateModes.applicationCursorKeys, this.browser.isMac, this.options.macOptionIsMeta);
+    if (event.key === 'Dead' || event.key === 'AltGraph') {
+      this._unprocessedDeadKey = true;
+    }
+
+    const result = evaluateKeyboardEvent(event, this.coreService.decPrivateModes.applicationCursorKeys, this.browser.isMac, this.options.macOptionIsMeta);
 
     this.updateCursorStyle(event);
 
@@ -1031,6 +1071,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
       return true;
     }
 
+    if (this._unprocessedDeadKey) {
+      this._unprocessedDeadKey = false;
+      return true;
+    }
+
     // If ctrl+c or enter is being sent, clear out the textarea. This is done so that screen readers
     // will announce deleted characters. This will not work 100% of the time but it should cover
     // most scenarios.
@@ -1040,7 +1085,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this._onKey.fire({ key: result.key, domEvent: event });
     this._showCursor();
-    this._coreService.triggerDataEvent(result.key, true);
+    this.coreService.triggerDataEvent(result.key, true);
 
     // Cancel events when not in screen reader mode so events don't get bubbled up and handled by
     // other listeners. When screen reader mode is enabled, this could cause issues if the event
@@ -1053,10 +1098,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._keyDownHandled = true;
   }
 
-  private _isThirdLevelShift(browser: IBrowser, ev: IKeyboardEvent): boolean {
+  private _isThirdLevelShift(browser: IBrowser, ev: KeyboardEvent): boolean {
     const thirdLevelKey =
       (browser.isMac && !this.options.macOptionIsMeta && ev.altKey && !ev.ctrlKey && !ev.metaKey) ||
-      (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey);
+      (browser.isWindows && ev.altKey && ev.ctrlKey && !ev.metaKey) ||
+      (browser.isWindows && ev.getModifierState('AltGraph'));
 
     if (ev.type === 'keypress') {
       return thirdLevelKey;
@@ -1076,6 +1122,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
 
     this.updateCursorStyle(ev);
+    this._keyPressHandled = false;
   }
 
   /**
@@ -1087,6 +1134,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
   protected _keyPress(ev: KeyboardEvent): boolean {
     let key;
 
+    this._keyPressHandled = false;
+
     if (this._keyDownHandled) {
       return false;
     }
@@ -1117,20 +1166,46 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this._onKey.fire({ key, domEvent: ev });
     this._showCursor();
-    this._coreService.triggerDataEvent(key, true);
+    this.coreService.triggerDataEvent(key, true);
+
+    this._keyPressHandled = true;
 
     return true;
   }
 
+  /**
+   * Handle an input event.
+   * Key Resources:
+   *   - https://developer.mozilla.org/en-US/docs/Web/API/InputEvent
+   * @param ev The input event to be handled.
+   */
+  protected _inputEvent(ev: InputEvent): boolean {
+    if (ev.data && ev.inputType === 'insertText') {
+      if (this._keyPressHandled) {
+        return false;
+      }
+
+      const text = ev.data;
+      this.coreService.triggerDataEvent(text, true);
+
+      this.cancel(ev);
+      return true;
+    }
+
+    return false;
+  }
+
   /**
    * Ring the bell.
    * Note: We could do sweet things with webaudio here
    */
   public bell(): void {
     if (this._soundBell()) {
-      this._soundService!.playBellSound();
+      this._soundService?.playBellSound();
     }
 
+    this._onBell.fire();
+
     // if (this._visualBell()) {
     //   this.element.classList.add('visual-bell-active');
     //   clearTimeout(this._visualBellTimer);
@@ -1183,7 +1258,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this.buffer.lines.push(this.buffer.getBlankLine(DEFAULT_ATTR_DATA));
     }
     this.refresh(0, this.rows - 1);
-    this._onScroll.fire(this.buffer.ydisp);
+    this._onScroll.fire({ position: this.buffer.ydisp, source: ScrollSource.TERMINAL });
   }
 
   /**
@@ -1224,12 +1299,12 @@ export class Terminal extends CoreTerminal implements ITerminal {
       case WindowsOptionsReportType.GET_WIN_SIZE_PIXELS:
         const canvasWidth = this._renderService.dimensions.scaledCanvasWidth.toFixed(0);
         const canvasHeight = this._renderService.dimensions.scaledCanvasHeight.toFixed(0);
-        this._coreService.triggerDataEvent(`${C0.ESC}[4;${canvasHeight};${canvasWidth}t`);
+        this.coreService.triggerDataEvent(`${C0.ESC}[4;${canvasHeight};${canvasWidth}t`);
         break;
       case WindowsOptionsReportType.GET_CELL_SIZE_PIXELS:
         const cellWidth = this._renderService.dimensions.scaledCellWidth.toFixed(0);
         const cellHeight = this._renderService.dimensions.scaledCellHeight.toFixed(0);
-        this._coreService.triggerDataEvent(`${C0.ESC}[6;${cellHeight};${cellWidth}t`);
+        this.coreService.triggerDataEvent(`${C0.ESC}[6;${cellHeight};${cellWidth}t`);
         break;
     }
   }

src/browser/Terminal2.test.ts

@@ -17,6 +17,7 @@ const ROWS = 25;
 
 const TESTFILES = glob.sync('**/escape_sequence_files/*.in', { cwd: path.join(__dirname, '../..')});
 const SKIP_FILES = [
+  't0055-EL.in',            // EL/ED handle cursor at cols differently (see #3362)
   't0084-CBT.in',
   't0101-NLM.in',
   't0103-reverse_wrap.in',  // not comparable, we deviate from xterm reverse wrap on purpose
@@ -73,8 +74,8 @@ describe('Escape Sequence Files', function(): void {
       // register handler to trigger viewport scraping, wait for it to finish
       let content = '';
       const OSC_CODE = 12345;
-      await new Promise(resolve => {
-        customHandler = term.addOscHandler(OSC_CODE, () => {
+      await new Promise<void>(resolve => {
+        customHandler = term.registerOscHandler(OSC_CODE, () => {
           // grab terminal viewport content
           content = terminalToString(term);
           resolve();
@@ -105,7 +106,7 @@ function formatError(input: string, output: string, expected: string): string {
   function addLineNumber(start: number, color: string): (s: string) => string {
     let counter = start || 0;
     return (s: string): string => {
-      counter += 1;
+      counter++;
       return '\x1b[33m' + (' ' + counter).slice(-2) + color + s;
     };
   }

src/browser/TestUtils.test.ts

@@ -5,15 +5,15 @@
 
 import { IDisposable, IMarker, ISelectionPosition, ILinkProvider } from 'xterm';
 import { IEvent, EventEmitter } from 'common/EventEmitter';
-import { ICharSizeService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services';
-import { IRenderDimensions, IRenderer, CharacterJoinerHandler, IRequestRedrawEvent } from 'browser/renderer/Types';
-import { IColorSet, ILinkMatcherOptions, ITerminal, ILinkifier, ILinkifier2, IBrowser, IViewport, IColorManager, ICompositionHelper } from 'browser/Types';
+import { ICharacterJoinerService, ICharSizeService, IMouseService, IRenderService, ISelectionService } from 'browser/services/Services';
+import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { IColorSet, ILinkMatcherOptions, ITerminal, ILinkifier, ILinkifier2, IBrowser, IViewport, IColorManager, ICompositionHelper, CharacterJoinerHandler } from 'browser/Types';
 import { IBuffer, IBufferStringIterator, IBufferSet } from 'common/buffer/Types';
 import { IBufferLine, ICellData, IAttributeData, ICircularList, XtermListener, ICharset, ITerminalOptions } from 'common/Types';
 import { Buffer } from 'common/buffer/Buffer';
 import * as Browser from 'common/Platform';
 import { Terminal } from 'browser/Terminal';
-import { IUnicodeService, IOptionsService } from 'common/services/Services';
+import { IUnicodeService, IOptionsService, ICoreService, ICoreMouseService } from 'common/services/Services';
 import { IFunctionIdentifier, IParams } from 'common/parser/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 
@@ -21,6 +21,9 @@ export class TestTerminal extends Terminal {
   public get curAttrData(): IAttributeData { return (this as any)._inputHandler._curAttrData; }
   public keyDown(ev: any): boolean | undefined { return this._keyDown(ev); }
   public keyPress(ev: any): boolean { return this._keyPress(ev); }
+  public writeP(data: string | Uint8Array): Promise<void> {
+    return new Promise(r => this.write(data, r));
+  }
 }
 
 export class MockTerminal implements ITerminal {
@@ -34,11 +37,14 @@ export class MockTerminal implements ITerminal {
   public onData!: IEvent<string>;
   public onBinary!: IEvent<string>;
   public onTitleChange!: IEvent<string>;
+  public onBell!: IEvent<void>;
   public onScroll!: IEvent<number>;
   public onKey!: IEvent<{ key: string, domEvent: KeyboardEvent }>;
   public onRender!: IEvent<{ start: number, end: number }>;
   public onResize!: IEvent<{ cols: number, rows: number }>;
   public markers!: IMarker[];
+  public coreMouseService!: ICoreMouseService;
+  public coreService!: ICoreService;
   public optionsService!: IOptionsService;
   public unicodeService!: IUnicodeService;
   public addMarker(cursorYOffset: number): IMarker {
@@ -75,16 +81,16 @@ export class MockTerminal implements ITerminal {
   public attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void {
     throw new Error('Method not implemented.');
   }
-  public addCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean): IDisposable {
+  public registerCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean | Promise<boolean>): IDisposable {
     throw new Error('Method not implemented.');
   }
-  public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean): IDisposable {
+  public registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean | Promise<boolean>): IDisposable {
     throw new Error('Method not implemented.');
   }
-  public addEscHandler(id: IFunctionIdentifier, handler: () => boolean): IDisposable {
+  public registerEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise<boolean>): IDisposable {
     throw new Error('Method not implemented.');
   }
-  public addOscHandler(ident: number, callback: (data: string) => boolean): IDisposable {
+  public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
     throw new Error('Method not implemented.');
   }
   public registerLinkMatcher(regex: RegExp, handler: (event: MouseEvent, uri: string) => boolean | void, options?: ILinkMatcherOptions): number {
@@ -149,7 +155,7 @@ export class MockTerminal implements ITerminal {
   public textarea!: HTMLTextAreaElement;
   public rows!: number;
   public cols!: number;
-  public browser: IBrowser = <any>Browser;
+  public browser: IBrowser = Browser as any;
   public writeBuffer!: string[];
   public children!: HTMLElement[];
   public cursorHidden!: boolean;
@@ -281,8 +287,6 @@ export class MockRenderer implements IRenderer {
   public onDevicePixelRatioChange(): void { }
   public clear(): void { }
   public renderRows(start: number, end: number): void { }
-  public registerCharacterJoiner(handler: CharacterJoinerHandler): number { return 0; }
-  public deregisterCharacterJoiner(): boolean { return true; }
 }
 
 export class MockViewport implements IViewport {
@@ -406,13 +410,20 @@ export class MockRenderService implements IRenderService {
   public clear(): void {
     throw new Error('Method not implemented.');
   }
-  public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
-    throw new Error('Method not implemented.');
-  }
-  public deregisterCharacterJoiner(joinerId: number): boolean {
-    throw new Error('Method not implemented.');
-  }
   public dispose(): void {
     throw new Error('Method not implemented.');
   }
 }
+
+export class MockCharacterJoinerService implements ICharacterJoinerService {
+  public serviceBrand: undefined;
+  public register(handler: (text: string) => [number, number][]): number {
+    return 0;
+  }
+  public deregister(joinerId: number): boolean {
+    return true;
+  }
+  public getJoinedCharacters(row: number): [number, number][] {
+    return [];
+  }
+}

src/browser/TimeBasedDebouncer.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+const RENDER_DEBOUNCE_THRESHOLD_MS = 1000; // 1 Second
+
+import { IRenderDebouncer } from 'browser/Types';
+
+/**
+ * Debounces calls to update screen readers to update at most once configurable interval of time.
+ */
+export class TimeBasedDebouncer implements IRenderDebouncer {
+  private _rowStart: number | undefined;
+  private _rowEnd: number | undefined;
+  private _rowCount: number | undefined;
+
+  // The last moment that the Terminal was refreshed at
+  private _lastRefreshMs = 0;
+  // Whether a trailing refresh should be triggered due to a refresh request that was throttled
+  private _additionalRefreshRequested = false;
+
+  private _refreshTimeoutID: number | undefined;
+
+  constructor(
+    private _renderCallback: (start: number, end: number) => void,
+    private readonly _debounceThresholdMS = RENDER_DEBOUNCE_THRESHOLD_MS
+  ) {
+  }
+
+  public dispose(): void {
+    if (this._refreshTimeoutID) {
+      clearTimeout(this._refreshTimeoutID);
+    }
+  }
+
+  public refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void {
+    this._rowCount = rowCount;
+    // Get the min/max row start/end for the arg values
+    rowStart = rowStart !== undefined ? rowStart : 0;
+    rowEnd = rowEnd !== undefined ? rowEnd : this._rowCount - 1;
+    // Set the properties to the updated values
+    this._rowStart = this._rowStart !== undefined ? Math.min(this._rowStart, rowStart) : rowStart;
+    this._rowEnd = this._rowEnd !== undefined ? Math.max(this._rowEnd, rowEnd) : rowEnd;
+
+    // Only refresh if the time since last refresh is above a threshold, otherwise wait for
+    // enough time to pass before refreshing again.
+    const refreshRequestTime: number = Date.now();
+    if (refreshRequestTime - this._lastRefreshMs >= this._debounceThresholdMS) {
+      // Enough time has lapsed since the last refresh; refresh immediately
+      this._lastRefreshMs = refreshRequestTime;
+      this._innerRefresh();
+    } else if (!this._additionalRefreshRequested) {
+      // This is the first additional request throttled; set up trailing refresh
+      const elapsed = refreshRequestTime - this._lastRefreshMs;
+      const waitPeriodBeforeTrailingRefresh = this._debounceThresholdMS - elapsed;
+      this._additionalRefreshRequested = true;
+
+      this._refreshTimeoutID = window.setTimeout(() => {
+        this._lastRefreshMs = Date.now();
+        this._innerRefresh();
+        this._additionalRefreshRequested = false;
+        this._refreshTimeoutID = undefined; // No longer need to clear the timeout
+      }, waitPeriodBeforeTrailingRefresh);
+    }
+  }
+
+  private _innerRefresh(): void {
+    // Make sure values are set
+    if (this._rowStart === undefined || this._rowEnd === undefined || this._rowCount === undefined) {
+      return;
+    }
+
+    // Clamp values
+    const start = Math.max(this._rowStart, 0);
+    const end = Math.min(this._rowEnd, this._rowCount - 1);
+
+    // Reset debouncer (this happens before render callback as the render could trigger it again)
+    this._rowStart = undefined;
+    this._rowEnd = undefined;
+
+    // Run render callback
+    this._renderCallback(start, end);
+  }
+}
+

src/browser/Types.d.ts

@@ -15,7 +15,6 @@ export interface ITerminal extends IPublicTerminal, ICoreTerminal {
   screenElement: HTMLElement | undefined;
   browser: IBrowser;
   buffer: IBuffer;
-  buffers: IBufferSet;
   viewport: IViewport | undefined;
   // TODO: We should remove options once components adopt optionsService
   options: ITerminalOptions;
@@ -47,15 +46,16 @@ export interface IPublicTerminal extends IDisposable {
   onRender: IEvent<{ start: number, end: number }>;
   onResize: IEvent<{ cols: number, rows: number }>;
   onTitleChange: IEvent<string>;
+  onBell: IEvent<void>;
   blur(): void;
   focus(): void;
   resize(columns: number, rows: number): void;
   open(parent: HTMLElement): void;
   attachCustomKeyEventHandler(customKeyEventHandler: (event: KeyboardEvent) => boolean): void;
-  addCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean): IDisposable;
-  addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean): IDisposable;
-  addEscHandler(id: IFunctionIdentifier, callback: () => boolean): IDisposable;
-  addOscHandler(ident: number, callback: (data: string) => boolean): IDisposable;
+  registerCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean | Promise<boolean>): IDisposable;
+  registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean | Promise<boolean>): IDisposable;
+  registerEscHandler(id: IFunctionIdentifier, callback: () => boolean | Promise<boolean>): IDisposable;
+  registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable;
   registerLinkMatcher(regex: RegExp, handler: (event: MouseEvent, uri: string) => void, options?: ILinkMatcherOptions): number;
   deregisterLinkMatcher(matcherId: number): void;
   registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
@@ -205,9 +205,19 @@ export interface ILinkifier {
   deregisterLinkMatcher(matcherId: number): boolean;
 }
 
+interface ILinkState {
+  decorations: ILinkDecorations;
+  isHovered: boolean;
+}
+export interface ILinkWithState {
+  link: ILink;
+  state?: ILinkState;
+}
+
 export interface ILinkifier2 {
   onShowLinkUnderline: IEvent<ILinkifierEvent>;
   onHideLinkUnderline: IEvent<ILinkifierEvent>;
+  readonly currentLink: ILinkWithState | undefined;
 
   attachToDom(element: HTMLElement, mouseService: IMouseService, renderService: IRenderService): void;
   registerLinkProvider(linkProvider: ILinkProvider): IDisposable;
@@ -292,3 +302,14 @@ interface IBufferCellPosition {
   x: number;
   y: number;
 }
+
+export type CharacterJoinerHandler = (text: string) => [number, number][];
+
+export interface ICharacterJoiner {
+  id: number;
+  handler: CharacterJoinerHandler;
+}
+
+export interface IRenderDebouncer extends IDisposable {
+  refresh(rowStart: number | undefined, rowEnd: number | undefined, rowCount: number): void;
+}

src/browser/Viewport.ts

@@ -8,6 +8,8 @@ import { addDisposableDomListener } from 'browser/Lifecycle';
 import { IColorSet, IViewport } from 'browser/Types';
 import { ICharSizeService, IRenderService } from 'browser/services/Services';
 import { IBufferService, IOptionsService } from 'common/services/Services';
+import { IBuffer } from 'common/buffer/Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
 
 const FALLBACK_SCROLL_BAR_WIDTH = 15;
 
@@ -18,11 +20,15 @@ const FALLBACK_SCROLL_BAR_WIDTH = 15;
 export class Viewport extends Disposable implements IViewport {
   public scrollBarWidth: number = 0;
   private _currentRowHeight: number = 0;
+  private _currentScaledCellHeight: number = 0;
   private _lastRecordedBufferLength: number = 0;
   private _lastRecordedViewportHeight: number = 0;
   private _lastRecordedBufferHeight: number = 0;
   private _lastTouchY: number = 0;
   private _lastScrollTop: number = 0;
+  private _lastHadScrollBar: boolean = false;
+  private _activeBuffer: IBuffer;
+  private _renderDimensions: IRenderDimensions;
 
   // Stores a partial line amount when scrolling, this is used to keep track of how much of a line
   // is scrolled so we can "scroll" over partial lines and feel natural on touchpads. This is a
@@ -33,7 +39,7 @@ export class Viewport extends Disposable implements IViewport {
   private _ignoreNextScrollEvent: boolean = false;
 
   constructor(
-    private readonly _scrollLines: (amount: number, suppressEvent: boolean) => void,
+    private readonly _scrollLines: (amount: number) => void,
     private readonly _viewportElement: HTMLElement,
     private readonly _scrollArea: HTMLElement,
     @IBufferService private readonly _bufferService: IBufferService,
@@ -47,8 +53,15 @@ export class Viewport extends Disposable implements IViewport {
     // Unfortunately the overlay scrollbar would be hidden underneath the screen element in that case,
     // therefore we account for a standard amount to make it visible
     this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH;
+    this._lastHadScrollBar = true;
     this.register(addDisposableDomListener(this._viewportElement, 'scroll', this._onScroll.bind(this)));
 
+    // Track properties used in performance critical code manually to avoid using slow getters
+    this._activeBuffer = this._bufferService.buffer;
+    this.register(this._bufferService.buffers.onBufferActivate(e => this._activeBuffer = e.activeBuffer));
+    this._renderDimensions = this._renderService.dimensions;
+    this.register(this._renderService.onDimensionsChange(e => this._renderDimensions = e));
+
     // Perform this async to ensure the ICharSizeService is ready.
     setTimeout(() => this.syncScrollArea(), 0);
   }
@@ -77,6 +90,7 @@ export class Viewport extends Disposable implements IViewport {
   private _innerRefresh(): void {
     if (this._charSizeService.height > 0) {
       this._currentRowHeight = this._renderService.dimensions.scaledCellHeight / window.devicePixelRatio;
+      this._currentScaledCellHeight = this._renderService.dimensions.scaledCellHeight;
       this._lastRecordedViewportHeight = this._viewportElement.offsetHeight;
       const newBufferHeight = Math.round(this._currentRowHeight * this._lastRecordedBufferLength) + (this._lastRecordedViewportHeight - this._renderService.dimensions.canvasHeight);
       if (this._lastRecordedBufferHeight !== newBufferHeight) {
@@ -94,8 +108,18 @@ export class Viewport extends Disposable implements IViewport {
       this._viewportElement.scrollTop = scrollTop;
     }
 
+    // Update scroll bar width
+    if (this._optionsService.options.scrollback === 0) {
+      this.scrollBarWidth = 0;
+    } else {
+      this.scrollBarWidth = (this._viewportElement.offsetWidth - this._scrollArea.offsetWidth) || FALLBACK_SCROLL_BAR_WIDTH;
+    }
+    this._lastHadScrollBar = this.scrollBarWidth > 0;
+
+    this._viewportElement.style.width = (this._renderService.dimensions.actualCellWidth * (this._bufferService.cols) + this.scrollBarWidth).toString() + 'px';
     this._refreshAnimationFrame = null;
   }
+
   /**
    * Updates dimensions and synchronizes the scroll area if necessary.
    */
@@ -114,23 +138,21 @@ export class Viewport extends Disposable implements IViewport {
     }
 
     // If the buffer position doesn't match last scroll top
-    const newScrollTop = this._bufferService.buffer.ydisp * this._currentRowHeight;
-    if (this._lastScrollTop !== newScrollTop) {
-      this._refresh(immediate);
-      return;
-    }
-
-    // If element's scroll top changed, this can happen when hiding the element
-    if (this._lastScrollTop !== this._viewportElement.scrollTop) {
+    if (this._lastScrollTop !== this._activeBuffer.ydisp * this._currentRowHeight) {
       this._refresh(immediate);
       return;
     }
 
     // If row height changed
-    if (this._renderService.dimensions.scaledCellHeight / window.devicePixelRatio !== this._currentRowHeight) {
+    if (this._renderDimensions.scaledCellHeight !== this._currentScaledCellHeight) {
       this._refresh(immediate);
       return;
     }
+
+    // If the scroll bar visibility changed
+    if (this._lastHadScrollBar !== (this._optionsService.options.scrollback > 0)) {
+      this._refresh(immediate);
+    }
   }
 
   /**
@@ -151,12 +173,14 @@ export class Viewport extends Disposable implements IViewport {
     // Ignore the event if it was flagged to ignore (when the source of the event is from Viewport)
     if (this._ignoreNextScrollEvent) {
       this._ignoreNextScrollEvent = false;
+      // Still trigger the scroll so lines get refreshed
+      this._scrollLines(0);
       return;
     }
 
     const newRow = Math.round(this._lastScrollTop / this._currentRowHeight);
     const diff = newRow - this._bufferService.buffer.ydisp;
-    this._scrollLines(diff, true);
+    this._scrollLines(diff);
   }
 
   /**

src/browser/input/CompositionHelper.test.ts

@@ -5,7 +5,7 @@
 
 import { assert } from 'chai';
 import { CompositionHelper } from 'browser/input/CompositionHelper';
-import { MockCharSizeService } from 'browser/TestUtils.test';
+import { MockRenderService } from 'browser/TestUtils.test';
 import { MockCoreService, MockBufferService, MockOptionsService } from 'common/TestUtils.test';
 
 describe('CompositionHelper', () => {
@@ -42,14 +42,14 @@ describe('CompositionHelper', () => {
     };
     handledText = '';
     const bufferService = new MockBufferService(10, 5);
-    compositionHelper = new CompositionHelper(textarea, compositionView, bufferService, new MockOptionsService(), new MockCharSizeService(10, 10), coreService);
+    compositionHelper = new CompositionHelper(textarea, compositionView, bufferService, new MockOptionsService(), coreService, new MockRenderService());
   });
 
   describe('Input', () => {
     it('Should insert simple characters', (done) => {
       // First character 'ㅇ'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent><CompositionEvent>{ data: 'ㅇ' });
+      compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
       setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionend();
@@ -57,7 +57,7 @@ describe('CompositionHelper', () => {
           assert.equal(handledText, 'ㅇ');
           // Second character 'ㅇ'
           compositionHelper.compositionstart();
-          compositionHelper.compositionupdate(<CompositionEvent><CompositionEvent>{ data: 'ㅇ' });
+          compositionHelper.compositionupdate({ data: 'ㅇ' });
           textarea.value = 'ㅇㅇ';
           setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
@@ -73,13 +73,13 @@ describe('CompositionHelper', () => {
     it('Should insert complex characters', (done) => {
       // First character '앙'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ㅇ' });
+      compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
       setTimeout(() => { // wait for any textarea updates
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: '아' });
+        compositionHelper.compositionupdate({ data: '아' });
         textarea.value = '아';
         setTimeout(() => { // wait for any textarea updates
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: '앙' });
+          compositionHelper.compositionupdate({ data: '앙' });
           textarea.value = '앙';
           setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
@@ -87,13 +87,13 @@ describe('CompositionHelper', () => {
               assert.equal(handledText, '앙');
               // Second character '앙'
               compositionHelper.compositionstart();
-              compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ㅇ' });
+              compositionHelper.compositionupdate({ data: 'ㅇ' });
               textarea.value = '앙ㅇ';
               setTimeout(() => { // wait for any textarea updates
-                compositionHelper.compositionupdate(<CompositionEvent>{ data: '아' });
+                compositionHelper.compositionupdate({ data: '아' });
                 textarea.value = '앙아';
                 setTimeout(() => { // wait for any textarea updates
-                  compositionHelper.compositionupdate(<CompositionEvent>{ data: '앙' });
+                  compositionHelper.compositionupdate({ data: '앙' });
                   textarea.value = '앙앙';
                   setTimeout(() => { // wait for any textarea updates
                     compositionHelper.compositionend();
@@ -113,19 +113,19 @@ describe('CompositionHelper', () => {
     it('Should insert complex characters that change with following character', (done) => {
       // First character '아'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ㅇ' });
+      compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
       setTimeout(() => { // wait for any textarea updates
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: '아' });
+        compositionHelper.compositionupdate({ data: '아' });
         textarea.value = '아';
         setTimeout(() => { // wait for any textarea updates
           // Start second character '아' in first character
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: '앙' });
+          compositionHelper.compositionupdate({ data: '앙' });
           textarea.value = '앙';
           setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
             compositionHelper.compositionstart();
-            compositionHelper.compositionupdate(<CompositionEvent>{ data: '아' });
+            compositionHelper.compositionupdate({ data: '아' });
             textarea.value = '아아';
             setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
@@ -142,14 +142,14 @@ describe('CompositionHelper', () => {
     it('Should insert multi-characters compositions', (done) => {
       // First character 'だ'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'd' });
+      compositionHelper.compositionupdate({ data: 'd' });
       textarea.value = 'd';
       setTimeout(() => { // wait for any textarea updates
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: 'だ' });
+        compositionHelper.compositionupdate({ data: 'だ' });
         textarea.value = 'だ';
         setTimeout(() => { // wait for any textarea updates
           // Second character 'あ'
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: 'だあ' });
+          compositionHelper.compositionupdate({ data: 'だあ' });
           textarea.value = 'だあ';
           setTimeout(() => { // wait for any textarea updates
             compositionHelper.compositionend();
@@ -165,18 +165,18 @@ describe('CompositionHelper', () => {
     it('Should insert multi-character compositions that are converted to other characters with the same length', (done) => {
       // First character 'だ'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'd' });
+      compositionHelper.compositionupdate({ data: 'd' });
       textarea.value = 'd';
       setTimeout(() => { // wait for any textarea updates
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: 'だ' });
+        compositionHelper.compositionupdate({ data: 'だ' });
         textarea.value = 'だ';
         setTimeout(() => { // wait for any textarea updates
           // Second character 'ー'
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: 'だー' });
+          compositionHelper.compositionupdate({ data: 'だー' });
           textarea.value = 'だー';
           setTimeout(() => { // wait for any textarea updates
             // Convert to katakana 'ダー'
-            compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ダー' });
+            compositionHelper.compositionupdate({ data: 'ダー' });
             textarea.value = 'ダー';
             setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
@@ -193,18 +193,18 @@ describe('CompositionHelper', () => {
     it('Should insert multi-character compositions that are converted to other characters with different lengths', (done) => {
       // First character 'い'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'い' });
+      compositionHelper.compositionupdate({ data: 'い' });
       textarea.value = 'い';
       setTimeout(() => { // wait for any textarea updates
         // Second character 'ま'
-        compositionHelper.compositionupdate(<CompositionEvent>{ data: 'いm' });
+        compositionHelper.compositionupdate({ data: 'いm' });
         textarea.value = 'いm';
         setTimeout(() => { // wait for any textarea updates
-          compositionHelper.compositionupdate(<CompositionEvent>{ data: 'いま' });
+          compositionHelper.compositionupdate({ data: 'いま' });
           textarea.value = 'いま';
           setTimeout(() => { // wait for any textarea updates
             // Convert to kanji '今'
-            compositionHelper.compositionupdate(<CompositionEvent>{ data: '今' });
+            compositionHelper.compositionupdate({ data: '今' });
             textarea.value = '今';
             setTimeout(() => { // wait for any textarea updates
               compositionHelper.compositionend();
@@ -221,7 +221,7 @@ describe('CompositionHelper', () => {
     it('Should insert non-composition characters input immediately after composition characters', (done) => {
       // First character 'ㅇ'
       compositionHelper.compositionstart();
-      compositionHelper.compositionupdate(<CompositionEvent>{ data: 'ㅇ' });
+      compositionHelper.compositionupdate({ data: 'ㅇ' });
       textarea.value = 'ㅇ';
       setTimeout(() => { // wait for any textarea updates
         compositionHelper.compositionend();

src/browser/input/CompositionHelper.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { ICharSizeService } from 'browser/services/Services';
+import { IRenderService } from 'browser/services/Services';
 import { IBufferService, ICoreService, IOptionsService } from 'common/services/Services';
 
 interface IPosition {
@@ -45,8 +45,8 @@ export class CompositionHelper {
     private readonly _compositionView: HTMLElement,
     @IBufferService private readonly _bufferService: IBufferService,
     @IOptionsService private readonly _optionsService: IOptionsService,
-    @ICharSizeService private readonly _charSizeService: ICharSizeService,
-    @ICoreService private readonly _coreService: ICoreService
+    @ICoreService private readonly _coreService: ICoreService,
+    @IRenderService private readonly _renderService: IRenderService
   ) {
     this._isComposing = false;
     this._isSendingComposition = false;
@@ -69,7 +69,7 @@ export class CompositionHelper {
    * Handles the compositionupdate event, updating the composition view.
    * @param ev The event.
    */
-  public compositionupdate(ev: CompositionEvent): void {
+  public compositionupdate(ev: Pick<CompositionEvent, 'data'>): void {
     this._compositionView.textContent = ev.data;
     this.updateCompositionElements();
     setTimeout(() => {
@@ -207,9 +207,11 @@ export class CompositionHelper {
     }
 
     if (this._bufferService.buffer.isCursorInViewport) {
-      const cellHeight = Math.ceil(this._charSizeService.height * this._optionsService.options.lineHeight);
-      const cursorTop = this._bufferService.buffer.y * cellHeight;
-      const cursorLeft = this._bufferService.buffer.x * this._charSizeService.width;
+      const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
+
+      const cellHeight = this._renderService.dimensions.actualCellHeight;
+      const cursorTop = this._bufferService.buffer.y * this._renderService.dimensions.actualCellHeight;
+      const cursorLeft = cursorX * this._renderService.dimensions.actualCellWidth;
 
       this._compositionView.style.left = cursorLeft + 'px';
       this._compositionView.style.top = cursorTop + 'px';
@@ -222,8 +224,9 @@ export class CompositionHelper {
       const compositionViewBounds = this._compositionView.getBoundingClientRect();
       this._textarea.style.left = cursorLeft + 'px';
       this._textarea.style.top = cursorTop + 'px';
-      this._textarea.style.width = compositionViewBounds.width + 'px';
-      this._textarea.style.height = compositionViewBounds.height + 'px';
+      // Ensure the text area is at least 1x1, otherwise certain IMEs may break
+      this._textarea.style.width = Math.max(compositionViewBounds.width, 1) + 'px';
+      this._textarea.style.height = Math.max(compositionViewBounds.height, 1) + 'px';
       this._textarea.style.lineHeight = compositionViewBounds.height + 'px';
     }
 

src/browser/public/Terminal.ts

@@ -3,17 +3,15 @@
  * @license MIT
  */
 
-import { Terminal as ITerminalApi, ITerminalOptions, IMarker, IDisposable, ILinkMatcherOptions, ITheme, ILocalizableStrings, ITerminalAddon, ISelectionPosition, IBuffer as IBufferApi, IBufferNamespace as IBufferNamespaceApi, IBufferLine as IBufferLineApi, IBufferCell as IBufferCellApi, IParser, IFunctionIdentifier, ILinkProvider, IUnicodeHandling, IUnicodeVersionProvider, FontWeight } from 'xterm';
+import { Terminal as ITerminalApi, ITerminalOptions, IMarker, IDisposable, ILinkMatcherOptions, ITheme, ILocalizableStrings, ITerminalAddon, ISelectionPosition, IBufferNamespace as IBufferNamespaceApi, IParser, ILinkProvider, IUnicodeHandling, FontWeight, IModes } from 'xterm';
 import { ITerminal } from 'browser/Types';
-import { IBufferLine, ICellData } from 'common/Types';
-import { IBuffer, IBufferSet } from 'common/buffer/Types';
-import { CellData } from 'common/buffer/CellData';
-import { Terminal as TerminalCore } from '../Terminal';
-import * as Strings from '../LocalizableStrings';
-import { IEvent, EventEmitter } from 'common/EventEmitter';
-import { AddonManager } from './AddonManager';
-import { IParams } from 'common/parser/Types';
-import { BufferSet } from 'common/buffer/BufferSet';
+import { Terminal as TerminalCore } from 'browser/Terminal';
+import * as Strings from 'browser/LocalizableStrings';
+import { IEvent } from 'common/EventEmitter';
+import { ParserApi } from 'common/public/ParserApi';
+import { UnicodeApi } from 'common/public/UnicodeApi';
+import { AddonManager } from 'common/public/AddonManager';
+import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi';
 
 export class Terminal implements ITerminalApi {
   private _core: ITerminal;
@@ -32,16 +30,17 @@ export class Terminal implements ITerminalApi {
     }
   }
 
-  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
-  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
-  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
-  public get onData(): IEvent<string> { return this._core.onData; }
+  public get onBell(): IEvent<void> { return this._core.onBell; }
   public get onBinary(): IEvent<string> { return this._core.onBinary; }
-  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
-  public get onScroll(): IEvent<number> { return this._core.onScroll; }
+  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
+  public get onData(): IEvent<string> { return this._core.onData; }
   public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
+  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
   public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; }
   public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; }
+  public get onScroll(): IEvent<number> { return this._core.onScroll; }
+  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
+  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
 
   public get element(): HTMLElement | undefined { return this._core.element; }
   public get parser(): IParser {
@@ -69,6 +68,27 @@ export class Terminal implements ITerminalApi {
     this._checkProposedApi();
     return this._core.markers;
   }
+  public get modes(): IModes {
+    const m = this._core.coreService.decPrivateModes;
+    let mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any' = 'none';
+    switch (this._core.coreMouseService.activeProtocol) {
+      case 'X10': mouseTrackingMode = 'x10'; break;
+      case 'VT200': mouseTrackingMode = 'vt200'; break;
+      case 'DRAG': mouseTrackingMode = 'drag'; break;
+      case 'ANY': mouseTrackingMode = 'any'; break;
+    }
+    return {
+      applicationCursorKeysMode: m.applicationCursorKeys,
+      applicationKeypadMode: m.applicationKeypad,
+      bracketedPasteMode: m.bracketedPasteMode,
+      insertMode: this._core.coreService.modes.insertMode,
+      mouseTrackingMode: mouseTrackingMode,
+      originMode: m.origin,
+      reverseWraparoundMode: m.reverseWraparound,
+      sendFocusMode: m.sendFocus,
+      wraparoundMode: m.wraparound
+    };
+  }
   public blur(): void {
     this._core.blur();
   }
@@ -217,123 +237,3 @@ export class Terminal implements ITerminalApi {
     }
   }
 }
-
-class BufferApiView implements IBufferApi {
-  constructor(
-    private _buffer: IBuffer,
-    public readonly type: 'normal' | 'alternate'
-  ) { }
-
-  public init(buffer: IBuffer): BufferApiView {
-    this._buffer = buffer;
-    return this;
-  }
-
-  public get cursorY(): number { return this._buffer.y; }
-  public get cursorX(): number { return this._buffer.x; }
-  public get viewportY(): number { return this._buffer.ydisp; }
-  public get baseY(): number { return this._buffer.ybase; }
-  public get length(): number { return this._buffer.lines.length; }
-  public getLine(y: number): IBufferLineApi | undefined {
-    const line = this._buffer.lines.get(y);
-    if (!line) {
-      return undefined;
-    }
-    return new BufferLineApiView(line);
-  }
-  public getNullCell(): IBufferCellApi { return new CellData(); }
-}
-
-class BufferNamespaceApi implements IBufferNamespaceApi {
-  private _normal: BufferApiView;
-  private _alternate: BufferApiView;
-  private _onBufferChange = new EventEmitter<IBufferApi>();
-  public get onBufferChange(): IEvent<IBufferApi> { return this._onBufferChange.event; }
-
-  constructor(private _core: ITerminal) {
-    this._normal = new BufferApiView(this._core.buffers.normal, 'normal');
-    this._alternate = new BufferApiView(this._core.buffers.alt, 'alternate');
-    this._core.buffers.onBufferActivate(() => this._onBufferChange.fire(this.active));
-  }
-  public get active(): IBufferApi {
-    if (this._core.buffers.active === this._core.buffers.normal) { return this.normal; }
-    if (this._core.buffers.active === this._core.buffers.alt) { return this.alternate; }
-    throw new Error('Active buffer is neither normal nor alternate');
-  }
-  public get normal(): IBufferApi {
-    return this._normal.init(this._core.buffers.normal);
-  }
-  public get alternate(): IBufferApi {
-    return this._alternate.init(this._core.buffers.alt);
-  }
-}
-
-class BufferLineApiView implements IBufferLineApi {
-  constructor(private _line: IBufferLine) { }
-
-  public get isWrapped(): boolean { return this._line.isWrapped; }
-  public get length(): number { return this._line.length; }
-  public getCell(x: number, cell?: IBufferCellApi): IBufferCellApi | undefined {
-    if (x < 0 || x >= this._line.length) {
-      return undefined;
-    }
-
-    if (cell) {
-      this._line.loadCell(x, <ICellData>cell);
-      return cell;
-    }
-    return this._line.loadCell(x, new CellData());
-  }
-  public translateToString(trimRight?: boolean, startColumn?: number, endColumn?: number): string {
-    return this._line.translateToString(trimRight, startColumn, endColumn);
-  }
-}
-
-class ParserApi implements IParser {
-  constructor(private _core: ITerminal) { }
-
-  public registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean): IDisposable {
-    return this._core.addCsiHandler(id, (params: IParams) => callback(params.toArray()));
-  }
-  public addCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean): IDisposable {
-    return this.registerCsiHandler(id, callback);
-  }
-  public registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean): IDisposable {
-    return this._core.addDcsHandler(id, (data: string, params: IParams) => callback(data, params.toArray()));
-  }
-  public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean): IDisposable {
-    return this.registerDcsHandler(id, callback);
-  }
-  public registerEscHandler(id: IFunctionIdentifier, handler: () => boolean): IDisposable {
-    return this._core.addEscHandler(id, handler);
-  }
-  public addEscHandler(id: IFunctionIdentifier, handler: () => boolean): IDisposable {
-    return this.registerEscHandler(id, handler);
-  }
-  public registerOscHandler(ident: number, callback: (data: string) => boolean): IDisposable {
-    return this._core.addOscHandler(ident, callback);
-  }
-  public addOscHandler(ident: number, callback: (data: string) => boolean): IDisposable {
-    return this.registerOscHandler(ident, callback);
-  }
-}
-
-class UnicodeApi implements IUnicodeHandling {
-  constructor(private _core: ITerminal) { }
-
-  public register(provider: IUnicodeVersionProvider): void {
-    this._core.unicodeService.register(provider);
-  }
-
-  public get versions(): string[] {
-    return this._core.unicodeService.versions;
-  }
-
-  public get activeVersion(): string {
-    return this._core.unicodeService.activeVersion;
-  }
-
-  public set activeVersion(version: string) {
-    this._core.unicodeService.activeVersion = version;
-  }
-}

src/browser/renderer/BaseRenderLayer.ts

@@ -17,6 +17,7 @@ import { IBufferService, IOptionsService } from 'common/services/Services';
 import { throwIfFalsy } from 'browser/renderer/RendererUtils';
 import { channels, color, rgba } from 'browser/Color';
 import { removeElementFromParent } from 'browser/Dom';
+import { tryDrawCustomChar } from 'browser/renderer/CustomGlyphs';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -66,7 +67,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   }
 
   private _initCanvas(): void {
-    this._ctx = throwIfFalsy(this._canvas.getContext('2d', {alpha: this._alpha}));
+    this._ctx = throwIfFalsy(this._canvas.getContext('2d', { alpha: this._alpha }));
     // Draw the background if this is an opaque layer
     if (!this._alpha) {
       this._clearAll();
@@ -152,6 +153,21 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       height * this._scaledCellHeight);
   }
 
+  /**
+     * Fills a 1px line (2px on HDPI) at the middle of the cell. This uses the
+     * existing fillStyle on the context.
+     * @param x The column to fill.
+     * @param y The row to fill.
+     */
+  protected _fillMiddleLineAtCells(x: number, y: number, width: number = 1): void {
+    const cellOffset = Math.ceil(this._scaledCellHeight * 0.5);
+    this._ctx.fillRect(
+      x * this._scaledCellWidth,
+      (y + 1) * this._scaledCellHeight - cellOffset - window.devicePixelRatio,
+      width * this._scaledCellWidth,
+      window.devicePixelRatio);
+  }
+
   /**
    * Fills a 1px line (2px on HDPI) at the bottom of the cell. This uses the
    * existing fillStyle on the context.
@@ -242,12 +258,22 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    */
   protected _fillCharTrueColor(cell: CellData, x: number, y: number): void {
     this._ctx.font = this._getFont(false, false);
-    this._ctx.textBaseline = 'middle';
+    this._ctx.textBaseline = 'ideographic';
     this._clipRow(y);
-    this._ctx.fillText(
-      cell.getChars(),
-      x * this._scaledCellWidth + this._scaledCharLeft,
-      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
+
+    // Draw custom characters if applicable
+    let drawSuccess = false;
+    if (this._optionsService.options.customGlyphs !== false) {
+      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight);
+    }
+
+    // Draw the character
+    if (!drawSuccess) {
+      this._ctx.fillText(
+        cell.getChars(),
+        x * this._scaledCellWidth + this._scaledCharLeft,
+        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    }
   }
 
   /**
@@ -320,7 +346,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   private _drawUncachedChars(cell: ICellData, x: number, y: number, fgOverride?: IColor): void {
     this._ctx.save();
     this._ctx.font = this._getFont(!!cell.isBold(), !!cell.isItalic());
-    this._ctx.textBaseline = 'middle';
+    this._ctx.textBaseline = 'ideographic';
 
     if (cell.isInverse()) {
       if (fgOverride) {
@@ -358,14 +384,25 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     if (cell.isDim()) {
       this._ctx.globalAlpha = DIM_OPACITY;
     }
+
+    // Draw custom characters if applicable
+    let drawSuccess = false;
+    if (this._optionsService.options.customGlyphs !== false) {
+      drawSuccess = tryDrawCustomChar(this._ctx, cell.getChars(), x * this._scaledCellWidth, y * this._scaledCellHeight, this._scaledCellWidth, this._scaledCellHeight);
+    }
+
     // Draw the character
-    this._ctx.fillText(
-      cell.getChars(),
-      x * this._scaledCellWidth + this._scaledCharLeft,
-      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight / 2);
+    if (!drawSuccess) {
+      this._ctx.fillText(
+        cell.getChars(),
+        x * this._scaledCellWidth + this._scaledCharLeft,
+        y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
+    }
+
     this._ctx.restore();
   }
 
+
   /**
    * Clips a row to ensure no pixels will be drawn outside the cells in the row.
    * @param y The row to clip.

src/browser/renderer/CursorRenderLayer.ts

@@ -37,10 +37,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     rendererId: number,
     private _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
-    bufferService: IBufferService,
-    optionsService: IOptionsService,
-    private readonly _coreService: ICoreService,
-    private readonly _coreBrowserService: ICoreBrowserService
+    @IBufferService bufferService: IBufferService,
+    @IOptionsService optionsService: IOptionsService,
+    @ICoreService private readonly _coreService: ICoreService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
   ) {
     super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService);
     this._state = {
@@ -58,6 +58,14 @@ export class CursorRenderLayer extends BaseRenderLayer {
     // TODO: Consider initial options? Maybe onOptionsChanged should be called at the end of open?
   }
 
+  public dispose(): void {
+    if (this._cursorBlinkStateManager) {
+      this._cursorBlinkStateManager.dispose();
+      this._cursorBlinkStateManager = undefined;
+    }
+    super.dispose();
+  }
+
   public resize(dim: IRenderDimensions): void {
     super.resize(dim);
     // Resizing the canvas discards the contents of the canvas so clear state
@@ -197,7 +205,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
 
   private _clearCursor(): void {
     if (this._state) {
-      this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      // Avoid potential rounding errors when device pixel ratio is less than 1
+      if (window.devicePixelRatio < 1) {
+        this._clearAll();
+      } else {
+        this._clearCells(this._state.x, this._state.y, this._state.width, 1);
+      }
       this._state = {
         x: 0,
         y: 0,

src/browser/renderer/CustomGlyphs.ts

@@ -0,0 +1,563 @@
+/**
+ * Copyright (c) 2021 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { throwIfFalsy } from 'browser/renderer/RendererUtils';
+
+interface IBlockVector {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export const blockElementDefinitions: { [index: string]: IBlockVector[] | undefined } = {
+  // Block elements (0x2580-0x2590)
+  '▀': [{ x: 0, y: 0, w: 8, h: 4 }], // UPPER HALF BLOCK
+  '▁': [{ x: 0, y: 7, w: 8, h: 1 }], // LOWER ONE EIGHTH BLOCK
+  '▂': [{ x: 0, y: 6, w: 8, h: 2 }], // LOWER ONE QUARTER BLOCK
+  '▃': [{ x: 0, y: 5, w: 8, h: 3 }], // LOWER THREE EIGHTHS BLOCK
+  '▄': [{ x: 0, y: 4, w: 8, h: 4 }], // LOWER HALF BLOCK
+  '▅': [{ x: 0, y: 3, w: 8, h: 5 }], // LOWER FIVE EIGHTHS BLOCK
+  '▆': [{ x: 0, y: 2, w: 8, h: 6 }], // LOWER THREE QUARTERS BLOCK
+  '▇': [{ x: 0, y: 1, w: 8, h: 7 }], // LOWER SEVEN EIGHTHS BLOCK
+  '█': [{ x: 0, y: 0, w: 8, h: 8 }], // FULL BLOCK
+  '▉': [{ x: 0, y: 0, w: 7, h: 8 }], // LEFT SEVEN EIGHTHS BLOCK
+  '▊': [{ x: 0, y: 0, w: 6, h: 8 }], // LEFT THREE QUARTERS BLOCK
+  '▋': [{ x: 0, y: 0, w: 5, h: 8 }], // LEFT FIVE EIGHTHS BLOCK
+  '▌': [{ x: 0, y: 0, w: 4, h: 8 }], // LEFT HALF BLOCK
+  '▍': [{ x: 0, y: 0, w: 3, h: 8 }], // LEFT THREE EIGHTHS BLOCK
+  '▎': [{ x: 0, y: 0, w: 2, h: 8 }], // LEFT ONE QUARTER BLOCK
+  '▏': [{ x: 0, y: 0, w: 1, h: 8 }], // LEFT ONE EIGHTH BLOCK
+  '▐': [{ x: 4, y: 0, w: 4, h: 8 }], // RIGHT HALF BLOCK
+
+  // Block elements (0x2594-0x2595)
+  '▔': [{ x: 0, y: 0, w: 9, h: 1 }], // UPPER ONE EIGHTH BLOCK
+  '▕': [{ x: 7, y: 0, w: 1, h: 8 }], // RIGHT ONE EIGHTH BLOCK
+
+  // Terminal graphic characters (0x2596-0x259F)
+  '▖': [{ x: 0, y: 4, w: 4, h: 4 }],                             // QUADRANT LOWER LEFT
+  '▗': [{ x: 4, y: 4, w: 4, h: 4 }],                             // QUADRANT LOWER RIGHT
+  '▘': [{ x: 0, y: 0, w: 4, h: 4 }],                             // QUADRANT UPPER LEFT
+  '▙': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER LEFT AND LOWER LEFT AND LOWER RIGHT
+  '▚': [{ x: 0, y: 0, w: 4, h: 4 }, { x: 4, y: 4, w: 4, h: 4 }], // QUADRANT UPPER LEFT AND LOWER RIGHT
+  '▛': [{ x: 0, y: 0, w: 4, h: 8 }, { x: 0, y: 0, w: 4, h: 8 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER LEFT
+  '▜': [{ x: 0, y: 0, w: 8, h: 4 }, { x: 4, y: 0, w: 4, h: 8 }], // QUADRANT UPPER LEFT AND UPPER RIGHT AND LOWER RIGHT
+  '▝': [{ x: 4, y: 0, w: 4, h: 4 }],                             // QUADRANT UPPER RIGHT
+  '▞': [{ x: 4, y: 0, w: 4, h: 4 }, { x: 0, y: 4, w: 4, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT
+  '▟': [{ x: 4, y: 0, w: 4, h: 8 }, { x: 0, y: 4, w: 8, h: 4 }], // QUADRANT UPPER RIGHT AND LOWER LEFT AND LOWER RIGHT
+
+  // VERTICAL ONE EIGHTH BLOCK-2 through VERTICAL ONE EIGHTH BLOCK-7
+  '\u{1FB70}': [{ x: 1, y: 0, w: 1, h: 8 }],
+  '\u{1FB71}': [{ x: 2, y: 0, w: 1, h: 8 }],
+  '\u{1FB72}': [{ x: 3, y: 0, w: 1, h: 8 }],
+  '\u{1FB73}': [{ x: 4, y: 0, w: 1, h: 8 }],
+  '\u{1FB74}': [{ x: 5, y: 0, w: 1, h: 8 }],
+  '\u{1FB75}': [{ x: 6, y: 0, w: 1, h: 8 }],
+
+  // HORIZONTAL ONE EIGHTH BLOCK-2 through HORIZONTAL ONE EIGHTH BLOCK-7
+  '\u{1FB76}': [{ x: 0, y: 1, w: 8, h: 1 }],
+  '\u{1FB77}': [{ x: 0, y: 2, w: 8, h: 1 }],
+  '\u{1FB78}': [{ x: 0, y: 3, w: 8, h: 1 }],
+  '\u{1FB79}': [{ x: 0, y: 4, w: 8, h: 1 }],
+  '\u{1FB7A}': [{ x: 0, y: 5, w: 8, h: 1 }],
+  '\u{1FB7B}': [{ x: 0, y: 6, w: 8, h: 1 }],
+
+  // LEFT AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB7C}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // LEFT AND UPPER ONE EIGHTH BLOCK
+  '\u{1FB7D}': [{ x: 0, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }],
+  // RIGHT AND UPPER ONE EIGHTH BLOCK
+  '\u{1FB7E}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 0, w: 8, h: 1 }],
+  // RIGHT AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB7F}': [{ x: 7, y: 0, w: 1, h: 8 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // UPPER AND LOWER ONE EIGHTH BLOCK
+  '\u{1FB80}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }],
+  // HORIZONTAL ONE EIGHTH BLOCK-1358
+  '\u{1FB81}': [{ x: 0, y: 0, w: 8, h: 1 }, { x: 0, y: 2, w: 8, h: 1 }, { x: 0, y: 4, w: 8, h: 1 }, { x: 0, y: 7, w: 8, h: 1 }],
+
+  // UPPER ONE QUARTER BLOCK
+  '\u{1FB82}': [{ x: 0, y: 0, w: 8, h: 2 }],
+  // UPPER THREE EIGHTHS BLOCK
+  '\u{1FB83}': [{ x: 0, y: 0, w: 8, h: 3 }],
+  // UPPER FIVE EIGHTHS BLOCK
+  '\u{1FB84}': [{ x: 0, y: 0, w: 8, h: 5 }],
+  // UPPER THREE QUARTERS BLOCK
+  '\u{1FB85}': [{ x: 0, y: 0, w: 8, h: 6 }],
+  // UPPER SEVEN EIGHTHS BLOCK
+  '\u{1FB86}': [{ x: 0, y: 0, w: 8, h: 7 }],
+
+  // RIGHT ONE QUARTER BLOCK
+  '\u{1FB87}': [{ x: 6, y: 0, w: 2, h: 8 }],
+  // RIGHT THREE EIGHTHS B0OCK
+  '\u{1FB88}': [{ x: 5, y: 0, w: 3, h: 8 }],
+  // RIGHT FIVE EIGHTHS BL0CK
+  '\u{1FB89}': [{ x: 3, y: 0, w: 5, h: 8 }],
+  // RIGHT THREE QUARTERS 0LOCK
+  '\u{1FB8A}': [{ x: 2, y: 0, w: 6, h: 8 }],
+  // RIGHT SEVEN EIGHTHS B0OCK
+  '\u{1FB8B}': [{ x: 1, y: 0, w: 7, h: 8 }],
+
+  // CHECKER BOARD FILL
+  '\u{1FB95}': [
+    { x: 0, y: 0, w: 2, h: 2 }, { x: 4, y: 0, w: 2, h: 2 },
+    { x: 2, y: 2, w: 2, h: 2 }, { x: 6, y: 2, w: 2, h: 2 },
+    { x: 0, y: 4, w: 2, h: 2 }, { x: 4, y: 4, w: 2, h: 2 },
+    { x: 2, y: 6, w: 2, h: 2 }, { x: 6, y: 6, w: 2, h: 2 }
+  ],
+  // INVERSE CHECKER BOARD FILL
+  '\u{1FB96}': [
+    { x: 2, y: 0, w: 2, h: 2 }, { x: 6, y: 0, w: 2, h: 2 },
+    { x: 0, y: 2, w: 2, h: 2 }, { x: 4, y: 2, w: 2, h: 2 },
+    { x: 2, y: 4, w: 2, h: 2 }, { x: 6, y: 4, w: 2, h: 2 },
+    { x: 0, y: 6, w: 2, h: 2 }, { x: 4, y: 6, w: 2, h: 2 }
+  ],
+  // HEAVY HORIZONTAL FILL (upper middle and lower one quarter block)
+  '\u{1FB97}': [{ x: 0, y: 2, w: 8, h: 2 }, { x: 0, y: 6, w: 8, h: 2 }]
+};
+
+type PatternDefinition = number[][];
+
+/**
+ * Defines the repeating pattern used by special characters, the pattern is made up of a 2d array of
+ * pixel values to be filled (1) or not filled (0).
+ */
+const patternCharacterDefinitions: { [key: string]: PatternDefinition | undefined } = {
+  // Shade characters (0x2591-0x2593)
+  '░': [ // LIGHT SHADE (25%)
+    [1, 0, 0, 0],
+    [0, 0, 0, 0],
+    [0, 0, 1, 0],
+    [0, 0, 0, 0]
+  ],
+  '▒': [ // MEDIUM SHADE (50%)
+    [1, 0],
+    [0, 0],
+    [0, 1],
+    [0, 0]
+  ],
+  '▓': [ // DARK SHADE (75%)
+    [0, 1],
+    [1, 1],
+    [1, 0],
+    [1, 1]
+  ]
+};
+
+const enum Shapes {
+  /** │ */ TOP_TO_BOTTOM = 'M.5,0 L.5,1',
+  /** ─ */ LEFT_TO_RIGHT = 'M0,.5 L1,.5',
+
+  /** └ */ TOP_TO_RIGHT = 'M.5,0 L.5,.5 L1,.5',
+  /** ┘ */ TOP_TO_LEFT = 'M.5,0 L.5,.5 L0,.5',
+  /** ┐ */ LEFT_TO_BOTTOM = 'M0,.5 L.5,.5 L.5,1',
+  /** ┌ */ RIGHT_TO_BOTTOM = 'M0.5,1 L.5,.5 L1,.5',
+
+  /** ╵ */ MIDDLE_TO_TOP = 'M.5,.5 L.5,0',
+  /** ╴ */ MIDDLE_TO_LEFT = 'M.5,.5 L0,.5',
+  /** ╶ */ MIDDLE_TO_RIGHT = 'M.5,.5 L1,.5',
+  /** ╷ */ MIDDLE_TO_BOTTOM = 'M.5,.5 L.5,1',
+
+  /** ┴ */ T_TOP = 'M0,.5 L1,.5 M.5,.5 L.5,0',
+  /** ┤ */ T_LEFT = 'M.5,0 L.5,1 M.5,.5 L0,.5',
+  /** ├ */ T_RIGHT = 'M.5,0 L.5,1 M.5,.5 L1,.5',
+  /** ┬ */ T_BOTTOM = 'M0,.5 L1,.5 M.5,.5 L.5,1',
+
+  /** ┼ */ CROSS = 'M0,.5 L1,.5 M.5,0 L.5,1',
+
+  /** ╌ */ TWO_DASHES_HORIZONTAL = 'M.1,.5 L.4,.5 M.6,.5 L.9,.5', // .2 empty, .3 filled
+  /** ┄ */ THREE_DASHES_HORIZONTAL = 'M.0667,.5 L.2667,.5 M.4,.5 L.6,.5 M.7333,.5 L.9333,.5', // .1333 empty, .2 filled
+  /** ┉ */ FOUR_DASHES_HORIZONTAL = 'M.05,.5 L.2,.5 M.3,.5 L.45,.5 M.55,.5 L.7,.5 M.8,.5 L.95,.5', // .1 empty, .15 filled
+  /** ╎ */ TWO_DASHES_VERTICAL = 'M.5,.1 L.5,.4 M.5,.6 L.5,.9',
+  /** ┆ */ THREE_DASHES_VERTICAL = 'M.5,.0667 L.5,.2667 M.5,.4 L.5,.6 M.5,.7333 L.5,.9333',
+  /** ┊ */ FOUR_DASHES_VERTICAL = 'M.5,.05 L.5,.2 M.5,.3 L.5,.45 L.5,.55 M.5,.7 L.5,.95',
+}
+
+const enum Style {
+  NORMAL = 1,
+  BOLD = 3
+}
+
+/**
+ * This contains the definitions of all box drawing characters in the format of SVG paths (ie. the
+ * svg d attribute).
+ */
+export const boxDrawingDefinitions: { [character: string]: { [fontWeight: number]: string | ((xp: number, yp: number) => string) } | undefined } = {
+  // Uniform normal and bold
+  '─': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT },
+  '━': { [Style.BOLD]:   Shapes.LEFT_TO_RIGHT },
+  '│': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM },
+  '┃': { [Style.BOLD]:   Shapes.TOP_TO_BOTTOM },
+  '┌': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM },
+  '┏': { [Style.BOLD]:   Shapes.RIGHT_TO_BOTTOM },
+  '┐': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM },
+  '┓': { [Style.BOLD]:   Shapes.LEFT_TO_BOTTOM },
+  '└': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT },
+  '┗': { [Style.BOLD]:   Shapes.TOP_TO_RIGHT },
+  '┘': { [Style.NORMAL]: Shapes.TOP_TO_LEFT },
+  '┛': { [Style.BOLD]:   Shapes.TOP_TO_LEFT },
+  '├': { [Style.NORMAL]: Shapes.T_RIGHT },
+  '┣': { [Style.BOLD]:   Shapes.T_RIGHT },
+  '┤': { [Style.NORMAL]: Shapes.T_LEFT },
+  '┫': { [Style.BOLD]:   Shapes.T_LEFT },
+  '┬': { [Style.NORMAL]: Shapes.T_BOTTOM },
+  '┳': { [Style.BOLD]:   Shapes.T_BOTTOM },
+  '┴': { [Style.NORMAL]: Shapes.T_TOP },
+  '┻': { [Style.BOLD]:   Shapes.T_TOP },
+  '┼': { [Style.NORMAL]: Shapes.CROSS },
+  '╋': { [Style.BOLD]:   Shapes.CROSS },
+  '╴': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT },
+  '╸': { [Style.BOLD]:   Shapes.MIDDLE_TO_LEFT },
+  '╵': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP },
+  '╹': { [Style.BOLD]:   Shapes.MIDDLE_TO_TOP },
+  '╶': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT },
+  '╺': { [Style.BOLD]:   Shapes.MIDDLE_TO_RIGHT },
+  '╷': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM },
+  '╻': { [Style.BOLD]:   Shapes.MIDDLE_TO_BOTTOM },
+
+  // Double border
+  '═': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '║': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╒': { [Style.NORMAL]: (xp, yp) => `M.5,1 L.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` },
+  '╓': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},1 L${.5 - xp},.5 L1,.5 M${.5 + xp},.5 L${.5 + xp},1` },
+  '╔': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` },
+  '╕': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L.5,${.5 - yp} L.5,1 M0,${.5 + yp} L.5,${.5 + yp}` },
+  '╖': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},1 L${.5 + xp},.5 L0,.5 M${.5 - xp},.5 L${.5 - xp},1` },
+  '╗': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},1` },
+  '╘': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 + yp} L1,${.5 + yp} M.5,${.5 - yp} L1,${.5 - yp}` },
+  '╙': { [Style.NORMAL]: (xp, yp) => `M1,.5 L${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` },
+  '╚': { [Style.NORMAL]: (xp, yp) => `M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0 M1,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},0` },
+  '╛': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L.5,${.5 + yp} L.5,0 M0,${.5 - yp} L.5,${.5 - yp}` },
+  '╜': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 + xp},.5 L${.5 + xp},0 M${.5 - xp},.5 L${.5 - xp},0` },
+  '╝': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M0,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},0` },
+  '╞': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M.5,${.5 - yp} L1,${.5 - yp} M.5,${.5 + yp} L1,${.5 + yp}` },
+  '╟': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1 M${.5 + xp},.5 L1,.5` },
+  '╠': { [Style.NORMAL]: (xp, yp) => `M${.5 - xp},0 L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+  '╡': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L.5,${.5 - yp} M0,${.5 + yp} L.5,${.5 + yp}` },
+  '╢': { [Style.NORMAL]: (xp, yp) => `M0,.5 L${.5 - xp},.5 M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╣': { [Style.NORMAL]: (xp, yp) => `M${.5 + xp},0 L${.5 + xp},1 M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0` },
+  '╤': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp} M.5,${.5 + yp} L.5,1` },
+  '╥': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},1 M${.5 + xp},.5 L${.5 + xp},1` },
+  '╦': { [Style.NORMAL]: (xp, yp) => `M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1` },
+  '╧': { [Style.NORMAL]: (xp, yp) => `M.5,0 L.5,${.5 - yp} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '╨': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},.5 L${.5 - xp},0 M${.5 + xp},.5 L${.5 + xp},0` },
+  '╩': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L1,${.5 + yp} M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+  '╪': { [Style.NORMAL]: (xp, yp) => `${Shapes.TOP_TO_BOTTOM} M0,${.5 - yp} L1,${.5 - yp} M0,${.5 + yp} L1,${.5 + yp}` },
+  '╫': { [Style.NORMAL]: (xp, yp) => `${Shapes.LEFT_TO_RIGHT} M${.5 - xp},0 L${.5 - xp},1 M${.5 + xp},0 L${.5 + xp},1` },
+  '╬': { [Style.NORMAL]: (xp, yp) => `M0,${.5 + yp} L${.5 - xp},${.5 + yp} L${.5 - xp},1 M1,${.5 + yp} L${.5 + xp},${.5 + yp} L${.5 + xp},1 M0,${.5 - yp} L${.5 - xp},${.5 - yp} L${.5 - xp},0 M1,${.5 - yp} L${.5 + xp},${.5 - yp} L${.5 + xp},0` },
+
+  // Diagonal
+  '╱': { [Style.NORMAL]: 'M1,0 L0,1' },
+  '╲': { [Style.NORMAL]: 'M0,0 L1,1' },
+  '╳': { [Style.NORMAL]: 'M1,0 L0,1 M0,0 L1,1' },
+
+  // Mixed weight
+  '╼': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '╽': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '╾': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '╿': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┍': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┎': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┑': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┒': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┕': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┖': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┙': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┚': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┝': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┞': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┟': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┠': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '┡': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '┢': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '┥': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┦': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┧': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┨': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '┩': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '┪': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '┭': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┮': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┯': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '┰': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '┱': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '┲': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '┵': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┶': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┷': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '┸': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '┹': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '┺': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '┽': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}`,  [Style.BOLD]: Shapes.MIDDLE_TO_LEFT },
+  '┾': { [Style.NORMAL]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}`,   [Style.BOLD]: Shapes.MIDDLE_TO_RIGHT },
+  '┿': { [Style.NORMAL]: Shapes.TOP_TO_BOTTOM,                                 [Style.BOLD]: Shapes.LEFT_TO_RIGHT },
+  '╀': { [Style.NORMAL]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}`, [Style.BOLD]: Shapes.MIDDLE_TO_TOP },
+  '╁': { [Style.NORMAL]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}`,    [Style.BOLD]: Shapes.MIDDLE_TO_BOTTOM },
+  '╂': { [Style.NORMAL]: Shapes.LEFT_TO_RIGHT,                                 [Style.BOLD]: Shapes.TOP_TO_BOTTOM },
+  '╃': { [Style.NORMAL]: Shapes.RIGHT_TO_BOTTOM,                               [Style.BOLD]: Shapes.TOP_TO_LEFT },
+  '╄': { [Style.NORMAL]: Shapes.LEFT_TO_BOTTOM,                                [Style.BOLD]: Shapes.TOP_TO_RIGHT },
+  '╅': { [Style.NORMAL]: Shapes.TOP_TO_RIGHT,                                  [Style.BOLD]: Shapes.LEFT_TO_BOTTOM },
+  '╆': { [Style.NORMAL]: Shapes.TOP_TO_LEFT,                                   [Style.BOLD]: Shapes.RIGHT_TO_BOTTOM },
+  '╇': { [Style.NORMAL]: Shapes.MIDDLE_TO_BOTTOM,                              [Style.BOLD]: `${Shapes.MIDDLE_TO_TOP} ${Shapes.LEFT_TO_RIGHT}` },
+  '╈': { [Style.NORMAL]: Shapes.MIDDLE_TO_TOP,                                 [Style.BOLD]: `${Shapes.LEFT_TO_RIGHT} ${Shapes.MIDDLE_TO_BOTTOM}` },
+  '╉': { [Style.NORMAL]: Shapes.MIDDLE_TO_RIGHT,                               [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_LEFT}` },
+  '╊': { [Style.NORMAL]: Shapes.MIDDLE_TO_LEFT,                                [Style.BOLD]: `${Shapes.TOP_TO_BOTTOM} ${Shapes.MIDDLE_TO_RIGHT}` },
+
+  // Dashed
+  '╌': { [Style.NORMAL]: Shapes.TWO_DASHES_HORIZONTAL },
+  '╍': { [Style.BOLD]:   Shapes.TWO_DASHES_HORIZONTAL },
+  '┄': { [Style.NORMAL]: Shapes.THREE_DASHES_HORIZONTAL },
+  '┅': { [Style.BOLD]:   Shapes.THREE_DASHES_HORIZONTAL },
+  '┈': { [Style.NORMAL]: Shapes.FOUR_DASHES_HORIZONTAL },
+  '┉': { [Style.BOLD]:   Shapes.FOUR_DASHES_HORIZONTAL },
+  '╎': { [Style.NORMAL]: Shapes.TWO_DASHES_VERTICAL },
+  '╏': { [Style.BOLD]:   Shapes.TWO_DASHES_VERTICAL },
+  '┆': { [Style.NORMAL]: Shapes.THREE_DASHES_VERTICAL  },
+  '┇': { [Style.BOLD]:   Shapes.THREE_DASHES_VERTICAL },
+  '┊': { [Style.NORMAL]: Shapes.FOUR_DASHES_VERTICAL },
+  '┋': { [Style.BOLD]:   Shapes.FOUR_DASHES_VERTICAL },
+
+  // Curved
+  '╭': { [Style.NORMAL]: 'C.5,1,.5,.5,1,.5' },
+  '╮': { [Style.NORMAL]: 'C.5,1,.5,.5,0,.5' },
+  '╯': { [Style.NORMAL]: 'C.5,0,.5,.5,0,.5' },
+  '╰': { [Style.NORMAL]: 'C.5,0,.5,.5,1,.5' }
+};
+
+/**
+ * Try drawing a custom block element or box drawing character, returning whether it was
+ * successfully drawn.
+ */
+export function tryDrawCustomChar(
+  ctx: CanvasRenderingContext2D,
+  c: string,
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): boolean {
+  const blockElementDefinition = blockElementDefinitions[c];
+  if (blockElementDefinition) {
+    drawBlockElementChar(ctx, blockElementDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  const patternDefinition = patternCharacterDefinitions[c];
+  if (patternDefinition) {
+    drawPatternChar(ctx, patternDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  const boxDrawingDefinition = boxDrawingDefinitions[c];
+  if (boxDrawingDefinition) {
+    drawBoxDrawingChar(ctx, boxDrawingDefinition, xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+    return true;
+  }
+
+  return false;
+}
+
+function drawBlockElementChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: IBlockVector[],
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  for (let i = 0; i < charDefinition.length; i++) {
+    const box = charDefinition[i];
+    const xEighth = scaledCellWidth / 8;
+    const yEighth = scaledCellHeight / 8;
+    ctx.fillRect(
+      xOffset + box.x * xEighth,
+      yOffset + box.y * yEighth,
+      box.w * xEighth,
+      box.h * yEighth
+    );
+  }
+}
+
+const cachedPatterns: Map<PatternDefinition, Map</* fillStyle */string, CanvasPattern>> = new Map();
+
+function drawPatternChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: number[][],
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  let patternSet = cachedPatterns.get(charDefinition);
+  if (!patternSet) {
+    patternSet = new Map();
+    cachedPatterns.set(charDefinition, patternSet);
+  }
+  const fillStyle = ctx.fillStyle;
+  if (typeof fillStyle !== 'string') {
+    throw new Error(`Unexpected fillStyle type "${fillStyle}"`);
+  }
+  let pattern = patternSet.get(fillStyle);
+  if (!pattern) {
+    const width = charDefinition[0].length;
+    const height = charDefinition.length;
+    const tmpCanvas = document.createElement('canvas');
+    tmpCanvas.width = width;
+    tmpCanvas.height = height;
+    const tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d'));
+    const imageData = new ImageData(width, height);
+
+    // Extract rgba from fillStyle
+    let r: number;
+    let g: number;
+    let b: number;
+    let a: number;
+    if (fillStyle.startsWith('#')) {
+      r = parseInt(fillStyle.substr(1, 2), 16);
+      g = parseInt(fillStyle.substr(3, 2), 16);
+      b = parseInt(fillStyle.substr(5, 2), 16);
+      a = fillStyle.length > 7 && parseInt(fillStyle.substr(7, 2), 16) || 1;
+    } else if (fillStyle.startsWith('rgba')) {
+      ([r, g, b, a] = fillStyle.substring(5, fillStyle.length - 1).split(',').map(e => parseFloat(e)));
+    } else {
+      throw new Error(`Unexpected fillStyle color format "${fillStyle}" when drawing pattern glyph`);
+    }
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        imageData.data[(y * width + x) * 4    ] = r;
+        imageData.data[(y * width + x) * 4 + 1] = g;
+        imageData.data[(y * width + x) * 4 + 2] = b;
+        imageData.data[(y * width + x) * 4 + 3] = charDefinition[y][x] * (a * 255);
+      }
+    }
+    tmpCtx.putImageData(imageData, 0, 0);
+    pattern = throwIfFalsy(ctx.createPattern(tmpCanvas, null));
+    patternSet.set(fillStyle, pattern);
+  }
+  ctx.fillStyle = pattern;
+  ctx.fillRect(xOffset, yOffset, scaledCellWidth, scaledCellHeight);
+}
+
+/**
+ * Draws the following box drawing characters by mapping a subset of SVG d attribute instructions to
+ * canvas draw calls.
+ *
+ * Box styles:       ┎┰┒┍┯┑╓╥╖╒╤╕ ┏┳┓┌┲┓┌┬┐┏┱┐
+ * ┌─┬─┐ ┏━┳━┓ ╔═╦═╗ ┠╂┨┝┿┥╟╫╢╞╪╡ ┡╇┩├╊┫┢╈┪┣╉┤
+ * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┖┸┚┕┷┙╙╨╜╘╧╛ └┴┘└┺┛┗┻┛┗┹┘
+ * ├─┼─┤ ┣━╋━┫ ╠═╬═╣ ┏┱┐┌┲┓┌┬┐┌┬┐ ┏┳┓┌┮┓┌┬┐┏┭┐
+ * │ │ │ ┃ ┃ ┃ ║ ║ ║ ┡╃┤├╄┩├╆┪┢╅┤ ┞╀┦├┾┫┟╁┧┣┽┤
+ * └─┴─┘ ┗━┻━┛ ╚═╩═╝ └┴┘└┴┘└┺┛┗┹┘ └┴┘└┶┛┗┻┛┗┵┘
+ *
+ * Other:
+ * ╭─╮ ╲ ╱ ╷╻╎╏┆┇┊┋ ╺╾╴ ╌╌╌ ┄┄┄ ┈┈┈
+ * │ │  ╳  ╽╿╎╏┆┇┊┋ ╶╼╸ ╍╍╍ ┅┅┅ ┉┉┉
+ * ╰─╯ ╱ ╲ ╹╵╎╏┆┇┊┋
+ *
+ * All box drawing characters:
+ * ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏
+ * ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟
+ * ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯
+ * ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿
+ * ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏
+ * ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟
+ * ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯
+ * ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿
+ *
+ * ---
+ *
+ * Box drawing alignment tests:                                          █
+ *                                                                       ▉
+ *   ╔══╦══╗  ┌──┬──┐  ╭──┬──╮  ╭──┬──╮  ┏━━┳━━┓  ┎┒┏┑   ╷  ╻ ┏┯┓ ┌┰┐    ▊ ╱╲╱╲╳╳╳
+ *   ║┌─╨─┐║  │╔═╧═╗│  │╒═╪═╕│  │╓─╁─╖│  ┃┌─╂─┐┃  ┗╃╄┙  ╶┼╴╺╋╸┠┼┨ ┝╋┥    ▋ ╲╱╲╱╳╳╳
+ *   ║│╲ ╱│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╿ │┃  ┍╅╆┓   ╵  ╹ ┗┷┛ └┸┘    ▌ ╱╲╱╲╳╳╳
+ *   ╠╡ ╳ ╞╣  ├╢   ╟┤  ├┼─┼─┼┤  ├╫─╂─╫┤  ┣┿╾┼╼┿┫  ┕┛┖┚     ┌┄┄┐ ╎ ┏┅┅┓ ┋ ▍ ╲╱╲╱╳╳╳
+ *   ║│╱ ╲│║  │║   ║│  ││ │ ││  │║ ┃ ║│  ┃│ ╽ │┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▎
+ *   ║└─╥─┘║  │╚═╤═╝│  │╘═╪═╛│  │╙─╀─╜│  ┃└─╂─┘┃  ░░▒▒▓▓██ ┊  ┆ ╎ ╏  ┇ ┋ ▏
+ *   ╚══╩══╝  └──┴──┘  ╰──┴──╯  ╰──┴──╯  ┗━━┻━━┛           └╌╌┘ ╎ ┗╍╍┛ ┋  ▁▂▃▄▅▆▇█
+ *
+ * Source: https://www.w3.org/2001/06/utf-8-test/UTF-8-demo.html
+ */
+function drawBoxDrawingChar(
+  ctx: CanvasRenderingContext2D,
+  charDefinition: { [fontWeight: number]: string | ((xp: number, yp: number) => string) },
+  xOffset: number,
+  yOffset: number,
+  scaledCellWidth: number,
+  scaledCellHeight: number
+): void {
+  ctx.strokeStyle = ctx.fillStyle;
+  for (const [fontWeight, instructions] of Object.entries(charDefinition)) {
+    ctx.beginPath();
+    ctx.lineWidth = window.devicePixelRatio * Number.parseInt(fontWeight);
+    let actualInstructions: string;
+    if (typeof instructions === 'function') {
+      const xp = .15;
+      const yp = .15 / scaledCellHeight * scaledCellWidth;
+      actualInstructions = instructions(xp, yp);
+    } else {
+      actualInstructions = instructions;
+    }
+    for (const instruction of actualInstructions.split(' ')) {
+      const type = instruction[0];
+      const f = svgToCanvasInstructionMap[type];
+      if (!f) {
+        console.error(`Could not find drawing instructions for "${type}"`);
+        continue;
+      }
+      const args: string[] = instruction.substring(1).split(',');
+      if (!args[0] || !args[1]) {
+        continue;
+      }
+      f(ctx, translateArgs(args, scaledCellWidth, scaledCellHeight, xOffset, yOffset));
+    }
+    ctx.stroke();
+    ctx.closePath();
+  }
+}
+
+function clamp(value: number, max: number, min: number = 0): number {
+  return Math.max(Math.min(value, max), min);
+}
+
+const svgToCanvasInstructionMap: { [index: string]: any } = {
+  'C': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.bezierCurveTo(args[0], args[1], args[2], args[3], args[4], args[5]),
+  'L': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.lineTo(args[0], args[1]),
+  'M': (ctx: CanvasRenderingContext2D, args: number[]) => ctx.moveTo(args[0], args[1])
+};
+
+function translateArgs(args: string[], cellWidth: number, cellHeight: number, xOffset: number, yOffset: number): number[] {
+  const result = args.map(e => parseFloat(e) || parseInt(e));
+
+  if (result.length < 2) {
+    throw new Error('Too few arguments for instruction');
+  }
+
+  for (let x = 0; x < result.length; x += 2) {
+    // Translate from 0-1 to 0-cellWidth
+    result[x] *= cellWidth;
+    // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
+    // line at 100% devicePixelRatio
+    if (result[x] !== 0) {
+      result[x] = clamp(Math.round(result[x] + 0.5) - 0.5, cellWidth, 0);
+    }
+    // Apply the cell's offset (ie. x*cellWidth)
+    result[x] += xOffset;
+  }
+
+  for (let y = 1; y < result.length; y += 2) {
+    // Translate from 0-1 to 0-cellHeight
+    result[y] *= cellHeight;
+    // Ensure coordinate doesn't escape cell bounds and round to the nearest 0.5 to ensure a crisp
+    // line at 100% devicePixelRatio
+    if (result[y] !== 0) {
+      result[y] = clamp(Math.round(result[y] + 0.5) - 0.5, cellHeight, 0);
+    }
+    // Apply the cell's offset (ie. x*cellHeight)
+    result[y] += yOffset;
+  }
+
+  return result;
+}

src/browser/renderer/LinkRenderLayer.ts

@@ -20,8 +20,8 @@ export class LinkRenderLayer extends BaseRenderLayer {
     rendererId: number,
     linkifier: ILinkifier,
     linkifier2: ILinkifier2,
-    bufferService: IBufferService,
-    optionsService: IOptionsService
+    @IBufferService bufferService: IBufferService,
+    @IOptionsService optionsService: IOptionsService
   ) {
     super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService);
     linkifier.onShowLinkUnderline(e => this._onShowLinkUnderline(e));

src/browser/renderer/Renderer.ts

@@ -6,13 +6,12 @@
 import { TextRenderLayer } from 'browser/renderer/TextRenderLayer';
 import { SelectionRenderLayer } from 'browser/renderer/SelectionRenderLayer';
 import { CursorRenderLayer } from 'browser/renderer/CursorRenderLayer';
-import { IRenderLayer, IRenderer, IRenderDimensions, CharacterJoinerHandler, ICharacterJoinerRegistry, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { IRenderLayer, IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
-import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
-import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services';
+import { IBufferService, IOptionsService, ICoreService, IInstantiationService } from 'common/services/Services';
 import { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 
@@ -23,7 +22,6 @@ export class Renderer extends Disposable implements IRenderer {
 
   private _renderLayers: IRenderLayer[];
   private _devicePixelRatio: number;
-  private _characterJoinerRegistry: ICharacterJoinerRegistry;
 
   public dimensions: IRenderDimensions;
 
@@ -35,20 +33,18 @@ export class Renderer extends Disposable implements IRenderer {
     private readonly _screenElement: HTMLElement,
     linkifier: ILinkifier,
     linkifier2: ILinkifier2,
+    @IInstantiationService instantiationService: IInstantiationService,
     @IBufferService private readonly _bufferService: IBufferService,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
-    @IOptionsService private readonly _optionsService: IOptionsService,
-    @ICoreService coreService: ICoreService,
-    @ICoreBrowserService coreBrowserService: ICoreBrowserService
+    @IOptionsService private readonly _optionsService: IOptionsService
   ) {
     super();
     const allowTransparency = this._optionsService.options.allowTransparency;
-    this._characterJoinerRegistry = new CharacterJoinerRegistry(this._bufferService);
     this._renderLayers = [
-      new TextRenderLayer(this._screenElement, 0, this._colors, this._characterJoinerRegistry, allowTransparency, this._id, this._bufferService, _optionsService),
-      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, _optionsService),
-      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier, linkifier2, this._bufferService, _optionsService),
-      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, _optionsService, coreService, coreBrowserService)
+      instantiationService.createInstance(TextRenderLayer, this._screenElement, 0, this._colors, allowTransparency, this._id),
+      instantiationService.createInstance(SelectionRenderLayer, this._screenElement, 1, this._colors, this._id),
+      instantiationService.createInstance(LinkRenderLayer, this._screenElement, 2, this._colors, this._id, linkifier, linkifier2),
+      instantiationService.createInstance(CursorRenderLayer, this._screenElement, 3, this._colors, this._id, this._onRequestRedraw)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -210,12 +206,4 @@ export class Renderer extends Disposable implements IRenderer {
     this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._bufferService.rows;
     this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._bufferService.cols;
   }
-
-  public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
-    return this._characterJoinerRegistry.registerCharacterJoiner(handler);
-  }
-
-  public deregisterCharacterJoiner(joinerId: number): boolean {
-    return this._characterJoinerRegistry.deregisterCharacterJoiner(joinerId);
-  }
 }

src/browser/renderer/SelectionRenderLayer.ts

@@ -23,8 +23,8 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     zIndex: number,
     colors: IColorSet,
     rendererId: number,
-    bufferService: IBufferService,
-    optionsService: IOptionsService
+    @IBufferService bufferService: IBufferService,
+    @IOptionsService optionsService: IOptionsService
   ) {
     super(container, 'selection', zIndex, true, colors, rendererId, bufferService, optionsService);
     this._clearState();

src/browser/renderer/TextRenderLayer.ts

@@ -3,16 +3,17 @@
  * @license MIT
  */
 
-import { ICharacterJoinerRegistry, IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
 import { CharData, ICellData } from 'common/Types';
 import { GridCache } from 'browser/renderer/GridCache';
 import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { NULL_CELL_CODE, Content } from 'common/buffer/Constants';
-import { JoinedCellData } from 'browser/renderer/CharacterJoinerRegistry';
 import { IColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IOptionsService, IBufferService } from 'common/services/Services';
+import { ICharacterJoinerService } from 'browser/services/Services';
+import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 
 /**
  * This CharData looks like a null character, which will forc a clear and render
@@ -26,22 +27,20 @@ export class TextRenderLayer extends BaseRenderLayer {
   private _characterWidth: number = 0;
   private _characterFont: string = '';
   private _characterOverlapCache: { [key: string]: boolean } = {};
-  private _characterJoinerRegistry: ICharacterJoinerRegistry;
   private _workCell = new CellData();
 
   constructor(
     container: HTMLElement,
     zIndex: number,
     colors: IColorSet,
-    characterJoinerRegistry: ICharacterJoinerRegistry,
     alpha: boolean,
     rendererId: number,
-    bufferService: IBufferService,
-    optionsService: IOptionsService
+    @IBufferService bufferService: IBufferService,
+    @IOptionsService optionsService: IOptionsService,
+    @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService
   ) {
     super(container, 'text', zIndex, alpha, colors, rendererId, bufferService, optionsService);
     this._state = new GridCache<CharData>();
-    this._characterJoinerRegistry = characterJoinerRegistry;
   }
 
   public resize(dim: IRenderDimensions): void {
@@ -67,7 +66,6 @@ export class TextRenderLayer extends BaseRenderLayer {
   private _forEachCell(
     firstRow: number,
     lastRow: number,
-    joinerRegistry: ICharacterJoinerRegistry | null,
     callback: (
       cell: ICellData,
       x: number,
@@ -77,7 +75,7 @@ export class TextRenderLayer extends BaseRenderLayer {
     for (let y = firstRow; y <= lastRow; y++) {
       const row = y + this._bufferService.buffer.ydisp;
       const line = this._bufferService.buffer.lines.get(row);
-      const joinedRanges = joinerRegistry ? joinerRegistry.getJoinedCharacters(row) : [];
+      const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
       for (let x = 0; x < this._bufferService.cols; x++) {
         line!.loadCell(x, this._workCell);
         let cell = this._workCell;
@@ -101,7 +99,6 @@ export class TextRenderLayer extends BaseRenderLayer {
 
           // We already know the exact start and end column of the joined range,
           // so we get the string and width representing it directly
-
           cell = new JoinedCellData(
             this._workCell,
             line!.translateToString(true, range[0], range[1]),
@@ -160,7 +157,7 @@ export class TextRenderLayer extends BaseRenderLayer {
 
     ctx.save();
 
-    this._forEachCell(firstRow, lastRow, null, (cell, x, y) => {
+    this._forEachCell(firstRow, lastRow, (cell, x, y) => {
       // libvte and xterm both draw the background (but not foreground) of invisible characters,
       // so we should too.
       let nextFillStyle = null; // null represents default background color
@@ -213,12 +210,12 @@ export class TextRenderLayer extends BaseRenderLayer {
   }
 
   private _drawForeground(firstRow: number, lastRow: number): void {
-    this._forEachCell(firstRow, lastRow, this._characterJoinerRegistry, (cell, x, y) => {
+    this._forEachCell(firstRow, lastRow, (cell, x, y) => {
       if (cell.isInvisible()) {
         return;
       }
       this._drawChars(cell, x, y);
-      if (cell.isUnderline()) {
+      if (cell.isUnderline() || cell.isStrikethrough()) {
         this._ctx.save();
 
         if (cell.isInverse()) {
@@ -247,7 +244,12 @@ export class TextRenderLayer extends BaseRenderLayer {
           }
         }
 
-        this._fillBottomLineAtCells(x, y, cell.getWidth());
+        if (cell.isStrikethrough()) {
+          this._fillMiddleLineAtCells(x, y, cell.getWidth());
+        }
+        if (cell.isUnderline()) {
+          this._fillBottomLineAtCells(x, y, cell.getWidth());
+        }
         this._ctx.restore();
       }
     });

src/browser/renderer/Types.d.ts

@@ -7,8 +7,6 @@ import { IDisposable } from 'common/Types';
 import { IColorSet } from 'browser/Types';
 import { IEvent } from 'common/EventEmitter';
 
-export type CharacterJoinerHandler = (text: string) => [number, number][];
-
 export interface IRenderDimensions {
   scaledCharWidth: number;
   scaledCharHeight: number;
@@ -54,19 +52,6 @@ export interface IRenderer extends IDisposable {
   onOptionsChanged(): void;
   clear(): void;
   renderRows(start: number, end: number): void;
-  registerCharacterJoiner(handler: CharacterJoinerHandler): number;
-  deregisterCharacterJoiner(joinerId: number): boolean;
-}
-
-export interface ICharacterJoiner {
-  id: number;
-  handler: CharacterJoinerHandler;
-}
-
-export interface ICharacterJoinerRegistry {
-  registerCharacterJoiner(handler: (text: string) => [number, number][]): number;
-  deregisterCharacterJoiner(joinerId: number): boolean;
-  getJoinedCharacters(row: number): [number, number][];
 }
 
 export interface IRenderLayer extends IDisposable {
@@ -106,16 +91,6 @@ export interface IRenderLayer extends IDisposable {
    */
   onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
 
-  /**
-   * Registers a handler to join characters to render as a group
-   */
-  registerCharacterJoiner?(joiner: ICharacterJoiner): void;
-
-  /**
-   * Deregisters the specified character joiner handler
-   */
-  deregisterCharacterJoiner?(joinerId: number): void;
-
   /**
    * Resize the render layer.
    */

src/browser/renderer/atlas/CharAtlasUtils.ts

@@ -10,7 +10,7 @@ import { ITerminalOptions } from 'common/services/Services';
 
 export function generateConfig(scaledCharWidth: number, scaledCharHeight: number, options: ITerminalOptions, colors: IColorSet): ICharAtlasConfig {
   // null out some fields that don't matter
-  const clonedColors = <IPartialColorSet>{
+  const clonedColors: IPartialColorSet = {
     foreground: colors.foreground,
     background: colors.background,
     cursor: undefined,

src/browser/renderer/atlas/DynamicCharAtlas.ts

@@ -91,12 +91,12 @@ export class DynamicCharAtlas extends BaseCharAtlas {
     // The canvas needs alpha because we use clearColor to convert the background color to alpha.
     // It might also contain some characters with transparent backgrounds if allowTransparency is
     // set.
-    this._cacheCtx = throwIfFalsy(this._cacheCanvas.getContext('2d', {alpha: true}));
+    this._cacheCtx = throwIfFalsy(this._cacheCanvas.getContext('2d', { alpha: true }));
 
     const tmpCanvas = document.createElement('canvas');
     tmpCanvas.width = this._config.scaledCharWidth;
     tmpCanvas.height = this._config.scaledCharHeight;
-    this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency}));
+    this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
 
     this._width = Math.floor(TEXTURE_WIDTH / this._config.scaledCharWidth);
     this._height = Math.floor(TEXTURE_HEIGHT / this._config.scaledCharHeight);
@@ -256,7 +256,7 @@ export class DynamicCharAtlas extends BaseCharAtlas {
     const fontStyle = glyph.italic ? 'italic' : '';
     this._tmpCtx.font =
       `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
-    this._tmpCtx.textBaseline = 'middle';
+    this._tmpCtx.textBaseline = 'ideographic';
 
     this._tmpCtx.fillStyle = this._getForegroundColor(glyph).css;
 
@@ -265,12 +265,11 @@ export class DynamicCharAtlas extends BaseCharAtlas {
       this._tmpCtx.globalAlpha = DIM_OPACITY;
     }
     // Draw the character
-    this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight / 2);
-    this._tmpCtx.restore();
+    this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight);
 
     // clear the background from the character to avoid issues with drawing over the previous
     // character if it extends past it's bounds
-    const imageData = this._tmpCtx.getImageData(
+    let imageData = this._tmpCtx.getImageData(
       0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
     );
     let isEmpty = false;
@@ -278,6 +277,27 @@ export class DynamicCharAtlas extends BaseCharAtlas {
       isEmpty = clearColor(imageData, backgroundColor);
     }
 
+    // If this charcater is underscore and empty, shift it up until it is visible, try for a maximum
+    // of 5 pixels.
+    if (isEmpty && glyph.chars === '_' && !this._config.allowTransparency) {
+      for (let offset = 1; offset <= 5; offset++) {
+        // Draw the character
+        this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight - offset);
+
+        // clear the background from the character to avoid issues with drawing over the previous
+        // character if it extends past it's bounds
+        imageData = this._tmpCtx.getImageData(
+          0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
+        );
+        isEmpty = clearColor(imageData, backgroundColor);
+        if (!isEmpty) {
+          break;
+        }
+      }
+    }
+
+    this._tmpCtx.restore();
+
     // copy the data from imageData to _cacheCanvas
     const x = this._toCoordinateX(index);
     const y = this._toCoordinateY(index);

src/browser/renderer/dom/DomRenderer.ts

@@ -3,13 +3,13 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifierEvent, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
-import { IOptionsService, IBufferService } from 'common/services/Services';
+import { IOptionsService, IBufferService, IInstantiationService } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { color } from 'browser/Color';
 import { removeElementFromParent } from 'browser/Dom';
@@ -49,6 +49,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     private readonly _viewportElement: HTMLElement,
     private readonly _linkifier: ILinkifier,
     private readonly _linkifier2: ILinkifier2,
+    @IInstantiationService instantiationService: IInstantiationService,
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IOptionsService private readonly _optionsService: IOptionsService,
     @IBufferService private readonly _bufferService: IBufferService
@@ -80,7 +81,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     this._updateDimensions();
     this._injectCss();
 
-    this._rowFactory = new DomRendererRowFactory(document, this._optionsService, this._colors);
+    this._rowFactory = instantiationService.createInstance(DomRendererRowFactory, document, this._colors);
 
     this._element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
     this._screenElement.appendChild(this._rowContainer);
@@ -364,7 +365,7 @@ export class DomRenderer extends Disposable implements IRenderer {
       const row = y + this._bufferService.buffer.ydisp;
       const lineData = this._bufferService.buffer.lines.get(row);
       const cursorStyle = this._optionsService.options.cursorStyle;
-      rowElement.appendChild(this._rowFactory.createRow(lineData!, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, this._bufferService.cols));
+      rowElement.appendChild(this._rowFactory.createRow(lineData!, row, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, this._bufferService.cols));
     }
   }
 
@@ -372,9 +373,6 @@ export class DomRenderer extends Disposable implements IRenderer {
     return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`;
   }
 
-  public registerCharacterJoiner(handler: CharacterJoinerHandler): number { return -1; }
-  public deregisterCharacterJoiner(joinerId: number): boolean { return false; }
-
   private _onLinkHover(e: ILinkifierEvent): void {
     this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true);
   }
@@ -389,7 +387,7 @@ export class DomRenderer extends Disposable implements IRenderer {
       if (!row) {
         return;
       }
-      const span = <HTMLElement>row.children[x];
+      const span = row.children[x] as HTMLElement;
       if (span) {
         span.style.textDecoration = enabled ? 'underline' : 'none';
       }

src/browser/renderer/dom/DomRendererRowFactory.test.ts

@@ -12,6 +12,7 @@ import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockOptionsService } from 'common/TestUtils.test';
 import { css } from 'browser/Color';
+import { MockCharacterJoinerService } from 'browser/TestUtils.test';
 
 describe('DomRendererRowFactory', () => {
   let dom: jsdom.JSDOM;
@@ -20,7 +21,7 @@ describe('DomRendererRowFactory', () => {
 
   beforeEach(() => {
     dom = new jsdom.JSDOM('');
-    rowFactory = new DomRendererRowFactory(dom.window.document, new MockOptionsService({ drawBoldTextInBrightColors: true }), {
+    rowFactory = new DomRendererRowFactory(dom.window.document, {
       background: css.toColor('#010101'),
       foreground: css.toColor('#020202'),
       ansi: [
@@ -43,13 +44,13 @@ describe('DomRendererRowFactory', () => {
         css.toColor('#34e2e2'),
         css.toColor('#eeeeec')
       ]
-    } as any);
+    } as any, new MockCharacterJoinerService(), new MockOptionsService({ drawBoldTextInBrightColors: true }));
     lineData = createEmptyLineData(2);
   });
 
   describe('createRow', () => {
     it('should not create anything for an empty row', () => {
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
       assert.equal(getFragmentHtml(fragment),
         ''
       );
@@ -59,7 +60,7 @@ describe('DomRendererRowFactory', () => {
       lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)]));
       // There should be no element for the following "empty" cell
       lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, '', 0, 0]));
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
       assert.equal(getFragmentHtml(fragment),
         '<span style="width: 10px;">語</span>'
       );
@@ -67,7 +68,7 @@ describe('DomRendererRowFactory', () => {
 
     it('should add class for cursor and cursor style', () => {
       for (const style of ['block', 'bar', 'underline']) {
-        const fragment = rowFactory.createRow(lineData, true, style, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           `<span class="xterm-cursor xterm-cursor-${style}"> </span>`
         );
@@ -75,7 +76,7 @@ describe('DomRendererRowFactory', () => {
     });
 
     it('should add class for cursor blink', () => {
-      const fragment = rowFactory.createRow(lineData, true, 'block', 0, true, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, 20);
       assert.equal(getFragmentHtml(fragment),
         `<span class="xterm-cursor xterm-cursor-blink xterm-cursor-block"> </span>`
       );
@@ -84,7 +85,7 @@ describe('DomRendererRowFactory', () => {
     it('should not render cells that go beyond the terminal\'s columns', () => {
       lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)]));
       lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)]));
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 1);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 1);
       assert.equal(getFragmentHtml(fragment),
         '<span>a</span>'
       );
@@ -95,7 +96,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.BOLD;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-bold">a</span>'
         );
@@ -105,7 +106,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.ITALIC;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-italic">a</span>'
         );
@@ -115,7 +116,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.DIM;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-dim">a</span>'
         );
@@ -125,12 +126,22 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.UNDERLINE;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-underline">a</span>'
         );
       });
 
+      it('should add class for strikethrough', () => {
+        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
+        cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.STRIKETHROUGH;
+        lineData.setCell(0, cell);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-strikethrough">a</span>'
+        );
+      });
+
       it('should add classes for 256 foreground colors', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg |= Attributes.CM_P256;
@@ -138,7 +149,7 @@ describe('DomRendererRowFactory', () => {
           cell.fg &= ~Attributes.PCOLOR_MASK;
           cell.fg |= i;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-fg-${i}">a</span>`
           );
@@ -152,7 +163,7 @@ describe('DomRendererRowFactory', () => {
           cell.bg &= ~Attributes.PCOLOR_MASK;
           cell.bg |= i;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-bg-${i}">a</span>`
           );
@@ -164,7 +175,7 @@ describe('DomRendererRowFactory', () => {
         cell.fg |= Attributes.CM_P16 | 2 | FgFlags.INVERSE;
         cell.bg |= Attributes.CM_P16 | 1;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-fg-1 xterm-bg-2">a</span>'
         );
@@ -175,7 +186,7 @@ describe('DomRendererRowFactory', () => {
         cell.fg |= FgFlags.INVERSE;
         cell.bg |= Attributes.CM_P16 | 1;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-fg-1 xterm-bg-257">a</span>'
         );
@@ -185,7 +196,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg |= Attributes.CM_P16 | 1 | FgFlags.INVERSE;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-fg-257 xterm-bg-1">a</span>'
         );
@@ -198,7 +209,7 @@ describe('DomRendererRowFactory', () => {
           cell.fg &= ~Attributes.PCOLOR_MASK;
           cell.fg |= i;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-bold xterm-fg-${i + 8}">a</span>`
           );
@@ -210,7 +221,7 @@ describe('DomRendererRowFactory', () => {
         cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3;
         cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span style="color:#010203;background-color:#040506;">a</span>'
         );
@@ -221,7 +232,7 @@ describe('DomRendererRowFactory', () => {
         cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3 | FgFlags.INVERSE;
         cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span style="color:#040506;background-color:#010203;">a</span>'
         );

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -10,11 +10,14 @@ import { CellData } from 'common/buffer/CellData';
 import { IOptionsService } from 'common/services/Services';
 import { color, rgba } from 'browser/Color';
 import { IColorSet, IColor } from 'browser/Types';
+import { ICharacterJoinerService } from 'browser/services/Services';
+import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 
 export const BOLD_CLASS = 'xterm-bold';
 export const DIM_CLASS = 'xterm-dim';
 export const ITALIC_CLASS = 'xterm-italic';
 export const UNDERLINE_CLASS = 'xterm-underline';
+export const STRIKETHROUGH_CLASS = 'xterm-strikethrough';
 export const CURSOR_CLASS = 'xterm-cursor';
 export const CURSOR_BLINK_CLASS = 'xterm-cursor-blink';
 export const CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block';
@@ -26,8 +29,9 @@ export class DomRendererRowFactory {
 
   constructor(
     private readonly _document: Document,
-    private readonly _optionsService: IOptionsService,
-    private _colors: IColorSet
+    private _colors: IColorSet,
+    @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService,
+    @IOptionsService private readonly _optionsService: IOptionsService
   ) {
   }
 
@@ -35,9 +39,10 @@ export class DomRendererRowFactory {
     this._colors = colors;
   }
 
-  public createRow(lineData: IBufferLine, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cursorBlink: boolean, cellWidth: number, cols: number): DocumentFragment {
+  public createRow(lineData: IBufferLine, row: number, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cursorBlink: boolean, cellWidth: number, cols: number): DocumentFragment {
     const fragment = this._document.createDocumentFragment();
 
+    const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
     // Find the line length first, this prevents the need to output a bunch of
     // empty cells at the end. This cannot easily be integrated into the main
     // loop below because of the colCount feature (which can be removed after we
@@ -53,18 +58,58 @@ export class DomRendererRowFactory {
 
     for (let x = 0; x < lineLength; x++) {
       lineData.loadCell(x, this._workCell);
-      const width = this._workCell.getWidth();
+      let width = this._workCell.getWidth();
 
       // The character to the left is a wide character, drawing is owned by the char at x-1
       if (width === 0) {
         continue;
       }
 
+      // If true, indicates that the current character(s) to draw were joined.
+      let isJoined = false;
+      let lastCharX = x;
+
+      // Process any joined character ranges as needed. Because of how the
+      // ranges are produced, we know that they are valid for the characters
+      // and attributes of our input.
+      let cell = this._workCell;
+      if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
+        isJoined = true;
+        const range = joinedRanges.shift()!;
+
+        // We already know the exact start and end column of the joined range,
+        // so we get the string and width representing it directly
+        cell = new JoinedCellData(
+          this._workCell,
+          lineData.translateToString(true, range[0], range[1]),
+          range[1] - range[0]
+        );
+
+        // Skip over the cells occupied by this range in the loop
+        lastCharX = range[1] - 1;
+
+        // Recalculate width
+        width = cell.getWidth();
+      }
+
       const charElement = this._document.createElement('span');
       if (width > 1) {
         charElement.style.width = `${cellWidth * width}px`;
       }
 
+      if (isJoined) {
+        // Ligatures in the DOM renderer must use display inline, as they may not show with
+        // inline-block if they are outside the bounds of the element
+        charElement.style.display = 'inline';
+
+        // The DOM renderer colors the background of the cursor but for ligatures all cells are
+        // joined. The workaround here is to show a cursor around the whole ligature so it shows up,
+        // the cursor looks the same when on any character of the ligature though
+        if (cursorX >= x && cursorX <= lastCharX) {
+          cursorX = x;
+        }
+      }
+
       if (isCursorRow && x === cursorX) {
         charElement.classList.add(CURSOR_CLASS);
 
@@ -85,33 +130,37 @@ export class DomRendererRowFactory {
         }
       }
 
-      if (this._workCell.isBold()) {
+      if (cell.isBold()) {
         charElement.classList.add(BOLD_CLASS);
       }
 
-      if (this._workCell.isItalic()) {
+      if (cell.isItalic()) {
         charElement.classList.add(ITALIC_CLASS);
       }
 
-      if (this._workCell.isDim()) {
+      if (cell.isDim()) {
         charElement.classList.add(DIM_CLASS);
       }
 
-      if (this._workCell.isUnderline()) {
+      if (cell.isUnderline()) {
         charElement.classList.add(UNDERLINE_CLASS);
       }
 
-      if (this._workCell.isInvisible()) {
+      if (cell.isInvisible()) {
         charElement.textContent = WHITESPACE_CELL_CHAR;
       } else {
-        charElement.textContent = this._workCell.getChars() || WHITESPACE_CELL_CHAR;
+        charElement.textContent = cell.getChars() || WHITESPACE_CELL_CHAR;
       }
 
-      let fg = this._workCell.getFgColor();
-      let fgColorMode = this._workCell.getFgColorMode();
-      let bg = this._workCell.getBgColor();
-      let bgColorMode = this._workCell.getBgColorMode();
-      const isInverse = !!this._workCell.isInverse();
+      if (cell.isStrikethrough()) {
+        charElement.classList.add(STRIKETHROUGH_CLASS);
+      }
+
+      let fg = cell.getFgColor();
+      let fgColorMode = cell.getFgColorMode();
+      let bg = cell.getBgColor();
+      let bgColorMode = cell.getBgColorMode();
+      const isInverse = !!cell.isInverse();
       if (isInverse) {
         const temp = fg;
         fg = bg;
@@ -125,7 +174,7 @@ export class DomRendererRowFactory {
       switch (fgColorMode) {
         case Attributes.CM_P16:
         case Attributes.CM_P256:
-          if (this._workCell.isBold() && fg < 8 && this._optionsService.options.drawBoldTextInBrightColors) {
+          if (cell.isBold() && fg < 8 && this._optionsService.options.drawBoldTextInBrightColors) {
             fg += 8;
           }
           if (!this._applyMinimumContrast(charElement, this._colors.background, this._colors.ansi[fg])) {
@@ -168,6 +217,8 @@ export class DomRendererRowFactory {
       }
 
       fragment.appendChild(charElement);
+
+      x = lastCharX;
     }
     return fragment;
   }

src/browser/services/CharacterJoinerService.test.ts

@@ -4,15 +4,15 @@
  */
 
 import { assert } from 'chai';
-import { ICharacterJoinerRegistry } from 'browser/renderer/Types';
-import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry';
+import { ICharacterJoinerService } from 'browser/services/Services';
+import { CharacterJoinerService } from 'browser/services/CharacterJoinerService';
 import { BufferLine } from 'common/buffer/BufferLine';
 import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockBufferService } from 'common/TestUtils.test';
 
-describe('CharacterJoinerRegistry', () => {
-  let registry: ICharacterJoinerRegistry;
+describe('CharacterJoinerService', () => {
+  let service: ICharacterJoinerService;
 
   beforeEach(() => {
     const bufferService = new MockBufferService(16, 10);
@@ -39,225 +39,225 @@ describe('CharacterJoinerRegistry', () => {
     for (let i = 0; i < sub.length; ++i) line6.setCell(i + oldSize, sub.loadCell(i, new CellData()));
     lines.set(6, line6);
 
-    registry = new CharacterJoinerRegistry(bufferService);
+    service = new CharacterJoinerService(bufferService);
   });
 
   it('has no joiners upon creation', () => {
-    assert.deepEqual(registry.getJoinedCharacters(0), []);
+    assert.deepEqual(service.getJoinedCharacters(0), []);
   });
 
   it('returns ranges matched by the registered joiners', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
     assert.deepEqual(
-      registry.getJoinedCharacters(0),
+      service.getJoinedCharacters(0),
       [[2, 4], [7, 9], [12, 14]]
     );
   });
 
   it('processes the input using all provided joiners', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
     assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
       [[2, 4], [12, 14]]
     );
 
-    registry.registerCharacterJoiner(substringJoiner('=>'));
+    service.register(substringJoiner('=>'));
     assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
       [[2, 4], [7, 9], [12, 14]]
     );
   });
 
   it('removes deregistered joiners from future calls', () => {
-    const joiner1 = registry.registerCharacterJoiner(substringJoiner('->'));
-    const joiner2 = registry.registerCharacterJoiner(substringJoiner('=>'));
+    const joiner1 = service.register(substringJoiner('->'));
+    const joiner2 = service.register(substringJoiner('=>'));
     assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
       [[2, 4], [7, 9], [12, 14]]
     );
 
-    registry.deregisterCharacterJoiner(joiner1);
+    service.deregister(joiner1);
     assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
       [[7, 9]]
     );
 
-    registry.deregisterCharacterJoiner(joiner2);
+    service.deregister(joiner2);
     assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
       []
     );
   });
 
   it('doesn\'t process joins on differently-styled characters', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
     assert.deepEqual(
-      registry.getJoinedCharacters(2),
+      service.getJoinedCharacters(2),
       [[2, 4], [12, 14]]
     );
   });
 
   it('returns an empty list of ranges if there is nothing to be joined', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
     assert.deepEqual(
-      registry.getJoinedCharacters(3),
+      service.getJoinedCharacters(3),
       []
     );
   });
 
   it('returns an empty list of ranges if the line is empty', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
     assert.deepEqual(
-      registry.getJoinedCharacters(4),
+      service.getJoinedCharacters(4),
       []
     );
   });
 
   it('returns false when trying to deregister a joiner that does not exist', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
-    assert.deepEqual(registry.deregisterCharacterJoiner(123), false);
+    service.register(substringJoiner('->'));
+    assert.deepEqual(service.deregister(123), false);
     assert.deepEqual(
-      registry.getJoinedCharacters(0),
+      service.getJoinedCharacters(0),
       [[2, 4], [7, 9], [12, 14]]
     );
   });
 
   it('doesn\'t process same-styled ranges that only have one character', () => {
-    registry.registerCharacterJoiner(substringJoiner('a'));
-    registry.registerCharacterJoiner(substringJoiner('b'));
-    registry.registerCharacterJoiner(substringJoiner('d'));
+    service.register(substringJoiner('a'));
+    service.register(substringJoiner('b'));
+    service.register(substringJoiner('d'));
     assert.deepEqual(
-      registry.getJoinedCharacters(5),
+      service.getJoinedCharacters(5),
       [[5, 6]]
     );
   });
 
   it('handles ranges that extend all the way to the end of the line', () => {
-    registry.registerCharacterJoiner(substringJoiner('-> d'));
+    service.register(substringJoiner('-> d'));
     assert.deepEqual(
-      registry.getJoinedCharacters(2),
+      service.getJoinedCharacters(2),
       [[12, 16]]
     );
   });
 
   it('handles adjacent ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
-    registry.registerCharacterJoiner(substringJoiner('> c '));
+    service.register(substringJoiner('->'));
+    service.register(substringJoiner('> c '));
     assert.deepEqual(
-      registry.getJoinedCharacters(2),
+      service.getJoinedCharacters(2),
       [[2, 4], [8, 12], [12, 14]]
     );
   });
 
   it('handles fullwidth characters in the middle of ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('wi￥de'));
+    service.register(substringJoiner('wi￥de'));
     assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
       [[0, 6]]
     );
   });
 
   it('handles fullwidth characters at the end of ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('wi￥'));
+    service.register(substringJoiner('wi￥'));
     assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
       [[0, 4]]
     );
   });
 
   it('handles emojis in the middle of ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('emo\xf0\x9f\x98\x81 ji'));
+    service.register(substringJoiner('emo\xf0\x9f\x98\x81 ji'));
     assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
       [[6, 13]]
     );
   });
 
   it('handles emojis at the end of ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('emo\xf0\x9f\x98\x81 '));
+    service.register(substringJoiner('emo\xf0\x9f\x98\x81 '));
     assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
       [[6, 11]]
     );
   });
 
   it('handles ranges after wide and emoji characters', () => {
-    registry.registerCharacterJoiner(substringJoiner('abc'));
+    service.register(substringJoiner('abc'));
     assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
       [[13, 16]]
     );
   });
 
   describe('range merging', () => {
     it('inserts a new range before the existing ones', () => {
-      registry.registerCharacterJoiner(() => [[1, 2], [2, 3]]);
-      registry.registerCharacterJoiner(() => [[0, 1]]);
+      service.register(() => [[1, 2], [2, 3]]);
+      service.register(() => [[0, 1]]);
       assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
         [[0, 1], [1, 2], [2, 3]]
       );
     });
 
     it('inserts in between two ranges', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[2, 4]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[2, 4]]);
       assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
         [[0, 2], [2, 4], [4, 6]]
       );
     });
 
     it('inserts after the last range', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[6, 8]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[6, 8]]);
       assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
         [[0, 2], [4, 6], [6, 8]]
       );
     });
 
     it('extends the beginning of a range', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[3, 5]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[3, 5]]);
       assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
         [[0, 2], [3, 6]]
       );
     });
 
     it('extends the end of a range', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[1, 4]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[1, 4]]);
       assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
         [[0, 4], [4, 6]]
       );
     });
 
     it('extends the last range', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[5, 7]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[5, 7]]);
       assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
         [[0, 2], [4, 7]]
       );
     });
 
     it('connects two ranges', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[1, 5]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[1, 5]]);
       assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
         [[0, 6]]
       );
     });
 
     it('connects more than two ranges', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6], [8, 10], [12, 14]]);
-      registry.registerCharacterJoiner(() => [[1, 10]]);
+      service.register(() => [[0, 2], [4, 6], [8, 10], [12, 14]]);
+      service.register(() => [[1, 10]]);
       assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
         [[0, 10], [12, 14]]
       );
     });
@@ -270,7 +270,7 @@ function lineData(data: IPartialLineData[]): IBufferLine {
   const tline = new BufferLine(0);
   for (let i = 0; i < data.length; ++i) {
     const line = data[i][0];
-    const attr = <number>(data[i][1] || 0);
+    const attr = (data[i][1] || 0) as number;
     const offset = tline.length;
     tline.resize(tline.length + line.split('').length, CellData.fromCharData([0, '', 0, 0]));
     line.split('').map((char, idx) => tline.setCell(idx + offset, CellData.fromCharData([attr, char, 1, char.charCodeAt(0)])));

src/browser/services/CharacterJoinerService.ts

@@ -4,11 +4,12 @@
  */
 
 import { IBufferLine, ICellData, CharData } from 'common/Types';
-import { ICharacterJoinerRegistry, ICharacterJoiner } from 'browser/renderer/Types';
+import { ICharacterJoiner } from 'browser/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { WHITESPACE_CELL_CHAR, Content } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
 import { IBufferService } from 'common/services/Services';
+import { ICharacterJoinerService } from 'browser/services/Services';
 
 export class JoinedCellData extends AttributeData implements ICellData {
   private _width: number;
@@ -55,15 +56,18 @@ export class JoinedCellData extends AttributeData implements ICellData {
   }
 }
 
-export class CharacterJoinerRegistry implements ICharacterJoinerRegistry {
+export class CharacterJoinerService implements ICharacterJoinerService {
+  public serviceBrand: undefined;
 
   private _characterJoiners: ICharacterJoiner[] = [];
   private _nextCharacterJoinerId: number = 0;
   private _workCell: CellData = new CellData();
 
-  constructor(private _bufferService: IBufferService) { }
+  constructor(
+    @IBufferService private _bufferService: IBufferService
+  ) { }
 
-  public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
+  public register(handler: (text: string) => [number, number][]): number {
     const joiner: ICharacterJoiner = {
       id: this._nextCharacterJoinerId++,
       handler
@@ -73,7 +77,7 @@ export class CharacterJoinerRegistry implements ICharacterJoinerRegistry {
     return joiner.id;
   }
 
-  public deregisterCharacterJoiner(joinerId: number): boolean {
+  public deregister(joinerId: number): boolean {
     for (let i = 0; i < this._characterJoiners.length; i++) {
       if (this._characterJoiners[i].id === joinerId) {
         this._characterJoiners.splice(i, 1);
@@ -177,7 +181,7 @@ export class CharacterJoinerRegistry implements ICharacterJoinerRegistry {
       // We merge any overlapping ranges across the different joiners
       const joinerRanges = this._characterJoiners[i].handler(text);
       for (let j = 0; j < joinerRanges.length; j++) {
-        CharacterJoinerRegistry._mergeRanges(joinedRanges, joinerRanges[j]);
+        CharacterJoinerService._mergeRanges(joinedRanges, joinerRanges[j]);
       }
     }
     this._stringRangesToCellRanges(joinedRanges, lineData, startCol);

src/browser/services/RenderService.ts

@@ -3,13 +3,13 @@
  * @license MIT
  */
 
-import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { IRenderer, IRenderDimensions } from 'browser/renderer/Types';
 import { RenderDebouncer } from 'browser/RenderDebouncer';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { Disposable } from 'common/Lifecycle';
 import { ScreenDprMonitor } from 'browser/ScreenDprMonitor';
 import { addDisposableDomListener } from 'browser/Lifecycle';
-import { IColorSet } from 'browser/Types';
+import { IColorSet, IRenderDebouncer } from 'browser/Types';
 import { IOptionsService, IBufferService } from 'common/services/Services';
 import { ICharSizeService, IRenderService } from 'browser/services/Services';
 
@@ -22,7 +22,7 @@ interface ISelectionState {
 export class RenderService extends Disposable implements IRenderService {
   public serviceBrand: undefined;
 
-  private _renderDebouncer: RenderDebouncer;
+  private _renderDebouncer: IRenderDebouncer;
   private _screenDprMonitor: ScreenDprMonitor;
 
   private _isPaused: boolean = false;
@@ -214,12 +214,4 @@ export class RenderService extends Disposable implements IRenderService {
   public clear(): void {
     this._renderer.clear();
   }
-
-  public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
-    return this._renderer.registerCharacterJoiner(handler);
-  }
-
-  public deregisterCharacterJoiner(joinerId: number): boolean {
-    return this._renderer.deregisterCharacterJoiner(joinerId);
-  }
 }

src/browser/services/SelectionService.test.ts

@@ -21,7 +21,7 @@ class TestSelectionService extends SelectionService {
     optionsService: IOptionsService,
     renderService: IRenderService
   ) {
-    super(null!, null!, bufferService, new MockCoreService(), new MockMouseService(), optionsService, renderService);
+    super(null!, null!, null!, bufferService, new MockCoreService(), new MockMouseService(), optionsService, renderService);
   }
 
   public get model(): SelectionModel { return this._model; }

src/browser/services/SelectionService.ts

@@ -10,11 +10,13 @@ import * as Browser from 'common/Platform';
 import { SelectionModel } from 'browser/selection/SelectionModel';
 import { CellData } from 'common/buffer/CellData';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
-import { ICharSizeService, IMouseService, ISelectionService, IRenderService } from 'browser/services/Services';
+import { IMouseService, ISelectionService, IRenderService } from 'browser/services/Services';
+import { ILinkifier2 } from 'browser/Types';
 import { IBufferService, IOptionsService, ICoreService } from 'common/services/Services';
 import { getCoordsRelativeToElement } from 'browser/input/Mouse';
 import { moveToCellSequence } from 'browser/input/MoveToCell';
 import { Disposable } from 'common/Lifecycle';
+import { getRangeLength } from 'common/buffer/BufferRange';
 
 /**
  * The number of pixels the mouse needs to be above or below the viewport in
@@ -121,6 +123,7 @@ export class SelectionService extends Disposable implements ISelectionService {
   constructor(
     private readonly _element: HTMLElement,
     private readonly _screenElement: HTMLElement,
+    private readonly _linkifier: ILinkifier2,
     @IBufferService private readonly _bufferService: IBufferService,
     @ICoreService private readonly _coreService: ICoreService,
     @IMouseService private readonly _mouseService: IMouseService,
@@ -130,8 +133,8 @@ export class SelectionService extends Disposable implements ISelectionService {
     super();
 
     // Init listeners
-    this._mouseMoveListener = event => this._onMouseMove(<MouseEvent>event);
-    this._mouseUpListener = event => this._onMouseUp(<MouseEvent>event);
+    this._mouseMoveListener = event => this._onMouseMove(event as MouseEvent);
+    this._mouseUpListener = event => this._onMouseUp(event as MouseEvent);
     this._coreService.onUserInput(() => {
       if (this.hasSelection) {
         this.clearSelection();
@@ -316,13 +319,23 @@ export class SelectionService extends Disposable implements ISelectionService {
    * Selects word at the current mouse event coordinates.
    * @param event The mouse event.
    */
-  private _selectWordAtCursor(event: MouseEvent): void {
+  private _selectWordAtCursor(event: MouseEvent, allowWhitespaceOnlySelection: boolean): boolean {
+    // Check if there is a link under the cursor first and select that if so
+    const range = this._linkifier.currentLink?.link?.range;
+    if (range) {
+      this._model.selectionStart = [range.start.x - 1, range.start.y - 1];
+      this._model.selectionStartLength = getRangeLength(range, this._bufferService.cols);
+      this._model.selectionEnd = undefined;
+      return true;
+    }
+
     const coords = this._getMouseBufferCoords(event);
     if (coords) {
-      this._selectWordAt(coords, false);
+      this._selectWordAt(coords, allowWhitespaceOnlySelection);
       this._model.selectionEnd = undefined;
-      this.refresh(true);
+      return true;
     }
+    return false;
   }
 
   /**
@@ -527,14 +540,12 @@ export class SelectionService extends Disposable implements ISelectionService {
   }
 
   /**
-   * Performs a double click, selecting the current work.
+   * Performs a double click, selecting the current word.
    * @param event The mouse event.
    */
   private _onDoubleClick(event: MouseEvent): void {
-    const coords = this._getMouseBufferCoords(event);
-    if (coords) {
+    if (this._selectWordAtCursor(event, true)) {
       this._activeSelectionMode = SelectionMode.WORD;
-      this._selectWordAt(coords, true);
     }
   }
 
@@ -764,7 +775,9 @@ export class SelectionService extends Disposable implements ISelectionService {
 
   public rightClickSelect(ev: MouseEvent): void {
     if (!this._isClickInSelection(ev)) {
-      this._selectWordAtCursor(ev);
+      if (this._selectWordAtCursor(ev, false)) {
+        this.refresh(true);
+      }
       this._fireEventIfSelectionChanged();
     }
   }

src/browser/services/Services.ts

@@ -4,7 +4,7 @@
  */
 
 import { IEvent } from 'common/EventEmitter';
-import { IRenderDimensions, IRenderer, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { IRenderDimensions, IRenderer } from 'browser/renderer/Types';
 import { IColorSet } from 'browser/Types';
 import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { createDecorator } from 'common/services/ServiceRegistry';
@@ -66,8 +66,6 @@ export interface IRenderService extends IDisposable {
   onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
   onCursorMove(): void;
   clear(): void;
-  registerCharacterJoiner(handler: CharacterJoinerHandler): number;
-  deregisterCharacterJoiner(joinerId: number): boolean;
 }
 
 export const ISelectionService = createDecorator<ISelectionService>('SelectionService');
@@ -104,3 +102,13 @@ export interface ISoundService {
 
   playBellSound(): void;
 }
+
+
+export const ICharacterJoinerService = createDecorator<ICharacterJoinerService>('CharacterJoinerService');
+export interface ICharacterJoinerService {
+  serviceBrand: undefined;
+
+  register(handler: (text: string) => [number, number][]): number;
+  deregister(joinerId: number): boolean;
+  getJoinedCharacters(row: number): [number, number][];
+}

src/browser/services/SoundService.ts

@@ -13,7 +13,7 @@ export class SoundService implements ISoundService {
 
   public static get audioContext(): AudioContext | null {
     if (!SoundService._audioContext) {
-      const audioContextCtor: typeof AudioContext = (<any>window).AudioContext || (<any>window).webkitAudioContext;
+      const audioContextCtor: typeof AudioContext = (window as any).AudioContext || (window as any).webkitAudioContext;
       if (!audioContextCtor) {
         console.warn('Web Audio API is not supported by this browser. Consider upgrading to the latest version');
         return null;

src/common/CircularList.ts

@@ -158,7 +158,7 @@ export class CircularList<T> implements ICircularList<T> {
         this._array[this._getCyclicIndex(i)] = this._array[this._getCyclicIndex(i + deleteCount)];
       }
       this._length -= deleteCount;
-      this.onDeleteEmitter.fire({index: start, amount: deleteCount});
+      this.onDeleteEmitter.fire({ index: start, amount: deleteCount });
     }
 
     // Add items
@@ -169,7 +169,7 @@ export class CircularList<T> implements ICircularList<T> {
       this._array[this._getCyclicIndex(start + i)] = items[i];
     }
     if (items.length) {
-      this.onInsertEmitter.fire({index: start, amount: items.length});
+      this.onInsertEmitter.fire({ index: start, amount: items.length });
     }
 
     // Adjust length as needed

src/common/Clone.ts

@@ -16,7 +16,7 @@ export function clone<T>(val: T, depth: number = 5): T {
 
   for (const key in val) {
     // Recursively clone eack item unless we're at the maximum depth
-    clonedObject[key] = depth <= 1 ? val[key] : (val[key] ? clone(val[key], depth - 1) : val[key]);
+    clonedObject[key] = depth <= 1 ? val[key] : (val[key] && clone(val[key], depth - 1));
   }
 
   return clonedObject as T;

src/common/CoreTerminal.ts

@@ -22,12 +22,12 @@
  */
 
 import { Disposable } from 'common/Lifecycle';
-import { IInstantiationService, IOptionsService, IBufferService, ILogService, ICharsetService, ICoreService, ICoreMouseService, IUnicodeService, IDirtyRowService } from 'common/services/Services';
+import { IInstantiationService, IOptionsService, IBufferService, ILogService, ICharsetService, ICoreService, ICoreMouseService, IUnicodeService, IDirtyRowService, LogLevelEnum } from 'common/services/Services';
 import { InstantiationService } from 'common/services/InstantiationService';
 import { LogService } from 'common/services/LogService';
 import { BufferService, MINIMUM_COLS, MINIMUM_ROWS } from 'common/services/BufferService';
 import { OptionsService } from 'common/services/OptionsService';
-import { ITerminalOptions, IDisposable, IBufferLine, IAttributeData, ICoreTerminal } from 'common/Types';
+import { ITerminalOptions, IDisposable, IBufferLine, IAttributeData, ICoreTerminal, IKeyboardEvent, IScrollEvent, ScrollSource } from 'common/Types';
 import { CoreService } from 'common/services/CoreService';
 import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { CoreMouseService } from 'common/services/CoreMouseService';
@@ -40,23 +40,24 @@ import { IBufferSet } from 'common/buffer/Types';
 import { InputHandler } from 'common/InputHandler';
 import { WriteBuffer } from 'common/input/WriteBuffer';
 
+// Only trigger this warning a single time per session
+let hasWriteSyncWarnHappened = false;
+
 export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
   protected readonly _instantiationService: IInstantiationService;
   protected readonly _bufferService: IBufferService;
   protected readonly _logService: ILogService;
-  protected readonly _coreService: ICoreService;
   protected readonly _charsetService: ICharsetService;
-  protected readonly _coreMouseService: ICoreMouseService;
   protected readonly _dirtyRowService: IDirtyRowService;
 
+  public readonly coreMouseService: ICoreMouseService;
+  public readonly coreService: ICoreService;
   public readonly unicodeService: IUnicodeService;
   public readonly optionsService: IOptionsService;
 
   protected _inputHandler: InputHandler;
   private _writeBuffer: WriteBuffer;
   private _windowsMode: IDisposable | undefined;
-  /** An IBufferline to clone/copy from for new blank lines */
-  private _cachedBlankLine: IBufferLine | undefined;
 
   private _onBinary = new EventEmitter<string>();
   public get onBinary(): IEvent<string> { return this._onBinary.event; }
@@ -66,8 +67,21 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
   public get onLineFeed(): IEvent<void> { return this._onLineFeed.event; }
   private _onResize = new EventEmitter<{ cols: number, rows: number }>();
   public get onResize(): IEvent<{ cols: number, rows: number }> { return this._onResize.event; }
-  protected _onScroll = new EventEmitter<number>();
-  public get onScroll(): IEvent<number> { return this._onScroll.event; }
+  protected _onScroll = new EventEmitter<IScrollEvent, void>();
+  /**
+   * Internally we track the source of the scroll but this is meaningless outside the library so
+   * it's filtered out.
+   */
+  protected _onScrollApi?: EventEmitter<number, void>;
+  public get onScroll(): IEvent<number, void> {
+    if (!this._onScrollApi) {
+      this._onScrollApi = new EventEmitter<number, void>();
+      this.register(this._onScroll.event(ev => {
+        this._onScrollApi?.fire(ev.position);
+      }));
+    }
+    return this._onScrollApi.event;
+  }
 
   public get cols(): number { return this._bufferService.cols; }
   public get rows(): number { return this._bufferService.rows; }
@@ -86,10 +100,10 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this._instantiationService.setService(IBufferService, this._bufferService);
     this._logService = this._instantiationService.createInstance(LogService);
     this._instantiationService.setService(ILogService, this._logService);
-    this._coreService = this.register(this._instantiationService.createInstance(CoreService, () => this.scrollToBottom()));
-    this._instantiationService.setService(ICoreService, this._coreService);
-    this._coreMouseService = this._instantiationService.createInstance(CoreMouseService);
-    this._instantiationService.setService(ICoreMouseService, this._coreMouseService);
+    this.coreService = this.register(this._instantiationService.createInstance(CoreService, () => this.scrollToBottom()));
+    this._instantiationService.setService(ICoreService, this.coreService);
+    this.coreMouseService = this._instantiationService.createInstance(CoreMouseService);
+    this._instantiationService.setService(ICoreMouseService, this.coreMouseService);
     this._dirtyRowService = this._instantiationService.createInstance(DirtyRowService);
     this._instantiationService.setService(IDirtyRowService, this._dirtyRowService);
     this.unicodeService = this._instantiationService.createInstance(UnicodeService);
@@ -98,18 +112,26 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this._instantiationService.setService(ICharsetService, this._charsetService);
 
     // Register input handler and handle/forward events
-    this._inputHandler = new InputHandler(this._bufferService, this._charsetService, this._coreService, this._dirtyRowService, this._logService, this.optionsService, this._coreMouseService, this.unicodeService);
+    this._inputHandler = new InputHandler(this._bufferService, this._charsetService, this.coreService, this._dirtyRowService, this._logService, this.optionsService, this.coreMouseService, this.unicodeService);
     this.register(forwardEvent(this._inputHandler.onLineFeed, this._onLineFeed));
     this.register(this._inputHandler);
 
     // Setup listeners
     this.register(forwardEvent(this._bufferService.onResize, this._onResize));
-    this.register(forwardEvent(this._coreService.onData, this._onData));
-    this.register(forwardEvent(this._coreService.onBinary, this._onBinary));
+    this.register(forwardEvent(this.coreService.onData, this._onData));
+    this.register(forwardEvent(this.coreService.onBinary, this._onBinary));
     this.register(this.optionsService.onOptionChange(key => this._updateOptions(key)));
+    this.register(this._bufferService.onScroll(event => {
+      this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL });
+      this._dirtyRowService.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom);
+    }));
+    this.register(this._inputHandler.onScroll(event => {
+      this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL });
+      this._dirtyRowService.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom);
+    }));
 
     // Setup WriteBuffer
-    this._writeBuffer = new WriteBuffer(data => this._inputHandler.parse(data));
+    this._writeBuffer = new WriteBuffer((data, promiseResult) => this._inputHandler.parse(data, promiseResult));
   }
 
   public dispose(): void {
@@ -125,8 +147,21 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this._writeBuffer.write(data, callback);
   }
 
-  public writeSync(data: string | Uint8Array): void {
-    this._writeBuffer.writeSync(data);
+  /**
+   * Write data to terminal synchonously.
+   *
+   * This method is unreliable with async parser handlers, thus should not
+   * be used anymore. If you need blocking semantics on data input consider
+   * `write` with a callback instead.
+   *
+   * @deprecated Unreliable, will be removed soon.
+   */
+  public writeSync(data: string | Uint8Array, maxSubsequentCalls?: number): void {
+    if (this._logService.logLevel <= LogLevelEnum.WARN && !hasWriteSyncWarnHappened) {
+      this._logService.warn('writeSync is unreliable and will be removed soon.');
+      hasWriteSyncWarnHappened = true;
+    }
+    this._writeBuffer.writeSync(data, maxSubsequentCalls);
   }
 
   public resize(x: number, y: number): void {
@@ -145,66 +180,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
    * @param isWrapped Whether the new line is wrapped from the previous line.
    */
   public scroll(eraseAttr: IAttributeData, isWrapped: boolean = false): void {
-    const buffer = this._bufferService.buffer;
-
-    let newLine: IBufferLine | undefined;
-    newLine = this._cachedBlankLine;
-    if (!newLine || newLine.length !== this.cols || newLine.getFg(0) !== eraseAttr.fg || newLine.getBg(0) !== eraseAttr.bg) {
-      newLine = buffer.getBlankLine(eraseAttr, isWrapped);
-      this._cachedBlankLine = newLine;
-    }
-    newLine.isWrapped = isWrapped;
-
-    const topRow = buffer.ybase + buffer.scrollTop;
-    const bottomRow = buffer.ybase + buffer.scrollBottom;
-
-    if (buffer.scrollTop === 0) {
-      // Determine whether the buffer is going to be trimmed after insertion.
-      const willBufferBeTrimmed = buffer.lines.isFull;
-
-      // Insert the line using the fastest method
-      if (bottomRow === buffer.lines.length - 1) {
-        if (willBufferBeTrimmed) {
-          buffer.lines.recycle().copyFrom(newLine);
-        } else {
-          buffer.lines.push(newLine.clone());
-        }
-      } else {
-        buffer.lines.splice(bottomRow + 1, 0, newLine.clone());
-      }
-
-      // Only adjust ybase and ydisp when the buffer is not trimmed
-      if (!willBufferBeTrimmed) {
-        buffer.ybase++;
-        // Only scroll the ydisp with ybase if the user has not scrolled up
-        if (!this._bufferService.isUserScrolling) {
-          buffer.ydisp++;
-        }
-      } else {
-        // When the buffer is full and the user has scrolled up, keep the text
-        // stable unless ydisp is right at the top
-        if (this._bufferService.isUserScrolling) {
-          buffer.ydisp = Math.max(buffer.ydisp - 1, 0);
-        }
-      }
-    } else {
-      // scrollTop is non-zero which means no line will be going to the
-      // scrollback, instead we can just shift them in-place.
-      const scrollRegionHeight = bottomRow - topRow + 1 /* as it's zero-based */;
-      buffer.lines.shiftElements(topRow + 1, scrollRegionHeight - 1, -1);
-      buffer.lines.set(bottomRow, newLine.clone());
-    }
-
-    // Move the viewport to the bottom of the buffer unless the user is
-    // scrolling.
-    if (!this._bufferService.isUserScrolling) {
-      buffer.ydisp = buffer.ybase;
-    }
-
-    // Flag rows that need updating
-    this._dirtyRowService.markRangeDirty(buffer.scrollTop, buffer.scrollBottom);
-
-    this._onScroll.fire(buffer.ydisp);
+    this._bufferService.scroll(eraseAttr, isWrapped);
   }
 
   /**
@@ -214,28 +190,8 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
    * to avoid unwanted events being handled by the viewport when the event was triggered from the
    * viewport originally.
    */
-  public scrollLines(disp: number, suppressScrollEvent?: boolean): void {
-    const buffer = this._bufferService.buffer;
-    if (disp < 0) {
-      if (buffer.ydisp === 0) {
-        return;
-      }
-      this._bufferService.isUserScrolling = true;
-    } else if (disp + buffer.ydisp >= buffer.ybase) {
-      this._bufferService.isUserScrolling = false;
-    }
-
-    const oldYdisp = buffer.ydisp;
-    buffer.ydisp = Math.max(Math.min(buffer.ydisp + disp, buffer.ybase), 0);
-
-    // No change occurred, don't trigger scroll/refresh
-    if (oldYdisp === buffer.ydisp) {
-      return;
-    }
-
-    if (!suppressScrollEvent) {
-      this._onScroll.fire(buffer.ydisp);
-    }
+  public scrollLines(disp: number, suppressScrollEvent?: boolean, source?: ScrollSource): void {
+    this._bufferService.scrollLines(disp, suppressScrollEvent, source);
   }
 
   /**
@@ -243,48 +199,45 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
    * @param pageCount The number of pages to scroll (negative scrolls up).
    */
   public scrollPages(pageCount: number): void {
-    this.scrollLines(pageCount * (this.rows - 1));
+    this._bufferService.scrollPages(pageCount);
   }
 
   /**
    * Scrolls the display of the terminal to the top.
    */
   public scrollToTop(): void {
-    this.scrollLines(-this._bufferService.buffer.ydisp);
+    this._bufferService.scrollToTop();
   }
 
   /**
    * Scrolls the display of the terminal to the bottom.
    */
   public scrollToBottom(): void {
-    this.scrollLines(this._bufferService.buffer.ybase - this._bufferService.buffer.ydisp);
+    this._bufferService.scrollToBottom();
   }
 
   public scrollToLine(line: number): void {
-    const scrollAmount = line - this._bufferService.buffer.ydisp;
-    if (scrollAmount !== 0) {
-      this.scrollLines(scrollAmount);
-    }
+    this._bufferService.scrollToLine(line);
   }
 
   /** Add handler for ESC escape sequence. See xterm.d.ts for details. */
-  public addEscHandler(id: IFunctionIdentifier, callback: () => boolean): IDisposable {
-    return this._inputHandler.addEscHandler(id, callback);
+  public registerEscHandler(id: IFunctionIdentifier, callback: () => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerEscHandler(id, callback);
   }
 
   /** Add handler for DCS escape sequence. See xterm.d.ts for details. */
-  public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean): IDisposable {
-    return this._inputHandler.addDcsHandler(id, callback);
+  public registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: IParams) => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerDcsHandler(id, callback);
   }
 
   /** Add handler for CSI escape sequence. See xterm.d.ts for details. */
-  public addCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean): IDisposable {
-    return this._inputHandler.addCsiHandler(id, callback);
+  public registerCsiHandler(id: IFunctionIdentifier, callback: (params: IParams) => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerCsiHandler(id, callback);
   }
 
   /** Add handler for OSC escape sequence. See xterm.d.ts for details. */
-  public addOscHandler(ident: number, callback: (data: string) => boolean): IDisposable {
-    return this._inputHandler.addOscHandler(ident, callback);
+  public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
+    return this._inputHandler.registerOscHandler(ident, callback);
   }
 
   protected _setup(): void {
@@ -297,8 +250,8 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     this._inputHandler.reset();
     this._bufferService.reset();
     this._charsetService.reset();
-    this._coreService.reset();
-    this._coreMouseService.reset();
+    this.coreService.reset();
+    this.coreMouseService.reset();
   }
 
   protected _updateOptions(key: string): void {
@@ -322,7 +275,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
     if (!this._windowsMode) {
       const disposables: IDisposable[] = [];
       disposables.push(this.onLineFeed(updateWindowsModeWrappedState.bind(null, this._bufferService)));
-      disposables.push(this.addCsiHandler({ final: 'H' }, () => {
+      disposables.push(this.registerCsiHandler({ final: 'H' }, () => {
         updateWindowsModeWrappedState(this._bufferService);
         return false;
       }));

src/common/TestUtils.test.ts

@@ -3,13 +3,13 @@
  * @license MIT
  */
 
-import { IBufferService, ICoreService, ILogService, IOptionsService, ITerminalOptions, IPartialTerminalOptions, IDirtyRowService, ICoreMouseService, ICharsetService, IUnicodeService, IUnicodeVersionProvider } from 'common/services/Services';
+import { IBufferService, ICoreService, ILogService, IOptionsService, ITerminalOptions, IPartialTerminalOptions, IDirtyRowService, ICoreMouseService, ICharsetService, IUnicodeService, IUnicodeVersionProvider, LogLevelEnum } from 'common/services/Services';
 import { IEvent, EventEmitter } from 'common/EventEmitter';
 import { clone } from 'common/Clone';
 import { DEFAULT_OPTIONS } from 'common/services/OptionsService';
 import { IBufferSet, IBuffer } from 'common/buffer/Types';
 import { BufferSet } from 'common/buffer/BufferSet';
-import { IDecPrivateModes, ICoreMouseEvent, CoreMouseEventType, ICharset, IModes } from 'common/Types';
+import { IDecPrivateModes, ICoreMouseEvent, CoreMouseEventType, ICharset, IModes, IAttributeData } from 'common/Types';
 import { UnicodeV6 } from 'common/input/UnicodeV6';
 
 export class MockBufferService implements IBufferService {
@@ -17,6 +17,7 @@ export class MockBufferService implements IBufferService {
   public get buffer(): IBuffer { return this.buffers.active; }
   public buffers: IBufferSet = {} as any;
   public onResize: IEvent<{ cols: number, rows: number }> = new EventEmitter<{ cols: number, rows: number }>().event;
+  public onScroll: IEvent<number> = new EventEmitter<number>().event;
   public isUserScrolling: boolean = false;
   constructor(
     public cols: number,
@@ -25,23 +26,41 @@ export class MockBufferService implements IBufferService {
   ) {
     this.buffers = new BufferSet(optionsService, this);
   }
+  public scrollPages(pageCount: number): void {
+    throw new Error('Method not implemented.');
+  }
+  public scrollToTop(): void {
+    throw new Error('Method not implemented.');
+  }
+  public scrollToLine(line: number): void {
+    throw new Error('Method not implemented.');
+  }
+  public scroll(eraseAttr: IAttributeData, isWrapped: boolean): void {
+    throw new Error('Method not implemented.');
+  }
+  public scrollToBottom(): void {
+    throw new Error('Method not implemented.');
+  }
+  public scrollLines(disp: number, suppressScrollEvent?: boolean): void {
+    throw new Error('Method not implemented.');
+  }
   public resize(cols: number, rows: number): void {
     this.cols = cols;
     this.rows = rows;
   }
-  public reset(): void {}
+  public reset(): void { }
 }
 
 export class MockCoreMouseService implements ICoreMouseService {
   public areMouseEventsActive: boolean = false;
   public activeEncoding: string = '';
   public activeProtocol: string = '';
-  public addEncoding(name: string): void {}
-  public addProtocol(name: string): void {}
-  public reset(): void {}
+  public addEncoding(name: string): void { }
+  public addProtocol(name: string): void { }
+  public reset(): void { }
   public triggerMouseEvent(event: ICoreMouseEvent): boolean { return false; }
   public onProtocolChange: IEvent<CoreMouseEventType> = new EventEmitter<CoreMouseEventType>().event;
-  public explainEvents(events: CoreMouseEventType): {[event: string]: boolean} {
+  public explainEvents(events: CoreMouseEventType): { [event: string]: boolean } {
     throw new Error('Method not implemented.');
   }
 }
@@ -50,9 +69,9 @@ export class MockCharsetService implements ICharsetService {
   public serviceBrand: any;
   public charset: ICharset | undefined;
   public glevel: number = 0;
-  public reset(): void {}
-  public setgLevel(g: number): void {}
-  public setgCharset(g: number, charset: ICharset): void {}
+  public reset(): void { }
+  public setgLevel(g: number): void { }
+  public setgCharset(g: number, charset: ICharset): void { }
 }
 
 export class MockCoreService implements ICoreService {
@@ -75,27 +94,28 @@ export class MockCoreService implements ICoreService {
   public onData: IEvent<string> = new EventEmitter<string>().event;
   public onUserInput: IEvent<void> = new EventEmitter<void>().event;
   public onBinary: IEvent<string> = new EventEmitter<string>().event;
-  public reset(): void {}
-  public triggerDataEvent(data: string, wasUserInput?: boolean): void {}
-  public triggerBinaryEvent(data: string): void {}
+  public reset(): void { }
+  public triggerDataEvent(data: string, wasUserInput?: boolean): void { }
+  public triggerBinaryEvent(data: string): void { }
 }
 
 export class MockDirtyRowService implements IDirtyRowService {
   public serviceBrand: any;
   public start: number = 0;
   public end: number = 0;
-  public clearRange(): void {}
-  public markDirty(y: number): void {}
-  public markRangeDirty(y1: number, y2: number): void {}
-  public markAllDirty(): void {}
+  public clearRange(): void { }
+  public markDirty(y: number): void { }
+  public markRangeDirty(y1: number, y2: number): void { }
+  public markAllDirty(): void { }
 }
 
 export class MockLogService implements ILogService {
   public serviceBrand: any;
-  public debug(message: any, ...optionalParams: any[]): void {}
-  public info(message: any, ...optionalParams: any[]): void {}
-  public warn(message: any, ...optionalParams: any[]): void {}
-  public error(message: any, ...optionalParams: any[]): void {}
+  public logLevel = LogLevelEnum.DEBUG;
+  public debug(message: any, ...optionalParams: any[]): void { }
+  public info(message: any, ...optionalParams: any[]): void { }
+  public warn(message: any, ...optionalParams: any[]): void { }
+  public error(message: any, ...optionalParams: any[]): void { }
 }
 
 export class MockOptionsService implements IOptionsService {
@@ -105,7 +125,7 @@ export class MockOptionsService implements IOptionsService {
   constructor(testOptions?: IPartialTerminalOptions) {
     if (testOptions) {
       for (const key of Object.keys(testOptions)) {
-        this.options[key] = (<any>testOptions)[key];
+        this.options[key] = (testOptions as any)[key];
       }
     }
   }