24 |

25 |

26 |

27 | Search terms 28 |

29 | this.setState({ searchText: event.target.value })} 34 | /> 35 |

36 |

37 |

38 | Active Index 39 |

40 | this.setState({ activeIndex: parseInt(event.target.value, 10) })} 45 | type='number' 46 | /> 47 |

48 |

49 |

50 | Case Sensitive? 51 |

52 | this.setState({ caseSensitive: event.target.checked })} 57 | type='checkbox' 58 | /> 59 |

60 |

61 | 62 |

63 | Body of Text 64 |

65 |

this.setState({ textToHighlight: event.target.value })}
70 |         />
71 | 
72 |         <h4 className={styles.Header}>
73 |           Output
74 |         </h4>
75 | 
76 |         <Highlighter
77 |           activeClassName={styles.Active}
78 |           activeIndex={activeIndex}
79 |           autoEscape
80 |           caseSensitive={caseSensitive}
81 |           highlightClassName={styles.Highlight}
82 |           highlightStyle={{ fontWeight: 'normal' }}
83 |           sanitize={latinize}
84 |           searchWords={searchWords}
85 |           textToHighlight={textToHighlight}
86 |         />
87 | 
88 |         <p className={styles.Footer}>
89 |           <a href='https://github.com/bvaughn/react-highlight-words/blob/master/src/Highlighter.example.js'>
90 |             View the source
91 |           </a>
92 |         </p>
93 |       </div>
94 |     )
95 |   }
96 | }
97 |

--------------------------------------------------------------------------------
/src/Highlighter.js:
--------------------------------------------------------------------------------
  1 | /* @flow */
  2 | import { findAll } from 'highlight-words-core'
  3 | import { createElement } from 'react'
  4 | import memoizeOne from 'memoize-one'
  5 | 
  6 | /**
  7 |  * Highlighter component
  8 |  * @param {object} props - Component properties
  9 |  * @param {string} [props.activeClassName] - The class name to be applied to an active match. Use along with `activeIndex`.
 10 |  * @param {number} [props.activeIndex] - Specify the match index that should be actively highlighted. Use along with `activeClassName`.
 11 |  * @param {object} [props.activeStyle] - The inline style to be applied to an active match. Use along with `activeIndex`.
 12 |  * @param {boolean} [props.autoEscape] - Escape characters in searchWords which are meaningful in regular expressions.
 13 |  * @param {string} [props.className] - CSS class name applied to the outer/wrapper `<span>`.
 14 |  * @param {(options: object) => Array<{start: number, end: number}>} [props.findChunks] - Use a custom function to search for matching chunks.  See the default `findChunks` function in `highlight-words-core` for signature.
 15 |  * @param {string|object} [props.highlightClassName] - CSS class name applied to highlighted text or object mapping search term matches to class names.
 16 |  * @param {object} [props.highlightStyle] - Inline styles applied to highlighted text.
 17 |  * @param {React.ComponentType|string} [props.highlightTag] - Type of tag to wrap around highlighted matches. Defaults to `mark` but can also be a React component (class or functional).
 18 |  * @param {(text: string) => string} [props.sanitize] - Process each search word and text to highlight before comparing.
 19 |  * @param {Array<string|RegExp>} props.searchWords - Array of search words. String search terms are automatically cast to RegExps unless `autoEscape` is true.
 20 |  * @param {string} props.textToHighlight - The text to highlight matches in.
 21 |  * @param {React.ComponentType|string} [props.unhighlightTag] - Type of tag applied to unhighlighted parts. Defaults to `span` but can also be a React component (class or functional).
 22 |  * @param {string} [props.unhighlightClassName] - CSS class name applied to unhighlighted text.
 23 |  * @param {object} [props.unhighlightStyle] - Inline styles applied to the unhighlighted text.
 24 |  * @param {object} [props.rest] - Additional attributes passed to the outer `<span>` element.
 25 |  */
 26 | export default function Highlighter ({
 27 |   activeClassName = '',
 28 |   activeIndex = -1,
 29 |   activeStyle,
 30 |   autoEscape,
 31 |   caseSensitive = false,
 32 |   className,
 33 |   findChunks,
 34 |   highlightClassName = '',
 35 |   highlightStyle = {},
 36 |   highlightTag = 'mark',
 37 |   sanitize,
 38 |   searchWords,
 39 |   textToHighlight,
 40 |   unhighlightTag = 'span',
 41 |   unhighlightClassName = '',
 42 |   unhighlightStyle,
 43 |   ...rest
 44 | }) {
 45 |   const chunks = findAll({
 46 |     autoEscape,
 47 |     caseSensitive,
 48 |     findChunks,
 49 |     sanitize,
 50 |     searchWords,
 51 |     textToHighlight
 52 |   })
 53 |   const HighlightTag = highlightTag
 54 |   let highlightIndex = -1
 55 |   let highlightClassNames = ''
 56 |   let highlightStyles
 57 | 
 58 |   const lowercaseProps = object => {
 59 |     const mapped = {}
 60 |     for (let key in object) {
 61 |       mapped[key.toLowerCase()] = object[key]
 62 |     }
 63 |     return mapped
 64 |   }
 65 |   const memoizedLowercaseProps = memoizeOne(lowercaseProps)
 66 | 
 67 |   return createElement('span', {
 68 |     className,
 69 |     ...rest,
 70 |     children: chunks.map((chunk, index) => {
 71 |       const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start)
 72 | 
 73 |       if (chunk.highlight) {
 74 |         highlightIndex++
 75 | 
 76 |         let highlightClass
 77 |         if (typeof highlightClassName === 'object') {
 78 |           if (!caseSensitive) {
 79 |             highlightClassName = memoizedLowercaseProps(highlightClassName)
 80 |             highlightClass = highlightClassName[text.toLowerCase()]
 81 |           } else {
 82 |             highlightClass = highlightClassName[text]
 83 |           }
 84 |         } else {
 85 |           highlightClass = highlightClassName
 86 |         }
 87 | 
 88 |         const isActive = highlightIndex === +activeIndex
 89 | 
 90 |         highlightClassNames = `${highlightClass} ${isActive ? activeClassName : ''}`
 91 |         highlightStyles = isActive === true && activeStyle != null
 92 |           ? Object.assign({}, highlightStyle, activeStyle)
 93 |           : highlightStyle
 94 | 
 95 |         const props = {
 96 |           children: text,
 97 |           className: highlightClassNames,
 98 |           key: index,
 99 |           style: highlightStyles
100 |         }
101 | 
102 |         // Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)
103 |         // Only pass through the highlightIndex attribute for custom components.
104 |         if (typeof HighlightTag !== 'string') {
105 |           props.highlightIndex = highlightIndex
106 |         }
107 | 
108 |         return createElement(HighlightTag, props)
109 |       } else {
110 |         return createElement(unhighlightTag, {
111 |           children: text,
112 |           className: unhighlightClassName,
113 |           key: index,
114 |           style: unhighlightStyle
115 |         })
116 |       }
117 |     })
118 |   })
119 | }
120 |

