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, pntentially a
  41    * huge aount 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(document: Document, rows: HTMLElement[]) {
  53     this._document = document;
  54     this._rows = rows;
  55     this._rowTimeoutIds = [];
  56     this._linkMatchers = [];
  57     this.registerLinkMatcher(strictUrlRegex, null, { matchIndex: 1 });
  58   }
  59
  60   /**
  61    * Queues a row for linkification.
  62    * @param {number} rowIndex The index of the row to linkify.
  63    */
  64   public linkifyRow(rowIndex: number): void {
  65     const timeoutId = this._rowTimeoutIds[rowIndex];
  66     if (timeoutId) {
  67       clearTimeout(timeoutId);
  68     }
  69     this._rowTimeoutIds[rowIndex] = setTimeout(this._linkifyRow.bind(this, rowIndex), Linkifier.TIME_BEFORE_LINKIFY);
  70   }
  71
  72   /**
  73    * Attaches a handler for hypertext links, overriding default <a> behavior
  74    * for standard http(s) links.
  75    * @param {LinkHandler} handler The handler to use, this can be cleared with
  76    * null.
  77    */
  78   public attachHypertextLinkHandler(handler: LinkMatcherHandler): void {
  79     this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].handler = handler;
  80   }
  81
  82   /**
  83    * Registers a link matcher, allowing custom link patterns to be matched and
  84    * handled.
  85    * @param {RegExp} regex The regular expression to search for, specifically
  86    * this searches the textContent of the rows. You will want to use \s to match
  87    * a space ' ' character for example.
  88    * @param {LinkHandler} handler The callback when the link is called.
  89    * @param {LinkMatcherOptions} [options] Options for the link matcher.
  90    * @return {number} The ID of the new matcher, this can be used to deregister.
  91    */
  92   public registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options: LinkMatcherOptions = {}): number {
  93     if (this._nextLinkMatcherId !== HYPERTEXT_LINK_MATCHER_ID && !handler) {
  94       throw new Error('handler must be defined');
  95     }
  96     const matcher: LinkMatcher = {
  97       id: this._nextLinkMatcherId++,
  98       regex,
  99       handler,
 100       matchIndex: options.matchIndex,
 101       validationCallback: options.validationCallback,
 102       priority: options.priority || 0
 103     };
 104     this._addLinkMatcherToList(matcher);
 105     return matcher.id;
 106   }
 107
 108   /**
 109    * Inserts a link matcher to the list in the correct position based on the
 110    * priority of each link matcher. New link matchers of equal priority are
 111    * considered after older link matchers.
 112    * @param matcher The link matcher to be added.
 113    */
 114   private _addLinkMatcherToList(matcher: LinkMatcher): void {
 115     if (this._linkMatchers.length === 0) {
 116       this._linkMatchers.push(matcher);
 117       return;
 118     }
 119
 120     for (let i = this._linkMatchers.length - 1; i >= 0; i--) {
 121       if (matcher.priority <= this._linkMatchers[i].priority) {
 122         this._linkMatchers.splice(i + 1, 0, matcher);
 123         return;
 124       }
 125     }
 126
 127     this._linkMatchers.splice(0, 0, matcher);
 128   }
 129
 130   /**
 131    * Deregisters a link matcher if it has been registered.
 132    * @param {number} matcherId The link matcher's ID (returned after register)
 133    * @return {boolean} Whether a link matcher was found and deregistered.
 134    */
 135   public deregisterLinkMatcher(matcherId: number): boolean {
 136     // ID 0 is the hypertext link matcher which cannot be deregistered
 137     for (let i = 1; i < this._linkMatchers.length; i++) {
 138       if (this._linkMatchers[i].id === matcherId) {
 139         this._linkMatchers.splice(i, 1);
 140         return true;
 141       }
 142     }
 143     return false;
 144   }
 145
 146   /**
 147    * Linkifies a row.
 148    * @param {number} rowIndex The index of the row to linkify.
 149    */
 150   private _linkifyRow(rowIndex: number): void {
 151     const row = this._rows[rowIndex];
 152     if (!row) {
 153       return;
 154     }
 155     const text = row.textContent;
 156     for (let i = 0; i < this._linkMatchers.length; i++) {
 157       const matcher = this._linkMatchers[i];
 158       const linkElements = this._doLinkifyRow(row, matcher);
 159         if (linkElements.length > 0) {
 160         // Fire validation callback
 161         if (matcher.validationCallback) {
 162           for (let j = 0; j < linkElements.length; j++) {
 163             matcher.validationCallback(linkElements[j].textContent, isValid => {
 164               if (!isValid) {
 165                 linkElements[j].classList.add(INVALID_LINK_CLASS);
 166               }
 167             });
 168           }
 169         }
 170         // Only allow a single LinkMatcher to trigger on any given row.
 171         return;
 172       }
 173     }
 174   }
 175
 176   /**
 177    * Linkifies a row given a specific handler.
 178    * @param {HTMLElement} row The row to linkify.
 179    * @param {LinkMatcher} matcher The link matcher for this line.
 180    * @return The link element if it was added, otherwise undefined.
 181    */
 182   private _doLinkifyRow(row: HTMLElement, matcher: LinkMatcher): HTMLElement[] {
 183     // Iterate over nodes as we want to consider text nodes
 184     let result = [];
 185     const isHttpLinkMatcher = matcher.id === HYPERTEXT_LINK_MATCHER_ID;
 186     const nodes = row.childNodes;
 187
 188     // Find the first match
 189     let match = row.textContent.match(matcher.regex);
 190     if (!match || match.length === 0) {
 191       return result;
 192     }
 193     let uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
 194     // Set the next searches start index
 195     let rowStartIndex = match.index + uri.length;
 196
 197     for (let i = 0; i < nodes.length; i++) {
 198       const node = nodes[i];
 199       const searchIndex = node.textContent.indexOf(uri);
 200       if (searchIndex >= 0) {
 201         const linkElement = this._createAnchorElement(uri, matcher.handler, isHttpLinkMatcher);
 202         if (node.textContent.length === uri.length) {
 203           // Matches entire string
 204           if (node.nodeType === 3 /*Node.TEXT_NODE*/) {
 205             this._replaceNode(node, linkElement);
 206           } else {
 207             const element = (<HTMLElement>node);
 208             if (element.nodeName === 'A') {
 209               // This row has already been linkified
 210               return result;
 211             }
 212             element.innerHTML = '';
 213             element.appendChild(linkElement);
 214           }
 215         } else {
 216           // Matches part of string
 217           const nodesAdded = this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex);
 218           // No need to consider the new nodes
 219           i += nodesAdded;
 220         }
 221         result.push(linkElement);
 222
 223         // Find the next match
 224         match = row.textContent.substring(rowStartIndex).match(matcher.regex);
 225         if (!match || match.length === 0) {
 226           return result;
 227         }
 228         uri = match[typeof matcher.matchIndex !== 'number' ? 0 : matcher.matchIndex];
 229         rowStartIndex += match.index + uri.length;
 230       }
 231     }
 232     return result;
 233   }
 234
 235   /**
 236    * Creates a link anchor element.
 237    * @param {string} uri The uri of the link.
 238    * @return {HTMLAnchorElement} The link.
 239    */
 240   private _createAnchorElement(uri: string, handler: LinkMatcherHandler, isHypertextLinkHandler: boolean): HTMLAnchorElement {
 241     const element = this._document.createElement('a');
 242     element.textContent = uri;
 243     element.draggable = false;
 244     if (isHypertextLinkHandler) {
 245       element.href = uri;
 246       // Force link on another tab so work is not lost
 247       element.target = '_blank';
 248       element.addEventListener('click', (event: MouseEvent) => {
 249         if (handler) {
 250           return handler(event, uri);
 251         }
 252       });
 253     } else {
 254       element.addEventListener('click', (event: MouseEvent) => {
 255         // Don't execute the handler if the link is flagged as invalid
 256         if (element.classList.contains(INVALID_LINK_CLASS)) {
 257           return;
 258         }
 259         return handler(event, uri);
 260       });
 261     }
 262     return element;
 263   }
 264
 265   /**
 266    * Replace a node with 1 or more other nodes.
 267    * @param {Node} oldNode The node to replace.
 268    * @param {Node[]} newNodes The new nodes to insert in order.
 269    */
 270   private _replaceNode(oldNode: Node, ...newNodes: Node[]): void {
 271     const parent = oldNode.parentNode;
 272     for (let i = 0; i < newNodes.length; i++) {
 273       parent.insertBefore(newNodes[i], oldNode);
 274     }
 275     parent.removeChild(oldNode);
 276   }
 277
 278   /**
 279    * Replace a substring within a node with a new node.
 280    * @param {Node} targetNode The target node; either a text node or a <span>
 281    * containing a single text node.
 282    * @param {Node} newNode The new node to insert.
 283    * @param {string} substring The substring to replace.
 284    * @param {number} substringIndex The index of the substring within the string.
 285    * @return The number of nodes to skip when searching for the next uri.
 286    */
 287   private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): number {
 288     let node = targetNode;
 289     if (node.nodeType !== 3/*Node.TEXT_NODE*/) {
 290       node = node.childNodes[0];
 291     }
 292
 293     // The targetNode will be either a text node or a <span>. The text node
 294     // (targetNode or its only-child) needs to be replaced with newNode plus new
 295     // text nodes potentially on either side.
 296     if (node.childNodes.length === 0 && node.nodeType !== 3/*Node.TEXT_NODE*/) {
 297       throw new Error('targetNode must be a text node or only contain a single text node');
 298     }
 299
 300     const fullText = node.textContent;
 301
 302     if (substringIndex === 0) {
 303       // Replace with <newNode><textnode>
 304       const rightText = fullText.substring(substring.length);
 305       const rightTextNode = this._document.createTextNode(rightText);
 306       this._replaceNode(node, newNode, rightTextNode);
 307       return 0;
 308     }
 309
 310     if (substringIndex === targetNode.textContent.length - substring.length) {
 311       // Replace with <textnode><newNode>
 312       const leftText = fullText.substring(0, substringIndex);
 313       const leftTextNode = this._document.createTextNode(leftText);
 314       this._replaceNode(node, leftTextNode, newNode);
 315       return 0;
 316     }
 317
 318     // Replace with <textnode><newNode><textnode>
 319     const leftText = fullText.substring(0, substringIndex);
 320     const leftTextNode = this._document.createTextNode(leftText);
 321     const rightText = fullText.substring(substringIndex + substring.length);
 322     const rightTextNode = this._document.createTextNode(rightText);
 323     this._replaceNode(node, leftTextNode, newNode, rightTextNode);
 324     return 1;
 325   }
 326 }