Added highlighting of result

- uses react-highlight-words to handle the highlighting
- added SearchQueryContext to enable having the query available everywhere
- also highlight stems (for example, if the query is "failed", it will also find the word "fails" as they
   share the same stem. ElasticLunr does not provide a way to show the full "fails" word, so currently we highlight
   the beginning of the word)

Author: vincent-psarga

package.json

@@ -28,10 +28,12 @@
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-fontawesome": "^0.1.9",
     "@types/elasticlunr": "^0.9.0",
+    "@types/react-highlight-words": "^0.16.1",
     "color": "^3.1.2",
     "elasticlunr": "^0.9.5",
     "marked": "^0.8.2",
     "react-accessible-accordion": "^3.0.1",
+    "react-highlight-words": "^0.16.0",
     "sanitize-html": "^1.23.0"
   },
   "peerDependencies": {

src/SearchQueryContext.ts

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default React.createContext({ query: '' })

src/components/app/FilteredResults.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import GherkinQueryContext from '../../GherkinQueryContext'
+
 import SearchBar from './SearchBar'
 import { GherkinDocumentList } from '../..'
 

src/components/app/HighLight.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import Highlighter from 'react-highlight-words'
+import SearchQueryContext from '../../SearchQueryContext'
+import elasticlunr from 'elasticlunr'
+
+interface IProps {
+  text: string
+}
+
+const HighLight: React.FunctionComponent<IProps> = ({ text }) => {
+  const searchQueryContext = React.useContext(SearchQueryContext)
+  const queryWords = searchQueryContext.query
+    ? searchQueryContext.query.split(' ')
+    : []
+  const searchWords: string[] = []
+
+  for (const word of queryWords) {
+    const stem = elasticlunr.stemmer(word)
+    searchWords.push(word)
+
+    if (stem !== word) {
+      searchWords.push(stem)
+    }
+  }
+
+  elasticlunr.stemmer
+
+  return (
+    <Highlighter
+      className="highlight"
+      highlightClassName="YourHighlightClass"
+      searchWords={searchWords}
+      autoEscape={true}
+      textToHighlight={text}
+    />
+  )
+}
+
+export default HighLight

src/components/app/QueriesWrapper.tsx

@@ -1,24 +1,31 @@
 import React from 'react'
 import GherkinQueryContext from '../../GherkinQueryContext'
 import CucumberQueryContext from '../../CucumberQueryContext'
+import SearchQueryContext from '../../SearchQueryContext'
 import { Query as GherkinQuery } from '@cucumber/gherkin'
 import { Query as CucumberQuery } from '@cucumber/query'
 
 interface IProps {
   cucumberQuery: CucumberQuery
   gherkinQuery: GherkinQuery
+  query?: string
 }
 
 const QueriesWrapper: React.FunctionComponent<IProps> = ({
   gherkinQuery,
   cucumberQuery,
+  query,
   children,
 }) => {
+  const searchQuery = { query: query }
+
   return (
     <div className="cucumber-react">
       <CucumberQueryContext.Provider value={cucumberQuery}>
         <GherkinQueryContext.Provider value={gherkinQuery}>
-          {children}
+          <SearchQueryContext.Provider value={searchQuery}>
+            {children}
+          </SearchQueryContext.Provider>
         </GherkinQueryContext.Provider>
       </CucumberQueryContext.Provider>
     </div>

src/components/app/SearchBar.tsx

@@ -1,17 +1,18 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import SearchQueryContext from '../../SearchQueryContext'
 
 interface IProps {
   queryUpdated: (query: string) => any
 }
 
 const SearchBar: React.FunctionComponent<IProps> = ({ queryUpdated }) => {
-  const [query, setQuery] = useState('')
+  const searchQueryContext = React.useContext(SearchQueryContext)
 
   const updateQueryOnEnter = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter') {
-      queryUpdated(query)
+      queryUpdated(searchQueryContext.query)
     }
   }
 
@@ -20,9 +21,13 @@ const SearchBar: React.FunctionComponent<IProps> = ({ queryUpdated }) => {
       <input
         type="text"
         onKeyPress={updateQueryOnEnter}
-        onChange={(event) => setQuery(event.target.value)}
+        onChange={(event) => (searchQueryContext.query = event.target.value)}
       />
-      <button type="submit" onClick={() => queryUpdated(query)} value="search">
+      <button
+        type="submit"
+        onClick={() => queryUpdated(searchQueryContext.query)}
+        value="search"
+      >
         <FontAwesomeIcon icon={faSearch} />
       </button>
     </div>

src/components/gherkin/DocString.tsx

@@ -1,13 +1,18 @@
 import React from 'react'
 import { messages } from '@cucumber/messages'
 import IDocString = messages.GherkinDocument.Feature.Step.IDocString
+import HighLight from '../app/HighLight'
 
 interface IProps {
   docString: IDocString
 }
 
 const DocString: React.FunctionComponent<IProps> = ({ docString }) => {
-  return <pre>{docString.content}</pre>
+  return (
+    <pre>
+      <HighLight text={docString.content} />
+    </pre>
+  )
 }
 
 export default DocString

src/components/gherkin/Feature.tsx

@@ -7,6 +7,7 @@ import { messages } from '@cucumber/messages'
 import Rule from './Rule'
 import Background from './Background'
 import IFeature = messages.GherkinDocument.IFeature
+import HighLight from '../app/HighLight'
 
 interface IProps {
   feature: IFeature
@@ -18,7 +19,9 @@ const Feature: React.FunctionComponent<IProps> = ({ feature }) => {
       <Tags tags={feature.tags} />
       <h1>
         <Keyword>{feature.keyword}:</Keyword>{' '}
-        <span className="step-text">{feature.name}</span>
+        <span className="step-text">
+          <HighLight text={feature.name} />
+        </span>
       </h1>
       <div className="cucumberFeature__indent">
         {feature.description ? (

src/components/gherkin/Rule.tsx

@@ -5,6 +5,7 @@ import Scenario from './Scenario'
 import { messages } from '@cucumber/messages'
 import Background from './Background'
 import IRule = messages.GherkinDocument.Feature.FeatureChild.IRule
+import HighLight from '../app/HighLight'
 
 interface IProps {
   rule: IRule
@@ -15,7 +16,9 @@ const Rule: React.FunctionComponent<IProps> = ({ rule }) => {
     <section>
       <h2>
         <Keyword>{rule.keyword}:</Keyword>{' '}
-        <span className="step-text">{rule.name}</span>
+        <span className="step-text">
+          <HighLight text={rule.name} />
+        </span>
       </h2>
       <div className="indent">
         <Description description={rule.description} />

src/components/gherkin/Scenario.tsx

@@ -10,6 +10,7 @@ import IScenario = messages.GherkinDocument.Feature.IScenario
 import CucumberQueryContext from '../../CucumberQueryContext'
 import GherkinQueryContext from '../../GherkinQueryContext'
 import UriContext from '../../UriContext'
+import HighLight from '../app/HighLight'
 
 interface IProps {
   scenario: IScenario
@@ -31,7 +32,9 @@ const Scenario: React.FunctionComponent<IProps> = ({ scenario }) => {
         <Tags tags={scenario.tags} />
         <h2>
           <Keyword>{scenario.keyword}:</Keyword>{' '}
-          <span className="step-text">{scenario.name}</span>
+          <span className="step-text">
+            <HighLight text={scenario.name} />
+          </span>
         </h2>
         <Description description={scenario.description} />
         <HookList hookSteps={beforeHooks} />