Merge pull request #1729 from xtermjs/Tyriar-patch-1

Bump version to 3.8.0

README.md

@@ -1,6 +1,6 @@
 # [![xterm.js logo](logo-full.png)](https://xtermjs.org)
 
-[![VSTS Build status](https://xtermjs.visualstudio.com/_apis/public/build/definitions/3e323cf7-5760-460d-af64-ee5675baf366/1/badge)](https://xtermjs.visualstudio.com/xterm.js/_build/index?definitionId=1)
+[![Build Status](https://dev.azure.com/xtermjs/xterm.js/_apis/build/status/xtermjs.xterm.js)](https://dev.azure.com/xtermjs/xterm.js/_build/latest?definitionId=3)
 [![Coverage Status](https://coveralls.io/repos/github/xtermjs/xterm.js/badge.svg?branch=master)](https://coveralls.io/github/xtermjs/xterm.js?branch=master)
 [![Gitter](https://badges.gitter.im/sourcelair/xterm.js.svg)](https://gitter.im/sourcelair/xterm.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
 [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/xterm/badge?style=rounded)](https://www.jsdelivr.com/package/npm/xterm)
@@ -170,6 +170,7 @@ computational environment for Jupyter, supporting interactive data science and s
 - [**Nutanix**](https://github.com/nutanix): Nutanix Enterprise Cloud uses xterm in the webssh functionality within Nutanix Calm, and is also looking to move our old noserial (termjs) functionality to xterm.js
 - [**SSH Web Client**](https://github.com/roke22/PHP-SSH2-Web-Client): SSH Web Client with PHP.
 - [**Shellvault**](https://www.shellvault.io): The cloud-based SSH terminal you can access from anywhere.
+- [**Juno**](http://junolab.org/): A flexible Julia IDE, based on Atom.
 
 [And much more...](https://github.com/xtermjs/xterm.js/network/dependents)
 

azure-pipelines.yml

@@ -0,0 +1,68 @@
+# Node.js
+# Build a general Node.js application with npm.
+# Add steps that analyze code, save build artifacts, deploy, and more:
+# https://docs.microsoft.com/vsts/pipelines/languages/javascript
+
+jobs:
+- job: Linux
+  pool:
+    vmImage: 'ubuntu-16.04'
+  steps:
+  - task: NodeTool@0
+    inputs:
+      versionSpec: '8.x'
+    displayName: 'Install Node.js'
+  - task: geeklearningio.gl-vsts-tasks-yarn.yarn-installer-task.YarnInstaller@2
+    inputs:
+      versionSpec: "1.9.4"
+    displayName: 'Install Yarn'
+  - script: |
+      yarn
+    displayName: 'Install dependencies and build'
+  - script: |
+      yarn mocha
+    displayName: 'Test'
+  - script: |
+      yarn lint
+    displayName: 'Lint'
+
+- job: macOS
+  pool:
+    vmImage: 'xcode9-macos10.13'
+  steps:
+  - task: NodeTool@0
+    inputs:
+      versionSpec: '8.x'
+    displayName: 'Install Node.js'
+  - script: |
+      yarn
+    displayName: 'Install dependencies and build'
+  - script: |
+      yarn mocha
+    displayName: 'Test'
+  - script: |
+      yarn lint
+    displayName: 'Lint'
+  - script: |
+      yarn test-coverage
+      export COVERALLS_GIT_BRANCH=$BUILD_SOURCEBRANCH
+      yarn coveralls
+    displayName: 'Generate and publish coverage'
+
+- job: Windows
+  pool:
+    vmImage: 'vs2017-win2016'
+  steps:
+  - task: NodeTool@0
+    inputs:
+      versionSpec: '8.x'
+    displayName: 'Install Node.js'
+  - script: |
+      yarn
+    displayName: 'Install dependencies and build'
+  - script: |
+      yarn mocha
+    displayName: 'Test'
+  - script: |
+      yarn lint
+    displayName: 'Lint'

demo/client.ts

@@ -1,11 +1,28 @@
-import * as Terminal from '../build/xterm';
+/**
-import * as attach from '../build/addons/attach/attach';
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
-import * as fit from '../build/addons/fit/fit';
+ * @license MIT
-import * as fullscreen from '../build/addons/fullscreen/fullscreen';
+ *
-import * as search from '../build/addons/search/search';
+ * This file is the entry point for browserify.
-import * as webLinks from '../build/addons/webLinks/webLinks';
+ */
-import * as winptyCompat from '../build/addons/winptyCompat/winptyCompat';
 
+/// <reference path="../typings/xterm.d.ts"/>
+
+import { Terminal } from '../lib/public/Terminal';
+import * as attach from '../lib/addons/attach/attach';
+import * as fit from '../lib/addons/fit/fit';
+import * as fullscreen from '../lib/addons/fullscreen/fullscreen';
+import * as search from '../lib/addons/search/search';
+import * as webLinks from '../lib/addons/webLinks/webLinks';
+import * as winptyCompat from '../lib/addons/winptyCompat/winptyCompat';
+
+// Pulling in the module's types relies on the <reference> above, it's looks a
+// little weird here as we're importing "this" module
+import { Terminal as TerminalType } from 'xterm';
+
+export interface IWindowWithTerminal extends Window {
+  term: TerminalType;
+}
+declare let window: IWindowWithTerminal;
 
 Terminal.applyAddon(attach);
 Terminal.applyAddon(fit);
@@ -15,20 +32,20 @@ Terminal.applyAddon(webLinks);
 Terminal.applyAddon(winptyCompat);
 
 
-var term,
+let term;
-    protocol,
+let protocol;
-    socketURL,
+let socketURL;
-    socket,
+let socket;
-    pid;
+let pid;
 
-var terminalContainer = document.getElementById('terminal-container'),
+const terminalContainer = document.getElementById('terminal-container');
-    actionElements = {
+const actionElements = {
-      findNext: document.querySelector('#find-next'),
+  findNext: <HTMLInputElement>document.querySelector('#find-next'),
-      findPrevious: document.querySelector('#find-previous')
+  findPrevious: <HTMLInputElement>document.querySelector('#find-previous')
-    },
+};
-    paddingElement = document.getElementById('padding');
+const paddingElement = <HTMLInputElement>document.getElementById('padding');
 
-function setPadding() {
+function setPadding(): void {
   term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
   term.fit();
 }
@@ -52,20 +69,20 @@ const disposeRecreateButtonHandler = () => {
 
 document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler);
 
-function createTerminal() {
+function createTerminal(): void {
   // Clean terminal
   while (terminalContainer.children.length) {
     terminalContainer.removeChild(terminalContainer.children[0]);
   }
   term = new Terminal({});
   window.term = term;  // Expose `term` to window for debugging purposes
-  term.on('resize', function (size) {
+  term.on('resize', (size: { cols: number, rows: number }) => {
     if (!pid) {
       return;
     }
-    var cols = size.cols,
+    const cols = size.cols;
-        rows = size.rows,
+    const rows = size.rows;
-        url = '/terminals/' + pid + '/size?cols=' + cols + '&rows=' + rows;
+    const url = '/terminals/' + pid + '/size?cols=' + cols + '&rows=' + rows;
 
     fetch(url, {method: 'POST'});
   });
@@ -80,32 +97,42 @@ function createTerminal() {
 
   addDomListener(paddingElement, 'change', setPadding);
 
-  addDomListener(actionElements.findNext, 'keypress', function (e) {
+  addDomListener(actionElements.findNext, 'keypress', (e) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       e.preventDefault();
-      term.findNext(actionElements.findNext.value);
+      const searchOptions = {
+        regex: (document.getElementById('regex') as HTMLInputElement).checked,
+        wholeWord: (document.getElementById('whole-word') as HTMLInputElement).checked,
+        caseSensitive: (document.getElementById('case-sensitive') as HTMLInputElement).checked
+      };
+      term.findNext(actionElements.findNext.value, searchOptions);
     }
   });
-  addDomListener(actionElements.findPrevious, 'keypress', function (e) {
+  addDomListener(actionElements.findPrevious, 'keypress', (e) => {
-    if (e.key === "Enter") {
+    if (e.key === 'Enter') {
       e.preventDefault();
-      term.findPrevious(actionElements.findPrevious.value);
+      const searchOptions = {
+        regex: (document.getElementById('regex') as HTMLInputElement).checked,
+        wholeWord: (document.getElementById('whole-word') as HTMLInputElement).checked,
+        caseSensitive: (document.getElementById('case-sensitive') as HTMLInputElement).checked
+      };
+      term.findPrevious(actionElements.findPrevious.value, searchOptions);
     }
   });
 
   // fit is called within a setTimeout, cols and rows need this.
-  setTimeout(function () {
+  setTimeout(() => {
     initOptions(term);
-    document.getElementById(`opt-cols`).value = term.cols;
+    // TODO: Clean this up, opt-cols/rows doesn't exist anymore
-    document.getElementById(`opt-rows`).value = term.rows;
+    (<HTMLInputElement>document.getElementById(`opt-cols`)).value = term.cols;
-    paddingElement.value = 0;
+    (<HTMLInputElement>document.getElementById(`opt-rows`)).value = term.rows;
+    paddingElement.value = '0';
 
     // Set terminal size again to set the specific dimensions on the demo
     updateTerminalSize();
 
-    fetch('/terminals?cols=' + term.cols + '&rows=' + term.rows, {method: 'POST'}).then(function (res) {
+    fetch('/terminals?cols=' + term.cols + '&rows=' + term.rows, {method: 'POST'}).then((res) => {
-
+      res.text().then((processId) => {
-      res.text().then(function (processId) {
         pid = processId;
         socketURL += processId;
         socket = new WebSocket(socketURL);
@@ -117,22 +144,20 @@ function createTerminal() {
   }, 0);
 }
 
-function runRealTerminal() {
+function runRealTerminal(): void {
   term.attach(socket);
   term._initialized = true;
 }
 
-function runFakeTerminal() {
+function runFakeTerminal(): void {
   if (term._initialized) {
     return;
   }
 
   term._initialized = true;
 
-  var shellprompt = '$ ';
+  term.prompt = () => {
-
+    term.write('\r\n$ ');
-  term.prompt = function () {
-    term.write('\r\n' + shellprompt);
   };
 
   term.writeln('Welcome to xterm.js');
@@ -141,14 +166,12 @@ function runFakeTerminal() {
   term.writeln('');
   term.prompt();
 
-  term._core.register(term.addDisposableListener('key', function (key, ev) {
+  term._core.register(term.addDisposableListener('key', (key, ev) => {
-    var printable = (
+    const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey;
-      !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey
-    );
 
-    if (ev.keyCode == 13) {
+    if (ev.keyCode === 13) {
       term.prompt();
-    } else if (ev.keyCode == 8) {
+    } else if (ev.keyCode === 8) {
      // Do not delete the prompt
       if (term.x > 2) {
         term.write('\b \b');
@@ -158,13 +181,13 @@ function runFakeTerminal() {
     }
   }));
 
-  term._core.register(term.addDisposableListener('paste', function (data, ev) {
+  term._core.register(term.addDisposableListener('paste', (data, ev) => {
     term.write(data);
   }));
 }
 
-function initOptions(term) {
+function initOptions(term: TerminalType): void {
-  var blacklistedOptions = [
+  const blacklistedOptions = [
     // Internal only options
     'cancelEvents',
     'convertEol',
@@ -176,7 +199,7 @@ function initOptions(term) {
     // Complex option
     'theme'
   ];
-  var stringOptions = {
+  const stringOptions = {
     bellSound: null,
     bellStyle: ['none', 'sound'],
     cursorStyle: ['block', 'underline', 'bar'],
@@ -186,9 +209,9 @@ function initOptions(term) {
     fontWeightBold: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
     rendererType: ['dom', 'canvas']
   };
-  var options = Object.keys(term._core.options);
+  const options = Object.keys((<any>term)._core.options);
-  var booleanOptions = [];
+  const booleanOptions = [];
-  var numberOptions = [];
+  const numberOptions = [];
   options.filter(o => blacklistedOptions.indexOf(o) === -1).forEach(o => {
     switch (typeof term.getOption(o)) {
       case 'boolean':
@@ -204,7 +227,7 @@ function initOptions(term) {
     }
   });
 
-  var html = '';
+  let html = '';
   html += '<div class="option-group">';
   booleanOptions.forEach(o => {
     html += `<div class="option"><label><input id="opt-${o}" type="checkbox" ${term.getOption(o) ? 'checked' : ''}/> ${o}</label></div>`;
@@ -218,24 +241,24 @@ function initOptions(term) {
     if (stringOptions[o]) {
       html += `<div class="option"><label>${o} <select id="opt-${o}">${stringOptions[o].map(v => `<option ${term.getOption(o) === v ? 'selected' : ''}>${v}</option>`).join('')}</select></label></div>`;
     } else {
-      html += `<div class="option"><label>${o} <input id="opt-${o}" type="text" value="${term.getOption(o)}"/></label></div>`
+      html += `<div class="option"><label>${o} <input id="opt-${o}" type="text" value="${term.getOption(o)}"/></label></div>`;
     }
   });
   html += '</div>';
 
-  var container = document.getElementById('options-container');
+  const container = document.getElementById('options-container');
   container.innerHTML = html;
 
   // Attach listeners
   booleanOptions.forEach(o => {
-    var input = document.getElementById(`opt-${o}`);
+    const input = <HTMLInputElement>document.getElementById(`opt-${o}`);
     addDomListener(input, 'change', () => {
       console.log('change', o, input.checked);
       term.setOption(o, input.checked);
     });
   });
   numberOptions.forEach(o => {
-    var input = document.getElementById(`opt-${o}`);
+    const input = <HTMLInputElement>document.getElementById(`opt-${o}`);
     addDomListener(input, 'change', () => {
       console.log('change', o, input.value);
       if (o === 'cols' || o === 'rows') {
@@ -246,7 +269,7 @@ function initOptions(term) {
     });
   });
   Object.keys(stringOptions).forEach(o => {
-    var input = document.getElementById(`opt-${o}`);
+    const input = <HTMLInputElement>document.getElementById(`opt-${o}`);
     addDomListener(input, 'change', () => {
       console.log('change', o, input.value);
       term.setOption(o, input.value);
@@ -254,16 +277,16 @@ function initOptions(term) {
   });
 }
 
-function addDomListener(element, type, handler) {
+function addDomListener(element: HTMLElement, type: string, handler: (...args: any[]) => any): void {
   element.addEventListener(type, handler);
   term._core.register({ dispose: () => element.removeEventListener(type, handler) });
 }
 
-function updateTerminalSize() {
+function updateTerminalSize(): void {
-  var cols = parseInt(document.getElementById(`opt-cols`).value, 10);
+  const cols = parseInt((<HTMLInputElement>document.getElementById(`opt-cols`)).value, 10);
-  var rows = parseInt(document.getElementById(`opt-rows`).value, 10);
+  const rows = parseInt((<HTMLInputElement>document.getElementById(`opt-rows`)).value, 10);
-  var width = (cols * term._core.renderer.dimensions.actualCellWidth + term._core.viewport.scrollBarWidth).toString() + 'px';
+  const width = (cols * term._core.renderer.dimensions.actualCellWidth + term._core.viewport.scrollBarWidth).toString() + 'px';
-  var height = (rows * term._core.renderer.dimensions.actualCellHeight).toString() + 'px';
+  const height = (rows * term._core.renderer.dimensions.actualCellHeight).toString() + 'px';
   terminalContainer.style.width = width;
   terminalContainer.style.height = height;
   term.fit();

demo/index.html

@@ -16,6 +16,9 @@
       <p>
         <label>Find next <input id="find-next"/></label>
         <label>Find previous <input id="find-previous"/></label>
+        <label>Use regex<input type="checkbox" id="regex"/></label> 
+        <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
+        <label>Whole word<input type="checkbox" id="whole-word"/></label>
       </p>
     </div>
     <div>
@@ -33,6 +36,6 @@
     <hr/>
     <p><strong>Attention:</strong> The demo is a barebones implementation and is designed for the development and evaluation of xterm.js only. Exposing the demo to the public as is would introduce security risks for the host.</p>
     <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
-    <script src="dist/bundle.js" defer ></script>
+    <script src="dist/client-bundle.js" defer ></script>
   </body>
 </html>

demo/server.js

@@ -17,12 +17,8 @@ app.get('/style.css', function(req, res){
   res.sendFile(__dirname + '/style.css');
 });
 
-app.get('/dist/bundle.js', function(req, res){
+app.get('/dist/client-bundle.js', function(req, res){
-  res.sendFile(__dirname + '/dist/bundle.js');
+  res.sendFile(__dirname + '/dist/client-bundle.js');
-});
-
-app.get('/dist/bundle.js.map', function(req, res){
-  res.sendFile(__dirname + '/dist/bundle.js.map');
 });
 
 app.post('/terminals', function (req, res) {

demo/start.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2018 The xterm.js authors. All rights reserved.
+ * @license MIT
+ *
+ * This file is the entry point for browserify.
+ */
+
+const cp = require('child_process');
+const path = require('path');
+const webpack = require('webpack');
+
+// Launch server
+cp.spawn('node', [path.resolve(__dirname, 'server.js')], { stdio: 'inherit' });
+
+// Build/watch client source
+const clientConfig = {
+  entry: path.resolve(__dirname, 'client.ts'),
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    extensions: [ '.tsx', '.ts', '.js' ]
+  },
+  output: {
+    filename: 'client-bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  mode: 'development',
+  watch: true
+};
+const compiler = webpack(clientConfig);
+
+compiler.watch({
+  // Example watchOptions
+  aggregateTimeout: 300,
+  poll: undefined
+}, (err, stats) => {
+  // Print watch/build result here...
+  console.log(stats.toString({
+    colors: true
+  }));
+});

demo/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "rootDir": ".",
+    "sourceMap": true
+  },
+  "include": [
+    "client.ts",
+    "../typings/xterm.d.ts"
+  ]
+}

fixtures/typings-test/tsconfig.json

@@ -5,6 +5,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6"
+    ],
     "noEmit": true
   }
 }

gulpfile.js

@@ -14,7 +14,6 @@ const source = require('vinyl-source-stream');
 const sourcemaps = require('gulp-sourcemaps');
 const ts = require('gulp-typescript');
 const util = require('gulp-util');
-const webpack = require('webpack-stream');
 
 const buildDir = process.env.BUILD_DIR || 'build';
 const tsProject = ts.createProject('tsconfig.json');
@@ -137,17 +136,6 @@ gulp.task('sorcery-addons', ['browserify-addons'], function () {
   })
 });
 
-gulp.task('webpack', ['build'], function() {
-  return gulp.src('demo/main.js')
-    .pipe(webpack(require('./webpack.config.js')))
-    .pipe(gulp.dest('demo/dist/'));
-});
-
-
-gulp.task('watch-demo', ['webpack'], () => {
-  gulp.watch(['./demo/*', './lib/**/*'], ['webpack']);
-});
-
 gulp.task('build', ['sorcery', 'sorcery-addons']);
 gulp.task('test', ['mocha']);
 gulp.task('default', ['build']);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "main": "lib/public/Terminal.js",
   "types": "typings/xterm.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js",
@@ -12,6 +12,7 @@
     "@types/jsdom": "11.0.1",
     "@types/mocha": "^2.2.33",
     "@types/node": "6.0.108",
+    "@types/webpack": "^4.4.11",
     "browserify": "^13.3.0",
     "chai": "3.5.0",
     "concurrently": "^3.5.1",
@@ -32,24 +33,25 @@
     "merge-stream": "^1.0.1",
     "node-pty": "0.7.6",
     "nodemon": "1.10.2",
-    "npm-run-all": "^4.1.2",
     "nyc": "^11.8.0",
     "sorcery": "^0.10.0",
     "source-map-loader": "^0.2.3",
+    "ts-loader": "^4.5.0",
     "tslint": "^5.9.1",
     "tslint-consistent-codestyle": "^1.13.0",
-    "typescript": "2.8.3",
+    "typescript": "3.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
-    "webpack": "^3.10.0",
+    "webpack": "^4.17.1",
-    "webpack-stream": "^4.0.0",
+    "webpack-cli": "^3.1.0",
     "zmodem.js": "^0.1.5"
   },
   "scripts": {
-    "start": "concurrently --kill-others-on-fail --names \"demo,server\" \"gulp watch-demo\" \"node demo/app\"",
+    "start": "node demo/start",
     "start-zmodem": "node demo/zmodem/app",
-    "lint": "tslint 'src/**/*.ts'",
+    "lint": "tslint 'src/**/*.ts' './demo/**/*.ts'",
-    "test": "npm-run-all mocha lint",
+    "test": "npm run mocha",
+    "posttest": "npm run lint",
     "test-debug": "node --inspect-brk node_modules/.bin/gulp test",
     "test-suite": "gulp mocha-suite --test",
     "test-coverage": "nyc -x gulpfile.js -x '**/*test*' npm run mocha",
@@ -61,6 +63,7 @@
     "prepublish": "npm run build",
     "coveralls": "nyc report --reporter=text-lcov | coveralls",
     "webpack": "gulp webpack",
-    "watch": "concurrently --kill-others-on-fail --names \"lib,attach,fit,fullscreen,search,terminado,webLinks,winptyCompat,zmodem,css\" \"tsc -w\" \"tsc -w -p ./src/addons/attach\" \"tsc -w -p ./src/addons/fit\" \"tsc -w -p ./src/addons/fullscreen\" \"tsc -w -p ./src/addons/search\" \"tsc -w -p ./src/addons/terminado\" \"tsc -w -p ./src/addons/webLinks\" \"tsc -w -p ./src/addons/winptyCompat\" \"tsc -w -p ./src/addons/zmodem\" \"gulp watch-css\""
+    "watch": "concurrently --kill-others-on-fail --names \"lib,css\" \"tsc -w\" \"gulp watch-css\"",
+    "watch-addons": "concurrently --kill-others-on-fail --names \"attach,fit,fullscreen,search,terminado,webLinks,winptyCompat,zmodem\" \"tsc -w -p ./src/addons/attach\" \"tsc -w -p ./src/addons/fit\" \"tsc -w -p ./src/addons/fullscreen\" \"tsc -w -p ./src/addons/search\" \"tsc -w -p ./src/addons/terminado\" \"tsc -w -p ./src/addons/webLinks\" \"tsc -w -p ./src/addons/winptyCompat\" \"tsc -w -p ./src/addons/zmodem\""
   }
 }

src/Buffer.test.ts

@@ -3,11 +3,11 @@
  * @license MIT
  */
 
-import { assert } from 'chai';
+import { assert, expect } from 'chai';
 import { ITerminal } from './Types';
-import { Buffer, DEFAULT_ATTR } from './Buffer';
+import { Buffer, DEFAULT_ATTR, CHAR_DATA_CHAR_INDEX } from './Buffer';
 import { CircularList } from './common/CircularList';
-import { MockTerminal } from './utils/TestUtils.test';
+import { MockTerminal, TestTerminal } from './utils/TestUtils.test';
 import { BufferLine } from './BufferLine';
 
 const INIT_COLS = 80;
@@ -347,4 +347,202 @@ describe('Buffer', () => {
       assert.equal(str3, '😁a');
     });
   });
+  describe('stringIndexToBufferIndex', () => {
+    let terminal: TestTerminal;
+
+    beforeEach(() => {
+      terminal = new TestTerminal({rows: 5, cols: 10});
+    });
+
+    it('multiline ascii', () => {
+      const input = 'This is ASCII text spanning multiple lines.';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      for (let i = 0; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([(i / terminal.cols) | 0, i % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('combining e\u0301 in a sentence', () => {
+      const input = 'Sitting in the cafe\u0301 drinking coffee.';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      for (let i = 0; i < 19; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([(i / terminal.cols) | 0, i % terminal.cols], bufferIndex);
+      }
+      // string index 18 & 19 point to combining char e\u0301 ---> same buffer Index
+      assert.deepEqual(
+        terminal.buffer.stringIndexToBufferIndex(0, 18),
+        terminal.buffer.stringIndexToBufferIndex(0, 19));
+      // after the combining char every string index has an offset of -1
+      for (let i = 19; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([((i - 1) / terminal.cols) | 0, (i - 1) % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('multiline combining e\u0301', () => {
+      const input = 'e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      // every buffer cell index contains 2 string indices
+      for (let i = 0; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([((i >> 1) / terminal.cols) | 0, (i >> 1) % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('surrogate char in a sentence', () => {
+      const input = 'The 𝄞 is a clef widely used in modern notation.';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      for (let i = 0; i < 5; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([(i / terminal.cols) | 0, i % terminal.cols], bufferIndex);
+      }
+      // string index 4 & 5 point to surrogate char 𝄞 ---> same buffer Index
+      assert.deepEqual(
+        terminal.buffer.stringIndexToBufferIndex(0, 4),
+        terminal.buffer.stringIndexToBufferIndex(0, 5));
+      // after the combining char every string index has an offset of -1
+      for (let i = 5; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([((i - 1) / terminal.cols) | 0, (i - 1) % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('multiline surrogate char', () => {
+      const input = '𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      // every buffer cell index contains 2 string indices
+      for (let i = 0; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([((i >> 1) / terminal.cols) | 0, (i >> 1) % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('surrogate char with combining', () => {
+      // eye of Ra with acute accent - string length of 3
+      const input = '𓂀\u0301 - the eye hiroglyph with an acute accent.';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      // index 0..2 should map to 0
+      assert.deepEqual([0, 0], terminal.buffer.stringIndexToBufferIndex(0, 1));
+      assert.deepEqual([0, 0], terminal.buffer.stringIndexToBufferIndex(0, 2));
+      for (let i = 2; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([((i - 2) / terminal.cols) | 0, (i - 2) % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('multiline surrogate with combining', () => {
+      const input = '𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      // every buffer cell index contains 3 string indices
+      for (let i = 0; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([(((i / 3) | 0) / terminal.cols) | 0, ((i / 3) | 0) % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('fullwidth chars', () => {
+      const input = 'These １２３ are some fat numbers.';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      for (let i = 0; i < 6; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([(i / terminal.cols) | 0, i % terminal.cols], bufferIndex);
+      }
+      // string index 6, 7, 8 take 2 cells
+      assert.deepEqual([0, 8], terminal.buffer.stringIndexToBufferIndex(0, 7));
+      assert.deepEqual([1, 0], terminal.buffer.stringIndexToBufferIndex(0, 8));
+      // rest of the string has offset of +3
+      for (let i = 9; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([((i + 3) / terminal.cols) | 0, (i + 3) % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('multiline fullwidth chars', () => {
+      const input = '１２３４５６７８９０１２３４５６７８９０';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      for (let i = 9; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i);
+        assert.deepEqual([((i << 1) / terminal.cols) | 0, (i << 1) % terminal.cols], bufferIndex);
+      }
+    });
+
+    it('fullwidth combining with emoji - match emoji cell', () => {
+      const input = 'Lots of ￥\u0301 make me 😃.';
+      terminal.writeSync(input);
+      const s = terminal.buffer.iterator(true).next().content;
+      assert.equal(input, s);
+      const stringIndex = s.match(/😃/).index;
+      const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, stringIndex);
+      assert(terminal.buffer.lines.get(bufferIndex[0]).get(bufferIndex[1])[CHAR_DATA_CHAR_INDEX], '😃');
+    });
+
+    it('multiline fullwidth chars with offset 1 (currently tests for broken behavior)', () => {
+      const input = 'a１２３４５６７８９０１２３４５６７８９０';
+      // the 'a' at the beginning moves all fullwidth chars one to the right
+      // now the end of the line contains a dangling empty cell since
+      // the next fullwidth char has to wrap early
+      // the dangling last cell is wrongly added in the string
+      // --> fixable after resolving #1685
+      terminal.writeSync(input);
+      // TODO: reenable after fix
+      // const s = terminal.buffer.contents(true).toArray()[0];
+      // assert.equal(input, s);
+      for (let i = 10; i < input.length; ++i) {
+        const bufferIndex = terminal.buffer.stringIndexToBufferIndex(0, i + 1); // TODO: remove +1 after fix
+        const j = (i - 0) << 1;
+        assert.deepEqual([(j / terminal.cols) | 0, j % terminal.cols], bufferIndex);
+      }
+    });
+  });
+  describe('BufferStringIterator', function(): void {
+    it('iterator does not ovrflow buffer limits', function(): void {
+      const terminal = new TestTerminal({rows: 5, cols: 10, scrollback: 5});
+      const data = [
+        'aaaaaaaaaa',
+        'aaaaaaaaa\n',
+        'aaaaaaaaaa',
+        'aaaaaaaaa\n',
+        'aaaaaaaaaa',
+        'aaaaaaaaaa',
+        'aaaaaaaaaa',
+        'aaaaaaaaa\n',
+        'aaaaaaaaaa',
+        'aaaaaaaaaa'
+      ];
+      terminal.writeSync(data.join(''));
+      // brute force test with insane values
+      expect(() => {
+        for (let overscan = 0; overscan < 20; ++overscan) {
+          for (let start = -10; start < 20; ++start) {
+            for (let end = -10; end < 20; ++end) {
+              const it = terminal.buffer.iterator(false, start, end, overscan, overscan);
+              while (it.hasNext()) {
+                it.next();
+              }
+            }
+          }
+        }
+      }).to.not.throw();
+    });
+  });
 });

src/Buffer.ts

@@ -4,8 +4,8 @@
  */
 
 import { CircularList } from './common/CircularList';
-import { CharData, ITerminal, IBuffer, IBufferLine } from './Types';
+import { CharData, ITerminal, IBuffer, IBufferLine, BufferIndex, IBufferStringIterator, IBufferStringIteratorResult } from './Types';
-import { EventEmitter } from './EventEmitter';
+import { EventEmitter } from './common/EventEmitter';
 import { IMarker } from 'xterm';
 import { BufferLine } from './BufferLine';
 
@@ -194,6 +194,36 @@ export class Buffer implements IBuffer {
     this.scrollBottom = newRows - 1;
   }
 
+  /**
+   * Translates a string index back to a BufferIndex.
+   * To get the correct buffer position the string must start at `startCol` 0
+   * (default in translateBufferLineToString).
+   * The method also works on wrapped line strings given rows were not trimmed.
+   * The method operates on the CharData string length, there are no
+   * additional content or boundary checks. Therefore the string and the buffer
+   * should not be altered in between.
+   * TODO: respect trim flag after fixing #1685
+   * @param lineIndex line index the string was retrieved from
+   * @param stringIndex index within the string
+   * @param startCol column offset the string was retrieved from
+   */
+  public stringIndexToBufferIndex(lineIndex: number, stringIndex: number): BufferIndex {
+    while (stringIndex) {
+      const line = this.lines.get(lineIndex);
+      if (!line) {
+        [-1, -1];
+      }
+      for (let i = 0; i < line.length; ++i) {
+        stringIndex -= line.get(i)[CHAR_DATA_CHAR_INDEX].length;
+        if (stringIndex < 0) {
+          return [lineIndex, i];
+        }
+      }
+      lineIndex++;
+    }
+    return [lineIndex, 0];
+  }
+
   /**
    * Translates a buffer line to a string, with optional start and end columns.
    * Wide characters will count as two columns in the resulting string. This
@@ -340,6 +370,10 @@ export class Buffer implements IBuffer {
     // TODO: This could probably be optimized by relying on sort order and trimming the array using .length
     this.markers.splice(this.markers.indexOf(marker), 1);
   }
+
+  public iterator(trimRight: boolean, startIndex?: number, endIndex?: number, startOverscan?: number, endOverscan?: number): IBufferStringIterator {
+    return new BufferStringIterator(this, trimRight, startIndex, endIndex, startOverscan, endOverscan);
+  }
 }
 
 export class Marker extends EventEmitter implements IMarker {
@@ -366,3 +400,61 @@ export class Marker extends EventEmitter implements IMarker {
     super.dispose();
   }
 }
+
+/**
+ * Iterator to get unwrapped content strings from the buffer.
+ * The iterator returns at least the string data between the borders
+ * `startIndex` and `endIndex` (exclusive) and will expand the lines
+ * by `startOverscan` to the top and by `endOverscan` to the bottom,
+ * if no new line was found in between.
+ * It will never read/return string data beyond `startIndex - startOverscan`
+ * or `endIndex + endOverscan`. Therefore the first and last line might be truncated.
+ * It is possible to always get the full string for the first and last line as well
+ * by setting the overscan values to the actual buffer length. This not recommended
+ * since it might return the whole buffer within a single string in a worst case scenario.
+ */
+export class BufferStringIterator implements IBufferStringIterator {
+  private _current: number;
+
+  constructor (
+    private _buffer: IBuffer,
+    private _trimRight: boolean,
+    private _startIndex: number = 0,
+    private _endIndex: number = _buffer.lines.length,
+    private _startOverscan: number = 0,
+    private _endOverscan: number = 0
+  ) {
+    if (this._startIndex < 0) {
+      this._startIndex = 0;
+    }
+    if (this._endIndex > this._buffer.lines.length) {
+      this._endIndex = this._buffer.lines.length;
+    }
+    this._current = this._startIndex;
+  }
+
+  public hasNext(): boolean {
+    return this._current < this._endIndex;
+  }
+
+  public next(): IBufferStringIteratorResult {
+    const range = this._buffer.getWrappedRangeForLine(this._current);
+    // limit search window to overscan value at both borders
+    if (range.first < this._startIndex - this._startOverscan) {
+      range.first = this._startIndex - this._startOverscan;
+    }
+    if (range.last > this._endIndex + this._endOverscan) {
+      range.last = this._endIndex + this._endOverscan;
+    }
+    // limit to current buffer length
+    range.first = Math.max(range.first, 0);
+    range.last = Math.min(range.last, this._buffer.lines.length);
+    let result = '';
+    for (let i = range.first; i <= range.last; ++i) {
+      // TODO: always apply trimRight after fixing #1685
+      result += this._buffer.translateBufferLineToString(i, (this._trimRight) ? i === range.last : false);
+    }
+    this._current = range.last + 1;
+    return {range: range, content: result};
+  }
+}

src/BufferSet.ts

@@ -5,7 +5,7 @@
 
 import { ITerminal, IBufferSet } from './Types';
 import { Buffer } from './Buffer';
-import { EventEmitter } from './EventEmitter';
+import { EventEmitter } from './common/EventEmitter';
 
 /**
  * The BufferSet represents the set of two buffers used by xterm terminals (normal and alt) and

src/CharWidth.test.ts

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { TestTerminal } from './utils/TestUtils.test';
+import { assert } from 'chai';
+import { getStringCellWidth } from './CharWidth';
+import { IBuffer } from './Types';
+import { CHAR_DATA_WIDTH_INDEX, CHAR_DATA_CHAR_INDEX } from './Buffer';
+
+
+describe('getStringCellWidth', function(): void {
+  let terminal: TestTerminal;
+
+  beforeEach(() => {
+    terminal = new TestTerminal({rows: 5, cols: 30});
+  });
+
+  function sumWidths(buffer: IBuffer, start: number, end: number, sentinel: string): number {
+    let result = 0;
+    for (let i = start; i < end; ++i) {
+      const line = buffer.lines.get(i);
+      for (let j = 0; j < line.length; ++j) { // TODO: change to trimBorder with multiline
+        const ch = line.get(j);
+        result += ch[CHAR_DATA_WIDTH_INDEX];
+        // return on sentinel
+        if (ch[CHAR_DATA_CHAR_INDEX] === sentinel) {
+          return result;
+        }
+      }
+    }
+    return result;
+  }
+
+  it('ASCII chars', function(): void {
+    const input = 'This is just ASCII text.#';
+    terminal.writeSync(input);
+    const s = terminal.buffer.iterator(true).next().content;
+    assert.equal(input, s);
+    assert.equal(getStringCellWidth(s), sumWidths(terminal.buffer, 0, 1, '#'));
+  });
+  it('combining chars', function(): void {
+    const input = 'e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301#';
+    terminal.writeSync(input);
+    const s = terminal.buffer.iterator(true).next().content;
+    assert.equal(input, s);
+    assert.equal(getStringCellWidth(s), sumWidths(terminal.buffer, 0, 1, '#'));
+  });
+  it('surrogate chars', function(): void {
+    const input = '𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞#';
+    terminal.writeSync(input);
+    const s = terminal.buffer.iterator(true).next().content;
+    assert.equal(input, s);
+    assert.equal(getStringCellWidth(s), sumWidths(terminal.buffer, 0, 1, '#'));
+  });
+  it('surrogate combining chars', function(): void {
+    const input = '𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301#';
+    terminal.writeSync(input);
+    const s = terminal.buffer.iterator(true).next().content;
+    assert.equal(input, s);
+    assert.equal(getStringCellWidth(s), sumWidths(terminal.buffer, 0, 1, '#'));
+  });
+  it('fullwidth chars', function(): void {
+    const input = '１２３４５６７８９０#';
+    terminal.writeSync(input);
+    const s = terminal.buffer.iterator(true).next().content;
+    assert.equal(input, s);
+    assert.equal(getStringCellWidth(s), sumWidths(terminal.buffer, 0, 1, '#'));
+  });
+  it('fullwidth chars offset 1', function(): void {
+    const input = 'a１２３４５６７８９０#';
+    terminal.writeSync(input);
+    const s = terminal.buffer.iterator(true).next().content;
+    assert.equal(input, s);
+    assert.equal(getStringCellWidth(s), sumWidths(terminal.buffer, 0, 1, '#'));
+  });
+  // TODO: multiline tests once #1685 is resolved
+});

src/CharWidth.ts

@@ -169,3 +169,25 @@ export const wcwidth = (function(opts: {nul: number, control: number}): (ucs: nu
       return wcwidthHigh(num);
     };
 })({nul: 0, control: 0});  // configurable options
+
+/**
+ * Get the terminal cell width for a string.
+ */
+export function getStringCellWidth(s: string): number {
+  let result = 0;
+  for (let i = 0; i < s.length; ++i) {
+    let code = s.charCodeAt(i);
+    if (0xD800 <= code && code <= 0xDBFF) {
+      const low = s.charCodeAt(i + 1);
+      if (isNaN(low)) {
+        return result;
+      }
+      code = ((code - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
+    }
+    if (0xDC00 <= code && code <= 0xDFFF) {
+      continue;
+    }
+    result += wcwidth(code);
+  }
+  return result;
+}

src/Linkifier.test.ts

@@ -7,7 +7,7 @@ import { assert } from 'chai';
 import { IMouseZoneManager, IMouseZone } from './ui/Types';
 import { ILinkMatcher, ITerminal, IBufferLine } from './Types';
 import { Linkifier } from './Linkifier';
-import { MockBuffer, MockTerminal } from './utils/TestUtils.test';
+import { MockBuffer, MockTerminal, TestTerminal } from './utils/TestUtils.test';
 import { CircularList } from './common/CircularList';
 import { BufferLine } from './BufferLine';
 
@@ -42,6 +42,7 @@ describe('Linkifier', () => {
   beforeEach(() => {
     terminal = new MockTerminal();
     terminal.cols = 100;
+    terminal.rows = 10;
     terminal.buffer = new MockBuffer();
     (<MockBuffer>terminal.buffer).setLines(new CircularList<IBufferLine>(20));
     terminal.buffer.ydisp = 0;
@@ -64,6 +65,7 @@ describe('Linkifier', () => {
   function assertLinkifiesRow(rowText: string, linkMatcherRegex: RegExp, links: {x: number, length: number}[], done: MochaDone): void {
     addRow(rowText);
     linkifier.registerLinkMatcher(linkMatcherRegex, () => {});
+    terminal.rows = terminal.buffer.lines.length - 1;
     linkifier.linkifyRows();
     // Allow linkify to happen
     setTimeout(() => {
@@ -238,4 +240,98 @@ describe('Linkifier', () => {
       });
     });
   });
+  describe('unicode handling', () => {
+    let terminal: TestTerminal;
+
+    // other than the tests above unicode testing needs the full terminal instance
+    // to get the special handling of fullwidth, surrogate and combining chars in the input handler
+    beforeEach(() => {
+      terminal = new TestTerminal({cols: 10, rows: 5});
+      linkifier = new TestLinkifier(terminal);
+      mouseZoneManager = new TestMouseZoneManager();
+      linkifier.attachToDom(mouseZoneManager);
+    });
+
+    function assertLinkifiesInTerminal(rowText: string, linkMatcherRegex: RegExp, links: {x1: number, y1: number, x2: number, y2: number}[], done: MochaDone): void {
+      terminal.writeSync(rowText);
+      linkifier.registerLinkMatcher(linkMatcherRegex, () => {});
+      linkifier.linkifyRows();
+      // Allow linkify to happen
+      setTimeout(() => {
+        assert.equal(mouseZoneManager.zones.length, links.length);
+        links.forEach((l, i) => {
+          assert.equal(mouseZoneManager.zones[i].x1, l.x1 + 1);
+          assert.equal(mouseZoneManager.zones[i].x2, l.x2 + 1);
+          assert.equal(mouseZoneManager.zones[i].y1, l.y1 + 1);
+          assert.equal(mouseZoneManager.zones[i].y2, l.y2 + 1);
+        });
+        done();
+      }, 0);
+    }
+
+    describe('unicode before the match', () => {
+      it('combining - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('e\u0301e\u0301e\u0301 foo', /foo/, [{x1: 4, x2: 7, y1: 0, y2: 0}], done);
+      });
+      it('combining - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('e\u0301e\u0301e\u0301     foo', /foo/, [{x1: 8, x2: 1, y1: 0, y2: 1}], done);
+      });
+      it('surrogate - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('𝄞𝄞𝄞 foo', /foo/, [{x1: 4, x2: 7, y1: 0, y2: 0}], done);
+      });
+      it('surrogate - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('𝄞𝄞𝄞     foo', /foo/, [{x1: 8, x2: 1, y1: 0, y2: 1}], done);
+      });
+      it('combining surrogate - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('𓂀\u0301𓂀\u0301𓂀\u0301 foo', /foo/, [{x1: 4, x2: 7, y1: 0, y2: 0}], done);
+      });
+      it('combining surrogate - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('𓂀\u0301𓂀\u0301𓂀\u0301     foo', /foo/, [{x1: 8, x2: 1, y1: 0, y2: 1}], done);
+      });
+      it('fullwidth - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('１２ foo', /foo/, [{x1: 5, x2: 8, y1: 0, y2: 0}], done);
+      });
+      it('fullwidth - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('１２    foo', /foo/, [{x1: 8, x2: 1, y1: 0, y2: 1}], done);
+      });
+      it('combining fullwidth - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('￥\u0301￥\u0301 foo', /foo/, [{x1: 5, x2: 8, y1: 0, y2: 0}], done);
+      });
+      it('combining fullwidth - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('￥\u0301￥\u0301    foo', /foo/, [{x1: 8, x2: 1, y1: 0, y2: 1}], done);
+      });
+    });
+    describe('unicode within the match', () => {
+      it('combining - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('test cafe\u0301', /cafe\u0301/, [{x1: 5, x2: 9, y1: 0, y2: 0}], done);
+      });
+      it('combining - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('testtest cafe\u0301', /cafe\u0301/, [{x1: 9, x2: 3, y1: 0, y2: 1}], done);
+      });
+      it('surrogate - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('test a𝄞b', /a𝄞b/, [{x1: 5, x2: 8, y1: 0, y2: 0}], done);
+      });
+      it('surrogate - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('testtest a𝄞b', /a𝄞b/, [{x1: 9, x2: 2, y1: 0, y2: 1}], done);
+      });
+      it('combining surrogate - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('test a𓂀\u0301b', /a𓂀\u0301b/, [{x1: 5, x2: 8, y1: 0, y2: 0}], done);
+      });
+      it('combining surrogate - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('testtest a𓂀\u0301b', /a𓂀\u0301b/, [{x1: 9, x2: 2, y1: 0, y2: 1}], done);
+      });
+      it('fullwidth - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('test a１b', /a１b/, [{x1: 5, x2: 9, y1: 0, y2: 0}], done);
+      });
+      it('fullwidth - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('testtest a１b', /a１b/, [{x1: 9, x2: 3, y1: 0, y2: 1}], done);
+      });
+      it('combining fullwidth - match within one line', function(done: () => void): void {
+        assertLinkifiesInTerminal('test a￥\u0301b', /a￥\u0301b/, [{x1: 5, x2: 9, y1: 0, y2: 0}], done);
+      });
+      it('combining fullwidth - match over two lines', function(done: () => void): void {
+        assertLinkifiesInTerminal('testtest a￥\u0301b', /a￥\u0301b/, [{x1: 9, x2: 3, y1: 0, y2: 1}], done);
+      });
+    });
+  });
 });

src/Linkifier.ts

@@ -4,10 +4,11 @@
  */
 
 import { IMouseZoneManager } from './ui/Types';
-import { ILinkHoverEvent, ILinkMatcher, LinkMatcherHandler, LinkHoverEventTypes, ILinkMatcherOptions, ILinkifier, ITerminal, IBufferLine } from './Types';
+import { ILinkHoverEvent, ILinkMatcher, LinkMatcherHandler, LinkHoverEventTypes, ILinkMatcherOptions, ILinkifier, ITerminal, IBufferStringIteratorResult } from './Types';
 import { MouseZone } from './ui/MouseZoneManager';
-import { EventEmitter } from './EventEmitter';
+import { EventEmitter } from './common/EventEmitter';
 import { CHAR_DATA_ATTR_INDEX } from './Buffer';
+import { getStringCellWidth } from './CharWidth';
 
 /**
  * The Linkifier applies links to rows shortly after they have been refreshed.
@@ -20,6 +21,13 @@ export class Linkifier extends EventEmitter implements ILinkifier {
    */
   protected static readonly TIME_BEFORE_LINKIFY = 200;
 
+  /**
+   * Limit of the unwrapping line expansion (overscan) at the top and bottom
+   * of the actual viewport in ASCII characters.
+   * A limit of 2000 should match most sane urls.
+   */
+  protected static readonly OVERSCAN_CHAR_LIMIT = 2000;
+
   protected _linkMatchers: ILinkMatcher[] = [];
 
   private _mouseZoneManager: IMouseZoneManager;
@@ -80,9 +88,37 @@ export class Linkifier extends EventEmitter implements ILinkifier {
    */
   private _linkifyRows(): void {
     this._rowsTimeoutId = null;
-    for (let i = this._rowsToLinkify.start; i <= this._rowsToLinkify.end; i++) {
+    const buffer = this._terminal.buffer;
-      this._linkifyRow(i);
+
+    // Ensure the start row exists
+    const absoluteRowIndexStart = buffer.ydisp + this._rowsToLinkify.start;
+    if (absoluteRowIndexStart >= buffer.lines.length) {
+      return;
     }
+
+    // Invalidate bad end row values (if a resize happened)
+    const absoluteRowIndexEnd = buffer.ydisp + Math.min(this._rowsToLinkify.end, this._terminal.rows) + 1;
+
+    // Iterate over the range of unwrapped content strings within start..end
+    // (excluding).
+    // _doLinkifyRow gets full unwrapped lines with the start row as buffer offset
+    // for every matcher.
+    // The unwrapping is needed to also match content that got wrapped across
+    // several buffer lines. To avoid a worst case scenario where the whole buffer
+    // contains just a single unwrapped string we limit this line expansion beyond
+    // the viewport to +OVERSCAN_CHAR_LIMIT chars (overscan) at top and bottom.
+    // This comes with the tradeoff that matches longer than OVERSCAN_CHAR_LIMIT
+    // chars will not match anymore at the viewport borders.
+    const overscanLineLimit = Math.ceil(Linkifier.OVERSCAN_CHAR_LIMIT / this._terminal.cols);
+    const iterator = this._terminal.buffer.iterator(
+      false, absoluteRowIndexStart, absoluteRowIndexEnd, overscanLineLimit, overscanLineLimit);
+    while (iterator.hasNext()) {
+      const lineData: IBufferStringIteratorResult = iterator.next();
+      for (let i = 0; i < this._linkMatchers.length; i++) {
+        this._doLinkifyRow(lineData.range.first, lineData.content, this._linkMatchers[i]);
+      }
+    }
+
     this._rowsToLinkify.start = null;
     this._rowsToLinkify.end = null;
   }
@@ -153,96 +189,61 @@ export class Linkifier extends EventEmitter implements ILinkifier {
     return false;
   }
 
-  /**
-   * Linkifies a row.
-   * @param rowIndex The index of the row to linkify.
-   */
-  private _linkifyRow(rowIndex: number): void {
-    // Ensure the row exists
-    let absoluteRowIndex = this._terminal.buffer.ydisp + rowIndex;
-    if (absoluteRowIndex >= this._terminal.buffer.lines.length) {
-      return;
-    }
-
-    if (this._terminal.buffer.lines.get(absoluteRowIndex).isWrapped) {
-      // Only attempt to linkify rows that start in the viewport
-      if (rowIndex !== 0) {
-        return;
-      }
-      // If the first row is wrapped, backtrack to find the origin row and linkify that
-      let line: IBufferLine;
-
-      do {
-        rowIndex--;
-        absoluteRowIndex--;
-        line = this._terminal.buffer.lines.get(absoluteRowIndex);
-
-        if (!line) {
-          break;
-        }
-
-      } while (line.isWrapped);
-    }
-
-    // Construct full unwrapped line text
-    let text = this._terminal.buffer.translateBufferLineToString(absoluteRowIndex, false);
-    let currentIndex = absoluteRowIndex + 1;
-    while (currentIndex < this._terminal.buffer.lines.length &&
-      this._terminal.buffer.lines.get(currentIndex).isWrapped) {
-      text += this._terminal.buffer.translateBufferLineToString(currentIndex++, false);
-    }
-
-    for (let i = 0; i < this._linkMatchers.length; i++) {
-      this._doLinkifyRow(rowIndex, text, this._linkMatchers[i]);
-    }
-  }
-
   /**
    * Linkifies a row given a specific handler.
-   * @param rowIndex The row index to linkify.
+   * @param rowIndex The row index to linkify (absolute index).
-   * @param text The text of the row (excludes text in the row that's already
+   * @param text string content of the unwrapped row.
-   * linkified).
    * @param matcher The link matcher for this line.
-   * @param offset The how much of the row has already been linkified.
-   * @return The link element(s) that were added.
    */
-  private _doLinkifyRow(rowIndex: number, text: string, matcher: ILinkMatcher, offset: number = 0): void {
+  private _doLinkifyRow(rowIndex: number, text: string, matcher: ILinkMatcher): void {
-    // Find the first match
+    // clone regex to do a global search on text
-    const match = text.match(matcher.regex);
+    const rex = new RegExp(matcher.regex.source, matcher.regex.flags + 'g');
-    if (!match || match.length === 0) {
+    let match;
-      return;
+    let stringIndex = -1;
-    }
+    while ((match = rex.exec(text)) !== null) {
-    const uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
+      const uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
-
+      if (!uri) {
-    // Get index, match.index is for the outer match which includes negated chars
+        // something matched but does not comply with the given matchIndex
-    const index = text.indexOf(uri);
+        // since this is most likely a bug the regex itself we simply do nothing here
-
+        // DEBUG: print match and throw
-    // Get cell color
+        if ((<any>this._terminal).debug) {
-    const line = this._terminal.buffer.lines.get(this._terminal.buffer.ydisp + rowIndex);
+          console.log({match, matcher});
-    const char = line.get(index);
+          throw new Error('match found without corresponding matchIndex');
-    const attr: number = char[CHAR_DATA_ATTR_INDEX];
-    const fg = (attr >> 9) & 0x1ff;
-
-    // Ensure the link is valid before registering
-    if (matcher.validationCallback) {
-      matcher.validationCallback(uri, isValid => {
-        // Discard link if the line has already changed
-        if (this._rowsTimeoutId) {
-          return;
         }
-        if (isValid) {
+        break;
-          this._addLink(offset + index, rowIndex, uri, matcher, fg);
+      }
-        }
-      });
-    } else {
-      this._addLink(offset + index, rowIndex, uri, matcher, fg);
-    }
 
-    // Recursively check for links in the rest of the text
+      // Get index, match.index is for the outer match which includes negated chars
-    const remainingStartIndex = index + uri.length;
+      // therefore we cannot use match.index directly, instead we search the position
-    const remainingText = text.substr(remainingStartIndex);
+      // of the match group in text again
-    if (remainingText.length > 0) {
+      // also correct regex and string search offsets for the next loop run
-      this._doLinkifyRow(rowIndex, remainingText, matcher, offset + remainingStartIndex);
+      stringIndex = text.indexOf(uri, stringIndex + 1);
+      rex.lastIndex = stringIndex + uri.length;
+
+      // get the buffer index as [absolute row, col] for the match
+      const bufferIndex = this._terminal.buffer.stringIndexToBufferIndex(rowIndex, stringIndex);
+
+      const line = this._terminal.buffer.lines.get(bufferIndex[0]);
+      const char = line.get(bufferIndex[1]);
+      let fg: number | undefined;
+      if (char) {
+        const attr: number = char[CHAR_DATA_ATTR_INDEX];
+        fg = (attr >> 9) & 0x1ff;
+      }
+
+      if (matcher.validationCallback) {
+        matcher.validationCallback(uri, isValid => {
+          // Discard link if the line has already changed
+          if (this._rowsTimeoutId) {
+            return;
+          }
+          if (isValid) {
+            this._addLink(bufferIndex[1], bufferIndex[0] - this._terminal.buffer.ydisp, uri, matcher, fg);
+          }
+        });
+      } else {
+        this._addLink(bufferIndex[1], bufferIndex[0] - this._terminal.buffer.ydisp, uri, matcher, fg);
+      }
     }
   }
 
@@ -255,10 +256,11 @@ export class Linkifier extends EventEmitter implements ILinkifier {
    * @param fg The link color for hover event.
    */
   private _addLink(x: number, y: number, uri: string, matcher: ILinkMatcher, fg: number): void {
+    const width = getStringCellWidth(uri);
     const x1 = x % this._terminal.cols;
     const y1 = y + Math.floor(x / this._terminal.cols);
-    let x2 = (x1 + uri.length) % this._terminal.cols;
+    let x2 = (x1 + width) % this._terminal.cols;
-    let y2 = y1 + Math.floor((x1 + uri.length) / this._terminal.cols);
+    let y2 = y1 + Math.floor((x1 + width) / this._terminal.cols);
     if (x2 === 0) {
       x2 = this._terminal.cols;
       y2--;

src/SelectionManager.ts

@@ -3,11 +3,12 @@
  * @license MIT
  */
 
-import { ITerminal, ISelectionManager, IBuffer, CharData, XtermListener, IBufferLine } from './Types';
+import { ITerminal, ISelectionManager, IBuffer, CharData, IBufferLine } from './Types';
+import { XtermListener } from './common/Types';
 import { MouseHelper } from './utils/MouseHelper';
 import * as Browser from './shared/utils/Browser';
 import { CharMeasure } from './ui/CharMeasure';
-import { EventEmitter } from './EventEmitter';
+import { EventEmitter } from './common/EventEmitter';
 import { SelectionModel } from './SelectionModel';
 import { CHAR_DATA_WIDTH_INDEX, CHAR_DATA_CHAR_INDEX, CHAR_DATA_CODE_INDEX } from './Buffer';
 import { AltClickHandler } from './handlers/AltClickHandler';

src/Terminal.test.ts

@@ -26,7 +26,7 @@ describe('term.js addons', () => {
 
   beforeEach(() => {
     term = new TestTerminal(termOptions);
-    term.refresh = () => {};
+    term.refresh = () => { };
     (<any>term).renderer = new MockRenderer();
     term.viewport = new MockViewport();
     (<any>term)._compositionHelper = new MockCompositionHelper();
@@ -37,8 +37,8 @@ describe('term.js addons', () => {
     };
     (<any>term).element = {
       classList: {
-        toggle: () => {},
+        toggle: () => { },
-        remove: () => {}
+        remove: () => { }
       }
     };
   });
@@ -68,24 +68,142 @@ describe('term.js addons', () => {
     });
   });
 
+  describe('on', () => {
+    beforeEach(() => {
+      term.on('key', () => { });
+      term.on('keypress', () => { });
+      term.on('keydown', () => { });
+    });
+
+    describe('data', () => {
+      it('should emit a data event', (done) => {
+        term.on('data', () => {
+          done();
+        });
+
+        term.handler('fake');
+      });
+    });
+
+    describe(`keypress (including 'key' event)`, () => {
+      it('should receive a string and event object', (done) => {
+        let steps = 0;
+
+        const finish = () => {
+          if ((++steps) === 2) {
+            done();
+          }
+        };
+
+        const evKeyPress = <KeyboardEvent>{
+          preventDefault: () => { },
+          stopPropagation: () => { },
+          type: 'keypress',
+          keyCode: 13
+        };
+
+        term.on('keypress', (key, event) => {
+          assert.equal(typeof key, 'string');
+          expect(event).to.be.an.instanceof(Object);
+          finish();
+        });
+
+        term.on('key', (key, event) => {
+          assert.equal(typeof key, 'string');
+          expect(event).to.be.an.instanceof(Object);
+          finish();
+        });
+
+        term.keyPress(evKeyPress);
+      });
+    });
+
+    describe(`keydown (including 'key' event)`, () => {
+      it(`should receive an event object for 'keydown' and a string and event object for 'key'`, (done) => {
+        let steps = 0;
+
+        const finish = () => {
+          if ((++steps) === 2) {
+            done();
+          }
+        };
+
+        const evKeyDown = <KeyboardEvent>{
+          preventDefault: () => { },
+          stopPropagation: () => { },
+          type: 'keydown',
+          keyCode: 13
+        };
+
+        term.on('keydown', (event) => {
+          expect(event).to.be.an.instanceof(Object);
+          finish();
+        });
+
+        term.on('key', (key, event) => {
+          assert.equal(typeof key, 'string');
+          expect(event).to.be.an.instanceof(Object);
+          finish();
+        });
+
+        term.keyDown(evKeyDown);
+      });
+    });
+
+    describe('resize', () => {
+      it('should receive an object: {cols: number, rows: number}', (done) => {
+        term.on('resize', (data) => {
+          expect(data).to.have.keys(['cols', 'rows']);
+          assert.equal(typeof data.cols, 'number');
+          assert.equal(typeof data.rows, 'number');
+          done();
+        });
+
+        term.resize(1, 1);
+      });
+    });
+
+    describe('scroll', () => {
+      it('should receive a number', (done) => {
+        term.on('scroll', (ydisp) => {
+          assert.equal(typeof ydisp, 'number');
+          done();
+        });
+
+        term.scroll();
+      });
+    });
+
+    describe('title', () => {
+      it('should receive a string', (done) => {
+        term.on('title', (title) => {
+          assert.equal(typeof title, 'string');
+          done();
+        });
+
+        term.handleTitle('title');
+      });
+    });
+  });
+
   describe('attachCustomKeyEventHandler', () => {
     const evKeyDown = <KeyboardEvent>{
-      preventDefault: () => {},
+      preventDefault: () => { },
-      stopPropagation: () => {},
+      stopPropagation: () => { },
       type: 'keydown',
       keyCode: 77
     };
     const evKeyPress = <KeyboardEvent>{
-      preventDefault: () => {},
+      preventDefault: () => { },
-      stopPropagation: () => {},
+      stopPropagation: () => { },
       type: 'keypress',
       keyCode: 77
     };
 
     beforeEach(() => {
-      term.handler = () => {};
+      term.handler = () => { };
-      term.showCursor = () => {};
+      term.showCursor = () => { };
-      term.clearSelection = () => {};
+      term.clearSelection = () => { };
     });
 
     it('should process the keydown/keypress event based on what the handler returns', () => {
@@ -305,8 +423,8 @@ describe('term.js addons', () => {
           type: 'keydown',
           key: 'a',
           keyCode: 65,
-          preventDefault: () => {},
+          preventDefault: () => { },
-          stopPropagation: () => {}
+          stopPropagation: () => { }
         };
 
         term.buffer.ydisp = 0;
@@ -473,9 +591,9 @@ describe('term.js addons', () => {
     let evKeyPress: any;
 
     beforeEach(() => {
-      term.handler = () => {};
+      term.handler = () => { };
-      term.showCursor = () => {};
+      term.showCursor = () => { };
-      term.clearSelection = () => {};
+      term.clearSelection = () => { };
       // term.compositionHelper = {
       //   isComposing: false,
       //   keydown: {
@@ -485,15 +603,15 @@ describe('term.js addons', () => {
       //   }
       // };
       evKeyDown = {
-        preventDefault: () => {},
+        preventDefault: () => { },
-        stopPropagation: () => {},
+        stopPropagation: () => { },
         type: 'keydown',
         altKey: null,
         keyCode: null
       };
       evKeyPress = {
-        preventDefault: () => {},
+        preventDefault: () => { },
-        stopPropagation: () => {},
+        stopPropagation: () => { },
         type: 'keypress',
         altKey: null,
         charCode: null,

src/Terminal.ts

@@ -27,7 +27,7 @@ import { IRenderer } from './renderer/Types';
 import { BufferSet } from './BufferSet';
 import { Buffer, MAX_BUFFER_SIZE, DEFAULT_ATTR, NULL_CELL_CODE, NULL_CELL_WIDTH, NULL_CELL_CHAR } from './Buffer';
 import { CompositionHelper } from './CompositionHelper';
-import { EventEmitter } from './EventEmitter';
+import { EventEmitter } from './common/EventEmitter';
 import { Viewport } from './Viewport';
 import { rightClickHandler, moveTextAreaUnderMouseCursor, pasteHandler, copyHandler } from './handlers/Clipboard';
 import { C0 } from './common/data/EscapeSequences';

src/Types.ts

@@ -7,11 +7,10 @@ import { Terminal as PublicTerminal, ITerminalOptions as IPublicTerminalOptions,
 import { IColorSet, IRenderer } from './renderer/Types';
 import { IMouseZoneManager } from './ui/Types';
 import { ICharset } from './core/Types';
+import { ICircularList } from './common/Types';
 
 export type CustomKeyEventHandler = (event: KeyboardEvent) => boolean;
 
-export type XtermListener = (...args: any[]) => void;
-
 export type CharData = [number, string, number, number];
 export type LineData = CharData[];
 
@@ -20,6 +19,9 @@ export type LinkMatcherValidationCallback = (uri: string, callback: (isValid: bo
 
 export type CharacterJoinerHandler = (text: string) => [number, number][];
 
+// BufferIndex denotes a position in the buffer: [rowIndex, colIndex]
+export type BufferIndex = [number, number];
+
 export const enum LinkHoverEventTypes {
   HOVER = 'linkhover',
   TOOLTIP = 'linktooltip',
@@ -266,6 +268,16 @@ export interface ITerminalOptions extends IPublicTerminalOptions {
   useFlowControl?: boolean;
 }
 
+export interface IBufferStringIteratorResult {
+  range: {first: number, last: number};
+  content: string;
+}
+
+export interface IBufferStringIterator {
+  hasNext(): boolean;
+  next(): IBufferStringIteratorResult;
+}
+
 export interface IBuffer {
   readonly lines: ICircularList<IBufferLine>;
   ydisp: number;
@@ -283,6 +295,8 @@ export interface IBuffer {
   getWrappedRangeForLine(y: number): { first: number, last: number };
   nextStop(x?: number): number;
   prevStop(x?: number): number;
+  stringIndexToBufferIndex(lineIndex: number, stringIndex: number): number[];
+  iterator(trimRight: boolean, startIndex?: number, endIndex?: number, startOverscan?: number, endOverscan?: number): IBufferStringIterator;
 }
 
 export interface IBufferSet extends IEventEmitter {
@@ -294,19 +308,6 @@ export interface IBufferSet extends IEventEmitter {
   activateAltBuffer(): void;
 }
 
-export interface ICircularList<T> extends IEventEmitter {
-  length: number;
-  maxLength: number;
-
-  get(index: number): T;
-  set(index: number, value: T): void;
-  push(value: T): void;
-  pop(): T;
-  splice(start: number, deleteCount: number, ...items: T[]): void;
-  trimStart(count: number): void;
-  shiftElements(start: number, count: number, offset: number): void;
-}
-
 export interface ISelectionManager {
   selectionText: string;
   selectionStart: [number, number];

src/Viewport.ts

@@ -22,6 +22,7 @@ export class Viewport extends Disposable implements IViewport {
   private _lastRecordedViewportHeight: number = 0;
   private _lastRecordedBufferHeight: number = 0;
   private _lastTouchY: number;
+  private _lastScrollTop: number = 0;
 
   // Stores a partial line amount when scrolling, this is used to keep track of how much of a line
   // is scrolled so we can "scroll" over partial lines and feel natural on touchpads. This is a
@@ -97,18 +98,36 @@ export class Viewport extends Disposable implements IViewport {
    * Updates dimensions and synchronizes the scroll area if necessary.
    */
   public syncScrollArea(): void {
+    // If buffer height changed
     if (this._lastRecordedBufferLength !== this._terminal.buffer.lines.length) {
-      // If buffer height changed
       this._lastRecordedBufferLength = this._terminal.buffer.lines.length;
       this._refresh();
-    } else if (this._lastRecordedViewportHeight !== (<any>this._terminal).renderer.dimensions.canvasHeight) {
+      return;
-      // If viewport height changed
+    }
+
+    // If viewport height changed
+    if (this._lastRecordedViewportHeight !== (<any>this._terminal).renderer.dimensions.canvasHeight) {
       this._refresh();
-    } else {
+      return;
-      // If size has changed, refresh viewport
+    }
-      if (this._terminal.renderer.dimensions.scaledCellHeight / window.devicePixelRatio !== this._currentRowHeight) {
+
-        this._refresh();
+    // If the buffer position doesn't match last scroll top
-      }
+    const newScrollTop = this._terminal.buffer.ydisp * this._currentRowHeight;
+    if (this._lastScrollTop !== newScrollTop) {
+      this._refresh();
+      return;
+    }
+
+    // If element's scroll top changed, this can happen when hiding the element
+    if (this._lastScrollTop !== this._viewportElement.scrollTop) {
+      this._refresh();
+      return;
+    }
+
+    // If row height changed
+    if (this._terminal.renderer.dimensions.scaledCellHeight / window.devicePixelRatio !== this._currentRowHeight) {
+      this._refresh();
+      return;
     }
   }
 
@@ -118,6 +137,9 @@ export class Viewport extends Disposable implements IViewport {
    * @param ev The scroll event.
    */
   private _onScroll(ev: Event): void {
+    // Record current scroll top position
+    this._lastScrollTop = this._viewportElement.scrollTop;
+
     // Don't attempt to scroll if the element is not visible, otherwise scrollTop will be corrupt
     // which causes the terminal to scroll the buffer to the top
     if (!this._viewportElement.offsetParent) {
@@ -130,8 +152,7 @@ export class Viewport extends Disposable implements IViewport {
       return;
     }
 
-
+    const newRow = Math.round(this._lastScrollTop / this._currentRowHeight);
-    const newRow = Math.round(this._viewportElement.scrollTop / this._currentRowHeight);
     const diff = newRow - this._terminal.buffer.ydisp;
     this._terminal.scrollLines(diff, true);
   }

src/addons/attach/tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6",
+    ],
     "rootDir": ".",
     "outDir": "../../../lib/addons/attach/",
     "sourceMap": true,

src/addons/fit/tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6",
+    ],
     "rootDir": ".",
     "outDir": "../../../lib/addons/fit/",
     "sourceMap": true,

src/addons/fullscreen/tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6",
+    ],
     "rootDir": ".",
     "outDir": "../../../lib/addons/fullscreen/",
     "sourceMap": true,

src/addons/search/Interfaces.ts

@@ -17,6 +17,18 @@ export interface ISearchAddonTerminal extends Terminal {
 }
 
 export interface ISearchHelper {
-  findNext(term: string): boolean;
+  findNext(term: string, searchOptions: ISearchOptions): boolean;
-  findPrevious(term: string): boolean;
+  findPrevious(term: string, searchOptions: ISearchOptions): boolean;
+}
+
+export interface ISearchOptions {
+  regex?: boolean;
+  wholeWord?: boolean;
+  caseSensitive?: boolean;
+}
+
+export interface ISearchResult {
+  term: string;
+  col: number;
+  row: number;
 }

src/addons/search/SearchHelper.ts

@@ -3,13 +3,8 @@
  * @license MIT
  */
 
-import { ISearchHelper, ISearchAddonTerminal } from './Interfaces';
+import { ISearchHelper, ISearchAddonTerminal, ISearchOptions, ISearchResult } from './Interfaces';
-
+const nonWordCharacters = ' ~!@#$%^&*()_+`-=[]{}|\;:"\',./<>?';
-interface ISearchResult {
-  term: string;
-  col: number;
-  row: number;
-}
 
 /**
  * A class that knows how to search the terminal and how to display the results.
@@ -19,16 +14,16 @@ export class SearchHelper implements ISearchHelper {
     // TODO: Search for multiple instances on 1 line
     // TODO: Don't use the actual selection, instead use a "find selection" so multiple instances can be highlighted
     // TODO: Highlight other instances in the viewport
-    // TODO: Support regex, case sensitivity, etc.
   }
 
   /**
    * Find the next instance of the term, then scroll to and select it. If it
    * doesn't exist, do nothing.
    * @param term Tne search term.
+   * @param searchOptions Search options.
    * @return Whether a result was found.
    */
-  public findNext(term: string): boolean {
+  public findNext(term: string, searchOptions?: ISearchOptions): boolean {
     if (!term || term.length === 0) {
       return false;
     }
@@ -43,7 +38,7 @@ export class SearchHelper implements ISearchHelper {
 
     // Search from ydisp + 1 to end
     for (let y = startRow + 1; y < this._terminal._core.buffer.ybase + this._terminal.rows; y++) {
-      result = this._findInLine(term, y);
+      result = this._findInLine(term, y, searchOptions);
       if (result) {
         break;
       }
@@ -52,7 +47,7 @@ export class SearchHelper implements ISearchHelper {
     // Search from the top to the current ydisp
     if (!result) {
       for (let y = 0; y < startRow; y++) {
-        result = this._findInLine(term, y);
+        result = this._findInLine(term, y, searchOptions);
         if (result) {
           break;
         }
@@ -67,9 +62,10 @@ export class SearchHelper implements ISearchHelper {
    * Find the previous instance of the term, then scroll to and select it. If it
    * doesn't exist, do nothing.
    * @param term Tne search term.
+   * @param searchOptions Search options.
    * @return Whether a result was found.
    */
-  public findPrevious(term: string): boolean {
+  public findPrevious(term: string, searchOptions?: ISearchOptions): boolean {
     if (!term || term.length === 0) {
       return false;
     }
@@ -84,7 +80,7 @@ export class SearchHelper implements ISearchHelper {
 
     // Search from ydisp + 1 to end
     for (let y = startRow - 1; y >= 0; y--) {
-      result = this._findInLine(term, y);
+      result = this._findInLine(term, y, searchOptions);
       if (result) {
         break;
       }
@@ -93,7 +89,7 @@ export class SearchHelper implements ISearchHelper {
     // Search from the top to the current ydisp
     if (!result) {
       for (let y = this._terminal._core.buffer.ybase + this._terminal.rows - 1; y > startRow; y--) {
-        result = this._findInLine(term, y);
+        result = this._findInLine(term, y, searchOptions);
         if (result) {
           break;
         }
@@ -105,17 +101,59 @@ export class SearchHelper implements ISearchHelper {
   }
 
   /**
-   * Searches a line for a search term.
+   * A found substring is a whole word if it doesn't have an alphanumeric character directly adjacent to it.
+   * @param searchIndex starting indext of the potential whole word substring
+   * @param line entire string in which the potential whole word was found
+   * @param term the substring that starts at searchIndex
+   */
+  private _isWholeWord(searchIndex: number, line: string, term: string): boolean {
+    return (((searchIndex === 0) || (nonWordCharacters.indexOf(line[searchIndex - 1]) !== -1)) &&
+         (((searchIndex + term.length) === line.length) || (nonWordCharacters.indexOf(line[searchIndex + term.length]) !== -1)));
+  }
+
+  /**
+   * Searches a line for a search term. Takes the provided terminal line and searches the text line, which may contain
+   * subsequent terminal lines if the text is wrapped. If the provided line number is part of a wrapped text line that
+   * started on an earlier line then it is skipped since it will be properly searched when the terminal line that the
+   * text starts on is searched.
    * @param term Tne search term.
    * @param y The line to search.
+   * @param searchOptions Search options.
    * @return The search result if it was found.
    */
-  private _findInLine(term: string, y: number): ISearchResult {
+  protected _findInLine(term: string, y: number, searchOptions: ISearchOptions = {}): ISearchResult {
-    const lowerStringLine = this._terminal._core.buffer.translateBufferLineToString(y, true).toLowerCase();
+    if (this._terminal._core.buffer.lines.get(y).isWrapped) {
-    const lowerTerm = term.toLowerCase();
+      return;
-    let searchIndex = lowerStringLine.indexOf(lowerTerm);
+    }
+
+    const stringLine = this.translateBufferLineToStringWithWrap(y, true);
+    const searchStringLine = searchOptions.caseSensitive ? stringLine : stringLine.toLowerCase();
+    const searchTerm = searchOptions.caseSensitive ? term : term.toLowerCase();
+    let searchIndex = -1;
+
+    if (searchOptions.regex) {
+      const searchRegex = RegExp(searchTerm, 'g');
+      const foundTerm = searchRegex.exec(searchStringLine);
+      if (foundTerm && foundTerm[0].length > 0) {
+        searchIndex = searchRegex.lastIndex - foundTerm[0].length;
+        term = foundTerm[0];
+      }
+    } else {
+      searchIndex = searchStringLine.indexOf(searchTerm);
+    }
+
     if (searchIndex >= 0) {
+      // Adjust the row number and search index if needed since a "line" of text can span multiple rows
+      if (searchIndex >= this._terminal.cols) {
+        y += Math.floor(searchIndex / this._terminal.cols);
+        searchIndex = searchIndex % this._terminal.cols;
+      }
+      if (searchOptions.wholeWord && !this._isWholeWord(searchIndex, searchStringLine, term)) {
+        return;
+      }
+
       const line = this._terminal._core.buffer.lines.get(y);
+
       for (let i = 0; i < searchIndex; i++) {
         const charData = line.get(i);
         // Adjust the searchIndex to normalize emoji into single chars
@@ -138,6 +176,28 @@ export class SearchHelper implements ISearchHelper {
     }
   }
 
+  /**
+   * Translates a buffer line to a string, including subsequent lines if they are wraps.
+   * Wide characters will count as two columns in the resulting string. This
+   * function is useful for getting the actual text underneath the raw selection
+   * position.
+   * @param line The line being translated.
+   * @param trimRight Whether to trim whitespace to the right.
+   */
+  public translateBufferLineToStringWithWrap(lineIndex: number, trimRight: boolean): string {
+    let lineString = '';
+    let lineWrapsToNext: boolean;
+
+    do {
+      const nextLine = this._terminal._core.buffer.lines.get(lineIndex + 1);
+      lineWrapsToNext = nextLine ? nextLine.isWrapped : false;
+      lineString += this._terminal._core.buffer.translateBufferLineToString(lineIndex, !lineWrapsToNext && trimRight);
+      lineIndex++;
+    } while (lineWrapsToNext);
+
+    return lineString;
+  }
+
   /**
    * Selects and scrolls to a result.
    * @param result The result to select.

src/addons/search/search.test.ts

@@ -6,17 +6,19 @@
 import { assert, expect } from 'chai';
 import * as search from './search';
 import { SearchHelper } from './SearchHelper';
-import { ISearchHelper } from './Interfaces';
+import { ISearchOptions, ISearchResult } from './Interfaces';
 
 
 class MockTerminalPlain {}
 
 class MockTerminal {
   private _core: any;
-  public searchHelper: ISearchHelper;
+  public searchHelper: TestSearchHelper;
+  public cols: number;
   constructor(options: any) {
     this._core = new (require('../../../lib/Terminal').Terminal)(options);
-    this.searchHelper = new SearchHelper(this as any);
+    this.searchHelper = new TestSearchHelper(this as any);
+    this.cols = options.cols;
   }
   get core(): any {
     return this._core;
@@ -26,7 +28,13 @@ class MockTerminal {
   }
 }
 
-describe('search addon', function(): void {
+class TestSearchHelper extends SearchHelper {
+  public findInLine(term: string, y: number, searchOptions?: ISearchOptions): ISearchResult {
+    return this._findInLine(term, y, searchOptions);
+  }
+}
+
+describe('search addon', () => {
   describe('apply', () => {
     it('should register findNext and findPrevious', () => {
       search.apply(<any>MockTerminalPlain);
@@ -34,16 +42,207 @@ describe('search addon', function(): void {
       assert.equal(typeof (<any>MockTerminalPlain).prototype.findPrevious, 'function');
     });
   });
-  it('Searchhelper - should find correct position', function(): void {
+  describe('find', () => {
-    search.apply(<any>MockTerminal);
+    it('Searchhelper - should find correct position', () => {
-    const term = new MockTerminal({cols: 20, rows: 3});
+      search.apply(<any>MockTerminal);
-    term.core.write('Hello World\r\ntest\n123....hello');
+      const term = new MockTerminal({cols: 20, rows: 3});
-    term.pushWriteData();
+      term.core.write('Hello World\r\ntest\n123....hello');
-    const hello0 = (term.searchHelper as any)._findInLine('Hello', 0);
+      term.pushWriteData();
-    const hello1 = (term.searchHelper as any)._findInLine('Hello', 1);
+      const hello0 = term.searchHelper.findInLine('Hello', 0);
-    const hello2 = (term.searchHelper as any)._findInLine('Hello', 2);
+      const hello1 = term.searchHelper.findInLine('Hello', 1);
-    expect(hello0).eql({col: 0, row: 0, term: 'Hello'});
+      const hello2 = term.searchHelper.findInLine('Hello', 2);
-    expect(hello1).eql(undefined);
+      expect(hello0).eql({col: 0, row: 0, term: 'Hello'});
-    expect(hello2).eql({col: 11, row: 2, term: 'Hello'});
+      expect(hello1).eql(undefined);
+      expect(hello2).eql({col: 11, row: 2, term: 'Hello'});
+    });
+    it('should find search term accross line wrap', () => {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 10, rows: 5});
+      term.core.write('texttextHellotext\r\n');
+      term.core.write('texttexttextHellotext         goodbye');
+      term.pushWriteData();
+      /*
+        texttextHe
+        llotext
+        texttextte
+        xtHellotex
+        t         (these spaces included intentionally)
+        goodbye
+      */
+
+      const hello0 = term.searchHelper.findInLine('Hello', 0);
+      const hello1 = term.searchHelper.findInLine('Hello', 1);
+      const hello2 = term.searchHelper.findInLine('Hello', 2);
+      const hello3 = term.searchHelper.findInLine('Hello', 3);
+      const llo = term.searchHelper.findInLine('llo', 1);
+      const goodbye = term.searchHelper.findInLine('goodbye', 2);
+      expect(hello0).eql({col: 8, row: 0, term: 'Hello'});
+      expect(hello1).eql(undefined);
+      expect(hello2).eql({col: 2, row: 3, term: 'Hello'});
+      expect(hello3).eql(undefined);
+      expect(llo).eql(undefined);
+      expect(goodbye).eql({col: 0, row: 5, term: 'goodbye'});
+    });
+    it('should respect search regex', () => {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 10, rows: 4});
+      term.core.write('abcdefghijklmnopqrstuvwxyz\r\n~/dev  ');
+      /*
+        abcdefghij
+        klmnopqrst
+        uvwxyz
+        ~/dev
+      */
+      term.pushWriteData();
+      const searchOptions = {
+        regex: true,
+        wholeWord: false,
+        caseSensitive: false
+      };
+      const hello0 = term.searchHelper.findInLine('dee*', 0, searchOptions);
+      const hello1 = term.searchHelper.findInLine('jkk*', 0, searchOptions);
+      const hello2 = term.searchHelper.findInLine('mnn*', 1, searchOptions);
+      const tilda0 = term.searchHelper.findInLine('^~', 3, searchOptions);
+      const tilda1 = term.searchHelper.findInLine('^[~]', 3, searchOptions);
+      const tilda2 = term.searchHelper.findInLine('^\\~', 3, searchOptions);
+      expect(hello0).eql({col: 3, row: 0, term: 'de'});
+      expect(hello1).eql({col: 9, row: 0, term: 'jk'});
+      expect(hello2).eql(undefined);
+      expect(tilda0).eql({col: 0, row: 3, term: '~'});
+      expect(tilda1).eql({col: 0, row: 3, term: '~'});
+      expect(tilda2).eql({col: 0, row: 3, term: '~'});
+    });
+    it('should not select empty lines', () => {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 20, rows: 3});
+      term.core.write('    ');
+      term.pushWriteData();
+      const line = term.searchHelper.findInLine('^.*$', 0, { regex: true });
+      expect(line).eql(undefined);
+    });
+    it('should respect case sensitive', function(): void {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 20, rows: 4});
+      term.core.write('Hello World\r\n123....hello\r\nmoreTestHello');
+      term.pushWriteData();
+      const searchOptions = {
+        regex: false,
+        wholeWord: false,
+        caseSensitive: true
+      };
+      const hello0 = term.searchHelper.findInLine('Hello', 0, searchOptions);
+      const hello1 = term.searchHelper.findInLine('Hello', 1, searchOptions);
+      const hello2 = term.searchHelper.findInLine('Hello', 2, searchOptions);
+      expect(hello0).eql({col: 0, row: 0, term: 'Hello'});
+      expect(hello1).eql(undefined);
+      expect(hello2).eql({col: 8, row: 2, term: 'Hello'});
+    });
+    it('should respect case sensitive + regex', function(): void {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 20, rows: 4});
+      term.core.write('hellohello\r\nHelloHello');
+      term.pushWriteData();
+
+      /**
+       * hellohello
+       * HelloHello
+       */
+
+      const searchOptions = {
+        regex: true,
+        wholeWord: false,
+        caseSensitive: true
+      };
+      const hello0 = term.searchHelper.findInLine('Hello', 0, searchOptions);
+      const hello1 = term.searchHelper.findInLine('Hello$', 0, searchOptions);
+      const hello2 = term.searchHelper.findInLine('Hello', 1, searchOptions);
+      const hello3 = term.searchHelper.findInLine('Hello$', 1, searchOptions);
+      expect(hello0).eql(undefined);
+      expect(hello1).eql(undefined);
+      expect(hello2).eql({col: 0, row: 1, term: 'Hello'});
+      expect(hello3).eql({col: 5, row: 1, term: 'Hello'});
+    });
+    it('should respect whole-word search option', function(): void {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 20, rows: 5});
+      term.core.write('Hello World\r\nWorld Hello\r\nWorldHelloWorld\r\nHelloWorld\r\nWorldHello');
+      term.pushWriteData();
+      const searchOptions = {
+        regex: false,
+        wholeWord: true,
+        caseSensitive: false
+      };
+      const hello0 = term.searchHelper.findInLine('Hello', 0, searchOptions);
+      const hello1 = term.searchHelper.findInLine('Hello', 1, searchOptions);
+      const hello2 = term.searchHelper.findInLine('Hello', 2, searchOptions);
+      const hello3 = term.searchHelper.findInLine('Hello', 3, searchOptions);
+      const hello4 = term.searchHelper.findInLine('Hello', 4, searchOptions);
+      expect(hello0).eql({col: 0, row: 0, term: 'Hello'});
+      expect(hello1).eql({col: 6, row: 1, term: 'Hello'});
+      expect(hello2).eql(undefined);
+      expect(hello3).eql(undefined);
+      expect(hello4).eql(undefined);
+    });
+    it('should respect whole-word + case sensitive search options', function(): void {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 20, rows: 5});
+      term.core.write('Hello World\r\nHelloWorld');
+      term.pushWriteData();
+      const searchOptions = {
+        regex: false,
+        wholeWord: true,
+        caseSensitive: true
+      };
+      const hello0 = term.searchHelper.findInLine('Hello', 0, searchOptions);
+      const hello1 = term.searchHelper.findInLine('hello', 0, searchOptions);
+      const hello2 = term.searchHelper.findInLine('Hello', 1, searchOptions);
+      const hello3 = term.searchHelper.findInLine('hello', 1, searchOptions);
+      expect(hello0).eql({col: 0, row: 0, term: 'Hello'});
+      expect(hello1).eql(undefined);
+      expect(hello2).eql(undefined);
+      expect(hello3).eql(undefined);
+    });
+    it('should respect whole-word + regex search options', function(): void {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 20, rows: 5});
+      term.core.write('Hello World Hello\r\nHelloWorldHello');
+      term.pushWriteData();
+      const searchOptions = {
+        regex: true,
+        wholeWord: true,
+        caseSensitive: false
+      };
+      const hello0 = term.searchHelper.findInLine('Hello', 0, searchOptions);
+      const hello1 = term.searchHelper.findInLine('Hello$', 0, searchOptions);
+      const hello2 = term.searchHelper.findInLine('Hello', 1, searchOptions);
+      const hello3 = term.searchHelper.findInLine('Hello$', 1, searchOptions);
+      expect(hello0).eql({col: 0, row: 0, term: 'hello'});
+      expect(hello1).eql({col: 12, row: 0, term: 'hello'});
+      expect(hello2).eql(undefined);
+      expect(hello3).eql(undefined);
+    });
+    it('should respect all search options', function(): void {
+      search.apply(<any>MockTerminal);
+      const term = new MockTerminal({cols: 20, rows: 5});
+      term.core.write('Hello World Hello\r\nHelloWorldHello');
+      term.pushWriteData();
+      const searchOptions = {
+        regex: true,
+        wholeWord: true,
+        caseSensitive: true
+      };
+      const hello0 = term.searchHelper.findInLine('Hello', 0, searchOptions);
+      const hello1 = term.searchHelper.findInLine('Hello$', 0, searchOptions);
+      const hello2 = term.searchHelper.findInLine('hello', 0, searchOptions);
+      const hello3 = term.searchHelper.findInLine('hello$', 0, searchOptions);
+      const hello4 = term.searchHelper.findInLine('hello', 1, searchOptions);
+      const hello5 = term.searchHelper.findInLine('hello$', 1, searchOptions);
+      expect(hello0).eql({col: 0, row: 0, term: 'Hello'});
+      expect(hello1).eql({col: 12, row: 0, term: 'Hello'});
+      expect(hello2).eql(undefined);
+      expect(hello3).eql(undefined);
+      expect(hello4).eql(undefined);
+      expect(hello5).eql(undefined);
+    });
   });
 });

src/addons/search/search.ts

@@ -5,42 +5,44 @@
 
 import { SearchHelper } from './SearchHelper';
 import { Terminal } from 'xterm';
-import { ISearchAddonTerminal } from './Interfaces';
+import { ISearchAddonTerminal, ISearchOptions } from './Interfaces';
 
 /**
  * Find the next instance of the term, then scroll to and select it. If it
  * doesn't exist, do nothing.
  * @param term Tne search term.
+ * @param searchOptions Search options
  * @return Whether a result was found.
  */
-export function findNext(terminal: Terminal, term: string): boolean {
+export function findNext(terminal: Terminal, term: string, searchOptions: ISearchOptions = {}): boolean {
   const addonTerminal = <ISearchAddonTerminal>terminal;
   if (!addonTerminal.__searchHelper) {
     addonTerminal.__searchHelper = new SearchHelper(addonTerminal);
   }
-  return addonTerminal.__searchHelper.findNext(term);
+  return addonTerminal.__searchHelper.findNext(term, searchOptions);
 }
 
 /**
  * Find the previous instance of the term, then scroll to and select it. If it
  * doesn't exist, do nothing.
  * @param term Tne search term.
+ * @param searchOptions Search options
  * @return Whether a result was found.
  */
-export function findPrevious(terminal: Terminal, term: string): boolean {
+export function findPrevious(terminal: Terminal, term: string, searchOptions: ISearchOptions): boolean {
   const addonTerminal = <ISearchAddonTerminal>terminal;
   if (!addonTerminal.__searchHelper) {
     addonTerminal.__searchHelper = new SearchHelper(addonTerminal);
   }
-  return addonTerminal.__searchHelper.findPrevious(term);
+  return addonTerminal.__searchHelper.findPrevious(term, searchOptions);
 }
 
 export function apply(terminalConstructor: typeof Terminal): void {
-  (<any>terminalConstructor.prototype).findNext = function(term: string): boolean {
+  (<any>terminalConstructor.prototype).findNext = function(term: string, searchOptions: ISearchOptions): boolean {
-    return findNext(this, term);
+    return findNext(this, term, searchOptions);
   };
 
-  (<any>terminalConstructor.prototype).findPrevious = function(term: string): boolean {
+  (<any>terminalConstructor.prototype).findPrevious = function(term: string, searchOptions: ISearchOptions): boolean {
-    return findPrevious(this, term);
+    return findPrevious(this, term, searchOptions);
   };
 }

src/addons/search/tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6",
+    ],
     "rootDir": ".",
     "outDir": "../../../lib/addons/search/",
     "sourceMap": true,

src/addons/terminado/tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6",
+    ],
     "rootDir": ".",
     "outDir": "../../../lib/addons/terminado/",
     "sourceMap": true,

src/addons/webLinks/tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6",
+    ],
     "rootDir": ".",
     "outDir": "../../../lib/addons/webLinks/",
     "sourceMap": true,

src/addons/winptyCompat/tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6",
+    ],
     "rootDir": ".",
     "outDir": "../../../lib/addons/winptyCompat/",
     "sourceMap": true,

src/addons/zmodem/tsconfig.json

@@ -2,6 +2,10 @@
   "compilerOptions": {
     "module": "commonjs",
     "target": "es5",
+    "lib": [
+      "dom",
+      "es6",
+    ],
     "rootDir": ".",
     "outDir": "../../../lib/addons/zmodem/",
     "sourceMap": true,

src/common/CircularList.ts

@@ -3,15 +3,15 @@
  * @license MIT
  */
 
-import { EventEmitter } from '../EventEmitter';
+import { EventEmitter } from './EventEmitter';
-import { ICircularList } from '../Types';
+import { ICircularList } from './Types';
 
 /**
  * Represents a circular list; a list with a maximum size that wraps around when push is called,
  * overriding values at the start of the list.
  */
 export class CircularList<T> extends EventEmitter implements ICircularList<T> {
-  protected _array: T[];
+  protected _array: (T | undefined)[];
   private _startIndex: number;
   private _length: number;
 
@@ -36,7 +36,7 @@ export class CircularList<T> extends EventEmitter implements ICircularList<T> {
 
     // Reconstruct array, starting at index 0. Only transfer values from the
     // indexes 0 to length.
-    const newArray = new Array<T>(newMaxLength);
+    const newArray = new Array<T | undefined>(newMaxLength);
     for (let i = 0; i < Math.min(newMaxLength, this.length); i++) {
       newArray[i] = this._array[this._getCyclicIndex(i)];
     }
@@ -66,7 +66,7 @@ export class CircularList<T> extends EventEmitter implements ICircularList<T> {
    * @param index The index of the value to get.
    * @return The value corresponding to the index.
    */
-  public get(index: number): T {
+  public get(index: number): T | undefined {
     return this._array[this._getCyclicIndex(index)];
   }
 
@@ -78,7 +78,7 @@ export class CircularList<T> extends EventEmitter implements ICircularList<T> {
    * @param index The index to set.
    * @param value The value to set.
    */
-  public set(index: number, value: T): void {
+  public set(index: number, value: T | undefined): void {
     this._array[this._getCyclicIndex(index)] = value;
   }
 
@@ -104,7 +104,7 @@ export class CircularList<T> extends EventEmitter implements ICircularList<T> {
    * Removes and returns the last value on the list.
    * @return The popped value.
    */
-  public pop(): T {
+  public pop(): T | undefined {
     return this._array[this._getCyclicIndex(this._length-- - 1)];
   }
 

src/common/EventEmitter.ts

@@ -5,7 +5,7 @@
 
 import { XtermListener } from './Types';
 import { IEventEmitter, IDisposable } from 'xterm';
-import { Disposable } from './common/Lifecycle';
+import { Disposable } from './Lifecycle';
 
 export class EventEmitter extends Disposable implements IEventEmitter, IDisposable {
   private _events: {[type: string]: XtermListener[]};
@@ -30,14 +30,15 @@ export class EventEmitter extends Disposable implements IEventEmitter, IDisposab
   public addDisposableListener(type: string, handler: XtermListener): IDisposable {
     // TODO: Rename addDisposableEventListener to more easily disambiguate from Dom listener
     this.on(type, handler);
+    let disposed = false;
     return {
       dispose: () => {
-        if (!handler) {
+        if (disposed) {
           // Already disposed
           return;
         }
         this.off(type, handler);
-        handler = null;
+        disposed = true;
       }
     };
   }

src/common/Types.ts

@@ -3,6 +3,10 @@
  * @license MIT
  */
 
+import { IEventEmitter } from 'xterm';
+
+export type XtermListener = (...args: any[]) => void;
+
 /**
  * A keyboard event interface which does not depend on the DOM, KeyboardEvent implicitly extends
  * this event.
@@ -16,3 +20,16 @@ export interface IKeyboardEvent {
   key: string;
   type: string;
 }
+
+export interface ICircularList<T> extends IEventEmitter {
+  length: number;
+  maxLength: number;
+
+  get(index: number): T | undefined;
+  set(index: number, value: T): void;
+  push(value: T): void;
+  pop(): T | undefined;
+  splice(start: number, deleteCount: number, ...items: T[]): void;
+  trimStart(count: number): void;
+  shiftElements(start: number, count: number, offset: number): void;
+}

src/handlers/AltClickHandler.ts

@@ -3,7 +3,8 @@
  * @license MIT
  */
 
-import { ITerminal, ICircularList, IBufferLine } from '../Types';
+import { ITerminal, IBufferLine } from '../Types';
+import { ICircularList } from '../common/Types';
 import { C0 } from '../common/data/EscapeSequences';
 
 const enum Direction {

src/renderer/BaseRenderLayer.ts

@@ -5,7 +5,7 @@
 
 import { IRenderLayer, IColorSet, IRenderDimensions } from './Types';
 import { CharData, ITerminal } from '../Types';
-import { DIM_OPACITY, INVERTED_DEFAULT_COLOR } from './atlas/Types';
+import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, IGlyphIdentifier } from './atlas/Types';
 import BaseCharAtlas from './atlas/BaseCharAtlas';
 import { acquireCharAtlas } from './atlas/CharAtlasCache';
 import { CHAR_DATA_CHAR_INDEX } from '../Buffer';
@@ -22,6 +22,19 @@ export abstract class BaseRenderLayer implements IRenderLayer {
 
   protected _charAtlas: BaseCharAtlas;
 
+  /**
+   * An object that's reused when drawing glyphs in order to reduce GC.
+   */
+  private _currentGlyphIdentifier: IGlyphIdentifier = {
+    chars: '',
+    code: 0,
+    bg: 0,
+    fg: 0,
+    bold: false,
+    dim: false,
+    italic: false
+  };
+
   constructor(
     private _container: HTMLElement,
     id: string,
@@ -38,6 +51,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
 
   public dispose(): void {
     this._container.removeChild(this._canvas);
+    if (this._charAtlas) {
+      this._charAtlas.dispose();
+    }
   }
 
   private _initCanvas(): void {
@@ -245,9 +261,16 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     const drawInBrightColor = terminal.options.drawBoldTextInBrightColors && bold && fg < 8 && fg !== INVERTED_DEFAULT_COLOR;
 
     fg += drawInBrightColor ? 8 : 0;
+    this._currentGlyphIdentifier.chars = chars;
+    this._currentGlyphIdentifier.code = code;
+    this._currentGlyphIdentifier.bg = bg;
+    this._currentGlyphIdentifier.fg = fg;
+    this._currentGlyphIdentifier.bold = bold && terminal.options.enableBold;
+    this._currentGlyphIdentifier.dim = dim;
+    this._currentGlyphIdentifier.italic = italic;
     const atlasDidDraw = this._charAtlas && this._charAtlas.draw(
       this._ctx,
-      {chars, code, bg, fg, bold: bold && terminal.options.enableBold, dim, italic},
+      this._currentGlyphIdentifier,
       x * this._scaledCellWidth + this._scaledCharLeft,
       y * this._scaledCellHeight + this._scaledCharTop
     );

src/renderer/Renderer.ts

@@ -10,7 +10,7 @@ import { ColorManager } from './ColorManager';
 import { IRenderLayer, IColorSet, IRenderer, IRenderDimensions, ICharacterJoinerRegistry } from './Types';
 import { ITerminal, CharacterJoinerHandler } from '../Types';
 import { LinkRenderLayer } from './LinkRenderLayer';
-import { EventEmitter } from '../EventEmitter';
+import { EventEmitter } from '../common/EventEmitter';
 import { RenderDebouncer } from '../ui/RenderDebouncer';
 import { ScreenDprMonitor } from '../ui/ScreenDprMonitor';
 import { ITheme } from 'xterm';

src/renderer/atlas/BaseCharAtlas.ts

@@ -4,10 +4,13 @@
  */
 
 import { IGlyphIdentifier } from './Types';
+import { IDisposable } from 'xterm';
 
-export default abstract class BaseCharAtlas {
+export default abstract class BaseCharAtlas implements IDisposable {
   private _didWarmUp: boolean = false;
 
+  public dispose(): void { }
+
   /**
    * Perform any work needed to warm the cache before it can be used. May be called multiple times.
    * Implement _doWarmUp instead if you only want to get called once.

src/renderer/atlas/DynamicCharAtlas.ts

@@ -10,6 +10,7 @@ import BaseCharAtlas from './BaseCharAtlas';
 import { DEFAULT_ANSI_COLORS } from '../ColorManager';
 import { clearColor } from '../../shared/atlas/CharAtlasGenerator';
 import LRUMap from './LRUMap';
+import { isFirefox, isSafari } from '../../shared/utils/Browser';
 
 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -29,14 +30,29 @@ const TRANSPARENT_COLOR = {
 // cache.
 const FRAME_CACHE_DRAW_LIMIT = 100;
 
+/**
+ * The number of milliseconds to wait before generating the ImageBitmap, this is to debounce/batch
+ * the operation as window.createImageBitmap is asynchronous.
+ */
+const GLYPH_BITMAP_COMMIT_DELAY = 100;
+
 interface IGlyphCacheValue {
   index: number;
   isEmpty: boolean;
+  inBitmap: boolean;
 }
 
-function getGlyphCacheKey(glyph: IGlyphIdentifier): string {
+function getGlyphCacheKey(glyph: IGlyphIdentifier): number {
-  const styleFlags = (glyph.bold ? 0 : 4) + (glyph.dim ? 0 : 2) + (glyph.italic ? 0 : 1);
+  // Note that this only returns a valid key when code < 256
-  return `${glyph.bg}_${glyph.fg}_${styleFlags}${glyph.chars}`;
+  // Layout:
+  // 0b00000000000000000000000000000001: italic (1)
+  // 0b00000000000000000000000000000010: dim (1)
+  // 0b00000000000000000000000000000100: bold (1)
+  // 0b00000000000000000000111111111000: fg (9)
+  // 0b00000000000111111111000000000000: bg (9)
+  // 0b00011111111000000000000000000000: code (8)
+  // 0b11100000000000000000000000000000: unused (3)
+  return glyph.code << 21 | glyph.bg << 12 | glyph.fg << 3 | (glyph.bold ? 0 : 4) + (glyph.dim ? 0 : 2) + (glyph.italic ? 0 : 1);
 }
 
 export default class DynamicCharAtlas extends BaseCharAtlas {
@@ -57,6 +73,15 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
 
   private _drawToCacheCount: number = 0;
 
+  // An array of glyph keys that are waiting on the bitmap to be generated.
+  private _glyphsWaitingOnBitmap: IGlyphCacheValue[] = [];
+
+  // The timeout that is used to batch bitmap generation so it's not requested for every new glyph.
+  private _bitmapCommitTimeout: number | null = null;
+
+  // The bitmap to draw from, this is much faster on other browsers than others.
+  private _bitmap: ImageBitmap | null = null;
+
   constructor(document: Document, private _config: ICharAtlasConfig) {
     super();
     this._cacheCanvas = document.createElement('canvas');
@@ -82,6 +107,13 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     // document.body.appendChild(this._cacheCanvas);
   }
 
+  public dispose(): void {
+    if (this._bitmapCommitTimeout !== null) {
+      window.clearTimeout(this._bitmapCommitTimeout);
+      this._bitmapCommitTimeout = null;
+    }
+  }
+
   public beginFrame(): void {
     this._drawToCacheCount = 0;
   }
@@ -92,6 +124,11 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     x: number,
     y: number
   ): boolean {
+    // Space is always an empty cell, special case this as it's so common
+    if (glyph.code === 32) {
+      return true;
+    }
+
     const glyphKey = getGlyphCacheKey(glyph);
     const cacheValue = this._cacheMap.get(glyphKey);
     if (cacheValue !== null && cacheValue !== undefined) {
@@ -124,11 +161,12 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     return glyph.code < 256;
   }
 
-  private _toCoordinates(index: number): [number, number] {
+  private _toCoordinateX(index: number): number {
-    return [
+    return (index % this._width) * this._config.scaledCharWidth;
-      (index % this._width) * this._config.scaledCharWidth,
+  }
-      Math.floor(index / this._width) * this._config.scaledCharHeight
+
-    ];
+  private _toCoordinateY(index: number): number {
+    return Math.floor(index / this._width) * this._config.scaledCharHeight;
   }
 
   private _drawFromCache(
@@ -141,9 +179,10 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     if (cacheValue.isEmpty) {
       return;
     }
-    const [cacheX, cacheY] = this._toCoordinates(cacheValue.index);
+    const cacheX = this._toCoordinateX(cacheValue.index);
+    const cacheY = this._toCoordinateY(cacheValue.index);
     ctx.drawImage(
-      this._cacheCanvas,
+      cacheValue.inBitmap ? this._bitmap : this._cacheCanvas,
       cacheX,
       cacheY,
       this._config.scaledCharWidth,
@@ -230,13 +269,58 @@ export default class DynamicCharAtlas extends BaseCharAtlas {
     }
 
     // copy the data from imageData to _cacheCanvas
-    const [x, y] = this._toCoordinates(index);
+    const x = this._toCoordinateX(index);
+    const y = this._toCoordinateY(index);
     // putImageData doesn't do any blending, so it will overwrite any existing cache entry for us
     this._cacheCtx.putImageData(imageData, x, y);
 
-    return {
+    // Add the glyph and queue it to the bitmap (if the browser supports it)
+    const cacheValue = {
       index,
-      isEmpty
+      isEmpty,
+      inBitmap: false
     };
+    this._addGlyphToBitmap(cacheValue);
+
+    return cacheValue;
+  }
+
+  private _addGlyphToBitmap(cacheValue: IGlyphCacheValue): void {
+    // Support is patchy for createImageBitmap at the moment, pass a canvas back
+    // if support is lacking as drawImage works there too. Firefox is also
+    // included here as ImageBitmap appears both buggy and has horrible
+    // performance (tested on v55).
+    if (!('createImageBitmap' in window) || isFirefox || isSafari) {
+      return;
+    }
+
+    // Add the glyph to the queue
+    this._glyphsWaitingOnBitmap.push(cacheValue);
+
+    // Check if bitmap generation timeout already exists
+    if (this._bitmapCommitTimeout !== null) {
+      return;
+    }
+
+    this._bitmapCommitTimeout = window.setTimeout(() => this._generateBitmap(), GLYPH_BITMAP_COMMIT_DELAY);
+  }
+
+  private _generateBitmap(): void {
+    const glyphsMovingToBitmap = this._glyphsWaitingOnBitmap;
+    this._glyphsWaitingOnBitmap = [];
+    window.createImageBitmap(this._cacheCanvas).then(bitmap => {
+      // Set bitmap
+      this._bitmap = bitmap;
+
+      // Mark all new glyphs as in bitmap, excluding glyphs that came in after
+      // the bitmap was requested
+      for (let i = 0; i < glyphsMovingToBitmap.length; i++) {
+        const value = glyphsMovingToBitmap[i];
+        // It doesn't matter if the value was already evicted, it will be
+        // released from memory after this block if so.
+        value.inBitmap = true;
+      }
+    });
+    this._bitmapCommitTimeout = null;
   }
 }

src/renderer/atlas/LRUMap.test.ts

@@ -9,57 +9,57 @@ import LRUMap from './LRUMap';
 describe('LRUMap', () => {
   it('can be used to store and retrieve values', () => {
     const map = new LRUMap(10);
-    map.set('keya', 'valuea');
+    map.set(1, 'valuea');
-    map.set('keyb', 'valueb');
+    map.set(2, 'valueb');
-    map.set('keyc', 'valuec');
+    map.set(3, 'valuec');
-    assert.strictEqual(map.get('keya'), 'valuea');
+    assert.strictEqual(map.get(1), 'valuea');
-    assert.strictEqual(map.get('keyb'), 'valueb');
+    assert.strictEqual(map.get(2), 'valueb');
-    assert.strictEqual(map.get('keyc'), 'valuec');
+    assert.strictEqual(map.get(3), 'valuec');
   });
 
   it('maintains a size from insertions', () => {
     const map = new LRUMap(10);
     assert.strictEqual(map.size, 0);
-    map.set('a', 'value');
+    map.set(1, 'value');
     assert.strictEqual(map.size, 1);
-    map.set('b', 'value');
+    map.set(2, 'value');
     assert.strictEqual(map.size, 2);
   });
 
   it('deletes the oldest entry when the capacity is exceeded', () => {
     const map = new LRUMap(4);
-    map.set('a', 'value');
+    map.set(1, 'value');
-    map.set('b', 'value');
+    map.set(2, 'value');
-    map.set('c', 'value');
+    map.set(3, 'value');
-    map.set('d', 'value');
+    map.set(4, 'value');
-    map.set('e', 'value');
+    map.set(5, 'value');
-    assert.isNull(map.get('a'));
+    assert.isNull(map.get(1));
-    assert.isNotNull(map.get('b'));
+    assert.isNotNull(map.get(2));
-    assert.isNotNull(map.get('c'));
+    assert.isNotNull(map.get(3));
-    assert.isNotNull(map.get('d'));
+    assert.isNotNull(map.get(4));
-    assert.isNotNull(map.get('e'));
+    assert.isNotNull(map.get(5));
     assert.strictEqual(map.size, 4);
   });
 
   it('prevents a recently accessed entry from getting deleted', () => {
     const map = new LRUMap(2);
-    map.set('a', 'value');
+    map.set(1, 'value');
-    map.set('b', 'value');
+    map.set(2, 'value');
-    map.get('a');
+    map.get(1);
     // a would normally get deleted here, except that we called get()
-    map.set('c', 'value');
+    map.set(3, 'value');
-    assert.isNotNull(map.get('a'));
+    assert.isNotNull(map.get(1));
     // b got deleted instead of a
-    assert.isNull(map.get('b'));
+    assert.isNull(map.get(2));
-    assert.isNotNull(map.get('c'));
+    assert.isNotNull(map.get(3));
   });
 
   it('supports mutation', () => {
     const map = new LRUMap(10);
-    map.set('keya', 'oldvalue');
+    map.set(1, 'oldvalue');
-    map.set('keya', 'newvalue');
+    map.set(1, 'newvalue');
     // mutation doesn't change the size
     assert.strictEqual(map.size, 1);
-    assert.strictEqual(map.get('keya'), 'newvalue');
+    assert.strictEqual(map.get(1), 'newvalue');
   });
 });

src/renderer/atlas/LRUMap.ts

@@ -6,12 +6,12 @@
 interface ILinkedListNode<T> {
   prev: ILinkedListNode<T>;
   next: ILinkedListNode<T>;
-  key: string;
+  key: number;
   value: T;
 }
 
 export default class LRUMap<T> {
-  private _map: { [key: string]: ILinkedListNode<T> } = {};
+  private _map: { [key: number]: ILinkedListNode<T> } = {};
   private _head: ILinkedListNode<T> = null;
   private _tail: ILinkedListNode<T> = null;
   private _nodePool: ILinkedListNode<T>[] = [];
@@ -68,7 +68,7 @@ export default class LRUMap<T> {
     }
   }
 
-  public get(key: string): T | null {
+  public get(key: number): T | null {
     // This is unsafe: We're assuming our keyspace doesn't overlap with Object.prototype. However,
     // it's faster than calling hasOwnProperty, and in our case, it would never overlap.
     const node = this._map[key];
@@ -80,12 +80,23 @@ export default class LRUMap<T> {
     return null;
   }
 
+  /**
+   * Gets a value from a key without marking it as the most recently used item.
+   */
+  public peekValue(key: number): T | null {
+    const node = this._map[key];
+    if (node !== undefined) {
+      return node.value;
+    }
+    return null;
+  }
+
   public peek(): T | null {
     const head = this._head;
     return head === null ? null : head.value;
   }
 
-  public set(key: string, value: T): void {
+  public set(key: number, value: T): void {
     // This is unsafe: See note above.
     let node = this._map[key];
     if (node !== undefined) {

src/renderer/dom/DomRenderer.ts

@@ -4,12 +4,12 @@
  */
 
 import { IRenderer, IRenderDimensions, IColorSet } from '../Types';
-import { ITerminal, CharacterJoinerHandler } from '../../Types';
+import { ILinkHoverEvent, ITerminal, CharacterJoinerHandler, LinkHoverEventTypes } from '../../Types';
 import { ITheme } from 'xterm';
-import { EventEmitter } from '../../EventEmitter';
+import { EventEmitter } from '../../common/EventEmitter';
 import { ColorManager } from '../ColorManager';
 import { RenderDebouncer } from '../../ui/RenderDebouncer';
-import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, DomRendererRowFactory } from './DomRendererRowFactory';
+import { BOLD_CLASS, ITALIC_CLASS, CURSOR_CLASS, CURSOR_STYLE_BLOCK_CLASS, CURSOR_STYLE_BAR_CLASS, CURSOR_STYLE_UNDERLINE_CLASS, DomRendererRowFactory } from './DomRendererRowFactory';
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
 const ROW_CONTAINER_CLASS = 'xterm-rows';
@@ -79,6 +79,9 @@ export class DomRenderer extends EventEmitter implements IRenderer {
     this._terminal.element.classList.add(TERMINAL_CLASS_PREFIX + this._terminalClass);
     this._terminal.screenElement.appendChild(this._rowContainer);
     this._terminal.screenElement.appendChild(this._selectionContainer);
+
+    this._terminal.linkifier.on(LinkHoverEventTypes.HOVER, (e: ILinkHoverEvent) => this._onLinkHover(e));
+    this._terminal.linkifier.on(LinkHoverEventTypes.LEAVE, (e: ILinkHoverEvent) => this._onLinkLeave(e));
   }
 
   public dispose(): void {
@@ -160,13 +163,19 @@ export class DomRenderer extends EventEmitter implements IRenderer {
         `}`;
     // Cursor
     styles +=
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS} {` +
+        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${CURSOR_CLASS} {` +
+        ` outline: 1px solid ${this.colorManager.colors.cursor.css};` +
+        ` outline-offset: -1px;` +
+        `}` +
+        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BLOCK_CLASS} {` +
         ` background-color: ${this.colorManager.colors.cursor.css};` +
         ` color: ${this.colorManager.colors.cursorAccent.css};` +
         `}` +
-        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}:not(.${FOCUS_CLASS}) .${CURSOR_CLASS} {` +
+        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_BAR_CLASS} {` +
-        ` outline: 1px solid #fff;` +
+        ` box-shadow: 1px 0 0 ${this.colorManager.colors.cursor.css} inset;` +
-        ` outline-offset: -1px;` +
+        `}` +
+        `${this._terminalSelector} .${ROW_CONTAINER_CLASS}.${FOCUS_CLASS} .${CURSOR_CLASS}.${CURSOR_STYLE_UNDERLINE_CLASS} {` +
+        ` box-shadow: 0 -1px 0 ${this.colorManager.colors.cursor.css} inset;` +
         `}`;
     // Selection
     styles +=
@@ -319,7 +328,8 @@ export class DomRenderer extends EventEmitter implements IRenderer {
 
       const row = y + terminal.buffer.ydisp;
       const lineData = terminal.buffer.lines.get(row);
-      rowElement.appendChild(this._rowFactory.createRow(lineData, row === cursorAbsoluteY, cursorX, terminal.charMeasure.width, terminal.cols));
+      const cursorStyle = terminal.options.cursorStyle;
+      rowElement.appendChild(this._rowFactory.createRow(lineData, row === cursorAbsoluteY, cursorStyle, cursorX, terminal.charMeasure.width, terminal.cols));
     }
 
     this._terminal.emit('refresh', {start, end});
@@ -331,4 +341,23 @@ export class DomRenderer extends EventEmitter implements IRenderer {
 
   public registerCharacterJoiner(handler: CharacterJoinerHandler): number { return -1; }
   public deregisterCharacterJoiner(joinerId: number): boolean { return false; }
+
+  private _onLinkHover(e: ILinkHoverEvent): void {
+    this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true);
+  }
+
+  private _onLinkLeave(e: ILinkHoverEvent): void {
+    this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, false);
+  }
+
+  private _setCellUnderline(x: number, x2: number, y: number, y2: number, cols: number, enabled: boolean): void {
+    while (x !== x2 || y !== y2) {
+      const span = <HTMLElement>this._rowElements[y].children[x];
+      span.style.textDecoration = enabled ? 'underline' : 'none';
+      x = (x + 1) % cols;
+      if (x === 0) {
+        y++;
+      }
+    }
+  }
 }

src/renderer/dom/DomRendererRowFactory.test.ts

@@ -24,7 +24,7 @@ describe('DomRendererRowFactory', () => {
 
   describe('createRow', () => {
     it('should create an element for every character in the row', () => {
-      const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+      const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
       assert.equal(getFragmentHtml(fragment),
         '<span> </span>' +
         '<span> </span>'
@@ -35,24 +35,26 @@ describe('DomRendererRowFactory', () => {
       lineData.set(0, [DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)]);
       // There should be no element for the following "empty" cell
       lineData.set(1, [DEFAULT_ATTR, '', 0, undefined]);
-      const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+      const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
       assert.equal(getFragmentHtml(fragment),
         '<span style="width: 10px;">語</span>'
       );
     });
 
-    it('should add class for cursor', () => {
+    it('should add class for cursor and cursor style', () => {
-      const fragment = rowFactory.createRow(lineData, true, 0, 5, 20);
+      for (const style of ['block', 'bar', 'underline']) {
-      assert.equal(getFragmentHtml(fragment),
+        const fragment = rowFactory.createRow(lineData, true, style, 0, 5, 20);
-        '<span class="xterm-cursor"> </span>' +
+        assert.equal(getFragmentHtml(fragment),
-        '<span> </span>'
+          `<span class="xterm-cursor xterm-cursor-${style}"> </span>` +
-      );
+          '<span> </span>'
+        );
+      }
     });
 
     it('should not render cells that go beyond the terminal\'s columns', () => {
       lineData.set(0, [DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)]);
       lineData.set(1, [DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)]);
-      const fragment = rowFactory.createRow(lineData, false, 0, 5, 1);
+      const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 1);
       assert.equal(getFragmentHtml(fragment),
         '<span>a</span>'
       );
@@ -61,7 +63,7 @@ describe('DomRendererRowFactory', () => {
     describe('attributes', () => {
       it('should add class for bold', () => {
         lineData.set(0, [DEFAULT_ATTR | (FLAGS.BOLD << 18), 'a', 1, 'a'.charCodeAt(0)]);
-        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-bold">a</span>' +
           '<span> </span>'
@@ -70,7 +72,7 @@ describe('DomRendererRowFactory', () => {
 
       it('should add class for italic', () => {
         lineData.set(0, [DEFAULT_ATTR | (FLAGS.ITALIC << 18), 'a', 1, 'a'.charCodeAt(0)]);
-        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-italic">a</span>' +
           '<span> </span>'
@@ -81,7 +83,7 @@ describe('DomRendererRowFactory', () => {
         const defaultAttrNoFgColor = (0 << 9) | (256 << 0);
         for (let i = 0; i < 256; i++) {
           lineData.set(0, [defaultAttrNoFgColor | (i << 9), 'a', 1, 'a'.charCodeAt(0)]);
-          const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+          const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-fg-${i}">a</span>` +
             '<span> </span>'
@@ -93,7 +95,7 @@ describe('DomRendererRowFactory', () => {
         const defaultAttrNoBgColor = (257 << 9) | (0 << 0);
         for (let i = 0; i < 256; i++) {
           lineData.set(0, [defaultAttrNoBgColor | (i << 0), 'a', 1, 'a'.charCodeAt(0)]);
-          const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+          const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-bg-${i}">a</span>` +
             '<span> </span>'
@@ -103,7 +105,7 @@ describe('DomRendererRowFactory', () => {
 
       it('should correctly invert colors', () => {
         lineData.set(0, [(FLAGS.INVERSE << 18) | (2 << 9) | (1 << 0), 'a', 1, 'a'.charCodeAt(0)]);
-        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-fg-1 xterm-bg-2">a</span>' +
           '<span> </span>'
@@ -112,7 +114,7 @@ describe('DomRendererRowFactory', () => {
 
       it('should correctly invert default fg color', () => {
         lineData.set(0, [(FLAGS.INVERSE << 18) | (257 << 9) | (1 << 0), 'a', 1, 'a'.charCodeAt(0)]);
-        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-fg-1 xterm-bg-15">a</span>' +
           '<span> </span>'
@@ -121,7 +123,7 @@ describe('DomRendererRowFactory', () => {
 
       it('should correctly invert default bg color', () => {
         lineData.set(0, [(FLAGS.INVERSE << 18) | (1 << 9) | (256 << 0), 'a', 1, 'a'.charCodeAt(0)]);
-        const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+        const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-fg-0 xterm-bg-1">a</span>' +
           '<span> </span>'
@@ -131,7 +133,7 @@ describe('DomRendererRowFactory', () => {
       it('should turn bold fg text bright', () => {
         for (let i = 0; i < 8; i++) {
           lineData.set(0, [(FLAGS.BOLD << 18) | (i << 9) | (256 << 0), 'a', 1, 'a'.charCodeAt(0)]);
-          const fragment = rowFactory.createRow(lineData, false, 0, 5, 20);
+          const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-bold xterm-fg-${i + 8}">a</span>` +
             '<span> </span>'

src/renderer/dom/DomRendererRowFactory.ts

@@ -10,6 +10,9 @@ import { IBufferLine } from '../../Types';
 export const BOLD_CLASS = 'xterm-bold';
 export const ITALIC_CLASS = 'xterm-italic';
 export const CURSOR_CLASS = 'xterm-cursor';
+export const CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block';
+export const CURSOR_STYLE_BAR_CLASS = 'xterm-cursor-bar';
+export const CURSOR_STYLE_UNDERLINE_CLASS = 'xterm-cursor-underline';
 
 export class DomRendererRowFactory {
   constructor(
@@ -17,7 +20,7 @@ export class DomRendererRowFactory {
   ) {
   }
 
-  public createRow(lineData: IBufferLine, isCursorRow: boolean, cursorX: number, cellWidth: number, cols: number): DocumentFragment {
+  public createRow(lineData: IBufferLine, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cellWidth: number, cols: number): DocumentFragment {
     const fragment = this._document.createDocumentFragment();
     let colCount = 0;
 
@@ -48,6 +51,18 @@ export class DomRendererRowFactory {
 
       if (isCursorRow && x === cursorX) {
         charElement.classList.add(CURSOR_CLASS);
+
+        switch (cursorStyle) {
+          case 'bar':
+            charElement.classList.add(CURSOR_STYLE_BAR_CLASS);
+            break;
+          case 'underline':
+            charElement.classList.add(CURSOR_STYLE_UNDERLINE_CLASS);
+            break;
+          default:
+            charElement.classList.add(CURSOR_STYLE_BLOCK_CLASS);
+            break;
+        }
       }
 
       // If inverse flag is on, the foreground should become the background.

src/ui/CharMeasure.ts

@@ -4,7 +4,7 @@
  */
 
 import { ICharMeasure, ITerminalOptions } from '../Types';
-import { EventEmitter } from '../EventEmitter';
+import { EventEmitter } from '../common/EventEmitter';
 
 /**
  * Utility class that measures the size of a character. Measurements are done in

src/utils/TestUtils.test.ts

@@ -4,10 +4,19 @@
  */
 
 import { IColorSet, IRenderer, IRenderDimensions, IColorManager } from '../renderer/Types';
-import { IInputHandlingTerminal, IViewport, ICompositionHelper, ITerminal, IBuffer, IBufferSet, IBrowser, ICharMeasure, ISelectionManager, ITerminalOptions, ICircularList, ILinkifier, IMouseHelper, ILinkMatcherOptions, XtermListener, CharacterJoinerHandler, IBufferLine } from '../Types';
+import { IInputHandlingTerminal, IViewport, ICompositionHelper, ITerminal, IBuffer, IBufferSet, IBrowser, ICharMeasure, ISelectionManager, ITerminalOptions, ILinkifier, IMouseHelper, ILinkMatcherOptions, CharacterJoinerHandler, IBufferLine, IBufferStringIterator } from '../Types';
+import { ICircularList, XtermListener } from '../common/Types';
 import { Buffer } from '../Buffer';
 import * as Browser from '../shared/utils/Browser';
 import { ITheme, IDisposable, IMarker } from 'xterm';
+import { Terminal } from '../Terminal';
+
+export class TestTerminal extends Terminal {
+  writeSync(data: string): void {
+    this.writeBuffer.push(data);
+    this._innerWrite();
+  }
+}
 
 export class MockTerminal implements ITerminal {
   markers: IMarker[];
@@ -299,7 +308,7 @@ export class MockBuffer implements IBuffer {
     return Buffer.prototype.translateBufferLineToString.apply(this, arguments);
   }
   getWrappedRangeForLine(y: number): { first: number; last: number; } {
-    throw new Error('Method not implemented.');
+    return Buffer.prototype.getWrappedRangeForLine.apply(this, arguments);
   }
   nextStop(x?: number): number {
     throw new Error('Method not implemented.');
@@ -310,6 +319,12 @@ export class MockBuffer implements IBuffer {
   setLines(lines: ICircularList<IBufferLine>): void {
     this.lines = lines;
   }
+  stringIndexToBufferIndex(lineIndex: number, stringIndex: number): number[] {
+    return Buffer.prototype.stringIndexToBufferIndex.apply(this, arguments);
+  }
+  iterator(trimRight: boolean, startIndex?: number, endIndex?: number): IBufferStringIterator {
+    return Buffer.prototype.iterator.apply(this, arguments);
+  }
 }
 
 export class MockRenderer implements IRenderer {

tsconfig.json

@@ -5,6 +5,7 @@
     "lib": [
       "dom",
       "es5",
+      "es6",
       "scripthost",
       "es2015.promise"
     ],

tslint.json

@@ -39,6 +39,7 @@
     "one-variable-per-declaration": true,
     "no-unsafe-finally": true,
     "no-var-keyword": true,
+    "prefer-const": true,
     "quotemark": [
       true,
       "single"
@@ -107,7 +108,6 @@
     },
     "prefer-const-enum": [
       true
-    ],
+    ]
-    "prefer-const": true
   }
 }

typings/xterm.d.ts

@@ -144,19 +144,13 @@ declare module 'xterm' {
     macOptionClickForcesSelection?: boolean;
 
     /**
-     * (EXPERIMENTAL) The type of renderer to use, this allows using the
+     * The type of renderer to use, this allows using the fallback DOM renderer
-     * fallback DOM renderer when canvas is too slow for the environment. The
+     * when canvas is too slow for the environment. The following features do
-     * following features do not work when the DOM renderer is used:
+     * not work when the DOM renderer is used:
      *
-     * - Links
      * - Line height
      * - Letter spacing
      * - Cursor blink
-     * - Cursor style
-     *
-     * This option is marked as experiemental because it will eventually be
-     * moved to an addon. You can only set this option in the constructor (not
-     * setOption).
      */
     rendererType?: RendererType;
 

webpack.config.js

@@ -1,19 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  entry: './demo/main.js',
-  output: {
-    path: path.resolve(__dirname, 'demo/dist'),
-    filename: 'bundle.js'
-  },
-  devtool: 'source-map',
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: ["source-map-loader"],
-        enforce: "pre"
-      }
-    ]
-  }
-};