--------------------------------------------------------------------------------
/src/Highlighter.test.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable react/prop-types */ // TODO: replace standard with prettier
  2 | import React from 'react'
  3 | import Highlighter from './Highlighter'
  4 | import { render } from './test-utils'
  5 | import expect from 'expect.js'
  6 | import latinize from 'latinize'
  7 | 
  8 | describe('Highlighter', () => {
  9 |   const HIGHLIGHT_CLASS = 'customHighlightClass'
 10 |   const HIGHLIGHT_QUERY_SELECTOR = `.${HIGHLIGHT_CLASS}`
 11 |   const UNHIGHLIGHT_CLASS = 'customUnhighlightClass'
 12 |   const UNHIGHLIGHT_QUERY_SELECTOR = `.${UNHIGHLIGHT_CLASS}`
 13 | 
 14 |   function getHighlighterChildren ({
 15 |     autoEscape,
 16 |     activeClassName,
 17 |     activeStyle,
 18 |     activeIndex,
 19 |     caseSensitive,
 20 |     findChunks,
 21 |     highlightStyle,
 22 |     highlightTag,
 23 |     sanitize,
 24 |     searchWords,
 25 |     textToHighlight,
 26 |     unhighlightTag,
 27 |     unhighlightStyle,
 28 |     highlightClassName,
 29 |     ...rest
 30 |   }) {
 31 |     return new Promise(resolve => {
 32 |       const callback = () => {
 33 |         const span = render._mountNode.children[0].children[0]
 34 |         resolve(span)
 35 |       }
 36 |       render(
 37 |         <div ref={callback}>
 38 |           <Highlighter
 39 |             activeClassName={activeClassName}
 40 |             activeIndex={activeIndex}
 41 |             activeStyle={activeStyle}
 42 |             autoEscape={autoEscape}
 43 |             caseSensitive={caseSensitive}
 44 |             findChunks={findChunks}
 45 |             highlightClassName={highlightClassName || HIGHLIGHT_CLASS}
 46 |             highlightStyle={highlightStyle}
 47 |             highlightTag={highlightTag}
 48 |             sanitize={sanitize}
 49 |             searchWords={searchWords}
 50 |             textToHighlight={textToHighlight}
 51 |             unhighlightTag={unhighlightTag}
 52 |             unhighlightClassName={UNHIGHLIGHT_CLASS}
 53 |             unhighlightStyle={unhighlightStyle}
 54 |             {...rest}
 55 |           />
 56 |         </div>
 57 |       )
 58 |     })
 59 |   }
 60 | 
 61 |   let consoleError
 62 | 
 63 |   beforeEach(() => {
 64 |     consoleError = console.error
 65 | 
 66 |     // React DEV warnings should fail tests
 67 |     console.error = function (message) {
 68 |       consoleError.apply(console, arguments)
 69 |       throw new Error(message)
 70 |     }
 71 |   })
 72 | 
 73 |   afterEach(() => {
 74 |     console.error = consoleError
 75 |   })
 76 | 
 77 |   it('should properly handle an empty array for searchWords', async () => {
 78 |     const node = await getHighlighterChildren({
 79 |       searchWords: [],
 80 |       textToHighlight: 'This is text'
 81 |     })
 82 |     expect(node.children.length).to.equal(1)
 83 |     expect(node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR).length).to.equal(0)
 84 |     expect(node.textContent).to.eql('This is text')
 85 |   })
 86 | 
 87 |   it('should properly handle an empty string for searchWords', async () => {
 88 |     const node = await getHighlighterChildren({
 89 |       searchWords: [''],
 90 |       textToHighlight: 'This is text'
 91 |     })
 92 |     expect(node.children.length).to.equal(1)
 93 |     expect(node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR).length).to.equal(0)
 94 |     expect(node.textContent).to.eql('This is text')
 95 |   })
 96 | 
 97 |   it('should properly handle empty textToHighlight', async () => {
 98 |     const node = await getHighlighterChildren({
 99 |       searchWords: ['search'],
100 |       textToHighlight: ''
101 |     })
102 |     expect(node.children.length).to.equal(0)
103 |     expect(node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR).length).to.equal(0)
104 |     expect(node.textContent).to.eql('')
105 |   })
106 | 
107 |   it('should highlight searchText words that exactly match words in textToHighlight', async () => {
108 |     const node = await getHighlighterChildren({
109 |       searchWords: ['text'],
110 |       textToHighlight: 'This is text'
111 |     })
112 |     expect(node.children.length).to.equal(2)
113 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
114 |     expect(matches.length).to.equal(1)
115 |     expect(matches[0].textContent).to.eql('text')
116 |   })
117 | 
118 |   it('should handle unclosed parentheses when autoEscape prop is truthy', async () => {
119 |     const node = await getHighlighterChildren({
120 |       autoEscape: true,
121 |       searchWords: ['('],
122 |       textToHighlight: '(This is text)'
123 |     })
124 |     expect(node.children.length).to.equal(2)
125 |     expect(node.children[0].textContent).to.equal('(')
126 |     expect(node.children[1].textContent).to.equal('This is text)')
127 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
128 |     expect(matches.length).to.equal(1)
129 |     expect(matches[0].textContent).to.eql('(')
130 |   })
131 | 
132 |   it('should highlight searchText words that partial-match text in textToHighlight', async () => {
133 |     const node = await getHighlighterChildren({
134 |       searchWords: ['Th'],
135 |       textToHighlight: 'This is text'
136 |     })
137 |     expect(node.children.length).to.equal(2)
138 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
139 |     expect(matches.length).to.equal(1)
140 |     expect(matches[0].textContent).to.eql('Th')
141 |     expect(node.children[0].textContent).to.equal('Th')
142 |     expect(node.children[1].textContent).to.equal('is is text')
143 |   })
144 | 
145 |   it('should highlight multiple occurrences of a searchText word', async () => {
146 |     const node = await getHighlighterChildren({
147 |       searchWords: ['is'],
148 |       textToHighlight: 'This is text'
149 |     })
150 |     expect(node.children.length).to.equal(5)
151 |     expect(node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR).length).to.equal(2)
152 |     expect(node.textContent).to.eql('This is text')
153 |     expect(node.children[0].textContent).to.equal('Th')
154 |     expect(node.children[1].textContent).to.equal('is')
155 |     expect(node.children[2].textContent).to.equal(' ')
156 |     expect(node.children[3].textContent).to.equal('is')
157 |     expect(node.children[4].textContent).to.equal(' text')
158 |   })
159 | 
160 |   it('should highlight multiple searchText words', async () => {
161 |     const node = await getHighlighterChildren({
162 |       searchWords: ['This', 'text'],
163 |       textToHighlight: 'This is text'
164 |     })
165 |     expect(node.children.length).to.equal(3)
166 |     expect(node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR).length).to.equal(2)
167 |     expect(node.textContent).to.eql('This is text')
168 |     expect(node.children[0].textContent).to.equal('This')
169 |     expect(node.children[1].textContent).to.equal(' is ')
170 |     expect(node.children[2].textContent).to.equal('text')
171 |   })
172 | 
173 |   it('should handle Regex searchText', async () => {
174 |     const node = await getHighlighterChildren({
175 |       searchWords: [/$?([0-9]{3})$?([ .-]?)([0-9]{3})\2([0-9]{4})/, 'This'],
176 |       textToHighlight: 'This is my phone (123) 456 7899'
177 |     })
178 |     expect(node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR).length).to.equal(2)
179 |     expect(node.textContent).to.eql('This is my phone (123) 456 7899')
180 |     expect(node.children[0].textContent).to.equal('This')
181 |     expect(node.children[1].textContent).to.equal(' is my phone ')
182 |     expect(node.children[2].textContent).to.equal('(123) 456 7899')
183 |   })
184 | 
185 |   it('should match terms in a case insensitive way but show their case-sensitive representation', async () => {
186 |     const node = await getHighlighterChildren({
187 |       searchWords: ['this'],
188 |       textToHighlight: 'This is text'
189 |     })
190 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
191 |     expect(matches.length).to.equal(1)
192 |     expect(matches[0].textContent).to.equal('This')
193 |   })
194 | 
195 |   it('should use the :highlightClassName if specified', async () => {
196 |     const node = await getHighlighterChildren({
197 |       searchWords: ['text'],
198 |       textToHighlight: 'This is text'
199 |     })
200 |     expect(node.querySelector('mark').className).to.contain(HIGHLIGHT_CLASS)
201 |   })
202 | 
203 |   it('should use the :highlightStyle if specified', async () => {
204 |     const node = await getHighlighterChildren({
205 |       highlightStyle: { color: 'red' },
206 |       searchWords: ['text'],
207 |       textToHighlight: 'This is text'
208 |     })
209 |     expect(node.querySelector('mark').style.color).to.contain('red')
210 |   })
211 | 
212 |   it('should use the :unhighlightStyle if specified', async () => {
213 |     const node = await getHighlighterChildren({
214 |       unhighlightStyle: { color: 'gray' },
215 |       searchWords: ['text'],
216 |       textToHighlight: 'This is text'
217 |     })
218 |     expect(node.querySelector('span').style.color).to.contain('gray')
219 |   })
220 | 
221 |   it('should match terms without accents against text with accents', async () => {
222 |     const node = await getHighlighterChildren({
223 |       sanitize: latinize,
224 |       searchWords: ['example'],
225 |       textToHighlight: 'ỆᶍǍᶆṔƚÉ'
226 |     })
227 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
228 |     expect(matches.length).to.equal(1)
229 |     expect(matches[0].textContent).to.equal('ỆᶍǍᶆṔƚÉ')
230 |   })
231 | 
232 |   it('should use the :highlightTag if specified', async () => {
233 |     const node = await getHighlighterChildren({
234 |       autoEscape: true,
235 |       highlightTag: 'span',
236 |       searchWords: ['text'],
237 |       textToHighlight: 'This is text'
238 |     })
239 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
240 |     expect(matches[0].tagName).to.equal('SPAN')
241 |   })
242 | 
243 |   it('should support class components via :highlightTag', async () => {
244 |     class HighlightTag extends React.Component {
245 |       render () {
246 |         const { highlightIndex, ...rest } = this.props
247 | 
248 |         return (
249 |           <span {...rest} />
250 |         )
251 |       }
252 |     }
253 | 
254 |     const node = await getHighlighterChildren({
255 |       autoEscape: true,
256 |       highlightTag: HighlightTag,
257 |       searchWords: ['text'],
258 |       textToHighlight: 'This is text'
259 |     })
260 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
261 |     expect(matches[0].tagName).to.equal('SPAN')
262 |   })
263 | 
264 |   it('should support stateless functional components via :highlightTag', async () => {
265 |     const HighlightTag = ({ highlightIndex, ...rest }) => (
266 |       <span {...rest} />
267 |     )
268 | 
269 |     const node = await getHighlighterChildren({
270 |       autoEscape: true,
271 |       highlightTag: HighlightTag,
272 |       searchWords: ['text'],
273 |       textToHighlight: 'This is text'
274 |     })
275 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
276 |     expect(matches[0].tagName).to.equal('SPAN')
277 |   })
278 | 
279 |   it('should apply activeClassName to the match specified by activeIndex', async () => {
280 |     const activeClassName = 'active'
281 |     const node = await getHighlighterChildren({
282 |       activeIndex: 1,
283 |       activeClassName,
284 |       searchWords: ['text'],
285 |       textToHighlight: 'This is text which should have this text highlighted'
286 |     })
287 |     const matches = node.querySelectorAll('mark')
288 |     expect(matches[1].classList.contains(activeClassName)).to.equal(true)
289 |   })
290 | 
291 |   it('should apply activeStyle to the match specified by activeIndex', async () => {
292 |     const activeStyle = { color: 'red' }
293 |     const node = await getHighlighterChildren({
294 |       activeIndex: 1,
295 |       activeStyle,
296 |       searchWords: ['text'],
297 |       textToHighlight: 'This is text which should have this text highlighted'
298 |     })
299 |     const matches = node.querySelectorAll('mark')
300 |     expect(matches[1].style.color).to.equal('red')
301 |   })
302 | 
303 |   it('should support caseSensitive search', async () => {
304 |     const node = await getHighlighterChildren({
305 |       caseSensitive: true,
306 |       searchWords: ['th'],
307 |       textToHighlight: 'This the three time'
308 |     })
309 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
310 |     expect(matches).to.have.length(2)
311 |     expect(matches[0].textContent).to.equal('th')
312 |     expect(matches[1].textContent).to.equal('th')
313 |   })
314 | 
315 |   it('should support custom findChunks prop function', async () => {
316 |     const node = await getHighlighterChildren({
317 |       findChunks: () => (
318 |         [
319 |           { start: 0, end: 1 },
320 |           { start: 5, end: 7 }
321 |         ]
322 |       ),
323 |       searchWords: ['xxx'],
324 |       textToHighlight: 'This is text'
325 |     })
326 |     const matches = node.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
327 |     expect(matches).to.have.length(2)
328 |     expect(matches[0].textContent).to.equal('T')
329 |     expect(matches[1].textContent).to.equal('is')
330 | 
331 |     const node2 = await getHighlighterChildren({
332 |       findChunks: () => (
333 |         []
334 |       ),
335 |       searchWords: ['This'],
336 |       textToHighlight: 'This is text'
337 |     })
338 |     const matches2 = node2.querySelectorAll(HIGHLIGHT_QUERY_SELECTOR)
339 |     expect(matches2).to.have.length(0)
340 |   })
341 | 
342 |   it('should render chucks with the appropriate classes when case-insensitive', async () => {
343 |     const node = await getHighlighterChildren({
344 |       searchWords: ['This', 'is', 'text'],
345 |       textToHighlight: 'This is text',
346 |       highlightClassName: { This: 'this', is: 'is', text: 'text' }
347 |     })
348 |     const allMatches = node.querySelectorAll('mark')
349 |     expect(allMatches).to.have.length(3)
350 |     expect(allMatches[0].classList).to.contain('this')
351 |     expect(allMatches[1].classList).to.contain('is')
352 |     expect(allMatches[2].classList).to.contain('text')
353 |   })
354 | 
355 |   it('should render chucks with the appropriate classes when case-sensitive', async () => {
356 |     const node = await getHighlighterChildren({
357 |       caseSensitive: true,
358 |       searchWords: ['This', 'is', 'TEXT'],
359 |       textToHighlight: 'This is TEXT',
360 |       highlightClassName: { this: 'this', is: 'is', text: 'text' }
361 |     })
362 |     const allMatches = node.querySelectorAll('mark')
363 |     expect(allMatches).to.have.length(3)
364 |     expect(allMatches[0].classList).not.to.contain('this')
365 |     expect(allMatches[1].classList).to.contain('is')
366 |     expect(allMatches[2].classList).not.to.contain('text')
367 |   })
368 | 
369 |   it('should spread additional custom props onto the wrapper span', async () => {
370 |     const node = await getHighlighterChildren({
371 |       searchWords: ['This', 'is', 'TEXT'],
372 |       textToHighlight: 'This is TEXT',
373 |       'data-test-attribute': 'data attribute content',
374 |       title: 'span title',
375 |       className: 'test-class'
376 |     })
377 | 
378 |     const matches = node.querySelectorAll('.test-class')
379 |     expect(matches).to.have.length(0)
380 |     expect(node.title).to.equal('span title')
381 |     expect(node.classList.contains('test-class')).to.equal(true)
382 |     expect(node.dataset.testAttribute).to.equal('data attribute content')
383 |   })
384 | 
385 |   it('should use :unhighlightTag if provided', async () => {
386 |     const node = await getHighlighterChildren({
387 |       searchWords: ['This', 'is', 'TEXT'],
388 |       textToHighlight: 'Hello World',
389 |       unhighlightTag: 'div',
390 |       unhighlightClassName: UNHIGHLIGHT_CLASS
391 |     })
392 | 
393 |     const matches = node.querySelectorAll(`.${UNHIGHLIGHT_CLASS}`)
394 |     expect(matches).to.have.length(1)
395 |     expect(matches[0].nodeName).to.equal('DIV')
396 |   })
397 | 
398 |   it('should support class components via :unhighlightTag', async () => {
399 |     class UnHighlightTag extends React.Component {
400 |       render () {
401 |         const { highlightIndex, ...rest } = this.props
402 | 
403 |         return (
404 |           <a {...rest} />
405 |         )
406 |       }
407 |     }
408 | 
409 |     const node = await getHighlighterChildren({
410 |       autoEscape: true,
411 |       unhighlightTag: UnHighlightTag,
412 |       searchWords: ['text'],
413 |       textToHighlight: 'This is text'
414 |     })
415 |     const matches = node.querySelectorAll(UNHIGHLIGHT_QUERY_SELECTOR)
416 |     expect(matches[0].tagName).to.equal('A')
417 |   })
418 | 
419 |   it('should support stateless functional components via :unhighlightTag', async () => {
420 |     const UnHighlightTag = ({ highlightIndex, ...rest }) => (
421 |       <a {...rest} />
422 |     )
423 | 
424 |     const node = await getHighlighterChildren({
425 |       autoEscape: true,
426 |       unhighlightTag: UnHighlightTag,
427 |       searchWords: ['text'],
428 |       textToHighlight: 'This is text'
429 |     })
430 |     const matches = node.querySelectorAll(UNHIGHLIGHT_QUERY_SELECTOR)
431 |     expect(matches[0].tagName).to.equal('A')
432 |   })
433 | })
434 |

