@xterm/xterm 5.4.0-beta.2 → 5.4.0-beta.21

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xterm/xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "5.4.0-beta.2",
+  "version": "5.4.0-beta.21",
   "main": "lib/xterm.js",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",

package/src/browser/AccessibilityManager.ts

@@ -10,6 +10,7 @@ import { Disposable, toDisposable } from 'common/Lifecycle';
 import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
 import { IBuffer } from 'common/buffer/Types';
 import { IInstantiationService } from 'common/services/Services';
+import { addDisposableDomListener } from 'browser/Lifecycle';
 
 const MAX_ROWS_TO_READ = 20;
 
@@ -18,11 +19,17 @@ const enum BoundaryPosition {
   BOTTOM
 }
 
+// Turn this on to unhide the accessibility tree and display it under
+// (instead of overlapping with) the terminal.
+const DEBUG = false;
+
 export class AccessibilityManager extends Disposable {
+  private _debugRootContainer: HTMLElement | undefined;
   private _accessibilityContainer: HTMLElement;
 
   private _rowContainer: HTMLElement;
   private _rowElements: HTMLElement[];
+  private _rowColumns: WeakMap<HTMLElement, number[]> = new WeakMap();
 
   private _liveRegion: HTMLElement;
   private _liveRegionLineCount: number = 0;
@@ -80,7 +87,23 @@ export class AccessibilityManager extends Disposable {
     if (!this._terminal.element) {
       throw new Error('Cannot enable accessibility before Terminal.open');
     }
-    this._terminal.element.insertAdjacentElement('afterbegin', this._accessibilityContainer);
+
+    if (DEBUG) {
+      this._accessibilityContainer.classList.add('debug');
+      this._rowContainer.classList.add('debug');
+
+      // Use a `<div class="xterm">` container so that the css will still apply.
+      this._debugRootContainer = document.createElement('div');
+      this._debugRootContainer.classList.add('xterm');
+
+      this._debugRootContainer.appendChild(document.createTextNode('------start a11y------'));
+      this._debugRootContainer.appendChild(this._accessibilityContainer);
+      this._debugRootContainer.appendChild(document.createTextNode('------end a11y------'));
+
+      this._terminal.element.insertAdjacentElement('afterend', this._debugRootContainer);
+    } else {
+      this._terminal.element.insertAdjacentElement('afterbegin', this._accessibilityContainer);
+    }
 
     this.register(this._terminal.onResize(e => this._handleResize(e.rows)));
     this.register(this._terminal.onRender(e => this._refreshRows(e.start, e.end)));
@@ -92,11 +115,16 @@ export class AccessibilityManager extends Disposable {
     this.register(this._terminal.onKey(e => this._handleKey(e.key)));
     this.register(this._terminal.onBlur(() => this._clearLiveRegion()));
     this.register(this._renderService.onDimensionsChange(() => this._refreshRowsDimensions()));
+    this.register(addDisposableDomListener(document, 'selectionchange', () => this._handleSelectionChange()));
     this.register(this._coreBrowserService.onDprChange(() => this._refreshRowsDimensions()));
 
     this._refreshRows();
     this.register(toDisposable(() => {
-      this._accessibilityContainer.remove();
+      if (DEBUG) {
+        this._debugRootContainer!.remove();
+      } else {
+        this._accessibilityContainer.remove();
+      }
       this._rowElements.length = 0;
     }));
   }
@@ -149,14 +177,18 @@ export class AccessibilityManager extends Disposable {
     const buffer: IBuffer = this._terminal.buffer;
     const setSize = buffer.lines.length.toString();
     for (let i = start; i <= end; i++) {
-      const lineData = buffer.translateBufferLineToString(buffer.ydisp + i, true);
+      const line = buffer.lines.get(buffer.ydisp + i);
+      const columns: number[] = [];
+      const lineData = line?.translateToString(true, undefined, undefined, columns) || '';
       const posInSet = (buffer.ydisp + i + 1).toString();
       const element = this._rowElements[i];
       if (element) {
         if (lineData.length === 0) {
           element.innerText = '\u00a0';
+          this._rowColumns.set(element, [0, 1]);
         } else {
           element.textContent = lineData;
+          this._rowColumns.set(element, columns);
         }
         element.setAttribute('aria-posinset', posInSet);
         element.setAttribute('aria-setsize', setSize);
@@ -233,6 +265,103 @@ export class AccessibilityManager extends Disposable {
     e.stopImmediatePropagation();
   }
 
+  private _handleSelectionChange(): void {
+    if (this._rowElements.length === 0) {
+      return;
+    }
+
+    const selection = document.getSelection();
+    if (!selection) {
+      return;
+    }
+
+    if (selection.isCollapsed) {
+      // Only do something when the anchorNode is inside the row container. This
+      // behavior mirrors what we do with mouse --- if the mouse clicks
+      // somewhere outside of the terminal, we don't clear the selection.
+      if (this._rowContainer.contains(selection.anchorNode)) {
+        this._terminal.clearSelection();
+      }
+      return;
+    }
+
+    if (!selection.anchorNode || !selection.focusNode) {
+      console.error('anchorNode and/or focusNode are null');
+      return;
+    }
+
+    // Sort the two selection points in document order.
+    let begin = { node: selection.anchorNode, offset: selection.anchorOffset };
+    let end = { node: selection.focusNode, offset: selection.focusOffset };
+    if ((begin.node.compareDocumentPosition(end.node) & Node.DOCUMENT_POSITION_PRECEDING) || (begin.node === end.node && begin.offset > end.offset) ) {
+      [begin, end] = [end, begin];
+    }
+
+    // Clamp begin/end to the inside of the row container.
+    if (begin.node.compareDocumentPosition(this._rowElements[0]) & (Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_FOLLOWING)) {
+      begin = { node: this._rowElements[0].childNodes[0], offset: 0 };
+    }
+    if (!this._rowContainer.contains(begin.node)) {
+      // This happens when `begin` is below the last row.
+      return;
+    }
+    const lastRowElement = this._rowElements.slice(-1)[0];
+    if (end.node.compareDocumentPosition(lastRowElement) & (Node.DOCUMENT_POSITION_CONTAINED_BY | Node.DOCUMENT_POSITION_PRECEDING)) {
+      end = {
+        node: lastRowElement,
+        offset: lastRowElement.textContent?.length ?? 0
+      };
+    }
+    if (!this._rowContainer.contains(end.node)) {
+      // This happens when `end` is above the first row.
+      return;
+    }
+
+    const toRowColumn = ({ node, offset }: typeof begin): {row: number, column: number} | null => {
+      // `node` is either the row element or the Text node inside it.
+      const rowElement: any = node instanceof Text ? node.parentNode : node;
+      let row = parseInt(rowElement?.getAttribute('aria-posinset'), 10) - 1;
+      if (isNaN(row)) {
+        console.warn('row is invalid. Race condition?');
+        return null;
+      }
+
+      const columns = this._rowColumns.get(rowElement);
+      if (!columns) {
+        console.warn('columns is null. Race condition?');
+        return null;
+      }
+
+      let column = offset < columns.length ? columns[offset] : columns.slice(-1)[0] + 1;
+      if (column >= this._terminal.cols) {
+        ++row;
+        column = 0;
+      }
+      return {
+        row,
+        column
+      };
+    };
+
+    const beginRowColumn = toRowColumn(begin);
+    const endRowColumn = toRowColumn(end);
+
+    if (!beginRowColumn || !endRowColumn) {
+      return;
+    }
+
+    if (beginRowColumn.row > endRowColumn.row || (beginRowColumn.row === endRowColumn.row && beginRowColumn.column >= endRowColumn.column)) {
+      // This should not happen unless we have some bugs.
+      throw new Error('invalid range');
+    }
+
+    this._terminal.select(
+      beginRowColumn.column,
+      beginRowColumn.row,
+      (endRowColumn.row - beginRowColumn.row) * this._terminal.cols - beginRowColumn.column + endRowColumn.column
+    );
+  }
+
   private _handleResize(rows: number): void {
     // Remove bottom boundary listener
     this._rowElements[this._rowElements.length - 1].removeEventListener('focus', this._bottomBoundaryFocusListener);

package/src/browser/{Linkifier2.ts → Linkifier.ts}

@@ -4,18 +4,14 @@
  */
 
 import { addDisposableDomListener } from 'browser/Lifecycle';
-import { IBufferCellPosition, ILink, ILinkDecorations, ILinkProvider, ILinkWithState, ILinkifier2, ILinkifierEvent } from 'browser/Types';
+import { IBufferCellPosition, ILink, ILinkDecorations, ILinkWithState, ILinkifier2, ILinkifierEvent } from 'browser/Types';
 import { EventEmitter } from 'common/EventEmitter';
 import { Disposable, disposeArray, getDisposeArrayDisposable, toDisposable } from 'common/Lifecycle';
 import { IDisposable } from 'common/Types';
 import { IBufferService } from 'common/services/Services';
-import { IMouseService, IRenderService } from './services/Services';
+import { ILinkProviderService, IMouseService, IRenderService } from './services/Services';
 
-export class Linkifier2 extends Disposable implements ILinkifier2 {
-  private _element: HTMLElement | undefined;
-  private _mouseService: IMouseService | undefined;
-  private _renderService: IRenderService | undefined;
-  private _linkProviders: ILinkProvider[] = [];
+export class Linkifier extends Disposable implements ILinkifier2 {
   public get currentLink(): ILinkWithState | undefined { return this._currentLink; }
   protected _currentLink: ILinkWithState | undefined;
   private _mouseDownLink: ILinkWithState | undefined;
@@ -33,39 +29,24 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
   public readonly onHideLinkUnderline = this._onHideLinkUnderline.event;
 
   constructor(
-    @IBufferService private readonly _bufferService: IBufferService
+    private readonly _element: HTMLElement,
+    @IMouseService private readonly _mouseService: IMouseService,
+    @IRenderService private readonly _renderService: IRenderService,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @ILinkProviderService private readonly _linkProviderService: ILinkProviderService
   ) {
     super();
     this.register(getDisposeArrayDisposable(this._linkCacheDisposables));
     this.register(toDisposable(() => {
       this._lastMouseEvent = undefined;
+      // Clear out link providers as they could easily cause an embedder memory leak
+      this._activeProviderReplies?.clear();
     }));
     // Listen to resize to catch the case where it's resized and the cursor is out of the viewport.
     this.register(this._bufferService.onResize(() => {
       this._clearCurrentLink();
       this._wasResized = true;
     }));
-  }
-
-  public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
-    this._linkProviders.push(linkProvider);
-    return {
-      dispose: () => {
-        // Remove the link provider from the list
-        const providerIndex = this._linkProviders.indexOf(linkProvider);
-
-        if (providerIndex !== -1) {
-          this._linkProviders.splice(providerIndex, 1);
-        }
-      }
-    };
-  }
-
-  public attachToDom(element: HTMLElement, mouseService: IMouseService, renderService: IRenderService): void {
-    this._element = element;
-    this._mouseService = mouseService;
-    this._renderService = renderService;
-
     this.register(addDisposableDomListener(this._element, 'mouseleave', () => {
       this._isMouseOut = true;
       this._clearCurrentLink();
@@ -78,10 +59,6 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
   private _handleMouseMove(event: MouseEvent): void {
     this._lastMouseEvent = event;
 
-    if (!this._element || !this._mouseService) {
-      return;
-    }
-
     const position = this._positionFromMouseEvent(event, this._element, this._mouseService);
     if (!position) {
       return;
@@ -142,7 +119,7 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
     let linkProvided = false;
 
     // There is no link cached, so ask for one
-    for (const [i, linkProvider] of this._linkProviders.entries()) {
+    for (const [i, linkProvider] of this._linkProviderService.linkProviders.entries()) {
       if (useLineCache) {
         const existingReply = this._activeProviderReplies?.get(i);
         // If there isn't a reply, the provider hasn't responded yet.
@@ -164,7 +141,7 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
 
           // If all providers have responded, remove lower priority links that intersect ranges of
           // higher priority links
-          if (this._activeProviderReplies?.size === this._linkProviders.length) {
+          if (this._activeProviderReplies?.size === this._linkProviderService.linkProviders.length) {
             this._removeIntersectingLinks(position.y, this._activeProviderReplies);
           }
         });
@@ -220,7 +197,7 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
     }
 
     // Check if all the providers have responded
-    if (this._activeProviderReplies.size === this._linkProviders.length && !linkProvided) {
+    if (this._activeProviderReplies.size === this._linkProviderService.linkProviders.length && !linkProvided) {
       // Respect the order of the link providers
       for (let j = 0; j < this._activeProviderReplies.size; j++) {
         const currentLink = this._activeProviderReplies.get(j)?.find(link => this._linkAtPosition(link.link, position));
@@ -240,7 +217,7 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
   }
 
   private _handleMouseUp(event: MouseEvent): void {
-    if (!this._element || !this._mouseService || !this._currentLink) {
+    if (!this._currentLink) {
       return;
     }
 
@@ -255,7 +232,7 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
   }
 
   private _clearCurrentLink(startRow?: number, endRow?: number): void {
-    if (!this._element || !this._currentLink || !this._lastMouseEvent) {
+    if (!this._currentLink || !this._lastMouseEvent) {
       return;
     }
 
@@ -268,7 +245,7 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
   }
 
   private _handleNewLink(linkWithState: ILinkWithState): void {
-    if (!this._element || !this._lastMouseEvent || !this._mouseService) {
+    if (!this._lastMouseEvent) {
       return;
     }
 
@@ -299,7 +276,7 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
             if (this._currentLink?.state && this._currentLink.state.decorations.pointerCursor !== v) {
               this._currentLink.state.decorations.pointerCursor = v;
               if (this._currentLink.state.isHovered) {
-                this._element?.classList.toggle('xterm-cursor-pointer', v);
+                this._element.classList.toggle('xterm-cursor-pointer', v);
               }
             }
           }
@@ -319,29 +296,27 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
 
       // Listen to viewport changes to re-render the link under the cursor (only when the line the
       // link is on changes)
-      if (this._renderService) {
-        this._linkCacheDisposables.push(this._renderService.onRenderedViewportChange(e => {
-          // Sanity check, this shouldn't happen in practice as this listener would be disposed
-          if (!this._currentLink) {
-            return;
-          }
-          // When start is 0 a scroll most likely occurred, make sure links above the fold also get
-          // cleared.
-          const start = e.start === 0 ? 0 : e.start + 1 + this._bufferService.buffer.ydisp;
-          const end = this._bufferService.buffer.ydisp + 1 + e.end;
-          // Only clear the link if the viewport change happened on this line
-          if (this._currentLink.link.range.start.y >= start && this._currentLink.link.range.end.y <= end) {
-            this._clearCurrentLink(start, end);
-            if (this._lastMouseEvent && this._element) {
-              // re-eval previously active link after changes
-              const position = this._positionFromMouseEvent(this._lastMouseEvent, this._element, this._mouseService!);
-              if (position) {
-                this._askForLink(position, false);
-              }
+      this._linkCacheDisposables.push(this._renderService.onRenderedViewportChange(e => {
+        // Sanity check, this shouldn't happen in practice as this listener would be disposed
+        if (!this._currentLink) {
+          return;
+        }
+        // When start is 0 a scroll most likely occurred, make sure links above the fold also get
+        // cleared.
+        const start = e.start === 0 ? 0 : e.start + 1 + this._bufferService.buffer.ydisp;
+        const end = this._bufferService.buffer.ydisp + 1 + e.end;
+        // Only clear the link if the viewport change happened on this line
+        if (this._currentLink.link.range.start.y >= start && this._currentLink.link.range.end.y <= end) {
+          this._clearCurrentLink(start, end);
+          if (this._lastMouseEvent) {
+            // re-eval previously active link after changes
+            const position = this._positionFromMouseEvent(this._lastMouseEvent, this._element, this._mouseService!);
+            if (position) {
+              this._askForLink(position, false);
             }
           }
-        }));
-      }
+        }
+      }));
     }
   }
 

package/src/browser/OscLinkProvider.ts

@@ -3,7 +3,8 @@
  * @license MIT
  */
 
-import { IBufferRange, ILink, ILinkProvider } from 'browser/Types';
+import { IBufferRange, ILink } from 'browser/Types';
+import { ILinkProvider } from 'browser/services/Services';
 import { CellData } from 'common/buffer/CellData';
 import { IBufferService, IOptionsService, IOscLinkService } from 'common/services/Services';
 

package/src/browser/RenderDebouncer.ts

@@ -4,6 +4,7 @@
  */
 
 import { IRenderDebouncerWithCallback } from 'browser/Types';
+import { ICoreBrowserService } from 'browser/services/Services';
 
 /**
  * Debounces calls to render terminal rows using animation frames.
@@ -16,14 +17,14 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback {
   private _refreshCallbacks: FrameRequestCallback[] = [];
 
   constructor(
-    private _parentWindow: Window,
-    private _renderCallback: (start: number, end: number) => void
+    private _renderCallback: (start: number, end: number) => void,
+    private readonly _coreBrowserService: ICoreBrowserService
   ) {
   }
 
   public dispose(): void {
     if (this._animationFrame) {
-      this._parentWindow.cancelAnimationFrame(this._animationFrame);
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
       this._animationFrame = undefined;
     }
   }
@@ -31,7 +32,7 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback {
   public addRefreshCallback(callback: FrameRequestCallback): number {
     this._refreshCallbacks.push(callback);
     if (!this._animationFrame) {
-      this._animationFrame = this._parentWindow.requestAnimationFrame(() => this._innerRefresh());
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => this._innerRefresh());
     }
     return this._animationFrame;
   }
@@ -49,7 +50,7 @@ export class RenderDebouncer implements IRenderDebouncerWithCallback {
       return;
     }
 
-    this._animationFrame = this._parentWindow.requestAnimationFrame(() => this._innerRefresh());
+    this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => this._innerRefresh());
   }
 
   private _innerRefresh(): void {

package/src/browser/Terminal.ts

@@ -23,10 +23,10 @@
 
 import { copyHandler, handlePasteEvent, moveTextAreaUnderMouseCursor, paste, rightClickHandler } from 'browser/Clipboard';
 import { addDisposableDomListener } from 'browser/Lifecycle';
-import { Linkifier2 } from 'browser/Linkifier2';
+import { Linkifier } from './Linkifier';
 import * as Strings from 'browser/LocalizableStrings';
 import { OscLinkProvider } from 'browser/OscLinkProvider';
-import { CharacterJoinerHandler, CustomKeyEventHandler, IBrowser, IBufferRange, ICompositionHelper, ILinkifier2, ITerminal, IViewport } from 'browser/Types';
+import { CharacterJoinerHandler, CustomKeyEventHandler, CustomWheelEventHandler, IBrowser, IBufferRange, ICompositionHelper, ILinkifier2, ITerminal, IViewport } from 'browser/Types';
 import { Viewport } from 'browser/Viewport';
 import { BufferDecorationRenderer } from 'browser/decorations/BufferDecorationRenderer';
 import { OverviewRulerRenderer } from 'browser/decorations/OverviewRulerRenderer';
@@ -39,7 +39,7 @@ import { CoreBrowserService } from 'browser/services/CoreBrowserService';
 import { MouseService } from 'browser/services/MouseService';
 import { RenderService } from 'browser/services/RenderService';
 import { SelectionService } from 'browser/services/SelectionService';
-import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IMouseService, IRenderService, ISelectionService, IThemeService } from 'browser/services/Services';
+import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, ILinkProviderService, IMouseService, IRenderService, ISelectionService, IThemeService } from 'browser/services/Services';
 import { ThemeService } from 'browser/services/ThemeService';
 import { color, rgba } from 'common/Color';
 import { CoreTerminal } from 'common/CoreTerminal';
@@ -57,6 +57,7 @@ import { IDecorationService } from 'common/services/Services';
 import { IDecoration, IDecorationOptions, IDisposable, ILinkProvider, IMarker } from '@xterm/xterm';
 import { WindowsOptionsReportType } from '../common/InputHandler';
 import { AccessibilityManager } from './AccessibilityManager';
+import { LinkProviderService } from 'browser/services/LinkProviderService';
 
 export class Terminal extends CoreTerminal implements ITerminal {
   public textarea: HTMLTextAreaElement | undefined;
@@ -69,14 +70,19 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _helperContainer: HTMLElement | undefined;
   private _compositionView: HTMLElement | undefined;
 
+  public linkifier: ILinkifier2 | undefined;
   private _overviewRulerRenderer: OverviewRulerRenderer | undefined;
 
   public browser: IBrowser = Browser as any;
 
   private _customKeyEventHandler: CustomKeyEventHandler | undefined;
+  private _customWheelEventHandler: CustomWheelEventHandler | undefined;
 
-  // browser services
+  // Browser services
   private _decorationService: DecorationService;
+  private _linkProviderService: ILinkProviderService;
+
+  // Optional browser services
   private _charSizeService: ICharSizeService | undefined;
   private _coreBrowserService: ICoreBrowserService | undefined;
   private _mouseService: IMouseService | undefined;
@@ -112,7 +118,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
    */
   private _unprocessedDeadKey: boolean = false;
 
-  public linkifier2: ILinkifier2;
   public viewport: IViewport | undefined;
   private _compositionHelper: ICompositionHelper | undefined;
   private _accessibilityManager: MutableDisposable<AccessibilityManager> = this.register(new MutableDisposable());
@@ -148,10 +153,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this._setup();
 
-    this.linkifier2 = this.register(this._instantiationService.createInstance(Linkifier2));
-    this.linkifier2.registerLinkProvider(this._instantiationService.createInstance(OscLinkProvider));
     this._decorationService = this._instantiationService.createInstance(DecorationService);
     this._instantiationService.setService(IDecorationService, this._decorationService);
+    this._linkProviderService = this._instantiationService.createInstance(LinkProviderService);
+    this._instantiationService.setService(ILinkProviderService, this._linkProviderService);
+    this._linkProviderService.registerLinkProvider(this._instantiationService.createInstance(OscLinkProvider));
 
     // Setup InputHandler listeners
     this.register(this._inputHandler.onRequestBell(() => this._onBell.fire()));
@@ -260,11 +266,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
   /**
    * Binds the desired focus behavior on a given terminal object.
    */
-  private _handleTextAreaFocus(ev: KeyboardEvent): void {
+  private _handleTextAreaFocus(ev: FocusEvent): void {
     if (this.coreService.decPrivateModes.sendFocus) {
       this.coreService.triggerDataEvent(C0.ESC + '[I');
     }
-    this.updateCursorStyle(ev);
     this.element!.classList.add('focus');
     this._showCursor();
     this._onFocus.fire();
@@ -428,6 +433,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
 
     this.screenElement = this._document.createElement('div');
     this.screenElement.classList.add('xterm-screen');
+    this.register(addDisposableDomListener(this.screenElement, 'mousemove', (ev: MouseEvent) => this.updateCursorStyle(ev)));
     // Create the container that will hold helpers like the textarea for
     // capturing DOM Events. Then produce the helpers.
     this._helperContainer = this._document.createElement('div');
@@ -458,11 +464,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
     ));
     this._instantiationService.setService(ICoreBrowserService, this._coreBrowserService);
 
-    this.register(addDisposableDomListener(this.textarea, 'focus', (ev: KeyboardEvent) => this._handleTextAreaFocus(ev)));
+    this.register(addDisposableDomListener(this.textarea, 'focus', (ev: FocusEvent) => this._handleTextAreaFocus(ev)));
     this.register(addDisposableDomListener(this.textarea, 'blur', () => this._handleTextAreaBlur()));
     this._helperContainer.appendChild(this.textarea);
 
-
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
     this._instantiationService.setService(ICharSizeService, this._charSizeService);
 
@@ -482,6 +487,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._compositionHelper = this._instantiationService.createInstance(CompositionHelper, this.textarea, this._compositionView);
     this._helperContainer.appendChild(this._compositionView);
 
+    this._mouseService = this._instantiationService.createInstance(MouseService);
+    this._instantiationService.setService(IMouseService, this._mouseService);
+
+    this.linkifier = this.register(this._instantiationService.createInstance(Linkifier, this.screenElement));
+
     // Performance: Add viewport and helper elements from the fragment
     this.element.appendChild(fragment);
 
@@ -493,9 +503,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
       this._renderService.setRenderer(this._createRenderer());
     }
 
-    this._mouseService = this._instantiationService.createInstance(MouseService);
-    this._instantiationService.setService(IMouseService, this._mouseService);
-
     this.viewport = this._instantiationService.createInstance(Viewport, this._viewportElement, this._viewportScrollArea);
     this.viewport.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent, ScrollSource.VIEWPORT)),
     this.register(this._inputHandler.onRequestSyncScrollBar(() => this.viewport!.syncScrollArea()));
@@ -513,7 +520,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._selectionService = this.register(this._instantiationService.createInstance(SelectionService,
       this.element,
       this.screenElement,
-      this.linkifier2
+      this.linkifier
     ));
     this._instantiationService.setService(ISelectionService, this._selectionService);
     this.register(this._selectionService.onRequestScrollLines(e => this.scrollLines(e.amount, e.suppressScrollEvent)));
@@ -533,7 +540,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }));
     this.register(addDisposableDomListener(this._viewportElement, 'scroll', () => this._selectionService!.refresh()));
 
-    this.linkifier2.attachToDom(this.screenElement, this._mouseService, this._renderService);
     this.register(this._instantiationService.createInstance(BufferDecorationRenderer, this.screenElement));
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.handleMouseDown(e)));
 
@@ -575,7 +581,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   }
 
   private _createRenderer(): IRenderer {
-    return this._instantiationService.createInstance(DomRenderer, this._document!, this.element!, this.screenElement!, this._viewportElement!, this._helperContainer!, this.linkifier2);
+    return this._instantiationService.createInstance(DomRenderer, this, this._document!, this.element!, this.screenElement!, this._viewportElement!, this._helperContainer!, this.linkifier!);
   }
 
   /**
@@ -633,6 +639,9 @@ export class Terminal extends CoreTerminal implements ITerminal {
           but = ev.button < 3 ? ev.button : CoreMouseButton.NONE;
           break;
         case 'wheel':
+          if (self._customWheelEventHandler && self._customWheelEventHandler(ev as WheelEvent) === false) {
+            return false;
+          }
           const amount = self.viewport!.getLinesScrolled(ev as WheelEvent);
 
           if (amount === 0) {
@@ -792,6 +801,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
       // do nothing, if app side handles wheel itself
       if (requestedEvents.wheel) return;
 
+      if (this._customWheelEventHandler && this._customWheelEventHandler(ev) === false) {
+        return false;
+      }
+
       if (!this.buffer.hasScrollback) {
         // Convert wheel events into up/down events when the buffer does not have scrollback, this
         // enables scrolling in apps hosted in the alt buffer such as vim or tmux.
@@ -847,7 +860,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   /**
    * Change the cursor style for different selection modes
    */
-  public updateCursorStyle(ev: KeyboardEvent): void {
+  public updateCursorStyle(ev: KeyboardEvent | MouseEvent): void {
     if (this._selectionService?.shouldColumnSelect(ev)) {
       this.element!.classList.add('column-select');
     } else {
@@ -878,21 +891,16 @@ export class Terminal extends CoreTerminal implements ITerminal {
     paste(data, this.textarea!, this.coreService, this.optionsService);
   }
 
-  /**
-   * Attaches a custom key event handler which is run before keys are processed,
-   * giving consumers of xterm.js ultimate control as to what keys should be
-   * processed by the terminal and what keys should not.
-   * @param customKeyEventHandler The custom KeyboardEvent handler to attach.
-   * This is a function that takes a KeyboardEvent, allowing consumers to stop
-   * propagation and/or prevent the default action. The function returns whether
-   * the event should be processed by xterm.js.
-   */
   public attachCustomKeyEventHandler(customKeyEventHandler: CustomKeyEventHandler): void {
     this._customKeyEventHandler = customKeyEventHandler;
   }
 
+  public attachCustomWheelEventHandler(customWheelEventHandler: CustomWheelEventHandler): void {
+    this._customWheelEventHandler = customWheelEventHandler;
+  }
+
   public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
-    return this.linkifier2.registerLinkProvider(linkProvider);
+    return this._linkProviderService.registerLinkProvider(linkProvider);
   }
 
   public registerCharacterJoiner(handler: CharacterJoinerHandler): number {