fix hover underline

src/browser/renderer/dom/DomRenderer.ts

@@ -37,7 +37,6 @@ export class DomRenderer extends Disposable implements IRenderer {
   private _rowContainer: HTMLElement;
   private _rowElements: HTMLElement[] = [];
   private _selectionContainer: HTMLElement;
-  private _cellToRowElements: Int16Array[] = [];
 
   public dimensions: IRenderDimensions;
 
@@ -96,6 +95,7 @@ export class DomRenderer extends Disposable implements IRenderer {
   }
 
   // TODO: put metrics calc into lazy tasks
+  // TODO: use relative threshold calc to allow bigger px offsets at bigger font sizes
   private _fontMetrics: Uint8Array = new Uint8Array(1424);
   private _calcFontMetrics(): void {
     const start = Date.now();
@@ -391,10 +391,20 @@ export class DomRenderer extends Disposable implements IRenderer {
       const row = y + this._bufferService.buffer.ydisp;
       const lineData = this._bufferService.buffer.lines.get(row);
       const cursorStyle = this._optionsService.rawOptions.cursorStyle;
-      if (!this._cellToRowElements[y] || this._cellToRowElements[y].length !== this._bufferService.cols) {
-        this._cellToRowElements[y] = new Int16Array(this._bufferService.cols);
-      }
-      rowElement.replaceChildren(this._rowFactory.createRow(lineData!, row, row === cursorAbsoluteY, cursorStyle, cursorX, cursorBlink, this.dimensions.css.cell.width, this._bufferService.cols, this._cellToRowElements[y], this._fontMetrics));
+      rowElement.replaceChildren(
+        this._rowFactory.createRow(
+          lineData!,
+          row,
+          row === cursorAbsoluteY,
+          cursorStyle,
+          cursorX,
+          cursorBlink,
+          this.dimensions.css.cell.width,
+          this._bufferService.cols,
+          this._fontMetrics,
+          this._linkState
+        )
+      );
     }
   }
 
@@ -402,6 +412,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     return `.${TERMINAL_CLASS_PREFIX}${this._terminalClass}`;
   }
 
+  private _linkState = new Uint8Array(3);
   private _handleLinkHover(e: ILinkifierEvent): void {
     this._setCellUnderline(e.x1, e.x2, e.y1, e.y2, e.cols, true);
   }
