Merge pull request #445 from outline/search-highlight

Add highlighting to search results

app/components/DocumentPreview/DocumentPreview.js

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'shared/styles/constants';
+import Highlight from 'components/Highlight';
 import StarredIcon from 'components/Icon/StarredIcon';
 import PublishingInfo from './components/PublishingInfo';
 
@@ -84,12 +85,18 @@ class DocumentPreview extends Component {
   };
 
   render() {
-    const { document, showCollection, innerRef, ...rest } = this.props;
+    const {
+      document,
+      showCollection,
+      innerRef,
+      highlight,
+      ...rest
+    } = this.props;
 
     return (
       <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
         <h3>
-          {document.title}
+          <Highlight text={document.title} highlight={highlight} />
           {document.starred ? (
             <a onClick={this.unstar}>
               <StyledStar solid />

app/components/Highlight/Highlight.js

@@ -0,0 +1,34 @@
+// @flow
+import React from 'react';
+import replace from 'string-replace-to-array';
+import styled from 'styled-components';
+import { color } from 'shared/styles/constants';
+
+type Props = {
+  highlight: ?string,
+  text: string,
+  caseSensitive?: boolean,
+};
+
+function Highlight({ highlight, caseSensitive, text, ...rest }: Props) {
+  return (
+    <span {...rest}>
+      {highlight
+        ? replace(
+            text,
+            new RegExp(
+              (highlight || '').replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&'),
+              caseSensitive ? 'g' : 'gi'
+            ),
+            (tag, index) => <Mark key={index}>{tag}</Mark>
+          )
+        : text}
+    </span>
+  );
+}
+
+const Mark = styled.mark`
+  background: ${color.yellow};
+`;
+
+export default Highlight;

app/components/Highlight/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Highlight from './Highlight';
+export default Highlight;