src/Linkifier.ts

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