78577 setup snippet for displaing

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

@@ -9,6 +9,13 @@ class SearchResultList extends React.Component {
   render() {
     return this.props.pages.map((page) => {
       const pageId = `#${page._id}`;
+      let snippet = '';
+      if (page.snippet == null) {
+        snippet = page.contentWithNoKeyword;
+      }
+      else {
+        snippet = page.snippet;
+      }
       return (
         <li key={page._id} className="nav-item page-list-li w-100 m-0 border-bottom">
           <a
@@ -30,6 +37,11 @@ class SearchResultList extends React.Component {
             {/* TODO: remove dummy snippet and adjust style */}
             <div className="d-block">
               <Page page={page} noLink />
+              <div
+                className="border-gray mt-5"
+                dangerouslySetInnerHTML={{ __html: snippet }}
+              >
+              </div>
             </div>
             <div className="ml-auto d-flex">
               {this.props.deletionMode && (

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

@@ -30,6 +30,7 @@ module.exports = function(crowi, app) {
   // var debug = require('debug')('growi:routes:search')
   const Page = crowi.model('Page');
   const User = crowi.model('User');
+  const Revision = crowi.model('Revision');
   const ApiResponse = require('../util/apiResponse');
   const ApiPaginate = require('../util/apiPaginate');
 
@@ -150,14 +151,27 @@ module.exports = function(crowi, app) {
 
       const ids = esResult.data.map((page) => { return page._id });
       const findResult = await Page.findListByPageIds(ids);
-
-      // add tags and snippet data to result pages
-      findResult.pages.map((page) => {
+      const xss = require('xss');
+      const options = {
+        whiteList: {
+          em: ['class'],
+        },
+      };
+      const myXss = new xss.FilterXSS(options);
+      // add tags and snippet data/contentWithNoKeyword to result pages
+      await Promise.all(findResult.pages.map(async(page) => {
         const data = esResult.data.find((data) => { return page.id === data._id });
         page._doc.tags = data._source.tag_names;
-        page._doc.snippet = data._highlight;
+        if (data._highlight['body.en'] == null && data._highlight['body.ja'] == null) {
+          const revision = await Revision.findById(page.revision);
+          page._doc.contentWithNoKeyword = myXss.process(revision.body);
+        }
+        else {
+          const snippet = data._highlight['body.en'] == null ? data._highlight['body.ja'] : data._highlight['body.en'];
+          page._doc.snippet = myXss.process(snippet);
+        }
         return page;
-      });
+      }));
 
       result.meta = esResult.meta;
       result.totalCount = findResult.totalCount;

packages/app/src/styles/theme/_apply-colors.scss

@@ -591,6 +591,9 @@ body.pathname-sidebar {
 .search-result {
   .search-result-list {
     .page-list {
+      .highlighted-keyword {
+        background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
+      }
       .page-list-ul {
         > li.nav-item > a.nav-link {
           color: inherit;