src/Linkifier.ts

   1 /**
   2  * @license MIT
   3  */
   4
   5 import { LinkMatcherOptions } from './Interfaces';
   6 import { LinkMatcherHandler, LinkMatcherValidationCallback } from './Types';
   7
   8 type LinkMatcher = {
   9   id: number,
  10   regex: RegExp,
  11   handler: LinkMatcherHandler,
  12   matchIndex?: number,
  13   validationCallback?: LinkMatcherValidationCallback;
  14 };
  15
  16 const INVALID_LINK_CLASS = 'xterm-invalid-link';
  17
  18 const protocolClause = '(https?:\\/\\/)';
  19 const domainCharacterSet = '[\\da-z\\.-]+';
  20 const negatedDomainCharacterSet = '[^\\da-z\\.-]+';
  21 const domainBodyClause = '(' + domainCharacterSet + ')';
  22 const tldClause = '([a-z\\.]{2,6})';
  23 const ipClause = '((\\d{1,3}\\.){3}\\d{1,3})';
  24 const portClause = '(:\\d{1,5})';
  25 const hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + ')' + portClause + '?';
  26 const pathClause = '(\\/[\\/\\w\\.-]*)*';
  27 const queryStringClause = '(\\?[\\w\\[\\]\\(\\)\\/\\?\\!#@$&\'*+,:;]*)?';
  28 const negatedPathCharacterSet = '[^\\/\\w\\.-]+';
  29 const bodyClause = hostClause + pathClause + queryStringClause;
  30 const start = '(?:^|' + negatedDomainCharacterSet + ')(';
  31 const end = ')($|' + negatedPathCharacterSet + ')';
  32 const strictUrlRegex = new RegExp(start + protocolClause + bodyClause + end);
  33
  34 /**
  35  * The ID of the built in http(s) link matcher.
  36  */
  37 const HYPERTEXT_LINK_MATCHER_ID = 0;
  38
  39 /**
  40  * The time to wait after a row is changed before it is linkified. This prevents
  41  * the costly operation of searching every row multiple times, pntentially a
  42  * huge aount of times.
  43  */
  44 let TIME_BEFORE_LINKIFY = 200;
  45
  46 /**
  47  * The Linkifier applies links to rows shortly after they have been refreshed.
  48  */
  49 export class Linkifier {
  50   private _document: Document;
  51   private _rows: HTMLElement[];
  52   private _rowTimeoutIds: number[];
  53   private _linkMatchers: LinkMatcher[];
  54   private _nextLinkMatcherId = HYPERTEXT_LINK_MATCHER_ID;
  55
  56   constructor(document: Document, rows: HTMLElement[]) {
  57     this._document = document;
  58     this._rows = rows;
  59     this._rowTimeoutIds = [];
  60     this._linkMatchers = [];
  61     this.registerLinkMatcher(strictUrlRegex, null, 1);
  62   }
  63
  64   /**
  65    * Queues a row for linkification.
  66    * @param {number} rowIndex The index of the row to linkify.
  67    */
  68   public linkifyRow(rowIndex: number): void {
  69     const timeoutId = this._rowTimeoutIds[rowIndex];
  70     if (timeoutId) {
  71       clearTimeout(timeoutId);
  72     }
  73     this._rowTimeoutIds[rowIndex] = setTimeout(this._linkifyRow.bind(this, rowIndex), TIME_BEFORE_LINKIFY);
  74   }
  75
  76   /**
  77    * Attaches a handler for hypertext links, overriding default <a> behavior
  78    * for standard http(s) links.
  79    * @param {LinkHandler} handler The handler to use, this can be cleared with
  80    * null.
  81    */
  82   public attachHypertextLinkHandler(handler: LinkMatcherHandler): void {
  83     this._linkMatchers[HYPERTEXT_LINK_MATCHER_ID].handler = handler;
  84   }
  85
  86   /**
  87    * Registers a link matcher, allowing custom link patterns to be matched and
  88    * handled.
  89    * @param {RegExp} regex The regular expression to search for, specifically
  90    * this searches the textContent of the rows. You will want to use \s to match
  91    * a space ' ' character for example.
  92    * @param {LinkHandler} handler The callback when the link is called.
  93    * @param {LinkMatcherOptions} [options] Options for the link matcher.
  94    * @return {number} The ID of the new matcher, this can be used to deregister.
  95    */
  96   public registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options: LinkMatcherOptions = {}): number {
  97     if (this._nextLinkMatcherId !== HYPERTEXT_LINK_MATCHER_ID && !handler) {
  98       throw new Error('handler cannot be falsy');
  99     }
 100     const matcher: LinkMatcher = {
 101       id: this._nextLinkMatcherId++,
 102       regex,
 103       handler,
 104       matchIndex: options.matchIndex,
 105       validationCallback: options.validationCallback
 106     };
 107     this._linkMatchers.push(matcher);
 108     return matcher.id;
 109   }
 110
 111   /**
 112    * Deregisters a link matcher if it has been registered.
 113    * @param {number} matcherId The link matcher's ID (returned after register)
 114    * @return {boolean} Whether a link matcher was found and deregistered.
 115    */
 116   public deregisterLinkMatcher(matcherId: number): boolean {
 117     // ID 0 is the hypertext link matcher which cannot be deregistered
 118     for (let i = 1; i < this._linkMatchers.length; i++) {
 119       if (this._linkMatchers[i].id === matcherId) {
 120         this._linkMatchers.splice(i, 1);
 121         return true;
 122       }
 123     }
 124     return false;
 125   }
 126
 127   /**
 128    * Linkifies a row.
 129    * @param {number} rowIndex The index of the row to linkify.
 130    */
 131   private _linkifyRow(rowIndex: number): void {
 132     const row = this._rows[rowIndex];
 133     if (!row) {
 134       return;
 135     }
 136     const text = row.textContent;
 137     // TODO: Onl execute handler if isValid
 138     for (let i = 0; i < this._linkMatchers.length; i++) {
 139       const matcher = this._linkMatchers[i];
 140       const uri = this._findLinkMatch(text, matcher.regex, matcher.matchIndex);
 141       if (uri) {
 142         const linkElement = this._doLinkifyRow(rowIndex, uri, matcher.handler);
 143         // Fire validation callback
 144         if (matcher.validationCallback) {
 145           matcher.validationCallback(uri, isValid => {
 146             if (!isValid) {
 147               linkElement.classList.add(INVALID_LINK_CLASS);
 148             }
 149           });
 150         }
 151         // Only allow a single LinkMatcher to trigger on any given row.
 152         return;
 153       }
 154     }
 155   }
 156
 157   /**
 158    * Linkifies a row given a specific handler.
 159    * @param {number} rowIndex The index of the row to linkify.
 160    * @param {string} uri The uri that has been found.
 161    * @param {handler} handler The handler to trigger when the link is triggered.
 162    * @return The link element if it was added, otherwise undefined.
 163    */
 164   private _doLinkifyRow(rowIndex: number, uri: string, handler?: LinkMatcherHandler): HTMLElement {
 165     // Iterate over nodes as we want to consider text nodes
 166     const nodes = this._rows[rowIndex].childNodes;
 167     for (let i = 0; i < nodes.length; i++) {
 168       const node = nodes[i];
 169       const searchIndex = node.textContent.indexOf(uri);
 170       if (searchIndex >= 0) {
 171         const linkElement = this._createAnchorElement(uri, handler);
 172         if (node.textContent.length === uri.length) {
 173           // Matches entire string
 174
 175           if (node.nodeType === 3 /*Node.TEXT_NODE*/) {
 176             this._replaceNode(node, linkElement);
 177           } else {
 178             const element = (<HTMLElement>node);
 179             if (element.nodeName === 'A') {
 180               // This row has already been linkified
 181               return;
 182             }
 183             element.innerHTML = '';
 184             element.appendChild(linkElement);
 185           }
 186         } else {
 187           // Matches part of string
 188           this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex);
 189         }
 190         return linkElement;
 191       }
 192     }
 193   }
 194
 195   /**
 196    * Finds a link match in a piece of text.
 197    * @param {string} text The text to search.
 198    * @param {number} matchIndex The regex match index of the link.
 199    * @return {string} The matching URI or null if not found.
 200    */
 201   private _findLinkMatch(text: string, regex: RegExp, matchIndex?: number): string {
 202     const match = text.match(regex);
 203     if (!match || match.length === 0) {
 204       return null;
 205     }
 206     return match[typeof matchIndex !== 'number' ? 0 : matchIndex];
 207   }
 208
 209   /**
 210    * Creates a link anchor element.
 211    * @param {string} uri The uri of the link.
 212    * @return {HTMLAnchorElement} The link.
 213    */
 214   private _createAnchorElement(uri: string, handler: LinkMatcherHandler): HTMLAnchorElement {
 215     const element = this._document.createElement('a');
 216     element.textContent = uri;
 217     if (handler) {
 218       element.addEventListener('click', () => {
 219         // Only execute the handler if the link is not flagged as invalid
 220         if (!element.classList.contains(INVALID_LINK_CLASS)) {
 221           handler(uri);
 222         }
 223       });
 224     } else {
 225       element.href = uri;
 226       // Force link on another tab so work is not lost
 227       element.target = '_blank';
 228     }
 229     return element;
 230   }
 231
 232   /**
 233    * Replace a node with 1 or more other nodes.
 234    * @param {Node} oldNode The node to replace.
 235    * @param {Node[]} newNodes The new nodes to insert in order.
 236    */
 237   private _replaceNode(oldNode: Node, ...newNodes: Node[]): void {
 238     const parent = oldNode.parentNode;
 239     for (let i = 0; i < newNodes.length; i++) {
 240       parent.insertBefore(newNodes[i], oldNode);
 241     }
 242     parent.removeChild(oldNode);
 243   }
 244
 245   /**
 246    * Replace a substring within a node with a new node.
 247    * @param {Node} targetNode The target node; either a text node or a <span>
 248    * containing a single text node.
 249    * @param {Node} newNode The new node to insert.
 250    * @param {string} substring The substring to replace.
 251    * @param {number} substringIndex The index of the substring within the string.
 252    */
 253   private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): void {
 254     let node = targetNode;
 255     if (node.nodeType !== 3/*Node.TEXT_NODE*/) {
 256       node = node.childNodes[0];
 257     }
 258
 259     // The targetNode will be either a text node or a <span>. The text node
 260     // (targetNode or its only-child) needs to be replaced with newNode plus new
 261     // text nodes potentially on either side.
 262     if (node.childNodes.length === 0 && node.nodeType !== Node.TEXT_NODE) {
 263       throw new Error('targetNode must be a text node or only contain a single text node');
 264     }
 265
 266     const fullText = node.textContent;
 267
 268     if (substringIndex === 0) {
 269       // Replace with <newNode><textnode>
 270       const rightText = fullText.substring(substring.length);
 271       const rightTextNode = this._document.createTextNode(rightText);
 272       this._replaceNode(node, newNode, rightTextNode);
 273     } else if (substringIndex === targetNode.textContent.length - substring.length) {
 274       // Replace with <textnode><newNode>
 275       const leftText = fullText.substring(0, substringIndex);
 276       const leftTextNode = this._document.createTextNode(leftText);
 277       this._replaceNode(node, leftTextNode, newNode);
 278     } else {
 279       // Replace with <textnode><newNode><textnode>
 280       const leftText = fullText.substring(0, substringIndex);
 281       const leftTextNode = this._document.createTextNode(leftText);
 282       const rightText = fullText.substring(substringIndex + substring.length);
 283       const rightTextNode = this._document.createTextNode(rightText);
 284       this._replaceNode(node, leftTextNode, newNode, rightTextNode);
 285     }
 286   }
 287
 288   public static setTimeBeforeLinkifyForTest(time: number) {
 289     // This is necessary since it's needs to be used in PhantomJS. Ideally the
 290     // time variable would be a protected static member and a TestLinkifier
 291     // would expose it for the test.
 292     TIME_BEFORE_LINKIFY = time;
 293   }
 294 }