--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /** @flow */
2 | import Highlighter from './Highlighter'
3 | 
4 | export default Highlighter
5 |

--------------------------------------------------------------------------------
/src/test-utils.js:
--------------------------------------------------------------------------------
 1 | import { createRoot } from 'react-dom/client'
 2 | 
 3 | /**
 4 |  * Helper method for testing components that may use Portal and thus require cleanup.
 5 |  * This helper method renders components to a transient node that is destroyed after the test completes.
 6 |  * Note that rendering twice within the same test method will update the same element (rather than recreate it).
 7 |  */
 8 | export function render (markup) {
 9 |   if (!render._root) {
10 |     const div = document.createElement('div')
11 |     document.body.appendChild(div)
12 |     const root = createRoot(div)
13 |     render._root = root
14 |     render._mountNode = div
15 | 
16 |     afterEach(render.unmount)
17 |   }
18 | 
19 |   render._root.render(markup)
20 | }
21 | 
22 | /**
23 |  * The render() method auto-unmounts components after each test has completed.
24 |  * Use this method manually to test the componentWillUnmount() lifecycle method.
25 |  */
26 | render.unmount = function () {
27 |   if (render._root) {
28 |     render._root.unmount()
29 |     document.body.removeChild(render._mountNode)
30 |     render._root = null
31 |     render._mountNode = null
32 |   }
33 | }
34 |

