@xterm/addon-serialize 0.15.0-beta.27 → 0.15.0-beta.271

package/src/SerializeAddon.ts

@@ -7,8 +7,10 @@
 
 import type { IBuffer, IBufferCell, IBufferRange, ITerminalAddon, Terminal } from '@xterm/xterm';
 import type { IHTMLSerializeOptions, SerializeAddon as ISerializeApi, ISerializeOptions, ISerializeRange } from '@xterm/addon-serialize';
-import { IAttributeData, IColor } from 'common/Types';
+import { IColor } from 'common/Types';
+import { IAttributeData } from 'common/buffer/Types';
 import { DEFAULT_ANSI_COLORS } from 'browser/Types';
+import { UnderlineStyle } from 'common/buffer/Constants';
 
 function constrain(value: number, low: number, high: number): number {
   return Math.max(low, Math.min(value, high));
@@ -82,10 +84,32 @@ function equalBg(cell1: IBufferCell | IAttributeData, cell2: IBufferCell): boole
     && cell1.getBgColor() === cell2.getBgColor();
 }
 
+function equalUnderline(cell1: IBufferCell | IAttributeData, cell2: IBufferCell): boolean {
+  // If neither cell has underline, consider them equal regardless of internal underline color
+  // values
+  if (!cell1.isUnderline() && !cell2.isUnderline()) {
+    return true;
+  }
+  if (cell1.getUnderlineStyle() !== cell2.getUnderlineStyle()) {
+    return false;
+  }
+  const cell1Default = cell1.isUnderlineColorDefault();
+  const cell2Default = cell2.isUnderlineColorDefault();
+  if (cell1Default && cell2Default) {
+    return true;
+  }
+  if (cell1Default !== cell2Default) {
+    return false;
+  }
+  return cell1.getUnderlineColor() === cell2.getUnderlineColor()
+    && cell1.getUnderlineColorMode() === cell2.getUnderlineColorMode();
+}
+
 function equalFlags(cell1: IBufferCell | IAttributeData, cell2: IBufferCell): boolean {
   return cell1.isInverse() === cell2.isInverse()
     && cell1.isBold() === cell2.isBold()
     && cell1.isUnderline() === cell2.isUnderline()
+    && equalUnderline(cell1, cell2)
     && cell1.isOverline() === cell2.isOverline()
     && cell1.isBlink() === cell2.isBlink()
     && cell1.isInvisible() === cell2.isInvisible()
@@ -94,6 +118,16 @@ function equalFlags(cell1: IBufferCell | IAttributeData, cell2: IBufferCell): bo
     && cell1.isStrikethrough() === cell2.isStrikethrough();
 }
 
