78577 snippet path

packages/app/src/components/PageList/Page.jsx

@@ -8,10 +8,10 @@ export default class Page extends React.Component {
 
   render() {
     const {
-      page, noLink,
+      page, noLink, matchedPath,
     } = this.props;
 
-    let pagePathElem = <PagePathLabel page={page} additionalClassNames={['mx-1']} />;
+    let pagePathElem = <PagePathLabel page={page} additionalClassNames={['mx-1']} matchedPath={matchedPath} />;
     if (!noLink) {
       pagePathElem = <a className="text-break" href={page.path}>{pagePathElem}</a>;
     }
@@ -30,8 +30,10 @@ export default class Page extends React.Component {
 Page.propTypes = {
   page: PropTypes.object.isRequired,
   noLink: PropTypes.bool,
+  matchedPath: PropTypes.string, // for search result list
 };
 
 Page.defaultProps = {
   noLink: false,
+  matchedPath: null,
 };

packages/app/src/components/SearchPage/SearchResultList.jsx

@@ -41,7 +41,7 @@ class SearchResultList extends React.Component {
             </div>
             {/* TODO: remove dummy snippet and adjust style */}
             <div className="d-block">
-              <Page page={page} noLink />
+              <Page page={page} noLink matchedPath={page.matchedPath} />
               <div
                 className="border-gray mt-5"
                 dangerouslySetInnerHTML={{ __html: snippet }}

packages/app/src/server/routes/search.js

@@ -172,7 +172,7 @@ module.exports = function(crowi, app) {
         }
         if (data._highlight['path.en'] !== null && data._highlight['path.ja'] !== null) {
           const pathMatch = data._highlight['path.en'] == null ? data._highlight['path.ja'] : data._highlight['path.en'];
-          page._doc.mattchedPath = pathMatch;
+          page._doc.matchedPath = pathMatch;
         }
         return page;
       }));

packages/ui/src/components/PagePath/PagePathLabel.jsx

@@ -18,15 +18,21 @@ export const PagePathLabel = (props) => {
     ? <><strong>/</strong></>
     : <>{dPagePath.former}/<strong>{dPagePath.latter}</strong></>;
 
+  if (props.matchedPath !== null) {
+    return <span dangerouslySetInnerHTML={{ __html: props.matchedPath }} />;
+  }
   return <span className={classNames.join(' ')}>{textElem}</span>;
+
 };
 
 PagePathLabel.propTypes = {
   page: PropTypes.object.isRequired,
   isLatterOnly: PropTypes.bool,
   additionalClassNames: PropTypes.arrayOf(PropTypes.string),
+  matchedPath: PropTypes.string, // For search result list
 };
 
 PagePathLabel.defaultProps = {
   additionalClassNames: [],
+  matchedPath: null,
 };