--------------------------------------------------------------------------------
/src/tests.js:
--------------------------------------------------------------------------------
1 | // Reference: https://babeljs.io/docs/usage/polyfill/
2 | // Reference: https://github.com/zloirock/core-js
3 | // Polyfill a full ES6 environment
4 | import 'babel/polyfill'
5 | 
6 | // Reference: https://github.com/webpack/karma-webpack#alternative-usage
7 | const tests = require.context('.', true, /\.test\.js$/)
8 | tests.keys().forEach(tests)
9 |

--------------------------------------------------------------------------------
/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 2 | const path = require('path')
 3 | const webpack = require('webpack')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'eval',
 7 |   entry: [
 8 |     'babel/polyfill',
 9 |     './website/index.js'
10 |   ],
11 |   output: {
12 |     path: 'build',
13 |     filename: '/static/[name].js'
14 |   },
15 |   plugins: [
16 |     new HtmlWebpackPlugin({
17 |       filename: 'index.html',
18 |       inject: true,
19 |       template: './website/index.html'
20 |     }),
21 |     new webpack.NoErrorsPlugin()
22 |   ],
23 |   module: {
24 |     loaders: [
25 |       {
26 |         test: /\.js$/,
27 |         loader: 'babel',
28 |         exclude: path.join(__dirname, 'node_modules')
29 |       },
30 |       {
31 |         test: /\.css$/,
32 |         loaders: ['style', 'css?modules&importLoaders=1', 'cssnext'],
33 |         exclude: path.join(__dirname, 'node_modules')
34 |       }
35 |     ]
36 |   },
37 |   devServer: {
38 |     contentBase: 'build',
39 |     port: 3567
40 |   }
41 | }
42 |

