Merge branch 'master' into feat/3014-add-onBell-event-listener

2021-04-06 05:28:29 -07:00
parent 7b7b7a36db c7978f78a2
commit 9143cf4904
38 changed files with 572 additions and 348 deletions
@@ -151,6 +151,10 @@
      "warn",
      "never"
    ],
+    "object-curly-spacing": [
+      "warn",
+      "always"
+    ],
    "prefer-const": "warn",
    "spaced-comment": [
      "warn",
@@ -160,5 +164,13 @@
        "exceptions": ["-"]
      }
    ]
-  }
+  },
+  "overrides": [
+    {
+      "files": ["**/*.test.ts"],
+      "rules": {
+        "object-curly-spacing": "off"
+      }
+    }
+  ]
 }
@@ -173,6 +173,8 @@ Xterm.js is used in several world-class applications to provide great terminal e
 - [**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. 
 [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.
@@ -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
+
@@ -32,7 +32,7 @@
  "license": "MIT",
  "dependencies": {
    "font-finder": "^1.1.0",
-    "font-ligatures": "^1.3.3"
+    "font-ligatures": "^1.4.0"
  },
  "devDependencies": {
    "@types/sinon": "^5.0.1",
@@ -3,12 +3,19 @@
 * @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>;
+}
+
+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 +23,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 any).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: AsyncIterableIterator<IFontMetadata> = (navigator as any).fonts.query();
+        for await (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 +79,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 });
    }
  }

@@ -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
+    }
  }
 };
@@ -87,19 +87,19 @@ font-finder@^1.0.3:

 font-finder@^1.1.0:
  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/font-finder/-/font-finder-1.1.0.tgz#2bff2b2762acba720239c8bec898a96daae90858"
+  resolved "https://registry.npmjs.org/font-finder/-/font-finder-1.1.0.tgz#2bff2b2762acba720239c8bec898a96daae90858"
  integrity sha512-wpCL2uIbi6GurJbU7ZlQ3nGd61Ho+dSU6U83/xJT5UPFfN35EeCW/rOtS+5k+IuEZu2SYmHzDIPL9eA5tSYRAw==
  dependencies:
    get-system-fonts "^2.0.0"
    promise-stream-reader "^1.0.1"

-font-ligatures@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/font-ligatures/-/font-ligatures-1.3.3.tgz#63fff18dc8adb3a11fe5eec1f4e8d7edfa8075b9"
-  integrity sha512-NSGpHgVNX81M7AWS1XylK1UZbN3QllfUIDAAuPv6TUcl5O2b781JcKS5L2RopAU0AqlTyX3ZuX/04eaMpbVrHA==
+font-ligatures@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/font-ligatures/-/font-ligatures-1.4.0.tgz#6a7b370d96be1358dddfad67830e82fbfd59e6dc"
+  integrity sha512-n7DFnnEpJ0NrVoLqZIL4tMGVs+CnFwQc92m80LWyrbgAFO4x234+t2/H9o4eOYA1eh6ta9dZAEEsJAwsBdNezA==
  dependencies:
    font-finder "^1.0.3"
-    lru-cache "^4.1.3"
+    lru-cache "^6.0.0"
    opentype.js "^0.8.0"

 get-system-fonts@^2.0.0:
@@ -144,12 +144,12 @@ lolex@^5.0.1:
  dependencies:
    "@sinonjs/commons" "^1.7.0"

-lru-cache@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.3.tgz#a1175cf3496dfc8436c156c334b4955992bce69c"
+lru-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
  dependencies:
-    pseudomap "^1.0.2"
-    yallist "^2.1.2"
+    yallist "^4.0.0"

 minimist@^1.2.5:
  version "1.2.5"
@@ -198,10 +198,6 @@ promise-stream-reader@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/promise-stream-reader/-/promise-stream-reader-1.0.1.tgz#4e793a79c9d49a73ccd947c6da9c127f12923649"

-pseudomap@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
-
 sinon@6.3.5:
  version "6.3.5"
  resolved "https://registry.yarnpkg.com/sinon/-/sinon-6.3.5.tgz#0f6d6a5b4ebaad1f6e8e019395542d1d02c144a0"
@@ -232,9 +228,10 @@ type-detect@4.0.8, type-detect@^4.0.8:
  version "4.0.8"
  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"

-yallist@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
+yallist@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

 yauzl@^2.10.0:
  version "2.10.0"
@@ -5,7 +5,7 @@

 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';

@@ -25,8 +25,9 @@ export class WebglAddon implements ITerminalAddon {
    }
    this._terminal = terminal;
    const renderService: IRenderService = (<any>terminal)._core._renderService;
+    const characterJoinerService: ICharacterJoinerService = (<any>terminal)._core._characterJoinerService;
    const colors: IColorSet = (<any>terminal)._core._colorManager.colors;
-    this._renderer = new WebglRenderer(terminal, colors, this._preserveDrawingBuffer);
+    this._renderer = new WebglRenderer(terminal, colors, characterJoinerService, this._preserveDrawingBuffer);
    this._renderer.onContextLoss(() => this._onContextLoss.fire());
    renderService.setRenderer(this._renderer);
  }
@@ -12,7 +12,7 @@ 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';
@@ -20,6 +20,9 @@ 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[];
@@ -48,6 +51,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
  constructor(
    private _terminal: Terminal,
    private _colors: IColorSet,
+    private readonly _characterJoinerService: ICharacterJoinerService,
    preserveDrawingBuffer?: boolean
  ) {
    super();
@@ -288,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) {
@@ -306,8 +335,8 @@ 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;
        }

