79940 pass highlighted path to front

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

@@ -10,11 +10,13 @@ class SearchResultList extends React.Component {
       //         when keyword is not in page content, display revisionBody.
       // TASK : https://estoc.weseek.co.jp/redmine/issues/79606
       const snippet = page.elasticSearchResult.snippet;
+      const highlightedPath = page.elasticSearchResult.highlightedPath;
       return (
         <SearchResultListItem
           page={page}
           onClickInvoked={this.props.onClickInvoked}
           snippet={snippet}
+          highlightedPath={highlightedPath}
           noLink
         />
       );

packages/app/src/components/SearchPage/SearchResultListItem.tsx

@@ -15,12 +15,15 @@ type Props ={
     lastUpdateUser: any
   },
   snippet: string,
+  highlightedPath: string,
   onClickInvoked: (data: string) => void,
 }
 
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
-  const { page, snippet, onClickInvoked } = props;
+  const {
+    page, snippet, highlightedPath, onClickInvoked,
+  } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
   const pageId = `#${page._id}`;
@@ -56,7 +59,8 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
             {/* page path */}
             <small className="mb-1">
               <i className="icon-fw icon-home"></i>
-              {pagePathElem}
+              {/* eslint-disable-next-line react/no-danger */}
+              <div dangerouslySetInnerHTML={{ __html: highlightedPath }}>{pagePathElem}</div>
             </small>
             <div className="d-flex my-1 align-items-center">
               {/* page title */}

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

@@ -170,8 +170,7 @@ class SearchService {
 
       data.elasticSearchResult = {
         snippet: filterXss.process(snippet),
-        // todo: use filter xss.process() for matchedPath;
-        matchedPath: pathMatch || '',
+        highlightedPath: filterXss.process(pathMatch),
       };
     });
     return esResult;

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

@@ -6,6 +6,7 @@ import { DevidedPagePath } from '@growi/core';
 export const PagePathLabel = (props) => {
 
   const dPagePath = new DevidedPagePath(props.page.path, false, true);
+  console.log(props.page.path);
 
   let classNames = [''];
   classNames = classNames.concat(props.additionalClassNames);