--------------------------------------------------------------------------------
/webpack.config.dist.base.js:
--------------------------------------------------------------------------------
 1 | const path = require('path')
 2 | 
 3 | module.exports = {
 4 |   devtool: 'source-map',
 5 |   entry: [
 6 |     './src/index.js'
 7 |   ],
 8 |   output: {
 9 |     path: 'dist',
10 |     library: 'react-highlight-words'
11 |   },
12 |   plugins: [
13 |   ],
14 |   externals: {
15 |     'react': 'react'
16 |   },
17 |   module: {
18 |     loaders: [
19 |       {
20 |         test: /\.js$/,
21 |         loader: 'babel',
22 |         exclude: /(node_modules)/,
23 |         include: path.join(__dirname, 'src')
24 |       },
25 |       {
26 |         test: /\.css$/,
27 |         loaders: ['style', 'css?modules&importLoaders=1', 'cssnext'],
28 |         exclude: path.join(__dirname, 'node_modules')
29 |       }
30 |     ]
31 |   }
32 | }
33 |

--------------------------------------------------------------------------------
/webpack.config.dist.cjs.js:
--------------------------------------------------------------------------------
 1 | const baseDistConfig = require('./webpack.config.dist.base')
 2 | const _ = require('lodash')
 3 | 
 4 | const cjsDistConfig = {
 5 |   output: {
 6 |     filename: '[name].js',
 7 |     libraryTarget: 'commonjs2'
 8 |   }
 9 | }
