Merge pull request #3365 from jerch/fix_3362

allow cursor to stick at cols in ED/EL
Merge branch 'master' into fix_3362
2021-06-11 16:07:10 +02:00 · 2021-06-11 04:48:33 -07:00 · 2021-06-10 12:11:44 -07:00 · 2021-06-10 12:01:03 -07:00 · 2021-06-10 10:42:27 +02:00 · 2021-06-10 10:35:58 +02:00
163 changed files with 8395 additions and 6265 deletions
@@ -1,4 +1,4 @@
-FROM node:10
+FROM node:14

 # Configure apt
 ENV DEBIAN_FRONTEND=noninteractive
@@ -12,14 +12,21 @@
      "test/api/tsconfig.json",
      "test/benchmark/tsconfig.json",
      "addons/xterm-addon-attach/src/tsconfig.json",
+      "addons/xterm-addon-attach/test/tsconfig.json",
      "addons/xterm-addon-fit/src/tsconfig.json",
+      "addons/xterm-addon-fit/test/tsconfig.json",
+      "addons/xterm-addon-ligatures/src/tsconfig.json",
      "addons/xterm-addon-search/src/tsconfig.json",
-      "addons/xterm-addon-unicode11/src/tsconfig.json",
-      "addons/xterm-addon-web-links/src/tsconfig.json",
-      "addons/xterm-addon-webgl/src/tsconfig.json",
+      "addons/xterm-addon-search/test/tsconfig.json",
      "addons/xterm-addon-serialize/src/tsconfig.json",
+      "addons/xterm-addon-serialize/test/tsconfig.json",
      "addons/xterm-addon-serialize/benchmark/tsconfig.json",
-      "addons/xterm-addon-ligatures/src/tsconfig.json"
+      "addons/xterm-addon-unicode11/src/tsconfig.json",
+      "addons/xterm-addon-unicode11/test/tsconfig.json",
+      "addons/xterm-addon-web-links/src/tsconfig.json",
+      "addons/xterm-addon-web-links/test/tsconfig.json",
+      "addons/xterm-addon-webgl/src/tsconfig.json",
+      "addons/xterm-addon-webgl/test/tsconfig.json"
    ],
    "sourceType": "module"
  },
@@ -36,10 +43,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",
@@ -144,6 +152,10 @@
      "warn",
      "never"
    ],
+    "object-curly-spacing": [
+      "warn",
+      "always"
+    ],
    "prefer-const": "warn",
    "spaced-comment": [
      "warn",
@@ -153,5 +165,13 @@
        "exceptions": ["-"]
      }
    ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.ts"],
+      "rules": {
+        "object-curly-spacing": "off"
+      }
+    }
+  ]
 }
@@ -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"
+      }
+    }
+  ]
 }
@@ -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,23 @@ 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 *Intenet 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.
+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.

 ## 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 +113,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 +143,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.
