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

src/browser/Terminal.ts

@@ -21,8 +21,8 @@
  *   http://linux.die.net/man/7/urxvt
  */
 
-import { ICompositionHelper, ITerminal, IBrowser, CustomKeyEventHandler, ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport, ILinkifier2 } from 'browser/Types';
-import { IRenderer, CharacterJoinerHandler } from 'browser/renderer/Types';
+import { ICompositionHelper, ITerminal, IBrowser, CustomKeyEventHandler, ILinkifier, IMouseZoneManager, LinkMatcherHandler, ILinkMatcherOptions, IViewport, ILinkifier2, CharacterJoinerHandler } from 'browser/Types';
+import { IRenderer } from 'browser/renderer/Types';
 import { CompositionHelper } from 'browser/input/CompositionHelper';
 import { Viewport } from 'browser/Viewport';
 import { rightClickHandler, moveTextAreaUnderMouseCursor, handlePasteEvent, copyHandler, paste } from 'browser/Clipboard';
@@ -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);
     }
   }

src/browser/TestUtils.test.ts

@@ -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 [];
+  }
+}

src/browser/Types.d.ts

@@ -303,3 +303,10 @@ interface IBufferCellPosition {
   x: number;
   y: number;
 }
+
+export type CharacterJoinerHandler = (text: string) => [number, number][];
+
+export interface ICharacterJoiner {
+  id: number;
+  handler: CharacterJoinerHandler;
+}

src/browser/renderer/BaseRenderLayer.ts

@@ -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();

src/browser/renderer/CursorRenderLayer.ts

@@ -37,10 +37,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     rendererId: number,
     private _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
-    bufferService: IBufferService,
-    optionsService: IOptionsService,
-    private readonly _coreService: ICoreService,
-    private readonly _coreBrowserService: ICoreBrowserService
+    @IBufferService bufferService: IBufferService,
+    @IOptionsService optionsService: IOptionsService,
+    @ICoreService private readonly _coreService: ICoreService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
   ) {
     super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService);
     this._state = {

src/browser/renderer/LinkRenderLayer.ts

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

src/browser/renderer/Renderer.ts

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

src/browser/renderer/SelectionRenderLayer.ts

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

src/browser/renderer/TextRenderLayer.ts

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

src/browser/renderer/Types.d.ts

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

src/browser/renderer/atlas/DynamicCharAtlas.ts

@@ -91,12 +91,12 @@ export class DynamicCharAtlas extends BaseCharAtlas {
     // The canvas needs alpha because we use clearColor to convert the background color to alpha.
     // It might also contain some characters with transparent backgrounds if allowTransparency is
     // set.
-    this._cacheCtx = throwIfFalsy(this._cacheCanvas.getContext('2d', {alpha: true}));
+    this._cacheCtx = throwIfFalsy(this._cacheCanvas.getContext('2d', { alpha: true }));
 
     const tmpCanvas = document.createElement('canvas');
     tmpCanvas.width = this._config.scaledCharWidth;
     tmpCanvas.height = this._config.scaledCharHeight;
-    this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency}));
+    this._tmpCtx = throwIfFalsy(tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
 
     this._width = Math.floor(TEXTURE_WIDTH / this._config.scaledCharWidth);
     this._height = Math.floor(TEXTURE_HEIGHT / this._config.scaledCharHeight);

src/browser/renderer/dom/DomRenderer.ts

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

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

@@ -12,6 +12,7 @@ import { IBufferLine } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { MockOptionsService } from 'common/TestUtils.test';
 import { css } from 'browser/Color';
+import { MockCharacterJoinerService } from 'browser/TestUtils.test';
 
 describe('DomRendererRowFactory', () => {
   let dom: jsdom.JSDOM;
@@ -20,7 +21,7 @@ describe('DomRendererRowFactory', () => {
 
   beforeEach(() => {
     dom = new jsdom.JSDOM('');
-    rowFactory = new DomRendererRowFactory(dom.window.document, new MockOptionsService({ drawBoldTextInBrightColors: true }), {
+    rowFactory = new DomRendererRowFactory(dom.window.document, {
       background: css.toColor('#010101'),
       foreground: css.toColor('#020202'),
       ansi: [
@@ -43,13 +44,13 @@ describe('DomRendererRowFactory', () => {
         css.toColor('#34e2e2'),
         css.toColor('#eeeeec')
       ]
-    } as any);
+    } as any, new MockCharacterJoinerService(), new MockOptionsService({ drawBoldTextInBrightColors: true }));
     lineData = createEmptyLineData(2);
   });
 
   describe('createRow', () => {
     it('should not create anything for an empty row', () => {
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
       assert.equal(getFragmentHtml(fragment),
         ''
       );
@@ -59,7 +60,7 @@ describe('DomRendererRowFactory', () => {
       lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)]));
       // There should be no element for the following "empty" cell
       lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, '', 0, 0]));
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
       assert.equal(getFragmentHtml(fragment),
         '<span style="width: 10px;">語</span>'
       );
@@ -67,7 +68,7 @@ describe('DomRendererRowFactory', () => {
 
     it('should add class for cursor and cursor style', () => {
       for (const style of ['block', 'bar', 'underline']) {
-        const fragment = rowFactory.createRow(lineData, true, style, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           `<span class="xterm-cursor xterm-cursor-${style}"> </span>`
         );
@@ -75,7 +76,7 @@ describe('DomRendererRowFactory', () => {
     });
 
     it('should add class for cursor blink', () => {
-      const fragment = rowFactory.createRow(lineData, true, 'block', 0, true, 5, 20);
+      const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, 20);
       assert.equal(getFragmentHtml(fragment),
         `<span class="xterm-cursor xterm-cursor-blink xterm-cursor-block"> </span>`
       );
@@ -84,7 +85,7 @@ describe('DomRendererRowFactory', () => {
     it('should not render cells that go beyond the terminal\'s columns', () => {
       lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)]));
       lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)]));
-      const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 1);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 1);
       assert.equal(getFragmentHtml(fragment),
         '<span>a</span>'
       );
@@ -95,7 +96,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.BOLD;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-bold">a</span>'
         );
@@ -105,7 +106,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.ITALIC;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-italic">a</span>'
         );
@@ -115,7 +116,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.DIM;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-dim">a</span>'
         );
@@ -125,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>'
         );

src/browser/renderer/dom/DomRendererRowFactory.ts

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

src/browser/services/CharacterJoinerService.test.ts

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

src/browser/services/CharacterJoinerService.ts

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

src/browser/services/RenderService.ts

@@ -3,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);
-  }
 }

src/browser/services/Services.ts

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