10 | 
11 | module.exports = _.merge(baseDistConfig, cjsDistConfig)
12 |

--------------------------------------------------------------------------------
/webpack.config.dist.umd.js:
--------------------------------------------------------------------------------
 1 | const baseDistConfig = require('./webpack.config.dist.base')
 2 | const _ = require('lodash')
 3 | 
 4 | const umdDistConfig = {
 5 |   output: {
 6 |     filename: '[name].umd.js',
 7 |     libraryTarget: 'umd'
 8 |   }
 9 | }
10 | 
11 | module.exports = _.merge(baseDistConfig, umdDistConfig)
12 |

--------------------------------------------------------------------------------
/webpack.config.test.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 2 | const path = require('path')
 3 | const webpack = require('webpack')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'eval',
 7 |   entry: [
 8 |     'babel/polyfill',
 9 |     './website/index.js'
10 |   ],
11 |   output: {
12 |     path: 'build',
13 |     filename: '/static/[name].js'
14 |   },
15 |   plugins: [
16 |     new HtmlWebpackPlugin({
17 |       filename: 'index.html',
18 |       inject: true,
19 |       template: './website/index.html'
20 |     }),
21 |     new webpack.NoErrorsPlugin(),
22 |     new webpack.DefinePlugin({
23 |       'process.env': {
24 |         // to temporarily suppress "ReactDOM.render is no longer supported in React 18" warnings
25 |         // should be removed after switching to createRoot
26 |         'NODE_ENV': JSON.stringify('production')
27 |       }
28 |     })
29 |   ],
30 |   module: {
31 |     loaders: [
32 |       {
33 |         test: /\.js$/,
34 |         loader: 'babel',
35 |         exclude: path.join(__dirname, 'node_modules')
36 |       },
37 |       {
38 |         test: /\.css$/,
39 |         loaders: ['style', 'css?modules&importLoaders=1', 'cssnext'],
40 |         exclude: path.join(__dirname, 'node_modules')
41 |       }
42 |     ]
43 |   }
44 | }
45 |

