]>
Commit | Line | Data |
---|---|---|
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 | } |