@xterm/xterm 5.4.0-beta.9 → 5.5.0-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xterm/xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "5.4.0-beta.9",
+  "version": "5.5.0-beta.1",
   "main": "lib/xterm.js",
   "style": "css/xterm.css",
   "types": "typings/xterm.d.ts",
@@ -78,8 +78,8 @@
     "chai": "^4.3.4",
     "cross-env": "^7.0.3",
     "deep-equal": "^2.0.5",
-    "eslint": "^8.45.0",
-    "eslint-plugin-jsdoc": "^39.3.6",
+    "eslint": "^8.56.0",
+    "eslint-plugin-jsdoc": "^46.9.1",
     "express": "^4.17.1",
     "express-ws": "^5.0.2",
     "glob": "^7.2.0",

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 {