feat: add underline support to DOM renderer

part of #1896

src/renderer/dom/DomRendererRowFactory.test.ts

@@ -100,6 +100,16 @@ describe('DomRendererRowFactory', () => {
         );
       });
 
+      it('should add class for underline', () => {
+        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
+        cell.fg = DEFAULT_ATTR_DATA.fg | FgFlags.UNDERLINE;
+        lineData.setCell(0, cell);
+        const fragment = rowFactory.createRow(lineData, false, undefined, 0, false, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span class="xterm-underline">a</span>'
+        );
+      });
+
       it('should add classes for 256 foreground colors', () => {
         const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
         cell.fg |= Attributes.CM_P256;

src/renderer/dom/DomRendererRowFactory.ts

@@ -11,6 +11,7 @@ import { CellData, AttributeData } from '../../BufferLine';
 export const BOLD_CLASS = 'xterm-bold';
 export const DIM_CLASS = 'xterm-dim';
 export const ITALIC_CLASS = 'xterm-italic';
+export const UNDERLINE_CLASS = 'xterm-underline';
 export const CURSOR_CLASS = 'xterm-cursor';
 export const CURSOR_BLINK_CLASS = 'xterm-cursor-blink';
 export const CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block';
@@ -88,6 +89,10 @@ export class DomRendererRowFactory {
         charElement.classList.add(DIM_CLASS);
       }
 
+      if (this._workCell.isUnderline()) {
+        charElement.classList.add(UNDERLINE_CLASS);
+      }
+
       charElement.textContent = this._workCell.getChars() || WHITESPACE_CELL_CHAR;
 
       const swapColor = this._workCell.isInverse();

src/xterm.css

@@ -165,3 +165,7 @@
 .xterm-dim {
     opacity: 0.5;
 }
+
+.xterm-underline {
+    text-decoration: underline;
+}