src/Linkifier.ts

   1 /**
   2  * @license MIT
   3  */
   4
   5 import { LinkMatcherOptions } from './Interfaces';
   6 import { LinkMatcher, LinkMatcherHandler, LinkMatcherValidationCallback } from './Types';
   7
   8 const INVALID_LINK_CLASS = 'xterm-invalid-link';
   9
  10 const protocolClause = '(https?:\\/\\/)';
  11 const domainCharacterSet = '[\\da-z\\.-]+';
  12 const negatedDomainCharacterSet = '[^\\da-z\\.-]+';
  13 const domainBodyClause = '(' + domainCharacterSet + ')';
  14 const tldClause = '([a-z\\.]{2,6})';
  15 const ipClause = '((\\d{1,3}\\.){3}\\d{1,3})';
  16 const localHostClause = '(localhost)';
  17 const portClause = '(:\\d{1,5})';
  18 const hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + '|' + localHostClause + ')' + portClause + '?';
  19 const pathClause = '(\\/[\\/\\w\\.\\-%~]*)*';
  20 const queryStringHashFragmentCharacterSet = '[0-9\\w\\[\\]\\(\\)\\/\\?\\!#@$%&\'*+,:;~\\=\\.\\-]*';
  21 const queryStringClause = '(\\?' + queryStringHashFragmentCharacterSet + ')?';
  22 const hashFragmentClause = '(#' + queryStringHashFragmentCharacterSet + ')?';
  23 const negatedPathCharacterSet = '[^\\/\\w\\.\\-%]+';
  24 const bodyClause = hostClause + pathClause + queryStringClause + hashFragmentClause;
  25 const start = '(?:^|' + negatedDomainCharacterSet + ')(';
  26 const end = ')($|' + negatedPathCharacterSet + ')';
  27 const strictUrlRegex = new RegExp(start + protocolClause + bodyClause + end);
  28
  29 /**
  30  * The ID of the built in http(s) link matcher.
  31  */
  32 const HYPERTEXT_LINK_MATCHER_ID = 0;
  33
  34 /**
  35  * The Linkifier applies links to rows shortly after they have been refreshed.
  36  */
  37 export class Linkifier {
  38   /**
  39    * The time to wait after a row is changed before it is linkified. This prevents
  40    * the costly operation of searching every row multiple times, potentially a
  41    * huge amount of times.
  42    */
  43   protected static TIME_BEFORE_LINKIFY = 200;
  44
  45   protected _linkMatchers: LinkMatcher[];
  46
  47   private _document: Document;
  48   private _rows: HTMLElement[];
  49   private _rowTimeoutIds: number[];
  50   private _nextLinkMatcherId = HYPERTEXT_LINK_MATCHER_ID;
  51
  52   constructor() {
  53     this._rowTimeoutIds = [];
  54     this._linkMatchers = [];
  55     this.registerLinkMatcher(strictUrlRegex, null, { matchIndex: 1 });
  56   }
  57
  58   /**
  59    * Attaches the linkifier to the DOM, enabling linkification.
  60    * @param document The document object.
  61    * @param rows The array of rows to apply links to.
  62    */
  63   public attachToDom(document: Document, rows: HTMLElement[]) {
  64     this._document = document;
  65     this._rows = rows;
  66   }
  67
  68   /**
  69    * Queues a row for linkification.
  70    * @param {number} rowIndex The index of the row to linkify.
  71    */
  72   public linkifyRow(rowIndex: number): void {
  73     // Don't attempt linkify if not yet attached to DOM
  74     if (!this._document) {
  75       return;
  76     }
  77
  78     const timeoutId = this._rowTimeoutIds[rowIndex];
  79     if (timeoutId) {
  80       clearTimeout(timeoutId);
  81     }
  82     this._rowTimeoutIds[rowIndex] = setTimeout(this._linkifyRow.bind(this, rowIndex), Linkifier.TIME_BEFORE_LINKIFY);
  83   }
  84
  85   /**
  86    * Attaches a handler for hypertext links, overriding default <a> behavior
  87    * for standard http(s) links.
  88    * @param {LinkHandler} handler The handler to use, this can be cleared with
  89    * null.
  90    */
  91   public setHypertextLinkHandler(handler: LinkMatcherHandler): void {
  92     this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].handler = handler;
  93   }
  94
  95   /**
  96    * Attaches a validation callback for hypertext links.
  97    * @param {LinkMatcherValidationCallback} callback The callback to use, this
  98    * can be cleared with null.
  99    */
 100   public setHypertextValidationCallback(callback: LinkMatcherValidationCallback): void {
 101     this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].validationCallback = callback;
 102   }
 103
 104   /**
 105    * Registers a link matcher, allowing custom link patterns to be matched and
 106    * handled.
 107    * @param {RegExp} regex The regular expression to search for, specifically
 108    * this searches the textContent of the rows. You will want to use \s to match
 109    * a space ' ' character for example.
 110    * @param {LinkHandler} handler The callback when the link is called.
 111    * @param {LinkMatcherOptions} [options] Options for the link matcher.
 112    * @return {number} The ID of the new matcher, this can be used to deregister.
 113    */
 114   public registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options: LinkMatcherOptions = {}): number {
 115     if (this._nextLinkMatcherId !== HYPERTEXT_LINK_MATCHER_ID && !handler) {
 116       throw new Error('handler must be defined');
 117     }
 118     const matcher: LinkMatcher = {
 119       id: this._nextLinkMatcherId++,
 120       regex,
 121       handler,
 122       matchIndex: options.matchIndex,
 123       validationCallback: options.validationCallback,
 124       priority: options.priority || 0
 125     };
 126     this._addLinkMatcherToList(matcher);
 127     return matcher.id;
 128   }
 129
 130   /**
 131    * Inserts a link matcher to the list in the correct position based on the
 132    * priority of each link matcher. New link matchers of equal priority are
 133    * considered after older link matchers.
 134    * @param matcher The link matcher to be added.
 135    */
 136   private _addLinkMatcherToList(matcher: LinkMatcher): void {
 137     if (this._linkMatchers.length === 0) {
 138       this._linkMatchers.push(matcher);
 139       return;
 140     }
 141
 142     for (let i = this._linkMatchers.length - 1; i >= 0; i--) {
 143       if (matcher.priority <= this._linkMatchers[i].priority) {
 144         this._linkMatchers.splice(i + 1, 0, matcher);
 145         return;
 146       }
 147     }
 148
 149     this._linkMatchers.splice(0, 0, matcher);
 150   }
 151
 152   /**
 153    * Deregisters a link matcher if it has been registered.
 154    * @param {number} matcherId The link matcher's ID (returned after register)
 155    * @return {boolean} Whether a link matcher was found and deregistered.
 156    */
 157   public deregisterLinkMatcher(matcherId: number): boolean {
 158     // ID 0 is the hypertext link matcher which cannot be deregistered
 159     for (let i = 1; i < this._linkMatchers.length; i++) {
 160       if (this._linkMatchers[i].id === matcherId) {
 161         this._linkMatchers.splice(i, 1);
 162         return true;
 163       }
 164     }
 165     return false;
 166   }
 167
 168   /**
 169    * Linkifies a row.
 170    * @param {number} rowIndex The index of the row to linkify.
 171    */
 172   private _linkifyRow(rowIndex: number): void {
 173     const row = this._rows[rowIndex];
 174     if (!row) {
 175       return;
 176     }
 177     const text = row.textContent;
 178     for (let i = 0; i < this._linkMatchers.length; i++) {
 179       const matcher = this._linkMatchers[i];
 180       const linkElements = this._doLinkifyRow(row, matcher);
 181         if (linkElements.length > 0) {
 182         // Fire validation callback
 183         if (matcher.validationCallback) {
 184           for (let j = 0; j < linkElements.length; j++) {
 185             const element = linkElements[j];
 186             matcher.validationCallback(element.textContent, element, isValid => {
 187               if (!isValid) {
 188                 element.classList.add(INVALID_LINK_CLASS);
 189               }
 190             });
 191           }
 192         }
 193         // Only allow a single LinkMatcher to trigger on any given row.
 194         return;
 195       }
 196     }
 197   }
 198
 199   /**
 200    * Linkifies a row given a specific handler.
 201    * @param {HTMLElement} row The row to linkify.
 202    * @param {LinkMatcher} matcher The link matcher for this line.
 203    * @return The link element(s) that were added.
 204    */
 205   private _doLinkifyRow(row: HTMLElement, matcher: LinkMatcher): HTMLElement[] {
 206     // Iterate over nodes as we want to consider text nodes
 207     let result = [];
 208     const isHttpLinkMatcher = matcher.id === HYPERTEXT_LINK_MATCHER_ID;
 209     const nodes = row.childNodes;
 210
 211     // Find the first match
 212     let match = row.textContent.match(matcher.regex);
 213     if (!match || match.length === 0) {
 214       return result;
 215     }
 216     let uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
 217     // Set the next searches start index
 218     let rowStartIndex = match.index + uri.length;
 219
 220     for (let i = 0; i < nodes.length; i++) {
 221       const node = nodes[i];
 222       const searchIndex = node.textContent.indexOf(uri);
 223       if (searchIndex >= 0) {
 224         const linkElement = this._createAnchorElement(uri, matcher.handler, isHttpLinkMatcher);
 225         if (node.textContent.length === uri.length) {
 226           // Matches entire string
 227           if (node.nodeType === 3 /*Node.TEXT_NODE*/) {
 228             this._replaceNode(node, linkElement);
 229           } else {
 230             const element = (<HTMLElement>node);
 231             if (element.nodeName === 'A') {
 232               // This row has already been linkified
 233               return result;
 234             }
 235             element.innerHTML = '';
 236             element.appendChild(linkElement);
 237           }
 238         } else if (node.childNodes.length > 1) {
 239           // Matches part of string in an element with multiple child nodes
 240           for (let j = 0; j < node.childNodes.length; j++) {
 241             const childNode = node.childNodes[j];
 242             const childSearchIndex = childNode.textContent.indexOf(uri);
 243             if (childSearchIndex !== -1) {
 244               // Match found in currentNode
 245               this._replaceNodeSubstringWithNode(childNode, linkElement, uri, childSearchIndex);
 246               // Don't need to count nodesAdded by replacing the node as this
 247               // is a child node, not a top-level node.
 248               break;
 249             }
 250           }
 251         } else {
 252           // Matches part of string in a single text node
 253           const nodesAdded = this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex);
 254           // No need to consider the new nodes
 255           i += nodesAdded;
 256         }
 257         result.push(linkElement);
 258
 259         // Find the next match
 260         match = row.textContent.substring(rowStartIndex).match(matcher.regex);
 261         if (!match || match.length === 0) {
 262           return result;
 263         }
 264         uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
 265         rowStartIndex += match.index + uri.length;
 266       }
 267     }
 268     return result;
 269   }
 270
 271   /**
 272    * Creates a link anchor element.
 273    * @param {string} uri The uri of the link.
 274    * @return {HTMLAnchorElement} The link.
 275    */
 276   private _createAnchorElement(uri: string, handler: LinkMatcherHandler, isHypertextLinkHandler: boolean): HTMLAnchorElement {
 277     const element = this._document.createElement('a');
 278     element.textContent = uri;
 279     element.draggable = false;
 280     if (isHypertextLinkHandler) {
 281       element.href = uri;
 282       // Force link on another tab so work is not lost
 283       element.target = '_blank';
 284       element.addEventListener('click', (event: MouseEvent) => {
 285         if (handler) {
 286           return handler(event, uri);
 287         }
 288       });
 289     } else {
 290       element.addEventListener('click', (event: MouseEvent) => {
 291         // Don't execute the handler if the link is flagged as invalid
 292         if (element.classList.contains(INVALID_LINK_CLASS)) {
 293           return;
 294         }
 295         return handler(event, uri);
 296       });
 297     }
 298     return element;
 299   }
 300
 301   /**
 302    * Replace a node with 1 or more other nodes.
 303    * @param {Node} oldNode The node to replace.
 304    * @param {Node[]} newNodes The new nodes to insert in order.
 305    */
 306   private _replaceNode(oldNode: Node, ...newNodes: Node[]): void {
 307     const parent = oldNode.parentNode;
 308     for (let i = 0; i < newNodes.length; i++) {
 309       parent.insertBefore(newNodes[i], oldNode);
 310     }
 311     parent.removeChild(oldNode);
 312   }
 313
 314   /**
 315    * Replace a substring within a node with a new node.
 316    * @param {Node} targetNode The target node; either a text node or a <span>
 317    * containing a single text node.
 318    * @param {Node} newNode The new node to insert.
 319    * @param {string} substring The substring to replace.
 320    * @param {number} substringIndex The index of the substring within the string.
 321    * @return The number of nodes to skip when searching for the next uri.
 322    */
 323   private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): number {
 324     // If the targetNode is a non-text node with a single child, make the child
 325     // the new targetNode.
 326     if (targetNode.childNodes.length === 1) {
 327       targetNode = targetNode.childNodes[0];
 328     }
 329
 330     // The targetNode will be either a text node or a <span>. The text node
 331     // (targetNode or its only-child) needs to be replaced with newNode plus new
 332     // text nodes potentially on either side.
 333     if (targetNode.nodeType !== 3/*Node.TEXT_NODE*/) {
 334       throw new Error('targetNode must be a text node or only contain a single text node');
 335     }
 336
 337     const fullText = targetNode.textContent;
 338
 339     if (substringIndex === 0) {
 340       // Replace with <newNode><textnode>
 341       const rightText = fullText.substring(substring.length);
 342       const rightTextNode = this._document.createTextNode(rightText);
 343       this._replaceNode(targetNode, newNode, rightTextNode);
 344       return 0;
 345     }
 346
 347     if (substringIndex === targetNode.textContent.length - substring.length) {
 348       // Replace with <textnode><newNode>
 349       const leftText = fullText.substring(0, substringIndex);
 350       const leftTextNode = this._document.createTextNode(leftText);
 351       this._replaceNode(targetNode, leftTextNode, newNode);
 352       return 0;
 353     }
 354
 355     // Replace with <textnode><newNode><textnode>
 356     const leftText = fullText.substring(0, substringIndex);
 357     const leftTextNode = this._document.createTextNode(leftText);
 358     const rightText = fullText.substring(substringIndex + substring.length);
 359     const rightTextNode = this._document.createTextNode(rightText);
 360     this._replaceNode(targetNode, leftTextNode, newNode, rightTextNode);
 361     return 1;
 362   }
 363 }