diff options
Diffstat (limited to 'packages/gitbook-plugin-search')
| -rw-r--r-- | packages/gitbook-plugin-search/package.json | 3 | ||||
| -rw-r--r-- | packages/gitbook-plugin-search/src/components/Results.js | 19 |
2 files changed, 16 insertions, 6 deletions
diff --git a/packages/gitbook-plugin-search/package.json b/packages/gitbook-plugin-search/package.json index 3914a2a..1910832 100644 --- a/packages/gitbook-plugin-search/package.json +++ b/packages/gitbook-plugin-search/package.json @@ -5,7 +5,8 @@ "browser": "./_assets/theme.js", "version": "4.0.0", "dependencies": { - "gitbook-core": "4.0.0" + "gitbook-core": "4.0.0", + "react": "^15.3.2" }, "devDependencies": { "gitbook-plugin": "4.0.0", diff --git a/packages/gitbook-plugin-search/src/components/Results.js b/packages/gitbook-plugin-search/src/components/Results.js index 647528a..0e44960 100644 --- a/packages/gitbook-plugin-search/src/components/Results.js +++ b/packages/gitbook-plugin-search/src/components/Results.js @@ -1,22 +1,31 @@ const GitBook = require('gitbook-core'); const { React } = GitBook; +const Highlight = require('react-highlighter'); const Result = React.createClass({ propTypes: { - result: React.PropTypes.object + result: React.PropTypes.object, + query: React.PropTypes.string }, render() { - const { result } = this.props; + const { result, query } = this.props; return ( <div className="Search-ResultContainer"> - <GitBook.InjectedComponent matching={{ role: 'search:result' }} props={{ result }}> + <GitBook.InjectedComponent matching={{ role: 'search:result' }} props={{ result, query }}> <div className="Search-Result"> <h3> <GitBook.Link to={result.url}>{result.title}</GitBook.Link> </h3> - <p>{result.body}</p> + <p> + <Highlight + matchElement="span" + matchClass="Search-MatchSpan" + search={query}> + {result.body} + </Highlight> + </p> </div> </GitBook.InjectedComponent> </div> @@ -46,7 +55,7 @@ const SearchResults = React.createClass({ <h1>{i18n.t('SEARCH_RESULTS_TITLE', { query, count: results.size })}</h1> <div className="Search-Results"> {results.map((result, i) => { - return <Result key={i} result={result} />; + return <Result key={i} result={result} query={query} />; })} </div> </div> |