--------------------------------------------------------------------------------
/webpack.config.website.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 2 | const path = require('path')
 3 | const webpack = require('webpack')
 4 | 
 5 | module.exports = {
 6 |   devtool: 'source-map',
 7 |   entry: [
 8 |     'babel/polyfill',
 9 |     './website/index.js'
10 |   ],
11 |   output: {
12 |     path: 'build',
13 |     filename: 'static/[name].js'
14 |   },
15 |   plugins: [
16 |     new HtmlWebpackPlugin({
17 |       filename: 'index.html',
18 |       inject: true,
19 |       template: './website/index.html'
20 |     }),
21 |     new webpack.DefinePlugin({
22 |       'process.env': {
23 |         'NODE_ENV': JSON.stringify('production')
24 |       }
25 |     })
26 |   ],
27 |   module: {
28 |     loaders: [
29 |       {
30 |         test: /\.js$/,
31 |         loader: 'babel',
32 |         exclude: path.join(__dirname, 'node_modules')
33 |       },
34 |       {
35 |         test: /\.css$/,
36 |         loaders: ['style', 'css?modules&importLoaders=1', 'cssnext'],
37 |         exclude: path.join(__dirname, 'node_modules')
38 |       }
39 |     ]
40 |   }
41 | }
42 |

--------------------------------------------------------------------------------
/website/Application.css:
--------------------------------------------------------------------------------
 1 | .headerRow {
 2 |   height: 300px;
 3 |   display: flex;
 4 |   align-items: flex-end;
 5 |   justify-content: center;
 6 |   background-color: #263238;
 7 | }
 8 | 
 9 | .logo {
10 |   display: block;
11 | }
12 | 
13 | .body {
14 |   display: flex;
15 |   justify-content: center;
16 | }
17 | 
18 | .card {
19 |   max-width: 600px;
20 |   display: flex;
21 |   flex-direction: column;
22 |   padding: 15px 20px 20px;
23 |   background-color: #eceff1;
24 |   box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .05);
25 |   border-radius: .5em;
26 |   margin: 1rem;
27 | }
28 | 
29 | .footer {
30 |   text-align: center;
31 |   color: #37474f;
32 |   font-size: .8em;
33 | }
34 |