@@ -411,55 +422,46 @@ export class DomRenderer extends Disposable implements IRenderer {
   }
 
   private _setCellUnderline(x: number, x2: number, y: number, y2: number, cols: number, enabled: boolean): void {
-    /**
-     * NOTE: The linkifier may send out of viewport y-values if:
-     * - negative y-value: the link started at a higher line
-     * - y-value >= maxY: the link ends at a line below viewport
-     *
-     * For negative y-values we can simply adjust x = 0,
-     * as higher up link start means, that everything from
-     * (0,0) is a link under top-down-left-right char progression
-     *
-     * Additionally there might be a small chance of out-of-sync x|y-values
-     * from a race condition of render updates vs. link event handler execution:
-     * - (sync) resize: chances terminal buffer in sync, schedules render update async
-     * - (async) link handler race condition: new buffer metrics, but still on old render state
-     * - (async) render update: brings term metrics and render state back in sync
-     */
+    // nomalize coords into viewport borders
     if (y < 0) x = 0;
     if (y2 < 0) x2 = 0;
-
-    // avoid out-of-sync y-values, simply clamp into valid area
-    const maxY = this._cellToRowElements.length - 1;
+    const maxY = this._bufferService.rows - 1;
     y = Math.max(Math.min(y, maxY), 0);
     y2 = Math.max(Math.min(y2, maxY), 0);
-    const elemY = this._cellToRowElements[y];
-    const elemY2 = this._cellToRowElements[y2];
-    if (x >= elemY.length || x2 >= elemY2.length) {
-      // avoid out-of-sync x-values
-      // simply exit early, gets fixed by the next render update
-      return;
-    }
-    x = elemY[x];
-    x2 = elemY2[x2];
 
-    if (x === -1 || x2 === -1) {
-      return;
-    }
+    const cursorAbsoluteY = this._bufferService.buffer.ybase + this._bufferService.buffer.y;
+    const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
+    const cursorBlink = this._optionsService.rawOptions.cursorBlink;
+    const cursorStyle = this._optionsService.rawOptions.cursorStyle;
 
-    while (x !== x2 || y !== y2) {
-      const row = this._rowElements[y];
-      if (!row) {
-        return;
+    // refresh rows within link range
+    this._linkState[0] = +enabled;
+    for (let i = y; i <= y2; ++i) {
+      const rowElement = this._rowElements[i];
+      if (!rowElement) {
+        break;
       }
-      const span = row.children[x] as HTMLElement;
-      if (span) {
-        span.style.textDecoration = enabled ? 'underline' : 'none';
-      }
-      if (++x >= cols) {
-        x = 0;
-        y++;
+      if (enabled) {
+        this._linkState[1] = i === y ? x : 0;
+        this._linkState[2] = (i === y2 ? x2 : cols) - 1;
       }
+      const row = i + this._bufferService.buffer.ydisp;
+      const lineData = this._bufferService.buffer.lines.get(row);
+      rowElement.replaceChildren(
+        this._rowFactory.createRow(
+          lineData!,
+          row,
+          row === cursorAbsoluteY,
+          cursorStyle,
+          cursorX,
+          cursorBlink,
+          this.dimensions.css.cell.width,
+          this._bufferService.cols,
+          this._fontMetrics,
+          this._linkState
+        )
+      );
     }
+    this._linkState[0] = 0;
   }
 }

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

@@ -14,9 +14,9 @@ import { MockCoreService, MockDecorationService, MockOptionsService } from 'comm
 import { css } from 'common/Color';
 import { MockCharacterJoinerService, MockCoreBrowserService, MockThemeService } from 'browser/TestUtils.test';
 
-const EMPTY_ELEM_MAPPING = new Int16Array(1000);
 const EMPTY_METRICS = new Uint8Array(1024);
 EMPTY_METRICS.fill(0xFF);
+const EMPTY_LINKSTATE = new Uint8Array(3);
 
 describe('DomRendererRowFactory', () => {
   let dom: jsdom.JSDOM;
@@ -39,7 +39,7 @@ describe('DomRendererRowFactory', () => {
 
   describe('createRow', () => {
     it('should not create anything for an empty row', () => {
-      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
       assert.equal(getFragmentHtml(fragment),
         ''
       );
@@ -49,7 +49,7 @@ describe('DomRendererRowFactory', () => {
       lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, '語', 2, '語'.charCodeAt(0)]));
       // There should be no element for the following "empty" cell
       lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, '', 0, 0]));
-      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
       assert.equal(getFragmentHtml(fragment),
         '<span style="width: 10px;">語</span>'
       );
@@ -57,7 +57,7 @@ describe('DomRendererRowFactory', () => {
 
     it('should add class for cursor and cursor style', () => {
       for (const style of ['block', 'bar', 'underline']) {
-        const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, true, style, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           `<span class="xterm-cursor xterm-cursor-${style}"> </span>`
         );
@@ -65,7 +65,7 @@ describe('DomRendererRowFactory', () => {
     });
 
     it('should add class for cursor blink', () => {
-      const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+      const fragment = rowFactory.createRow(lineData, 0, true, 'block', 0, true, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
       assert.equal(getFragmentHtml(fragment),
         `<span class="xterm-cursor xterm-cursor-blink xterm-cursor-block"> </span>`
       );
@@ -74,7 +74,7 @@ describe('DomRendererRowFactory', () => {
     it('should not render cells that go beyond the terminal\'s columns', () => {
       lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)]));
       lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)]));
-      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 1, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+      const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 1, EMPTY_METRICS, EMPTY_LINKSTATE);
       assert.equal(getFragmentHtml(fragment),
         '<span>a</span>'
       );
@@ -85,7 +85,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.BOLD;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-bold">a</span>'
         );
@@ -95,7 +95,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.ITALIC;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-italic">a</span>'
         );
@@ -105,7 +105,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.DIM;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-dim">a</span>'
         );
@@ -118,7 +118,7 @@ describe('DomRendererRowFactory', () => {
           cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED;
           cell.extended.underlineStyle = UnderlineStyle.SINGLE;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
           assert.equal(getFragmentHtml(fragment),
             '<span class="xterm-underline-1">a</span>'
           );
@@ -129,7 +129,7 @@ describe('DomRendererRowFactory', () => {
           cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED;
           cell.extended.underlineStyle = UnderlineStyle.DOUBLE;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
           assert.equal(getFragmentHtml(fragment),
             '<span class="xterm-underline-2">a</span>'
           );
@@ -140,7 +140,7 @@ describe('DomRendererRowFactory', () => {
           cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED;
           cell.extended.underlineStyle = UnderlineStyle.CURLY;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
           assert.equal(getFragmentHtml(fragment),
             '<span class="xterm-underline-3">a</span>'
           );
@@ -151,7 +151,7 @@ describe('DomRendererRowFactory', () => {
           cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED;
           cell.extended.underlineStyle = UnderlineStyle.DOTTED;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
           assert.equal(getFragmentHtml(fragment),
             '<span class="xterm-underline-4">a</span>'
           );
@@ -162,7 +162,7 @@ describe('DomRendererRowFactory', () => {
           cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.HAS_EXTENDED;
           cell.extended.underlineStyle = UnderlineStyle.DASHED;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
           assert.equal(getFragmentHtml(fragment),
             '<span class="xterm-underline-5">a</span>'
           );
@@ -173,7 +173,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.bg = DEFAULT_ATTR_DATA.bg | BgFlags.OVERLINE;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20,  EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-overline">a</span>'
         );
@@ -183,7 +183,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.STRIKETHROUGH;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-strikethrough">a</span>'
         );
@@ -196,7 +196,7 @@ describe('DomRendererRowFactory', () => {
           cell.fg &= ~Attributes.PCOLOR_MASK;
           cell.fg |= i;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-fg-${i}">a</span>`
           );
@@ -210,7 +210,7 @@ describe('DomRendererRowFactory', () => {
           cell.bg &= ~Attributes.PCOLOR_MASK;
           cell.bg |= i;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-bg-${i}">a</span>`
           );
@@ -222,7 +222,7 @@ describe('DomRendererRowFactory', () => {
         cell.fg |= Attributes.CM_P16 | 2 | FgFlags.INVERSE;
         cell.bg |= Attributes.CM_P16 | 1;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-bg-2 xterm-fg-1">a</span>'
         );
@@ -233,7 +233,7 @@ describe('DomRendererRowFactory', () => {
         cell.fg |= FgFlags.INVERSE;
         cell.bg |= Attributes.CM_P16 | 1;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-bg-257 xterm-fg-1">a</span>'
         );
@@ -243,7 +243,7 @@ describe('DomRendererRowFactory', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg |= Attributes.CM_P16 | 1 | FgFlags.INVERSE;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-bg-1 xterm-fg-257">a</span>'
         );
@@ -256,7 +256,7 @@ describe('DomRendererRowFactory', () => {
           cell.fg &= ~Attributes.PCOLOR_MASK;
           cell.fg |= i;
           lineData.setCell(0, cell);
-          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+          const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
           assert.equal(getFragmentHtml(fragment),
             `<span class="xterm-bold xterm-fg-${i + 8}">a</span>`
           );
@@ -268,7 +268,7 @@ describe('DomRendererRowFactory', () => {
         cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3;
         cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span style="background-color:#040506;color:#010203;">a</span>'
         );
@@ -279,7 +279,7 @@ describe('DomRendererRowFactory', () => {
         cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3 | FgFlags.INVERSE;
         cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6;
         lineData.setCell(0, cell);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span style="background-color:#010203;color:#040506;">a</span>'
         );
@@ -291,7 +291,7 @@ describe('DomRendererRowFactory', () => {
         lineData.setCell(0, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)]));
         lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'b', 1, 'b'.charCodeAt(0)]));
         rowFactory.handleSelectionChanged([1, 0], [2, 0], false);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span>a</span><span class="xterm-decoration-top">b</span>'
         );
@@ -299,7 +299,7 @@ describe('DomRendererRowFactory', () => {
       it('should force whitespace cells to be rendered above the background', () => {
         lineData.setCell(1, CellData.fromCharData([DEFAULT_ATTR, 'a', 1, 'a'.charCodeAt(0)]));
         rowFactory.handleSelectionChanged([0, 0], [2, 0], false);
-        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_ELEM_MAPPING, EMPTY_METRICS);
+        const fragment = rowFactory.createRow(lineData, 0, false, undefined, 0, false, 5, 20, EMPTY_METRICS, EMPTY_LINKSTATE);
         assert.equal(getFragmentHtml(fragment),
           '<span class="xterm-decoration-top"> </span><span class="xterm-decoration-top">a</span>'
         );

src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -49,7 +49,18 @@ export class DomRendererRowFactory {
     this._columnSelectMode = columnSelectMode;
   }
 
-  public createRow(lineData: IBufferLine, row: number, isCursorRow: boolean, cursorStyle: string | undefined, cursorX: number, cursorBlink: boolean, cellWidth: number, cols: number, cellMap: Int16Array, metrics: Uint8Array): DocumentFragment {
+  public createRow(
+    lineData: IBufferLine,
+    row: number,
+    isCursorRow: boolean,
+    cursorStyle: string | undefined,
+    cursorX: number,
+    cursorBlink: boolean,
+    cellWidth: number,
+    cols: number,
+    metrics: Uint8Array,
+    linkState: Uint8Array
+  ): DocumentFragment {
     // NOTE: `cellMap` maps cell positions to a span element index in a row.
     // All positions should be updated, even skipped ones after wide chars or left overs at the end,
     // otherwise the mouse hover logic might mark the wrong elements as underlined.
@@ -71,7 +82,6 @@ export class DomRendererRowFactory {
     }
 
     const colors = this._themeService.colors;
-    let elemIndex = -1;
 
     let charElement: HTMLSpanElement | undefined;
     let cellAmount = 0;
@@ -79,6 +89,9 @@ export class DomRendererRowFactory {
     let oldBg = 0;
     let oldFg = 0;
     let oldExt = 0;
+    let oldLinkHover: number | boolean = false;
+
+    const isHover = linkState[0];
 
     let x = 0;
     for (; x < lineLength; x++) {
@@ -86,9 +99,7 @@ export class DomRendererRowFactory {
       let width = this._workCell.getWidth();
 
       // The character to the left is a wide character, drawing is owned by the char at x-1
-      // still have to update cellMap with current element index
       if (width === 0) {
-        cellMap[x] = elemIndex;
         continue;
       }
 
@@ -126,6 +137,7 @@ export class DomRendererRowFactory {
       const isCursorCell = isCursorRow && x === cursorX;
       const cc = cell.getCode();
       const isCombined = cell.isCombined();
+      const isLinkHover = isHover && x >= linkState[1] && x <= linkState[2];
 
       if (!charElement) {
         charElement = this._document.createElement('span');
@@ -144,6 +156,7 @@ export class DomRendererRowFactory {
           && cc < 1424 && !metrics[cc]
           && !isInSelection
           && !isCursorCell
+          && isLinkHover === oldLinkHover
         ) {
           let c = cell.isInvisible() ? WHITESPACE_CELL_CHAR : (cell.getChars() || WHITESPACE_CELL_CHAR);
           if (c === ' ' && (cell.isUnderline() || cell.isOverline())) {
@@ -154,6 +167,7 @@ export class DomRendererRowFactory {
           oldBg = cell.bg;
           oldFg = cell.fg;
           oldExt = cell.extended.ext;
+          oldLinkHover = isLinkHover;
           continue;
         } else {
           if (cellAmount) {
@@ -168,6 +182,7 @@ export class DomRendererRowFactory {
       oldBg = cell.bg;
       oldFg = cell.fg;
       oldExt = cell.extended.ext;
+      oldLinkHover = isLinkHover;
 
 
 
@@ -256,6 +271,10 @@ export class DomRendererRowFactory {
         charElement.classList.add(STRIKETHROUGH_CLASS);
       }
 
+      if (isLinkHover) {
+        charElement.style.textDecoration = 'underline';
+      }
+
       let fg = cell.getFgColor();
       let fgColorMode = cell.getFgColorMode();
       let bg = cell.getBgColor();
@@ -381,10 +400,7 @@ export class DomRendererRowFactory {
         charElement.textContent = text;
       }
 
-
       fragment.appendChild(charElement);
-      cellMap[x] = ++elemIndex;
-
       x = lastCharX;
     }
 
@@ -394,12 +410,6 @@ export class DomRendererRowFactory {
       charElement.style.width = `${cellWidth * cellAmount}px`;
     }
 
-    // since the loop above might exit early not handling all cells,
-    // also set remaining cell positions to last element index
-    if (x < cols - 1) {
-      cellMap.subarray(x).fill(++elemIndex);
-    }
-
     return fragment;
   }