@@ -318,10 +347,24 @@ export class WebglRenderer extends Disposable implements IRenderer {

        // 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);
@@ -438,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;
@@ -405,7 +412,7 @@ export class WebglCharAtlas implements IDisposable {
      return NULL_RASTERIZED_GLYPH;
    }

-    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, isPowerlineGlyph);
+    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
@@ -438,14 +445,14 @@ 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, restrictedGlyph: boolean): 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 : this._tmpCanvas.width;
+    const width = restrictedGlyph ? this._config.scaledCharWidth : allowedWidth;
    let found = false;
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
-        const alphaOffset = y * width * 4 + x * 4 + 3;
+        const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
        if (imageData.data[alphaOffset] !== 0) {
          boundingBox.top = y;
          found = true;
@@ -460,7 +467,7 @@ export class WebglCharAtlas implements IDisposable {
    found = false;
    for (let x = 0; x < width; x++) {
      for (let y = 0; y < height; y++) {
-        const alphaOffset = y * width * 4 + x * 4 + 3;
+        const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
        if (imageData.data[alphaOffset] !== 0) {
          boundingBox.left = x;
          found = true;
@@ -475,7 +482,7 @@ export class WebglCharAtlas implements IDisposable {
    found = false;
    for (let x = width - 1; x >= 0; x--) {
      for (let y = 0; y < height; y++) {
-        const alphaOffset = y * width * 4 + x * 4 + 3;
+        const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
        if (imageData.data[alphaOffset] !== 0) {
          boundingBox.right = x;
          found = true;
@@ -490,7 +497,7 @@ export class WebglCharAtlas implements IDisposable {
    found = false;
    for (let y = height - 1; y >= 0; y--) {
      for (let x = 0; x < width; x++) {
-        const alphaOffset = y * width * 4 + x * 4 + 3;
+        const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
        if (imageData.data[alphaOffset] !== 0) {
          boundingBox.bottom = y;
          found = true;
@@ -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();
@@ -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');
@@ -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
@@ -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: {
@@ -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';
@@ -45,7 +45,7 @@ import { EventEmitter, IEvent, forwardEvent } from 'common/EventEmitter';
 import { DEFAULT_ATTR_DATA } from 'common/buffer/BufferLine';
 import { ColorManager } from 'browser/ColorManager';
 import { RenderService } from 'browser/services/RenderService';
-import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService } from 'browser/services/Services';
+import { ICharSizeService, IRenderService, IMouseService, ISelectionService, ISoundService, ICoreBrowserService, ICharacterJoinerService } from 'browser/services/Services';
 import { CharSizeService } from 'browser/services/CharSizeService';
 import { IBuffer } from 'common/buffer/Types';
 import { MouseService } from 'browser/services/MouseService';
@@ -54,6 +54,7 @@ import { CoreBrowserService } from 'browser/services/CoreBrowserService';
 import { CoreTerminal } from 'common/CoreTerminal';
 import { ITerminalOptions as IInitializedTerminalOptions } from 'common/services/Services';
 import { rgba } from 'browser/Color';
+import { CharacterJoinerService } from 'browser/services/CharacterJoinerService';

 // Let it work inside Node.js for automated testing purposes.
 const document: Document = (typeof window !== 'undefined') ? window.document : null as any;
@@ -82,6 +83,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
  private _charSizeService: ICharSizeService | undefined;
  private _mouseService: IMouseService | undefined;
  private _renderService: IRenderService | undefined;
+  private _characterJoinerService: ICharacterJoinerService | undefined;
  private _selectionService: ISelectionService | undefined;
  private _soundService: ISoundService | undefined;

@@ -451,6 +453,9 @@ export class Terminal extends CoreTerminal implements ITerminal {
    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);
@@ -916,13 +921,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);
    }
  }
@@ -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';
@@ -285,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 {
@@ -410,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 [];
+  }
+}
@@ -303,3 +303,10 @@ interface IBufferCellPosition {
  x: number;
  y: number;
 }
+
+export type CharacterJoinerHandler = (text: string) => [number, number][];
+
+export interface ICharacterJoiner {
+  id: number;
+  handler: CharacterJoinerHandler;
+}
@@ -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();
@@ -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;
      }
@@ -7,8 +7,6 @@ import { IDisposable } from 'common/Types';
 import { IColorSet } from 'browser/Types';
 import { IEvent } from 'common/EventEmitter';

-export type CharacterJoinerHandler = (text: string) => [number, number][];
-
 export interface IRenderDimensions {
  scaledCharWidth: number;
  scaledCharHeight: number;
@@ -54,19 +52,6 @@ export interface IRenderer extends IDisposable {
  onOptionsChanged(): void;
  clear(): void;
  renderRows(start: number, end: number): void;
-  registerCharacterJoiner(handler: CharacterJoinerHandler): number;
-  deregisterCharacterJoiner(joinerId: number): boolean;
-}
-
-export interface ICharacterJoiner {
-  id: number;
-  handler: CharacterJoinerHandler;
-}
-
-export interface ICharacterJoinerRegistry {
-  registerCharacterJoiner(handler: (text: string) => [number, number][]): number;
-  deregisterCharacterJoiner(joinerId: number): boolean;
-  getJoinedCharacters(row: number): [number, number][];
 }

 export interface IRenderLayer extends IDisposable {
@@ -106,16 +91,6 @@ export interface IRenderLayer extends IDisposable {
   */
  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;

-  /**
-   * Registers a handler to join characters to render as a group
-   */
-  registerCharacterJoiner?(joiner: ICharacterJoiner): void;
-
-  /**
-   * Deregisters the specified character joiner handler
-   */
-  deregisterCharacterJoiner?(joinerId: number): void;
-
  /**
   * Resize the render layer.
   */
@@ -91,12 +91,12 @@ export class DynamicCharAtlas extends BaseCharAtlas {
    // The canvas needs alpha because we use clearColor to convert the background color to alpha.
    // It might also contain some characters with transparent backgrounds if allowTransparency is
    // set.
-    this._cacheCtx = throwIfFalsy(this._cacheCanvas.getContext('2d', {alpha: true}));
+    this._cacheCtx = throwIfFalsy(this._cacheCanvas.getContext('2d', { alpha: true }));

    const tmpCanvas = document.createElement('canvas');
    tmpCanvas.width = this._config.scaledCharWidth;
    tmpCanvas.height = this._config.scaledCharHeight;
-    this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency}));
+    this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));

    this._width = Math.floor(TEXTURE_WIDTH / this._config.scaledCharWidth);
    this._height = Math.floor(TEXTURE_HEIGHT / this._config.scaledCharHeight);
@@ -3,13 +3,13 @@
 * @license MIT
 */

-import { IRenderer, IRenderDimensions, CharacterJoinerHandler, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
 import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_BLINK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from 'browser/renderer/dom/DomRendererRowFactory';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifierEvent, ILinkifier, ILinkifier2 } from 'browser/Types';
 import { ICharSizeService } from 'browser/services/Services';
-import { IOptionsService, IBufferService } from 'common/services/Services';
+import { IOptionsService, IBufferService, IInstantiationService } from 'common/services/Services';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { color } from 'browser/Color';
 import { removeElementFromParent } from 'browser/Dom';
@@ -49,6 +49,7 @@ export class DomRenderer extends Disposable implements IRenderer {
    private readonly _viewportElement: HTMLElement,
    private readonly _linkifier: ILinkifier,
    private readonly _linkifier2: ILinkifier2,
+    @IInstantiationService instantiationService: IInstantiationService,
    @ICharSizeService private readonly _charSizeService: ICharSizeService,
    @IOptionsService private readonly _optionsService: IOptionsService,
    @IBufferService private readonly _bufferService: IBufferService
@@ -80,7 +81,7 @@ export class DomRenderer extends Disposable implements IRenderer {
    this._updateDimensions();
    this._injectCss();

-    this._rowFactory = new DomRendererRowFactory(document, this._optionsService, this._colors);
+    this._rowFactory = instantiationService.createInstance(DomRendererRowFactory, document, this._colors);

    this._element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
    this._screenElement.appendChild(this._rowContainer);
@@ -364,7 +365,7 @@ export class DomRenderer extends Disposable implements IRenderer {
      const row = y + this._bufferService.buffer.ydisp;
      const lineData = this._bufferService.buffer.lines.get(row);
      const cursorStyle = this._optionsService.options.cursorStyle;
-      rowElement.appendChild(this._rowFactory.createRow(lineData!, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, this._bufferService.cols));
+      rowElement.appendChild(this._rowFactory.createRow(lineData!, row, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.actualCellWidth, this._bufferService.cols));
    }
  }

@@ -372,9 +373,6 @@ export class DomRenderer extends Disposable implements IRenderer {
    return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`;
  }

-  public registerCharacterJoiner(handler: CharacterJoinerHandler): number { return -1; }
-  public deregisterCharacterJoiner(joinerId: number): boolean { return false; }
-
  private _onLinkHover(e: ILinkifierEvent): void {
    this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true);
  }
@@ -12,6 +12,7 @@ import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockOptionsService } from 'common/TestUtils.test';
 import { css } from 'browser/Color';
+import { MockCharacterJoinerService } from 'browser/TestUtils.test';

 describe('DomRendererRowFactory', () => {
  let dom: jsdom.JSDOM;
@@ -20,7 +21,7 @@ describe('DomRendererRowFactory', () => {

  beforeEach(() => {
    dom = new jsdom.JSDOM('');
-    rowFactory = new DomRendererRowFactory(dom.window.document, new MockOptionsService({ drawBoldTextInBrightColors: true }), {
+    rowFactory = new DomRendererRowFactory(dom.window.document, {
      background: css.toColor('#010101'),
      foreground: css.toColor('#020202'),
      ansi: [
@@ -43,13 +44,13 @@ describe('DomRendererRowFactory', () => {
        css.toColor('#34e2e2'),
        css.toColor('#eeeeec')
      ]
-    } as any);
+    } as any, new MockCharacterJoinerService(), new MockOptionsService({ drawBoldTextInBrightColors: true }));
    lineData = createEmptyLineData(2);
  });

  describe('createRow', () => {
    it('should not create anything for an empty row', () => {
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
      assert.equal(getFragmentHtml(fragment),
        ''
      );
@@ -59,7 +60,7 @@ describe('DomRendererRowFactory', () => {
      lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)]));
      // There should be no element for the following "empty" cell
      lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, '', 0, 0]));
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
      assert.equal(getFragmentHtml(fragment),
        '<span style="width: 10px;">語</span>'
      );
@@ -67,7 +68,7 @@ describe('DomRendererRowFactory', () => {

    it('should add class for cursor and cursor style', () => {
      for (const style of ['block', 'bar', 'underline']) {
-        const fragment = rowFactory.createRow(lineData, true, style, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          `<span class="xterm-cursor xterm-cursor-${style}"> </span>`
        );
@@ -75,7 +76,7 @@ describe('DomRendererRowFactory', () => {
    });

    it('should add class for cursor blink', () => {
-      const fragment = rowFactory.createRow(lineData, true, 'block', 0, true, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, 20);
      assert.equal(getFragmentHtml(fragment),
        `<span class="xterm-cursor xterm-cursor-blink xterm-cursor-block"> </span>`
      );
@@ -84,7 +85,7 @@ describe('DomRendererRowFactory', () => {
    it('should not render cells that go beyond the terminal\'s columns', () => {
      lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)]));
      lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)]));
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 1);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 1);
      assert.equal(getFragmentHtml(fragment),
        '<span>a</span>'
      );
@@ -95,7 +96,7 @@ describe('DomRendererRowFactory', () => {
        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
        cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.BOLD;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span class="xterm-bold">a</span>'
        );
@@ -105,7 +106,7 @@ describe('DomRendererRowFactory', () => {
        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
        cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.ITALIC;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span class="xterm-italic">a</span>'
        );
@@ -115,7 +116,7 @@ describe('DomRendererRowFactory', () => {
        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
        cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.DIM;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span class="xterm-dim">a</span>'
        );
@@ -125,7 +126,7 @@ describe('DomRendererRowFactory', () => {
        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
        cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.UNDERLINE;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span class="xterm-underline">a</span>'
        );
@@ -138,7 +139,7 @@ describe('DomRendererRowFactory', () => {
          cell.fg &= ~Attributes.PCOLOR_MASK;
          cell.fg |= i;
          lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
          assert.equal(getFragmentHtml(fragment),
            `<span class="xterm-fg-${i}">a</span>`
          );
@@ -152,7 +153,7 @@ describe('DomRendererRowFactory', () => {
          cell.bg &= ~Attributes.PCOLOR_MASK;
          cell.bg |= i;
          lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
          assert.equal(getFragmentHtml(fragment),
            `<span class="xterm-bg-${i}">a</span>`
          );
@@ -164,7 +165,7 @@ describe('DomRendererRowFactory', () => {
        cell.fg |= Attributes.CM_P16 | 2 | FgFlags.INVERSE;
        cell.bg |= Attributes.CM_P16 | 1;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span class="xterm-fg-1 xterm-bg-2">a</span>'
        );
@@ -175,7 +176,7 @@ describe('DomRendererRowFactory', () => {
        cell.fg |= FgFlags.INVERSE;
        cell.bg |= Attributes.CM_P16 | 1;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span class="xterm-fg-1 xterm-bg-257">a</span>'
        );
@@ -185,7 +186,7 @@ describe('DomRendererRowFactory', () => {
        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
        cell.fg |= Attributes.CM_P16 | 1 | FgFlags.INVERSE;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span class="xterm-fg-257 xterm-bg-1">a</span>'
        );
@@ -198,7 +199,7 @@ describe('DomRendererRowFactory', () => {
          cell.fg &= ~Attributes.PCOLOR_MASK;
          cell.fg |= i;
          lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
          assert.equal(getFragmentHtml(fragment),
            `<span class="xterm-bold xterm-fg-${i + 8}">a</span>`
          );
@@ -210,7 +211,7 @@ describe('DomRendererRowFactory', () => {
        cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3;
        cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span style="color:#010203;background-color:#040506;">a</span>'
        );
@@ -221,7 +222,7 @@ describe('DomRendererRowFactory', () => {
        cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3 | FgFlags.INVERSE;
        cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6;
        lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
        assert.equal(getFragmentHtml(fragment),
          '<span style="color:#040506;background-color:#010203;">a</span>'
        );
@@ -10,6 +10,8 @@ import { CellData } from 'common/buffer/CellData';
 import { IOptionsService } from 'common/services/Services';
 import { color, rgba } from 'browser/Color';
 import { IColorSet, IColor } from 'browser/Types';
+import { ICharacterJoinerService } from 'browser/services/Services';
+import { JoinedCellData } from 'browser/services/CharacterJoinerService';

 export const BOLD_CLASS = 'xterm-bold';
 export const DIM_CLASS = 'xterm-dim';
@@ -26,8 +28,9 @@ export class DomRendererRowFactory {

  constructor(
    private readonly _document: Document,
-    private readonly _optionsService: IOptionsService,
-    private _colors: IColorSet
+    private _colors: IColorSet,
+    @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService,
+    @IOptionsService private readonly _optionsService: IOptionsService
  ) {
  }

@@ -35,9 +38,10 @@ export class DomRendererRowFactory {
    this._colors = colors;
  }

-  public createRow(lineData: IBufferLine, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cursorBlink: boolean, cellWidth: number, cols: number): DocumentFragment {
+  public createRow(lineData: IBufferLine, row: number, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cursorBlink: boolean, cellWidth: number, cols: number): DocumentFragment {
    const fragment = this._document.createDocumentFragment();

+    const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
    // Find the line length first, this prevents the need to output a bunch of
    // empty cells at the end. This cannot easily be integrated into the main
    // loop below because of the colCount feature (which can be removed after we
@@ -53,18 +57,58 @@ export class DomRendererRowFactory {

    for (let x = 0; x < lineLength; x++) {
      lineData.loadCell(x, this._workCell);
-      const width = this._workCell.getWidth();
+      let width = this._workCell.getWidth();

      // The character to the left is a wide character, drawing is owned by the char at x-1
      if (width === 0) {
        continue;
      }

+      // If true, indicates that the current character(s) to draw were joined.
+      let isJoined = false;
+      let lastCharX = x;
+
+      // Process any joined character ranges as needed. Because of how the
+      // ranges are produced, we know that they are valid for the characters
+      // and attributes of our input.
+      let cell = this._workCell;
+      if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
+        isJoined = true;
+        const range = joinedRanges.shift()!;
+
+        // We already know the exact start and end column of the joined range,
+        // so we get the string and width representing it directly
+        cell = new JoinedCellData(
+          this._workCell,
+          lineData.translateToString(true, range[0], range[1]),
+          range[1] - range[0]
+        );
+
+        // Skip over the cells occupied by this range in the loop
+        lastCharX = range[1] - 1;
+
+        // Recalculate width
+        width = cell.getWidth();
+      }
+
      const charElement = this._document.createElement('span');
      if (width > 1) {
        charElement.style.width = `${cellWidth * width}px`;
      }

+      if (isJoined) {
+        // Ligatures in the DOM renderer must use display inline, as they may not show with
+        // inline-block if they are outside the bounds of the element
+        charElement.style.display = 'inline';
+
+        // The DOM renderer colors the background of the cursor but for ligatures all cells are
+        // joined. The workaround here is to show a cursor around the whole ligature so it shows up,
+        // the cursor looks the same when on any character of the ligature though
+        if (cursorX >= x && cursorX <= lastCharX) {
+          cursorX = x;
+        }
+      }
+
      if (isCursorRow && x === cursorX) {
        charElement.classList.add(CURSOR_CLASS);

@@ -85,33 +129,33 @@ export class DomRendererRowFactory {
        }
      }

-      if (this._workCell.isBold()) {
+      if (cell.isBold()) {
        charElement.classList.add(BOLD_CLASS);
      }

-      if (this._workCell.isItalic()) {
+      if (cell.isItalic()) {
        charElement.classList.add(ITALIC_CLASS);
      }

-      if (this._workCell.isDim()) {
+      if (cell.isDim()) {
        charElement.classList.add(DIM_CLASS);
      }

-      if (this._workCell.isUnderline()) {
+      if (cell.isUnderline()) {
        charElement.classList.add(UNDERLINE_CLASS);
      }

-      if (this._workCell.isInvisible()) {
+      if (cell.isInvisible()) {
        charElement.textContent = WHITESPACE_CELL_CHAR;
      } else {
-        charElement.textContent = this._workCell.getChars() || WHITESPACE_CELL_CHAR;
+        charElement.textContent = cell.getChars() || WHITESPACE_CELL_CHAR;
      }

-      let fg = this._workCell.getFgColor();
-      let fgColorMode = this._workCell.getFgColorMode();
-      let bg = this._workCell.getBgColor();
-      let bgColorMode = this._workCell.getBgColorMode();
-      const isInverse = !!this._workCell.isInverse();
+      let fg = cell.getFgColor();
+      let fgColorMode = cell.getFgColorMode();
+      let bg = cell.getBgColor();
+      let bgColorMode = cell.getBgColorMode();
+      const isInverse = !!cell.isInverse();
      if (isInverse) {
        const temp = fg;
        fg = bg;
@@ -125,7 +169,7 @@ export class DomRendererRowFactory {
      switch (fgColorMode) {
        case Attributes.CM_P16:
        case Attributes.CM_P256:
-          if (this._workCell.isBold() && fg < 8 && this._optionsService.options.drawBoldTextInBrightColors) {
+          if (cell.isBold() && fg < 8 && this._optionsService.options.drawBoldTextInBrightColors) {
            fg += 8;
          }
          if (!this._applyMinimumContrast(charElement, this._colors.background, this._colors.ansi[fg])) {
@@ -168,6 +212,8 @@ export class DomRendererRowFactory {
      }

      fragment.appendChild(charElement);
+
+      x = lastCharX;
    }
    return fragment;
  }
@@ -4,15 +4,15 @@
 */

 import { assert } from 'chai';
-import { ICharacterJoinerRegistry } from 'browser/renderer/Types';
-import { CharacterJoinerRegistry } from 'browser/renderer/CharacterJoinerRegistry';
+import { ICharacterJoinerService } from 'browser/services/Services';
+import { CharacterJoinerService } from 'browser/services/CharacterJoinerService';
 import { BufferLine } from 'common/buffer/BufferLine';
 import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockBufferService } from 'common/TestUtils.test';

-describe('CharacterJoinerRegistry', () => {
-  let registry: ICharacterJoinerRegistry;
+describe('CharacterJoinerService', () => {
+  let service: ICharacterJoinerService;

  beforeEach(() => {
    const bufferService = new MockBufferService(16, 10);
@@ -39,225 +39,225 @@ describe('CharacterJoinerRegistry', () => {
    for (let i = 0; i < sub.length; ++i) line6.setCell(i + oldSize, sub.loadCell(i, new CellData()));
    lines.set(6, line6);

-    registry = new CharacterJoinerRegistry(bufferService);
+    service = new CharacterJoinerService(bufferService);
  });

  it('has no joiners upon creation', () => {
-    assert.deepEqual(registry.getJoinedCharacters(0), []);
+    assert.deepEqual(service.getJoinedCharacters(0), []);
  });

  it('returns ranges matched by the registered joiners', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
    assert.deepEqual(
-      registry.getJoinedCharacters(0),
+      service.getJoinedCharacters(0),
      [[2, 4], [7, 9], [12, 14]]
    );
  });

  it('processes the input using all provided joiners', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
    assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
      [[2, 4], [12, 14]]
    );

-    registry.registerCharacterJoiner(substringJoiner('=>'));
+    service.register(substringJoiner('=>'));
    assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
      [[2, 4], [7, 9], [12, 14]]
    );
  });

  it('removes deregistered joiners from future calls', () => {
-    const joiner1 = registry.registerCharacterJoiner(substringJoiner('->'));
-    const joiner2 = registry.registerCharacterJoiner(substringJoiner('=>'));
+    const joiner1 = service.register(substringJoiner('->'));
+    const joiner2 = service.register(substringJoiner('=>'));
    assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
      [[2, 4], [7, 9], [12, 14]]
    );

-    registry.deregisterCharacterJoiner(joiner1);
+    service.deregister(joiner1);
    assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
      [[7, 9]]
    );

-    registry.deregisterCharacterJoiner(joiner2);
+    service.deregister(joiner2);
    assert.deepEqual(
-      registry.getJoinedCharacters(1),
+      service.getJoinedCharacters(1),
      []
    );
  });

  it('doesn\'t process joins on differently-styled characters', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
    assert.deepEqual(
-      registry.getJoinedCharacters(2),
+      service.getJoinedCharacters(2),
      [[2, 4], [12, 14]]
    );
  });

  it('returns an empty list of ranges if there is nothing to be joined', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
    assert.deepEqual(
-      registry.getJoinedCharacters(3),
+      service.getJoinedCharacters(3),
      []
    );
  });

  it('returns an empty list of ranges if the line is empty', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
+    service.register(substringJoiner('->'));
    assert.deepEqual(
-      registry.getJoinedCharacters(4),
+      service.getJoinedCharacters(4),
      []
    );
  });

  it('returns false when trying to deregister a joiner that does not exist', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
-    assert.deepEqual(registry.deregisterCharacterJoiner(123), false);
+    service.register(substringJoiner('->'));
+    assert.deepEqual(service.deregister(123), false);
    assert.deepEqual(
-      registry.getJoinedCharacters(0),
+      service.getJoinedCharacters(0),
      [[2, 4], [7, 9], [12, 14]]
    );
  });

  it('doesn\'t process same-styled ranges that only have one character', () => {
-    registry.registerCharacterJoiner(substringJoiner('a'));
-    registry.registerCharacterJoiner(substringJoiner('b'));
-    registry.registerCharacterJoiner(substringJoiner('d'));
+    service.register(substringJoiner('a'));
+    service.register(substringJoiner('b'));
+    service.register(substringJoiner('d'));
    assert.deepEqual(
-      registry.getJoinedCharacters(5),
+      service.getJoinedCharacters(5),
      [[5, 6]]
    );
  });

  it('handles ranges that extend all the way to the end of the line', () => {
-    registry.registerCharacterJoiner(substringJoiner('-> d'));
+    service.register(substringJoiner('-> d'));
    assert.deepEqual(
-      registry.getJoinedCharacters(2),
+      service.getJoinedCharacters(2),
      [[12, 16]]
    );
  });

  it('handles adjacent ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('->'));
-    registry.registerCharacterJoiner(substringJoiner('> c '));
+    service.register(substringJoiner('->'));
+    service.register(substringJoiner('> c '));
    assert.deepEqual(
-      registry.getJoinedCharacters(2),
+      service.getJoinedCharacters(2),
      [[2, 4], [8, 12], [12, 14]]
    );
  });

  it('handles fullwidth characters in the middle of ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('wi￥de'));
+    service.register(substringJoiner('wi￥de'));
    assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
      [[0, 6]]
    );
  });

  it('handles fullwidth characters at the end of ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('wi￥'));
+    service.register(substringJoiner('wi￥'));
    assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
      [[0, 4]]
    );
  });

  it('handles emojis in the middle of ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('emo\xf0\x9f\x98\x81 ji'));
+    service.register(substringJoiner('emo\xf0\x9f\x98\x81 ji'));
    assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
      [[6, 13]]
    );
  });

  it('handles emojis at the end of ranges', () => {
-    registry.registerCharacterJoiner(substringJoiner('emo\xf0\x9f\x98\x81 '));
+    service.register(substringJoiner('emo\xf0\x9f\x98\x81 '));
    assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
      [[6, 11]]
    );
  });

  it('handles ranges after wide and emoji characters', () => {
-    registry.registerCharacterJoiner(substringJoiner('abc'));
+    service.register(substringJoiner('abc'));
    assert.deepEqual(
-      registry.getJoinedCharacters(6),
+      service.getJoinedCharacters(6),
      [[13, 16]]
    );
  });

  describe('range merging', () => {
    it('inserts a new range before the existing ones', () => {
-      registry.registerCharacterJoiner(() => [[1, 2], [2, 3]]);
-      registry.registerCharacterJoiner(() => [[0, 1]]);
+      service.register(() => [[1, 2], [2, 3]]);
+      service.register(() => [[0, 1]]);
      assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
        [[0, 1], [1, 2], [2, 3]]
      );
    });

    it('inserts in between two ranges', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[2, 4]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[2, 4]]);
      assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
        [[0, 2], [2, 4], [4, 6]]
      );
    });

    it('inserts after the last range', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[6, 8]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[6, 8]]);
      assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
        [[0, 2], [4, 6], [6, 8]]
      );
    });

    it('extends the beginning of a range', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[3, 5]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[3, 5]]);
      assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
        [[0, 2], [3, 6]]
      );
    });

    it('extends the end of a range', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[1, 4]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[1, 4]]);
      assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
        [[0, 4], [4, 6]]
      );
    });

    it('extends the last range', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[5, 7]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[5, 7]]);
      assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
        [[0, 2], [4, 7]]
      );
    });

    it('connects two ranges', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6]]);
-      registry.registerCharacterJoiner(() => [[1, 5]]);
+      service.register(() => [[0, 2], [4, 6]]);
+      service.register(() => [[1, 5]]);
      assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
        [[0, 6]]
      );
    });

    it('connects more than two ranges', () => {
-      registry.registerCharacterJoiner(() => [[0, 2], [4, 6], [8, 10], [12, 14]]);
-      registry.registerCharacterJoiner(() => [[1, 10]]);
+      service.register(() => [[0, 2], [4, 6], [8, 10], [12, 14]]);
+      service.register(() => [[1, 10]]);
      assert.deepEqual(
-        registry.getJoinedCharacters(0),
+        service.getJoinedCharacters(0),
        [[0, 10], [12, 14]]
      );
    });
@@ -4,11 +4,12 @@
 */

 import { IBufferLine, ICellData, CharData } from 'common/Types';
-import { ICharacterJoinerRegistry, ICharacterJoiner } from 'browser/renderer/Types';
+import { ICharacterJoiner } from 'browser/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { WHITESPACE_CELL_CHAR, Content } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
 import { IBufferService } from 'common/services/Services';
+import { ICharacterJoinerService } from 'browser/services/Services';

 export class JoinedCellData extends AttributeData implements ICellData {
  private _width: number;
@@ -55,15 +56,18 @@ export class JoinedCellData extends AttributeData implements ICellData {
  }
 }

-export class CharacterJoinerRegistry implements ICharacterJoinerRegistry {
+export class CharacterJoinerService implements ICharacterJoinerService {
+  public serviceBrand: undefined;

  private _characterJoiners: ICharacterJoiner[] = [];
  private _nextCharacterJoinerId: number = 0;
  private _workCell: CellData = new CellData();

-  constructor(private _bufferService: IBufferService) { }
+  constructor(
+    @IBufferService private _bufferService: IBufferService
+  ) { }

-  public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
+  public register(handler: (text: string) => [number, number][]): number {
    const joiner: ICharacterJoiner = {
      id: this._nextCharacterJoinerId++,
      handler
@@ -73,7 +77,7 @@ export class CharacterJoinerRegistry implements ICharacterJoinerRegistry {
    return joiner.id;
  }

-  public deregisterCharacterJoiner(joinerId: number): boolean {
+  public deregister(joinerId: number): boolean {
    for (let i = 0; i < this._characterJoiners.length; i++) {
      if (this._characterJoiners[i].id === joinerId) {
        this._characterJoiners.splice(i, 1);
@@ -177,7 +181,7 @@ export class CharacterJoinerRegistry implements ICharacterJoinerRegistry {
      // We merge any overlapping ranges across the different joiners
      const joinerRanges = this._characterJoiners[i].handler(text);
      for (let j = 0; j < joinerRanges.length; j++) {
-        CharacterJoinerRegistry._mergeRanges(joinedRanges, joinerRanges[j]);
+        CharacterJoinerService._mergeRanges(joinedRanges, joinerRanges[j]);
      }
    }
    this._stringRangesToCellRanges(joinedRanges, lineData, startCol);
@@ -3,7 +3,7 @@
 * @license MIT
 */

-import { IRenderer, IRenderDimensions, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { IRenderer, IRenderDimensions } from 'browser/renderer/Types';
 import { RenderDebouncer } from 'browser/RenderDebouncer';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 import { Disposable } from 'common/Lifecycle';
@@ -214,12 +214,4 @@ export class RenderService extends Disposable implements IRenderService {
  public clear(): void {
    this._renderer.clear();
  }
-
-  public registerCharacterJoiner(handler: CharacterJoinerHandler): number {
-    return this._renderer.registerCharacterJoiner(handler);
-  }
-
-  public deregisterCharacterJoiner(joinerId: number): boolean {
-    return this._renderer.deregisterCharacterJoiner(joinerId);
-  }
 }
@@ -4,7 +4,7 @@
 */

 import { IEvent } from 'common/EventEmitter';
-import { IRenderDimensions, IRenderer, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { IRenderDimensions, IRenderer } from 'browser/renderer/Types';
 import { IColorSet } from 'browser/Types';
 import { ISelectionRedrawRequestEvent as ISelectionRequestRedrawEvent, ISelectionRequestScrollLinesEvent } from 'browser/selection/Types';
 import { createDecorator } from 'common/services/ServiceRegistry';
@@ -66,8 +66,6 @@ export interface IRenderService extends IDisposable {
  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
  onCursorMove(): void;
  clear(): void;
-  registerCharacterJoiner(handler: CharacterJoinerHandler): number;
-  deregisterCharacterJoiner(joinerId: number): boolean;
 }

 export const ISelectionService = createDecorator<ISelectionService>('SelectionService');
@@ -104,3 +102,13 @@ export interface ISoundService {

  playBellSound(): void;
 }
+
+
+export const ICharacterJoinerService = createDecorator<ICharacterJoinerService>('CharacterJoinerService');
+export interface ICharacterJoinerService {
+  serviceBrand: undefined;
+
+  register(handler: (text: string) => [number, number][]): number;
+  deregister(joinerId: number): boolean;
+  getJoinedCharacters(row: number): [number, number][];
+}
@@ -158,7 +158,7 @@ export class CircularList<T> implements ICircularList<T> {
        this._array[this._getCyclicIndex(i)] = this._array[this._getCyclicIndex(i + deleteCount)];
      }
      this._length -= deleteCount;
-      this.onDeleteEmitter.fire({index: start, amount: deleteCount});
+      this.onDeleteEmitter.fire({ index: start, amount: deleteCount });
    }

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

    // Adjust length as needed
@@ -122,7 +122,7 @@ export abstract class CoreTerminal extends Disposable implements ICoreTerminal {
    this.register(forwardEvent(this._coreService.onBinary, this._onBinary));
    this.register(this.optionsService.onOptionChange(key => this._updateOptions(key)));
    this.register(this._bufferService.onScroll(event => {
-      this._onScroll.fire({position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL});
+      this._onScroll.fire({ position: this._bufferService.buffer.ydisp, source: ScrollSource.TERMINAL });
      this._dirtyRowService.markRangeDirty(this._bufferService.buffer.scrollTop, this._bufferService.buffer.scrollBottom);
    }));

@@ -24,7 +24,7 @@ import { DcsHandler } from 'common/parser/DcsParser';
 /**
 * Map collect to glevel. Used in `selectCharset`.
 */
-const GLEVEL: {[key: string]: number} = {'(': 0, ')': 1, '*': 2, '+': 3, '-': 1, '.': 2};
+const GLEVEL: {[key: string]: number} = { '(': 0, ')': 1, '*': 2, '+': 3, '-': 1, '.': 2 };

 /**
 * VT commands done by the parser - FIXME: move this to the parser?
@@ -174,7 +174,7 @@ class DECRQSS implements IDcsHandler {
        this._coreService.triggerDataEvent(`${C0.ESC}P1$r0m${C0.ESC}\\`);
        break;
      case ' q': // DECSCUSR
-        const STYLES: {[key: string]: number} = {'block': 2, 'underline': 4, 'bar': 6};
+        const STYLES: {[key: string]: number} = { 'block': 2, 'underline': 4, 'bar': 6 };
        let style = STYLES[this._optionsService.options.cursorStyle];
        style -= this._optionsService.options.cursorBlink ? 1 : 0;
        this._coreService.triggerDataEvent(`${C0.ESC}P1$r${style} q${C0.ESC}\\`);
@@ -312,53 +312,53 @@ export class InputHandler extends Disposable implements IInputHandler {
    /**
     * CSI handler
     */
-    this._parser.registerCsiHandler({final: '@'}, params => this.insertChars(params));
-    this._parser.registerCsiHandler({intermediates: ' ', final: '@'}, params => this.scrollLeft(params));
-    this._parser.registerCsiHandler({final: 'A'}, params => this.cursorUp(params));
-    this._parser.registerCsiHandler({intermediates: ' ', final: 'A'}, params => this.scrollRight(params));
-    this._parser.registerCsiHandler({final: 'B'}, params => this.cursorDown(params));
-    this._parser.registerCsiHandler({final: 'C'}, params => this.cursorForward(params));
-    this._parser.registerCsiHandler({final: 'D'}, params => this.cursorBackward(params));
-    this._parser.registerCsiHandler({final: 'E'}, params => this.cursorNextLine(params));
-    this._parser.registerCsiHandler({final: 'F'}, params => this.cursorPrecedingLine(params));
-    this._parser.registerCsiHandler({final: 'G'}, params => this.cursorCharAbsolute(params));
-    this._parser.registerCsiHandler({final: 'H'}, params => this.cursorPosition(params));
-    this._parser.registerCsiHandler({final: 'I'}, params => this.cursorForwardTab(params));
-    this._parser.registerCsiHandler({final: 'J'}, params => this.eraseInDisplay(params));
-    this._parser.registerCsiHandler({prefix: '?', final: 'J'}, params => this.eraseInDisplay(params));
-    this._parser.registerCsiHandler({final: 'K'}, params => this.eraseInLine(params));
-    this._parser.registerCsiHandler({prefix: '?', final: 'K'}, params => this.eraseInLine(params));
-    this._parser.registerCsiHandler({final: 'L'}, params => this.insertLines(params));
-    this._parser.registerCsiHandler({final: 'M'}, params => this.deleteLines(params));
-    this._parser.registerCsiHandler({final: 'P'}, params => this.deleteChars(params));
-    this._parser.registerCsiHandler({final: 'S'}, params => this.scrollUp(params));
-    this._parser.registerCsiHandler({final: 'T'}, params => this.scrollDown(params));
-    this._parser.registerCsiHandler({final: 'X'}, params => this.eraseChars(params));
-    this._parser.registerCsiHandler({final: 'Z'}, params => this.cursorBackwardTab(params));
-    this._parser.registerCsiHandler({final: '`'}, params => this.charPosAbsolute(params));
-    this._parser.registerCsiHandler({final: 'a'}, params => this.hPositionRelative(params));
-    this._parser.registerCsiHandler({final: 'b'}, params => this.repeatPrecedingCharacter(params));
-    this._parser.registerCsiHandler({final: 'c'}, params => this.sendDeviceAttributesPrimary(params));
-    this._parser.registerCsiHandler({prefix: '>', final: 'c'}, params => this.sendDeviceAttributesSecondary(params));
-    this._parser.registerCsiHandler({final: 'd'}, params => this.linePosAbsolute(params));
-    this._parser.registerCsiHandler({final: 'e'}, params => this.vPositionRelative(params));
-    this._parser.registerCsiHandler({final: 'f'}, params => this.hVPosition(params));
-    this._parser.registerCsiHandler({final: 'g'}, params => this.tabClear(params));
-    this._parser.registerCsiHandler({final: 'h'}, params => this.setMode(params));
-    this._parser.registerCsiHandler({prefix: '?', final: 'h'}, params => this.setModePrivate(params));
-    this._parser.registerCsiHandler({final: 'l'}, params => this.resetMode(params));
-    this._parser.registerCsiHandler({prefix: '?', final: 'l'}, params => this.resetModePrivate(params));
-    this._parser.registerCsiHandler({final: 'm'}, params => this.charAttributes(params));
-    this._parser.registerCsiHandler({final: 'n'}, params => this.deviceStatus(params));
-    this._parser.registerCsiHandler({prefix: '?', final: 'n'}, params => this.deviceStatusPrivate(params));
-    this._parser.registerCsiHandler({intermediates: '!', final: 'p'}, params => this.softReset(params));
-    this._parser.registerCsiHandler({intermediates: ' ', final: 'q'}, params => this.setCursorStyle(params));
-    this._parser.registerCsiHandler({final: 'r'}, params => this.setScrollRegion(params));
-    this._parser.registerCsiHandler({final: 's'}, params => this.saveCursor(params));
-    this._parser.registerCsiHandler({final: 't'}, params => this.windowOptions(params));
-    this._parser.registerCsiHandler({final: 'u'}, params => this.restoreCursor(params));
-    this._parser.registerCsiHandler({intermediates: '\'', final: '}'}, params => this.insertColumns(params));
-    this._parser.registerCsiHandler({intermediates: '\'', final: '~'}, params => this.deleteColumns(params));
+    this._parser.registerCsiHandler({ final: '@' }, params => this.insertChars(params));
+    this._parser.registerCsiHandler({ intermediates: ' ', final: '@' }, params => this.scrollLeft(params));
+    this._parser.registerCsiHandler({ final: 'A' }, params => this.cursorUp(params));
+    this._parser.registerCsiHandler({ intermediates: ' ', final: 'A' }, params => this.scrollRight(params));
+    this._parser.registerCsiHandler({ final: 'B' }, params => this.cursorDown(params));
+    this._parser.registerCsiHandler({ final: 'C' }, params => this.cursorForward(params));
+    this._parser.registerCsiHandler({ final: 'D' }, params => this.cursorBackward(params));
+    this._parser.registerCsiHandler({ final: 'E' }, params => this.cursorNextLine(params));
+    this._parser.registerCsiHandler({ final: 'F' }, params => this.cursorPrecedingLine(params));
+    this._parser.registerCsiHandler({ final: 'G' }, params => this.cursorCharAbsolute(params));
+    this._parser.registerCsiHandler({ final: 'H' }, params => this.cursorPosition(params));
+    this._parser.registerCsiHandler({ final: 'I' }, params => this.cursorForwardTab(params));
+    this._parser.registerCsiHandler({ final: 'J' }, params => this.eraseInDisplay(params));
+    this._parser.registerCsiHandler({ prefix: '?', final: 'J' }, params => this.eraseInDisplay(params));
+    this._parser.registerCsiHandler({ final: 'K' }, params => this.eraseInLine(params));
+    this._parser.registerCsiHandler({ prefix: '?', final: 'K' }, params => this.eraseInLine(params));
+    this._parser.registerCsiHandler({ final: 'L' }, params => this.insertLines(params));
+    this._parser.registerCsiHandler({ final: 'M' }, params => this.deleteLines(params));
+    this._parser.registerCsiHandler({ final: 'P' }, params => this.deleteChars(params));
+    this._parser.registerCsiHandler({ final: 'S' }, params => this.scrollUp(params));
+    this._parser.registerCsiHandler({ final: 'T' }, params => this.scrollDown(params));
+    this._parser.registerCsiHandler({ final: 'X' }, params => this.eraseChars(params));
+    this._parser.registerCsiHandler({ final: 'Z' }, params => this.cursorBackwardTab(params));
+    this._parser.registerCsiHandler({ final: '`' }, params => this.charPosAbsolute(params));
+    this._parser.registerCsiHandler({ final: 'a' }, params => this.hPositionRelative(params));
+    this._parser.registerCsiHandler({ final: 'b' }, params => this.repeatPrecedingCharacter(params));
+    this._parser.registerCsiHandler({ final: 'c' }, params => this.sendDeviceAttributesPrimary(params));
+    this._parser.registerCsiHandler({ prefix: '>', final: 'c' }, params => this.sendDeviceAttributesSecondary(params));
+    this._parser.registerCsiHandler({ final: 'd' }, params => this.linePosAbsolute(params));
+    this._parser.registerCsiHandler({ final: 'e' }, params => this.vPositionRelative(params));
+    this._parser.registerCsiHandler({ final: 'f' }, params => this.hVPosition(params));
+    this._parser.registerCsiHandler({ final: 'g' }, params => this.tabClear(params));
+    this._parser.registerCsiHandler({ final: 'h' }, params => this.setMode(params));
+    this._parser.registerCsiHandler({ prefix: '?', final: 'h' }, params => this.setModePrivate(params));
+    this._parser.registerCsiHandler({ final: 'l' }, params => this.resetMode(params));
+    this._parser.registerCsiHandler({ prefix: '?', final: 'l' }, params => this.resetModePrivate(params));
+    this._parser.registerCsiHandler({ final: 'm' }, params => this.charAttributes(params));
+    this._parser.registerCsiHandler({ final: 'n' }, params => this.deviceStatus(params));
+    this._parser.registerCsiHandler({ prefix: '?', final: 'n' }, params => this.deviceStatusPrivate(params));
+    this._parser.registerCsiHandler({ intermediates: '!', final: 'p' }, params => this.softReset(params));
+    this._parser.registerCsiHandler({ intermediates: ' ', final: 'q' }, params => this.setCursorStyle(params));
+    this._parser.registerCsiHandler({ final: 'r' }, params => this.setScrollRegion(params));
+    this._parser.registerCsiHandler({ final: 's' }, params => this.saveCursor(params));
+    this._parser.registerCsiHandler({ final: 't' }, params => this.windowOptions(params));
+    this._parser.registerCsiHandler({ final: 'u' }, params => this.restoreCursor(params));
+    this._parser.registerCsiHandler({ intermediates: '\'', final: '}' }, params => this.insertColumns(params));
+    this._parser.registerCsiHandler({ intermediates: '\'', final: '~' }, params => this.deleteColumns(params));

    /**
     * execute handler
@@ -424,32 +424,32 @@ export class InputHandler extends Disposable implements IInputHandler {
    /**
     * ESC handlers
     */
-    this._parser.registerEscHandler({final: '7'}, () => this.saveCursor());
-    this._parser.registerEscHandler({final: '8'}, () => this.restoreCursor());
-    this._parser.registerEscHandler({final: 'D'}, () => this.index());
-    this._parser.registerEscHandler({final: 'E'}, () => this.nextLine());
-    this._parser.registerEscHandler({final: 'H'}, () => this.tabSet());
-    this._parser.registerEscHandler({final: 'M'}, () => this.reverseIndex());
-    this._parser.registerEscHandler({final: '='}, () => this.keypadApplicationMode());
-    this._parser.registerEscHandler({final: '>'}, () => this.keypadNumericMode());
-    this._parser.registerEscHandler({final: 'c'}, () => this.fullReset());
-    this._parser.registerEscHandler({final: 'n'}, () => this.setgLevel(2));
-    this._parser.registerEscHandler({final: 'o'}, () => this.setgLevel(3));
-    this._parser.registerEscHandler({final: '|'}, () => this.setgLevel(3));
-    this._parser.registerEscHandler({final: '}'}, () => this.setgLevel(2));
-    this._parser.registerEscHandler({final: '~'}, () => this.setgLevel(1));
-    this._parser.registerEscHandler({intermediates: '%', final: '@'}, () => this.selectDefaultCharset());
-    this._parser.registerEscHandler({intermediates: '%', final: 'G'}, () => this.selectDefaultCharset());
+    this._parser.registerEscHandler({ final: '7' }, () => this.saveCursor());
+    this._parser.registerEscHandler({ final: '8' }, () => this.restoreCursor());
+    this._parser.registerEscHandler({ final: 'D' }, () => this.index());
+    this._parser.registerEscHandler({ final: 'E' }, () => this.nextLine());
+    this._parser.registerEscHandler({ final: 'H' }, () => this.tabSet());
+    this._parser.registerEscHandler({ final: 'M' }, () => this.reverseIndex());
+    this._parser.registerEscHandler({ final: '=' }, () => this.keypadApplicationMode());
+    this._parser.registerEscHandler({ final: '>' }, () => this.keypadNumericMode());
+    this._parser.registerEscHandler({ final: 'c' }, () => this.fullReset());
+    this._parser.registerEscHandler({ final: 'n' }, () => this.setgLevel(2));
+    this._parser.registerEscHandler({ final: 'o' }, () => this.setgLevel(3));
+    this._parser.registerEscHandler({ final: '|' }, () => this.setgLevel(3));
+    this._parser.registerEscHandler({ final: '}' }, () => this.setgLevel(2));
+    this._parser.registerEscHandler({ final: '~' }, () => this.setgLevel(1));
+    this._parser.registerEscHandler({ intermediates: '%', final: '@' }, () => this.selectDefaultCharset());
+    this._parser.registerEscHandler({ intermediates: '%', final: 'G' }, () => this.selectDefaultCharset());
    for (const flag in CHARSETS) {
-      this._parser.registerEscHandler({intermediates: '(', final: flag}, () => this.selectCharset('(' + flag));
-      this._parser.registerEscHandler({intermediates: ')', final: flag}, () => this.selectCharset(')' + flag));
-      this._parser.registerEscHandler({intermediates: '*', final: flag}, () => this.selectCharset('*' + flag));
-      this._parser.registerEscHandler({intermediates: '+', final: flag}, () => this.selectCharset('+' + flag));
-      this._parser.registerEscHandler({intermediates: '-', final: flag}, () => this.selectCharset('-' + flag));
-      this._parser.registerEscHandler({intermediates: '.', final: flag}, () => this.selectCharset('.' + flag));
-      this._parser.registerEscHandler({intermediates: '/', final: flag}, () => this.selectCharset('/' + flag)); // TODO: supported?
+      this._parser.registerEscHandler({ intermediates: '(', final: flag }, () => this.selectCharset('(' + flag));
+      this._parser.registerEscHandler({ intermediates: ')', final: flag }, () => this.selectCharset(')' + flag));
+      this._parser.registerEscHandler({ intermediates: '*', final: flag }, () => this.selectCharset('*' + flag));
+      this._parser.registerEscHandler({ intermediates: '+', final: flag }, () => this.selectCharset('+' + flag));
+      this._parser.registerEscHandler({ intermediates: '-', final: flag }, () => this.selectCharset('-' + flag));
+      this._parser.registerEscHandler({ intermediates: '.', final: flag }, () => this.selectCharset('.' + flag));
+      this._parser.registerEscHandler({ intermediates: '/', final: flag }, () => this.selectCharset('/' + flag)); // TODO: supported?
    }
-    this._parser.registerEscHandler({intermediates: '#', final: '8'}, () => this.screenAlignmentPattern());
+    this._parser.registerEscHandler({ intermediates: '#', final: '8' }, () => this.screenAlignmentPattern());

    /**
     * error handler
@@ -462,7 +462,7 @@ export class InputHandler extends Disposable implements IInputHandler {
    /**
     * DCS handler
     */
-    this._parser.registerDcsHandler({intermediates: '$', final: 'q'}, new DECRQSS(this._bufferService, this._coreService, this._logService, this._optionsService));
+    this._parser.registerDcsHandler({ intermediates: '$', final: 'q' }, new DECRQSS(this._bufferService, this._coreService, this._logService, this._optionsService));
  }

  public dispose(): void {
@@ -671,6 +671,6 @@ export class BufferStringIterator implements IBufferStringIterator {
      content += this._buffer.translateBufferLineToString(i, this._trimRight);
    }
    this._current = range.last + 1;
-    return {range, content};
+    return { range, content };
  }
 }
@@ -42,6 +42,8 @@ export class ServiceCollection {
 }

 export class InstantiationService implements IInstantiationService {
+  public serviceBrand: undefined;
+
  private readonly _services: ServiceCollection = new ServiceCollection();

  constructor() {
@@ -157,6 +157,8 @@ type GetLeadingNonServiceArgs<Args> =

 export const IInstantiationService = createDecorator<IInstantiationService>('InstantiationService');
 export interface IInstantiationService {
+  serviceBrand: undefined;
+
  setService<T>(id: IServiceIdentifier<T>, instance: T): void;
  getService<T>(id: IServiceIdentifier<T>): T | undefined;
  createInstance<Ctor extends new (...args: any[]) => any, R extends InstanceType<Ctor>>(t: Ctor, ...args: GetLeadingNonServiceArgs<ConstructorParameters<Ctor>>): R;