Merge pull request #5443 from weseek/fix/highlight-when-search

fix: highlight when search

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

@@ -66,11 +66,7 @@ class LegacyRevisionRenderer extends React.PureComponent {
    * @param {string} body html strings
    * @param {string} keywords
    */
-  getHighlightedBody(body, _keywords) {
-    const keywords = Array.isArray(_keywords)
-      ? _keywords
-      : [_keywords];
-
+  getHighlightedBody(body, keywords) {
     const normalizedKeywordsArray = [];
     // !!TODO!!: add test code refs: https://redmine.weseek.co.jp/issues/86841
     // Separate keywords
@@ -177,7 +173,7 @@ LegacyRevisionRenderer.propTypes = {
   growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
   markdown: PropTypes.string.isRequired,
   isRenderable: PropTypes.bool,
-  highlightKeywords: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  highlightKeywords: PropTypes.arrayOf(PropTypes.string),
   additionalClassName: PropTypes.string,
 };
 
@@ -195,7 +191,7 @@ const RevisionRenderer = (props) => {
 RevisionRenderer.propTypes = {
   growiRenderer: PropTypes.instanceOf(GrowiRenderer).isRequired,
   markdown: PropTypes.string.isRequired,
-  highlightKeywords: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  highlightKeywords: PropTypes.arrayOf(PropTypes.string),
   additionalClassName: PropTypes.string,
 };
 

packages/app/src/components/SearchPage.tsx

@@ -268,6 +268,7 @@ export const SearchPage = (props: Props): JSX.Element => {
       ref={searchPageBaseRef}
       appContainer={appContainer}
       pages={data?.data}
+      searchingKeyword={keyword}
       onSelectedPagesByCheckboxesChanged={selectedPagesByCheckboxesChangedHandler}
       // Components
       searchControl={searchControl}

packages/app/src/components/SearchPage2/SearchPageBase.tsx

@@ -17,6 +17,10 @@ import { SearchResultContent } from '../SearchPage/SearchResultContent';
 import { SearchResultList } from '../SearchPage/SearchResultList';
 
 
+// https://regex101.com/r/brrkBu/1
+const highlightKeywordsSplitter = new RegExp('"[^"]+"|[^\u{20}\u{3000}]+', 'ug');
+
+
 export interface IReturnSelectedPageIds {
   getSelectedPageIds?: () => Set<string>,
 }
@@ -26,6 +30,7 @@ type Props = {
   appContainer: AppContainer,
 
   pages?: IPageWithMeta<IPageSearchMeta>[],
+  searchingKeyword?: string,
 
   forceHideMenuItems?: ForceHideMenuItems,
 
@@ -40,6 +45,7 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
   const {
     appContainer,
     pages,
+    searchingKeyword,
     forceHideMenuItems,
     onSelectedPagesByCheckboxesChanged,
     searchControl, searchResultListHead, searchPager,
@@ -51,10 +57,6 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
   const { data: isSearchServiceConfigured } = useIsSearchServiceConfigured();
   const { data: isSearchServiceReachable } = useIsSearchServiceReachable();
 
-  // TODO get search keywords and split
-  // ref: RevisionRenderer
-  //   [...keywords.match(/"[^"]+"|[^\u{20}\u{3000}]+/ug)].forEach((keyword, i) => {
-  const [highlightKeywords, setHightlightKeywords] = useState<string[]>([]);
   const [selectedPageIdsByCheckboxes] = useState<Set<string>>(new Set());
   // const [allPageIds] = useState<Set<string>>(new Set());
   const [selectedPageWithMeta, setSelectedPageWithMeta] = useState<IPageWithMeta<IPageSearchMeta> | undefined>();
@@ -123,11 +125,6 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
     }
   }, [onSelectedPagesByCheckboxesChanged, pages, selectedPageIdsByCheckboxes]);
 
-  useEffect(() => {
-    if (searchResultListHead != null && searchResultListHead.props != null) {
-      setHightlightKeywords(searchResultListHead.props.searchingKeyword);
-    }
-  }, [searchResultListHead]);
   if (!isSearchServiceConfigured) {
     return (
       <div className="grw-container-convertible">
@@ -152,6 +149,10 @@ const SearchPageBaseSubstance: ForwardRefRenderFunction<ISelectableAll & IReturn
     );
   }
 
+  const highlightKeywords = searchingKeyword != null
+    ? highlightKeywordsSplitter.exec(searchingKeyword) ?? undefined
+    : undefined;
+
   return (
     <div className="content-main">
       <div className="search-result-base d-flex" data-testid="search-result-base">

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

@@ -647,7 +647,7 @@ body.pathname-sidebar {
   }
   .page-list {
     .highlighted-keyword {
-      background-color: $bgcolor-keyword-highlighted;
+      background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
     }
   }
 }