Show all matches when searching

addons/xterm-addon-search/src/SearchAddon.ts

@@ -3,13 +3,19 @@
  * @license MIT
  */
 
-import { Terminal, IBufferLine, IDisposable, ITerminalAddon, ISelectionPosition } from 'xterm';
+import { Terminal, IDisposable, ITerminalAddon, ISelectionPosition, IDecoration } from 'xterm';
 
 export interface ISearchOptions {
   regex?: boolean;
   wholeWord?: boolean;
   caseSensitive?: boolean;
   incremental?: boolean;
+  decorations?: IDecorationColor;
+}
+
+interface IDecorationColor {
+  matchColor: string;
+  selectedColor: string;
 }
 
 export interface ISearchPosition {
@@ -40,7 +46,14 @@ const LINES_CACHE_TIME_TO_LIVE = 15 * 1000; // 15 secs
 
 export class SearchAddon implements ITerminalAddon {
   private _terminal: Terminal | undefined;
-
+  private _result: ISearchResult | undefined;
+  private _dataChanged: boolean = false;
+  private _cachedSearchTerm: string | undefined;
+  private _selectedDecoration: IDecoration | undefined;
+  private _resultDecorations: Map<number, IDecoration[]> = new Map<number, IDecoration[]>();
+  private _searchResults:  Map<string, ISearchResult> = new Map();
+  private _onDataDisposable: IDisposable | undefined;
+  private _lastSearchOptions: ISearchOptions | undefined;
   /**
    * translateBufferLineToStringWithWrap is a fairly expensive call.
    * We memoize the calls into an array that has a time based ttl.
@@ -53,9 +66,30 @@ export class SearchAddon implements ITerminalAddon {
 
   public activate(terminal: Terminal): void {
     this._terminal = terminal;
+    this._onDataDisposable = this._terminal.onData(() => {
+      this._dataChanged = true;
+      setTimeout(() => {
+        if (this._lastSearchOptions?.decorations && this._cachedSearchTerm && this._resultDecorations.size > 0 && this._lastSearchOptions) {
+          this._highlightAllMatches(this._cachedSearchTerm, this._lastSearchOptions,'previous');
+        }
+      }, 200);
+    });
   }
 
-  public dispose(): void { }
+  public dispose(): void {
+    this.clear();
+    this._onDataDisposable?.dispose();
+  }
+
+  public clear(): void {
+    this._selectedDecoration?.dispose();
+    this._terminal?.clearSelection();
+    this._searchResults.clear();
+    this._resultDecorations.forEach(decorations => decorations.forEach(d=> d.dispose()));
+    this._resultDecorations.clear();
+    this._cachedSearchTerm = undefined;
+    this._dataChanged = true;
+  }
 
   /**
    * Find the next instance of the term, then scroll to and select it. If it
@@ -68,9 +102,60 @@ export class SearchAddon implements ITerminalAddon {
     if (!this._terminal) {
       throw new Error('Cannot use addon until it has been loaded');
     }
+    this._lastSearchOptions = searchOptions;
+    return searchOptions?.decorations ? this._highlightAllMatches(term, searchOptions, 'next') : this._findAndSelectNext(term, searchOptions);
+  }
 
+  private _highlightAllMatches(term: string, searchOptions: ISearchOptions, selectionType: 'next' | 'previous'): boolean {
+    if (!this._terminal) {
+      throw new Error('cannot find all matches with no terminal');
+    }
     if (!term || term.length === 0) {
-      this._terminal.clearSelection();
+      this.clear();
+      return false;
+    }
+    searchOptions = searchOptions || {};
+    if (term === this._cachedSearchTerm && !this._dataChanged) {
+      return selectionType === 'next' ? this._findAndSelectNext(term, searchOptions) : this._findAndSelectPrevious(term, searchOptions);
+    }
+    // new search, clear out the old decorations
+    this._resultDecorations.forEach(decorations => decorations.forEach(d=> d.dispose()));
+    this._resultDecorations.clear();
+    this._searchResults.clear();
+
+    if (!this._terminal.options.overviewRulerWidth) {
+      this._terminal.options.overviewRulerWidth = 10;
+    }
+    searchOptions.incremental = false;
+    let found = selectionType === 'next' ? this._findAndSelectNext(term, searchOptions) : this._findAndSelectPrevious(term, searchOptions);
+    while (found && (!this._result || !this._searchResults.get(`${this._result.row}-${this._result.col}`))) {
+      if (this._result) {
+        this._searchResults.set(`${this._result.row}-${this._result.col}`, this._result);
+      }
+      found = selectionType === 'next' ? this._findAndSelectNext(term, searchOptions) : this._findAndSelectPrevious(term, searchOptions);
+    }
+    this._searchResults.forEach(result => {
+      const resultDecoration = this._createResultDecoration(result, searchOptions.decorations);
+      if (resultDecoration) {
+        const decorationsForLine = this._resultDecorations.get(resultDecoration.marker.line) || [];
+        decorationsForLine.push(resultDecoration);
+        this._resultDecorations.set(resultDecoration.marker.line, decorationsForLine);
+      }
+    });
+    if (this._dataChanged) {
+      this._dataChanged = false;
+    }
+    if (this._searchResults.size > 0) {
+      this._cachedSearchTerm = term;
+    }
+    return this._searchResults.size > 0;
+  }
+
+  private _findAndSelectNext(term: string, searchOptions?: ISearchOptions): boolean {
+    if (!this._terminal || !term || term.length === 0) {
+      this._result = undefined;
+      this._terminal?.clearSelection();
+      this.clear();
       return false;
     }
 
@@ -94,45 +179,43 @@ export class SearchAddon implements ITerminalAddon {
     };
 
     // Search startRow
-    let result = this._findInLine(term, searchPosition, searchOptions);
-
+    this._result = this._findInLine(term, searchPosition, searchOptions);
     // Search from startRow + 1 to end
-    if (!result) {
+    if (!this._result) {
 
       for (let y = startRow + 1; y < this._terminal.buffer.active.baseY + this._terminal.rows; y++) {
         searchPosition.startRow = y;
         searchPosition.startCol = 0;
         // If the current line is wrapped line, increase index of column to ignore the previous scan
         // Otherwise, reset beginning column index to zero with set new unwrapped line index
-        result = this._findInLine(term, searchPosition, searchOptions);
-        if (result) {
+        this._result = this._findInLine(term, searchPosition, searchOptions);
+        if (this._result) {
           break;
         }
       }
     }
     // If we hit the bottom and didn't search from the very top wrap back up
-    if (!result && startRow !== 0) {
+    if (!this._result && startRow !== 0) {
       for (let y = 0; y < startRow; y++) {
         searchPosition.startRow = y;
         searchPosition.startCol = 0;
-        result = this._findInLine(term, searchPosition, searchOptions);
-        if (result) {
+        this._result = this._findInLine(term, searchPosition, searchOptions);
+        if (this._result) {
           break;
         }
       }
     }
 
     // If there is only one result, wrap back and return selection if it exists.
-    if (!result && currentSelection) {
+    if (!this._result && currentSelection) {
       searchPosition.startRow = currentSelection.startRow;
       searchPosition.startCol = 0;
-      result = this._findInLine(term, searchPosition, searchOptions);
+      this._result = this._findInLine(term, searchPosition, searchOptions);
     }
 
     // Set selection and scroll if a result was found
-    return this._selectResult(result);
+    return this._selectResult(this._result, searchOptions?.decorations);
   }
-
   /**
    * Find the previous instance of the term, then scroll to and select it. If it
    * doesn't exist, do nothing.
@@ -144,16 +227,26 @@ export class SearchAddon implements ITerminalAddon {
     if (!this._terminal) {
       throw new Error('Cannot use addon until it has been loaded');
     }
+    this._lastSearchOptions = searchOptions;
+    return searchOptions?.decorations ? this._highlightAllMatches(term, searchOptions, 'previous') : this._findAndSelectPrevious(term, searchOptions);
+  }
 
-    if (!term || term.length === 0) {
-      this._terminal.clearSelection();
+  private _findAndSelectPrevious(term: string, searchOptions?: ISearchOptions): boolean {
+    if (!this._terminal) {
+      throw new Error('Cannot use addon until it has been loaded');
+    }
+
+    if (!this._terminal || !term || term.length === 0) {
+      this._result = undefined;
+      this._terminal?.clearSelection();
+      this.clear();
       return false;
     }
 
-    const isReverseSearch = true;
     let startRow = this._terminal.buffer.active.baseY + this._terminal.rows;
     let startCol = this._terminal.cols;
-    let result: ISearchResult | undefined;
+    const isReverseSearch = true;
+
     const incremental = searchOptions ? searchOptions.incremental : false;
     let currentSelection: ISelectionPosition | undefined;
     if (this._terminal.hasSelection()) {
@@ -171,47 +264,47 @@ export class SearchAddon implements ITerminalAddon {
 
     if (incremental) {
       // Try to expand selection to right first.
-      result = this._findInLine(term, searchPosition, searchOptions, false);
-      const isOldResultHighlighted = result && result.row === startRow && result.col === startCol;
+      this._result = this._findInLine(term, searchPosition, searchOptions, false);
+      const isOldResultHighlighted = this._result && this._result.row === startRow && this._result.col === startCol;
       if (!isOldResultHighlighted) {
         // If selection was not able to be expanded to the right, then try reverse search
         if (currentSelection) {
           searchPosition.startRow = currentSelection.endRow;
           searchPosition.startCol = currentSelection.endColumn;
         }
-        result = this._findInLine(term, searchPosition, searchOptions, true);
+        this._result = this._findInLine(term, searchPosition, searchOptions, true);
       }
     } else {
-      result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
+      this._result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
     }
 
     // Search from startRow - 1 to top
-    if (!result) {
+    if (!this._result) {
       searchPosition.startCol = Math.max(searchPosition.startCol, this._terminal.cols);
       for (let y = startRow - 1; y >= 0; y--) {
         searchPosition.startRow = y;
-        result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
-        if (result) {
+        this._result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
+        if (this._result) {
           break;
         }
       }
     }
     // If we hit the top and didn't search from the very bottom wrap back down
-    if (!result && startRow !== (this._terminal.buffer.active.baseY + this._terminal.rows)) {
+    if (!this._result && startRow !== (this._terminal.buffer.active.baseY + this._terminal.rows)) {
       for (let y = (this._terminal.buffer.active.baseY + this._terminal.rows); y >= startRow; y--) {
         searchPosition.startRow = y;
-        result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
-        if (result) {
+        this._result = this._findInLine(term, searchPosition, searchOptions, isReverseSearch);
+        if (this._result) {
           break;
         }
       }
     }
 
     // If there is only one result, return true.
-    if (!result && currentSelection) return true;
+    if (!this._result && currentSelection) return true;
 
-    // Set selection and scroll if a result was found
-    return this._selectResult(result);
+    // Set selection and scroll if a this._result was found
+    return this._selectResult(this._result, searchOptions?.decorations);
   }
 
   /**
@@ -446,15 +539,24 @@ export class SearchAddon implements ITerminalAddon {
   /**
    * Selects and scrolls to a result.
    * @param result The result to select.
-   * @return Whethera result was selected.
+   * @return Whether a result was selected.
    */
-  private _selectResult(result: ISearchResult | undefined): boolean {
+  private _selectResult(result: ISearchResult | undefined, decorations?: IDecorationColor): boolean {
     const terminal = this._terminal!;
+    this._selectedDecoration?.dispose();
     if (!result) {
       terminal.clearSelection();
       return false;
     }
     terminal.select(result.col, result.row, result.size);
+    if (decorations?.selectedColor) {
+      const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row);
+      if (marker) {
+        this._selectedDecoration = terminal.registerDecoration({ marker, overviewRulerOptions: { color: decorations.selectedColor } });
+        this._selectedDecoration?.onRender((e) => this._applyStyles(e, decorations.selectedColor, result));
+      }
+    }
+
     // If it is not in the viewport then we scroll else it just gets selected
     if (result.row >= (terminal.buffer.active.viewportY + terminal.rows) || result.row < terminal.buffer.active.viewportY) {
       let scroll = result.row - terminal.buffer.active.viewportY;
@@ -463,4 +565,44 @@ export class SearchAddon implements ITerminalAddon {
     }
     return true;
   }
+
+  /**
+   * Applies styles to the decoration when it is rendered
+   * @param element the decoration's element
+   * @param color the color to apply
+   * @param result the search result associated with the decoration
+   * @returns
+   */
+  private _applyStyles(element: HTMLElement, color: string, result: ISearchResult): void {
+    if (element.clientWidth <= 0) {
+      return;
+    }
+    if (!element.classList.contains('xterm-find-result-decoration')) {
+      element.classList.add('xterm-find-result-decoration');
+      // decoration's clientWidth = actualCellWidth
+      element.style.left = `${element.clientWidth * result.col}px`;
+      element.style.width = `${element.clientWidth * result.term.length}px`;
+      element.style.backgroundColor = color;
+    }
+  }
+
+  /**
+   * Creates a decoration for the result and applies styles
+   * @param result the search result for which to create the decoration
+   * @param color the color to use for the decoration
+   * @returns the {@link IDecoration} or undefined if the marker has already been disposed of
+   */
+  private _createResultDecoration(result: ISearchResult, decorations?: IDecorationColor): IDecoration | undefined {
+    const terminal = this._terminal!;
+    const marker = terminal.registerMarker(-terminal.buffer.active.baseY - terminal.buffer.active.cursorY + result.row);
+    if (!marker || !decorations?.matchColor) {
+      return undefined;
+    }
+    const findResultDecoration = terminal.registerDecoration(
+      { marker,
+        overviewRulerOptions: this._resultDecorations.get(marker.line) && !this._dataChanged ? undefined : { color: decorations.matchColor, position: 'center' }
+      });
+    findResultDecoration?.onRender((e) => this._applyStyles(e, decorations.matchColor, result));
+    return findResultDecoration;
+  }
 }

addons/xterm-addon-search/typings/xterm-addon-search.d.ts

@@ -50,19 +50,27 @@ declare module 'xterm-addon-search' {
     public dispose(): void;
 
     /**
-     * Search forwards for the next result that matches the search term and
-     * options.
+     * Find all instances of the term, selecting the next one with each
+     * enter. If it doesn't exist, do nothing.
      * @param term The search term.
      * @param searchOptions The options for the search.
      */
-    public findNext(term: string, searchOptions?: ISearchOptions): boolean;
+      public find(term: string, searchOptions?: ISearchOptions): boolean;
 
     /**
-     * Search backwards for the previous result that matches the search term and
+     * Search forwards for the next result that matches the search term and
      * options.
      * @param term The search term.
      * @param searchOptions The options for the search.
      */
-    public findPrevious(term: string, searchOptions?: ISearchOptions): boolean;
+      public findNext(term: string, searchOptions?: ISearchOptions): boolean;
+
+      /**
+       * Search backwards for the previous result that matches the search term and
+       * options.
+       * @param term The search term.
+       * @param searchOptions The options for the search.
+       */
+      public findPrevious(term: string, searchOptions?: ISearchOptions): boolean;
   }
 }

css/xterm.css

@@ -179,6 +179,10 @@
 	position: absolute;
 }
 
+.xterm-find-result-decoration {
+   opacity: 0.6;
+}
+
 .xterm-decoration-overview-ruler {
     z-index: 7;
     position: absolute;