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