]>
Commit | Line | Data |
---|---|---|
2207d356 | 1 | /** |
55cb43d7 | 2 | * @license MIT |
2207d356 | 3 | */ |
55cb43d7 | 4 | |
6198556e | 5 | import { LinkMatcherOptions } from './Interfaces'; |
7ac4f1a9 | 6 | import { LinkMatcher, LinkMatcherHandler, LinkMatcherValidationCallback } from './Types'; |
6198556e DI |
7 | |
8 | const INVALID_LINK_CLASS = 'xterm-invalid-link'; | |
2207d356 | 9 | |
2207d356 DI |
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})'; | |
28d4ec77 | 16 | const localHostClause = '(localhost)'; |
2207d356 | 17 | const portClause = '(:\\d{1,5})'; |
28d4ec77 | 18 | const hostClause = '((' + domainBodyClause + '\\.' + tldClause + ')|' + ipClause + '|' + localHostClause + ')' + portClause + '?'; |
b68180b9 DI |
19 | const pathClause = '(\\/[\\/\\w\\.\\-%~]*)*'; |
20 | const queryStringHashFragmentCharacterSet = '[0-9\\w\\[\\]\\(\\)\\/\\?\\!#@$%&\'*+,:;~\\=\\.\\-]*'; | |
9aae4396 DI |
21 | const queryStringClause = '(\\?' + queryStringHashFragmentCharacterSet + ')?'; |
22 | const hashFragmentClause = '(#' + queryStringHashFragmentCharacterSet + ')?'; | |
7279ee0f | 23 | const negatedPathCharacterSet = '[^\\/\\w\\.\\-%]+'; |
9aae4396 | 24 | const bodyClause = hostClause + pathClause + queryStringClause + hashFragmentClause; |
2207d356 DI |
25 | const start = '(?:^|' + negatedDomainCharacterSet + ')('; |
26 | const end = ')($|' + negatedPathCharacterSet + ')'; | |
f7bc0fba | 27 | const strictUrlRegex = new RegExp(start + protocolClause + bodyClause + end); |
2207d356 | 28 | |
55cb43d7 DI |
29 | /** |
30 | * The ID of the built in http(s) link matcher. | |
31 | */ | |
7167b06b DI |
32 | const HYPERTEXT_LINK_MATCHER_ID = 0; |
33 | ||
f7bc0fba DI |
34 | /** |
35 | * The Linkifier applies links to rows shortly after they have been refreshed. | |
36 | */ | |
2207d356 | 37 | export class Linkifier { |
15d79143 DI |
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 | ||
7ac4f1a9 DI |
45 | protected _linkMatchers: LinkMatcher[]; |
46 | ||
26ebc3d9 | 47 | private _document: Document; |
2207d356 DI |
48 | private _rows: HTMLElement[]; |
49 | private _rowTimeoutIds: number[]; | |
5183332f | 50 | private _nextLinkMatcherId = HYPERTEXT_LINK_MATCHER_ID; |
2207d356 | 51 | |
26ebc3d9 DI |
52 | constructor(document: Document, rows: HTMLElement[]) { |
53 | this._document = document; | |
2207d356 DI |
54 | this._rows = rows; |
55 | this._rowTimeoutIds = []; | |
7167b06b | 56 | this._linkMatchers = []; |
012051c1 | 57 | this.registerLinkMatcher(strictUrlRegex, null, { matchIndex: 1 }); |
2207d356 DI |
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 | } | |
15d79143 | 69 | this._rowTimeoutIds[rowIndex] = setTimeout(this._linkifyRow.bind(this, rowIndex), Linkifier.TIME_BEFORE_LINKIFY); |
2207d356 DI |
70 | } |
71 | ||
7167b06b | 72 | /** |
3bf31aa4 DI |
73 | * Attaches a handler for hypertext links, overriding default <a> behavior |
74 | * for standard http(s) links. | |
7167b06b DI |
75 | * @param {LinkHandler} handler The handler to use, this can be cleared with |
76 | * null. | |
77 | */ | |
4c99c032 | 78 | public attachHypertextLinkHandler(handler: LinkMatcherHandler): void { |
7167b06b DI |
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. | |
3b62aa44 | 85 | * @param {RegExp} regex The regular expression to search for, specifically |
1ee774d0 DI |
86 | * this searches the textContent of the rows. You will want to use \s to match |
87 | * a space ' ' character for example. | |
7167b06b | 88 | * @param {LinkHandler} handler The callback when the link is called. |
6198556e | 89 | * @param {LinkMatcherOptions} [options] Options for the link matcher. |
7167b06b DI |
90 | * @return {number} The ID of the new matcher, this can be used to deregister. |
91 | */ | |
4c99c032 | 92 | public registerLinkMatcher(regex: RegExp, handler: LinkMatcherHandler, options: LinkMatcherOptions = {}): number { |
5183332f | 93 | if (this._nextLinkMatcherId !== HYPERTEXT_LINK_MATCHER_ID && !handler) { |
aafb5333 | 94 | throw new Error('handler must be defined'); |
7167b06b DI |
95 | } |
96 | const matcher: LinkMatcher = { | |
5183332f | 97 | id: this._nextLinkMatcherId++, |
7167b06b | 98 | regex, |
c8bb3216 | 99 | handler, |
6198556e | 100 | matchIndex: options.matchIndex, |
7ac4f1a9 DI |
101 | validationCallback: options.validationCallback, |
102 | priority: options.priority || 0 | |
7167b06b | 103 | }; |
7ac4f1a9 | 104 | this._addLinkMatcherToList(matcher); |
7167b06b DI |
105 | return matcher.id; |
106 | } | |
107 | ||
7ac4f1a9 DI |
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--) { | |
78d5fc95 | 121 | if (matcher.priority <= this._linkMatchers[i].priority) { |
7ac4f1a9 DI |
122 | this._linkMatchers.splice(i + 1, 0, matcher); |
123 | return; | |
124 | } | |
125 | } | |
126 | ||
78d5fc95 | 127 | this._linkMatchers.splice(0, 0, matcher); |
7ac4f1a9 DI |
128 | } |
129 | ||
7167b06b DI |
130 | /** |
131 | * Deregisters a link matcher if it has been registered. | |
132 | * @param {number} matcherId The link matcher's ID (returned after register) | |
1c030f57 | 133 | * @return {boolean} Whether a link matcher was found and deregistered. |
7167b06b | 134 | */ |
1c030f57 | 135 | public deregisterLinkMatcher(matcherId: number): boolean { |
7167b06b DI |
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); | |
1c030f57 | 140 | return true; |
7167b06b DI |
141 | } |
142 | } | |
1c030f57 | 143 | return false; |
2207d356 DI |
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 { | |
c4f43184 DI |
151 | const row = this._rows[rowIndex]; |
152 | if (!row) { | |
153 | return; | |
154 | } | |
155 | const text = row.textContent; | |
e6fc80c1 | 156 | for (let i = 0; i < this._linkMatchers.length; i++) { |
7167b06b | 157 | const matcher = this._linkMatchers[i]; |
08fd050c DI |
158 | const linkElements = this._doLinkifyRow(row, matcher); |
159 | if (linkElements.length > 0) { | |
6198556e | 160 | // Fire validation callback |
08fd050c DI |
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 | } | |
6198556e | 169 | } |
7167b06b DI |
170 | // Only allow a single LinkMatcher to trigger on any given row. |
171 | return; | |
172 | } | |
a489037e | 173 | } |
7167b06b | 174 | } |
a489037e | 175 | |
7167b06b DI |
176 | /** |
177 | * Linkifies a row given a specific handler. | |
08fd050c DI |
178 | * @param {HTMLElement} row The row to linkify. |
179 | * @param {LinkMatcher} matcher The link matcher for this line. | |
6198556e | 180 | * @return The link element if it was added, otherwise undefined. |
7167b06b | 181 | */ |
08fd050c | 182 | private _doLinkifyRow(row: HTMLElement, matcher: LinkMatcher): HTMLElement[] { |
a489037e | 183 | // Iterate over nodes as we want to consider text nodes |
08fd050c DI |
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 | ||
a489037e DI |
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) { | |
08fd050c | 201 | const linkElement = this._createAnchorElement(uri, matcher.handler, isHttpLinkMatcher); |
99a27021 | 202 | if (node.textContent.length === uri.length) { |
a489037e | 203 | // Matches entire string |
26ebc3d9 | 204 | if (node.nodeType === 3 /*Node.TEXT_NODE*/) { |
a489037e DI |
205 | this._replaceNode(node, linkElement); |
206 | } else { | |
a489037e | 207 | const element = (<HTMLElement>node); |
c8bb3216 DI |
208 | if (element.nodeName === 'A') { |
209 | // This row has already been linkified | |
210 | return; | |
211 | } | |
a489037e DI |
212 | element.innerHTML = ''; |
213 | element.appendChild(linkElement); | |
214 | } | |
215 | } else { | |
216 | // Matches part of string | |
08fd050c DI |
217 | const nodesAdded = this._replaceNodeSubstringWithNode(node, linkElement, uri, searchIndex); |
218 | // No need to consider the new nodes | |
219 | i += nodesAdded - 1; | |
a489037e | 220 | } |
08fd050c | 221 | result.push(linkElement); |
2207d356 | 222 | |
08fd050c DI |
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 | } | |
2207d356 | 231 | } |
08fd050c | 232 | return result; |
2207d356 | 233 | } |
a489037e DI |
234 | |
235 | /** | |
236 | * Creates a link anchor element. | |
237 | * @param {string} uri The uri of the link. | |
238 | * @return {HTMLAnchorElement} The link. | |
239 | */ | |
1f518b0b | 240 | private _createAnchorElement(uri: string, handler: LinkMatcherHandler, isHypertextLinkHandler: boolean): HTMLAnchorElement { |
26ebc3d9 | 241 | const element = this._document.createElement('a'); |
a489037e | 242 | element.textContent = uri; |
adde8ab2 | 243 | element.draggable = false; |
1f518b0b | 244 | if (isHypertextLinkHandler) { |
a489037e | 245 | element.href = uri; |
0f3ee21d DI |
246 | // Force link on another tab so work is not lost |
247 | element.target = '_blank'; | |
aafb5333 DI |
248 | element.addEventListener('click', (event: MouseEvent) => { |
249 | if (handler) { | |
250 | return handler(event, uri); | |
c7b4c2be DI |
251 | } |
252 | }); | |
1f518b0b DI |
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 | }); | |
a489037e DI |
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. | |
0f3ee21d DI |
280 | * @param {Node} targetNode The target node; either a text node or a <span> |
281 | * containing a single text node. | |
a489037e DI |
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. | |
08fd050c | 285 | * @return The number of nodes to skip when searching for the next uri. |
a489037e | 286 | */ |
08fd050c | 287 | private _replaceNodeSubstringWithNode(targetNode: Node, newNode: Node, substring: string, substringIndex: number): number { |
a489037e | 288 | let node = targetNode; |
26ebc3d9 | 289 | if (node.nodeType !== 3/*Node.TEXT_NODE*/) { |
a489037e DI |
290 | node = node.childNodes[0]; |
291 | } | |
0f3ee21d DI |
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. | |
08fd050c | 296 | if (node.childNodes.length === 0 && node.nodeType !== 3/*Node.TEXT_NODE*/) { |
a489037e DI |
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> | |
a489037e | 304 | const rightText = fullText.substring(substring.length); |
26ebc3d9 | 305 | const rightTextNode = this._document.createTextNode(rightText); |
a489037e | 306 | this._replaceNode(node, newNode, rightTextNode); |
08fd050c DI |
307 | return 0; |
308 | } | |
309 | ||
310 | if (substringIndex === targetNode.textContent.length - substring.length) { | |
a489037e | 311 | // Replace with <textnode><newNode> |
a489037e | 312 | const leftText = fullText.substring(0, substringIndex); |
26ebc3d9 | 313 | const leftTextNode = this._document.createTextNode(leftText); |
a489037e | 314 | this._replaceNode(node, leftTextNode, newNode); |
08fd050c | 315 | return 1; |
a489037e | 316 | } |
08fd050c DI |
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; | |
a489037e | 325 | } |
2207d356 | 326 | } |