+function attributesEquals(cell1: IBufferCell | IAttributeData, cell2: IBufferCell): boolean {
+  const cell1AsBufferCell = cell1 as IBufferCell;
+  if (typeof cell1AsBufferCell.attributesEquals === 'function') {
+    return cell1AsBufferCell.attributesEquals(cell2);
+  }
+  return equalFg(cell1, cell2)
+    && equalBg(cell1, cell2)
+    && equalFlags(cell1, cell2);
+}
+
 class StringSerializeHandler extends BaseSerializeHandler {
   private _rowIndex: number = 0;
   private _allRows: string[] = new Array<string>();
@@ -139,7 +173,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
   private _thisRowLastSecondChar: IBufferCell = this._buffer.getNullCell();
   private _nextRowFirstChar: IBufferCell = this._buffer.getNullCell();
   protected _rowEnd(row: number, isLastRow: boolean): void {
-    // if there is colorful empty cell at line end, whe must pad it back, or the the color block
+    // if there is colorful empty cell at line end, we must pad it back, or the color block
     // will missing
     if (this._nullCellCount > 0 && !equalBg(this._cursorStyle, this._backgroundCell)) {
       // use clear right to set background.
@@ -187,7 +221,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
             // you can't use control sequence to move cursor to (x === row)
             (thisRowLastChar.getChars() || thisRowLastChar.getWidth() === 0) &&
             // change background of the first wrapped cell also affects BCE
-            // so we mark it as invalid to simply the process to determine line separator
+            // so we mark it as invalid to simplify the process to determine line separator
             equalBg(thisRowLastChar, nextRowFirstChar)
           ) {
             isValid = true;
@@ -199,7 +233,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
             isNextRowFirstCharDoubleWidth &&
             (thisRowLastSecondChar.getChars() || thisRowLastSecondChar.getWidth() === 0) &&
             // change background of the first wrapped cell also affects BCE
-            // so we mark it as invalid to simply the process to determine line separator
+            // so we mark it as invalid to simplify the process to determine line separator
             equalBg(thisRowLastChar, nextRowFirstChar) &&
             equalBg(thisRowLastSecondChar, nextRowFirstChar)
           ) {
@@ -243,6 +277,9 @@ class StringSerializeHandler extends BaseSerializeHandler {
 
   private _diffStyle(cell: IBufferCell | IAttributeData, oldCell: IBufferCell): number[] {
     const sgrSeq: number[] = [];
+    if (attributesEquals(cell, oldCell)) {
+      return sgrSeq;
+    }
     const fgChanged = !equalFg(cell, oldCell);
     const bgChanged = !equalBg(cell, oldCell);
     const flagsChanged = !equalFlags(cell, oldCell);
@@ -274,7 +311,28 @@ class StringSerializeHandler extends BaseSerializeHandler {
         if (flagsChanged) {
           if (cell.isInverse() !== oldCell.isInverse()) { sgrSeq.push(cell.isInverse() ? 7 : 27); }
           if (cell.isBold() !== oldCell.isBold()) { sgrSeq.push(cell.isBold() ? 1 : 22); }
-          if (cell.isUnderline() !== oldCell.isUnderline()) { sgrSeq.push(cell.isUnderline() ? 4 : 24); }
+          if (!equalUnderline(cell, oldCell)) {
+            const style = cell.getUnderlineStyle();
+            if (style === UnderlineStyle.NONE) {
+              sgrSeq.push(24);
+            } else if (style === UnderlineStyle.SINGLE && cell.isUnderlineColorDefault()) {
+              sgrSeq.push(4);
+            } else {
+              // Use SGR 4:X format for underline styles
+              sgrSeq.push('4:' + style as unknown as number);
+              // Handle underline color
+              if (!cell.isUnderlineColorDefault()) {
+                const color = cell.getUnderlineColor();
+                if (cell.isUnderlineColorRGB()) {
+                  sgrSeq.push('58:2::' + ((color >>> 16) & 0xFF) + ':' + ((color >>> 8) & 0xFF) + ':' + (color & 0xFF) as unknown as number);
+                } else {
+                  sgrSeq.push('58:5:' + color as unknown as number);
+                }
+              }
+            }
+          } else if (cell.isUnderline() !== oldCell.isUnderline()) {
+            sgrSeq.push(cell.isUnderline() ? 4 : 24);
+          }
           if (cell.isOverline() !== oldCell.isOverline()) { sgrSeq.push(cell.isOverline() ? 53 : 55); }
           if (cell.isBlink() !== oldCell.isBlink()) { sgrSeq.push(cell.isBlink() ? 5 : 25); }
           if (cell.isInvisible() !== oldCell.isInvisible()) { sgrSeq.push(cell.isInvisible() ? 8 : 28); }
@@ -422,7 +480,7 @@ class StringSerializeHandler extends BaseSerializeHandler {
   }
 }
 
-export class SerializeAddon implements ITerminalAddon , ISerializeApi {
+export class SerializeAddon implements ITerminalAddon, ISerializeApi {
   private _terminal: Terminal | undefined;
 
   public activate(terminal: Terminal): void {
@@ -478,6 +536,25 @@ export class SerializeAddon implements ITerminalAddon , ISerializeApi {
     return '';
   }
 
+  /**
+   * Serializes the scroll region (DECSTBM) if it's not set to the full terminal size.
+   * Uses internal API access since scroll region is not exposed in the public API.
+   */
+  private _serializeScrollRegion(terminal: Terminal): string {
+    // HACK: Internal API access since scroll region is not exposed in the public API
+    const buffer = (terminal as any)._core.buffer;
+    const scrollTop: number = buffer.scrollTop;
+    const scrollBottom: number = buffer.scrollBottom;
+
+    // Only serialize if scroll region is not the default (full terminal size)
+    if (scrollTop !== 0 || scrollBottom !== terminal.rows - 1) {
+      // DECSTBM uses 1-based indices: CSI Ps ; Ps r
+      return `\x1b[${scrollTop + 1};${scrollBottom + 1}r`;
+    }
+
+    return '';
+  }
+
   private _serializeModes(terminal: Terminal): string {
     let content = '';
     const modes = terminal.modes;
@@ -505,6 +582,12 @@ export class SerializeAddon implements ITerminalAddon , ISerializeApi {
       }
     }
 
+    // Cursor visibility (DECTCEM)
+    // Default: visible
+    if (!modes.showCursor) {
+      content += '\x1b[?25l';
+    }
+
     return content;
   }
 
@@ -527,9 +610,10 @@ export class SerializeAddon implements ITerminalAddon , ISerializeApi {
       }
     }
 
-    // Modes
+    // Modes and scroll region
     if (!options?.excludeModes) {
       content += this._serializeModes(this._terminal);
+      content += this._serializeScrollRegion(this._terminal);
     }
 
     return content;
@@ -540,7 +624,7 @@ export class SerializeAddon implements ITerminalAddon , ISerializeApi {
       throw new Error('Cannot use addon until it has been loaded');
     }
 
-    return this._serializeBufferAsHTML(this._terminal, options || {});
+    return this._serializeBufferAsHTML(this._terminal, options ?? {});
   }
 
   public dispose(): void { }
@@ -569,20 +653,6 @@ export class HTMLSerializeHandler extends BaseSerializeHandler {
     }
   }
 
-  private _padStart(target: string, targetLength: number, padString: string): string {
-    targetLength = targetLength >> 0;
-    padString = padString ?? ' ';
-    if (target.length > targetLength) {
-      return target;
-    }
-
-    targetLength -= target.length;
-    if (targetLength > padString.length) {
-      padString += padString.repeat(targetLength / padString.length);
-    }
-    return padString.slice(0, targetLength) + target;
-  }
-
   protected _beforeSerialize(rows: number, start: number, end: number): void {
     this._htmlContent += '<html><body><!--StartFragment--><pre>';
 
@@ -619,7 +689,7 @@ export class HTMLSerializeHandler extends BaseSerializeHandler {
         (color >>  8) & 255,
         (color      ) & 255
       ];
-      return '#' + rgb.map(x => this._padStart(x.toString(16), 2, '0')).join('');
+      return '#' + rgb.map(x => x.toString(16).padStart(2, '0')).join('');
     }
     if (isFg ? cell.isFgPalette() : cell.isBgPalette()) {
       return this._ansiColors[color].css;
@@ -627,9 +697,47 @@ export class HTMLSerializeHandler extends BaseSerializeHandler {
     return undefined;
   }
 
+  private _getUnderlineColor(cell: IBufferCell): string | undefined {
+    if (cell.isUnderlineColorDefault()) {
+      return undefined;
+    }
+    const color = cell.getUnderlineColor();
+    if (cell.isUnderlineColorRGB()) {
+      const rgb = [
+        (color >> 16) & 255,
+        (color >>  8) & 255,
+        (color      ) & 255
+      ];
+      return '#' + rgb.map(x => x.toString(16).padStart(2, '0')).join('');
+    }
+    // Palette color
+    return this._ansiColors[color].css;
+  }
+
+  private _getUnderlineStyle(cell: IBufferCell): string {
+    switch (cell.getUnderlineStyle()) {
+      case UnderlineStyle.SINGLE:
+        return 'underline';
+      case UnderlineStyle.DOUBLE:
+        return 'underline double';
+      case UnderlineStyle.CURLY:
+        return 'underline wavy';
+      case UnderlineStyle.DOTTED:
+        return 'underline dotted';
+      case UnderlineStyle.DASHED:
+        return 'underline dashed';
+      default:
+        return 'underline';
+    }
+  }
+
   private _diffStyle(cell: IBufferCell, oldCell: IBufferCell): string[] | undefined {
     const content: string[] = [];
 
+    if (attributesEquals(cell, oldCell)) {
+      return undefined;
+    }
+
     const fgChanged = !equalFg(cell, oldCell);
     const bgChanged = !equalBg(cell, oldCell);
     const flagsChanged = !equalFlags(cell, oldCell);
@@ -647,14 +755,36 @@ export class HTMLSerializeHandler extends BaseSerializeHandler {
 
       if (cell.isInverse()) { content.push('color: #000000; background-color: #BFBFBF;'); }
       if (cell.isBold()) { content.push('font-weight: bold;'); }
-      if (cell.isUnderline() && cell.isOverline()) { content.push('text-decoration: overline underline;'); }
-      else if (cell.isUnderline()) { content.push('text-decoration: underline;'); }
-      else if (cell.isOverline()) { content.push('text-decoration: overline;'); }
-      if (cell.isBlink()) { content.push('text-decoration: blink;'); }
+
+      // Handle text-decoration (underline, overline, strikethrough, blink)
+      const decorations: string[] = [];
+      if (cell.isUnderline()) {
+        decorations.push(this._getUnderlineStyle(cell));
+      }
+      if (cell.isOverline()) {
+        decorations.push('overline');
+      }
+      if (cell.isStrikethrough()) {
+        decorations.push('line-through');
+      }
+      if (cell.isBlink()) {
+        decorations.push('blink');
+      }
+      if (decorations.length > 0) {
+        content.push('text-decoration: ' + decorations.join(' ') + ';');
+      }
+
+      // Handle underline color
+      if (cell.isUnderline()) {
+        const underlineColor = this._getUnderlineColor(cell);
+        if (underlineColor) {
+          content.push('text-decoration-color: ' + underlineColor + ';');
+        }
+      }
+
       if (cell.isInvisible()) { content.push('visibility: hidden;'); }
       if (cell.isItalic()) { content.push('font-style: italic;'); }
       if (cell.isDim()) { content.push('opacity: 0.5;'); }
-      if (cell.isStrikethrough()) { content.push('text-decoration: line-through;'); }
 
       return content;
     }