@@ -167,10 +166,19 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**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.
-[And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
+- [**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. 
+- [**NxShell**](https://github.com/nxshell/nxshell): An easy to use new terminal for SSH.
+- [**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.
+- [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

@@ -180,21 +188,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>
@@ -10,7 +10,7 @@
  "repository": "https://github.com/xtermjs/xterm.js",
  "license": "MIT",
  "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
    "prepackage": "npm run build",
    "package": "../../node_modules/.bin/webpack",
    "prepublishOnly": "npm run package"
@@ -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 {
@@ -12,8 +12,7 @@
    "removeComments": true,
    "strict": true,
    "types": [
-      "../../../node_modules/@types/mocha",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@types/mocha"
    ]
  },
  "include": [
@@ -5,9 +5,9 @@

 import WebSocket = require('ws');
 import { openTerminal, pollFor, getBrowserType } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright-core';
+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;
@@ -17,8 +17,8 @@ const height = 600;
 describe('AttachAddon', () => {
  before(async function(): Promise<any> {
    const browserType = getBrowserType();
-    browser = await browserType.launch({ dumpio: true,
-      headless: process.argv.indexOf('--headless') !== -1
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
    });
    page = await (await browser.newContext()).newPage();
    await page.setViewportSize({ width, height });
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [
+      "es2015"
+    ],
+    "rootDir": ".",
+    "outDir": "../out-test",
+    "sourceMap": true,
+    "removeComments": true,
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../node_modules/@types/node",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ]
+}
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}
@@ -1,6 +1,6 @@
 {
  "name": "xterm-addon-fit",
-  "version": "0.4.0",
+  "version": "0.5.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
  "repository": "https://github.com/xtermjs/xterm.js",
  "license": "MIT",
  "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
    "prepackage": "npm run build",
    "package": "../../node_modules/.bin/webpack",
    "prepublishOnly": "npm run package"
@@ -59,6 +59,10 @@ export class FitAddon implements ITerminalAddon {
    // TODO: Remove reliance on private API
    const core = (this._terminal as any)._core;

+    if (core._renderService.dimensions.actualCellWidth === 0 || core._renderService.dimensions.actualCellHeight === 0) {
+      return undefined;
+    }
+
    const parentElementStyle = window.getComputedStyle(this._terminal.element.parentElement);
    const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));
    const parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')));
@@ -12,8 +12,7 @@
    "removeComments": true,
    "strict": true,
    "types": [
-      "../../../node_modules/@types/mocha",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@types/mocha"
    ]
  },
  "include": [
@@ -5,9 +5,9 @@

 import { assert } from 'chai';
 import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright-core';
+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;
@@ -17,12 +17,16 @@ const height = 768;
 describe('FitAddon', () => {
  before(async function(): Promise<any> {
    const browserType = getBrowserType();
-    browser = await browserType.launch({ dumpio: true,
-      headless: process.argv.indexOf('--headless') !== -1
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
    });
    page = await (await browser.newContext()).newPage();
    await page.setViewportSize({ width, height });
    await page.goto(APP);
+  });
+
+  beforeEach(async function(): Promise<any> {
+    await page.evaluate(`document.querySelector('#terminal-container').style.display=''`);
    await openTerminal(page);
  });

@@ -30,6 +34,10 @@ describe('FitAddon', () => {
    await browser.close();
  });

+  afterEach(async function(): Promise<any> {
+    await page.evaluate(`window.term.dispose()`);
+  });
+
  it('no terminal', async function(): Promise<any> {
    await page.evaluate(`window.fit = new FitAddon();`);
    assert.equal(await page.evaluate(`window.fit.proposeDimensions()`), undefined);
@@ -37,7 +45,7 @@ describe('FitAddon', () => {

  describe('proposeDimensions', () => {
    afterEach(async () => {
-      return unloadFit();
+      return await unloadFit();
    });

    it('default', async function(): Promise<any> {
@@ -63,11 +71,20 @@ describe('FitAddon', () => {
        rows: 1
      });
    });
+
+    it('hidden', async function(): Promise<any> {
+      await page.evaluate(`window.term.dispose()`);
+      await page.evaluate(`document.querySelector('#terminal-container').style.display='none'`);
+      await page.evaluate(`window.term = new Terminal()`);
+      await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
+      await loadFit();
+      assert.equal(await page.evaluate(`window.fit.proposeDimensions()`), undefined);
+    });
  });

  describe('fit', () => {
    afterEach(async () => {
-      return unloadFit();
+      return await unloadFit();
    });

    it('default', async function(): Promise<any> {
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [
+      "es2015"
+    ],
+    "rootDir": ".",
+    "outDir": "../out-test",
+    "sourceMap": true,
+    "removeComments": true,
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../node_modules/@types/node",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ]
+}
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}
@@ -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
+
@@ -1,6 +1,6 @@
 {
  "name": "xterm-addon-ligatures",
-  "version": "0.3.0",
+  "version": "0.5.0",
  "description": "Add support for programming ligatures to xterm.js",
  "author": {
    "name": "The xterm.js authors",
@@ -31,8 +31,8 @@
  ],
  "license": "MIT",
  "dependencies": {
-    "font-finder": "^1.0.4",
-    "font-ligatures": "^1.3.3"
+    "font-finder": "^1.1.0",
+    "font-ligatures": "^1.4.0"
  },
  "devDependencies": {
    "@types/sinon": "^5.0.1",
@@ -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 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 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 });
    }
  }

@@ -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--;
@@ -1,16 +1,19 @@
 {
-    "compilerOptions": {
-        "target": "es2017",
-        "module": "commonjs",
-        "sourceMap": true,
-        "outDir": "../out",
-        "rootDir": ".",
-        "strict": true,
-        "noUnusedLocals": true,
-        "preserveWatchOutput": true
-    },
-    "include": [
-        "./**/*",
-        "../../../typings/xterm.d.ts"
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "commonjs",
+    "sourceMap": true,
+    "outDir": "../out",
+    "rootDir": ".",
+    "strict": true,
+    "noUnusedLocals": true,
+    "preserveWatchOutput": true,
+    "types": [
+      "../../../node_modules/@types/mocha"
    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ]
 }
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" }
+  ]
+}
@@ -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
+    }
  }
 };
@@ -78,20 +78,28 @@ follow-redirects@1.5.10:
  dependencies:
    debug "=3.1.0"

-font-finder@^1.0.3, font-finder@^1.0.4:
+font-finder@^1.0.3:
  version "1.0.4"
  resolved "https://registry.yarnpkg.com/font-finder/-/font-finder-1.0.4.tgz#2ca944954dd8d0e1b5bdc4c596cc08607761d89b"
  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-finder@^1.1.0:
+  version "1.1.0"
+  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.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:
@@ -120,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"
@@ -136,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"
@@ -190,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"
@@ -224,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"
@@ -1,6 +1,6 @@
 {
  "name": "xterm-addon-search",
-  "version": "0.7.0",
+  "version": "0.8.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
  "repository": "https://github.com/xtermjs/xterm.js",
  "license": "MIT",
  "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
    "prepackage": "npm run build",
    "package": "../../node_modules/.bin/webpack",
    "prepublishOnly": "npm run package"
@@ -158,8 +158,15 @@ export class SearchAddon implements ITerminalAddon {
    };

    if (incremental) {
+      // Try to expand selection to right first.
      result = this._findInLine(term, searchPosition, searchOptions, false);
-      if (!(result && result.row === startRow && result.col === startCol)) {
+      const isOldResultHighlighted = result && result.row === startRow && result.col === startCol;
+      if (!isOldResultHighlighted) {
+        // If selection was not able to be expanded to the right, then try reverse search
+        if (currentSelection) {
+          searchPosition.startRow = currentSelection.endRow;
+          searchPosition.startCol = currentSelection.endColumn;
+        }
        result = this._findInLine(term, searchPosition, searchOptions, true);
      }
    } else {
@@ -233,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])));
  }

  /**
@@ -245,6 +252,7 @@ export class SearchAddon implements ITerminalAddon {
   * @param term The search term.
   * @param position The position to start the search.
   * @param searchOptions Search options.
+   * @param isReverseSearch Whether the search should start from the right side of the terminal and search to the left.
   * @return The search result if it was found.
   */
  protected _findInLine(term: string, searchPosition: ISearchPosition, searchOptions: ISearchOptions = {}, isReverseSearch: boolean = false): ISearchResult | undefined {
@@ -254,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;
@@ -386,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;
@@ -12,8 +12,7 @@
    "removeComments": true,
    "strict": true,
    "types": [
-      "../../../node_modules/@types/mocha",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@types/mocha"
    ]
  },
  "include": [
@@ -7,9 +7,9 @@ import { assert } from 'chai';
 import { readFile } from 'fs';
 import { resolve } from 'path';
 import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright-core';
+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;
@@ -19,8 +19,8 @@ const height = 600;
 describe('Search Tests', function(): void {
  before(async function(): Promise<any> {
    const browserType = getBrowserType();
-    browser = await browserType.launch({ dumpio: true,
-      headless: process.argv.indexOf('--headless') !== -1
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
    });
    page = await (await browser.newContext()).newPage();
    await page.setViewportSize({ width, height });
@@ -111,8 +111,15 @@ describe('Search Tests', function(): void {
      let fixture: string;
      before(async () => {
        const rawFixture = await new Promise<Buffer>(r => readFile(resolve(__dirname, '../fixtures/issue-2444'), (err, data) => r(data)));
-        fixture = rawFixture.toString()
-          .replace(/\n/g, '\\n\\r')
+        if (process.platform === 'win32') {
+          fixture = rawFixture.toString()
+            .replace(/\n/g, '\\n')
+            .replace(/\r/g, '\\r');
+        } else {
+          fixture = rawFixture.toString()
+            .replace(/\n/g, '\\n\\r');
+        }
+        fixture = fixture
          .replace(/'/g, '\\\'');
      });
      it('should find all occurrences using findNext', async () => {
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [
+      "es6",
+    ],
+    "rootDir": ".",
+    "outDir": "../out-test",
+    "sourceMap": true,
+    "removeComments": true,
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../node_modules/@types/node",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ]
+}
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}
@@ -16,12 +16,12 @@ class TestTerminal extends Terminal {
  }
 }

-perfContext('Terminal: sh -c "dd if=/dev/random count=40 bs=1k | hexdump | lolcat -f"', () => {
+perfContext('Terminal: sh -c "dd if=/dev/urandom count=40 bs=1k | hexdump | lolcat -f"', () => {
  let content = '';
  let contentUtf8: Uint8Array;

  before(async () => {
-    const p = spawn('sh', ['-c', 'dd if=/dev/random count=40 bs=1k | hexdump | lolcat -f'], {
+    const p = spawn('sh', ['-c', 'dd if=/dev/urandom count=40 bs=1k | hexdump | lolcat -f'], {
      name: 'xterm-256color',
      cols: 80,
      rows: 25,
@@ -35,7 +35,7 @@ perfContext('Terminal: sh -c "dd if=/dev/random count=40 bs=1k | hexdump | lolca
      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);
@@ -1,6 +1,6 @@
 {
  "name": "xterm-addon-serialize",
-  "version": "0.4.0",
+  "version": "0.5.0",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -9,13 +9,13 @@
  "types": "typings/xterm-addon-serialize.d.ts",
  "license": "MIT",
  "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
    "prepackage": "npm run build",
    "package": "../../node_modules/.bin/webpack",
    "prepublishOnly": "npm run package",
    "benchmark": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json",
-    "benchmark-baseline": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json --baseline out-benchmark/addons/xterm-addon-serialize/benchmark/*benchmark.js",
-    "benchmark-eval": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json --eval out-benchmark/addons/xterm-addon-serialize/benchmark/*benchmark.js"
+    "benchmark-baseline": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json --baseline out-benchmark/benchmark/*benchmark.js",
+    "benchmark-eval": "NODE_PATH=../../out:./out:./out-benchmark/ ../../node_modules/.bin/xterm-benchmark -r 5 -c benchmark/benchmark.json --eval out-benchmark/benchmark/*benchmark.js"
  },
  "peerDependencies": {
    "xterm": "^4.0.0"
@@ -21,7 +21,7 @@ abstract class BaseSerializeHandler {
    const cell2 = this._buffer.getNullCell();
    let oldCell = cell1;

-    this._beforeSerialize(endRow - startRow);
+    this._beforeSerialize(endRow - startRow, startRow, endRow);

    for (let row = startRow; row < endRow; row++) {
      const line = this._buffer.getLine(row);
@@ -36,7 +36,7 @@ abstract class BaseSerializeHandler {
          oldCell = c;
        }
      }
-      this._rowEnd(row);
+      this._rowEnd(row, row === endRow - 1);
    }

    this._afterSerialize();
@@ -45,8 +45,8 @@ abstract class BaseSerializeHandler {
  }

  protected _nextCell(cell: IBufferCell, oldCell: IBufferCell, row: number, col: number): void { }
-  protected _rowEnd(row: number): void { }
-  protected _beforeSerialize(rows: number): void { }
+  protected _rowEnd(row: number, isLastRow: boolean): void { }
+  protected _beforeSerialize(rows: number, startRow: number, endRow: number): void { }
  protected _afterSerialize(): void { }
  protected _serializeString(): string { return ''; }
 }
@@ -71,27 +71,152 @@ 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>();
+  private _allRowSeparators: string[] = new Array<string>();
  private _currentRow: string = '';
  private _nullCellCount: number = 0;

-  constructor(buffer: IBuffer) {
-    super(buffer);
+  // 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();
+
+  // where exact the cursor styles comes from
+  // because we can't copy the cell directly
+  // so we remember where the content comes from instead
+  private _cursorStyleRow: number = 0;
+  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 _firstRow: number = 0;
+  private _lastCursorRow: number = 0;
+  private _lastCursorCol: number = 0;
+  private _lastContentCursorRow: number = 0;
+  private _lastContentCursorCol: number = 0;
+
+  constructor(private _buffer1: IBuffer, private _terminal: Terminal) {
+    super(_buffer1);
  }

-  protected _beforeSerialize(rows: number): void {
+  protected _beforeSerialize(rows: number, start: number, end: number): void {
    this._allRows = new Array<string>(rows);
+    this._lastContentCursorRow = start;
+    this._lastCursorRow = start;
+    this._firstRow = start;
  }

-  protected _rowEnd(row: number): void {
-    this._allRows[this._rowIndex++] = this._currentRow;
+  private _thisRowLastChar: IBufferCell = this._buffer1.getNullCell();
+  private _thisRowLastSecondChar: IBufferCell = this._buffer1.getNullCell();
+  private _nextRowFirstChar: IBufferCell = this._buffer1.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`;
+    }
+
+    let rowSeparator = '';
+
+    // handle row separator
+    if (!isLastRow) {
+      // Enable BCE
+      if (row - this._firstRow >= this._terminal.rows) {
+        this._buffer1.getLine(this._cursorStyleRow)?.getCell(this._cursorStyleCol, this._backgroundCell);
+      }
+
+      // Fetch current line
+      const currentLine = this._buffer1.getLine(row)!;
+      // Fetch next line
+      const nextLine = this._buffer1.getLine(row + 1)!;
+
+      if (!nextLine.isWrapped) {
+        // just insert the line break
+        rowSeparator = '\r\n';
+        // we sended the enter
+        this._lastCursorRow = row + 1;
+        this._lastCursorCol = 0;
+      } else {
+        rowSeparator = '';
+        const thisRowLastChar = currentLine.getCell(currentLine.length - 1, this._thisRowLastChar)!;
+        const thisRowLastSecondChar = currentLine.getCell(currentLine.length - 2, this._thisRowLastSecondChar)!;
+        const nextRowFirstChar = nextLine.getCell(0, this._nextRowFirstChar)!;
+        const isNextRowFirstCharDoubleWidth = nextRowFirstChar.getWidth() > 1;
+
+        // validate whether this line wrap is ever possible
+        // which mean whether cursor can placed at a overflow position (x === row) naturally
+        let isValid = false;
+
+        if (
+          // you must output character to cause overflow, control sequence can't do this
+          nextRowFirstChar.getChars() &&
+          isNextRowFirstCharDoubleWidth ? this._nullCellCount <= 1 : this._nullCellCount <= 0
+        ) {
+          if (
+            // the last character can't be null,
+            // you can't use control sequence to move cursor to (x === row)
+            (thisRowLastChar.getChars() || thisRowLastChar.getWidth() === 0) &&
+            // change background of the first wrapped cell also affects BCE
+            // so we mark it as invalid to simply the process to determine line separator
+            equalBg(thisRowLastChar, nextRowFirstChar)
+          ) {
+            isValid = true;
+          }
+
+          if (
+            // the second to last character can't be null if the next line starts with CJK,
+            // you can't use control sequence to move cursor to (x === row)
+            isNextRowFirstCharDoubleWidth &&
+            (thisRowLastSecondChar.getChars() || thisRowLastSecondChar.getWidth() === 0) &&
+            // change background of the first wrapped cell also affects BCE
+            // so we mark it as invalid to simply the process to determine line separator
+            equalBg(thisRowLastChar, nextRowFirstChar) &&
+            equalBg(thisRowLastSecondChar, nextRowFirstChar)
+          ) {
+            isValid = true;
+          }
+        }
+
+        if (!isValid) {
+          // force the wrap with magic
+          // insert enough character to force the wrap
+          rowSeparator = '-'.repeat(this._nullCellCount + 1);
+          // move back and erase next line head
+          rowSeparator += '\x1b[1D\x1b[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';
+          }
+
+          // This is content and need the be serialized even it is invisible.
+          // without this, wrap will be missing from outputs.
+          this._lastContentCursorRow = row + 1;
+          this._lastContentCursorCol = 0;
+
+          // force commit the cursor position
+          this._lastCursorRow = row + 1;
+          this._lastCursorCol = 0;
+        }
+      }
+    }
+
+    this._allRows[this._rowIndex] = this._currentRow;
+    this._allRowSeparators[this._rowIndex++] = rowSeparator;
    this._currentRow = '';
    this._nullCellCount = 0;
  }

-  protected _nextCell(cell: IBufferCell, oldCell: IBufferCell, row: number, col: number): void {
+  private _diffStyle(cell: IBufferCell, oldCell: IBufferCell): number[] {
    const sgrSeq: number[] = [];
    const fgChanged = !equalFg(cell, oldCell);
    const bgChanged = !equalBg(cell, oldCell);
@@ -99,7 +224,9 @@ class StringSerializeHandler extends BaseSerializeHandler {

    if (fgChanged || bgChanged || flagsChanged) {
      if (cell.isAttributeDefault()) {
-        this._currentRow += '\x1b[0m';
+        if (!oldCell.isAttributeDefault()) {
+          sgrSeq.push(0);
+        }
      } else {
        if (fgChanged) {
          const color = cell.getFgColor();
@@ -131,30 +258,129 @@ class StringSerializeHandler extends BaseSerializeHandler {
      }
    }

-    if (sgrSeq.length) {
+    return sgrSeq;
+  }
+
+  protected _nextCell(cell: IBufferCell, oldCell: IBufferCell, row: number, col: number): void {
+    // a width 0 cell don't need to be count because it is just a placeholder after a CJK character;
+    const isPlaceHolderCell = cell.getWidth() === 0;
+
+    if (isPlaceHolderCell) {
+      return;
+    }
+
+    // this cell don't have content
+    const isEmptyCell = cell.getChars() === '';
+
+    const sgrSeq = this._diffStyle(cell, this._cursorStyle);
+
+    // the empty cell style is only assumed to be changed when background changed, because foreground is always 0.
+    const styleChanged = isEmptyCell ? !equalBg(this._cursorStyle, cell) : sgrSeq.length > 0;
+
+    /**
+     *  handles style change
+     */
+    if (styleChanged) {
+      // before update the style, we need to fill empty cell back
+      if (this._nullCellCount > 0) {
+        // use clear right to set background.
+        if (!equalBg(this._cursorStyle, this._backgroundCell)) {
+          this._currentRow += `\x1b[${this._nullCellCount}X`;
+        }
+        // use move right to move cursor.
+        this._currentRow += `\x1b[${this._nullCellCount}C`;
+        this._nullCellCount = 0;
+      }
+
+      this._lastContentCursorRow = this._lastCursorRow = row;
+      this._lastContentCursorCol = this._lastCursorCol = col;
+
      this._currentRow += `\x1b[${sgrSeq.join(';')}m`;
+
+      // update the last cursor style
+      const line = this._buffer1.getLine(row);
+      if (line !== undefined) {
+        line.getCell(col, this._cursorStyle);
+        this._cursorStyleRow = row;
+        this._cursorStyleCol = col;
+      }
    }

-    // Count number of null cells encountered after the last non-null cell and move the cursor
-    // if a non-null cell is found (eg. \t or cursor move)
-    if (cell.getChars() === '') {
+    /**
+     *  handles actual content
+     */
+    if (isEmptyCell) {
      this._nullCellCount += cell.getWidth();
-    } else if (this._nullCellCount > 0) {
-      this._currentRow += `\x1b[${this._nullCellCount}C`;
-      this._nullCellCount = 0;
-    }
+    } else {
+      if (this._nullCellCount > 0) {
+        // we can just assume we have same style with previous one here
+        // 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`;
+        } else {
+          this._currentRow += `\x1b[${this._nullCellCount}X`;
+          this._currentRow += `\x1b[${this._nullCellCount}C`;
+        }
+        this._nullCellCount = 0;
+      }

-    this._currentRow += cell.getChars();
+      this._currentRow += cell.getChars();
+
+      // update cursor
+      this._lastContentCursorRow = this._lastCursorRow = row;
+      this._lastContentCursorCol = this._lastCursorCol = col + cell.getWidth();
+    }
  }

  protected _serializeString(): string {
    let rowEnd = this._allRows.length;
-    for (; rowEnd > 0; rowEnd--) {
-      if (this._allRows[rowEnd - 1]) {
-        break;
+
+    // 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) {
+      rowEnd = this._lastContentCursorRow + 1 - this._firstRow;
+      this._lastCursorCol = this._lastContentCursorCol;
+      this._lastCursorRow = this._lastContentCursorRow;
+    }
+
+    let content = '';
+
+    for (let i = 0; i < rowEnd; i++) {
+      content += this._allRows[i];
+      if (i + 1 < rowEnd) {
+        content += this._allRowSeparators[i];
      }
    }
-    return this._allRows.slice(0, rowEnd).join('\r\n');
+
+    // restore the cursor
+    const realCursorRow = this._buffer1.baseY + this._buffer1.cursorY;
+    const realCursorCol = this._buffer1.cursorX;
+
+    const cursorMoved = (realCursorRow !== this._lastCursorRow || realCursorCol !== this._lastCursorCol);
+
+    const moveRight = (offset: number): void => {
+      if (offset > 0) {
+        content += `\u001b[${offset}C`;
+      } else if (offset < 0) {
+        content += `\u001b[${-offset}D`;
+      }
+    };
+    const moveDown = (offset: number): void => {
+      if (offset > 0) {
+        content += `\u001b[${offset}B`;
+      } else if (offset < 0) {
+        content += `\u001b[${-offset}A`;
+      }
+    };
+
+    if (cursorMoved) {
+      moveDown(realCursorRow - this._lastCursorRow);
+      moveRight(realCursorCol - this._lastCursorCol);
+    }
+
+
+    return content;
  }
 }

@@ -167,20 +393,33 @@ export class SerializeAddon implements ITerminalAddon {
    this._terminal = terminal;
  }

-  public serialize(rows?: number): string {
-    // TODO: Add re-position cursor support
-    // TODO: Add word wrap mode support
+  private _getString(buffer: IBuffer, scrollback?: number): string {
+    const maxRows = buffer.length;
+    const handler = new StringSerializeHandler(buffer, this._terminal!);
+
+    const correctRows = (scrollback === undefined) ? maxRows : constrain(scrollback + this!._terminal!.rows, 0, maxRows);
+    const result = handler.serialize(maxRows - correctRows, maxRows);
+
+    return result;
+  }
+
+  public serialize(scrollback?: number): string {
    // TODO: Add combinedData support
    if (!this._terminal) {
      throw new Error('Cannot use addon until it has been loaded');
    }

-    const maxRows = this._terminal.buffer.active.length;
-    const handler = new StringSerializeHandler(this._terminal.buffer.active);
+    if (this._terminal.buffer.active.type === 'normal') {
+      return this._getString(this._terminal.buffer.active, scrollback);
+    }

-    rows = (rows === undefined) ? maxRows : constrain(rows, 0, maxRows);
+    const normalScreenContent = this._getString(this._terminal.buffer.normal, scrollback);
+    // alt screen don't have scrollback
+    const alternativeScreenContent = this._getString(this._terminal.buffer.alternate, undefined);

-    return handler.serialize(maxRows - rows, maxRows);
+    return normalScreenContent
+      + '\u001b[?1049h\u001b[H'
+      + alternativeScreenContent;
  }

  public dispose(): void { }
@@ -18,8 +18,7 @@
    },
    "strict": true,
    "types": [
-      "../../../node_modules/@types/mocha",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@types/mocha"
    ]
  },
  "include": [
@@ -5,20 +5,36 @@

 import { assert } from 'chai';
 import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright-core';
+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;
 const width = 800;
 const height = 600;

+const writeRawSync = (page: any, str: string): Promise<void> => writeSync(page, '\' +' + JSON.stringify(str) + '+ \'');
+
+const testNormalScreenEqual = async (page: any, str: string): Promise<void> => {
+  await writeRawSync(page, str);
+  const originalBuffer = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+  const result = await page.evaluate(`serializeAddon.serialize();`) as string;
+  await page.evaluate(`term.reset();`);
+  await writeRawSync(page, result);
+  const newBuffer = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+  // chai decides -0 and 0 are different number...
+  // and firefox have a bug that output -0 for unknown reason
+  assert.equal(JSON.stringify(originalBuffer), JSON.stringify(newBuffer));
+};
+
 describe('SerializeAddon', () => {
  before(async function(): Promise<any> {
    const browserType = getBrowserType();
-    browser = await browserType.launch({ dumpio: true,
-      headless: process.argv.indexOf('--headless') !== -1
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
    });
    page = await (await browser.newContext()).newPage();
    await page.setViewportSize({ width, height });
@@ -27,19 +43,74 @@ describe('SerializeAddon', () => {
    await page.evaluate(`
      window.serializeAddon = new SerializeAddon();
      window.term.loadAddon(window.serializeAddon);
+      window.inspectBuffer = (buffer) => {
+        const lines = [];
+        for (let i = 0; i < buffer.length; i++) {
+          // Do this intentionally to get content of underlining source
+          const bufferLine = buffer.getLine(i)._line;
+          lines.push(JSON.stringify(bufferLine));
+        }
+        return {
+          x: buffer.cursorX,
+          y: buffer.cursorY,
+          data: lines
+        };
+      }
    `);
  });

  after(async () => await browser.close());
  beforeEach(async () => await page.evaluate(`window.term.reset()`));

+  it('produce different output when we call test util with different text', async function(): Promise<any> {
+    await writeRawSync(page, '12345');
+    const buffer1 = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+    await page.evaluate(`term.reset();`);
+    await writeRawSync(page, '67890');
+    const buffer2 = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+    assert.throw(() => {
+      assert.equal(JSON.stringify(buffer1), JSON.stringify(buffer2));
+    });
+  });
+
+  it('produce different output when we call test util with different line wrap', async function(): Promise<any> {
+    await writeRawSync(page, '1234567890\r\n12345');
+    const buffer3 = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+    await page.evaluate(`term.reset();`);
+    await writeRawSync(page, '1234567890n12345');
+    const buffer4 = await page.evaluate(`inspectBuffer(term.buffer.normal);`);
+
+    assert.throw(() => {
+      assert.equal(JSON.stringify(buffer3), JSON.stringify(buffer4));
+    });
+  });
+
  it('empty content', async function(): Promise<any> {
    const rows = 10;
    const cols = 10;
    assert.equal(await page.evaluate(`serializeAddon.serialize();`), '');
  });

-  it('trim last empty lines', async function(): Promise<any> {
+  it('unwrap wrapped line', async function(): Promise<any> {
+    const lines = ['123456789123456789'];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+  it('does not unwrap non-wrapped line', async function(): Promise<any> {
+    const lines = [
+      '123456789',
+      '123456789'
+    ];
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
+  });
+
+
+  it('preserve last empty lines', async function(): Promise<any> {
    const cols = 10;
    const lines = [
      '',
@@ -55,7 +126,7 @@ describe('SerializeAddon', () => {
      ''
    ];
    await writeSync(page, lines.join('\\r\\n'));
-    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.slice(0, 8).join('\r\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
  });

  it('digits content', async function(): Promise<any> {
@@ -67,21 +138,22 @@ describe('SerializeAddon', () => {
    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
  });

-  it('serialize half rows of content', async function(): Promise<any> {
-    const rows = 10;
-    const halfRows = rows >> 1;
+  it('serialize with half of scrollback', async function(): Promise<any> {
+    const rows = 20;
+    const scrollback = rows - 10;
+    const halfScrollback = scrollback / 2;
    const cols = 10;
    const lines = newArray<string>((index: number) => digitsString(cols, index), rows);
    await writeSync(page, lines.join('\\r\\n'));
-    assert.equal(await page.evaluate(`serializeAddon.serialize(${halfRows});`), lines.slice(halfRows, 2 * halfRows).join('\r\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize(${halfScrollback});`), lines.slice(halfScrollback, rows).join('\r\n'));
  });

-  it('serialize 0 rows of content', async function(): Promise<any> {
-    const rows = 10;
+  it('serialize 0 rows of scrollback', async function(): Promise<any> {
+    const rows = 20;
    const cols = 10;
    const lines = newArray<string>((index: number) => digitsString(cols, index), rows);
    await writeSync(page, lines.join('\\r\\n'));
-    assert.equal(await page.evaluate(`serializeAddon.serialize(0);`), '');
+    assert.equal(await page.evaluate(`serializeAddon.serialize(0);`), lines.slice(rows - 10, rows).join('\r\n'));
  });

  it('serialize all rows of content with color16', async function(): Promise<any> {
@@ -276,17 +348,15 @@ describe('SerializeAddon', () => {
      '中文中文',
      '12中文',
      '中文12',
-      '1中文中文中' // this line is going to be wrapped at last character because it has line length of 11 (1+2*5)
-    ];
-    const expected = [
-      '中文中文',
-      '12中文',
-      '中文12',
-      '1中文中文',
-      '中'
+      // This line is going to be wrapped at last character
+      // because it has line length of 11 (1+2*5).
+      // We concat it back without the null cell currently.
+      // But this may be incorrect.
+      // see also #3097
+      '1中文中文中'
    ];
    await writeSync(page, lines.join('\\r\\n'));
-    assert.equal(await page.evaluate(`serializeAddon.serialize();`), expected.join('\r\n'));
+    assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
  });

  it('serialize CJK Mixed with tab correctly', async () => {
@@ -299,15 +369,127 @@ describe('SerializeAddon', () => {
    await writeSync(page, lines.join('\\r\\n'));
    assert.equal(await page.evaluate(`serializeAddon.serialize();`), expected.join('\r\n'));
  });
+
+  it('serialize with alt screen correctly', async () => {
+    const SMCUP = '\u001b[?1049h';
+    const CUP = '\u001b[H';
+
+    const lines = [
+      `1${SMCUP}${CUP}2`
+    ];
+    const expected = [
+      `1${SMCUP}${CUP}2`
+    ];
+
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`window.term.buffer.active.type`), 'alternate');
+    assert.equal(JSON.stringify(await page.evaluate(`serializeAddon.serialize();`)), JSON.stringify(expected.join('\r\n')));
+  });
+
+  it('serialize without alt screen correctly', async () => {
+    const SMCUP = '\u001b[?1049h';
+    const RMCUP = '\u001b[?1049l';
+
+    const lines = [
+      `1${SMCUP}2${RMCUP}`
+    ];
+    const expected = [
+      `1`
+    ];
+
+    await writeSync(page, lines.join('\\r\\n'));
+    assert.equal(await page.evaluate(`window.term.buffer.active.type`), 'normal');
+    assert.equal(JSON.stringify(await page.evaluate(`serializeAddon.serialize();`)), JSON.stringify(expected.join('\r\n')));
+  });
+
+  it('serialize with background', async () => {
+    const CLEAR_RIGHT = (l: number): string => `\u001b[${l}X`;
+
+    const lines = [
+      `1\u001b[44m${CLEAR_RIGHT(5)}`,
+      `2${CLEAR_RIGHT(9)}`
+    ];
+
+    await testNormalScreenEqual(page, lines.join('\r\n'));
+  });
+
+  it('cause the BCE on scroll', async () => {
+    const CLEAR_RIGHT = (l: number): string => `\u001b[${l}X`;
+
+    const padLines = newArray<string>(
+      (index: number) => digitsString(10, index),
+      10
+    );
+
+    const lines = [
+      ...padLines,
+      `\u001b[44m${CLEAR_RIGHT(5)}1111111111111111`
+    ];
+
+    await testNormalScreenEqual(page, lines.join('\r\n'));
+  });
+
+  it('handle invalid wrap before scroll', async () => {
+    const CLEAR_RIGHT = (l: number): string => `\u001b[${l}X`;
+    const MOVE_UP = (l: number): string => `\u001b[${l}A`;
+    const MOVE_DOWN = (l: number): string => `\u001b[${l}B`;
+    const MOVE_LEFT = (l: number): string => `\u001b[${l}D`;
+
+    // A line wrap happened after current line.
+    // But there is no content.
+    // so wrap shouldn't even be able to happen.
+    const segments = [
+      `123456789012345`,
+      MOVE_UP(1),
+      CLEAR_RIGHT(5),
+      MOVE_DOWN(1),
+      MOVE_LEFT(5),
+      CLEAR_RIGHT(5),
+      MOVE_UP(1),
+      '1'
+    ];
+
+    await testNormalScreenEqual(page, segments.join(''));
+  });
+
+  it('handle invalid wrap after scroll', async () => {
+    const CLEAR_RIGHT = (l: number): string => `\u001b[${l}X`;
+    const MOVE_UP = (l: number): string => `\u001b[${l}A`;
+    const MOVE_DOWN = (l: number): string => `\u001b[${l}B`;
+    const MOVE_LEFT = (l: number): string => `\u001b[${l}D`;
+
+    const padLines = newArray<string>(
+      (index: number) => digitsString(10, index),
+      10
+    );
+
+    // A line wrap happened after current line.
+    // But there is no content.
+    // so wrap shouldn't even be able to happen.
+    const lines = [
+      padLines.join('\r\n'),
+      '\r\n',
+      `123456789012345`,
+      MOVE_UP(1),
+      CLEAR_RIGHT(5),
+      MOVE_DOWN(1),
+      MOVE_LEFT(5),
+      CLEAR_RIGHT(5),
+      MOVE_UP(1),
+      '1'
+    ];
+
+    await testNormalScreenEqual(page, lines.join(''));
+  });
 });

 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;
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [
+      "es2015"
+    ],
+    "rootDir": ".",
+    "outDir": "../out-test",
+    "sourceMap": true,
+    "removeComments": true,
+    "baseUrl": ".",
+    "paths": {
+      "common/*": [
+        "../../../src/common/*"
+      ]
+    },
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../node_modules/@types/node",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/common"
+    }
+  ]
+}
@@ -0,0 +1,9 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" },
+    { "path": "./benchmark" }
+  ]
+}
@@ -25,10 +25,10 @@ declare module 'xterm-addon-serialize' {
     * 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 rows The number of rows to serialize, starting from the bottom of the
-     * terminal. This defaults to the number of rows in the viewport.
+     * @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(rows?: number): string;
+    public serialize(scrollback?: number): string;

    /**
     * Disposes the addon.
@@ -10,7 +10,7 @@
  "repository": "https://github.com/xtermjs/xterm.js",
  "license": "MIT",
  "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
    "prepackage": "npm run build",
    "package": "../../node_modules/.bin/webpack",
    "prepublishOnly": "npm run package"
@@ -18,8 +18,7 @@
      ]
    },
    "types": [
-      "../../../node_modules/@types/mocha",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@types/mocha"
    ]
  },
  "include": [
@@ -5,9 +5,9 @@

 import { assert } from 'chai';
 import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright-core';
+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;
@@ -17,8 +17,8 @@ const height = 600;
 describe('Unicode11Addon', () => {
  before(async function(): Promise<any> {
    const browserType = getBrowserType();
-    browser = await browserType.launch({ dumpio: true,
-      headless: process.argv.indexOf('--headless') !== -1
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
    });
    page = await (await browser.newContext()).newPage();
    await page.setViewportSize({ width, height });
@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es2015",
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "rootDir": ".",
+    "outDir": "../out-test",
+    "sourceMap": true,
+    "removeComments": true,
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "common/*": [
+        "../../../src/common/*"
+      ]
+    },
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../node_modules/@types/node",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/common"
+    }
+  ]
+}
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}
@@ -10,7 +10,7 @@
  "repository": "https://github.com/xtermjs/xterm.js",
  "license": "MIT",
  "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
    "prepackage": "npm run build",
    "package": "../../node_modules/.bin/webpack",
    "prepublishOnly": "npm run package"
@@ -3,25 +3,45 @@
 * @license MIT
 */

-import { ILinkProvider, IBufferCellPosition, ILink, Terminal } from 'xterm';
+import { ILinkProvider, ILink, Terminal, IViewportRange } from 'xterm';
+
+interface ILinkProviderOptions {
+  hover?(event: MouseEvent, text: string, location: IViewportRange): void;
+  leave?(event: MouseEvent, text: string): void;
+}

 export class WebLinkProvider implements ILinkProvider {

  constructor(
    private readonly _terminal: Terminal,
    private readonly _regex: RegExp,
-    private readonly _handler: (event: MouseEvent, uri: string) => void
+    private readonly _handler: (event: MouseEvent, uri: string) => void,
+    private readonly _options: ILinkProviderOptions = {}
  ) {

  }

  public provideLinks(y: number, callback: (links: ILink[] | undefined) => void): void {
-    callback(LinkComputer.computeLink(y, this._regex, this._terminal, this._handler));
+    const links = LinkComputer.computeLink(y, this._regex, this._terminal, this._handler);
+    callback(this._addCallbacks(links));
+  }
+
+  private _addCallbacks(links: ILink[]): ILink[] {
+    return links.map(link => {
+      link.leave = this._options.leave;
+      link.hover = (event: MouseEvent, uri: string): void => {
+        if (this._options.hover) {
+          const { range } = link;
+          this._options.hover(event, uri, range);
+        }
+      };
+      return link;
+    });
  }
 }

 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);
@@ -69,7 +89,7 @@ export class LinkComputer {
        }
      };

-      result.push({ range, text, activate: handler });
+      result.push({ range, text, activate });
    }

    return result;
@@ -3,7 +3,7 @@
 * @license MIT
 */

-import { Terminal, ILinkMatcherOptions, ITerminalAddon, IDisposable } from 'xterm';
+import { Terminal, ILinkMatcherOptions, ITerminalAddon, IDisposable, IViewportRange } from 'xterm';
 import { WebLinkProvider } from './WebLinkProvider';

 const protocolClause = '(https?:\\/\\/)';
@@ -36,6 +36,11 @@ function handleLink(event: MouseEvent, uri: string): void {
  }
 }

+interface ILinkProviderOptions {
+  hover?(event: MouseEvent, text: string, location: IViewportRange): void;
+  leave?(event: MouseEvent, text: string): void;
+}
+
 export class WebLinksAddon implements ITerminalAddon {
  private _linkMatcherId: number | undefined;
  private _terminal: Terminal | undefined;
@@ -43,20 +48,22 @@ export class WebLinksAddon implements ITerminalAddon {

  constructor(
    private _handler: (event: MouseEvent, uri: string) => void = handleLink,
-    private _options: ILinkMatcherOptions = {},
+    private _options: ILinkMatcherOptions | ILinkProviderOptions = {},
    private _useLinkProvider: boolean = false
  ) {
-    this._options.matchIndex = 1;
  }

  public activate(terminal: Terminal): void {
    this._terminal = terminal;

    if (this._useLinkProvider && 'registerLinkProvider' in this._terminal) {
-      this._linkProvider = this._terminal.registerLinkProvider(new WebLinkProvider(this._terminal, strictUrlRegex, this._handler));
+      const options = this._options as ILinkProviderOptions;
+      this._linkProvider = this._terminal.registerLinkProvider(new WebLinkProvider(this._terminal, strictUrlRegex, this._handler, options));
    } else {
      // TODO: This should be removed eventually
-      this._linkMatcherId = (this._terminal as Terminal).registerLinkMatcher(strictUrlRegex, this._handler, this._options);
+      const options = this._options as ILinkMatcherOptions;
+      options.matchIndex = 1;
+      this._linkMatcherId = (this._terminal as Terminal).registerLinkMatcher(strictUrlRegex, this._handler, options);
    }
  }

@@ -12,8 +12,7 @@
    "removeComments": true,
    "strict": true,
    "types": [
-      "../../../node_modules/@types/mocha",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@types/mocha"
    ]
  },
  "include": [
@@ -5,9 +5,9 @@

 import { assert } from 'chai';
 import { openTerminal, pollFor, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright-core';
+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;
@@ -17,8 +17,8 @@ const height = 600;
 describe('WebLinksAddon', () => {
  before(async function(): Promise<any> {
    const browserType = getBrowserType();
-    browser = await browserType.launch({ dumpio: true,
-      headless: process.argv.indexOf('--headless') !== -1
+    browser = await browserType.launch({
+      headless: process.argv.includes('--headless')
    });
    page = await (await browser.newContext()).newPage();
    await page.setViewportSize({ width, height });
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [
+      "es2015"
+    ],
+    "rootDir": ".",
+    "outDir": "../out-test",
+    "sourceMap": true,
+    "removeComments": true,
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../node_modules/@types/node",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ]
+}
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}
@@ -4,7 +4,7 @@
 */


-import { Terminal, ILinkMatcherOptions, ITerminalAddon } from 'xterm';
+import { Terminal, ILinkMatcherOptions, ITerminalAddon, IViewportRange } from 'xterm';

 declare module 'xterm-addon-web-links' {
  /**
@@ -20,7 +20,7 @@ declare module 'xterm-addon-web-links' {
     * link provider (new) may cause issues. Link provider will eventually be
     * the default and only option.
     */
-    constructor(handler?: (event: MouseEvent, uri: string) => void, options?: ILinkMatcherOptions, useLinkProvider?: boolean);
+    constructor(handler?: (event: MouseEvent, uri: string) => void, options?: ILinkMatcherOptions | ILinkProviderOptions, useLinkProvider?: boolean);

    /**
     * Activates the addon
@@ -33,4 +33,21 @@ declare module 'xterm-addon-web-links' {
     */
    public dispose(): void;
  }
+
+  /**
+   * An object containing options for a link provider.
+   */
+  export interface ILinkProviderOptions {
+    /**
+     * A callback that fires when the mouse hovers over a link for a period of
+     * time (defined by {@link ITerminalOptions.linkTooltipHoverDuration}).
+     */
+    hover?(event: MouseEvent, text: string, location: IViewportRange): void;
+
+    /**
+     * A callback that fires when the mouse leaves a link. Note that this can
+     * happen even when tooltipCallback hasn't fired for the link yet.
+     */
+    leave?(event: MouseEvent, text: string): void;
+  }
 }
@@ -3,3 +3,5 @@
 tsconfig.json
 .yarnrc
 webpack.config.js
+out-test/
+test/
@@ -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).
@@ -1,6 +1,6 @@
 {
  "name": "xterm-addon-webgl",
-  "version": "0.9.0",
+  "version": "0.11.1",
  "author": {
    "name": "The xterm.js authors",
    "url": "https://xtermjs.org/"
@@ -10,7 +10,7 @@
  "repository": "https://github.com/xtermjs/xterm.js",
  "license": "MIT",
  "scripts": {
-    "build": "../../node_modules/.bin/tsc -p src",
+    "build": "../../node_modules/.bin/tsc -p .",
    "prepackage": "npm run build",
    "package": "../../node_modules/.bin/webpack",
    "prepublishOnly": "npm run package"
@@ -263,7 +263,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:
@@ -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);
  }

@@ -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();
@@ -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,7 +105,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
  }

  public dispose(): void {
-    this._renderLayers.forEach(l => l.dispose());
+    for (const l of this._renderLayers) {
+      l.dispose();
+    }
    this._core.screenElement!.removeChild(this._canvas);
    super.dispose();
  }
@@ -106,22 +119,18 @@ 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();

    this._refreshCharAtlas();

-    this._rectangleRenderer.updateSelection(this._model.selection);
-    this._glyphRenderer.updateSelection(this._model);
-
    // Force a full refresh
    this._model.clear();
-    this._model.clearSelection();
  }

  public onDevicePixelRatioChange(): void {
@@ -138,10 +147,11 @@ export class WebglRenderer extends Disposable implements IRenderer {
    this._updateDimensions();

    this._model.resize(this._terminal.cols, this._terminal.rows);
-    this._rectangleRenderer.onResize();

    // 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;
@@ -152,6 +162,13 @@ export class WebglRenderer extends Disposable implements IRenderer {
    // Resize the screen
    this._core.screenElement!.style.width = `${this.dimensions.canvasWidth}px`;
    this._core.screenElement!.style.height = `${this.dimensions.canvasHeight}px`;
+
+    this._rectangleRenderer.onResize();
+    if (this._model.selection.hasSelection) {
+      // Update selection as dimensions have changed
+      this._rectangleRenderer.updateSelection(this._model.selection);
+    }
+
    this._glyphRenderer.setDimensions(this.dimensions);
    this._glyphRenderer.onResize();

@@ -159,7 +176,6 @@ export class WebglRenderer extends Disposable implements IRenderer {

    // Force a full refresh
    this._model.clear();
-    this._model.clearSelection();
  }

  public onCharSizeChanged(): void {
@@ -167,30 +183,37 @@ 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);

-    this._rectangleRenderer.updateSelection(this._model.selection);
-    this._glyphRenderer.updateSelection(this._model);
-
    this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1 });
  }

  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();
  }
@@ -220,12 +243,13 @@ export class WebglRenderer extends Disposable implements IRenderer {
    this._charAtlas?.clearTexture();
    this._model.clear();
    this._updateModel(0, this._terminal.rows - 1);
-    this._glyphRenderer.updateSelection(this._model);
    this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1 });
  }

  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 {
@@ -248,12 +272,14 @@ 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()) {
      this._model.clear();
-      this._model.clearSelection();
+      this._updateSelectionModel(undefined, undefined);
    }

    // Update model to reflect what's drawn
@@ -266,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) {
@@ -284,33 +335,52 @@ 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);
+    if (this._model.selection.hasSelection) {
+      // Model could be updated but the selection is unchanged
+      this._glyphRenderer.updateSelection(this._model);
+    }
  }

-  private _updateSelectionModel(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+  private _updateSelectionModel(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
    const terminal = this._terminal;

    // Selection does not exist
    if (!start || !end || (start[0] === end[0] && start[1] === end[1])) {
      this._model.clearSelection();
+      this._rectangleRenderer.updateSelection(this._model.selection);
      return;
    }

@@ -323,6 +393,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
    // No need to draw the selection
    if (viewportCappedStartRow >= terminal.rows || viewportCappedEndRow < 0) {
      this._model.clearSelection();
+      this._rectangleRenderer.updateSelection(this._model.selection);
      return;
    }

@@ -334,6 +405,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
    this._model.selection.viewportCappedEndRow = viewportCappedEndRow;
    this._model.selection.startCol = start[0];
    this._model.selection.endCol = end[0];
+
+    this._rectangleRenderer.updateSelection(this._model.selection);
  }

  /**
@@ -408,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()];
+  }
+}
@@ -80,12 +80,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.width = this._config.scaledCharWidth * 4 + 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._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
  }

  public dispose(): void {
@@ -317,6 +317,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;
@@ -358,7 +365,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 +374,22 @@ 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 the character
-    this._tmpCtx.fillText(chars, TMP_CANVAS_GLYPH_PADDING, TMP_CANVAS_GLYPH_PADDING + this._config.scaledCharHeight / 2);
+    this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
    this._tmpCtx.restore();

    // clear the background from the character to avoid issues with drawing over the previous
@@ -391,7 +412,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);
    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 +445,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): 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 +465,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 +478,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 +493,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 +520,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),
+        y: -boundingBox.top + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING)
      }
    };
  }
@@ -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();
@@ -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);
  }

  /**
@@ -21,8 +21,7 @@
    },
    "strict": true,
    "types": [
-      "../../../node_modules/@types/mocha",
-      "../../../out-test/api/TestUtils"
+      "../../../node_modules/@types/mocha"
    ]
  },
  "include": [
@@ -7,9 +7,9 @@ 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-core';
+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,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;
@@ -892,8 +892,8 @@ async function getCellColor(col: number, row: number): Promise<number[]> {

 async function setupBrowser(options: ITerminalOptions = { rendererType: 'dom' }): Promise<void> {
  const browserType = getBrowserType();
-  browser = await browserType.launch({ dumpio: true,
-    headless: process.argv.indexOf('--headless') !== -1
+  browser = await browserType.launch({
+    headless: process.argv.includes('--headless')
  });
  page = await (await browser.newContext()).newPage();
  await page.setViewportSize({ width, height });
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": [
+      "es6",
+    ],
+    "rootDir": ".",
+    "outDir": "../out-test",
+    "sourceMap": true,
+    "removeComments": true,
+    "baseUrl": ".",
+    "paths": {
+      "common/*": [
+        "../../../src/common/*"
+      ],
+      "browser/*": [
+        "../../../src/browser/*"
+      ]
+    },
+    "strict": true,
+    "types": [
+      "../../../node_modules/@types/mocha",
+      "../../../node_modules/@types/node",
+      "../../../out-test/api/TestUtils"
+    ]
+  },
+  "include": [
+    "./**/*",
+    "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    }
+  ]
+}
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    { "path": "./src" },
+    { "path": "./test" }
+  ]
+}
@@ -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>;
  }
 }
@@ -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,23 +92,14 @@ jobs:
    displayName: Install required packages
  - task: NodeTool@0
    inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
    displayName: 'Install Node.js'
  - task: YarnInstaller@3
    inputs:
      versionSpec: '1.x'
    displayName: 'Install Yarn'
-  - task: CacheBeta@1
-    inputs:
-      key: yarn2 | $(Agent.OS) | yarn.lock
-      path: node_modules
-    displayName: Cache node modules
  - 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"
@@ -120,19 +111,10 @@ jobs:
  steps:
  - task: NodeTool@0
    inputs:
-      versionSpec: '10.x'
+      versionSpec: '14.x'
    displayName: 'Install Node.js'
-  - task: CacheBeta@1
-    inputs:
-      key: yarn2 | $(Agent.OS) | yarn.lock
-      path: node_modules
-    displayName: Cache node modules
  - 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
@@ -140,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
@@ -147,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:
@@ -1,23 +0,0 @@
-/**
- * Copyright (c) 2020 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-const playwright = require('playwright-core');
-const fs = require('fs');
-
-// Default to chromium
-let browserType = playwright['chromium'];
-const index = process.argv.indexOf('--browser');
-if (index !== -1 && process.argv.length > index + 1 && typeof process.argv[index + 1] === 'string') {
-  const string = process.argv[index + 1];
-  if (string === 'firefox' || string === 'webkit') {
-    browserType = playwright[string];
-  }
-}
-
-const exists = fs.existsSync(browserType.executablePath());
-if (!exists) {
-  console.log(`Downloading ${browserType.name()}`);
-  browserType.downloadBrowserIfNeeded().then(() => process.exit(0));
-}
@@ -359,7 +359,7 @@ function empty(ar) {
 }

 function* parseMultiLineGen(filename, s) {
-  if (!~s.indexOf('@vt:')) {
+  if (!s.includes('@vt:')) {
    return;
  }
  const lines = s.split('\n').map(el => el.trim().replace(/[*]/, '').replace(/\s/, ''));
@@ -413,7 +413,7 @@ function parseSingleLine(filename, s) {
  const line = s.trim();
  const match = line.match(REX_VT_LINE);
  if (match !== null) {
-    if (!~TYPES.indexOf(match[2])) {
+    if (!TYPES.includes(match[2])) {
      throw new Error(`unkown vt-command type "${match[2]}" specified in "${filename}"`);
    }
    return {
@@ -25,7 +25,7 @@ if (fs.existsSync(addonsPath)) {

  // walk all addon folders
  fs.readdir(addonsPath, (err, files) => {
-    files.forEach(folder => {
+    for (const folder of files) {
      const addonPath = path.join(addonsPath, folder);

      // install only if there are dependencies listed
@@ -51,6 +51,6 @@ if (fs.existsSync(addonsPath)) {
      } else {
        console.log('Skipped', folder);
      }
-    });
+    }
  });
 }
@@ -11,7 +11,7 @@ const path = require('path');
 // Setup auth
 fs.writeFileSync(`${process.env['HOME']}/.npmrc`, `//registry.npmjs.org/:_authToken=${process.env['NPM_AUTH_TOKEN']}`);

-const isDryRun = process.argv.indexOf('--dry') !== -1;
+const isDryRun = process.argv.includes('--dry');
 if (isDryRun) {
  console.log('Publish dry run');
 }
@@ -36,13 +36,13 @@ const addonPackageDirs = [
  path.resolve(__dirname, '../addons/xterm-addon-webgl')
 ];
 console.log(`Checking if addons need to be published`);
-addonPackageDirs.forEach(p => {
+for (const p of addonPackageDirs) {
  const addon = path.basename(p);
-  if (changedFiles.some(e => e.indexOf(addon) !== -1)) {
+  if (changedFiles.some(e => e.includes(addon))) {
    console.log(`Try publish ${addon}`);
    checkAndPublishPackage(p);
  }
-});
+}

 // Publish website if it's a stable release
 if (isStableRelease) {
@@ -54,7 +54,7 @@ function checkAndPublishPackage(packageDir) {

  // Determine if this is a stable or beta release
  const publishedVersions = getPublishedVersions(packageJson);
-  const isStableRelease = publishedVersions.indexOf(packageJson.version) === -1;
+  const isStableRelease = !publishedVersions.includes(packageJson.version);

  // Get the next version
  let nextVersion = isStableRelease ? packageJson.version : getNextBetaVersion(packageJson);
@@ -12,7 +12,7 @@ const env = { ...process.env };
 env.NODE_PATH = path.resolve(__dirname, '../out');

 let testFiles = [
-  './addons/**/out/*api.js',
+  './addons/**/out-test/*api.js',
  './out-test/**/*api.js',
 ];

@@ -34,19 +34,31 @@ 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));
+    }
+
+    process.exit(run.status);
  }
-);
-
-function npmBinScript(script) {
-  return path.resolve(__dirname, `../node_modules/.bin/` + (process.platform === 'win32' ? `${script}.cmd` : script));
-}
-
-process.exit(run.status);
+});
@@ -88,19 +88,19 @@ function evalButtonCode(code) {
  if (code & 64) {
    button |= 4
  }
-  let actionS = 'press';
+  let action = 'press';
  let buttonS = reverseButtons[button];
  if (button === 3) {
    buttonS = '<none>';
-    actionS = 'release';
+    action = 'release';
  }
  if (move) {
-    actionS = 'move';
+    action = 'move';
  } else if (4 <= button && button <= 7) {
    buttonS = 'wheel';
-    actionS = button === 4 ? 'up' : button === 5 ? 'down' : button === 6 ? 'left' : 'right';
+    action = button === 4 ? 'up' : button === 5 ? 'down' : button === 6 ? 'left' : 'right';
  }
-  return {button: buttonS, action: actionS, modifier};
+  return {button: buttonS, action, modifier};
 }

 // protocols
@@ -36,7 +36,6 @@
 */

 .xterm {
-    font-feature-settings: "liga" 0;
    position: relative;
    user-select: none;
    -ms-user-select: none;
@@ -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');
@@ -93,7 +99,7 @@ const paddingElement = <HTMLInputElement>document.getElementById('padding');

 function setPadding(): void {
  term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
-  term.fit();
+  addons.fit.instance.fit();
 }

 function getSearchOptions(e: KeyboardEvent): ISearchOptions {
@@ -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,6 +140,7 @@ if (document.location.pathname === '/test') {
  window.SearchAddon = SearchAddon;
  window.SerializeAddon = SerializeAddon;
  window.Unicode11Addon = Unicode11Addon;
+  window.LigaturesAddon = LigaturesAddon;
  window.WebLinksAddon = WebLinksAddon;
  window.WebglAddon = WebglAddon;
 } else {
@@ -149,7 +157,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
@@ -43,15 +43,15 @@ function startServer() {
    const env = Object.assign({}, process.env);
    env['COLORTERM'] = 'truecolor';
    var cols = parseInt(req.query.cols),
-        rows = parseInt(req.query.rows),
-        term = pty.spawn(process.platform === 'win32' ? 'cmd.exe' : 'bash', [], {
-          name: 'xterm-256color',
-          cols: cols || 80,
-          rows: rows || 24,
-          cwd: env.PWD,
-          env: env,
-          encoding: USE_BINARY ? null : 'utf8'
-        });
+      rows = parseInt(req.query.rows),
+      term = pty.spawn(process.platform === 'win32' ? 'cmd.exe' : 'bash', [], {
+        name: 'xterm-256color',
+        cols: cols || 80,
+        rows: rows || 24,
+        cwd: process.platform === 'win32' ? undefined : env.PWD,
+        env: env,
+        encoding: USE_BINARY ? null : 'utf8'
+      });

    console.log('Created terminal with PID: ' + term.pid);
    terminals[term.pid] = term;
@@ -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: {
@@ -1,7 +1,7 @@
 {
  "name": "xterm",
  "description": "Full xterm terminal, in your browser",
-  "version": "4.9.0",
+  "version": "4.12.0",
  "main": "lib/xterm.js",
  "style": "css/xterm.css",
  "types": "typings/xterm.d.ts",
@@ -11,6 +11,7 @@
    "prepackage": "npm run build",
    "package": "webpack",
    "start": "node demo/start",
+    "start-debug": "node --inspect-brk demo/start",
    "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
    "test": "npm run test-unit",
    "posttest": "npm run lint",
@@ -18,9 +19,6 @@
    "test-api-chromium": "node ./bin/test_api.js --browser=chromium --timeout=20000",
    "test-api-firefox": "node ./bin/test_api.js --browser=firefox --timeout=20000",
    "test-api-webkit": "node ./bin/test_api.js --browser=webkit --timeout=20000",
-    "pretest-api-chromium": "node ./bin/download_browser.js --browser chromium",
-    "pretest-api-firefox": "node ./bin/download_browser.js --browser firefox",
-    "pretest-api-webkit": "node ./bin/download_browser.js --browser webkit",
    "test-unit": "node ./bin/test.js",
    "test-unit-coverage": "node ./bin/test.js --coverage",
    "build": "tsc -b ./tsconfig.all.json",
@@ -36,37 +34,37 @@
    "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
  },
  "devDependencies": {
-    "@types/chai": "^4.2.12",
+    "@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.4",
-    "@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.22",
-    "@types/ws": "^7.2.6",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "@typescript-eslint/parser": "^3.10.1",
-    "chai": "^4.2.0",
-    "deep-equal": "^2.0.3",
-    "eslint": "^7.8.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",
+    "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.1.3",
-    "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-core": "^0.11.1",
-    "source-map-loader": "^1.1.0",
-    "ts-loader": "^8.0.3",
-    "typescript": "4.0",
+    "playwright": "^1.11.0",
+    "source-map-loader": "^2.0.1",
+    "ts-loader": "^9.1.2",
+    "typescript": "^4.2.4",
    "utf8": "^3.0.0",
-    "webpack": "^4.44.1",
-    "webpack-cli": "^3.3.12",
-    "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"
  }
 }
@@ -56,8 +56,8 @@ export class AccessibilityManager extends Disposable {
    this._accessibilityTreeRoot.classList.add('xterm-accessibility');

    this._rowContainer = document.createElement('div');
+    this._rowContainer.setAttribute('role', 'list');
    this._rowContainer.classList.add('xterm-accessibility-tree');
-    this._rowContainer.setAttribute('role', 'document');
    this._rowElements = [];
    for (let i = 0; i < this._terminal.rows; i++) {
      this._rowElements[i] = this._createAccessibilityTreeNode();
@@ -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
@@ -263,7 +263,7 @@ export class AccessibilityManager extends Disposable {
      const element = this._rowElements[i];
      if (element) {
        if (lineData.length === 0) {
-          element.innerHTML = '&nbsp;';
+          element.innerText = '\u00a0';
        } else {
          element.textContent = lineData;
        }
@@ -89,8 +89,8 @@ export function moveTextAreaUnderMouseCursor(ev: MouseEvent, textarea: HTMLTextA
 export function rightClickHandler(ev: MouseEvent, textarea: HTMLTextAreaElement, screenElement: HTMLElement, selectionService: ISelectionService, shouldSelectWord: boolean): void {
  moveTextAreaUnderMouseCursor(ev, textarea, screenElement);

-  if (shouldSelectWord && !selectionService.isClickInSelection(ev)) {
-    selectionService.selectWordAtCursor(ev);
+  if (shouldSelectWord) {
+    selectionService.rightClickSelect(ev);
  }

  // Get textarea ready to copy from the context menu
@@ -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);
@@ -17,9 +17,8 @@ const DEFAULT_SELECTION = {
  rgba: 0xFFFFFF4D
 };

-// An IIFE to generate DEFAULT_ANSI_COLORS. Do not mutate DEFAULT_ANSI_COLORS, instead make a copy
-// and mutate that.
-export const DEFAULT_ANSI_COLORS = (() => {
+// An IIFE to generate DEFAULT_ANSI_COLORS.
+export const DEFAULT_ANSI_COLORS = Object.freeze((() => {
  const colors = [
    // dark:
    css.toColor('#2e3436'),
@@ -64,7 +63,7 @@ export const DEFAULT_ANSI_COLORS = (() => {
  }

  return colors;
-})();
+})());

 /**
 * Manages the source of truth for a terminal's colors.
@@ -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();
            }
@@ -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;
  }

  /**
@@ -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[] = [];
@@ -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 {
@@ -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 } 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';
@@ -53,6 +53,8 @@ import { Linkifier2 } from 'browser/Linkifier2';
 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;
@@ -70,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; }
@@ -81,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;

@@ -110,6 +113,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; }
@@ -146,8 +151,8 @@ 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));
    this.register(forwardEvent(this._inputHandler.onTitleChange, this._onTitleChange));
    this.register(forwardEvent(this._inputHandler.onA11yChar, this._onA11yCharEmitter));
@@ -157,6 +162,19 @@ export class Terminal extends CoreTerminal implements ITerminal {
    this.register(this._bufferService.onResize(e => this._afterResize(e.cols, e.rows)));
  }

+  private _changeAnsiColor(event: IAnsiColorChangeEvent): void {
+    if (!this._colorManager) { return; }
+
+    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);
+  }
+
  public dispose(): void {
    if (this._isDisposed) {
      return;
@@ -282,19 +300,26 @@ export class Terminal extends CoreTerminal implements ITerminal {
  }

  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';
@@ -371,7 +396,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
      throw new Error('Terminal requires a parent element.');
    }

-    if (!document.body.contains(parent)) {
+    if (!parent.isConnected) {
      this._logService.debug('Terminal.open was called on an element that was not attached to the DOM');
    }

@@ -383,6 +408,7 @@ 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
@@ -422,6 +448,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);
@@ -430,24 +470,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
    );
@@ -466,7 +495,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()));
@@ -479,7 +510,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();
    }));
@@ -570,7 +601,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) {
@@ -818,7 +849,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');
@@ -835,8 +866,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
    }
  }

-  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);
  }

@@ -888,13 +919,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);
    }
  }
@@ -983,7 +1020,7 @@ 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;
    }
@@ -1112,9 +1149,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
   */
  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);
@@ -1167,7 +1206,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 });
  }

  /**
@@ -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
@@ -32,7 +33,7 @@ if (os.platform() === 'darwin') {
  );
 }
 // filter skipFilenames
-const FILES = TESTFILES.filter(value => SKIP_FILES.indexOf(value.split('/').slice(-1)[0]) === -1);
+const FILES = TESTFILES.filter(value => !SKIP_FILES.includes(value.split('/').slice(-1)[0]));

 describe('Escape Sequence Files', function(): void {
  this.timeout(1000);
@@ -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();
@@ -104,8 +105,8 @@ describe('Escape Sequence Files', function(): void {
 function formatError(input: string, output: string, expected: string): string {
  function addLineNumber(start: number, color: string): (s: string) => string {
    let counter = start || 0;
-    return function(s: string): string {
-      counter += 1;
+    return (s: string): string => {
+      counter++;
      return '\x1b[33m' + (' ' + counter).slice(-2) + color + s;
    };
  }
@@ -5,9 +5,9 @@

 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';
@@ -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,6 +37,7 @@ 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 }>;
@@ -75,16 +79,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 +153,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 +285,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 +408,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 [];
+  }
+}
@@ -47,15 +47,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 +206,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 +303,10 @@ interface IBufferCellPosition {
  x: number;
  y: number;
 }
+
+export type CharacterJoinerHandler = (text: string) => [number, number][];
+
+export interface ICharacterJoiner {
+  id: number;
+  handler: CharacterJoinerHandler;
+}
@@ -33,7 +33,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,
@@ -151,12 +151,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);
  }

  /**
@@ -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();
@@ -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 {
@@ -35,17 +35,23 @@ export class CompositionHelper {
   */
  private _isSendingComposition: boolean;

+  /**
+   * Data already sent due to keydown event.
+   */
+  private _dataAlreadySent: string;
+
  constructor(
    private readonly _textarea: HTMLTextAreaElement,
    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;
    this._compositionPosition = { start: 0, end: 0 };
+    this._dataAlreadySent = '';
  }

  /**
@@ -55,6 +61,7 @@ export class CompositionHelper {
    this._isComposing = true;
    this._compositionPosition.start = this._textarea.value.length;
    this._compositionView.textContent = '';
+    this._dataAlreadySent = '';
    this._compositionView.classList.add('active');
  }

@@ -62,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(() => {
@@ -147,6 +154,9 @@ export class CompositionHelper {
        if (this._isSendingComposition) {
          this._isSendingComposition = false;
          let input;
+          // Add length of data already sent due to keydown event,
+          // otherwise input characters can be duplicated. (Issue #3191)
+          currentCompositionPosition.start += this._dataAlreadySent.length;
          if (this._isComposing) {
            // Use the end position to get the string if a new composition has started.
            input = this._textarea.value.substring(currentCompositionPosition.start, currentCompositionPosition.end);
@@ -156,7 +166,9 @@ export class CompositionHelper {
            // (eg. 2) after a composition character.
            input = this._textarea.value.substring(currentCompositionPosition.start);
          }
-          this._coreService.triggerDataEvent(input, true);
+          if (input.length > 0) {
+            this._coreService.triggerDataEvent(input, true);
+          }
        }
      }, 0);
    }
@@ -176,6 +188,7 @@ export class CompositionHelper {
        const newValue = this._textarea.value;
        const diff = newValue.replace(oldValue, '');
        if (diff.length > 0) {
+          this._dataAlreadySent = diff;
          this._coreService.triggerDataEvent(diff, true);
        }
      }
@@ -194,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';
@@ -209,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';
    }

@@ -31,7 +31,7 @@ export class AddonManager implements IDisposable {
    };
    this._addons.push(loadedAddon);
    instance.dispose = () => this._wrappedAddonDispose(loadedAddon);
-    instance.activate(<any>terminal);
+    instance.activate(terminal as any);
  }

  private _wrappedAddonDispose(loadedAddon: ILoadedAddon): void {
@@ -13,11 +13,13 @@ 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';

 export class Terminal implements ITerminalApi {
  private _core: ITerminal;
  private _addonManager: AddonManager;
  private _parser: IParser | undefined;
+  private _buffer: BufferNamespaceApi | undefined;

  constructor(options?: ITerminalOptions) {
    this._core = new TerminalCore(options);
@@ -36,6 +38,7 @@ export class Terminal implements ITerminalApi {
  public get onData(): IEvent<string> { return this._core.onData; }
  public get onBinary(): IEvent<string> { return this._core.onBinary; }
  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
+  public get onBell(): IEvent<void> { return this._core.onBell; }
  public get onScroll(): IEvent<number> { return this._core.onScroll; }
  public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
  public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; }
@@ -58,7 +61,10 @@ export class Terminal implements ITerminalApi {
  public get cols(): number { return this._core.cols; }
  public get buffer(): IBufferNamespaceApi {
    this._checkProposedApi();
-    return new BufferNamespaceApi(this._core.buffers);
+    if (!this._buffer) {
+      this._buffer = new BufferNamespaceApi(this._core);
+    }
+    return this._buffer;
  }
  public get markers(): ReadonlyArray<IMarker> {
    this._checkProposedApi();
@@ -170,7 +176,7 @@ export class Terminal implements ITerminalApi {
    this._core.paste(data);
  }
  public getOption(key: 'bellSound' | 'bellStyle' | 'cursorStyle' | 'fontFamily' | 'logLevel' | 'rendererType' | 'termName' | 'wordSeparator'): string;
-  public getOption(key: 'allowTransparency' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell'): boolean;
+  public getOption(key: 'allowTransparency' | 'altClickMovesCursor' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell'): boolean;
  public getOption(key: 'cols' | 'fontSize' | 'letterSpacing' | 'lineHeight' | 'rows' | 'tabStopWidth' | 'scrollback'): number;
  public getOption(key: 'fontWeight' | 'fontWeightBold'): FontWeight;
  public getOption(key: string): any;
@@ -182,7 +188,7 @@ export class Terminal implements ITerminalApi {
  public setOption(key: 'logLevel', value: 'debug' | 'info' | 'warn' | 'error' | 'off'): void;
  public setOption(key: 'bellStyle', value: 'none' | 'visual' | 'sound' | 'both'): void;
  public setOption(key: 'cursorStyle', value: 'block' | 'underline' | 'bar'): void;
-  public setOption(key: 'allowTransparency' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell', value: boolean): void;
+  public setOption(key: 'allowTransparency' | 'altClickMovesCursor' | 'cancelEvents' | 'convertEol' | 'cursorBlink' | 'disableStdin' | 'macOptionIsMeta' | 'rightClickSelectsWord' | 'popOnBell' | 'visualBell', value: boolean): void;
  public setOption(key: 'fontSize' | 'letterSpacing' | 'lineHeight' | 'tabStopWidth' | 'scrollback', value: number): void;
  public setOption(key: 'theme', value: ITheme): void;
  public setOption(key: 'cols' | 'rows', value: number): void;
@@ -245,21 +251,21 @@ class BufferNamespaceApi implements IBufferNamespaceApi {
  private _onBufferChange = new EventEmitter<IBufferApi>();
  public get onBufferChange(): IEvent<IBufferApi> { return this._onBufferChange.event; }

-  constructor(private _buffers: IBufferSet) {
-    this._normal = new BufferApiView(this._buffers.normal, 'normal');
-    this._alternate = new BufferApiView(this._buffers.alt, 'alternate');
-    this._buffers.onBufferActivate(() => this._onBufferChange.fire(this.active));
+  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._buffers.active === this._buffers.normal) { return this.normal; }
-    if (this._buffers.active === this._buffers.alt) { return this.alternate; }
+    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._buffers.normal);
+    return this._normal.init(this._core.buffers.normal);
  }
  public get alternate(): IBufferApi {
-    return this._alternate.init(this._buffers.alt);
+    return this._alternate.init(this._core.buffers.alt);
  }
 }

@@ -274,7 +280,7 @@ class BufferLineApiView implements IBufferLineApi {
    }

    if (cell) {
-      this._line.loadCell(x, <ICellData>cell);
+      this._line.loadCell(x, cell as ICellData);
      return cell;
    }
    return this._line.loadCell(x, new CellData());
@@ -287,28 +293,28 @@ class BufferLineApiView implements IBufferLineApi {
 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 registerCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
+    return this._core.registerCsiHandler(id, (params: IParams) => callback(params.toArray()));
  }
-  public addCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean): IDisposable {
+  public addCsiHandler(id: IFunctionIdentifier, callback: (params: (number | number[])[]) => boolean | Promise<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 registerDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
+    return this._core.registerDcsHandler(id, (data: string, params: IParams) => callback(data, params.toArray()));
  }
-  public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean): IDisposable {
+  public addDcsHandler(id: IFunctionIdentifier, callback: (data: string, param: (number | number[])[]) => boolean | Promise<boolean>): IDisposable {
    return this.registerDcsHandler(id, callback);
  }
-  public registerEscHandler(id: IFunctionIdentifier, handler: () => boolean): IDisposable {
-    return this._core.addEscHandler(id, handler);
+  public registerEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise<boolean>): IDisposable {
+    return this._core.registerEscHandler(id, handler);
  }
-  public addEscHandler(id: IFunctionIdentifier, handler: () => boolean): IDisposable {
+  public addEscHandler(id: IFunctionIdentifier, handler: () => boolean | Promise<boolean>): IDisposable {
    return this.registerEscHandler(id, handler);
  }
-  public registerOscHandler(ident: number, callback: (data: string) => boolean): IDisposable {
-    return this._core.addOscHandler(ident, callback);
+  public registerOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
+    return this._core.registerOscHandler(ident, callback);
  }
-  public addOscHandler(ident: number, callback: (data: string) => boolean): IDisposable {
+  public addOscHandler(ident: number, callback: (data: string) => boolean | Promise<boolean>): IDisposable {
    return this.registerOscHandler(ident, callback);
  }
 }
@@ -66,7 +66,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();
@@ -242,12 +242,12 @@ 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);
+      y * this._scaledCellHeight + this._scaledCharTop + this._scaledCharHeight);
  }

  /**
@@ -320,7 +320,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) {
@@ -362,7 +362,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    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);
    this._ctx.restore();
  }

@@ -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 = {
@@ -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));
@@ -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);
-  }
 }
@@ -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();
@@ -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,7 +210,7 @@ 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;
      }
--- a/Show More
+++ b/Show More