--------------------------------------------------------------------------------
/website/Application.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import HighlighterExample from '../src/Highlighter.example'
 3 | import styles from './Application.css'
 4 | 
 5 | export default function Application () {
 6 |   return (
 7 |     <div>
 8 |       <div className={styles.headerRow}>
 9 |         <img
10 |           className={styles.logo}
11 |           width='482'
12 |           height='278'
13 |           src='https://cloud.githubusercontent.com/assets/29597/11903349/6da3d9c0-a56d-11e5-806d-1c7b96289523.png'
14 |         />
15 |       </div>
16 |       <div className={styles.body}>
17 |         <div className={styles.card}>
18 |           <HighlighterExample/>
19 |         </div>
20 |       </div>
21 |       <div className={styles.footer}>
22 |         react-highlight-words is available under the MIT license.
23 |       </div>
24 |     </div>
25 |   )
26 | }
27 |

--------------------------------------------------------------------------------
/website/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   background-color: #78909c;
 4 |   font-family: 'Roboto', 'Open Sans', sans-serif;
 5 |   font-size: 14px;
 6 | }
 7 | 
 8 | * {
 9 |   box-sizing: border-box;
10 | }
11 |

--------------------------------------------------------------------------------
/website/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This is the entry point to the documentation/demo/test harness site for react-highlight-words.
 3 |  * This target is published to the root of the `gh-pages` branch.
 4 |  * @flow
 5 |  */
 6 | import Application from './Application'
 7 | import React from 'react'
 8 | import { createRoot } from 'react-dom/client'
 9 | import './index.css'
10 | 
11 | const root = createRoot(document.getElementById('root'))
12 | root.render(<Application/>)
13 |

--------------------------------------------------------------------------------